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 2018/10/02 20:24:28 UTC
[sling-org-apache-sling-app-cms] branch master updated: Fixing a
number of front end issues including SLING-7971,
SLING-7972 and SLING-7973 and making a number of smaller tweaks / fixes
This is an automated email from the ASF dual-hosted git repository.
dklco pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
The following commit(s) were added to refs/heads/master by this push:
new c0b341b Fixing a number of front end issues including SLING-7971, SLING-7972 and SLING-7973 and making a number of smaller tweaks / fixes
new e1387f0 Merge branch 'master' of github.com:apache/sling-org-apache-sling-app-cms
c0b341b is described below
commit c0b341bff51253cfb59ed2e8902c0cbce13f98ca
Author: Dan Klco <dk...@apache.org>
AuthorDate: Tue Oct 2 16:23:51 2018 -0400
Fixing a number of front end issues including SLING-7971, SLING-7972 and SLING-7973 and making a number of smaller tweaks / fixes
---
.../core/internal/filters/EditIncludeFilter.java | 15 +-
ui/src/main/frontend/gulpfile.js | 1 -
ui/src/main/frontend/src/js/cms.js | 2 +-
ui/src/main/frontend/src/js/editor.js | 202 +++++++++++----------
ui/src/main/frontend/src/scss/cms.scss | 4 +
.../components/editor/scripts/finalize.jsp | 2 +-
.../components/general/container/container.jsp | 2 +-
.../sling-cms/components/pages/editor/body.jsp | 2 +-
.../pages/editor/{body.jsp => editor.jsp} | 8 +-
9 files changed, 132 insertions(+), 106 deletions(-)
diff --git a/core/src/main/java/org/apache/sling/cms/core/internal/filters/EditIncludeFilter.java b/core/src/main/java/org/apache/sling/cms/core/internal/filters/EditIncludeFilter.java
index ae73a0a..635ba8f 100644
--- a/core/src/main/java/org/apache/sling/cms/core/internal/filters/EditIncludeFilter.java
+++ b/core/src/main/java/org/apache/sling/cms/core/internal/filters/EditIncludeFilter.java
@@ -28,6 +28,7 @@ import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import org.apache.commons.lang.StringUtils;
+import org.apache.commons.lang.WordUtils;
import org.apache.jackrabbit.JcrConstants;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
@@ -88,6 +89,14 @@ public class EditIncludeFilter implements Filter {
if (er != null) {
component = er.getComponent();
}
+ String componentTitle = "";
+ if (component != null) {
+ componentTitle = component.getTitle();
+ }
+ if (StringUtils.isEmpty(componentTitle)) {
+ String componentName = StringUtils.substringAfterLast(resource.getResourceType(), "/");
+ WordUtils.capitalizeFully(componentName.replace('-', ' '));
+ }
writer.write("<div class=\"sling-cms-component\" data-sling-cms-title=\""
+ (component != null ? component.getTitle() : "") + "\" data-sling-cms-resource-path=\""
+ resource.getPath() + "\" data-sling-cms-resource-type=\"" + resource.getResourceType()
@@ -98,18 +107,18 @@ public class EditIncludeFilter implements Filter {
writer.write(
"<div class=\"control\"><button class=\"level-item button\" data-sling-cms-action=\"edit\" data-sling-cms-path=\""
+ resource.getPath() + "\" data-sling-cms-edit=\"" + editPath
- + "\" title=\"Edit\"><span class=\"jam jam-pencil-f\"></span></button></div>");
+ + "\" title=\"Edit Component\"><span class=\"jam jam-pencil-f\"></span></button></div>");
if (!first || !last) {
writer.write(
"<div class=\"control\"><button class=\"level-item button\" data-sling-cms-action=\"reorder\" data-sling-cms-path=\""
+ resource.getPath()
- + "\" title=\"Reorder\"><span class=\"jam jam-arrows-v\"></span></button></div>");
+ + "\" title=\"Reorder Component\"><span class=\"jam jam-arrows-v\"></span></button></div>");
}
if (!resource.getName().equals(JcrConstants.JCR_CONTENT) && exists) {
writer.write(
"<div class=\"control\"><button class=\"level-item button\" data-sling-cms-action=\"delete\" data-sling-cms-path=\""
+ resource.getPath()
- + "\" title=\"Delete\"><span class=\"jam jam-trash\"></span></button></div>");
+ + "\" title=\"Delete Component\"><span class=\"jam jam-trash\"></span></button></div>");
}
writer.write("</div></div>");
diff --git a/ui/src/main/frontend/gulpfile.js b/ui/src/main/frontend/gulpfile.js
index 8d35fb6..8cf02e4 100755
--- a/ui/src/main/frontend/gulpfile.js
+++ b/ui/src/main/frontend/gulpfile.js
@@ -104,7 +104,6 @@ gulp.task('editor-assets', function() {
gulp.task('editor-js', function() {
return gulp.src([
- './node_modules/jquery/dist/jquery.js',
'./src/js/editor.js'
])
.pipe(uglify({
diff --git a/ui/src/main/frontend/src/js/cms.js b/ui/src/main/frontend/src/js/cms.js
index 3d56576..3629e7c 100644
--- a/ui/src/main/frontend/src/js/cms.js
+++ b/ui/src/main/frontend/src/js/cms.js
@@ -145,7 +145,7 @@ Sling.CMS = {
// mouse button down over the element
element.addEventListener('mousedown', function(evt){
- if(document.querySelector('.modal-card-body').contains(evt.target)){
+ if(evt.target.matches('.modal-card-body *')){
return;
}
mouseX = evt.clientX;
diff --git a/ui/src/main/frontend/src/js/editor.js b/ui/src/main/frontend/src/js/editor.js
index 198b2b1..6b19b7f 100644
--- a/ui/src/main/frontend/src/js/editor.js
+++ b/ui/src/main/frontend/src/js/editor.js
@@ -17,101 +17,115 @@
* under the License.
*/
if(!window.CMSEditor){
- window.CMSEditor = {
- init: function(){
- $(".sling-cms-editor .button[data-sling-cms-action=add]").click(function(){
- CMSEditor.ui.showModal('/cms/editor/add.html'+$(this).attr('data-sling-cms-path')+'?availableTypes='+$(this).data('sling-cms-available-types'));
- });
- $(".sling-cms-editor .button[data-sling-cms-action=delete]").click(function(){
- CMSEditor.ui.showModal('/cms/editor/delete.html'+$(this).attr('data-sling-cms-path'));
- });
- $(".sling-cms-editor .button[data-sling-cms-action=edit]").click(function(){
- CMSEditor.ui.showModal(
- '/cms/editor/edit.html'+$(this).attr('data-sling-cms-path')+'?editor='+$(this).attr('data-sling-cms-edit'),
- $(this).closest('.sling-cms-component').attr('data-sling-cms-title'));
- });
- $(".sling-cms-editor .button[data-sling-cms-action=reorder]").click(function(){
- CMSEditor.ui.showModal('/cms/editor/reorder.html'+$(this).attr('data-sling-cms-path'));
- });
-
- // closing the modal
- $(".sling-cms-editor .delete").click(function(){
- CMSEditor.ui.hideModal();
- });
- window.addEventListener('keypress',function(e){
- if(e.keyCode==27 && CMSEditor.ui.modalDisplayed === true){
- CMSEditor.ui.hideModal();
- }
- });
+ window.CMSEditor = {
+ init: function(){
+ CMSEditor.util.attachClick('.sling-cms-editor .button[data-sling-cms-action=add]', function(evt){
+ CMSEditor.ui.showModal('/cms/editor/add.html'+this.dataset.slingCmsPath+'?availableTypes='+this.dataset.slingCmsAvailableTypes, this.title);
+ });
+ CMSEditor.util.attachClick('.sling-cms-editor .button[data-sling-cms-action=delete]', function(evt){
+ CMSEditor.ui.showModal('/cms/editor/delete.html'+this.dataset.slingCmsPath, this.title);
+ });
+ CMSEditor.util.attachClick('.sling-cms-editor .button[data-sling-cms-action=edit]', function(evt){
+ CMSEditor.ui.showModal(
+ '/cms/editor/edit.html'+this.dataset.slingCmsPath+'?editor='+this.dataset.slingCmsEdit,
+ CMSEditor.util.findParent(this,'.sling-cms-component').dataset.slingCmsTitle || this.title);
+ });
+ CMSEditor.util.attachClick('.sling-cms-editor .button[data-sling-cms-action=reorder]', function(evt){
+ CMSEditor.ui.showModal('/cms/editor/reorder.html'+this.dataset.slingCmsPath, this.title);
+ });
+
+ // closing the modal
+ CMSEditor.util.attachClick('.sling-cms-editor .close-modal', function(){
+ CMSEditor.ui.hideModal();
+ });
+ window.addEventListener('keypress',function(e){
+ if(e.keyCode==27 && CMSEditor.ui.modalDisplayed === true){
+ CMSEditor.ui.hideModal();
+ }
+ });
- var mouseX;
- var mouseY;
-
- function draggable(element) {
- var mouseDown = false;
-
- var elementX = 0;
- var elementY = 0;
+ var mouseX;
+ var mouseY;
+
+ function draggable(element) {
+ var mouseDown = false;
+ var elementX = 0;
+ var elementY = 0;
- // mouse button down over the element
- element.addEventListener('mousedown', function(evt){
- console.log('mousedown');
- mouseX = evt.clientX;
- mouseY = evt.clientY;
- mouseDown = true;
- });
-
- var moveComplete = function(evt){
- console.log('mouseup');
- mouseDown = false;
- elementX = parseInt(element.style.left) || 0;
- elementY = parseInt(element.style.top) || 0;
- return false;
- }
-
- element.addEventListener('mouseup', moveComplete);
- document.addEventListener('mouseout', moveComplete);
-
- document.addEventListener('mousemove', function(event) {
- if (!mouseDown) {
- return;
- }
- console.log('mousemove');
- var deltaX = event.clientX - mouseX;
- var deltaY = event.clientY - mouseY;
- element.style.left = elementX + deltaX + 'px';
- element.style.top = elementY + deltaY + 'px';
- return false;
- });
- }
- draggable($(".sling-cms-editor .modal-card")[0]);
- },
- ui: {
- modalDisplayed: false,
- hideModal: function() {
- if(CMSEditor.ui.modalDisplayed) {
- $('.sling-cms-editor .modal').removeClass('is-active');
- CMSEditor.ui.modalDisplayed = false;
- }
- },
- showModal: function(url, title){
- title = title || '';
- if(CMSEditor.ui.modalDisplayed) {
- CMSEditor.ui.hideModal();
- }
-
- $(".sling-cms-editor .modal-card-title").text(title);
- $('.sling-cms-editor .modal-card-body').html('<iframe class="modal-frame" src="'+url+'"></iframe>');
- $('.sling-cms-editor .modal').addClass('is-active');
+ // mouse button down over the element
+ element.addEventListener('mousedown', function(evt){
+ if(evt.target.matches('.modal-card-body *')){
+ return;
+ }
+ mouseX = evt.clientX;
+ mouseY = evt.clientY;
+ mouseDown = true;
+ });
+
+ var moveComplete = function(evt){
+ mouseDown = false;
+ elementX = parseInt(element.style.left) || 0;
+ elementY = parseInt(element.style.top) || 0;
+ return false;
+ }
+
+ element.addEventListener('mouseup', moveComplete);
+ document.addEventListener('mouseout', moveComplete);
+
+ document.addEventListener('mousemove', function(event) {
+ if (!mouseDown) {
+ return;
+ }
+ var deltaX = event.clientX - mouseX;
+ var deltaY = event.clientY - mouseY;
+ element.style.left = elementX + deltaX + 'px';
+ element.style.top = elementY + deltaY + 'px';
+ return false;
+ });
+ }
+ draggable(document.querySelector('.sling-cms-editor .modal-card'));
+ },
+ ui: {
+ modalDisplayed: false,
+ hideModal: function() {
+ if(CMSEditor.ui.modalDisplayed) {
+ document.querySelector('.sling-cms-editor .modal').classList.remove('is-active');
+ CMSEditor.ui.modalDisplayed = false;
+ }
+ },
+ showModal: function(url, title){
+ title = title || '';
+ 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').classList.add('is-active');
- CMSEditor.ui.modalDisplayed = true;
- }
- }
- }
-
- if (document.readyState === 'complete') {
- CMSEditor.init();
- } else {
- document.addEventListener('DOMContentLoaded',CMSEditor.init,false);
- }
+ CMSEditor.ui.modalDisplayed = true;
+ }
+ },
+ util: {
+ attachClick: function(exp, cb){
+ document.querySelectorAll(exp).forEach(function(el){
+ el.addEventListener('click', cb, false);
+ });
+ },
+ findParent: function(el,exp){
+ if(el == null || el.parentElement == null){
+ return null
+ } else if(el.parentElement.matches(exp)){
+ return el.parentElement;
+ } else {
+ return CMSEditor.util.findParent(el.parentElement, exp);
+ }
+ }
+ }
+ }
+
+ if (document.readyState === 'complete') {
+ CMSEditor.init();
+ } else {
+ document.addEventListener('DOMContentLoaded',CMSEditor.init,false);
+ }
}
\ No newline at end of file
diff --git a/ui/src/main/frontend/src/scss/cms.scss b/ui/src/main/frontend/src/scss/cms.scss
index 7d2c848..0d64533 100644
--- a/ui/src/main/frontend/src/scss/cms.scss
+++ b/ui/src/main/frontend/src/scss/cms.scss
@@ -64,6 +64,10 @@ h5 {
font-size: 120%;
}
+.editor-page {
+ overflow-y: auto;
+}
+
.is-draggable {
position: relative;
}
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 ff8882d..5f3bec8 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
@@ -26,7 +26,7 @@
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title"></p>
- <button class="button delete is-small" aria-label="close">
+ <button class="button close-modal is-small" aria-label="close">
<span class="jam jam-close"></span>
</button>
</header>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/general/container/container.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/general/container/container.jsp
index 2de28c0..a231422 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/general/container/container.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/general/container/container.jsp
@@ -34,7 +34,7 @@
<div class="level has-background-grey">
<div class="level-left">
<div class="level-item">
- <button class="button" data-sling-cms-action="add" data-sling-cms-path="${resource.path}" data-sling-cms-available-types="${availableTypes}" title="Add">
+ <button class="button" data-sling-cms-action="add" data-sling-cms-path="${resource.path}" data-sling-cms-available-types="${availableTypes}" title="Add Component">
+
</button>
</div>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp
index d8db3b3..d3cb509 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp
@@ -17,7 +17,7 @@
* under the License.
*/ --%>
<%@include file="/libs/sling-cms/global.jsp"%>
-<body class="Editor-Page">
+<body>
<sling:include path="container" resourceType="sling-cms/components/general/container" />
<sling:call script="scripts.jsp" />
</body>
\ No newline at end of file
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/editor.jsp
similarity index 84%
copy from ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp
copy to ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/editor.jsp
index d8db3b3..a9a0a52 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/body.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/pages/editor/editor.jsp
@@ -17,7 +17,7 @@
* under the License.
*/ --%>
<%@include file="/libs/sling-cms/global.jsp"%>
-<body class="Editor-Page">
- <sling:include path="container" resourceType="sling-cms/components/general/container" />
- <sling:call script="scripts.jsp" />
-</body>
\ No newline at end of file
+<html lang="en" class="editor-page">
+ <sling:call script="head.jsp" />
+ <sling:call script="body.jsp" />
+</html>