This is an automated email from the ASF dual-hosted git repository. jeb pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
commit e4966183c249d464344d1afa108f5520de62adbe Author: JE Bailey <[email protected]> AuthorDate: Wed Oct 10 11:41:17 2018 -0400 SLING-7986 additional js changes based on feedback --- ui/src/main/frontend/src/js/cms.draggable.js | 2 +- ui/src/main/frontend/src/js/cms.form.js | 20 +++- ui/src/main/frontend/src/js/cms.js | 111 +++++++++------------ ui/src/main/frontend/src/js/cms.modal.js | 3 +- ui/src/main/frontend/src/js/cms.nav.js | 2 +- ui/src/main/frontend/src/js/cms.toggle.js | 2 +- ui/src/main/frontend/src/js/cms.upload.js | 4 +- ui/src/main/frontend/src/js/nomnom.js | 66 +++++------- .../components/editor/fields/file/field.jsp | 2 +- .../components/editor/fields/repeating/field.jsp | 2 +- 10 files changed, 98 insertions(+), 116 deletions(-) diff --git a/ui/src/main/frontend/src/js/cms.draggable.js b/ui/src/main/frontend/src/js/cms.draggable.js index c3bdc6d..415ef96 100644 --- a/ui/src/main/frontend/src/js/cms.draggable.js +++ b/ui/src/main/frontend/src/js/cms.draggable.js @@ -38,7 +38,7 @@ nomnom.decorate(".is-draggable", class { } - "mousedown::listen"(event) { + "mousedown::"(event) { if(event.target.matches('.modal-card-body *')){ return; } diff --git a/ui/src/main/frontend/src/js/cms.form.js b/ui/src/main/frontend/src/js/cms.form.js index 4a8f05f..b840041 100644 --- a/ui/src/main/frontend/src/js/cms.form.js +++ b/ui/src/main/frontend/src/js/cms.form.js @@ -19,7 +19,8 @@ nomnom.decorate(".Form-Ajax", class { - "submit::handle"(){ + "submit::"(event){ + event.preventDefault(); var $form = $(this); var jcrcontent = false; $form.find('input,select,textarea').each(function(idx,inp){ @@ -75,11 +76,10 @@ nomnom.decorate(".Form-Ajax", class { nomnom.decorate('.Get-Form', class { - "submit::handle"(){ + "submit::"(){ var $form = $(this); var params = $form.serialize(); $form.find('.Form-Ajax__wrapper').attr('disabled', 'disabled'); - $($form.data('target')).load($form.attr('action') + '?' + params +' ' + $form.data('load'), function(){ $form.find('.Form-Ajax__wrapper').removeAttr('disabled'); }); @@ -88,3 +88,17 @@ nomnom.decorate('.Get-Form', class { }); +nomnom.decorate(".repeating", class { + + "click::.repeating__add"() { + var $rep = $(this); + var $div = $("<div/>").html($rep.find(".repeating__template").html()); + $rep.find(".repeating__container").append($div); + } + + "click::.repeating__remove"(event) { + event.preventDefault(); + var $rem = $(event.target); + $rem.parents(".repeating__item").remove(); + } +}); diff --git a/ui/src/main/frontend/src/js/cms.js b/ui/src/main/frontend/src/js/cms.js index 503334b..4d93218 100644 --- a/ui/src/main/frontend/src/js/cms.js +++ b/ui/src/main/frontend/src/js/cms.js @@ -62,34 +62,7 @@ Sling.CMS = { } }; - Sling.CMS.ext['includeconfig'] = { - decorate: function($ctx){ - $ctx.find('.sling-cms-include-config').each(function(){ - var $ctr = $(this); - var load = function(){ - var config = $($ctr.data('source')).find('option:selected').data('config'); - - if(config){ - $ctr.load(config + $ctr.parents('form').attr('action'), function(){ - Sling.CMS.decorate($ctr.children()); - }); - } - }; - $($ctr.data('source')).change(load); - load(); - }); - } - }; - Sling.CMS.ext['handledelete'] = function(res, msg){ - if(window.location.pathname.indexOf(res.path) !== -1){ - window.top.Sling.CMS.ui.confirmMessage(msg, res.title,function(){ - window.location = '/cms'; - }); - } else { - Sling.CMS.ext.reload(res, msg); - } - } Sling.CMS.ext['handlemove'] = function(res, msg){ var changes = res.changes[0]; @@ -157,24 +130,15 @@ Sling.CMS = { } } - Sling.CMS.ext['repeating'] = { - decorate: function($ctx){ - $ctx.find('.repeating').each(function(){ - var $rep = $(this); - $rep.find('.repeating__add').click(function(){ - var $div = $('<div/>').html($rep.find('.repeating__template').html()); - Sling.CMS.decorate($div); - $rep.find('.repeating__container').append($div); - return false; - }); - }); - $ctx.find('.repeating__remove').click(function(){ - var $rem = $(this); - $rem.parents('.repeating__item').remove(); - return false; + Sling.CMS.ext['handledelete'] = function(res, msg){ + if(window.location.pathname.indexOf(res.path) !== -1){ + window.top.Sling.CMS.ui.confirmMessage(msg, res.title,function(){ + window.location = '/cms'; }); + } else { + Sling.CMS.ext.reload(res, msg); } - }; + } Sling.CMS.ext['richtext'] = { @@ -212,26 +176,6 @@ Sling.CMS = { }); } } - - Sling.CMS.ext['table'] = { - decorate: function($ctx) { - $ctx.find('table tbody tr').click(function(el){ - $('.actions-target > *').appendTo('tr.is-selected .cell-actions') - $('tr').removeClass('is-selected'); - $(this).addClass('is-selected'); - $(this).find('.cell-actions > *').appendTo('.actions-target') - }); - - $ctx.find('table').each(function(){ - var sort = $(this).data('sort') !== 'false'; - var paginate = $(this).data('paginate') !== 'false'; - $(this).DataTable({ - sort: sort, - paginate: paginate - }); - }); - } - }; $(document).ready(function() { Sling.CMS.init(); @@ -239,7 +183,7 @@ Sling.CMS = { nomnom.decorate(".table .load-versions", class { - nomnomCallback(){ + initCallback(){ var $ctr = $(this); var $table = $ctr.closest('.table'); $.getJSON($ctr.data('url'),function(res){ @@ -309,3 +253,42 @@ nomnom.decorate('.taxonomy__item', class { } }); +nomnom.decorate(".table", class { + + initCallback(){ + var $table = $(this); + var sort = $table.data('sort') !== 'false'; + var paginate = $table.data('paginate') !== 'false'; + $table.DataTable({ + sort: sort, + paginate: paginate + }); + } + + "click::tbody tr > *"(event) { + $('.actions-target > *').appendTo('tr.is-selected .cell-actions'); + $(this).find('tr').removeClass('is-selected'); + var $target = $(event.target).closest("tr"); + $target.addClass('is-selected'); + $target.find('.cell-actions > *').appendTo('.actions-target') + } + +}); + +nomnom.decorate('.sling-cms-include-config', class { + initCallback() { + var $ctr = $(this); + var load = function(){ + var config = $($ctr.data('source')).find('option:selected').data('config'); + + if(config){ + $ctr.load(config + $ctr.parents('form').attr('action'), function(){ + Sling.CMS.decorate($ctr.children()); + }); + } + }; + $($ctr.data('source')).change(load); + load(); + } +}); + diff --git a/ui/src/main/frontend/src/js/cms.modal.js b/ui/src/main/frontend/src/js/cms.modal.js index 4439469..cc75e80 100644 --- a/ui/src/main/frontend/src/js/cms.modal.js +++ b/ui/src/main/frontend/src/js/cms.modal.js @@ -18,7 +18,8 @@ */ nomnom.decorate("a.Fetch-Modal", class { - "click::handle"() { + "click::"(event) { + event.preventDefault(); this.setAttribute("disabled",'disabled'); this.getModal(this.getAttribute('data-title'), encodeURI(this.getAttribute('href')), this.getAttribute('data-path')); } diff --git a/ui/src/main/frontend/src/js/cms.nav.js b/ui/src/main/frontend/src/js/cms.nav.js index c64f0fe..88aa2b7 100644 --- a/ui/src/main/frontend/src/js/cms.nav.js +++ b/ui/src/main/frontend/src/js/cms.nav.js @@ -18,7 +18,7 @@ */ nomnom.decorate(".navbar-burger", class { - "click::listen"() { + "click::"() { var target = document.querySelector(this.dataset.target); target.classList.toggle('is-active'); this.classList.toggle('is-active'); diff --git a/ui/src/main/frontend/src/js/cms.toggle.js b/ui/src/main/frontend/src/js/cms.toggle.js index 1052439..10cea18 100644 --- a/ui/src/main/frontend/src/js/cms.toggle.js +++ b/ui/src/main/frontend/src/js/cms.toggle.js @@ -18,7 +18,7 @@ */ nomnom.decorate('.toggle-hidden' , class { - "click::listen"(){ + "click::"(){ $($(this).data('target')).toggleClass('is-hidden'); } }); diff --git a/ui/src/main/frontend/src/js/cms.upload.js b/ui/src/main/frontend/src/js/cms.upload.js index 5138fdf..3647cf2 100644 --- a/ui/src/main/frontend/src/js/cms.upload.js +++ b/ui/src/main/frontend/src/js/cms.upload.js @@ -18,8 +18,8 @@ */ nomnom.decorate(".file",class { - "change:input::listen"(event){ - var nameField = this.querySelector('.file-name'); + "change::input"(event){ + var nameField = this.querySelector(':scope .file-name'); if (nameField){ nameField.textContent = event.target.files[0].name; } diff --git a/ui/src/main/frontend/src/js/nomnom.js b/ui/src/main/frontend/src/js/nomnom.js index d6799bc..a4ec518 100644 --- a/ui/src/main/frontend/src/js/nomnom.js +++ b/ui/src/main/frontend/src/js/nomnom.js @@ -24,7 +24,7 @@ console.log("storing selector" + selector); } tagSelectors[selector] = config; - document.querySelectorAll(selector).forEach(function(node){ + document.querySelectorAll(selector).forEach(function(node) { wrap(node, config); }); }; @@ -83,8 +83,8 @@ } node[key] = configInstance[key]; }); - if (node['initCallback']) { - node['initCallback'].call(node); + if (node.initCallback) { + node.initCallback.call(node); } }; @@ -93,70 +93,54 @@ var targetedEventHandler = function(fn, correctTarget) { return function(event) { if (!event.target.matches(correctTarget)) { + console.log("ignoring "+ event.target.nodeName); return; } fn.apply(this, arguments); }; }; - // generic function to disable default event bubbling - var disableEventDefault = function(fn) { - return function(event) { - event.preventDefault(); - fn.apply(this, arguments); - }; - }; - var registerEventHandler = function(node, propertyName, func) { - var elementIndex = propertyName.indexOf("::"); - var eventName = propertyName.substring(0, elementIndex); - var selector = propertyName.substring(elementIndex + 2, - propertyName.length); - var childSelector = eventName.split(':'); - if (childSelector[1]) { - console.log("capture bubbling events for " + childSelector[1]); - eventName = childSelector[0]; - func = targetedEventHandler(func, childSelector[1]); - } - if (selector === "handle") { - func = disableEventDefault(func); - } - if (selector === "listen" || selector === "handle") { - node.addEventListener(eventName, function(event) { - func.call(node, event); - }); - return; + var values = propertyName.split("::"); + var eventName = values[0]; + var childSelector = values[1]; + + if (childSelector) { + if (childSelector !== "document") { + func = targetedEventHandler(func, childSelector); + } } - if (selector === "document") { + if (childSelector === "document") { document.addEventListener(eventName, function(event) { func.call(node, event); }); return; } - } + node.addEventListener(eventName, function(event) { + func.call(node, event); + }); + }; var check = function(node) { if (!node.querySelectorAll) { return; } for ( var selector in tagSelectors) { + let found = false; if (debug) { - console.log("checking new nodes for " + selector); + console.log("checking nodes for " + selector); } if (node.matches(selector)) { + found = true; wrap(node, tagSelectors[selector]); - return; - } - var found = node.querySelectorAll(":scope " + selector); - if (!found) { - return; } - found.forEach(function(item) { - if (debug) { - console.log("node found for " + selector); - } + node.querySelectorAll(":scope " + selector).forEach(function(item) { + found = true; wrap(item, tagSelectors[selector]) }); + if (found && debug) { + console.log("node found for " + selector); + } } }; diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp index 9817976..6187388 100644 --- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp +++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp @@ -70,5 +70,5 @@ </div> </div> </div> - <button class="repeating__add button">+</button> + <button type="button" class="repeating__add button">+</button> </div> \ No newline at end of file diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/repeating/field.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/repeating/field.jsp index 968a612..341d1af 100644 --- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/repeating/field.jsp +++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/repeating/field.jsp @@ -44,7 +44,7 @@ </div> </c:forEach> </div> - <button class="repeating__add button"> + <button type="button" class="repeating__add button"> <span class="jam jam-plus"></span> </button> </div> \ No newline at end of file
