From 3c3bfb6dea1b20447ba8bb48ec95a8cc4b556129 Mon Sep 17 00:00:00 2001 From: Alex Sassmannshausen Date: Sun, 18 Aug 2013 15:23:03 +0200 Subject: [PATCH 3/3] list-packages: Externalise CSS and JavaScript. * build-aux/list-packages.scm (%load-directory): New variable. (%css-file): New variable. (%js-file): New variable. (insert-css): Rewrite to, by default, generate a element calling the external CSS stylesheet. Contains structure for inlining the CSS from the external stylesheet. (insert-js): Rewrite to, by default, call external JS file, rather than inlining it. Contains structure for inlining the JS from the external file. (list-packages): generate sxml from insert-css and insert-js. * package-list.css: New CSS file, with minor tweaks. * package-list.js: New JS file, identical to last commit. --- build-aux/list-packages.scm | 134 +++++++++++-------------------------------- build-aux/package-list.css | 81 ++++++++++++++++++++++++++ build-aux/package-list.js | 43 ++++++++++++++ 3 files changed, 158 insertions(+), 100 deletions(-) create mode 100644 build-aux/package-list.css create mode 100644 build-aux/package-list.js diff --git a/build-aux/list-packages.scm b/build-aux/list-packages.scm index 161116b..883c32b 100755 --- a/build-aux/list-packages.scm +++ b/build-aux/list-packages.scm @@ -27,11 +27,13 @@ exec guile -l "$0" \ #:use-module (guix packages) #:use-module (guix licenses) #:use-module (guix gnu-maintenance) + #:use-module (guix build utils) #:use-module (gnu packages) #:use-module (sxml simple) #:use-module (web uri) #:use-module (ice-9 match) #:use-module (srfi srfi-1) + #:use-module (srfi srfi-26) #:export (list-packages)) ;;; Commentary: @@ -185,105 +187,37 @@ bulk_show_hide even when the number of IDs is smaller than GROUP-COUNTER." "^"))) -(define (insert-css) - "Return the CSS for the list-packages page." - (format #t -"")) +(define %load-directory + (string-append (dirname (current-filename)) "/")) -(define (insert-js) - "Return the JavaScript for the list-packages page." - (format #t -"")) +(define %css-file + "package-list.css") +(define %js-file + "package-list.js") + +(define (insert-css . inline) + "Return an sxml link to the CSS file for the list-packages page. If +the optional inline argument is present, inline the CSS instead. +Inlining currently fail with wrong-num-args error." + (if (null? inline) + `(link (@ (type "text/css") + (rel "stylesheet") + (href ,%css-file))) + `(style (@ (type "text/css")) + ,(with-input-from-file (string-append %load-directory %css-file) + (cute dump-port <> (current-output-port)))))) + +(define (insert-js . inline) + "Return an sxml link to the CSS file for the list-packages page. If +the optional inline argument is present, inline the CSS instead. +Inlining currently fail with wrong-num-args error." + (if (null? inline) + `(script (@ (type "text/javascript") + (src ,%js-file)) + " ") + `(style (@ (type "text/javascript")) + ,(with-input-from-file (string-append %load-directory %js-file) + (cute dump-port <> (current-output-port)))))) (define (list-packages . args) @@ -303,8 +237,8 @@ with gnu.org server-side include and all that." GNU Guix - GNU Distribution - GNU Project ") - (insert-css) - (insert-js) + (sxml->xml `(,(insert-css) + ,(insert-js))) (format #t "") (sxml->xml (packages->sxml packages)) diff --git a/build-aux/package-list.css b/build-aux/package-list.css new file mode 100644 index 0000000..67d423a --- /dev/null +++ b/build-aux/package-list.css @@ -0,0 +1,81 @@ +/* license: CC0 */ +a { + transition: all 0.3s; +} + +div#intro { + margin-bottom: 2em; +} +div#intro div, div#intro p { + padding:0.5em; +} +div#intro div { + float:left; +} +div#intro img { + float:left; + padding:0.75em; +} + +table#packages, table#packages tr, table#packages tbody, table#packages td, table#packages th { + border: 0px solid black; + clear: both; +} + +div.package-description { + position: relative; +} + +table#packages tr:nth-child(even) { + background-color: #FFF; +} +table#packages tr:nth-child(odd) { + background-color: #EEE; +} +table#packages tr:hover, table#packages tr:focus, table#packages tr:active { + background-color: #DDD; +} +table#packages tr:first-child, table#packages tr:first-child:hover, table#packages tr:first-child:focus, table#packages tr:first-child:active { + background-color: #333; + color: #fff; +} +table#packages td +{ + margin:0px; + padding:0.2em 0.5em; +} +table#packages td:first-child { +width:10%; +text-align:center; +} +table#packages td:nth-child(2){ + width:30%; +} +table#packages td:last-child { + width:60%; +} + +img.package-logo { +float: left; +padding: 0.75em; +} + +table#packages span a { + float: right; +} + +a#top { +position:fixed; +right:10px; +bottom:10px; +font-size:150%; +background-color:#EEE; +padding:10px 7.5px 0 7.5px; +text-decoration:none; +color:#000; +border-radius:5px; +} +a#top:hover, a#top:focus { +background-color:#333; +color:#fff; +} \ No newline at end of file diff --git a/build-aux/package-list.js b/build-aux/package-list.js new file mode 100644 index 0000000..8b2971a --- /dev/null +++ b/build-aux/package-list.js @@ -0,0 +1,43 @@ +// license: CC0 +function show_hide(idThing) +{ + if(document.getElementById && document.createTextNode) { + var thing = document.getElementById(idThing); + /* Used to change the link text, depending on whether description is + collapsed or expanded */ + var thingLink = thing.previousSibling.lastChild.firstChild; + if (thing) { + if (thing.style.display == "none") { + thing.style.display = ""; + thingLink.data = 'Collapse'; + } else { + thing.style.display = "none"; + thingLink.data = 'Expand'; + } + } + } +} +/* Add controllers used for collapse/expansion of package descriptions */ +function prep(idThing) +{ + var tdThing = document.getElementById(idThing).parentNode; + if (tdThing) { + var aThing = tdThing.firstChild.appendChild(document.createElement('a')); + aThing.setAttribute('href', 'javascript:void(0)'); + aThing.setAttribute('title', 'show/hide package description'); + aThing.appendChild(document.createTextNode('Expand')); + aThing.onclick=function(){show_hide(idThing);}; + /* aThing.onkeypress=function(){show_hide(idThing);}; */ + } +} +/* Take n element IDs, prepare them for javascript enhanced +display and hide the IDs by default. */ +function bulk_show_hide() +{ + if(document.getElementById && document.createTextNode) { + for(var i=0; i