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
The following commit(s) were added to refs/heads/master by this push:
new 9c1fae7 SLING-7986 converted nomnom to object based configuration
9c1fae7 is described below
commit 9c1fae7c34b94c9d647128bd7883b71004570e31
Author: JE Bailey <[email protected]>
AuthorDate: Thu Oct 11 11:03:14 2018 -0400
SLING-7986 converted nomnom to object based configuration
---
ui/src/main/frontend/src/js/cms.draggable.js | 69 ++++++------
ui/src/main/frontend/src/js/cms.form.js | 154 ++++++++++++++-------------
ui/src/main/frontend/src/js/cms.js | 60 ++++++-----
ui/src/main/frontend/src/js/cms.modal.js | 18 ++--
ui/src/main/frontend/src/js/cms.nav.js | 14 +--
ui/src/main/frontend/src/js/cms.suggest.js | 4 +-
ui/src/main/frontend/src/js/cms.toggle.js | 15 +--
ui/src/main/frontend/src/js/cms.upload.js | 16 +--
ui/src/main/frontend/src/js/nomnom.js | 53 ++++-----
9 files changed, 217 insertions(+), 186 deletions(-)
diff --git a/ui/src/main/frontend/src/js/cms.draggable.js
b/ui/src/main/frontend/src/js/cms.draggable.js
index 415ef96..86c02cd 100644
--- a/ui/src/main/frontend/src/js/cms.draggable.js
+++ b/ui/src/main/frontend/src/js/cms.draggable.js
@@ -17,9 +17,9 @@
* under the License.
*/
-nomnom.decorate(".is-draggable", class {
-
- initCallback() {
+nomnom.decorate(".is-draggable", {
+
+ initCallback: function() {
this.dragData = {
mouseX : 0,
mouseY : 0,
@@ -27,41 +27,40 @@ nomnom.decorate(".is-draggable", class {
elementX : 0,
elementY : 0
};
- }
-
-
- moveComplete(){
+ },
+
+ moveComplete: function(){
this.dragData.mouseDown = false;
this.dragData.elementX = parseInt(this.style.left) || 0;
this.dragData.elementY = parseInt(this.style.top) || 0;
return false;
- }
-
-
- "mousedown::"(event) {
- if(event.target.matches('.modal-card-body *')){
- return;
- }
- this.dragData.mouseX = event.clientX;
- this.dragData.mouseY = event.clientY;
- this.dragData.mouseDown = true;
- }
-
- "mouseup::document"() {
- if (this.dragData.mouseDown === true){
- this.moveComplete();
- }
- }
+ },
- "mousemove::document"(event){
- if (this.dragData.mouseDown === false) {
- return false;
- }
- var deltaX = event.clientX - this.dragData.mouseX;
- var deltaY = event.clientY - this.dragData.mouseY;
- this.style.left = this.dragData.elementX + deltaX + 'px';
- this.style.top = this.dragData.elementY + deltaY + 'px';
- return false;
- }
-
+ events : {
+ mousedown:function(event) {
+ if(event.target.matches('.modal-card-body *')){
+ return;
+ }
+ this.dragData.mouseX = event.clientX;
+ this.dragData.mouseY = event.clientY;
+ this.dragData.mouseDown = true;
+ },
+ document : {
+ mouseup : function(){
+ if (this.dragData.mouseDown === true){
+ this.moveComplete();
+ }
+ },
+ mousemove: function(event) {
+ if (this.dragData.mouseDown === false) {
+ return false;
+ }
+ var deltaX = event.clientX - this.dragData.mouseX;
+ var deltaY = event.clientY - this.dragData.mouseY;
+ this.style.left = this.dragData.elementX + deltaX + 'px';
+ this.style.top = this.dragData.elementY + deltaY + 'px';
+ return false;
+ }
+ }
+ }
});
\ No newline at end of file
diff --git a/ui/src/main/frontend/src/js/cms.form.js
b/ui/src/main/frontend/src/js/cms.form.js
index 925d939..ba54088 100644
--- a/ui/src/main/frontend/src/js/cms.form.js
+++ b/ui/src/main/frontend/src/js/cms.form.js
@@ -18,89 +18,97 @@
*/
-nomnom.decorate(".Form-Ajax", class {
- "submit::"(event){
- event.preventDefault();
- var $form = $(this);
- var jcrcontent = false;
- $form.find('input,select,textarea').each(function(idx,inp){
- if(inp.name.indexOf('jcr:content') != -1){
- jcrcontent = true;
- }
- });
- if($form.data('addDate') &&
$form.find('input[name="jcr:content/jcr:lastModified"]').length == 0){
- if(jcrcontent){
- $form.append('<input type="hidden"
name="jcr:content/jcr:lastModified" />');
- $form.append('<input type="hidden"
name="jcr:content/jcr:lastModifiedBy" />');
- $form.append('<input type="hidden"
name="jcr:content/jcr:created" />');
- $form.append('<input type="hidden"
name="jcr:content/jcr:createdBy" />');
- } else {
- $form.append('<input type="hidden" name="jcr:lastModified"
/>');
- $form.append('<input type="hidden" name="jcr:lastModifiedBy"
/>');
- $form.append('<input type="hidden" name="jcr:created" />');
- $form.append('<input type="hidden" name="jcr:createdBy" />');
- }
- }
- var callback = $form.data('callback');
- var data = new FormData(this);
- $form.find('.form-wrapper').attr('disabled', 'disabled');
- $.ajax({
- url: $form.attr('action'),
- type: 'POST',
- data: data,
- processData: false,
- contentType: false,
- dataType: 'json',
- success: function(res,msg){
- if (callback && Sling.CMS.handlers[callback]){
- Sling.CMS.handlers[callback](res, msg);
- } else {
- Sling.CMS.ui.confirmReload(res, msg);
+nomnom.decorate(".Form-Ajax", {
+ events :{
+ submit : function(event){
+ event.preventDefault();
+ var $form = $(this);
+ var jcrcontent = false;
+ $form.find('input,select,textarea').each(function(idx,inp){
+ if(inp.name.indexOf('jcr:content') != -1){
+ jcrcontent = true;
}
- },
- error: function(xhr, msg, err){
- if(window.self !== window.top){
- window.top.Sling.CMS.ui.confirmMessage(msg, err,function(){
- $form.find('.form-wrapper').removeAttr('disabled');
- });
+ });
+ if($form.data('addDate') &&
$form.find('input[name="jcr:content/jcr:lastModified"]').length == 0){
+ if(jcrcontent){
+ $form.append('<input type="hidden"
name="jcr:content/jcr:lastModified" />');
+ $form.append('<input type="hidden"
name="jcr:content/jcr:lastModifiedBy" />');
+ $form.append('<input type="hidden"
name="jcr:content/jcr:created" />');
+ $form.append('<input type="hidden"
name="jcr:content/jcr:createdBy" />');
} else {
- Sling.CMS.ui.confirmMessage(msg, err,function(){
- $form.find('.form-wrapper').removeAttr('disabled');
- });
+ $form.append('<input type="hidden" name="jcr:lastModified"
/>');
+ $form.append('<input type="hidden"
name="jcr:lastModifiedBy" />');
+ $form.append('<input type="hidden" name="jcr:created" />');
+ $form.append('<input type="hidden" name="jcr:createdBy"
/>');
}
}
- });
- return false;
+ var callback = $form.data('callback');
+ var data = new FormData(this);
+ $form.find('.form-wrapper').attr('disabled', 'disabled');
+ $.ajax({
+ url: $form.attr('action'),
+ type: 'POST',
+ data: data,
+ processData: false,
+ contentType: false,
+ dataType: 'json',
+ success: function(res,msg){
+ if (callback && Sling.CMS.handlers[callback]){
+ Sling.CMS.handlers[callback](res, msg);
+ } else {
+ Sling.CMS.ui.confirmReload(res, msg);
+ }
+ },
+ error: function(xhr, msg, err){
+ if(window.self !== window.top){
+ window.top.Sling.CMS.ui.confirmMessage(msg,
err,function(){
+ $form.find('.form-wrapper').removeAttr('disabled');
+ });
+ } else {
+ Sling.CMS.ui.confirmMessage(msg, err,function(){
+ $form.find('.form-wrapper').removeAttr('disabled');
+ });
+ }
+ }
+ });
+ return false;
+ }
}
});
-nomnom.decorate('.Get-Form', class {
- "submit::"(event){
- event.preventDefault();
- event.stopPropagation();
- var $form = $(this);
- var params = $form.serialize();
- $form.find('.form-wrapper').attr('disabled', 'disabled');
- $($form.data('target')).load($form.attr('action') + '?' + params +' '
+ $form.data('load'), function(){
- $form.find('.form-wrapper').removeAttr('disabled');
- });
- return false;
+nomnom.decorate('.Get-Form', {
+ events : {
+ submit : function () {
+ event.preventDefault();
+ event.stopPropagation();
+ var $form = $(this);
+ var params = $form.serialize();
+ $form.find('.form-wrapper').attr('disabled', 'disabled');
+ $($form.data('target')).load($form.attr('action') + '?' + params
+' ' + $form.data('load'), function(){
+ $form.find('.form-wrapper').removeAttr('disabled');
+ });
+ return false;
+ }
}
-
});
-nomnom.decorate(".repeating", class {
- "click::.repeating__add"(event) {
- event.preventDefault();
- 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();
+nomnom.decorate(".repeating", {
+ events : {
+ ".repeating__add" : {
+ click : function(){
+ event.preventDefault();
+ var $rep = $(this);
+ var $div =
$("<div/>").html($rep.find(".repeating__template").html());
+ $rep.find(".repeating__container").append($div);
+ }
+ },
+ ".repeating__remove" : {
+ click : function() {
+ 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 b9066d4..e22c344 100644
--- a/ui/src/main/frontend/src/js/cms.js
+++ b/ui/src/main/frontend/src/js/cms.js
@@ -167,9 +167,9 @@ nomnom.decorate(".namehint",class {
}
});
-nomnom.decorate(".table .load-versions", class {
+nomnom.decorate(".table .load-versions", {
- initCallback(){
+ initCallback: function() {
var $ctr = $(this);
var $table = $ctr.closest('.table');
$.getJSON($ctr.data('url'),function(res){
@@ -182,28 +182,34 @@ nomnom.decorate(".table .load-versions", class {
});
-nomnom.decorate('.search-button', class {
- "click::"(event) {
- Sling.CMS.searchfield =
$($(event.target).closest('.field').find('.pathfield'));
+
+nomnom.decorate('.search-button', {
+ events :{
+ click : function(){
+ Sling.CMS.ext['searchbutton'] = Sling.CMS.ext['searchbutton'] ||
{};
+ var searchbutton = Sling.CMS.ext['searchbutton'];
+ searchbutton.active =
$(event.target).closest('.field').find('.pathfield');
+ }
}
});
-nomnom.decorate('.search-select-button', class {
- "click::"(event) {
- event.stopPropagation();
- event.preventDefault();
- var $btn = $(event.target);
- var $active = Sling.CMS.searchfield;
- $active.val($btn.data('path'));
- $btn.closest('.modal').remove();
+
+nomnom.decorate('.search-select-button', {
+ events :{
+ click : function(event){
+ var $btn = $(evt.target);
+ var $active = Sling.CMS.ext['searchbutton'].active;
+ $active.val($btn.data('path'));
+ $btn.closest('.modal').remove();
+ }
}
});
-nomnom.decorate(".table", class {
+nomnom.decorate(".table", {
- initCallback(){
+ initCallback: function(){
var $table = $(this);
var sort = $table.data('sort') !== 'false';
var paginate = $table.data('paginate') !== 'false';
@@ -211,20 +217,24 @@ nomnom.decorate(".table", class {
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')
+ events :{
+ "tbody tr > *" : {
+ click: function(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() {
+nomnom.decorate('.sling-cms-include-config', {
+ initCallback: function() {
var $ctr = $(this);
var load = function(){
var config =
$($ctr.data('source')).find('option:selected').data('config');
diff --git a/ui/src/main/frontend/src/js/cms.modal.js
b/ui/src/main/frontend/src/js/cms.modal.js
index cc75e80..d276d0c 100644
--- a/ui/src/main/frontend/src/js/cms.modal.js
+++ b/ui/src/main/frontend/src/js/cms.modal.js
@@ -16,15 +16,17 @@
* specific language governing permissions and limitations
* under the License.
*/
-nomnom.decorate("a.Fetch-Modal", class {
+nomnom.decorate("a.Fetch-Modal", {
- "click::"(event) {
- event.preventDefault();
- this.setAttribute("disabled",'disabled');
- this.getModal(this.getAttribute('data-title'),
encodeURI(this.getAttribute('href')), this.getAttribute('data-path'));
- }
-
- getModal(title, link, path, complete) {
+ events :{
+ click: function(event){
+ event.preventDefault();
+ this.setAttribute("disabled",'disabled');
+ this.getModal(this.getAttribute('data-title'),
encodeURI(this.getAttribute('href')), this.getAttribute('data-path'));
+ }
+ },
+
+ getModal: function(title, link, path, complete) {
var button = this;
var $modal = $('<div class="modal"><div
class="modal-background"></div><div class="modal-card is-draggable"><header
class="modal-card-head"><p class="modal-card-title">'+title+'</p><button
class="delete" aria-label="close"></button></header><section
class="modal-card-body"></section><footer
class="modal-card-foot"></footer></div>');
$('body').append($modal);
diff --git a/ui/src/main/frontend/src/js/cms.nav.js
b/ui/src/main/frontend/src/js/cms.nav.js
index 88aa2b7..6ff1604 100644
--- a/ui/src/main/frontend/src/js/cms.nav.js
+++ b/ui/src/main/frontend/src/js/cms.nav.js
@@ -17,11 +17,13 @@
* under the License.
*/
-nomnom.decorate(".navbar-burger", class {
- "click::"() {
- var target = document.querySelector(this.dataset.target);
- target.classList.toggle('is-active');
- this.classList.toggle('is-active');
- }
+nomnom.decorate(".navbar-burger", {
+ events :{
+ click: function(){
+ 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.suggest.js
b/ui/src/main/frontend/src/js/cms.suggest.js
index 8191326..9f58a95 100644
--- a/ui/src/main/frontend/src/js/cms.suggest.js
+++ b/ui/src/main/frontend/src/js/cms.suggest.js
@@ -17,8 +17,8 @@
* under the License.
*/
-nomnom.decorate("input.pathfield", class {
- initCallback(){
+nomnom.decorate("input.pathfield", {
+ initCallback: function(){
var type = $(this).data('type');
var base = $(this).data('base');
Sling.CMS.ui.suggest(this, type, base);
diff --git a/ui/src/main/frontend/src/js/cms.toggle.js
b/ui/src/main/frontend/src/js/cms.toggle.js
index 5a8a91b..97cd4eb 100644
--- a/ui/src/main/frontend/src/js/cms.toggle.js
+++ b/ui/src/main/frontend/src/js/cms.toggle.js
@@ -17,13 +17,16 @@
* under the License.
*/
-nomnom.decorate('.toggle-hidden' , class {
- "click::"(){
- $($(this).data('target')).toggleClass('is-hidden');
+nomnom.decorate('.toggle-hidden' , {
+ events : {
+ click: function() {
+ $($(this).data('target')).toggleClass('is-hidden');
+ }
}
-});
-nomnom.decorate('.toggle-value', class {
- initCallback(){
+});
+
+nomnom.decorate('.toggle-value', {
+ initCallback: function(){
var source = this.getAttribute('data-toggle-source');
var selector = 'input[name="'+ source +'"], select[name="'+ selector
+'"]';
var $tog = $(this);
diff --git a/ui/src/main/frontend/src/js/cms.upload.js
b/ui/src/main/frontend/src/js/cms.upload.js
index 3647cf2..0815f4e 100644
--- a/ui/src/main/frontend/src/js/cms.upload.js
+++ b/ui/src/main/frontend/src/js/cms.upload.js
@@ -17,11 +17,15 @@
* under the License.
*/
-nomnom.decorate(".file",class {
- "change::input"(event){
- var nameField = this.querySelector(':scope .file-name');
- if (nameField){
- nameField.textContent = event.target.files[0].name;
+nomnom.decorate(".file", {
+ events:{
+ input:{
+ change : function(event) {
+ var nameField = this.querySelector(':scope .file-name');
+ if (nameField){
+ nameField.textContent = event.target.files[0].name;
+ }
+ }
}
- }
+ }
});
\ No newline at end of file
diff --git a/ui/src/main/frontend/src/js/nomnom.js
b/ui/src/main/frontend/src/js/nomnom.js
index a4ec518..4b0de0d 100644
--- a/ui/src/main/frontend/src/js/nomnom.js
+++ b/ui/src/main/frontend/src/js/nomnom.js
@@ -61,9 +61,8 @@
return;
}
configSet.add(config);
- var configInstance = new config();
- var names = Object.getOwnPropertyNames(config.prototype);
- var keys = Object.keys(configInstance);
+ var names = Object.getOwnPropertyNames(config);
+ var keys = Object.keys(config);
names.forEach(function(name) {
if (name === "constructor") {
return;
@@ -71,17 +70,17 @@
if (debug) {
console.log(" decorating " + name);
}
- if (name.indexOf("::") !== -1) {
- registerEventHandler(node, name, configInstance[name]);
+ if (name === "events") {
+ registerEventHandlers(node, name, config[name]);
} else {
- node[name] = configInstance[name];
+ node[name] = config[name];
}
});
keys.forEach(function(key) {
if (debug) {
console.log(" decorating " + key);
}
- node[key] = configInstance[key];
+ node[key] = config[key];
});
if (node.initCallback) {
node.initCallback.call(node);
@@ -93,32 +92,36 @@
var targetedEventHandler = function(fn, correctTarget) {
return function(event) {
if (!event.target.matches(correctTarget)) {
- console.log("ignoring "+ event.target.nodeName);
+ console.log("ignoring " + event.target.nodeName);
return;
}
fn.apply(this, arguments);
};
};
- var registerEventHandler = function(node, propertyName, func) {
- var values = propertyName.split("::");
- var eventName = values[0];
- var childSelector = values[1];
-
- if (childSelector) {
- if (childSelector !== "document") {
- func = targetedEventHandler(func, childSelector);
+ var registerEventHandlers = function(node, propertyName, events) {
+ for ( var eventName in events) {
+ let possibleFunc = events[eventName];
+ if (typeof possibleFunc === "function") {
+ node.addEventListener(eventName, function(event) {
+ possibleFunc.call(node, event);
+ });
+ } else {
+ let selector = eventName;
+ let targetNode = node;
+ for ( var childEventName in possibleFunc) {
+ let func = targetedEventHandler(
+ possibleFunc[childEventName], selector);
+ if (selector == "document") {
+ targetNode = document;
+ }
+ targetNode.addEventListener(childEventName,
+ function(event) {
+ func.call(node, event);
+ });
+ }
}
}
- 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) {
