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 06101f4 SLING-7986 js and syntax cleanup
06101f4 is described below
commit 06101f4a5710d4803b90c6aadf85a4c21109708b
Author: JE Bailey <[email protected]>
AuthorDate: Tue Oct 9 09:29:21 2018 -0400
SLING-7986 js and syntax cleanup
---
ui/src/main/frontend/src/js/cms.draggable.js | 20 +++----
ui/src/main/frontend/src/js/cms.form.js | 4 +-
ui/src/main/frontend/src/js/cms.js | 20 ++-----
ui/src/main/frontend/src/js/cms.modal.js | 2 +-
ui/src/main/frontend/src/js/cms.nav.js | 2 +-
ui/src/main/frontend/src/js/cms.suggest.js | 2 +-
ui/src/main/frontend/src/js/cms.toggle.js | 4 +-
ui/src/main/frontend/src/js/cms.upload.js | 2 +-
ui/src/main/frontend/src/js/nomnom.js | 79 ++++++++++++++++------------
9 files changed, 68 insertions(+), 67 deletions(-)
diff --git a/ui/src/main/frontend/src/js/cms.draggable.js
b/ui/src/main/frontend/src/js/cms.draggable.js
index 2dd6f8f..39756b7 100644
--- a/ui/src/main/frontend/src/js/cms.draggable.js
+++ b/ui/src/main/frontend/src/js/cms.draggable.js
@@ -19,17 +19,17 @@
nomnom.decorate(".is-draggable", class {
- init() {
- this.dragData = {
- mouseX : 0,
- mouseY : 0,
- mouseDown : false,
- elementX : 0,
- elementY : 0
- };
- }
+ nomnomCallback() {
+ this.dragData = {
+ mouseX : 0,
+ mouseY : 0,
+ mouseDown : false,
+ elementX : 0,
+ elementY : 0
+ };
+ }
- "mousedown::this"(event) {
+ "mousedown::listen"(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 4ed96fb..4a8f05f 100644
--- a/ui/src/main/frontend/src/js/cms.form.js
+++ b/ui/src/main/frontend/src/js/cms.form.js
@@ -19,7 +19,7 @@
nomnom.decorate(".Form-Ajax", class {
- "submit::handler"(){
+ "submit::handle"(){
var $form = $(this);
var jcrcontent = false;
$form.find('input,select,textarea').each(function(idx,inp){
@@ -75,7 +75,7 @@ nomnom.decorate(".Form-Ajax", class {
nomnom.decorate('.Get-Form', class {
- "submit::handler"(){
+ "submit::handle"(){
var $form = $(this);
var params = $form.serialize();
$form.find('.Form-Ajax__wrapper').attr('disabled', 'disabled');
diff --git a/ui/src/main/frontend/src/js/cms.js
b/ui/src/main/frontend/src/js/cms.js
index 4dc4eee..503334b 100644
--- a/ui/src/main/frontend/src/js/cms.js
+++ b/ui/src/main/frontend/src/js/cms.js
@@ -62,8 +62,6 @@ Sling.CMS = {
}
};
-
-
Sling.CMS.ext['includeconfig'] = {
decorate: function($ctx){
$ctx.find('.sling-cms-include-config').each(function(){
@@ -204,10 +202,6 @@ Sling.CMS = {
}
};
-
-
-
-
Sling.CMS.ext['suffix-form'] = {
init: function() {
$('.suffix-form').submit(function(){
@@ -239,17 +233,13 @@ Sling.CMS = {
}
};
-
-
-
-
$(document).ready(function() {
Sling.CMS.init();
});
nomnom.decorate(".table .load-versions", class {
- init(){
+ nomnomCallback(){
var $ctr = $(this);
var $table = $ctr.closest('.table');
$.getJSON($ctr.data('url'),function(res){
@@ -264,7 +254,7 @@ nomnom.decorate(".table .load-versions", class {
nomnom.decorate('.search-button', class {
- "click::this"(event) {
+ "click::listen"(event) {
Sling.CMS.ext['searchbutton'] = Sling.CMS.ext['searchbutton'] || {};
var searchbutton = Sling.CMS.ext['searchbutton'];
searchbutton.active =
$(event.target).closest('.field').find('.pathfield');
@@ -274,7 +264,7 @@ nomnom.decorate('.search-button', class {
nomnom.decorate('.search-select-button', class {
- "click::this"(event) {
+ "click::listen"(event) {
var $btn = $(evt.target);
var $active = Sling.CMS.ext['searchbutton'].active;
$active.val($btn.data('path'));
@@ -284,7 +274,7 @@ nomnom.decorate('.search-select-button', class {
});
nomnom.decorate('.taxonomy', class {
- "click::this"(){
+ "click::listen"(){
var $rep = $(this);
$rep.find('.taxonomy__add').click(function(){
var $span =
$('<span/>').html($rep.find('.taxonomy__template').html());
@@ -313,7 +303,7 @@ nomnom.decorate('.taxonomy', class {
});
nomnom.decorate('.taxonomy__item', class {
- "click::this"(){
+ "click::listen"(){
$(this).remove();
return false;
}
diff --git a/ui/src/main/frontend/src/js/cms.modal.js
b/ui/src/main/frontend/src/js/cms.modal.js
index 505d4ee..efaf4a9 100644
--- a/ui/src/main/frontend/src/js/cms.modal.js
+++ b/ui/src/main/frontend/src/js/cms.modal.js
@@ -18,7 +18,7 @@
*/
nomnom.decorate("a.Fetch-Modal", class {
- "click::handler"() {
+ "click::handle"() {
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 8c0e7f0..c64f0fe 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::this"() {
+ "click::listen"() {
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 5b57d53..be42c31 100644
--- a/ui/src/main/frontend/src/js/cms.suggest.js
+++ b/ui/src/main/frontend/src/js/cms.suggest.js
@@ -18,7 +18,7 @@
*/
nomnom.decorate("input.pathfield", class {
- init(){
+ nomnomCallback(){
var type = $(this).data('type');
var base = $(this).data('base');
var xhr;
diff --git a/ui/src/main/frontend/src/js/cms.toggle.js
b/ui/src/main/frontend/src/js/cms.toggle.js
index 4dda713..524261d 100644
--- a/ui/src/main/frontend/src/js/cms.toggle.js
+++ b/ui/src/main/frontend/src/js/cms.toggle.js
@@ -18,13 +18,13 @@
*/
nomnom.decorate('.toggle-hidden' , class {
- "click::this"(){
+ "click::listen"(){
$($(this).data('target')).toggleClass('is-hidden');
}
});
nomnom.decorate('.toggle-value', class {
- init(){
+ nomnomCallback(){
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 d4ee610..5138fdf 100644
--- a/ui/src/main/frontend/src/js/cms.upload.js
+++ b/ui/src/main/frontend/src/js/cms.upload.js
@@ -18,7 +18,7 @@
*/
nomnom.decorate(".file",class {
- "change:input::this"(event){
+ "change:input::listen"(event){
var nameField = this.querySelector('.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 8144c0c..891df46 100644
--- a/ui/src/main/frontend/src/js/nomnom.js
+++ b/ui/src/main/frontend/src/js/nomnom.js
@@ -52,32 +52,61 @@
console.log("decorating element " + node + node.name);
}
var configSet;
- if (elementMap.has(node)){
+ if (elementMap.has(node)) {
configSet = elementMap.get(node);
} else {
configSet = new Set();
- elementMap.set(node,configSet);
+ elementMap.set(node, configSet);
}
- if (configSet.has(config)){
+ if (configSet.has(config)) {
return;
}
configSet.add(config);
+ var configInstance = new config();
var names = Object.getOwnPropertyNames(config.prototype);
+ var keys = Object.keys(configInstance);
names.forEach(function(name) {
- if (debug) {
- console.log(" decorating " + name);
+ if (name !== "constructor") {
+ if (debug) {
+ console.log(" decorating " + name);
+ }
+ if (name.indexOf("::") !== -1) {
+ registerEventHandler(node, name, configInstance[name]);
+ } else {
+ node[name] = configInstance[name];
+ }
}
- if (name.indexOf("::") !== -1) {
- registerEventHandler(node, name, config.prototype[name]);
- } else {
- node[name] = config.prototype[name];
+ });
+ keys.forEach(function(key) {
+ if (debug) {
+ console.log(" decorating " + key);
}
+ node[key] = configInstance[key];
});
- if (node['init']) {
- node['init'].call(node);
+ if (node['nomnomCallback']) {
+ node['nomnomCallback'].call(node);
}
};
+ // generic function to wrap the event handler in the case that
+ // we only want it to fire for a specific child event
+ var targetedEventHandler = function(fn, correctTarget) {
+ return function(event) {
+ if (!event.target.matches(correctTarget)) {
+ 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);
@@ -87,37 +116,19 @@
if (childSelector[1]) {
console.log("capture bubbling events for " + childSelector[1]);
eventName = childSelector[0];
+ func = targetedEventHandler(func, childSelector[1]);
}
- if (selector === "this") {
- node.addEventListener(eventName, function(event) {
- if (childSelector[1]) {
- if (!event.target.matches(childSelector[1])) {
- return;
- }
- }
- func.call(node, event);
- });
- return;
+ if (selector === "handle") {
+ func = disableEventDefault(func);
}
- if (selector === "handler") {
+ if (selector === "listen" || selector === "handle") {
node.addEventListener(eventName, function(event) {
- event.preventDefault();
- if (childSelector[1]) {
- if (!event.target.matches(childSelector[1])) {
- return;
- }
- }
func.call(node, event);
});
return;
}
if (selector === "document") {
document.addEventListener(eventName, function(event) {
- if (childSelector[1]) {
- if (!event.target.matches(childSelector[1])) {
- return;
- }
- }
func.call(node, event);
});
return;
@@ -137,7 +148,7 @@
if (found) {
found.forEach(function(item) {
if (debug) {
- console.log("html node found for " + selector);
+ console.log("node found for " + selector);
}
wrap(item, tagSelectors[selector])
});
