\n`;
html += (!empty(title)) ? `
${title}
` : ``;
html += `
\n`;
- html += `
\n`;
- html += ` ${$html}`;
- html += `
\n`;
- html += `
\n`;
- html += `
${code}
`;
+ html += `
\n`;
+ html += ` ${$previewHTML}`;
html += `
\n`;
+ html += snippetCodeTab;
html += `
\n`;
html += `
\n`;
html += `
\n`;
- $elem.replaceWith(html);
+ if(isMultipleSnippets)
+ $elem.replaceWith(html);
+ else
+ $snippet.replaceWith(html);
Prism.highlightAll();
}
@@ -111,10 +181,21 @@ if(typeof jQuery === "undefined") {
$_this.each(function() {
const $this = $(this),
data = $this.data("SGNCodeSnippet");
- const plugin = (data === undefined) ? new SGNCodeSnippet($this) : data;
- $this.data("SGNCodeSnippet", plugin);
+ let isMultipleSnippets = $_this.parent().hasClass('sgn-code-snippets');
- $this[0]["SGNCodeSnippet"] = plugin;
+ if(!isMultipleSnippets) {
+ const plugin = (data === undefined) ? new SGNCodeSnippet($this) : data;
+ $this.data("SGNCodeSnippet", plugin);
+
+ $this[0]["SGNCodeSnippet"] = plugin;
+ } else {
+ if($_this.hasClass('sgn-code-snippets')) {
+ const plugin = (data === undefined) ? new SGNCodeSnippet($this) : data;
+ $this.data("SGNCodeSnippet", plugin);
+
+ $this[0]["SGNCodeSnippet"] = plugin;
+ }
+ }
});
/**
@@ -140,8 +221,8 @@ if(typeof jQuery === "undefined") {
return _this;
};
- $(function() {
- const $snippets = $(".sgn-code-snippet");
+ SUKR(() => {
+ const $snippets = $(".sgn-code-snippets, .sgn-code-snippet");
$snippets.SGNCodeSnippet();
});
diff --git a/src/js/addons/SGNDataTables.js b/src/js/addons/SGNDataTables.js
index 8a747881..785fa367 100644
--- a/src/js/addons/SGNDataTables.js
+++ b/src/js/addons/SGNDataTables.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -383,7 +383,7 @@ if(typeof jQuery === "undefined") {
});
};
- $(function() {
+ SUKR(() => {
const $datatables = $('.datatable');
$datatables.SGNDataTable({
diff --git a/src/js/components/dropdown.js b/src/js/components/dropdown.js
index a639dafa..102c718e 100644
--- a/src/js/components/dropdown.js
+++ b/src/js/components/dropdown.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -32,8 +32,8 @@ if(typeof jQuery === "undefined") {
});
};
- $(document).ready(function() {
+ SUKR(() => {
const $dropdowns = $('[data-toggle="dropdown"]');
$dropdowns.SGNDropdown();
});
-})(window, document, jQuery);
\ No newline at end of file
+})(window, document, jQuery);
diff --git a/src/js/components/forms/inputs.js b/src/js/components/forms/inputs.js
index 8ae04665..fe9735ab 100644
--- a/src/js/components/forms/inputs.js
+++ b/src/js/components/forms/inputs.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -10,41 +10,36 @@
const SGNInput = function(element) {
const plugin = this;
- const _this = element,
- $_this = $(_this);
+ const _this = element, $_this = $(_this);
/**
*
* @param {string} find
- * @param {jQuery} $elem
+ * @param {jQuery} [$elem]
+ * @param {jQuery}[$fallback]
+ *
* @return {undefined|jQuery}
*/
- const sibling = (find, $elem) => {
+ const sibling = (find, $elem, $fallback) => {
$elem = ($elem === undefined || $elem === null || $elem === '') ? $_this : $elem;
- const $next = $elem.next(find),
- $prev = $elem.prev(find);
+ const $next = $elem.next(find), $prev = $elem.prev(find);
if(find === 'label') {
const nodeName = ($elem.prop('nodeName')) ? $elem.prop('nodeName') : $elem[0].nodeName;
- const $input = (nodeName === 'input') ? $elem : $_this,
- inputID = ($input.attr('id')) ? $input.attr('id') : '',
- $label = ($elem.parent().find(`label[for="${inputID}"]`)) ? $elem.parent().find(`label[for="${inputID}"]`) : '';
+ const $input = (nodeName === 'input') ? $elem : $_this, inputID = ($input.attr('id')) ? $input.attr('id') : '', $label = ($elem.parent().find(`label[for="${inputID}"]`)) ? $elem.parent().find(`label[for="${inputID}"]`) : '';
if($label.length > 0) {
return $label;
} else {
- if($next.length > 0)
- return $next;
- else if($prev.length > 0)
- return $prev;
+ if($next.length > 0) return $next; else if($prev.length > 0) return $prev;
}
} else {
- if($next.length > 0)
- return $next;
- else if($prev.length > 0)
- return $prev;
+ if($next.length > 0) return $next; else if($prev.length > 0) return $prev;
}
+ if($fallback !== undefined && $fallback.length > 0)
+ return $fallback;
+
return undefined;
}
const getTextWidth = (text, styles) => {
@@ -91,8 +86,7 @@
const nodeName = ($_this.prop('nodeName')) ? $_this.prop('nodeName') : $_this[0].nodeName;
const type = (nodeName === 'INPUT') ? $_this.attr('type').toLowerCase() : nodeName.toLowerCase();
- if($_this.hasClass('sgn-select-input'))
- return '';
+ if($_this.hasClass('sgn-select-input')) return '';
return (nodeName === 'INPUT') ? `sgn-input-${type}` : `sgn-${type}`;
}
@@ -101,8 +95,7 @@
let result, i, j;
result = '';
for(j = 0; j < 32; j++) {
- if(hyphen && (j === 8 || j === 12 || j === 16 || j === 20))
- result = result + '-';
+ if(hyphen && (j === 8 || j === 12 || j === 16 || j === 20)) result = result + '-';
i = Math.floor(Math.random() * 16).toString(16);
i = (uppercase) ? i.toUpperCase() : i.toLowerCase();
result = result + i;
@@ -120,23 +113,63 @@
}
}
+ function isValidURL(string) {
+ let url;
+ try {
+ url = new URL(string);
+ } catch(_) {
+ return false;
+ }
+ return url.protocol === "http:" || url.protocol === "https:";
+ }
+
+ const getObject = (obj, key) => {
+ const keys = key.split('.');
+ //const found = [];
+ if(obj.length > 0) {
+ /*keys.forEach(k => {
+ if(obj.hasOwnProperty(k)) {
+ found.push(k);
+ }
+ });
+
+ const r = obj[found];*/
+ while(keys.length && (obj = obj[keys.shift()])) {
+ if(keys.length && obj.length && obj.forEach) { // handle arrays
+ const remainder = keys.join('.');
+ let results = [];
+ for(let i = 0; i < obj.length; i++) {
+ const x = getObject(obj[i], remainder);
+ if(x) results = results.concat(x);
+ }
+ return results;
+ }
+ }
+ return (obj) ? [obj] : undefined; //single result, wrap in array for consistency
+ }
+ };
+
const init = () => {
//region Variables
const nodeName = ($_this.prop('nodeName')) ? $_this.prop('nodeName') : $_this[0].nodeName;
const typeClass = getTypeClass();
+ const inputClasses = $_this.attr('class').str_replace(['form-control', 'sgn-select-input', 'searchable'], '').trim();
let type = (nodeName === 'INPUT') ? $_this.attr('type').toLowerCase() : nodeName.toLowerCase();
let id = ($_this.attr('id') === undefined || $_this.attr('id') === null || $_this.attr('id') === '') ? $_this.attr('name') : $_this.attr('id');
id = (id === undefined || id === null || id === "") ? `sgn-${type}-` + GUID() : id;
let $container = $_this.parents('.sgn-form'),
- $formWrapper = $_this.parents('.sgn-form-wrapper'),
- $inputWrapper = $_this.parents('.sgn-input-wrapper');
-
- let $input = $_this,
- $label = sibling('label'),
- $prefix = sibling('.sgn-input-prefix'),
- $suffix = sibling('.sgn-input-suffix'),
- $helpBlock = sibling('.sgn-form-help-block');
+ $formWrapper = $_this.parents('.sgn-form-wrapper'),
+ $inputWrapper = $_this.parents('.sgn-input-wrapper');
+
+ let $input = $_this,
+ $label = sibling('label'),
+ $prefix = sibling('.sgn-input-prefix'),
+ $suffix = sibling('.sgn-input-suffix'),
+ $ovPrefix = sibling('.sgn-input-overlay-prefix', null, $formWrapper.children('.sgn-input-overlay-prefix')),
+ $ovSuffix = sibling('.sgn-input-overlay-suffix', null, $formWrapper.children('.sgn-input-overlay-suffix')),
+ $autocompleteBox = sibling('.sgn-input-autocomplete-box', null, $container.children('.sgn-input-autocomplete-box')),
+ $helpBlock = sibling('.sgn-form-help-block', null, $container.children('.sgn-form-help-block'));
//endregion
if(type === 'switch' || type === 'toggle') {
@@ -148,8 +181,7 @@
let $inputGroupLabel, $inputGroupHelp;
- if($_this.attr('id') === undefined || $_this.attr('id') === null || $_this.attr('id') === '')
- $_this.attr('id', id);
+ if($_this.attr('id') === undefined || $_this.attr('id') === null || $_this.attr('id') === '') $_this.attr('id', id);
if($label !== undefined) {
const forv = $label.attr('for');
@@ -157,10 +189,7 @@
$label.attr('for', id);
}
if($inputWrapper.length <= 0) {
- if($input.prev('label').length > 0)
- $input.prev('label').addBack().wrapAll(`
`);
- else if($input.next('label').length > 0)
- $input.next('label').addBack().wrapAll(`
`);
+ if($input.prev('label').length > 0) $input.prev('label').addBack().wrapAll(`
`); else if($input.next('label').length > 0) $input.next('label').addBack().wrapAll(`
`);
$inputWrapper = $input.parents('.sgn-input-wrapper');
} else {
if($label.parents('.sgn-input-wrapper').length > 0 && $input.parents('.sgn-input-wrapper').length <= 0) {
@@ -187,75 +216,120 @@
$formWrapper = $inputWrapper.parents('.sgn-form-wrapper');
}
- if($prefix !== undefined) {
+ if($prefix !== undefined && $prefix.length > 0 && !$prefix.hasClass('inline')) {
$prefix.detach().prependTo($formWrapper);
+ if(!$formWrapper.hasClass('has-input-addon-prefix')) $formWrapper.addClass('has-input-addon-prefix');
} else {
const prefix = $input.attr('sgn-input-prefix');
if(prefix !== undefined) {
$prefix = $(`
${prefix}
`);
$inputWrapper.before($prefix);
$prefix = $inputWrapper.prev('sgn-input-prefix');
+ if(!$formWrapper.hasClass('has-input-addon-prefix')) $formWrapper.addClass('has-input-addon-prefix');
}
}
- if($suffix !== undefined) {
+ if($suffix !== undefined && $suffix.length > 0 && !$suffix.hasClass('inline')) {
$suffix.detach().appendTo($formWrapper);
+ if(!$formWrapper.hasClass('has-input-addon-suffix')) $formWrapper.addClass('has-input-addon-suffix');
} else {
const suffix = $input.attr('sgn-input-suffix');
if(suffix !== undefined) {
$suffix = $(`
${suffix}
`);
$inputWrapper.after($suffix);
$suffix = $inputWrapper.next('sgn-input-suffix');
+ if(!$formWrapper.hasClass('has-input-addon-suffix')) $formWrapper.addClass('has-input-addon-suffix');
+ }
+ }
+
+ if($ovPrefix !== undefined && $ovPrefix.length > 0 && !$ovPrefix.hasClass('inline')) {
+ $ovPrefix.detach().prependTo($inputWrapper);
+ if(!$inputWrapper.hasClass('has-input-overlay-prefix')) $inputWrapper.addClass('has-input-overlay-prefix');
+ } else {
+ const ovPrefix = $input.attr('sgn-input-overlay prefix');
+ if(ovPrefix !== undefined) {
+ $ovPrefix = $(`
${ovPrefix}
`);
+ $inputWrapper.prepend($ovPrefix);
+ $ovPrefix = $inputWrapper.children('.sgn-input-overlay-prefix');
+ if(!$inputWrapper.hasClass('has-input-overlay-prefix')) $inputWrapper.addClass('has-input-overlay-prefix');
+ }
+ }
+ if($ovSuffix !== undefined && $ovSuffix.length > 0 && !$ovSuffix.hasClass('inline')) {
+ $ovSuffix.detach().appendTo($inputWrapper);
+ if(!$inputWrapper.hasClass('has-input-overlay-suffix')) $inputWrapper.addClass('has-input-overlay-suffix');
+ } else {
+ const ovSuffix = $input.attr('sgn-input-overlay suffix');
+ if(ovSuffix !== undefined) {
+ $ovSuffix = $(`
${ovSuffix}
`);
+ $inputWrapper.append($ovSuffix);
+ $ovSuffix = $inputWrapper.children('.sgn-input-overlay-suffix');
+ if(!$inputWrapper.hasClass('has-input-overlay-suffix')) $inputWrapper.addClass('has-input-overlay-suffix');
}
}
+ $_this.removeClass(inputClasses);
+ $inputWrapper.addClass(inputClasses);
+
if($container.length <= 0) {
$formWrapper.wrap(`
`);
$container = $formWrapper.parents('.sgn-form');
}
- if($helpBlock !== undefined) {
- $helpBlock.detach().appendTo($formWrapper);
+ if($helpBlock !== undefined && $helpBlock.length > 0) {
+ $helpBlock.detach().appendTo($container);
} else {
const helpBlock = $input.attr('sgn-input-help');
if(helpBlock !== undefined) {
$helpBlock = $(`
${helpBlock}
`);
$container.append($helpBlock);
- $helpBlock = $container.children('.sgn-form-help-block');
}
}
+ $helpBlock = $container.children('.sgn-form-help-block');
if($helpBlock !== undefined && $helpBlock.length > 0) {
- const containerWidth = ($helpBlock.width()),
- textWidth = (getTextWidth($helpBlock.text())),
- boxWidth = (textWidth + containerWidth);
+ const containerWidth = ($helpBlock.width()), textWidth = (getTextWidth($helpBlock.text())), boxWidth = (textWidth + containerWidth);
if(textWidth > containerWidth) {
- const speed = parseFloat($_this.attr('sgn-input-help-scroll-speed')) || 10,
- timePerPixel = 0.2;
+ const speed = parseFloat($_this.attr('sgn-input-help-scroll-speed')) || 10, timePerPixel = 0.2;
let distance, duration;
/*
- Time = (Distance / Speed)
- Speed = (Distance / Time)
- Duration = (Speed * Distance)
+ Time = (Distance / Speed)
+ Speed = (Distance / Time)
+ Duration = (Speed * Distance)
*/
distance = uint((textWidth) / (containerWidth));
duration = uint(speed * distance);
duration = Math.round(duration);
- $helpBlock.marquee();
+ $helpBlock.marquee(duration, 'left', true);
$helpBlock.addClass('has-marquee');
- setTimeout(() => {
- $helpBlock.children('.sgn-marquee-wrapper').children('.sgn-marquee').attr('style', `animation: marquee-left ${duration}s linear infinite`);
- }, 10);
+ //setTimeout(() => $helpBlock.children('.sgn-marquee-wrapper').children('.sgn-marquee').attr('style', `animation: marquee-left ${duration}s linear infinite`), 10);
}
}
+ if($_this.prop('readonly') && !$container.hasClass('readonly'))
+ $container.addClass('readonly');
+ if($_this.prop('disabled') && !$container.hasClass('disabled'))
+ $container.addClass('disabled');
+
+ $container.addClass(typeClass);
+ $label = $container.find('label');
+
+ if($autocompleteBox !== undefined && $autocompleteBox.length > 0) {
+ $autocompleteBox.detach().prependTo($container);
+ } else {
+ const autocomplete = $input.attr('searchable') || $input.attr('sgn-input-searchable') || $input.hasClass('searchable');
+ if(autocomplete !== undefined) {
+ $autocompleteBox = $(`
`);
+ $container.append($autocompleteBox);
+ }
+ }
+ $autocompleteBox = $container.children('.sgn-input-autocomplete-box');
+
if($inputGroup.length > 0) {
$inputGroupLabel = $inputGroup.children('label.sgn-input-group-label');
$inputGroupHelp = $inputGroup.children('.sgn-input-group-help');
- const inputGroupLabel = $inputGroup.attr('sgn-input-group-label'),
- inputGroupHelp = $inputGroup.attr('sgn-input-group-help');
+ const inputGroupLabel = $inputGroup.attr('sgn-input-group-label'), inputGroupHelp = $inputGroup.attr('sgn-input-group-help');
if(inputGroupLabel !== undefined && inputGroupLabel !== null && inputGroupLabel !== '') {
const inputGroupLabelHTML = `
`;
@@ -277,32 +351,24 @@
if($inputGroup.hasClass('labels-left')) {
$label.detach().prependTo($inputWrapper);
- if(!$inputWrapper.hasClass('label-left'))
- $inputWrapper.addClass('label-left')
+ if(!$inputWrapper.hasClass('label-left')) $inputWrapper.addClass('label-left')
} else {
$label.detach().appendTo($inputWrapper);
- if(!$inputWrapper.hasClass('label-right'))
- $inputWrapper.addClass('label-right')
+ if(!$inputWrapper.hasClass('label-right')) $inputWrapper.addClass('label-right')
}
$label = $inputWrapper.children('label');
}
- $container.addClass(typeClass);
- $label = $container.find('label');
-
const minlength = $_this.attr('minlength');
let required = ($_this.attr('required') || (minlength && minlength > 0));
if(!$_this.hasClass('sgn-select-input')) {
- const requiredHTML = `
*`,
- optionalHTML = `
*`;
+ const requiredHTML = `
*`, optionalHTML = `
*`;
if(required) {
- if($_this.attr('required') === undefined)
- $_this.attr('required', true);
+ if($_this.attr('required') === undefined) $_this.attr('required', true);
if(!$container.hasClass('sgn-input-radio') && !$container.hasClass('sgn-input-checkbox') && !$container.hasClass('sgn-input-switch')) {
- if($label !== undefined)
- $label.html(`${requiredHTML} ${$label.html()}`);
+ if($label !== undefined) $label.html(`${requiredHTML} ${$label.html()}`);
} else {
if($inputGroupLabel.length > 0 && $inputGroupLabel.find('.sgn-required').length < 1) {
$inputGroupLabel.html(`${requiredHTML} ${$inputGroupLabel.html()}`);
@@ -311,8 +377,7 @@
} else {
if($_this.hasClass('denote') || $_this.parents().hasClass('denote')) {
if(!$container.hasClass('sgn-input-radio') && !$container.hasClass('sgn-input-checkbox') && !$container.hasClass('sgn-input-switch')) {
- if($label !== undefined)
- $label.html(`${optionalHTML} ${$label.html()}`);
+ if($label !== undefined) $label.html(`${optionalHTML} ${$label.html()}`);
} else {
if($inputGroupLabel.length > 0 && $inputGroupLabel.find('.sgn-optional').length < 1) {
$inputGroupLabel.html(`${optionalHTML} ${$inputGroupLabel.html()}`);
@@ -320,68 +385,29 @@
}
}
}
+ } else {
+ $_this.removeClass('.form-control');
}
if($_this.hasClass('ckeditor')) {
let editorButtons = $_this.attr('ck-toolbar');
- editorButtons = (editorButtons !== undefined) ? editorButtons : [
- 'heading',
- '|',
- 'bold',
- 'italic',
- 'underline',
- 'fontSize',
- '|',
- 'fontFamily',
- 'fontColor',
- 'fontBackgroundColor',
- 'highlight',
- '|',
- 'subscript',
- 'superscript',
- 'strikethrough',
- '|',
- 'todoList',
- 'bulletedList',
- 'numberedList',
- '|',
- 'outdent',
- 'alignment',
- 'indent',
- '|',
- 'specialCharacters',
- 'blockQuote',
- 'link',
- /*'insertTable',
- 'imageUpload',
- 'imageInsert',
- 'mediaEmbed',
- '|',*/
- 'findAndReplace',
- '|',
- 'horizontalLine',
- 'htmlEmbed',
- 'sourceEditing',
- 'removeFormat',
- '|',
- 'undo',
- 'redo',
- '|',
- 'restrictedEditingException'
- ];
+ editorButtons = (editorButtons !== undefined) ? editorButtons : ['heading', '|', 'bold', 'italic', 'underline', 'fontSize', '|', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|', 'subscript', 'superscript', 'strikethrough', '|', 'todoList', 'bulletedList', 'numberedList', '|', 'outdent', 'alignment', 'indent', '|', 'specialCharacters', 'blockQuote', 'link', /*'insertTable',
+ 'imageUpload',
+ 'imageInsert',
+ 'mediaEmbed',
+ '|',*/
+ 'findAndReplace', '|', 'horizontalLine', 'htmlEmbed', 'sourceEditing', 'removeFormat', '|', 'undo', 'redo', '|', 'restrictedEditingException'];
let ckEditor;
if(CKSource !== undefined) {
const watchdog = new CKSource.EditorWatchdog();
window.watchdog = watchdog;
watchdog.setCreator((element, config) => {
- return CKSource.Editor
- .create(element, config)
- .then(editor => {
- ckEditor = editor;
- return editor;
- });
+ return CKSource.Editor.create(element, config).then(editor => {
+ ckEditor = editor;
+ return editor;
+ });
});
watchdog.setDestructor(editor => {
@@ -389,33 +415,22 @@
});
watchdog.on('error', handleError);
- watchdog
- .create($_this[0], {
- toolbar: {
- items: editorButtons
- },
- language: 'en',
- /*image: {
- toolbar: [
- 'imageTextAlternative',
- 'imageStyle:inline',
- 'imageStyle:block',
- 'imageStyle:side',
- 'linkImage'
- ]
- },*/
- table: {
- contentToolbar: [
- 'tableColumn',
- 'tableRow',
- 'mergeTableCells',
- 'tableCellProperties',
- 'tableProperties'
- ]
- },
- licenseKey: '',
- })
- .catch(handleError);
+ watchdog.create($_this[0], {
+ toolbar: {
+ items: editorButtons
+ }, language: 'en', /*image: {
+ toolbar: [
+ 'imageTextAlternative',
+ 'imageStyle:inline',
+ 'imageStyle:block',
+ 'imageStyle:side',
+ 'linkImage'
+ ]
+ },*/
+ table: {
+ contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties']
+ }, licenseKey: '',
+ }).catch(handleError);
function handleError(error) {
console.error('Oops, something went wrong!');
@@ -430,10 +445,8 @@
$_this.SGNSelect();
} else if(type === 'toggle') {
$inputWrapper.addClass('toggle');
- const offTXTAttr = $_this.attr('data-off'),
- onTXTAttr = $_this.attr('data-on');
- const offTXT = offTXTAttr || 'Off',
- onTXT = onTXTAttr || 'On';
+ const offTXTAttr = $_this.attr('data-off'), onTXTAttr = $_this.attr('data-on');
+ const offTXT = offTXTAttr || 'Off', onTXT = onTXTAttr || 'On';
let $toggleWrapper = sibling('.toggle-switch-bar', $_this);
let $toggleLabelWrapper, $toggleTXTOff, $toggleTXTOn, $toggleHandle;
@@ -448,8 +461,7 @@
let sliderWrapperHTML = `
`;
let sliderTXTWrapperHTML = `
`;
- let sliderTXTOffHTML = `
${offTXT}`,
- sliderTXTOnHTML = `
${onTXT}`;
+ let sliderTXTOffHTML = `
${offTXT}`, sliderTXTOnHTML = `
${onTXT}`;
let sliderSwitchHTML = `
`;
if(offTXTAttr || onTXTAttr) {
@@ -463,15 +475,15 @@
$toggleHandle = $toggleWrapper.children('.slider-switch');
} else {
/*$_this.after(sliderWrapperHTML);
- $toggleWrapper = $_this.next('.slider-wrapper');
-
- $toggleWrapper.html(sliderTXTWrapperHTML);
- $toggleLabelWrapper = $toggleWrapper.children('.slider-text');
- $toggleLabelWrapper.html(sliderTXTOffHTML + sliderTXTOnHTML);
- $toggleTXTOff = $toggleLabelWrapper.children('.sgn-toggle-label-off');
- $toggleTXTOn = $toggleLabelWrapper.children('.sgn-toggle-label-on');
- $toggleWrapper.append(sliderSwitchHTML);
- $toggleHandle = $toggleWrapper.children('.slider-switch');*/
+ $toggleWrapper = $_this.next('.slider-wrapper');
+
+ $toggleWrapper.html(sliderTXTWrapperHTML);
+ $toggleLabelWrapper = $toggleWrapper.children('.slider-text');
+ $toggleLabelWrapper.html(sliderTXTOffHTML + sliderTXTOnHTML);
+ $toggleTXTOff = $toggleLabelWrapper.children('.sgn-toggle-label-off');
+ $toggleTXTOn = $toggleLabelWrapper.children('.sgn-toggle-label-on');
+ $toggleWrapper.append(sliderSwitchHTML);
+ $toggleHandle = $toggleWrapper.children('.slider-switch');*/
let html = `
@@ -488,8 +500,7 @@
$toggleTXTOn = $toggleLabelWrapper.children('.sgn-toggle-label-on');
$toggleHandle = $toggleWrapper.children('.toggle-switch-handle');
- const offTXTWidth = getTextWidth($toggleTXTOff.text(), {padding: '8px'}),
- onTXTWidth = getTextWidth($toggleTXTOn.text(), {padding: '8px'});
+ const offTXTWidth = getTextWidth($toggleTXTOff.text(), {padding: '8px'}), onTXTWidth = getTextWidth($toggleTXTOn.text(), {padding: '8px'});
$_this.data('label-off-width', offTXTWidth);
$_this.data('label-on-width', onTXTWidth);
@@ -501,29 +512,19 @@
} else {
if($toggleWrapper) {
if($toggleLabelWrapper.length === 1) {
- const $offTXT = $toggleLabelWrapper.children('span:first-child'),
- $onTXT = $toggleLabelWrapper.children('span:last-child');
+ const $offTXT = $toggleLabelWrapper.children('span:first-child'), $onTXT = $toggleLabelWrapper.children('span:last-child');
if($offTXT) {
- if(!$offTXT.hasClass('sgn-toggle-label-off'))
- $offTXT.addClass('sgn-toggle-label-off');
- if(!$onTXT.hasClass('sgn-toggle-label-on'))
- $onTXT.addClass('sgn-toggle-label-on');
+ if(!$offTXT.hasClass('sgn-toggle-label-off')) $offTXT.addClass('sgn-toggle-label-off');
+ if(!$onTXT.hasClass('sgn-toggle-label-on')) $onTXT.addClass('sgn-toggle-label-on');
} else {
- if($onTXT)
- $onTXT.before(sliderTXTOffHTML);
- else
- $toggleLabelWrapper.html(sliderTXTOffHTML);
+ if($onTXT) $onTXT.before(sliderTXTOffHTML); else $toggleLabelWrapper.html(sliderTXTOffHTML);
$toggleTXTOff = $toggleLabelWrapper.children('.sgn-toggle-label-off');
}
if($onTXT) {
- if(!$onTXT.hasClass('sgn-toggle-label-on'))
- $onTXT.addClass('sgn-toggle-label-on');
+ if(!$onTXT.hasClass('sgn-toggle-label-on')) $onTXT.addClass('sgn-toggle-label-on');
} else {
- if($offTXT)
- $offTXT.before(sliderTXTOnHTML);
- else
- $toggleLabelWrapper.html(sliderTXTOnHTML);
+ if($offTXT) $offTXT.before(sliderTXTOnHTML); else $toggleLabelWrapper.html(sliderTXTOnHTML);
$toggleTXTOn = $toggleLabelWrapper.children('.sgn-toggle-label-on');
}
@@ -560,34 +561,35 @@
bindEvents(isSelect);
}
}
-
const bindEvents = (rebind) => {
- let $container = $_this.parents('.sgn-form:not(.sgn-input-checkbox):not(.sgn-input-radio):not(.sgn-input-switch)'),
- $clickableContainer = $_this.parents('.sgn-form.sgn-input-checkbox, .sgn-form.sgn-input-radio, .sgn-form.sgn-input-switch'),
- $formWrapper = $container.children('.sgn-form-wrapper'),
- $clickableFormWrapper = $clickableContainer.children('.sgn-form-wrapper'),
- $inputWrapper = $formWrapper.children('.sgn-input-wrapper'),
- $clickableInputWrapper = $clickableFormWrapper.children('.sgn-input-wrapper'),
- $input = $inputWrapper.children('input.form-control'),
- $clickableInput = $clickableInputWrapper.children('input.form-control');
+ let $container = $_this.parents('.sgn-form:not(.sgn-select):not(.sgn-input-checkbox):not(.sgn-input-radio):not(.sgn-input-switch)'),
+ $clickableContainer = $_this.parents('.sgn-form.sgn-input-checkbox, .sgn-form.sgn-input-radio, .sgn-form.sgn-input-switch'),
+ $formWrapper = $container.children('.sgn-form-wrapper'),
+ $clickableFormWrapper = $clickableContainer.children('.sgn-form-wrapper'),
+ $inputWrapper = $formWrapper.children('.sgn-input-wrapper'),
+ $clickableInputWrapper = $clickableFormWrapper.children('.sgn-input-wrapper'),
+ $input = $inputWrapper.children('input.form-control'),
+ $clickableInput = $clickableInputWrapper.children('input.form-control');
+ const autocomplete = $input.attr('searchable') || $input.attr('sgn-input-searchable') || $input.hasClass('searchable');
$container.on('click', function(e) {
- const $this = $(this);
+ const $this = $(this), $target = $(e.target);
let $wrapper = ($this.hasClass('sgn-form') && $this.parents('.sgn-form').length <= 0) ? $this : $this.parents('.sgn-form');
const $inputGroup = ($wrapper.find('.crtb-group').length > 0) ? $wrapper.find('.crtb-group') : $wrapper.find('.input-group');
const $input = $wrapper.children('.sgn-form-wrapper').children('.sgn-input-wrapper').children('input.form-control');
-
if(!$input.hasClass('toggle')) {
- $('.sgn-form.sgn-select .form-control').blur();
- $('.sgn-form.sgn-select.open').removeClass('open');
+ if(!$this.hasClass('sgn-select-open') && !$target.hasClass('sgn-select') && !$target.parents().hasClass('sgn-select')) {
+ $('.sgn-form.sgn-select .form-control').blur();
+ $('.sgn-form.sgn-select.open').removeClass('open');
+ }
- if(!$wrapper.hasClass('active'))
- $wrapper.removeClass('edited').addClass('active');
- if($inputGroup.length > 0)
- $inputGroup.removeClass('edited').addClass('active');
+ if(!$wrapper.hasClass('active')) $wrapper.removeClass('edited').addClass('active');
+ if($inputGroup.length > 0) $inputGroup.removeClass('edited').addClass('active');
- $wrapper.trigger('sgninput.click');
+ if(!$this.hasClass('sgn-select-open') && !$target.hasClass('sgn-select') && !$target.parents().hasClass('sgn-select')) {
+ $wrapper.trigger('sgninput.click');
+ }
}
e.preventDefault();
@@ -596,16 +598,14 @@
$container.on('sgninput.click', function(e) {
const $input = $(this).children('.sgn-form-wrapper').children('.sgn-input-wrapper').children('input.form-control');
- if($input.length > 0)
- $input[0].focus();
+ if($input.length > 0) $input[0].focus();
});
$clickableContainer.on('sgniclick', function(e) {
const $this = $(this);
const $inputGroup = ($this.parents('.crtb-group').length > 0) ? $this.parents('.crtb-group') : $this.parents('.input-group');
- if($inputGroup.length > 0)
- $inputGroup.removeClass('edited').addClass('active');
+ if($inputGroup.length > 0) $inputGroup.removeClass('edited').addClass('active');
$this.trigger('sgninput.click');
});
@@ -614,18 +614,22 @@
const $this = $(this);
const $inputGroup = ($this.parents('.crtb-group').length > 0) ? $this.parents('.crtb-group') : $this.parents('.input-group');
- if($inputGroup.length > 0)
- $inputGroup.removeClass('active').addClass('edited');
+ if($inputGroup.length > 0) $inputGroup.removeClass('active').addClass('edited');
$this.trigger('sgninput.blur');
});
$input.on('focus', function() {
- const $container = $(this).parents('.sgn-form');
-
+ const $this = $(this),
+ $container = $this.parents('.sgn-form');
- if(!$container.hasClass('active'))
+ if(!$container.hasClass('active') && !$container.hasClass('sgn-select'))
$container.click();
+ else {
+ if(!$container.hasClass('sgn-select sgn-input-checkbox sgn-input-radio sgn-input-switch') && ($this.prop('readonly') || $container.hasClass('readonly'))) {
+ this.setSelectionRange(0, this.value.length);
+ }
+ }
setTimeout(() => click($(this)[0]), 100);
@@ -639,10 +643,8 @@
const type = e.type;
if($this.hasClass('toggle')) {
- const $toggleWrapper = $this.next('.toggle-switch-bar'),
- $toggleHandleWrapper = $toggleWrapper.children('.toggle-switch-handle');
- const offTXTWidth = parseInt($this.data('label-off-width') || 0),
- onTXTWidth = parseInt($this.data('label-on-width') || 0);
+ const $toggleWrapper = $this.next('.toggle-switch-bar'), $toggleHandleWrapper = $toggleWrapper.children('.toggle-switch-handle');
+ const offTXTWidth = parseInt($this.data('label-off-width') || 0), onTXTWidth = parseInt($this.data('label-on-width') || 0);
if($this.prop('checked')) {
$toggleHandleWrapper.width(onTXTWidth + 'px');
@@ -654,13 +656,192 @@
} else {
$container.removeClass('active');
- if(v.length > 0)
- $container.addClass('edited');
+ if(v.length > 0) $container.addClass('edited');
$(this).trigger(`sgninput.${type}`);
}
});
+ if(autocomplete !== undefined) {
+ const $autocompleteBox = $container.children('.sgn-input-autocomplete-box');
+ const suggestionsAttr = $input.attr('sgn-input-suggestions') || {},
+ suggestionsResultKeyAttr = $input.attr('sgn-input-suggestions-api-result-key'),
+ suggestionsResultSearchKeyAttr = $input.attr('sgn-input-suggestions-api-result-search-key');
+ let suggestions, suggestionsURL, suggestionsOptions, suggestionsResultKey, suggestionsResultSearchKey;
+ const defaultAPI = SGNUIKit.config.geocoding.defaultAPI;
+
+ if(suggestionsAttr === 'geolocation') {
+ suggestionsURL = SGNUIKit.config.urls.api[defaultAPI];
+ suggestionsURL = (defaultAPI === 'geonames') ? '' :
+ (defaultAPI === 'osm') ? `${suggestionsURL}search` : '';
+ suggestionsOptions = (defaultAPI === 'geonames') ? {} :
+ (defaultAPI === 'osm') ? {
+ 'format': 'json',
+ 'q': ''
+ } : {};
+ suggestionsResultSearchKey = 'name';
+ } else if(isValidURL(suggestionsAttr)) {
+ suggestionsURL = suggestionsAttr;
+ suggestionsResultKey = suggestionsAttr.resultKey || suggestionsResultKeyAttr;
+ suggestionsResultSearchKey = suggestionsAttr.searchKey || suggestionsResultSearchKey;
+ } else if(suggestionsAttr instanceof Array && suggestionsAttr.length > 0) {
+ suggestions = suggestionsAttr;
+ } else if(typeof suggestionsAttr === 'object' && suggestionsAttr.length > 0) {
+ suggestionsURL = suggestionsAttr.url;
+ suggestionsResultKey = suggestionsAttr.resultKey || suggestionsResultKeyAttr;
+ suggestionsResultSearchKey = suggestionsAttr.searchKey || suggestionsResultSearchKey;
+ delete suggestionsAttr.url;
+ delete suggestionsAttr.resultKey;
+ delete suggestionsAttr.searchKey;
+ }
+
+ /***
+ *
+ * @param $autocompleteBox {jQuery}
+ * @param v {string|number}
+ * @param foundMatches {array}
+ */
+ const showSuggestions = ($autocompleteBox, v, foundMatches) => {
+ let result = '';
+ if(!foundMatches.length) {
+ result = `${v}`;
+ } else {
+ if(suggestionsAttr === 'geolocation') {
+ foundMatches.forEach(m => result += m.html);
+ } else {
+ result = foundMatches.join('');
+ }
+ }
+ $autocompleteBox.html(result);
+
+ let $suggestions = $autocompleteBox.children("li");
+ $suggestions.each(function() {
+ const $suggestion = $(this);
+ $suggestion.on('click', function(e) {
+ e.preventDefault();
+ const $this = $(this);
+
+ let selectData = $this.text();
+ $input.val(selectData).trigger('change');
+ /*icon.onclick = () => {
+ webLink = `https://www.google.com/search?q=${selectData}`;
+ linkTag.setAttribute("href", webLink);
+ linkTag.click();
+ }*/
+ if($container.hasClass('autocomplete-active'))
+ $container.removeClass('autocomplete-active');
+ });
+ });
+
+ if(!$container.hasClass('autocomplete-active'))
+ $container.addClass('autocomplete-active');
+ plugin.hideLoader();
+ };
+ /*const suggestions = [
+ "Channel",
+ "CodingLab",
+ "CodingNepal",
+ "YouTube",
+ "YouTuber",
+ "YouTube Channel",
+ "Blogger",
+ "Bollywood",
+ "Vlogger",
+ "Vechiles",
+ "Facebook",
+ "Freelancer",
+ "Facebook Page",
+ "Designer",
+ "Developer",
+ "Web Designer",
+ "Web Developer",
+ "Login Form in HTML & CSS",
+ "How to learn HTML & CSS",
+ "How to learn JavaScript",
+ "How to became Freelancer",
+ "How to became Web Designer",
+ "How to start Gaming Channel",
+ "How to start YouTube Channel",
+ "What does HTML stands for?",
+ "What does CSS stands for?",
+ ];*/
+ let timeout;
+ $input.on('keyup', function(e) {
+ e.preventDefault();
+ let isShown = false;
+ clearTimeout(timeout);
+ plugin.showLoader(false);
+ timeout = setTimeout(() => {
+ let v = e.target.value; //user entered data
+ let foundMatches = [];
+ if(v) {
+ /*icon.onclick = () => {
+ webLink = `https://www.google.com/search?q=${v}`;
+ linkTag.setAttribute("href", webLink);
+ linkTag.click();
+ }*/
+
+ if(suggestions !== undefined) {
+ foundMatches = suggestions.filter((data) => {
+ //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
+ return data.toLocaleLowerCase().startsWith(v.toLocaleLowerCase());
+ });
+ foundMatches = foundMatches.map((data) => {
+ // passing return data inside li tag
+ return `${data}`;
+ });
+
+ showSuggestions($autocompleteBox, v, foundMatches);
+ plugin.hideLoader();
+ } else {
+ if(suggestionsAttr === 'geolocation') {
+ if(defaultAPI === 'osm')
+ suggestionsOptions.q = v;
+ }
+ let list = [];
+
+ $.getJSON(suggestionsURL, suggestionsOptions, (data) => {
+ if(suggestionsAttr === 'geolocation') {
+ if(defaultAPI === 'osm') {
+ data.forEach((d) => {
+ const name = d.display_name,
+ lat = d.lat,
+ lon = d.lon,
+ icon = d.icon;
+ const suggestion = {
+ 'name': name,
+ 'latitude': lat,
+ 'longitude': lon,
+ 'icon': icon,
+ 'html': `${name}`
+ };
+ list.push(suggestion);
+ });
+ }
+ } else {
+ list = data;
+ }
+
+ if(suggestionsResultKey !== undefined) {
+ const r = getObject(list, suggestionsResultKey);
+ foundMatches = (r !== undefined && r.length >= 0) ? r : [];
+ } else {
+ foundMatches = list;
+ }
+
+ showSuggestions($autocompleteBox, v, foundMatches);
+ });
+ }
+ } else {
+ plugin.hideLoader();
+ if($container.hasClass('autocomplete-active'))
+ $container.removeClass('autocomplete-active');
+ isShown = false;
+ }
+ }, 5000);
+ });
+ }
+
$clickableInput.on('change', function() {
$(this).parents('.sgn-form').trigger('sgniclick');
@@ -681,11 +862,9 @@
$container.removeClass('valid');
$inputGroup.removeClass('valid');
- if(!$container.hasClass('invalid'))
- $container.addClass('invalid');
+ if(!$container.hasClass('invalid')) $container.addClass('invalid');
- if(!$inputGroup.hasClass('invalid'))
- $inputGroup.addClass('invalid');
+ if(!$inputGroup.hasClass('invalid')) $inputGroup.addClass('invalid');
}
plugin.valid = () => {
@@ -695,11 +874,140 @@
$container.removeClass('invalid');
$inputGroup.removeClass('invalid');
- if(!$container.hasClass('valid'))
- $container.addClass('valid');
+ if(!$container.hasClass('valid')) $container.addClass('valid');
+
+ if(!$inputGroup.hasClass('valid')) $inputGroup.addClass('valid');
+ }
+
+ /***
+ * Disable or enable the current input.
+ *
+ * @param {boolean}[disabled=false]
+ */
+ plugin.disabled = (disabled = false) => {
+ const $container = $_this.parents('.sgn-form');
+ if(disabled) {
+ $_this.attr('disabled', true);
+ if(!$container.hasClass('disabled'))
+ $container.addClass('disabled');
+ } else {
+ $_this.removeAttr('disabled');
+ if($container.hasClass('disabled'))
+ $container.removeClass('disabled');
+ }
+ }
+
+ /***
+ * Make the current input readonly or editable.
+ *
+ * @param {boolean}[readonly=false]
+ */
+ plugin.readonly = (readonly = false) => {
+ const $container = $_this.parents('.sgn-form');
+ if(readonly) {
+ $_this.attr('readonly', true);
+ if(!$container.hasClass('readonly'))
+ $container.addClass('readonly');
+ } else {
+ $_this.removeAttr('readonly');
+ if($container.hasClass('readonly'))
+ $container.removeClass('readonly');
+ }
+ }
+
+ /***
+ *
+ * @param [disable=true]{boolean}
+ */
+ plugin.showLoader = (disable = true) => {
+ const loaderHTML = ``;
+ const loadingHTML = `${loaderHTML}
`,
+ ovLoadingHTML = ``;
+ const $container = $_this.parents('.sgn-form'),
+ $formWrapper = $_this.parents('.sgn-form-wrapper'),
+ $inputWrapper = $_this.parents('.sgn-input-wrapper');
+ const $inputGroup = ($_this.parents('.crtb-group').length > 0) ? $_this.parents('.crtb-group') : $_this.parents('.input-group');
+ const $prefix = $formWrapper.children('.sgn-input-prefix'),
+ $suffix = $formWrapper.children('.sgn-input-suffix'),
+ $ovPrefix = $inputWrapper.children('.sgn-input-overlay-prefix'),
+ $ovSuffix = $inputWrapper.children('.sgn-input-overlay-suffix');
+
+ if(!$container.hasClass('loading')) $container.addClass('loading');
+
+ if(!$inputGroup.hasClass('loading')) $inputGroup.addClass('loading');
+
+ if(disable)
+ plugin.disabled(true);
+
+ if($suffix.length <= 0 && $ovSuffix.length > 0) {
+ if(!$ovSuffix.hasClass('sgni-loader')) {
+ $_this.data("sgni-spinner-text", $ovSuffix[0].outerHTML);
+ $ovSuffix.replaceWith(ovLoadingHTML);
+ $ovSuffix.addClass('sgni-loader');
+ }
+ } else if($suffix.hasClass('interactive')) {
+ if(!$suffix.hasClass('sgni-loader')) {
+ $_this.data("sgni-spinner-text", $suffix.html());
+ $suffix.html(loadingHTML);
+ $suffix.addClass('sgni-loader');
+ }
+ } else {
+ $inputWrapper.append(ovLoadingHTML);
+ if(!$inputWrapper.hasClass('has-input-overlay-suffix'))
+ $inputWrapper.addClass('has-input-overlay-suffix');
+ }
+ }
+
+ plugin.hideLoader = () => {
+ const $container = $_this.parents('.sgn-form'),
+ $formWrapper = $_this.parents('.sgn-form-wrapper'),
+ $inputWrapper = $_this.parents('.sgn-input-wrapper');
+ const $inputGroup = ($_this.parents('.crtb-group').length > 0) ? $_this.parents('.crtb-group') : $_this.parents('.input-group');
+ const $prefix = $formWrapper.children('.sgn-input-prefix'),
+ $suffix = $formWrapper.children('.sgn-input-suffix'),
+ $ovPrefix = $inputWrapper.children('.sgn-input-overlay-prefix'),
+ $ovSuffix = $inputWrapper.children('.sgn-input-overlay-suffix');
+ const oldHTML = $_this.data("sgni-spinner-text");
+
+ if($suffix.length <= 0 || ($ovSuffix.length > 0 && $ovSuffix.hasClass('sgni-loader')) || (!$suffix.hasClass('interactive') && !$suffix.hasClass('sgni-loader'))) {
+ if(oldHTML !== undefined) {
+ $ovSuffix.replaceWith(oldHTML);
+ if($ovSuffix.hasClass('sgni-loader')) $ovSuffix.removeClass('sgni-loader');
+ $container.removeClass('loading');
+ $inputGroup.removeClass('loading');
+
+ plugin.disabled(false);
+ } else {
+ $ovSuffix.fadeOut(1000, function() {
+ $(this).remove();
+
+ if(!$inputWrapper.hasClass('has-input-overlay-suffix')) $inputWrapper.removeClass('has-input-overlay-suffix');
+ $container.removeClass('loading');
+ $inputGroup.removeClass('loading');
+
+ plugin.disabled(false);
+ });
+ }
+ } else {
+ if(oldHTML !== undefined) {
+ $suffix.html(oldHTML);
+ if($suffix.hasClass('sgni-loader')) $suffix.removeClass('sgni-loader');
+ $container.removeClass('loading');
+ $inputGroup.removeClass('loading');
+
+ plugin.disabled(false);
+ } else {
+ $suffix.fadeOut(1000, function() {
+ $(this).remove();
- if(!$inputGroup.hasClass('valid'))
- $inputGroup.addClass('valid');
+ if(!$inputWrapper.hasClass('has-input-overlay-suffix')) $inputWrapper.removeClass('has-input-overlay-suffix');
+ $container.removeClass('loading');
+ $inputGroup.removeClass('loading');
+
+ plugin.disabled(false);
+ });
+ }
+ }
}
init();
@@ -716,8 +1024,8 @@
const _this = this;
_this.each(function() {
- const $this = $(this),
- data = $this.data('SGNInput');
+ const $this = $(this), data = $this.data('SGNInput');
+
const plugin = (data === undefined) ? new SGNInput($this) : data;
$this.data('SGNInput', plugin);
@@ -729,14 +1037,12 @@
*
* @return {jQuery} Returns jQuery object for DOM chaining.
*/
- $.fn.SGNInput.valid = function() {
+ _this.valid = function() {
return _this.each(function() {
- const $this = $(this),
- plugin = $this.data('SGNInput');
+ const $this = $(this), plugin = $this.data('SGNInput');
$this.data('SGNInput', plugin);
- if(plugin !== undefined)
- plugin.valid();
+ if(plugin !== undefined) plugin.valid();
});
};
@@ -745,21 +1051,81 @@
*
* @return {jQuery} Returns jQuery object for DOM chaining.
*/
- $.fn.SGNInput.invalid = function() {
+ _this.invalid = function() {
+ return _this.each(function() {
+ const $this = $(this), plugin = $this.data('SGNInput');
+ $this.data('SGNInput', plugin);
+
+ if(plugin !== undefined) plugin.invalid();
+ });
+ };
+
+ /**
+ * Show the spinner for the form elements that are waiting for an action to be completed.
+ *
+ * @return {jQuery} Returns jQuery object for DOM chaining.
+ */
+ _this.showLoader = function() {
+ return _this.each(function() {
+ const $this = $(this), plugin = $this.data('SGNInput');
+ $this.data('SGNInput', plugin);
+
+ if(plugin !== undefined) plugin.showLoader();
+ });
+ };
+
+ /**
+ * Hide the spinner for the form elements that are waiting for an action to be completed.
+ *
+ * @return {jQuery} Returns jQuery object for DOM chaining.
+ */
+ _this.hideLoader = function() {
+ return _this.each(function() {
+ const $this = $(this), plugin = $this.data('SGNInput');
+ $this.data('SGNInput', plugin);
+
+ if(plugin !== undefined) plugin.hideLoader();
+ });
+ };
+
+ /**
+ * Disable or enable the current input.
+ *
+ * @param {boolean}[disabled=false]
+ *
+ * @return {jQuery} Returns jQuery object for DOM chaining.
+ */
+ _this.disabled = function(disabled = false) {
+ return _this.each(function() {
+ const $this = $(this), plugin = $this.data('SGNInput');
+ $this.data('SGNInput', plugin);
+
+ if(plugin !== undefined)
+ plugin.disabled(disabled);
+ });
+ };
+
+ /**
+ * Make the current input readonly or editable.
+ *
+ * @param {boolean}[readonly=false]
+ *
+ * @return {jQuery} Returns jQuery object for DOM chaining.
+ */
+ _this.readonly = function(readonly = false) {
return _this.each(function() {
- const $this = $(this),
- plugin = $this.data('SGNInput');
+ const $this = $(this), plugin = $this.data('SGNInput');
$this.data('SGNInput', plugin);
if(plugin !== undefined)
- plugin.invalid();
+ plugin.readonly(readonly);
});
};
return _this;
}
- $(document).ready(function() {
+ SUKR(function() {
const $inputs = $('input.form-control, textarea.form-control, select.form-control');
$inputs.SGNInput();
});
@@ -767,4 +1133,4 @@
window.SGNInput = SGNInput;
return this;
-})(jQuery, document, window);
\ No newline at end of file
+})(jQuery, document, window);
diff --git a/src/js/components/modals.js b/src/js/components/modals.js
index 4288fc91..920e623d 100644
--- a/src/js/components/modals.js
+++ b/src/js/components/modals.js
@@ -155,7 +155,7 @@ if(typeof jQuery === "undefined") {
return this;
};
- $(function() {
+ SUKR(() => {
const $modals = $(".sgn-modal");
const $modalToggle = $("[data-sgn-toggle=\"modal\"], [data-toggle=\"modal\"]");
const $modalTarget = $("[data-sgn-target=\"modal\"], [data-target=\"modal\"]");
@@ -177,4 +177,4 @@ if(typeof jQuery === "undefined") {
});
return this;
-}(window, document, jQuery));
\ No newline at end of file
+}(window, document, jQuery));
diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js
index 97266879..4934539f 100644
--- a/src/js/components/sidebar.js
+++ b/src/js/components/sidebar.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -173,8 +173,8 @@ if(typeof jQuery === "undefined") {
init(_this.config);
};
- $(document).ready(function() {
+ SUKR(() => {
const $sidebars = $('.sgn-sidebar');
$sidebars.SGNSidebar();
});
-})(window, document, jQuery);
\ No newline at end of file
+})(window, document, jQuery);
diff --git a/src/js/components/tablayout.js b/src/js/components/tablayout.js
index f9e67f49..e00dbe6c 100644
--- a/src/js/components/tablayout.js
+++ b/src/js/components/tablayout.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -72,8 +72,8 @@ if(typeof jQuery === "undefined") {
});
};
- $(function() {
- const $tab = ($('[sgn-component="tab"]').length > 0) ? $('[sgn-component="tab"]') : (($('[data-component="tab"]').length > 0) ? $('[data-component="tab"]') : $('.tab-layout'));
+ SUKR(() => {
+ const $tab = $('[sgn-component="tab"], [sgn-component="tab"], [data-component="tab"]') || $('.tab-layout');
$tab.SGNTabLayout();
});
})(window, document, jQuery);
diff --git a/src/js/components/windows.js b/src/js/components/windows.js
index da495b80..013f7d55 100644
--- a/src/js/components/windows.js
+++ b/src/js/components/windows.js
@@ -928,7 +928,7 @@ if(typeof jQuery === "undefined") {
return this;
};
- $(function() {
+ SUKR(() => {
const $windowToggles = $("[sgn-window], [data-sgn-window], [data-window]");
const $windows = $(".sgn-window");
diff --git a/src/js/components/wizard.js b/src/js/components/wizard.js
index a1964e93..6c8577b8 100644
--- a/src/js/components/wizard.js
+++ b/src/js/components/wizard.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -163,6 +163,4 @@ $.extend({
}
});
-$(document).ready(function() {
- $.initWizardNav();
-});
+SUKR(() => $.initWizardNav());
diff --git a/src/js/helpers/helpers.js b/src/js/helpers/helpers.js
index c40bf9cd..df86adcf 100644
--- a/src/js/helpers/helpers.js
+++ b/src/js/helpers/helpers.js
@@ -526,6 +526,123 @@ window.unescapeHTML = (str) => {
});
};
+window.getGeolocation = (e, element, callback) => {
+ const options = {
+ enableHighAccuracy: true,
+ timeout: 5000,
+ maximumAge: 0
+ };
+
+ if(e instanceof Event)
+ e.preventDefault();
+
+ let $elem = e;
+ if(e instanceof EventTarget || e instanceof HTMLElement || e instanceof jQuery)
+ $elem = $(e);
+ else if(e instanceof Event)
+ $elem = $(e.target);
+ const $sgnInput = $elem.parents('.sgn-input-wrapper');
+ if($sgnInput.length > 0) {
+ $elem = $sgnInput.children('.form-control');
+ }
+ $elem.showLoader();
+
+ if(typeof element === 'string') {
+ element = $(element);
+ }
+
+ navigator.geolocation.getCurrentPosition((pos) => {
+ const coordinates = pos.coords,
+ timestamp = pos.timestamp;
+ const latitude = coordinates.latitude,
+ longitude = coordinates.longitude,
+ accuracy = coordinates.accuracy, // in meters
+ altitude = coordinates.altitude,
+ altitudeAccuracy = coordinates.altitudeAccuracy,
+ heading = coordinates.heading,
+ speed = coordinates.speed;
+ const coords = `${latitude}, ${longitude}`;
+
+ const defaultAPI = SGNUIKit.config.geocoding.defaultAPI;
+
+ if(defaultAPI === 'osm' || defaultAPI === 'geonames') {
+ const apiBase = SGNUIKit.config.urls.api[defaultAPI],
+ apiURL = (defaultAPI === 'geonames') ? `${apiBase}countryCode` : `${apiBase}reverse`,
+ apiKey = (defaultAPI === 'geonames') ? SGNUIKit.config.api.geonames : '';
+ const opt = (defaultAPI === 'geonames') ? {
+ lat: latitude,
+ lon: longitude,
+ type: 'JSON',
+ username: apiKey || 'demo'
+ } : {
+ lat: latitude,
+ lon: longitude,
+ format: 'json',
+ };
+ $.getJSON(apiURL, opt, function(result) {
+ //console.log(result);
+ if(defaultAPI === 'osm') {
+ const address = result.address,
+ location = result.display_name;
+ result = Object.assign(result, {'position': coordinates});
+ setLocation(coords, result, location);
+ } else {
+ result = Object.assign(result, {'position': coordinates});
+ setLocation(coords, result, location);
+ }
+ });
+ } else {
+ setLocation(coords, coordinates);
+ }
+
+ /*console.log('Your current position is:');
+ console.log(`Latitude : ${coordinates.latitude}`);
+ console.log(`Longitude: ${coordinates.longitude}`);
+ console.log(`More or less ${coordinates.accuracy} meters.`);*/
+ }, (error) => {
+ const code = error.code,
+ message = error.message,
+ timeout = (options.timeout / 1000);
+
+ console.warn(`GEOLOCATION: ERROR(${code}): ${message}`);
+
+ const msg = (code === GeolocationPositionError.PERMISSION_DENIED) ? getI18nString('sgn_geolocation_error_permission_denied', message) :
+ (code === GeolocationPositionError.POSITION_UNAVAILABLE) ? getI18nString('sgn_geolocation_error_position_unavailable', message) :
+ (code === GeolocationPositionError.TIMEOUT) ? getI18nString('sgn_geolocation_error_request_timeout', message, `${timeout} seconds`) : message;
+
+ if($.SGNSnackbar !== undefined) {
+ $.SGNSnackbar(msg);
+ }
+ if(typeof callback === 'function') {
+ callback(true, error);
+ }
+ }, options);
+
+ const setLocation = (coordinates, position, location) => {
+ if(element instanceof HTMLElement || element instanceof jQuery) {
+ element = (element instanceof jQuery) ? $(element)[0] : element;
+ const $element = $(element);
+
+ if(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+ if(element instanceof HTMLTextAreaElement)
+ $element.text(location).data('sgn-user-location', coordinates).trigger('change');
+ else {
+ const type = ($element.attr('type') || 'text').toLowerCase();
+
+ if(type !== 'checkbox' && type !== 'radio' && type !== 'toggle' && type !== 'switch')
+ $element.val(location).data('sgn-user-location', coordinates).trigger('change');
+ }
+ }
+ }
+
+ if(typeof callback === 'function') {
+ callback(false, coordinates, position);
+ } else {
+ $elem.hideLoader();
+ }
+ }
+}
+
$(document).ready(function() {
$.extend({
NMAjax: function(options) {
@@ -647,23 +764,39 @@ $(document).ready(function() {
$(this).removeAttr("disabled");
});
},
- showLoader: function(alignWithFlex = true, classes) {
- classes = (classes) ? "nm-loader-align-flex " + classes : "nm-loader-align-flex";
- if(classes === undefined) {
- this.addClass("nm-loader");
- this.html("");
- } else {
- this.data("nm-loader-classes", classes);
- this.addClass("nm-loader " + classes);
- this.html("");
- }
+ /*showLoader: function(alignWithFlex = true, classes) {
+ classes = (classes) ? "nm-loader-align-flex " + classes : "nm-loader-align-flex";
+ if(classes === undefined) {
+ this.addClass("nm-loader");
+ this.html("");
+ } else {
+ this.data("nm-loader-classes", classes);
+ this.addClass("nm-loader " + classes);
+ this.html("");
+ }
+ },
+ hideLoader: function() {
+ const classes = this.data("nm-loader-classes");
+ if(classes !== undefined)
+ this.removeClass("nm-loader " + classes);
+ this.removeClass("nm-loader");
+ this.find(".nm-spinner").remove();
+ },*/
+ showLoader: function() {
+ const $this = $(this);
+ const $sgnInput = ($this.hasClass('sgn-input-wrapper')) ? $this : $this.parents('.sgn-input-wrapper');
+ if($sgnInput.length > 0) {
+ $sgnInput.children('.form-control').SGNInput().showLoader();
+ } else
+ $this.SGNSpinner().showLoader();
},
hideLoader: function() {
- const classes = this.data("nm-loader-classes");
- if(classes !== undefined)
- this.removeClass("nm-loader " + classes);
- this.removeClass("nm-loader");
- this.find(".nm-spinner").remove();
+ const $this = $(this);
+ const $sgnInput = ($this.hasClass('sgn-input-wrapper')) ? $this : $this.parents('.sgn-input-wrapper');
+ if($sgnInput.length > 0) {
+ $sgnInput.children('.form-control').SGNInput().hideLoader();
+ } else
+ $this.SGNSpinner().hideLoader();
},
showBackdropLoader: function(options) {
let $this = this;
@@ -718,18 +851,18 @@ $(document).ready(function() {
disable: function() {
return this.each(function() {
$(this).attr("disabled", true).addClass("disabled");
- $(this).parents(".md-form").addClass("disabled");
+ $(this).parents(".sgn-form").addClass("disabled");
});
},
enable: function() {
return this.each(function() {
- if($(this).prop("nodeName") === "SELECT" && $(this).hasClass("mdb-select")) {
+ if($(this).prop("nodeName") === "SELECT" && $(this).hasClass("sgn-select")) {
if($(this).is(":disabled")) {
$(this).removeAttr("disabled").removeClass("disabled");
}
} else
$(this).removeAttr("disabled").removeClass("disabled");
- $(this).parents(".md-form").removeClass("disabled");
+ $(this).parents(".sgn-form").removeClass("disabled");
});
},
postLoad: function(url, callback) {
@@ -758,212 +891,6 @@ $(document).ready(function() {
},
});
});
-$.fn.extend({
- showButtonSpinner: function(keepText = false, style) {
- style = (style) ? " style=\"" + style + "\"" : "";
- return this.each(function() {
- $(this).data("sgn-spinner-text", $(this).html());
- $(this).attr("disabled", true).addClass("disabled loading");
- const width = $(this).width(),
- height = $(this).height();
-
- if(keepText)
- $(this).html(" " + $(this).text());
- else
- $(this).html("");
-
-
- $(this).width(width).height(height);
- });
- },
- hideButtonSpinner: function() {
- return this.each(function() {
- $(this).children("fa-spin").remove();
- $(this).html($(this).data("sgn-spinner-text"));
- $(this).removeAttr("disabled").removeClass("disabled loading");
- });
- },
- showButtonDone: function(keepText = false, style) {
- style = (style) ? " style=\"" + style + "\"" : "";
- return this.each(function() {
- $(this).hideButtonSpinner();
- $(this).data("sghcl-cms-spinner-text", $(this).html());
- $(this).attr("disabled", true).addClass("disabled");
- if(keepText)
- $(this).html(" " + $(this).text());
- else
- $(this).html("");
- });
- },
- hideButtonDone: function() {
- return this.each(function() {
- $(this).children("fa-check").remove();
- $(this).html($(this).data("sghcl-cms-spinner-text"));
- $(this).removeAttr("disabled").removeClass("disabled");
- });
- },
- showButtonFailed: function(keepText = false) {
- return this.each(function() {
- $(this).data("nm-failed-text", $(this).text());
- $(this).attr("disabled", true).addClass("disabled");
- if(keepText)
- $(this).html(" " + $(this).text());
- else
- $(this).html("");
- });
- },
- hideButtonFailed: function() {
- return this.each(function() {
- $(this).children("fa-times").remove();
- $(this).html($(this).data("nm-failed-text"));
- $(this).removeAttr("disabled").removeClass("disabled");
- });
- },
- showInputSpinner: function(keepText = false, style) {
- style = (style) ? " style=\"" + style + "\"" : "";
- return this.each(function() {
- const $this = $(this);
- if($this.parents(".md-form").length > 0) {
- $this.data("ctpl-spinner-text", $this.html());
- $this.attr("disabled", true);
- const $container = $this.parents(".md-form").find(".sgngf-input-container"),
- $iccontainer = $this.parents(".md-form").find(".sgngf-input-addon");
- if(!$iccontainer.find(".fa-spin").length) {
- if(keepText)
- $container.before(" " + $(this).text() + "
");
- else
- $container.before("
");
- }
- } else {
- $(this).data("nm-spinner-text", $this.html());
- $(this).attr("disabled", true);
- if(!$(this).parent().find(".fa-spin").length) {
- if(keepText)
- $(this).after(" " + $(this).text());
- else
- $(this).after("");
- }
- }
- });
- },
- hideInputSpinner: function() {
- return this.each(function() {
- const $this = $(this).parent();
- $this.find(".fa-spin").remove();
- //$(this).html($(this).data('nm-spinner-text'));
- $(this).removeAttr("disabled");
- });
- },
- showLoader: function(alignWithFlex = true, classes) {
- classes = (classes) ? "nm-loader-align-flex " + classes : "nm-loader-align-flex";
- if(classes === undefined) {
- this.addClass("nm-loader");
- this.html("");
- } else {
- this.data("nm-loader-classes", classes);
- this.addClass("nm-loader " + classes);
- this.html("");
- }
- },
- hideLoader: function() {
- const classes = this.data("nm-loader-classes");
- if(classes !== undefined)
- this.removeClass("nm-loader " + classes);
- this.removeClass("nm-loader");
- this.find(".nm-spinner").remove();
- },
- showBackdropLoader: function(options) {
- let $this = this;
- let append = (typeof options.append !== "boolean") ? true : options.append,
- classes = (options.classes !== undefined) ? options.classes : undefined,
- padding = (typeof options.padding !== "string") ? undefined : options.padding,
- //margin = (typeof options.margin !== 'string') ? undefined : options.margin,
- styles = (typeof options.styles !== "object") ? "" : options.styles;
-
- this.addClass("sghcl-backdrop-loader-container");
- let html;
- let width = this.width(),
- height = this.height(),
- left = 0,
- top = 0;
-
- if(padding !== undefined) {
- width = "calc(100% - (" + padding + " * 2))";
- height = "calc(100% - (" + padding + " * 2))";
- left = padding;
- top = padding;
-
- styles += "width: " + width + "; height: " + height + "; left: " + left + "; top: " + top + ";";
- }
-
- if(classes === undefined) {
- html = "";
- } else {
- this.data("sghclbdl-loader-classes", classes);
- html = "";
- }
-
- console.log(this);
- if(append)
- this.append(html);
- else
- this.html(html);
-
- setTimeout(function() {
- $this.find(".sghcl-backdrop-loader").addClass("fadein");
- }, 1000);
- },
- hideBackdropLoader: function() {
- const $this = $(this);
- //const classes = this.data('sghclbdl-loader-classes');
- this.removeClass("sghcl-backdrop-loader-container");
- this.find(".sghcl-backdrop-loader").addClass("fadeout");
- setTimeout(function() {
- $this.find(".sghcl-backdrop-loader").remove();
- }, 1100);
- },
- disable: function() {
- return this.each(function() {
- $(this).attr("disabled", true).addClass("disabled");
- $(this).parents(".md-form").addClass("disabled");
- });
- },
- enable: function() {
- return this.each(function() {
- if($(this).prop("nodeName") === "SELECT" && $(this).hasClass("mdb-select")) {
- if($(this).is(":disabled")) {
- $(this).removeAttr("disabled").removeClass("disabled");
- }
- } else
- $(this).removeAttr("disabled").removeClass("disabled");
- $(this).parents(".md-form").removeClass("disabled");
- });
- },
- postLoad: function(url, callback) {
- this.each(function() {
- const $this = $(this);
- $.ajax({
- type: "POST",
- url: url,
- data: getUrlVars(url),
- success: function(d) {
- $this.html(d);
- if(typeof callback == "function")
- callback(d);
- },
- });
- });
- },
- SGNLoad: function(url, callback) {
- return this.each(function() {
- const $this = $(this);
- $this.load(url, function(d) {
- if(typeof callback == "function")
- callback(d);
- });
- });
- },
-});
$.extend({
/**
* @return {string|null}
diff --git a/src/js/helpers/string.js b/src/js/helpers/string.js
index ddf7c77a..bccb5279 100644
--- a/src/js/helpers/string.js
+++ b/src/js/helpers/string.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
@@ -23,6 +23,59 @@ String.prototype.rtrim = function(s) {
return this.replace(new RegExp(s + "*$"), "");
};
+/***
+ * Replace all occurrences of the search string with the replacement string.
+ *
+ * This function returns a string with all occurrences of search in subject replaced with the given replace value.
+ *
+ * @param {string|array}search The value being searched for, otherwise known as the needle. An array may be used to designate multiple needles.
+ * @param {string|array}replace The replacement value that replaces found search values. An array may be used to designate multiple replacements.
+ * @param {boolean}caseSensitive Specify if the searching would be case-sensitive or not.
+ *
+ * @returns {string} A string with the replaced values.
+ */
+String.prototype.str_replace = function(search, replace, caseSensitive = true) {
+ let v = this;
+
+ function getIndicesOf(needle, haystack) {
+ const searchStrLen = needle.length;
+ if(searchStrLen === 0) {
+ return [];
+ }
+ let startIndex = 0, index, indices = [];
+ if(!caseSensitive) {
+ haystack = haystack.toLowerCase();
+ needle = needle.toLowerCase();
+ }
+ while((index = haystack.indexOf(needle, startIndex)) > -1) {
+ indices.push(index);
+ startIndex = index + searchStrLen;
+ }
+ return indices;
+ }
+
+ if(typeof search === 'object' && typeof replace === 'object') {
+ search.forEach((s, i) => {
+ const r = replace[i];
+ v = v.replace(s, r);
+ });
+ } else if(typeof search === 'object' && (typeof replace === 'string' || typeof replace === 'number')) {
+ search.forEach(s => v = v.replace(s, replace));
+ } else if((typeof search === 'string' || typeof search === 'number') && typeof replace === 'object') {
+ let indices = getIndicesOf(search, v);
+ indices.forEach((k, i) => {
+ const s = search[k],
+ r = replace[i];
+ v = v.replace(s, r);
+ });
+ v = v.replace(search, replace);
+ } else if((typeof search === 'string' || typeof search === 'number') && (typeof replace === 'string' || typeof replace === 'number')) {
+ v = v.replace(search, replace);
+ }
+
+ return v;
+};
+
/**
* Convert a string to HTML entities
*/
@@ -44,4 +97,4 @@ $.expr[":"].textEquals = $.expr.createPseudo(function(arg) {
return function(elem) {
return $(elem).text().trim().match("^" + arg + "$");
};
-});
\ No newline at end of file
+});
\n`;
- preloader += `\t\t\t\t![](" + QTConfig.urls.root.global + "icons/medium.png)