Fixing some particulars with the modal update and making the component
editor match the cms modal
diff --git a/ui/src/main/frontend/src/js/cms.draggable.js b/ui/src/main/frontend/src/js/cms.draggable.js
index dac27ff..da92443 100644
--- a/ui/src/main/frontend/src/js/cms.draggable.js
+++ b/ui/src/main/frontend/src/js/cms.draggable.js
@@ -20,48 +20,50 @@
/* eslint-env browser, es6 */
(function (nomnom) {
'use strict';
+ var data = {
+ mouseX : 0,
+ mouseY : 0,
+ mouseDown : false,
+ elementX : 0,
+ elementY : 0
+ };
nomnom.decorate(".is-draggable", {
- data: {
- mouseX : 0,
- mouseY : 0,
- mouseDown : false,
- elementX : 0,
- elementY : 0
+ callbacks: {
+ created : function () {
+ var draggable = this;
+ document.addEventListener('mouseup',function (event) {
+ if (data.mouseDown === true) {
+ draggable.moveComplete();
+ }
+ });
+ document.addEventListener('mousemove',function (event) {
+ if (data.mouseDown === false) {
+ return false;
+ }
+ var deltaX = event.clientX - data.mouseX,
+ deltaY = event.clientY - data.mouseY;
+ draggable.style.left = data.elementX + deltaX + 'px';
+ draggable.style.top = data.elementY + deltaY + 'px';
+ return false;
+ })
+ }
},
methods : {
- moveComplete: function (data) {
+ moveComplete: function () {
data.mouseDown = false;
data.elementX = parseInt(this.style.left, 10) || 0;
data.elementY = parseInt(this.style.top, 10) || 0;
return false;
}
},
-
events : {
- mousedown: function (event, data) {
- if (event.target.matches('.modal-card-body *')) {
+ mousedown: function (event) {
+ if (!event.target.matches('.modal-title, .modal-title *')) {
return;
}
data.mouseX = event.clientX;
data.mouseY = event.clientY;
data.mouseDown = true;
- },
- document : {
- mouseup : function (event, data) {
- if (data.mouseDown === true) {
- this.moveComplete(data);
- }
- },
- mousemove: function (event, data) {
- if (data.mouseDown === false) {
- return false;
- }
- var deltaX = event.clientX - data.mouseX,
- deltaY = event.clientY - data.mouseY;
- this.style.left = data.elementX + deltaX + 'px';
- this.style.top = data.elementY + deltaY + 'px';
- return false;
- }
}
}
});
diff --git a/ui/src/main/frontend/src/js/cms.fields.js b/ui/src/main/frontend/src/js/cms.fields.js
index 9e0445e..8d992d2 100644
--- a/ui/src/main/frontend/src/js/cms.fields.js
+++ b/ui/src/main/frontend/src/js/cms.fields.js
@@ -40,12 +40,14 @@
/* Support for updating the namehint when creating a component */
nomnom.decorate(".namehint", {
- initCallback: function () {
- var field = this;
- this.closest('.Form-Ajax').querySelector('select[name="sling:resourceType"]').addEventListener('change', function (evt) {
- var resourceType = evt.target.value.split("\/");
- field.value = resourceType[resourceType.length - 1];
- });
+ callbacks: {
+ created : function () {
+ var field = this;
+ this.closest('.Form-Ajax').querySelector('select[name="sling:resourceType"]').addEventListener('change', function (evt) {
+ var resourceType = evt.target.value.split("\/");
+ field.value = resourceType[resourceType.length - 1];
+ });
+ }
}
});
diff --git a/ui/src/main/frontend/src/js/cms.form.js b/ui/src/main/frontend/src/js/cms.form.js
index e1990e6..372bf93 100644
--- a/ui/src/main/frontend/src/js/cms.form.js
+++ b/ui/src/main/frontend/src/js/cms.form.js
@@ -19,6 +19,15 @@
nomnom.decorate(".Form-Ajax", {
+ callbacks: {
+ created : function () {
+ this.querySelector('.close').addEventListener('click', function(){
+ if(window.parent && window.parent.window && window.parent.window.CMSEditor) {
+ window.parent.window.CMSEditor.ui.hideModal();
+ }
+ });
+ }
+ },
events :{
submit : function(event){
event.preventDefault();
diff --git a/ui/src/main/frontend/src/js/cms.toggle.js b/ui/src/main/frontend/src/js/cms.toggle.js
index 9a2e6ca..702ff29 100644
--- a/ui/src/main/frontend/src/js/cms.toggle.js
+++ b/ui/src/main/frontend/src/js/cms.toggle.js
@@ -37,14 +37,17 @@
created: function () {
var source = this.getAttribute('data-toggle-source'),
selector = 'input[name="' + source + '"], select[name="' + source + '"]',
- toggle = this;
- document.querySelector(selector).on('change', function () {
- if (this.value !== toggle.dataset.toggleValue) {
- toggle.classList.add('is-hidden');
- } else {
- toggle.classList.remove('is-hidden');
- }
- });
+ toggle = this,
+ sourceEl = document.querySelector(selector);
+ if(sourceEl){
+ sourceEl.on('change', function () {
+ if (this.value !== toggle.dataset.toggleValue) {
+ toggle.classList.add('is-hidden');
+ } else {
+ toggle.classList.remove('is-hidden');
+ }
+ });
+ }
}
}
});
diff --git a/ui/src/main/frontend/src/js/editor.js b/ui/src/main/frontend/src/js/editor.js
index 1c62bf4..7db17da 100644
--- a/ui/src/main/frontend/src/js/editor.js
+++ b/ui/src/main/frontend/src/js/editor.js
@@ -39,7 +39,7 @@
});
// closing the modal
- CMSEditor.util.attachClick('.sling-cms-editor .close-modal', function () {
+ CMSEditor.util.attachClick('.sling-cms-editor .modal-close, .sling-cms-editor .modal-background', function () {
CMSEditor.ui.hideModal();
});
window.addEventListener('keypress', function (e) {
@@ -55,7 +55,7 @@
// mouse button down over the element
element.addEventListener('mousedown', function (evt) {
- if (evt.target.matches('.modal-card-body *')) {
+ if (!evt.target.matches('.modal-title, .modal-title *')) {
return;
}
mouseX = evt.clientX;
@@ -83,7 +83,7 @@
return false;
});
}
- draggable(document.querySelector('.sling-cms-editor .modal-card'));
+ draggable(document.querySelector('.sling-cms-editor .modal-content'));
},
ui: {
modalDisplayed: false,
@@ -98,8 +98,8 @@
if (CMSEditor.ui.modalDisplayed) {
CMSEditor.ui.hideModal();
}
- document.querySelector('.sling-cms-editor .modal-card-title').innerText = title;
- document.querySelector('.sling-cms-editor .modal-card-body').innerHTML = '<iframe class="modal-frame" src="' + url + '"></iframe>';
+ 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.ui.modalDisplayed = true;
diff --git a/ui/src/main/frontend/src/scss/editor.scss b/ui/src/main/frontend/src/scss/editor.scss
index d92af5d..53517b6 100644
--- a/ui/src/main/frontend/src/scss/editor.scss
+++ b/ui/src/main/frontend/src/scss/editor.scss
@@ -22,10 +22,10 @@
@import 'overrides';
@import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass";
+ @import "../../node_modules/bulma/sass/elements/box.sass";
@import "../../node_modules/bulma/sass/elements/button.sass";
@import "../../node_modules/bulma/sass/elements/form.sass";
@import "../../node_modules/bulma/sass/elements/icon.sass";
- @import "../../node_modules/bulma/sass/components/card.sass";
@import "../../node_modules/bulma/sass/components/level.sass";
@import "../../node_modules/bulma/sass/components/modal.sass";
.is-draggable {
@@ -34,10 +34,7 @@
.level {
padding: .5em;
}
- .modal-card {
- margin: 0;
- }
- .modal-card-body {
+ .modal-body {
padding: .5em;
height: 500px;
}
@@ -46,6 +43,10 @@
height: 100%;
border: none;
}
+ .modal-title {
+ font-size: 180%;
+ cursor: move;
+ }
.page-wrapper-frame {
position: fixed;
top: 44px;
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/scripts/finalize.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/scripts/finalize.jsp
index 5f3bec8..a9934fa 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/scripts/finalize.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/scripts/finalize.jsp
@@ -18,22 +18,19 @@
*/ --%>
<%@include file="/libs/sling-cms/global.jsp"%>
<c:if test="${cmsEditEnabled == 'true'}">
- <script src="/static/clientlibs/sling-cms-editor/js/editor.min.js"></script>
- <div class="sling-cms-editor">
- <div class="modal">
- <div class="modal-background"></div>
- <div class="modal-card">
- <div class="modal-card">
- <header class="modal-card-head">
- <p class="modal-card-title"></p>
- <button class="button close-modal is-small" aria-label="close">
- <span class="jam jam-close"></span>
- </button>
- </header>
- <section class="modal-card-body">
- </section>
- </div>
- </div>
- </div>
- </div>
+ <script src="/static/clientlibs/sling-cms-editor/js/editor.min.js"></script>
+ <div class="sling-cms-editor">
+ <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>
+ </div>
+ </div>
</c:if>
\ No newline at end of file
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/modal/modal.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/modal/modal.jsp
index c95a78b..439c2e1 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/modal/modal.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/modal/modal.jsp
@@ -18,9 +18,9 @@
*/ --%>
<%@include file="/libs/sling-cms/global.jsp"%>
<div class="modal-background"></div>
-<div class="modal-content">
+<div class="modal-content is-draggable">
<div class="box">
- <h3><sling:encode value="${properties['jcr:title']}" mode="HTML" /></h3>
+ <h3 class="modal-title"><sling:encode value="${properties['jcr:title']}" mode="HTML" /></h3>
<sling:include path="container" resourceType="sling-cms/components/general/container" />
</div>
</div>
