diff --git a/js/dependency.js b/js/dependency.js index 034af81..b6af497 100644 --- a/js/dependency.js +++ b/js/dependency.js @@ -1,9 +1,9 @@ - var dependency = { fields: undefined, init: function(fields) { this.fields = fields; const DROPDOWN_INPUT_TYPES = ['select', 'multiSelect']; + SBdynamicForm.initialized(); }, getTargetField: function(target){ var object = []; @@ -25,9 +25,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..714b918 100644 --- a/js/elements.js +++ b/js/elements.js @@ -1,24 +1,60 @@ - 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"); + default: (obj.renderingHints.html) ? dfElements.addHtmlElement(obj) : console.log("no element added"); } }, - addElement: function(obj, tag, type) { + 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+'"]'); 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 +90,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 +104,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 +118,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..edd1f95 100644 --- a/js/main.js +++ b/js/main.js @@ -1,38 +1,94 @@ -(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, - data: metadata, + config: {}, + data: {}, + showSelectedCount: false, addHtml: function(node) { return false; + }, + submitId: "submit", + getFormData: function(){ + return false; + }, + events: [], + addEvents: function(events){ + var events = (events) ? events : []; + }, + directives: [], + error: function(cb){ + 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 = $.extend(Defaults, config); + createTemplate(Defaults.config.templateLayout); +         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) dispatchEvents("form-error") if (Object.keys(templateLayout)[0] == ROW) { createLayout(templateLayout[ROW], "dynamicFormDiv", ROW); } else { createLayout(templateLayout[COLUMN], "dynamicFormDiv", COLUMN); } }; + + _sbDynamicForm.getSBFormData = function(){ + var data = dependency.getFormValues(); + return data; + } + + _sbDynamicForm.validate = function(){ + return true; + } + /** * @description - When createDiv method is called * @@ -60,6 +116,7 @@ divEle.css(style); if (data && data.class) divEle.addClass(data.class); }; + /** * @description - start interval time to create dynamic fields */ @@ -69,6 +126,7 @@ createFormField(); }, 200); }; + /** * @description - When create layout method called * @@ -87,6 +145,7 @@ createRowOrCol(arr, parentId, type); } }; + /** * @description - To create row and colomn * @@ -110,16 +169,17 @@ createLayout(nextObj, divId, COLUMN); } }; + /** * @description - to create form fields from the configuration */ createFormField = function (){ + var dynamicFields = Defaults.config.fields; + var formData = Defaults.config.formData; dynamicFields.forEach(function (obj) { - dfElements.createElement(obj); + dfElements.createElement(obj, Defaults.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(){ @@ -128,27 +188,29 @@ }); }); }; + /** * @description - Set metadata to the created form element * * @param {callback} callback - callback method which will call after the setmedata exicution */ setMetadata = function (callback){ - $.each(metadata, function( code, data ){ + $.each(Defaults.data, function( code, data ){ dfElements.setMetadata(code, data) }); callback(); }; - return init(); - }; -}).call(this); -//# sourceURL=SBdynamicForm.js + +      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); -setTimeout(function () { - console.log("Loading form with default data"); - jQuery('#dynamicFormDiv').SBdynamicForm({ - id: "dynamicFormDiv", - config: formConfig, - data: metadata - }); -}, 0) +//# sourceURL=SBdynamicForm.js \ No newline at end of file