From 9c839072fef2eae14477e441d4a48ede4ef860d8 Mon Sep 17 00:00:00 2001 From: Gourav More Date: Tue, 4 Aug 2020 08:46:42 +0530 Subject: [PATCH 1/4] Issue #SH-653 fix: Backward compatibility - POC for existing form --- js/dependency.js | 5 +++-- js/elements.js | 32 +++++++++++++++++++++++--------- js/main.js | 29 ++++++++++++++++++++++++----- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/js/dependency.js b/js/dependency.js index 034af81..e48b8bc 100644 --- a/js/dependency.js +++ b/js/dependency.js @@ -1,4 +1,3 @@ - var dependency = { fields: undefined, init: function(fields) { @@ -25,9 +24,11 @@ var dependency = { } }, getFormValues: function(){ - var updatedFormData = []; + var updatedFormData = new Object(); this.fields.forEach(function(field){ updatedFormData[field.code] = $('#df_' + field.code).val(); + var count = Array.isArray(updatedFormData[field.code]) ? updatedFormData[field.code].length : (updatedFormData[field.code] ? 1 : 0) ; + $("#selectedCount_" + field.code).text(count); }); return updatedFormData; }, diff --git a/js/elements.js b/js/elements.js index a0b7ae7..492a60f 100644 --- a/js/elements.js +++ b/js/elements.js @@ -3,22 +3,32 @@ var dfElements = { create: function() { }, - createElement: function(obj) { + createElement: function(obj, showSelectedCount) { switch(obj.inputType) { case "text": dfElements.addElement(obj, 'input'); break; case "textarea": dfElements.addElement(obj, 'textarea'); break; - case "checkbox": dfElements.addElement(obj, 'input', 'checkbox'); break; - case "select": dfElements.addElement(obj, 'select'); break; - case "multiselect": dfElements.addElement(obj, 'select'); break; + case "checkbox": dfElements.addElement(obj, 'input', 'checkbox'); break; + case "checkboxstandard": dfElements.addElement(obj, 'input', 'checkboxstandard'); break; + case "radio": dfElements.addElement(obj, 'input', 'radio', undefined, showSelectedCount); break; + case "select": dfElements.addElement(obj, 'select', undefined, showSelectedCount); break; + case "multiselect": dfElements.addElement(obj, 'select', undefined, showSelectedCount); break; case "label": dfElements.addElement(obj, 'label'); break; default: console.log("no element added"); } }, - addElement: function(obj, tag, type) { + addElement: function(obj, tag, type, showSelectedCount) { var ele = $('[name ="'+ obj.code+'"]'); if(ele) { var parentEle = ele[0]; - var eleStr = ''+obj.name+'<' + tag + ' id="df_' + obj.code + '" onChange="dfElements.updateForm(this)" code="'+obj.code +'" data="'+obj.name+'">' ; + if (showSelectedCount){ + var eleStr = '
'+obj.name+' (0)
<' + tag + ' id="df_' + obj.code + '" onChange="dfElements.updateForm(this)" code="'+obj.code +'" data="'+obj.name+'">' ; + }else{ + var eleStr = ''+obj.name+'<' + tag + ' id="df_' + obj.code + '" onChange="dfElements.updateForm(this)" code="'+obj.code +'" data="'+obj.name+'">' ; + } + + if (obj.inputType === "multiselect"){ + $('#df_'+obj.code).attr('multiple', true); + } $(parentEle).html(eleStr); if(type) $('#df_'+obj.code).attr('type', type); } @@ -54,8 +64,8 @@ var dfElements = { return uniqueOptions; }, setOptions: function(obj, optionData){ - optionData = this.getUniqOptions(optionData); - optionData = this.getSortedOptions(optionData); + //optionData = this.getUniqOptions(optionData); + //optionData = this.getSortedOptions(optionData); if (obj.inputType == "select" || obj.inputType =="multiselect"){ var select = $('#df_' + obj.code); select.empty(); @@ -68,7 +78,7 @@ var dfElements = { } options[0] = new Option(obj.placeholder, ""); $.each(optionData, function(index, option) { - options[index + 1] = new Option(option.name, option.name); + options[index + 1] = (option.name) ? new Option(option.name, option.name) : new Option(option, option) }); } } @@ -82,8 +92,12 @@ var dfElements = { var element = $('#df_' + code); if (element.length && Array.isArray(data)){ dfElements.setSelect(code, data[0]); + var count = data.length || 0 ; + $("#selectedCount_" + code).text(count); }else{ $('#df_' + code).val(data); + var count = data ? 1 : 0; + $("#selectedCount_" + code).text(count); } } } diff --git a/js/main.js b/js/main.js index d2d8996..e351e85 100644 --- a/js/main.js +++ b/js/main.js @@ -17,8 +17,16 @@ id: 'dynamicFormDiv', config: config, data: metadata, + showSelectedCount: false, addHtml: function(node) { return false; + }, + submitId: "submit", + getFormData: function(){ + return false; + }, + error: function(cb){ + cb() } }; $.extend(config, options); @@ -27,12 +35,22 @@ */ init = function (){ var templateLayout = options.config.templateLayout; + if (Object.keys(templateLayout).length === 0) options.error(true); if (Object.keys(templateLayout)[0] == ROW) { createLayout(templateLayout[ROW], "dynamicFormDiv", ROW); } else { createLayout(templateLayout[COLUMN], "dynamicFormDiv", COLUMN); } + + $("#" + config.submitId).click(function() { + var data = dependency.getFormValues(); + console.log(data); + options.getFormData(data) + }); }; + validate = function (){ + return true; + } /** * @description - When createDiv method is called * @@ -114,12 +132,12 @@ * @description - to create form fields from the configuration */ createFormField = function (){ + var dynamicFields = options.config.fields; + var formData = options.config.formData; dynamicFields.forEach(function (obj) { - dfElements.createElement(obj); + dfElements.createElement(obj, config.showSelectedCount); if (obj.inputType == SELECT || obj.inputType == MULTISELECT) { - formData.forEach(function (field) { - if (obj.code === field.code) dfElements.setOptions(obj, field.terms); - }); + dfElements.setOptions(obj, obj.range); } }); setMetadata(function(){ @@ -134,12 +152,13 @@ * @param {callback} callback - callback method which will call after the setmedata exicution */ setMetadata = function (callback){ - $.each(metadata, function( code, data ){ + $.each(config.data, function( code, data ){ dfElements.setMetadata(code, data) }); callback(); }; return init(); + //export method }; }).call(this); //# sourceURL=SBdynamicForm.js From 24b286086a351a0ca3deb3b7ba8dd3b0bf758038 Mon Sep 17 00:00:00 2001 From: Gourav More Date: Tue, 11 Aug 2020 20:02:03 +0530 Subject: [PATCH 2/4] Issue #0000 fix: removed jQuery dependancy from lib and expose private and public methods for consumers --- js/main.js | 98 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 58 insertions(+), 40 deletions(-) diff --git a/js/main.js b/js/main.js index e351e85..c70bfc0 100644 --- a/js/main.js +++ b/js/main.js @@ -1,21 +1,31 @@ -(function() { - $.fn.SBdynamicForm = function(options) { +(function(window){ + // You can enable the strict mode commenting the following line   + 'use strict'; + + // This function will contain all our code + function SBdynamicForm(){ + var _sbDynamicForm = {}; + + // Constants const COLUMN = "col"; const ROW = "row"; const SELECT = "select"; const MULTISELECT = "multiselect"; + var createEleInterval, - init, - config, - createDiv, - startInterval, - createLayout, - createRowOrCol, - createFormField, - setMetadata; - config = { + init, + config, + createDiv, + startInterval, + createLayout, + createRowOrCol, + createFormField, + setMetadata; + + // This variable will be inaccessible to the user, only can be visible in the scope of your library. + var Defaults = { id: 'dynamicFormDiv', - config: config, + config: formConfig, data: metadata, showSelectedCount: false, addHtml: function(node) { @@ -29,28 +39,33 @@ cb() } }; - $.extend(config, options); - /** - * @description - When the SBdynamicForm lib is initialized - */ - init = function (){ - var templateLayout = options.config.templateLayout; +    + +     // Change a private property + _sbDynamicForm.init = function(config){ + Defaults.config = config; + createTemplate(Defaults.config.templateLayout); +         return Defaults.config; +     }; + + var createTemplate = function (templateLayout){ if (Object.keys(templateLayout).length === 0) options.error(true); if (Object.keys(templateLayout)[0] == ROW) { createLayout(templateLayout[ROW], "dynamicFormDiv", ROW); } else { createLayout(templateLayout[COLUMN], "dynamicFormDiv", COLUMN); } - - $("#" + config.submitId).click(function() { - var data = dependency.getFormValues(); - console.log(data); - options.getFormData(data) - }); }; - validate = function (){ - return true; + + _sbDynamicForm.getSBFormData = function(){ + var data = dependency.getFormValues(); + return data; } + + _sbDynamicForm.validate = function(){ + return true; + } + /** * @description - When createDiv method is called * @@ -78,6 +93,7 @@ divEle.css(style); if (data && data.class) divEle.addClass(data.class); }; + /** * @description - start interval time to create dynamic fields */ @@ -87,6 +103,7 @@ createFormField(); }, 200); }; + /** * @description - When create layout method called * @@ -105,6 +122,7 @@ createRowOrCol(arr, parentId, type); } }; + /** * @description - To create row and colomn * @@ -128,6 +146,7 @@ createLayout(nextObj, divId, COLUMN); } }; + /** * @description - to create form fields from the configuration */ @@ -146,6 +165,7 @@ }); }); }; + /** * @description - Set metadata to the created form element * @@ -157,17 +177,15 @@ }); callback(); }; - return init(); - //export method - }; -}).call(this); -//# sourceURL=SBdynamicForm.js - -setTimeout(function () { - console.log("Loading form with default data"); - jQuery('#dynamicFormDiv').SBdynamicForm({ - id: "dynamicFormDiv", - config: formConfig, - data: metadata - }); -}, 0) + +      return _sbDynamicForm; +   } + + // We need that our library is globally accesible, then we save in the window + if(typeof(window.SBdynamicForm) === 'undefined'){ + window.SBdynamicForm = SBdynamicForm(); + } +})(window); // We send the window variable withing our function + +// Now see the content of your library +console.log(SBdynamicForm); \ No newline at end of file From f28192459ecaba2d949e5de70a9e56ef07aa1799 Mon Sep 17 00:00:00 2001 From: Gourav More Date: Tue, 11 Aug 2020 20:11:07 +0530 Subject: [PATCH 3/4] Issue #0000 fix: removed jQuery dependancy from lib and expose private and public methods for consumers --- js/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/main.js b/js/main.js index c70bfc0..bbb181e 100644 --- a/js/main.js +++ b/js/main.js @@ -43,7 +43,7 @@     // Change a private property _sbDynamicForm.init = function(config){ - Defaults.config = config; + Defaults = $.extend(Defaults, config); createTemplate(Defaults.config.templateLayout);         return Defaults.config;     }; @@ -151,10 +151,10 @@ * @description - to create form fields from the configuration */ createFormField = function (){ - var dynamicFields = options.config.fields; - var formData = options.config.formData; + var dynamicFields = Defaults.config.fields; + var formData = Defaults.config.formData; dynamicFields.forEach(function (obj) { - dfElements.createElement(obj, config.showSelectedCount); + dfElements.createElement(obj, Defaults.showSelectedCount); if (obj.inputType == SELECT || obj.inputType == MULTISELECT) { dfElements.setOptions(obj, obj.range); } @@ -172,7 +172,7 @@ * @param {callback} callback - callback method which will call after the setmedata exicution */ setMetadata = function (callback){ - $.each(config.data, function( code, data ){ + $.each(Defaults.data, function( code, data ){ dfElements.setMetadata(code, data) }); callback(); From 2e8568065c5d54e8c35ea0f98714ba9f0cf598a8 Mon Sep 17 00:00:00 2001 From: Gourav More Date: Mon, 17 Aug 2020 09:56:33 +0530 Subject: [PATCH 4/4] Issue #0000 fix: add html to the element --- js/dependency.js | 1 + js/elements.js | 30 ++++++++++++++++++++++++++++-- js/main.js | 33 +++++++++++++++++++++++++++++---- 3 files changed, 58 insertions(+), 6 deletions(-) diff --git a/js/dependency.js b/js/dependency.js index e48b8bc..b6af497 100644 --- a/js/dependency.js +++ b/js/dependency.js @@ -3,6 +3,7 @@ var dependency = { init: function(fields) { this.fields = fields; const DROPDOWN_INPUT_TYPES = ['select', 'multiSelect']; + SBdynamicForm.initialized(); }, getTargetField: function(target){ var object = []; diff --git a/js/elements.js b/js/elements.js index 492a60f..714b918 100644 --- a/js/elements.js +++ b/js/elements.js @@ -1,4 +1,3 @@ - var dfElements = { create: function() { @@ -13,8 +12,35 @@ var dfElements = { case "select": dfElements.addElement(obj, 'select', undefined, showSelectedCount); break; case "multiselect": dfElements.addElement(obj, 'select', undefined, showSelectedCount); break; case "label": dfElements.addElement(obj, 'label'); break; - default: console.log("no element added"); + default: (obj.renderingHints.html) ? dfElements.addHtmlElement(obj) : console.log("no element added"); + } + }, + addHtmlElement: function(obj){ + // var ele = $('[name ="'+ obj.code+'"]'); + // if(ele) { + // var parentEle = ele[0]; + // $(parentEle).html(obj.renderingHints.html); + // } + }, + updateElement: function(directive, configObj){ + var ele = $('[name ="'+ directive.code+'"]'); + var directiveElement = $("#" + directive.id); + var directiveObj = {}; + configObj.fields.forEach(function(obj){ + if(obj.code === directive.code) + directiveObj = obj + }) + var style = { + "display": "block" + } + directiveElement.css(style); + ecEditor.addEventListener(directive.event, function (event, data) { + console.log("lib:editor:form:change", data) + }); + if(ele) { + ele.append(document.getElementById(directive.id)) } + }, addElement: function(obj, tag, type, showSelectedCount) { var ele = $('[name ="'+ obj.code+'"]'); diff --git a/js/main.js b/js/main.js index bbb181e..edd1f95 100644 --- a/js/main.js +++ b/js/main.js @@ -25,8 +25,8 @@ // This variable will be inaccessible to the user, only can be visible in the scope of your library. var Defaults = { id: 'dynamicFormDiv', - config: formConfig, - data: metadata, + config: {}, + data: {}, showSelectedCount: false, addHtml: function(node) { return false; @@ -35,6 +35,11 @@ getFormData: function(){ return false; }, + events: [], + addEvents: function(events){ + var events = (events) ? events : []; + }, + directives: [], error: function(cb){ cb() } @@ -48,8 +53,26 @@         return Defaults.config;     }; + _sbDynamicForm.initialized = function(){ + dispatchEvents("form-init") + Defaults.directives.forEach(function(directive){ + dfElements.updateElement(directive, Defaults.config) + }); + console.log("initialized") + } + + var dispatchEvents = function(eventName){ + Defaults.events.forEach(function(event){ + if(event.code === eventName){ + setTimeout(function(){ + ecEditor.dispatchEvent(event.event) + }, 1000) + } + }); + } + var createTemplate = function (templateLayout){ - if (Object.keys(templateLayout).length === 0) options.error(true); + if (Object.keys(templateLayout).length === 0) dispatchEvents("form-error") if (Object.keys(templateLayout)[0] == ROW) { createLayout(templateLayout[ROW], "dynamicFormDiv", ROW); } else { @@ -188,4 +211,6 @@ })(window); // We send the window variable withing our function // Now see the content of your library -console.log(SBdynamicForm); \ No newline at end of file +console.log(SBdynamicForm); + +//# sourceURL=SBdynamicForm.js \ No newline at end of file