From 818b3193ffabec57501e3bdfa997206e3c0671ef Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sat, 13 Jun 2020 11:22:14 +0200 Subject: Explicitly define base and asset path in templates With the new routes, all pages are not all at the same folder level anymore (e.g. /shaare and /shaare/123), so we can't just use './' everywhere. The most consistent way to handle this is to prefix all path with the proper variable, and handle the actual path in controllers. --- assets/common/js/thumbnails-update.js | 8 +++++--- assets/default/js/base.js | 27 +++++++++++++++++---------- 2 files changed, 22 insertions(+), 13 deletions(-) (limited to 'assets') diff --git a/assets/common/js/thumbnails-update.js b/assets/common/js/thumbnails-update.js index 060a730e..35608169 100644 --- a/assets/common/js/thumbnails-update.js +++ b/assets/common/js/thumbnails-update.js @@ -10,13 +10,14 @@ * It contains a recursive call to retrieve the thumb of the next link when it succeed. * It also update the progress bar and other visual feedback elements. * + * @param {string} basePath Shaarli subfolder for XHR requests * @param {array} ids List of LinkID to update * @param {int} i Current index in ids * @param {object} elements List of DOM element to avoid retrieving them at each iteration */ -function updateThumb(ids, i, elements) { +function updateThumb(basePath, ids, i, elements) { const xhr = new XMLHttpRequest(); - xhr.open('POST', './?do=ajax_thumb_update'); + xhr.open('POST', `${basePath}/?do=ajax_thumb_update`); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.responseType = 'json'; xhr.onload = () => { @@ -40,6 +41,7 @@ function updateThumb(ids, i, elements) { } (() => { + const basePath = document.querySelector('input[name="js_base_path"]').value; const ids = document.getElementsByName('ids')[0].value.split(','); const elements = { progressBar: document.querySelector('.progressbar > div'), @@ -47,5 +49,5 @@ function updateThumb(ids, i, elements) { thumbnail: document.querySelector('.thumbnail-placeholder'), title: document.querySelector('.thumbnail-link-title'), }; - updateThumb(ids, 0, elements); + updateThumb(basePath, ids, 0, elements); })(); diff --git a/assets/default/js/base.js b/assets/default/js/base.js index 8cc7eed5..b428a420 100644 --- a/assets/default/js/base.js +++ b/assets/default/js/base.js @@ -25,9 +25,9 @@ function findParent(element, tagName, attributes) { /** * Ajax request to refresh the CSRF token. */ -function refreshToken() { +function refreshToken(basePath) { const xhr = new XMLHttpRequest(); - xhr.open('GET', './?do=token'); + xhr.open('GET', `${basePath}/?do=token`); xhr.onload = () => { const token = document.getElementById('token'); token.setAttribute('value', xhr.responseText); @@ -215,6 +215,8 @@ function init(description) { } (() => { + const basePath = document.querySelector('input[name="js_base_path"]').value; + /** * Handle responsive menu. * Source: http://purecss.io/layouts/tucked-menu-vertical/ @@ -461,7 +463,7 @@ function init(description) { }); if (window.confirm(message)) { - window.location = `?delete_link&lf_linkdate=${ids.join('+')}&token=${token.value}`; + window.location = `${basePath}/?delete_link&lf_linkdate=${ids.join('+')}&token=${token.value}`; } }); } @@ -483,7 +485,8 @@ function init(description) { }); const ids = links.map(item => item.id); - window.location = `?change_visibility&token=${token.value}&newVisibility=${visibility}&ids=${ids.join('+')}`; + window.location = + `${basePath}/?change_visibility&token=${token.value}&newVisibility=${visibility}&ids=${ids.join('+')}`; }); }); } @@ -546,7 +549,7 @@ function init(description) { const refreshedToken = document.getElementById('token').value; const fromtag = block.getAttribute('data-tag'); const xhr = new XMLHttpRequest(); - xhr.open('POST', './manage-tags'); + xhr.open('POST', `${basePath}/manage-tags`); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = () => { if (xhr.status !== 200) { @@ -558,8 +561,12 @@ function init(description) { input.setAttribute('value', totag); 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', `./manage-tags?fromtag=${encodeURIComponent(totag)}`); + block + .querySelector('a.tag-link') + .setAttribute('href', `${basePath}/?searchtags=${encodeURIComponent(totag)}`); + block + .querySelector('a.rename-tag') + .setAttribute('href', `${basePath}/manage-tags?fromtag=${encodeURIComponent(totag)}`); // Refresh awesomplete values existingTags = existingTags.map(tag => (tag === fromtag ? totag : tag)); @@ -567,7 +574,7 @@ function init(description) { } }; xhr.send(`renametag=1&fromtag=${encodeURIComponent(fromtag)}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`); - refreshToken(); + refreshToken(basePath); }); }); @@ -593,13 +600,13 @@ function init(description) { if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) { const xhr = new XMLHttpRequest(); - xhr.open('POST', './manage-tags'); + xhr.open('POST', `${basePath}/manage-tags`); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = () => { block.remove(); }; xhr.send(encodeURI(`deletetag=1&fromtag=${tag}&token=${refreshedToken}`)); - refreshToken(); + refreshToken(basePath); existingTags = existingTags.filter(tagItem => tagItem !== tag); awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); -- cgit v1.2.3