From 29a837f347f53f751b723d466a2cd05fd92fd34e Mon Sep 17 00:00:00 2001 From: ArthurHoaro 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/js/shaarli.js | 73 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 71 insertions(+), 2 deletions(-) (limited to 'tpl/default/js/shaarli.js') 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; +} -- cgit v1.2.3 From 638364987a42f8f48665ac29fdcbfc83de1de9e3 Mon Sep 17 00:00:00 2001 From: ArthurHoaro 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/default/js/shaarli.js') 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 From aa4797ba3679b847adc895e2f817ac058779a171 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sat, 25 Mar 2017 15:59:01 +0100 Subject: Adds a taglist view with edit/delete buttons * The tag list can be sort alphabetically or by most used tag * Edit/Delete are perform using AJAX, or fallback to 'do=changetag' page * New features aren't backported to vintage theme --- tpl/default/js/shaarli.js | 136 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 135 insertions(+), 1 deletion(-) (limited to 'tpl/default/js/shaarli.js') diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index ceb1d1b8..e19e9001 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -412,8 +412,139 @@ window.onload = function () { } }); } + + /** + * Tag list operations + * + * TODO: support error code in the backend for AJAX requests + */ + // Display/Hide rename form + var renameTagButtons = document.querySelectorAll('.rename-tag'); + [].forEach.call(renameTagButtons, function(rename) { + rename.addEventListener('click', function(event) { + event.preventDefault(); + var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); + var form = block.querySelector('.rename-tag-form'); + form.style.display = form.style.display == 'none' ? 'block' : 'none'; + }); + }); + + // Rename a tag with an AJAX request + var renameTagSubmits = document.querySelectorAll('.validate-rename-tag'); + [].forEach.call(renameTagSubmits, function(rename) { + rename.addEventListener('click', function(event) { + event.preventDefault(); + var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); + var input = block.querySelector('.rename-tag-input'); + var totag = input.value.replace('/"/g', '\\"'); + if (totag.trim() == '') { + return; + } + var fromtag = block.getAttribute('data-tag'); + var token = document.getElementById('token').value; + + xhr = new XMLHttpRequest(); + xhr.open('POST', '?do=changetag'); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.onload = function() { + if (xhr.status !== 200) { + alert('An error occurred. Return code: '+ xhr.status); + location.reload(); + } else { + block.setAttribute('data-tag', totag); + input.setAttribute('name', totag); + input.setAttribute('value', totag); + input.parentNode.style.display = 'none'; + block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); + block.querySelector('a.tag-link').setAttribute('href', '?searchtags='+ encodeURIComponent(totag)); + block.querySelector('a.rename-tag').setAttribute('href', '?do=changetag&fromtag='+ encodeURIComponent(totag)); + } + }; + xhr.send('renametag=1&fromtag='+ encodeURIComponent(fromtag) +'&totag='+ encodeURIComponent(totag) +'&token='+ token); + refreshToken(); + }); + }); + + // Validate input with enter key + var renameTagInputs = document.querySelectorAll('.rename-tag-input'); + [].forEach.call(renameTagInputs, function(rename) { + rename.addEventListener('keypress', function(event) { + if (event.keyCode === 13) { // enter + findParent(event.target, 'div', {'class': 'tag-list-item'}).querySelector('.validate-rename-tag').click(); + } + }); + }); + + // Delete a tag with an AJAX query (alert popup confirmation) + var deleteTagButtons = document.querySelectorAll('.delete-tag'); + [].forEach.call(deleteTagButtons, function(rename) { + rename.style.display = 'inline'; + rename.addEventListener('click', function(event) { + event.preventDefault(); + var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); + var tag = block.getAttribute('data-tag'); + var token = document.getElementById('token').value; + + if (confirm('Are you sure you want to delete the tag "'+ tag +'"?')) { + xhr = new XMLHttpRequest(); + xhr.open('POST', '?do=changetag'); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.onload = function() { + block.remove(); + }; + xhr.send(encodeURI('deletetag=1&fromtag='+ tag +'&token='+ token)); + refreshToken(); + } + }); + }); }; +function findParent(element, tagName, attributes) +{ + while (element) { + if (element.tagName.toLowerCase() == tagName) { + var match = true; + for (var key in attributes) { + if (! element.hasAttribute(key) + || (attributes[key] != '' && element.getAttribute(key).indexOf(attributes[key]) == -1) + ) { + match = false; + break; + } + } + + if (match) { + return element; + } + } + element = element.parentElement; + } + return null; +} + +function refreshToken() +{ + var xhr = new XMLHttpRequest(); + xhr.open('GET', '?do=token'); + xhr.onload = function() { + var token = document.getElementById('token'); + token.setAttribute('value', xhr.responseText); + }; + xhr.send(); +} + +/** + * html_entities in JS + * + * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript + */ +function htmlEntities(str) +{ + return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) { + return '&#'+i.charCodeAt(0)+';'; + }); +} + function activateFirefoxSocial(node) { var loc = location.href; var baseURL = loc.substring(0, loc.lastIndexOf("/")); @@ -445,8 +576,11 @@ function activateFirefoxSocial(node) { * @param currentContinent Current selected continent * @param reset Set to true to reset the selected value */ -function hideTimezoneCities(cities, currentContinent, reset = false) { +function hideTimezoneCities(cities, currentContinent) { var first = true; + if (reset == null) { + reset = false; + } [].forEach.call(cities, function (option) { if (option.getAttribute('data-continent') != currentContinent) { option.className = 'hidden'; -- cgit v1.2.3 From 82e3bb5f06dc531ee1080a0313833791a1c1f3c7 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Tue, 28 Mar 2017 20:11:07 +0200 Subject: Tag list: use awesomplete for tag auto completion --- tpl/default/js/shaarli.js | 62 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 60 insertions(+), 2 deletions(-) (limited to 'tpl/default/js/shaarli.js') diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index e19e9001..4ebb7815 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -418,6 +418,9 @@ window.onload = function () { * * TODO: support error code in the backend for AJAX requests */ + var existingTags = document.querySelector('input[name="taglist"]').value.split(' '); + var awesomepletes = []; + // Display/Hide rename form var renameTagButtons = document.querySelectorAll('.rename-tag'); [].forEach.call(renameTagButtons, function(rename) { @@ -425,7 +428,12 @@ window.onload = function () { event.preventDefault(); var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); var form = block.querySelector('.rename-tag-form'); - form.style.display = form.style.display == 'none' ? 'block' : 'none'; + if (form.style.display == 'none' || form.style.display == '') { + form.style.display = 'block'; + } else { + form.style.display = 'none'; + } + block.querySelector('input').focus(); }); }); @@ -454,10 +462,18 @@ window.onload = function () { block.setAttribute('data-tag', totag); input.setAttribute('name', totag); input.setAttribute('value', totag); - input.parentNode.style.display = 'none'; + findParent(input, 'div', {'class': 'rename-tag-form'}).style.display = 'none'; block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); block.querySelector('a.tag-link').setAttribute('href', '?searchtags='+ encodeURIComponent(totag)); block.querySelector('a.rename-tag').setAttribute('href', '?do=changetag&fromtag='+ encodeURIComponent(totag)); + + // Refresh awesomplete values + for (var key in existingTags) { + if (existingTags[key] == fromtag) { + existingTags[key] = totag; + } + } + awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); } }; xhr.send('renametag=1&fromtag='+ encodeURIComponent(fromtag) +'&totag='+ encodeURIComponent(totag) +'&token='+ token); @@ -468,6 +484,7 @@ window.onload = function () { // Validate input with enter key var renameTagInputs = document.querySelectorAll('.rename-tag-input'); [].forEach.call(renameTagInputs, function(rename) { + rename.addEventListener('keypress', function(event) { if (event.keyCode === 13) { // enter findParent(event.target, 'div', {'class': 'tag-list-item'}).querySelector('.validate-rename-tag').click(); @@ -497,8 +514,19 @@ window.onload = function () { } }); }); + + updateAwesompleteList('.rename-tag-input', document.querySelector('input[name="taglist"]').value.split(' '), awesomepletes); }; +/** + * Find a parent element according to its tag and its attributes + * + * @param element Element where to start the search + * @param tagName Expected parent tag name + * @param attributes Associative array of expected attributes (name=>value). + * + * @returns Found element or null. + */ function findParent(element, tagName, attributes) { while (element) { @@ -522,6 +550,9 @@ function findParent(element, tagName, attributes) return null; } +/** + * Ajax request to refresh the CSRF token. + */ function refreshToken() { var xhr = new XMLHttpRequest(); @@ -533,6 +564,33 @@ function refreshToken() xhr.send(); } +/** + * Update awesomplete list of tag for all elements matching the given selector + * + * @param selector CSS selector + * @param tags Array of tags + * @param instances List of existing awesomplete instances + */ +function updateAwesompleteList(selector, tags, instances) +{ + // First load: create Awesomplete instances + if (instances.length == 0) { + var elements = document.querySelectorAll(selector); + [].forEach.call(elements, function (element) { + instances.push(new Awesomplete( + element, + {'list': tags} + )); + }); + } else { + // Update awesomplete tag list + for (var key in instances) { + instances[key].list = tags; + } + } + return instances; +} + /** * html_entities in JS * -- cgit v1.2.3 From 9bf82f4fa14a871fcda1e14e07767d788540c8e3 Mon Sep 17 00:00:00 2001 From: Lucas Cimon Date: Wed, 7 Jun 2017 16:08:35 +0200 Subject: Fixing "Uncaught TypeError" in shaarli.js - fix #893 --- tpl/default/js/shaarli.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'tpl/default/js/shaarli.js') diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index 4ebb7815..b120c91e 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -418,7 +418,8 @@ window.onload = function () { * * TODO: support error code in the backend for AJAX requests */ - var existingTags = document.querySelector('input[name="taglist"]').value.split(' '); + var tagList = document.querySelector('input[name="taglist"]'); + var existingTags = tagList ? tagList.value.split(' ') : []; var awesomepletes = []; // Display/Hide rename form @@ -515,7 +516,7 @@ window.onload = function () { }); }); - updateAwesompleteList('.rename-tag-input', document.querySelector('input[name="taglist"]').value.split(' '), awesomepletes); + updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); }; /** -- cgit v1.2.3 From 8eb6bac137d31b36ff2da5970f1ac398cf574435 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sun, 11 Jun 2017 14:09:42 +0200 Subject: Fix Firefox Social button in the default theme is no longer required since the JS function is now in . Also, include the trailing slash in the post URL. Fixes #895 --- tpl/default/js/shaarli.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'tpl/default/js/shaarli.js') diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index b120c91e..4f49affa 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -606,7 +606,7 @@ function htmlEntities(str) function activateFirefoxSocial(node) { var loc = location.href; - var baseURL = loc.substring(0, loc.lastIndexOf("/")); + var baseURL = loc.substring(0, loc.lastIndexOf("/") + 1); // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable. var data = { @@ -619,7 +619,7 @@ function activateFirefoxSocial(node) { icon32URL: baseURL + "/images/favicon.ico", icon64URL: baseURL + "/images/favicon.ico", - shareURL: baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi{/noparse}", + shareURL: baseURL + "?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi", homepageURL: baseURL }; node.setAttribute("data-service", JSON.stringify(data)); -- cgit v1.2.3