diff --git a/src/js/components/forms/select.js b/src/js/components/forms/select.js
index 340f0658..653655fa 100644
--- a/src/js/components/forms/select.js
+++ b/src/js/components/forms/select.js
@@ -13,20 +13,6 @@
const _this = element,
$_this = $(_this);
- const sibling = (elem, $elem) => {
- $elem = ($elem === undefined || $elem === null || $elem === '') ? $_this : $elem;
- const $next = $elem.next(elem),
- $prev = $elem.prev(elem);
-
- //console.log($next, $prev);
- if($next.length > 0)
- return $next;
- else if($prev.length > 0)
- return $prev;
-
- return undefined;
- }
-
function GUID(str) {
if(str === undefined || !str.length)
str = "" + Math.random() * new Date().getTime() + Math.random();
@@ -63,8 +49,7 @@
const getOptionHTML = ($option) => {
const guid = `sgn-option-${GUID()}`;
- const v = $option.val(),
- t = $option.text(),
+ const t = $option.text(),
disabled = $option.attr('disabled'),
readonly = $option.attr('readonly');
@@ -73,9 +58,7 @@
$option.attr('aria-describedby', guid);
$option.data('describedby', guid);
- let html = `${t}`;
-
- return html;
+ return `${t}`;
}
const init = () => {
@@ -110,7 +93,6 @@
$inputWrapper.append(html);
- //console.log($sgnSelectInput,$_this,$container);
$sgnSelectInput.SGNInput();
bindEvents();
@@ -126,73 +108,47 @@
$sgnSelect = $inputWrapper.children('.sgn-select'),
$sgnOptions = $sgnSelect.children('.sgn-option');
- /*$container.on('click', function(e) {
- const $this = $(this);
- const $inputGroup = ($this.parents('.crtb-group').length > 0) ? $this.parents('.crtb-group') : $this.parents('.input-group');
- const $input = $this.children('.sgn-form-wrapper').children('.sgn-input-wrapper').children('input.sgn-select-input');
-
- $('.sgn-form.sgn-select .form-control').blur();
- $('.sgn-form.sgn-select.open').removeClass('open');
- //console.log($_this, $this);
-
- if(!$this.hasClass('active'))
- $this.removeClass('edited').addClass('active');
- if($inputGroup.length > 0)
- $inputGroup.removeClass('edited').addClass('active');
-
- if(!$input.is(':focus'))
- $input.focus();
-
- if(!$this.hasClass('sgn-select')) {
- if(!$input.is(':focus'))
- $container.removeClass('active');
- else
- $this.trigger('sgninput.click');
- }
- });*/
-
$sgnSelectInput.on('focus', function(e) {
+ e.stopPropagation();
$('.sgn-form.sgn-select').removeClass('open');
- //console.log($(this), _this);
- _this.show();
- });
-
- $sgnSelectInput.on('blur', function(e) {
- _this.hide();
- });
-
- $sgnSelect.on('mouseover', function(e) {
$sgnSelectInput.off('blur');
+ plugin.show();
});
- $sgnSelect.on('mouseout', function(e) {
- $sgnSelectInput.on('blur');
+ $sgnSelectInput.on('focusout', function(e) {
+ e.stopPropagation();
+ const eot = e.explicitOriginalTarget,
+ $eot = $(eot),
+ $option = ($eot.hasClass('sgn-option')) ? $eot : $eot.parents('.sgn-option');
+
+ if($option.length <= 0) {
+ plugin.hide();
+ $sgnSelectInput.on('blur').trigger('blur');
+ }
});
$sgnOptions.on('click', function(e) {
- e.preventDefault();
+ e.stopPropagation();
const $this = $(this),
id = $this.attr('id'),
- v = $this.val(),
t = $this.children('.sgn-option-label').text();
$sgnOptions.removeClass('selected').removeAttr('selected').prop('selected', false);
$this.addClass('selected').attr('selected', true).prop('selected', true);
$options.removeAttr('selected').prop('selected', false);
- //$select.find(`option[aria-describedby="${id}"]`).attr('selected', true).prop('selected', true).change();
$select.find(`option[aria-describedby="${id}"]`).attr('selected', true).prop('selected', true);
- $select.trigger('change');
- //$sgnSelectInput.val(t).change();
- $sgnSelectInput.val(t).trigger('change');
- $sgnSelectInput.on('blur');
+ if($this.prop('selected')) {
+ $select.trigger('change');
- _this.hide();
+ $sgnSelectInput.val(t).trigger('change');
+ plugin.hide();
+ }
});
}
- _this.show = () => {
+ plugin.show = () => {
let $container = $_this.parents('.sgn-form.sgn-select');
if(!$container.hasClass('open')) {
@@ -200,7 +156,7 @@
}
}
- _this.hide = () => {
+ plugin.hide = () => {
let $container = $_this.parents('.sgn-form.sgn-select');
if($container.hasClass('open')) {
@@ -211,25 +167,60 @@
init();
}
+ /**
+ * Creates an instance of jQuery.SGNSelect and initiates SGNSelect for the called elements.
+ *
+ * @return {jQuery.SGNSelect} Returns jQuery.SGNSelect object for method chaining.
+ */
$.fn.SGNSelect = function() {
const _this = this;
- return _this.each(function() {
+ _this.each(function() {
const $this = $(this),
data = $this.data('SGNSelect');
const plugin = (data === undefined) ? new SGNSelect($this) : data;
$this.data('SGNSelect', plugin);
- /*$this.SGNSelect = plugin;
- $this[0].SGNSelect = plugin;*/
+
+ $this[0]['SGNSelect'] = plugin;
});
+
+
+ /**
+ * Shows the selected SGNSelect elements (if hidden).
+ *
+ * @return {jQuery} Returns jQuery object for DOM chaining.
+ */
+ $.fn.SGNSelect.show = function() {
+ return _this.each(function() {
+ const $this = $(this),
+ plugin = $this.data('SGNSelect');
+ $this.data('SGNSelect', plugin);
+
+ if(plugin !== undefined)
+ plugin.show();
+ });
+ };
+
+ /**
+ * Hides the selected SGNSelect elements (if shown).
+ *
+ * @return {jQuery} Returns jQuery object for DOM chaining.
+ */
+ $.fn.SGNSelect.hide = function() {
+ return _this.each(function() {
+ const $this = $(this),
+ plugin = $this.data('SGNSelect');
+ $this.data('SGNSelect', plugin);
+
+ if(plugin !== undefined)
+ plugin.hide();
+ });
+ };
+
+ return _this;
}
- $(document).ready(function() {
- /*const $inputs = $('select.form-control');
- $inputs.each(function() {
- $(this).SGNSelect();
- });*/
- });
+ window.SGNSelect = SGNSelect;
return this;
})(jQuery, document, window);
\ No newline at end of file
diff --git a/src/js/helpers/DynamicEvents.js b/src/js/helpers/DynamicEvents.js
index ce30229c..6cac25f0 100644
--- a/src/js/helpers/DynamicEvents.js
+++ b/src/js/helpers/DynamicEvents.js
@@ -102,28 +102,6 @@ if(typeof jQuery === "undefined") {
let useCapture = false;
- /*if(typeof listener === 'object') {
- data = listener;
- if(typeof id === 'function')
- listener = id;
- } else if(typeof listener === 'function') {
- if(typeof id === 'object')
- data = id;
- }*/
-
- /*if(typeof listener === 'function') {
- listener = listener;
- if(typeof selector === 'string') {
- selector = selector;
- if(typeof data === 'object') {
- data = data;
- if(typeof id === 'string') {
- id = id;
- }
- }
- }
- }*/
-
let tmp = undefined;
if(typeof listener === 'function' && typeof selector === 'string' && typeof data === 'object' && typeof id === 'string') {
@@ -145,72 +123,72 @@ if(typeof jQuery === "undefined") {
id = tmp;
}
+ const turnOnSingleEvent = ($element, eventData, eventName, create = false) => {
+ const element = $element[0];
+ if(create) {
+ const guid = (id === undefined || id === '') ? GUID() : id;
+
+ const eventData = {
+ 'element': $element,
+ 'event': eventName,
+ 'handler': listener,
+ 'data': data,
+ 'guid': guid,
+ 'status': 'on'
+ };
+
+ delegate(element, eventName, selector, listener, useCapture);
+ if(typeof data === 'object') {
+ $.extend(element, data);
+ }
- return this.each(function() {
- const $this = $(this);
- const eventNames = (eventName !== undefined && eventName !== null && eventName !== '') ? eventName.split(' ') : [];
- //console.log($this, eventName, listener, data);
- if(eventNames.length > 0) {
- eventNames.forEach(function(eventName) {
- if(typeof listener === 'function') {
- const guid = (id === undefined || id === '') ? GUID() : id;
-
- const eventData = {
- 'element': $this,
- 'event': eventName,
- 'handler': listener,
- 'data': data,
- 'guid': guid,
- 'status': 'on'
- };
-
- delegate($this[0], eventName, selector, listener, useCapture);
- if(typeof data === 'object') {
- $.extend($this[0], data);
- }
-
- if($this[0].events === undefined)
- $this[0].events = {};
+ if(element.events === undefined)
+ element.events = {};
- if(!$this[0].events.hasOwnProperty(eventName))
- $this[0].events[eventName] = {};
+ if(!element.events.hasOwnProperty(eventName))
+ element.events[eventName] = {};
- $this[0].events[eventName][guid] = eventData;
- } else {
- const eventData = $this.getEventData(eventName, id);
-
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler,
- data = c.data;
-
- delegate($this[0], eventName, selector, handler, useCapture);
- if(typeof data === 'object') {
- $.extend($this[0], data);
- }
- c.status = 'on';
- });
- }
- }
- });
+ element.events[eventName][guid] = eventData;
} else {
- const eventData = $this.getEventData();
-
if(eventData !== undefined) {
$.each(eventData, function(i, c) {
const name = c.event,
handler = c.handler,
data = c.data;
- delegate($this[0], eventName, selector, handler, useCapture);
+ delegate(element, eventName, selector, handler, useCapture);
if(typeof data === 'object') {
- $.extend($this[0], data);
+ $.extend(element, data);
}
c.status = 'on';
});
}
}
+ }
+ const turnOnEvent = ($element, eventName, create = false) => {
+ if(eventName !== undefined && eventName !== null && eventName !== '') {
+ const eventData = $element.getEventData(eventName, id);
+ turnOnSingleEvent($element, eventData, eventName, create);
+ } else {
+ const eventDatas = $element.getEventData();
+
+ if(eventDatas !== undefined && eventDatas.length > 0) {
+ $.each(eventDatas, function(event, eventData) {
+ turnOnSingleEvent($element, eventData, create);
+ });
+ }
+ }
+ }
+
+ return this.each(function() {
+ const $this = $(this);
+ const eventNames = (eventName !== undefined && eventName !== null && eventName !== '') ? eventName.split(' ') : [];
+
+ if(eventNames.length > 0) {
+ eventNames.forEach(eventName => turnOnEvent($this, eventName, (typeof listener === 'function')));
+ } else {
+ turnOnEvent($this, eventName, false);
+ }
});
};
@@ -223,36 +201,40 @@ if(typeof jQuery === "undefined") {
* @return {jQuery} The DOM element
*/
$.fn.off = function(eventName, id) {
- return this.each(function() {
- const $this = $(this);
- const eventNames = (eventName !== undefined && eventName !== null && eventName !== '' && eventName.indexOf(' ') !== -1) ? eventName.split(' ') : [];
- if(eventNames.length > 0) {
- eventNames.forEach(function(eventName) {
- const eventData = $this.getEventData(eventName, id);
-
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler;
-
- $this[0].removeEventListener(name, handler, true);
- c.status = 'off';
- });
- }
+ const turnOffSingleEvent = ($element, eventData) => {
+ if(eventData !== undefined) {
+ $.each(eventData, function(i, c) {
+ const name = c.event,
+ handler = c.handler;
+
+ $element[0].removeEventListener(name, handler);
+ c.status = 'off';
});
+ }
+ }
+ const turnOffEvent = ($element, eventName, id) => {
+ if(eventName !== undefined && eventName !== null && eventName !== '') {
+ const eventData = $element.getEventData(eventName, id);
+ turnOffSingleEvent($element, eventData);
} else {
- const eventData = $this.getEventData();
+ const eventDatas = $element.getEventData();
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler;
-
- $this[0].removeEventListener(name, handler);
- c.status = 'off';
+ if(eventDatas !== undefined && eventDatas.length > 0) {
+ $.each(eventDatas, function(event, eventData) {
+ turnOffSingleEvent($element, eventData);
});
}
}
+ }
+
+ return this.each(function() {
+ const $this = $(this);
+ const eventNames = (eventName !== undefined && eventName !== null && eventName !== '' && eventName.indexOf(' ') !== -1) ? eventName.split(' ') : [];
+ if(eventNames.length > 0) {
+ eventNames.forEach(eventName => turnOffEvent($this, eventName, id));
+ } else {
+ turnOffEvent($this, eventName, id);
+ }
});
};
@@ -265,38 +247,45 @@ if(typeof jQuery === "undefined") {
* @return {jQuery} The DOM element
*/
$.fn.terminate = function(eventName, id) {
- return this.each(function() {
- const $this = $(this);
- const eventNames = (eventName !== undefined && eventName !== null && eventName !== '' && eventName.indexOf(' ') !== -1) ? eventName.split(' ') : [];
- if(eventNames.length > 0) {
- eventNames.forEach(function(eventName) {
- const eventData = $this.getEventData(eventName, id);
-
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler;
-
- $this[0].removeEventListener(name, handler, true);
- c.status = 'off';
- delete $this[0].events[eventName][id];
- });
- }
+ const terminateSingleEvent = ($element, eventData) => {
+ const element = $element[0];
+
+ if(eventData !== undefined) {
+ $.each(eventData, function(i, c) {
+ const name = c.event,
+ handler = c.handler;
+
+ element.removeEventListener(name, handler, true);
+ c.status = 'off';
+ delete element.events[eventName][id];
});
- } else {
- const eventData = $this.getEventData();
+ }
+ }
+ const terminateEvent = ($element, eventName) => {
+ const element = $element[0];
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler;
+ if(eventName !== undefined && eventName !== null && eventName !== '') {
+ const eventData = $element.getEventData(eventName, id);
+ terminateSingleEvent($element, eventData);
+ } else {
+ const eventDatas = $element.getEventData();
- $this[0].removeEventListener(name, handler);
- c.status = 'off';
- delete $this[0].events[name];
+ if(eventDatas !== undefined && eventDatas.length > 0) {
+ $.each(eventDatas, function(event, eventData) {
+ terminateSingleEvent($element, eventData);
});
}
}
+ }
+
+ return this.each(function() {
+ const $this = $(this);
+ const eventNames = (eventName !== undefined && eventName !== null && eventName !== '' && eventName.indexOf(' ') !== -1) ? eventName.split(' ') : [];
+ if(eventNames.length > 0) {
+ eventNames.forEach(eventName => terminateEvent($this, eventName));
+ } else {
+ terminateEvent($this, eventName);
+ }
});
};
@@ -310,52 +299,55 @@ if(typeof jQuery === "undefined") {
* @return {jQuery} The DOM element
*/
$.fn.trigger = function(eventName, data, id) {
- return this.each(function() {
- const $this = $(this);
- eventName = (eventName !== undefined && eventName !== null && eventName !== '' && typeof eventName === 'object') ? eventName.type : eventName;
+ let useCapture = false;
- const eventNames = (eventName !== undefined && eventName !== null && eventName !== '' && eventName.indexOf(' ') !== -1) ? eventName.split(' ') : [];
- //console.log($this, eventName, data);
- if(eventNames.length > 0) {
- eventNames.forEach(function(eventName) {
- const eventData = $this.getEventData(eventName, id);
-
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler;
-
- let event;
- if(window.CustomEvent) {
- event = new CustomEvent(eventName, data);
- } else {
- event = document.createEvent('CustomEvent');
- event.initCustomEvent(eventName, false, true, options);
- }
- $this[0].dispatchEvent(event);
- });
+ const triggerSingleEvent = ($element, eventData) => {
+ const element = $element[0];
+
+ if(eventData !== undefined) {
+ $.each(eventData, function(i, c) {
+ const name = c.event,
+ handler = c.handler;
+
+ let event;
+ if(window.CustomEvent) {
+ event = new CustomEvent(name, data);
+ } else {
+ event = document.createEvent('CustomEvent');
+ event.initCustomEvent(name, (!useCapture), true, data);
}
+
+ element.dispatchEvent(event);
});
+ }
+ }
+ const triggerEvent = ($element, eventName) => {
+ const element = $element[0];
+
+ if(eventName !== undefined && eventName !== null && eventName !== '') {
+ const eventData = $element.getEventData(eventName, id);
+ triggerSingleEvent($element, eventData);
} else {
- const eventData = $this.getEventData();
- //console.log($this, eventName, eventData);
+ const eventDatas = $element.getEventData();
- if(eventData !== undefined) {
- $.each(eventData, function(i, c) {
- const name = c.event,
- handler = c.handler;
-
- let event;
- if(window.CustomEvent) {
- event = new CustomEvent(eventName, data);
- } else {
- event = document.createEvent('CustomEvent');
- event.initCustomEvent(eventName, true, true, data);
- }
- $this[0].dispatchEvent(event);
+ if(eventDatas !== undefined && eventDatas.length > 0) {
+ $.each(eventDatas, function(event, eventData) {
+ triggerSingleEvent($element, eventData);
});
}
}
+ }
+
+ return this.each(function() {
+ const $this = $(this);
+ eventName = (eventName !== undefined && eventName !== null && eventName !== '' && typeof eventName === 'object') ? eventName.type : eventName;
+
+ const eventNames = (eventName !== undefined && eventName !== null && eventName !== '' && eventName.indexOf(' ') !== -1) ? eventName.split(' ') : [];
+ if(eventNames.length > 0) {
+ eventNames.forEach(eventName => triggerEvent($this, eventName));
+ } else {
+ triggerEvent($this, eventName);
+ }
});
};
@@ -383,9 +375,7 @@ if(typeof jQuery === "undefined") {
const eventData = eventInfo[eventName];
if(id !== undefined && eventData[id] !== undefined) {
- const currentEventData = eventData[id];
-
- _this = currentEventData;
+ _this = eventData[id];
} else {
_this = eventData;
}