☰

PAUSE

Semantic markup for file lists in pause.perl.org

  1. // ==UserScript==
  2. // @name        PAUSE
  3. // @namespace   https://sourceforge.net/u/van-de-bugger/
  4. // @description Semantic markup for file lists in pause.perl.org
  5. // @include     https://pause.perl.org/pause/authenquery
  6. // @include     https://pause.perl.org/pause/authenquery?ACTION=show_files
  7. // @include     https://pause.perl.org/pause/authenquery?ACTION=delete_files
  8. // @include     https://pause.perl.org/pause/authenquery?ACTION=reindex
  9. // @version     0.1.2
  10. // @grant       GM_addStyle
  11. // ==/UserScript==
  12.  
  13. /*
  14.     ------------------------------------------------------------------------------------------------
  15.  
  16.     Copyright (C) 2016 Van de Bugger
  17.  
  18.     License GPLv3+: The GNU General Public License version 3 or later
  19.     <http://www.gnu.org/licenses/gpl-3.0.txt>.
  20.  
  21.     This is free software: you are free to change and redistribute it. There is NO WARRANTY, to the
  22.     extent permitted by law.
  23.  
  24.     ------------------------------------------------------------------------------------------------
  25. */
  26.  
  27. /**
  28.  
  29. This is a Greasemonkey script for [PAUSE](https://pause.perl.org/).
  30.  
  31. ## Problem
  32.  
  33. File lists displayed in "Show my files" and "Delete files" are err… too spartan.
  34.  
  35. If you have a dozen of distributions and few releases (let me say, 3) for every distribution, your
  36. file list will include more than hundred files. The list is badly aligned (if you have file names
  37. longer than ~50 characters). It would be nice to group files by releases and distributions, use
  38. color highlighting for denoting trial releases and files scheduled for deletion. But spartan list
  39. markup does not allow applying user style sheet because entire list is just a single `PRE` element
  40. without a structure.
  41.  
  42. The list on "Delete files" page has 3-color highlighting, but it does not help because coloring is
  43. not semantic: first line highlighted with red, the second with green, the third with blue
  44. regardless of files shown in these lines. Usually release consist of 3 files (.meta, .readme and
  45. .tar.gz), so at the top of the list .meta files are red, .readme are green, and tarballs are blue,
  46. but trial releases (which includes only tarball with no .meta and no .readme) and special file
  47. `CHECKSUMS` break the system.
  48.  
  49. Deleting a release is not trivial because you have to mark 3 files to delete. Color highlighting
  50. dazzles and it is so easy to mark a file from adjacent release. (Thanks they are not deleted
  51. immediatelly.)
  52.  
  53. ## Solution
  54.  
  55. This script parses original file list and re-creates it with semantic markup. Every file has name,
  56. size and date. Files are grouped into releases, releases are grouped into distributions.
  57.  
  58. Semantic markup allows using user style sheet to highlight files, releases, or distributions, group
  59. releases and/or distributions visually, add headings, etc.
  60.  
  61. Also, the script makes two changes in list behavior:
  62.  
  63. 1. The script adds two buttons: "Show tarballs only" and "Show all files". Pressing the first
  64. button hides non-tarball files making the list 3 times shorter. Pressing the second button shows
  65. hidden files back. The buttons are added to both "Show my files" and "Delete files" pages.
  66.  
  67. 2. The script automates selecting releases to delete. When you change state of tarball file
  68. checkbox, the change is automatically propagated to all files of the release containing this
  69. tarball. So, the most frequent operation (selecting a release to delete) now requires just one
  70. click instead of 3 clicks. It also eliminates risk to mistakenly select 2 files from one release
  71. and a file from adjacent release. (Selecting individual files is still possible, though.)
  72.  
  73. Both behavioral changes work together nicely: You can hide non-tarball files to have more
  74. compact list of tarballs, select a tarball from the list — accompanying (and currently
  75. invisible) meta and readme files will be selected automatically.
  76.  
  77. *Note:* The script does *not* provide any style sheet. I made it intentionally because my color
  78. preferences may not be suitable for everybody. You may try [my style
  79. sheet](https://userstyles.org/styles/135527/pause).
  80.  
  81. ## Details
  82.  
  83.     <pre id="fileList" class="fileList">
  84.         <span id="Foo" class="distribution">
  85.             <span id="Foo-v0.1.2" class="release">
  86.                 <span id="Foo.meta" class="file meta">
  87.                     <!-- checkbox in case of "Delete files" page -->
  88.                     <span class="name">Foo.meta</span>
  89.                     <span class="namePad">       </span>
  90.                     <span class="sizePad"> </span>
  91.                     <span class="size">2 300</span>
  92.                     <span class="date">2016-11-11T12:00:05Z</span>
  93.                     <span class="eof"><!-- newline character --></span>
  94.                 </span>
  95.                 <!-- More files of this release -->
  96.             </span>
  97.             <!-- More releases of this distribution -->
  98.         </span>
  99.         <!-- More distributions -->
  100.         <span id="special" class="special">
  101.             <span id="CHECKSUMS" class="file">
  102.                 <span class="name">CHECKSUMS</span>
  103.                 <span class="namePad">   </span>
  104.                 <span class="sizePad"></span>
  105.                 <span class="size">34 895</span>
  106.                 <span class="date">2016-11-11T12:00:15Z</span>
  107.                 <span class="eof"><!-- newline character --></span>
  108.             </span>
  109.         </span>
  110.     </pre>
  111.  
  112. The sample is splitted into multiple lines and indented for the sake of readability, actual `PRE`
  113. element has only `SPAN`s children. Text nodes appears only in the bottom level `SPAN`s (name, size,
  114. date, etc).
  115.  
  116. The list generated for "Delete files" page also has `INPUT` elements (checkboxes) taken from the
  117. original list.
  118.  
  119. Trial releases have additional class `trial`. Files sheduled for deletion — class `delete`,
  120. files with ".tar.gz" suffix — `tarball`, files with ".readme" suffix — `readme`, files with
  121. ".meta" suffix — `meta` (shown in example above).
  122.  
  123. Dates are converted to ISO fomat (with dropped second fraction part). Digits in file sizes are
  124. groped by inserting blanks.
  125.  
  126. It is assumed the element is displayed using monospaced font.
  127.  
  128. ## History Log
  129.  
  130. * v0.1.0 — Initial release, "Show my files" and "Delete files" are processed.
  131.  
  132. * v0.1.1 — Page detection implemented to avoid unintentional processing other pages. "Force
  133.     reindexing" page is processed too.
  134.  
  135. * v0.1.2 — Buttons functionality does not require external style sheet, buttons work out-of-the-box
  136.     now.
  137.  
  138. **/
  139.  
  140. function assert( condition, message ) {
  141.     if ( ! condition ) {
  142.         console.log( "throwing: " + message );
  143.         throw message;
  144.     };
  145. };
  146.  
  147. function getCookie( name ) {
  148.     var prefix = name + "=";
  149.     var item;
  150.     if ( document.cookie.length > 0 ) {
  151.         var list = document.cookie.split( ";" );
  152.         item = list.find( function ( item ) {
  153.             return item.startsWith( prefix );
  154.         } );
  155.     };
  156.     if ( item == null ) {
  157.         return null;
  158.     };
  159.     return item.substr( prefix.length );
  160. };
  161.  
  162. function setCookie( name, value ) {
  163.     var prefix = name + "=";
  164.     var list;
  165.     if ( document.cookie.length > 0 ) {
  166.         list = document.cookie.split( ";" );
  167.         list = list.filter( function ( item ) {
  168.             return ! item.startsWith( prefix );
  169.         } );
  170.     } else {
  171.         list = [];
  172.     };
  173.     list.push( prefix + value );
  174.     document.cookie = list.join( ";" );
  175. };
  176.  
  177. /**
  178.     Calls func for each element of the list. list can be either array or NodeList object (which is
  179.     array-like but does not have forEach method). The func is called with 3 arguments: element,
  180.     index, and list.
  181. **/
  182. function forEach( list, func ) {
  183.     if ( list != null ) {
  184.         for ( var i = 0; i < list.length; ++ i ) {
  185.             func( list[ i ], i, list );
  186.         };
  187.     };
  188. };
  189.  
  190. /**
  191.    Adds class addClassName to all elements with className.
  192. **/
  193. function addClass( className, addClassName ) {
  194.     forEach( document.getElementsByClassName( className ), function ( elem ) {
  195.         elem.classList.add( addClassName );
  196.     } );
  197. };
  198.  
  199. /**
  200.    Removes class remClassName from all elements with className.
  201. **/
  202. function remClass( className, remClassName ) {
  203.     forEach( document.getElementsByClassName( className ), function ( elem ) {
  204.         elem.classList.remove( remClassName );
  205.     } );
  206. };
  207.  
  208. /**
  209.     Returns true iff the version is trial one.
  210. **/
  211. function isTrial( version ) {
  212.     return version.includes( "_" );
  213. };
  214.  
  215. /**
  216.     Splits filename into 3 parts: distribution name, version number, and file type (aka suffix).
  217.     Returns an object with 3 fields: dist, ver, and type. ver does not contain leading dash,
  218.     suffix does not contain leading dot.
  219. **/
  220. function parseFilename( name ) {
  221.     var type, ver;
  222.     // Find file type and drop it from name:
  223.     name = name.replace( /(\.meta|\.readme|\.tar.gz)$/, function ( found ) {
  224.         type = found.replace( /^\./, "" );
  225.         return "";
  226.     } );
  227.     // Find version and drop it from name:
  228.     name = name.replace( /-[^-]*$/, function ( found ) {
  229.         ver = found.replace( /^-/, "" );
  230.         return "";
  231.     } );
  232.     return {
  233.         dist : name,
  234.         ver  : ver,
  235.         type : type,
  236.     };
  237. };
  238.  
  239. /**
  240.     Groups digits of the specified number (by inserting blanks into the number). Number must be a
  241.     string made of digits only (no sign nor fractional part is allowed).
  242. **/
  243. function groupDigits( number ) {
  244.     if ( number != null && number.match( /^\d+$/ ) ) {
  245.         var groups = [];
  246.         var rem = number.length % 3;
  247.         var pos = 0;
  248.         if ( rem > 0 ) {
  249.             groups.push( number.substr( pos, rem ) );
  250.             pos += rem;
  251.         };
  252.         while ( pos < number.length ) {
  253.             groups.push( number.substr( pos, 3 ) );
  254.             pos += 3;
  255.         };
  256.         return groups.join( " " );
  257.     };
  258.     return number;
  259. };
  260.  
  261. /**
  262.     Format of dates used by PAUSE.
  263. **/
  264. var dateRe = /[A-Z][a-z][a-z], \d\d [A-Z][a-z][a-z] \d\d\d\d \d\d:\d\d:\d\d GMT/;
  265.  
  266. /**
  267.     Searches string for a first date, and converts found date to the ISO format.
  268. **/
  269. function isoDate( string ) {
  270.     return string == null ? null : string.replace( dateRe, function ( found ) {
  271.         var date = new Date( found );
  272.         return date.toISOString().replace( /\.000Z$/, "Z" );
  273.     } );
  274. };
  275.  
  276. /**
  277.     Creates a DOM element.
  278. **/
  279. function createElement( tag, attrs, content ) {
  280.     var elem = document.createElement( tag );
  281.     for ( var attr in attrs ) {
  282.         elem.setAttribute( attr, attrs[ attr ] );
  283.     };
  284.     if ( typeof content == "string" ) {
  285.         elem.appendChild( document.createTextNode( content ) );
  286.     } else {
  287.         forEach( content, function ( item ) {
  288.             if ( item != null ) {
  289.                 elem.appendChild( item );
  290.             };
  291.         } );
  292.     };
  293.     return elem;
  294. };
  295.  
  296. /**
  297.     Creates SPAN elelment representing a file.
  298. **/
  299. function createFile( file, nameWidth, sizeWidth ) {
  300.     var classList = [ "file" ];
  301.     if ( file.name.endsWith( ".meta" )  ) {
  302.         classList.push( "meta" );
  303.     };
  304.     if ( file.name.endsWith( ".readme" )  ) {
  305.         classList.push( "readme" );
  306.     };
  307.     if ( file.name.endsWith( ".tar.gz" )  ) {
  308.         classList.push( "tarball" );
  309.     };
  310.     if ( file.date != null && file.date.includes( "Scheduled for deletion" ) ) {
  311.         classList.push( "delete" );
  312.     };
  313.     var size = file.size == null ? null : groupDigits( file.size );
  314.     var date = file.date == null ? null : isoDate( file.date );
  315.     var file = createElement( "span", {
  316.         class : classList.join( " " ),
  317.     }, [
  318.         ( "input" in file ? file.input : null ),
  319.         createElement( "span", { class: "name" }, file.name ),
  320.         size == null && date == null ? (
  321.             null
  322.         ) : (
  323.             createElement( "span", { class: "namePad" }, " ".repeat( nameWidth - file.name.length ) )
  324.         ),
  325.         size == null ? (
  326.             null
  327.         ) : (
  328.             createElement( "span", { class: "sizePad" }, " ".repeat( sizeWidth - size.length ) )
  329.         ),
  330.         size == null ? null : createElement( "span", { class: "size" }, size ),
  331.         date == null ? null : createElement( "span", { class: "date" }, date ),
  332.         createElement( "span", { class: "eof" }, "\n" ),
  333.     ] );
  334.     return file;
  335. };
  336.  
  337. /**
  338.     Splits given string into file name, size, and date.
  339. **/
  340. function parseLine( line ) {
  341.     var items = line.trim().split( /\s\s+/ );
  342.     return {
  343.         name : items[ 0 ],
  344.         size : items[ 1 ],
  345.         date : items[ 2 ],
  346.     };
  347. };
  348.  
  349. /**
  350.     Creates a SPAN element with two buttons: "Show tarballs only" and "Show all files". The first
  351.     button hides all non-tarball files (by adding class "hidden"), the second button shows that
  352.     files back (by removing class "hidden").
  353. **/
  354. function createButtons() {
  355.     var hide = createElement( "input", {
  356.         id    : "showTarballsOnly",
  357.         type  : "button",
  358.         value : "Show tarballs only",
  359.     }, [] );
  360.     var show = createElement( "input", {
  361.         id       : "showAllFiles",
  362.         type     : "button",
  363.         value    : "Show all files",
  364.         disabled : "disabled",
  365.     }, [] );
  366.     hide.onclick = function () {
  367.         addClass( "special",   "hidden" );
  368.         addClass( "meta",      "hidden" );
  369.         addClass( "readme",    "hidden" );
  370.         show.disabled = "";
  371.         hide.disabled = "disabled";
  372.         setCookie( "showMode", this.id );
  373.     };
  374.     show.onclick = function () {
  375.         remClass( "special",   "hidden" );
  376.         remClass( "meta",      "hidden" );
  377.         remClass( "readme",    "hidden" );
  378.         show.disabled = "disabled";
  379.         hide.disabled = "";
  380.         setCookie( "showMode", this.id );
  381.     };
  382.     var showMode = getCookie( "showMode" );
  383.     if ( showMode == hide.id ) {
  384.         hide.onclick();
  385.     };
  386.     return createElement( "span", { id : "showMode" }, [
  387.         hide, show
  388.     ] );
  389. };
  390.  
  391. /**
  392.     Parses a file list taken from "Show my files" page. Returns array of objects. Each object
  393.     represents one file and has fileds: name, size, and date.
  394.  
  395.     File list on "Show my files" page looks like:
  396.  
  397.         <pre> name      size  date<br> name     size  date<br>...</pre>
  398.  
  399. **/
  400. function parseShowFiles( element ) {
  401.     var files = [];
  402.     forEach( element.childNodes, function ( child ) {
  403.         if ( child.nodeType == 3 ) {
  404.             files.push( parseLine( child.textContent ) );
  405.         } else if ( child.nodeType == 1 && child.tagName == "BR" ) {
  406.             // Ignore BR elements.
  407.         } else {
  408.             assert( 0, "unexpected node" );
  409.         };
  410.     } );
  411.     return files;
  412. };
  413.  
  414. /**
  415.     Parses a file list taken from "Delete files" page. Returns array of objects. Each object
  416.     represents one file and has fileds: name, size, date, and input. Input is an DOM INPUT element
  417.     *removed* from the tree.
  418.  
  419.     File list on "Delete files" page looks like:
  420.  
  421.         <pre>
  422.         <span><input> name      size  date</span>
  423.         <span><input> name      size  date</span>
  424.         ...
  425.         </pre>
  426.  
  427. **/
  428. function parseDeleteFiles( element ) {
  429.     var files = [];
  430.     forEach( element.childNodes, function ( child ) {
  431.         if ( child.nodeType == 1 && child.tagName == "SPAN" ) {
  432.             var file   = parseLine( child.childNodes[ 1 ].textContent );
  433.             file.input = child.removeChild( child.childNodes[ 0 ] );
  434.             files.push( file );
  435.         } else if ( child.nodeType == 3 && child.textContent.trim() == "" ) {
  436.             // Ignore whitespace-only text nodes.
  437.         } else {
  438.             assert( 0, "unexpected node" );
  439.         };
  440.     } );
  441.     return files;
  442. };
  443.  
  444. /**
  445.     Group plain list of files into hierarchy: Files are groped into releases, releases are grouped
  446.     into distributions. Returns an object:
  447.  
  448.         {
  449.             distros : {
  450.                 distro_name : {
  451.                     release_version : {
  452.                         file_type : file,
  453.                         another_type : athoter_file,
  454.                         ...,
  455.                     },
  456.                     another_release_version : {
  457.                         ...
  458.                     },
  459.                     ...,
  460.                 },
  461.                 another_distro_name : {
  462.                     ...
  463.                 },
  464.                 ...,
  465.             },
  466.             special : [
  467.                 special_file, another_special_file,
  468.             ],
  469.         }
  470.  
  471. **/
  472. function groupFiles( files ) {
  473.     var registry = {
  474.         distros : {},
  475.         special : [],
  476.     };
  477.     files.forEach( function ( file ) {
  478.         var name = parseFilename( file.name );
  479.         if ( file.name == "CHECKSUMS" ) {
  480.             registry.special.push( file );
  481.         } else {
  482.             if ( ! ( name.dist in registry.distros ) ) {
  483.                 registry.distros[ name.dist ] = {};
  484.             };
  485.             if ( ! ( name.ver in registry.distros[ name.dist ] ) ) {
  486.                 registry.distros[ name.dist ][ name.ver ] = {};
  487.             };
  488.             registry.distros[ name.dist ][ name.ver ][ name.type ] = file;
  489.         };
  490.     } );
  491.     return registry;
  492. };
  493.  
  494. /**
  495.     Generates a DOM elelent, representing the file list with semantic markup.
  496. **/
  497. function generateList( files ) {
  498.     var distributions = [];
  499.     var nameWidth = files.reduce( function ( width, file ) {
  500.         return Math.max( width, file.name.length );
  501.     }, 0 );
  502.     var sizeWidth = files.reduce( function ( width, file ) {
  503.         return Math.max( width, file.size == null ? 0 : file.size.length );
  504.     }, 0 );
  505.     sizeWidth = groupDigits( "9".repeat( sizeWidth ) ).length;
  506.     var registry = groupFiles( files );
  507.     for ( var dist in registry.distros ) {
  508.         var releases = [];
  509.         for ( var release in registry.distros[ dist ] ) {
  510.             var files = [];
  511.             for ( var type in registry.distros[ dist ][ release ] ) {
  512.                 var file = registry.distros[ dist ][ release ][ type ];
  513.                 files.push( createFile( file, nameWidth, sizeWidth ) );
  514.             };
  515.             releases.push( createElement(
  516.                 "span",
  517.                 {
  518.                     id    : dist + "-" + release,
  519.                     class : "release" + ( isTrial( release ) ? " trial" : "" ),
  520.                 },
  521.                 files
  522.             ) );
  523.         };
  524.         distributions.push( createElement( "span",
  525.             {
  526.                 id      : dist,
  527.                 class   : "distribution",
  528.             },
  529.             releases
  530.         ) );
  531.     };
  532.     if ( registry.special.length > 0 ) {
  533.         var special = [];
  534.         registry.special.forEach( function ( file ) {
  535.             special.push( createFile( file, nameWidth, sizeWidth ) );
  536.         } );
  537.         distributions.push( createElement( "span",
  538.             {
  539.                 id      : "special",
  540.                 class   : "special",
  541.             },
  542.             special
  543.         ) );
  544.     };
  545.     return createElement( "pre", { id: "fileList", class : "fileList" }, distributions );
  546. };
  547.  
  548. /**
  549.     Automates checkboxes. When a tarball checkbox changed, synchronize other checkboxes of the same
  550.     release with the tarball checkbox.
  551. **/
  552. function automateCheckboxes( element ) {
  553.     forEach( element.getElementsByTagName( "input" ), function ( checkbox ) {
  554.         if ( checkbox.value.endsWith( ".tar.gz" ) ) {
  555.             checkbox.onchange = function () {
  556.                 var state = this.checked;   // New state of the current checkbox.
  557.                 var files = this.parentElement.parentElement.childNodes;
  558.                     // List of files of this release.
  559.                 for ( var i = 0; i < files.length; ++ i ) {
  560.                     files[ i ].getElementsByTagName( "input" )[ 0 ].checked = state;
  561.                 };
  562.             };
  563.         };
  564.     } );
  565. };
  566.  
  567. var pre = document.getElementsByTagName( "pre" )[ 0 ];
  568. var files;
  569.  
  570. /*
  571.     Detect page by element with "firstheader" class. Page address cannot be used for that, because
  572.     page with address <https://pause.perl.org/pause/authenquery?ACTION=delete_files> after pressing
  573.     the button "Delete" becomes the page with address <https://pause.perl.org/pause/authenquery/>.
  574. */
  575. var firstHeader = document.getElementsByClassName( "firstheader" )[ 0 ];
  576. assert( firstHeader != null, "Can't find element of 'firstheader' class" );
  577. var title = firstHeader.textContent;
  578.  
  579. //  Parsing depends on the page.
  580. if ( title.toLowerCase() == "show my files" ) {
  581.     files = parseShowFiles( pre );
  582. } else if ( title.toLowerCase() == "delete files" ) {
  583.     files = parseDeleteFiles( pre );
  584. } else if ( title.toLowerCase() == "force reindexing" ) {
  585.     files = parseDeleteFiles( pre );
  586. };
  587. assert( files != null, "Do not know how to parse '" + title + "' page" );
  588.  
  589. // Recreate file list.
  590. var list = generateList( files );
  591. pre.parentElement.replaceChild( list, pre );
  592. var buttons = createButtons();
  593. list.parentElement.insertBefore( buttons, list );
  594. automateCheckboxes( list );
  595.  
  596. GM_addStyle( ".fileList .hidden { display: none; }" );
  597.  
  598. // end of file //