You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@sling.apache.org by dk...@apache.org on 2019/12/18 07:22:34 UTC
[sling-org-apache-sling-app-cms] 02/02: SLING-8919 - Fixing failure
or handle editor dialogs on the page
This is an automated email from the ASF dual-hosted git repository.
dklco pushed a commit to branch SLING-8919-fix-error-dialog
in repository https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
commit b105249dc079042ee276e76cfef2faf2a6e59ad4
Author: Dan Klco <dk...@apache.org>
AuthorDate: Tue Dec 17 23:22:19 2019 -0800
SLING-8919 - Fixing failure or handle editor dialogs on the page
---
ui/src/main/frontend/js/editor.js | 146 +++++++++++++++++++++++++-------------
1 file changed, 96 insertions(+), 50 deletions(-)
diff --git a/ui/src/main/frontend/js/editor.js b/ui/src/main/frontend/js/editor.js
index e6c204a..ee22dc0 100644
--- a/ui/src/main/frontend/js/editor.js
+++ b/ui/src/main/frontend/js/editor.js
@@ -26,9 +26,13 @@ if (!window.CMSEditor) {
init() {
CMSEditor.util.attachEvents(document);
// closing the modal
- CMSEditor.util.attachClick(document, '.sling-cms-editor .modal-close, .sling-cms-editor .modal-background', () => {
- CMSEditor.ui.hideModal();
- });
+ CMSEditor.util.attachClick(
+ document,
+ '.sling-cms-editor .modal-close, .sling-cms-editor .modal-background',
+ () => {
+ CMSEditor.ui.hideModal();
+ },
+ );
window.addEventListener('keypress', (e) => {
if (e.keyCode === 27 && CMSEditor.ui.modalDisplayed === true) {
CMSEditor.ui.hideModal();
@@ -80,13 +84,17 @@ if (!window.CMSEditor) {
},
reloadComponent(ip, cb) {
let path = ip;
- let component = document.querySelector(`.sling-cms-component[data-sling-cms-resource-path="${path}"]`);
+ let component = document.querySelector(
+ `.sling-cms-component[data-sling-cms-resource-path="${path}"]`,
+ );
let reloadPage = component.dataset.reload === 'true';
while (!component && path.length > 1) {
const pathArr = path.split('/');
pathArr.pop();
path = pathArr.join('/');
- component = document.querySelector(`.sling-cms-component[data-sling-cms-resource-path="${path}"]`);
+ component = document.querySelector(
+ `.sling-cms-component[data-sling-cms-resource-path="${path}"]`,
+ );
if (component.dataset.reload === 'true') {
reloadPage = true;
}
@@ -95,23 +103,28 @@ if (!window.CMSEditor) {
CMSEditor.ui.hideModal();
window.top.location.reload();
}
- fetch(`/cms/page/pagewrapper.html${path}?forceResourceType=${component.dataset.slingCmsResourceType}`, {
- redirect: 'manual',
- }).then((response) => {
- if (!response.ok) {
+ fetch(
+ `/cms/page/pagewrapper.html${path}?forceResourceType=${component.dataset.slingCmsResourceType}`,
+ {
+ redirect: 'manual',
+ },
+ )
+ .then((response) => {
+ if (!response.ok) {
+ CMSEditor.ui.hideModal();
+ window.top.location.reload();
+ }
+ return response.text();
+ })
+ .then((html) => {
+ const tmp = document.createElement('div');
+ tmp.innerHTML = html;
+ CMSEditor.util.attachEvents(tmp);
+ component.replaceWith(tmp.querySelector('.sling-cms-component'));
+ tmp.remove();
CMSEditor.ui.hideModal();
- window.top.location.reload();
- }
- return response.text();
- }).then((html) => {
- const tmp = document.createElement('div');
- tmp.innerHTML = html;
- CMSEditor.util.attachEvents(tmp);
- component.replaceWith(tmp.querySelector('.sling-cms-component'));
- tmp.remove();
- CMSEditor.ui.hideModal();
- cb();
- });
+ cb();
+ });
},
showModal(url, t) {
const title = t || '';
@@ -119,13 +132,25 @@ if (!window.CMSEditor) {
CMSEditor.ui.hideModal();
}
document.querySelector('.sling-cms-editor-final').innerHTML = '<div class="modal"><div class="modal-background"></div><div class="modal-content"><div class="box"><h3 class="modal-title"></h3><section class="modal-body"></section></div></div><button class="modal-close is-large" aria-label="close"></button>';
- document.querySelector('.sling-cms-editor .modal-title').innerText = title;
- document.querySelector('.sling-cms-editor .modal-body').innerHTML = `<iframe class="modal-frame" src="${url}"></iframe>`;
- document.querySelector('.sling-cms-editor .modal').classList.add('is-active');
- CMSEditor.util.attachClick(document, '.sling-cms-editor .modal-background, .sling-cms-editor .modal-close', () => {
- CMSEditor.ui.hideModal();
- });
- CMSEditor.ui.draggable(document.querySelector('.sling-cms-editor .modal-content'));
+ document.querySelector(
+ '.sling-cms-editor .modal-title',
+ ).innerText = title;
+ document.querySelector(
+ '.sling-cms-editor .modal-body',
+ ).innerHTML = `<iframe class="modal-frame" src="${url}"></iframe>`;
+ document
+ .querySelector('.sling-cms-editor .modal')
+ .classList.add('is-active');
+ CMSEditor.util.attachClick(
+ document,
+ '.sling-cms-editor .modal-background, .sling-cms-editor .modal-close',
+ () => {
+ CMSEditor.ui.hideModal();
+ },
+ );
+ CMSEditor.ui.draggable(
+ document.querySelector('.sling-cms-editor .modal-content'),
+ );
CMSEditor.ui.modalDisplayed = true;
},
},
@@ -180,7 +205,11 @@ if (!window.CMSEditor) {
});
const res = await response.json();
if (!response.ok) {
- ui.confirmMessage('Failed to move', res['status.message'] || response.statusText, () => {});
+ ui.confirmMessage(
+ 'Failed to move',
+ res['status.message'] || response.statusText,
+ () => {},
+ );
} else {
ui.confirmReload(res, 'success');
}
@@ -203,16 +232,19 @@ if (!window.CMSEditor) {
headers: {
Accept: 'application/json',
},
- }).then((response) => {
- if (!response.ok) {
- throw new Error(response.statusText);
- }
- return response.json();
- }).catch((error) => {
- ui.confirmMessage(error.message, error.message, () => {});
- }).then(() => {
- move();
- });
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(response.statusText);
+ }
+ return response.json();
+ })
+ .catch((error) => {
+ ui.confirmMessage(error.message, error.message, () => {});
+ })
+ .then(() => {
+ move();
+ });
} else {
move();
}
@@ -245,35 +277,48 @@ if (!window.CMSEditor) {
dragActive = true;
event.dataTransfer.effectAllowed = 'move';
dragImage = document.createElement('div');
- dragImage.setAttribute('style', `position: absolute; left: 0px; top: 0px; width: ${ed.offsetWidth
- }px; height: ${ed.offsetHeight}px; padding: 0.5em; background: grey; z-index: -1`);
+ dragImage.setAttribute(
+ 'style',
+ `position: absolute; left: 0px; top: 0px; width: ${ed.offsetWidth}px; height: ${ed.offsetHeight}px; padding: 0.5em; background: grey; z-index: -1`,
+ );
dragImage.innerText = ed.querySelector('.level-right').innerText;
document.body.appendChild(dragImage);
event.dataTransfer.setDragImage(dragImage, 20, 20);
- event.dataTransfer.setData('path', ed.closest('.sling-cms-component').dataset.slingCmsResourcePath);
- event.dataTransfer.setData('name', ed.closest('.sling-cms-component').dataset.slingCmsResourceName);
+ event.dataTransfer.setData(
+ 'path',
+ ed.closest('.sling-cms-component').dataset.slingCmsResourcePath,
+ );
+ event.dataTransfer.setData(
+ 'name',
+ ed.closest('.sling-cms-component').dataset.slingCmsResourceName,
+ );
setTimeout(activateTargets, 10);
});
ed.addEventListener('dragend', deactivateTargets);
},
attachEvents(ctx) {
- CMSEditor.util.attachClick(ctx, '.sling-cms-editor .action-button', (event) => {
+ function handleClick(event) {
event.preventDefault();
CMSEditor.ui.showModal(this.href, this.title);
- });
+ }
+ CMSEditor.util.attachClick(ctx, '.sling-cms-editor .action-button', handleClick);
if (ctx.matches && ctx.matches('.sling-cms-component')) {
CMSEditor.util.attachHover(ctx);
}
ctx.querySelectorAll('.sling-cms-component').forEach((c) => {
CMSEditor.util.attachHover(c);
});
- ctx.querySelectorAll('.sling-cms-editor').forEach(CMSEditor.util.attachDrag);
+ ctx
+ .querySelectorAll('.sling-cms-editor')
+ .forEach(CMSEditor.util.attachDrag);
},
attachHover(ctx) {
function resetActive() {
- document.querySelectorAll('.sling-cms-component__is-active').forEach((a) => {
- a.classList.remove('sling-cms-component__is-active');
- });
+ document
+ .querySelectorAll('.sling-cms-component__is-active')
+ .forEach((a) => {
+ a.classList.remove('sling-cms-component__is-active');
+ });
}
ctx.addEventListener('mouseover', (evt) => {
resetActive();
@@ -285,7 +330,8 @@ if (!window.CMSEditor) {
findParent(el, exp) {
if (el === null || el.parentElement === null) {
return null;
- } if (el.parentElement.matches(exp)) {
+ }
+ if (el.parentElement.matches(exp)) {
return el.parentElement;
}
return CMSEditor.util.findParent(el.parentElement, exp);