From 29a837f347f53f751b723d466a2cd05fd92fd34e Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Sun, 12 Mar 2017 19:03:50 +0100
Subject: Bulk deletion

  * Add a checkboxes in linklist which display a sub-header containing action buttons
  * Strongly rely on JS
  * Requires a modern browser (ES6 syntax support)
  * Checkboxes are hidden if the browser is old or JS disabled
---
 tpl/default/css/shaarli.css  | 13 ++++++++
 tpl/default/js/shaarli.js    | 73 ++++++++++++++++++++++++++++++++++++++++++--
 tpl/default/linklist.html    |  5 ++-
 tpl/default/page.header.html |  7 +++++
 4 files changed, 95 insertions(+), 3 deletions(-)

(limited to 'tpl')

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 73fade5f..efdf06d4 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -275,6 +275,19 @@ body, .pure-g [class*="pure-u"] {
     }
 }
 
+.subheader-form a.button {
+    color: #f5f5f5;
+    font-weight: bold;
+    text-decoration: none;
+    border: 2px solid #f5f5f5;
+    border-radius: 5px;
+    padding: 3px 10px;
+}
+
+.linklist-item-editbuttons .delete-checkbox {
+    display: none;
+}
+
 #header-login-form input[type="text"], #header-login-form input[type="password"] {
     width: 200px;
 }
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 4d47fcd0..7abd20b2 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -357,11 +357,64 @@ window.onload = function () {
     var continent = document.getElementById('continent');
     var city = document.getElementById('city');
     if (continent != null && city != null) {
-        continent.addEventListener('change', function(event) {
+        continent.addEventListener('change', function (event) {
             hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
         });
         hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
     }
+
+    /**
+     * Bulk actions
+     *
+     * Note: Requires a modern browser.
+     */
+    if (testEs6Compatibility()) {
+        let linkCheckboxes = document.querySelectorAll('.delete-checkbox');
+        for(let checkbox of linkCheckboxes) {
+            checkbox.style.display = 'block';
+            checkbox.addEventListener('click', function(event) {
+                let count = 0;
+                for(let checkbox of linkCheckboxes) {
+                    count = checkbox.checked ? count + 1 : count;
+                }
+                let bar = document.getElementById('actions');
+                if (count == 0 && bar.classList.contains('open')) {
+                    bar.classList.toggle('open');
+                } else if (count > 0 && ! bar.classList.contains('open')) {
+                    bar.classList.toggle('open');
+                }
+            });
+        }
+
+        let deleteButton = document.getElementById('actions-delete');
+        let token = document.querySelector('input[type="hidden"][name="token"]');
+        if (deleteButton != null && token != null) {
+            deleteButton.addEventListener('click', function(event) {
+                event.preventDefault();
+
+                let links = [];
+                for(let checkbox of linkCheckboxes) {
+                    if (checkbox.checked) {
+                        links.push({
+                            'id': checkbox.value,
+                            'title': document.querySelector('.linklist-item[data-id="'+ checkbox.value +'"] .linklist-link').innerHTML
+                        });
+                    }
+                }
+
+                let message = 'Are you sure you want to delete '+ links.length +' links?\n';
+                message += 'This action is IRREVERSIBLE!\n\nTitles:\n';
+                let ids = '';
+                for (let item of links) {
+                    message += '  - '+ item['title'] +'\n';
+                    ids += item['id'] +'+';
+                }
+                if (window.confirm(message)) {
+                    window.location = '?delete_link&lf_linkdate='+ ids +'&token='+ token.value;
+                }
+            });
+        }
+    }
 };
 
 function activateFirefoxSocial(node) {
@@ -397,7 +450,7 @@ function activateFirefoxSocial(node) {
  */
 function hideTimezoneCities(cities, currentContinent, reset = false) {
     var first = true;
-    [].forEach.call(cities, function(option) {
+    [].forEach.call(cities, function (option) {
         if (option.getAttribute('data-continent') != currentContinent) {
             option.className = 'hidden';
         } else {
@@ -409,3 +462,19 @@ function hideTimezoneCities(cities, currentContinent, reset = false) {
         }
     });
 }
+
+/**
+ * Check if the browser is compatible with ECMAScript 6 syntax
+ *
+ * Source: http://stackoverflow.com/a/29046739/1484919
+ *
+ * @returns {boolean}
+ */
+function testEs6Compatibility()
+{
+    "use strict";
+
+    try { eval("var foo = (x)=>x+1"); }
+    catch (e) { return false; }
+    return true;
+}
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 57ef4567..6a4e14a6 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -15,6 +15,8 @@
   {/if}
 </div>
 
+<input type="hidden" name="token" value="{$token}">
+
 <div id="search-linklist">
 
   <div class="pure-g">
@@ -121,7 +123,7 @@
     <div class="pure-u-lg-20-24 pure-u-22-24">
       {loop="links"}
         <div class="anchor" id="{$value.shorturl}"></div>
-        <div class="linklist-item{if="$value.class"} {$value.class}{/if}">
+        <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
 
           <div class="linklist-item-title">
             {if="isLoggedIn()"}
@@ -129,6 +131,7 @@
                 {if="$value.private"}
                   <span class="label label-private">{'Private'|t}</span>
                 {/if}
+                <input type="checkbox" class="delete-checkbox" value="{$value.id}">
                 <!-- FIXME! JS translation -->
                 <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
                 <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 9388ef79..6c71a718 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -122,6 +122,13 @@
       </div>
     </div>
   </div>
+  <div id="actions" class="subheader-form">
+    <div class="pure-g">
+      <div class="pure-u-1">
+        <a href="" id="actions-delete" class="button">Delete</a>
+      </div>
+    </div>
+  </div>
   {if="!isLoggedIn()"}
     <form method="post" name="loginform">
       <div class="subheader-form" id="header-login-form">
-- 
cgit v1.2.3


From 638364987a42f8f48665ac29fdcbfc83de1de9e3 Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Mon, 27 Mar 2017 19:14:52 +0200
Subject: Bulk deletion: remove JS ES6 syntax

---
 tpl/default/js/shaarli.js | 111 +++++++++++++++++++---------------------------
 1 file changed, 46 insertions(+), 65 deletions(-)

(limited to 'tpl')

diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 7abd20b2..ceb1d1b8 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -216,14 +216,14 @@ window.onload = function () {
     /**
      * Autofocus text fields
      */
-    // ES6 syntax
-    let autofocusElements = document.querySelectorAll('.autofocus');
-    for (let autofocusElement of autofocusElements) {
-        if (autofocusElement.value == '') {
+    var autofocusElements = document.querySelectorAll('.autofocus');
+    var breakLoop = false;
+    [].forEach.call(autofocusElements, function(autofocusElement) {
+        if (autofocusElement.value == '' && ! breakLoop) {
             autofocusElement.focus();
-            break;
+            breakLoop = true;
         }
-    }
+    });
 
     /**
      * Handle sub menus/forms
@@ -365,55 +365,52 @@ window.onload = function () {
 
     /**
      * Bulk actions
-     *
-     * Note: Requires a modern browser.
      */
-    if (testEs6Compatibility()) {
-        let linkCheckboxes = document.querySelectorAll('.delete-checkbox');
-        for(let checkbox of linkCheckboxes) {
-            checkbox.style.display = 'block';
-            checkbox.addEventListener('click', function(event) {
-                let count = 0;
-                for(let checkbox of linkCheckboxes) {
-                    count = checkbox.checked ? count + 1 : count;
-                }
-                let bar = document.getElementById('actions');
-                if (count == 0 && bar.classList.contains('open')) {
-                    bar.classList.toggle('open');
-                } else if (count > 0 && ! bar.classList.contains('open')) {
-                    bar.classList.toggle('open');
-                }
+    var linkCheckboxes = document.querySelectorAll('.delete-checkbox');
+    var bar = document.getElementById('actions');
+    [].forEach.call(linkCheckboxes, function(checkbox) {
+        checkbox.style.display = 'block';
+        checkbox.addEventListener('click', function(event) {
+            var count = 0;
+            var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
+            [].forEach.call(linkCheckedCheckboxes, function(checkbox) {
+                count++;
             });
-        }
+            if (count == 0 && bar.classList.contains('open')) {
+                bar.classList.toggle('open');
+            } else if (count > 0 && ! bar.classList.contains('open')) {
+                bar.classList.toggle('open');
+            }
+        });
+    });
 
-        let deleteButton = document.getElementById('actions-delete');
-        let token = document.querySelector('input[type="hidden"][name="token"]');
-        if (deleteButton != null && token != null) {
-            deleteButton.addEventListener('click', function(event) {
-                event.preventDefault();
+    var deleteButton = document.getElementById('actions-delete');
+    var token = document.querySelector('input[type="hidden"][name="token"]');
+    if (deleteButton != null && token != null) {
+        deleteButton.addEventListener('click', function(event) {
+            event.preventDefault();
 
-                let links = [];
-                for(let checkbox of linkCheckboxes) {
-                    if (checkbox.checked) {
-                        links.push({
-                            'id': checkbox.value,
-                            'title': document.querySelector('.linklist-item[data-id="'+ checkbox.value +'"] .linklist-link').innerHTML
-                        });
-                    }
-                }
+            var links = [];
+            var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
+            [].forEach.call(linkCheckedCheckboxes, function(checkbox) {
+                links.push({
+                    'id': checkbox.value,
+                    'title': document.querySelector('.linklist-item[data-id="'+ checkbox.value +'"] .linklist-link').innerHTML
+                });
+            });
 
-                let message = 'Are you sure you want to delete '+ links.length +' links?\n';
-                message += 'This action is IRREVERSIBLE!\n\nTitles:\n';
-                let ids = '';
-                for (let item of links) {
-                    message += '  - '+ item['title'] +'\n';
-                    ids += item['id'] +'+';
-                }
-                if (window.confirm(message)) {
-                    window.location = '?delete_link&lf_linkdate='+ ids +'&token='+ token.value;
-                }
+            var message = 'Are you sure you want to delete '+ links.length +' links?\n';
+            message += 'This action is IRREVERSIBLE!\n\nTitles:\n';
+            var ids = '';
+            links.forEach(function(item) {
+                message += '  - '+ item['title'] +'\n';
+                ids += item['id'] +'+';
             });
-        }
+
+            if (window.confirm(message)) {
+                window.location = '?delete_link&lf_linkdate='+ ids +'&token='+ token.value;
+            }
+        });
     }
 };
 
@@ -462,19 +459,3 @@ function hideTimezoneCities(cities, currentContinent, reset = false) {
         }
     });
 }
-
-/**
- * Check if the browser is compatible with ECMAScript 6 syntax
- *
- * Source: http://stackoverflow.com/a/29046739/1484919
- *
- * @returns {boolean}
- */
-function testEs6Compatibility()
-{
-    "use strict";
-
-    try { eval("var foo = (x)=>x+1"); }
-    catch (e) { return false; }
-    return true;
-}
-- 
cgit v1.2.3