From 3651f381f202c0a9d7c154f4286e3ab019ff4251 Mon Sep 17 00:00:00 2001 From: Philipp Kuhlmay Date: Fri, 9 Aug 2024 13:33:27 +0200 Subject: [PATCH] [TEMP] Refactor YUI and wireit --- .../jsDomainModeling/extbaseModeling.js | 240 ++-- .../Public/jsDomainModeling/extended/Group.js | 772 +++++------ .../jsDomainModeling/extended/ListField.js | 1014 ++++++++------- .../wireit/lib/inputex/js/fields/TypeField.js | 1123 ++++++++++------- 4 files changed, 1734 insertions(+), 1415 deletions(-) diff --git a/Resources/Public/jsDomainModeling/extbaseModeling.js b/Resources/Public/jsDomainModeling/extbaseModeling.js index 7ac46b864..17509da20 100644 --- a/Resources/Public/jsDomainModeling/extbaseModeling.js +++ b/Resources/Public/jsDomainModeling/extbaseModeling.js @@ -27,129 +27,137 @@ Element.prototype.parents = function (selector) { }; (function () { - var inputEx = YAHOO.inputEx; - var renderFields = inputEx.Group.prototype.renderFields; - - /** - * @param {Element} selectElement - */ - function addFieldsetClass(selectElement) { - if ( - YAHOO.util.Dom.get(selectElement).parentNode.classList.contains( - "isDependant", - ) - ) { - return; - } - - var fieldSets = selectElement.parents("fieldset"); - if (fieldSets.length === 0) { - return; - } - if (selectElement.name === "relationType") { - // relations - var fieldSet = fieldSets[0]; - var outerFieldSets = fieldSet.parents("fieldset"); - if (outerFieldSets.length === 0) { - return; + YAHOO.util.Event.onDOMReady(function () { + if (YAHOO.inputEx) { + var inputEx = YAHOO.inputEx; + var renderFields = inputEx.Group.prototype.renderFields; + + /** + * @param {Element} selectElement + */ + function addFieldsetClass(selectElement) { + if ( + YAHOO.util.Dom.get(selectElement).parentNode.classList.contains( + "isDependant", + ) + ) { + return; + } + + var fieldSets = selectElement.parents("fieldset"); + if (fieldSets.length === 0) { + return; + } + if (selectElement.name === "relationType") { + // relations + var fieldSet = fieldSets[0]; + var outerFieldSets = fieldSet.parents("fieldset"); + if (outerFieldSets.length === 0) { + return; + } + fieldSet = outerFieldSets[0]; + var renderTypeSelect = fieldSet.querySelectorAll( + 'select[name="renderType"]', + )[0]; + updateRenderTypeOptions(selectElement.value, renderTypeSelect); + + fieldSet.classList.value = ""; + fieldSet.classList.add(selectElement.value); + } } - fieldSet = outerFieldSets[0]; - var renderTypeSelect = fieldSet.querySelectorAll( - 'select[name="renderType"]', - )[0]; - updateRenderTypeOptions(selectElement.value, renderTypeSelect); - - fieldSet.classList.value = ""; - fieldSet.classList.add(selectElement.value); - } - } - /** - * @param {String} selectedRelationType - * @param {Element} renderTypeSelect - */ - function updateRenderTypeOptions(selectedRelationType, renderTypeSelect) { - renderTypeSelect.querySelectorAll("option").forEach(function (option, i) { - option.style.display = "none"; - }); - var optionValueMap = { - zeroToOne: ["selectSingle", "selectMultipleSideBySide", "inline"], - manyToOne: ["selectSingle", "selectMultipleSideBySide"], - zeroToMany: ["inline", "selectMultipleSideBySide"], - manyToMany: [ - "selectMultipleSideBySide", - "selectSingleBox", - "selectCheckBox", - ], - }; - var validOptions = optionValueMap[selectedRelationType]; - validOptions.forEach(function (e, i) { - renderTypeSelect - .querySelectorAll('option[value="' + e + '"]') - .forEach(function (option, i) { - option.style.display = "block"; + /** + * @param {String} selectedRelationType + * @param {Element} renderTypeSelect + */ + function updateRenderTypeOptions(selectedRelationType, renderTypeSelect) { + renderTypeSelect + .querySelectorAll("option") + .forEach(function (option, i) { + option.style.display = "none"; + }); + var optionValueMap = { + zeroToOne: ["selectSingle", "selectMultipleSideBySide", "inline"], + manyToOne: ["selectSingle", "selectMultipleSideBySide"], + zeroToMany: ["inline", "selectMultipleSideBySide"], + manyToMany: [ + "selectMultipleSideBySide", + "selectSingleBox", + "selectCheckBox", + ], + }; + var validOptions = optionValueMap[selectedRelationType]; + validOptions.forEach(function (e, i) { + renderTypeSelect + .querySelectorAll('option[value="' + e + '"]') + .forEach(function (option, i) { + option.style.display = "block"; + }); }); - }); - if (validOptions.indexOf(renderTypeSelect.value) < 0) { - renderTypeSelect.value = validOptions[0]; - } - } + if (validOptions.indexOf(renderTypeSelect.value) < 0) { + renderTypeSelect.value = validOptions[0]; + } + } - /** - * @param {Element} parentEl - */ - - // console.log("hier"); - // console.log("prototype", inputEx.Group.prototype.renderFields); - - if (typeof inputEx.Group.prototype.renderFields === "undefined") { - console.log("inputEx.Group.prototype.renderFields ist undefined"); - } else { - inputEx.Group.prototype.renderFields = function (parentEl) { - renderFields.call(this, parentEl); - parentEl - .querySelectorAll('fieldset select[name="relationType"]') - .forEach(function (element, i) { - // trigger options rendering & enabling for relationType selectors - addFieldsetClass(element); - }); - }; - } + /** + * @param {Element} parentEl + */ + + // console.log("hier"); + // console.log("prototype", inputEx.Group.prototype.renderFields); + + if (typeof inputEx.Group.prototype.renderFields === "undefined") { + console.log("inputEx.Group.prototype.renderFields ist undefined"); + } else { + inputEx.Group.prototype.renderFields = function (parentEl) { + renderFields.call(this, parentEl); + parentEl + .querySelectorAll('fieldset select[name="relationType"]') + .forEach(function (element, i) { + // trigger options rendering & enabling for relationType selectors + addFieldsetClass(element); + }); + }; + } - if ( - typeof inputEx.SelectField === "undefined" || - typeof inputEx.SelectField.prototype.onChange === "undefined" - ) { - console.log("inputEx.SelectField.prototype.onChange ist undefined"); - } else { - inputEx.SelectField.prototype.onChange = function (evt) { - addFieldsetClass(evt.target); - }; - } + if ( + typeof inputEx.SelectField === "undefined" || + typeof inputEx.SelectField.prototype.onChange === "undefined" + ) { + console.log("inputEx.SelectField.prototype.onChange ist undefined"); + } else { + inputEx.SelectField.prototype.onChange = function (evt) { + addFieldsetClass(evt.target); + }; + } - // console.log("Hier ende"); - - /** - * add the selected propertyType as classname to all propertyGroup fieldsets - */ - WireIt.WiringEditor.prototype.onPipeLoaded = function () { - var propertyTypeSelects = document.querySelectorAll( - ".propertyGroup select", - ); - if (propertyTypeSelects.length > 0) { - propertyTypeSelects.forEach(function (el, i) { - addFieldsetClass(el); - }); - } - var relationTypeSelects = document.querySelectorAll( - ".relationGroup select", - ); - if (relationTypeSelects.length > 0) { - relationTypeSelects.forEach(function (el, i) { - addFieldsetClass(el); - }); + // console.log("Hier ende"); + + /** + * add the selected propertyType as classname to all propertyGroup fieldsets + */ + WireIt.WiringEditor.prototype.onPipeLoaded = function () { + var propertyTypeSelects = document.querySelectorAll( + ".propertyGroup select", + ); + if (propertyTypeSelects.length > 0) { + propertyTypeSelects.forEach(function (el, i) { + addFieldsetClass(el); + }); + } + var relationTypeSelects = document.querySelectorAll( + ".relationGroup select", + ); + if (relationTypeSelects.length > 0) { + relationTypeSelects.forEach(function (el, i) { + addFieldsetClass(el); + }); + } + }; + } else { + console.log("InputEx ist nicht geladen"); } - }; + }); })(); YAHOO.util.Event.onAvailable("extensionDependencies-field", function () { diff --git a/Resources/Public/jsDomainModeling/extended/Group.js b/Resources/Public/jsDomainModeling/extended/Group.js index dc0cca817..a695d369c 100755 --- a/Resources/Public/jsDomainModeling/extended/Group.js +++ b/Resources/Public/jsDomainModeling/extended/Group.js @@ -17,410 +17,422 @@ *
  • flatten:
    • * */ - inputEx.Group = function (options) { - inputEx.Group.superclass.constructor.call(this, options); - - if (this.hasInteractions) { - for (var i = 0; i < this.inputs.length; i++) { - this.runInteractions(this.inputs[i], this.inputs[i].getValue()); - } - } - }; - lang.extend( - inputEx.Group, - inputEx.Field, - /** - * @scope inputEx.Group.prototype - */ - { - /** - * Adds some options: legend, collapsible, fields... - * @param {Object} options Options object (inputEx inputParams) as passed to the constructor - */ - setOptions: function (options) { - this.options = {}; - this.options.className = options.className || "inputEx-Group"; - this.options.fields = options.fields; - this.options.id = options.id; - this.options.name = options.name; - this.options.value = options.value; - this.options.flatten = options.flatten; - this.options.legend = options.legend || ""; - - // leave this for compatibility reasons - this.inputConfigs = options.fields; - - this.options.collapsible = lang.isUndefined(options.collapsible) - ? false - : options.collapsible; - this.options.collapsed = lang.isUndefined(options.collapsed) - ? false - : options.collapsed; - this.options.disabled = lang.isUndefined(options.disabled) - ? false - : options.disabled; - - // Array containing the list of the field instances - this.inputs = []; - - // Associative array containing the field instances by names - this.inputsNames = {}; - }, - - /** - * Render the group - */ - render: function () { - var className = this.options.className; - if (this.options.collapsible) { - className += " expanded"; - } - // Create the div wrapper for this group - this.divEl = inputEx.cn("div", { className: className }); - if (this.options.id) { - this.divEl.id = this.options.id; - } - - this.renderFields(this.divEl); - - if (this.options.disabled) { - this.disable(); - } - }, - - /** - * Render all the fields. - * We use the parentEl so that inputEx.Form can append them to the FORM tag - */ - renderFields: function (parentEl) { - this.fieldset = inputEx.cn("fieldset"); - this.legend = inputEx.cn("legend", { - className: "inputEx-Group-legend", - }); - - // Option Collapsible - //TODO: should it be renamed to 'collapsed'? - if (this.options.collapsible) { - var collapseImg = inputEx.cn( - "div", - { className: "inputEx-Group-collapseImg" }, - null, - " ", - ); - this.legend.appendChild(collapseImg); - inputEx.sn(this.fieldset, { className: "inputEx-Expanded" }); - } - - if ( - !lang.isUndefined(this.options.legend) && - this.options.legend !== "" - ) { - this.legend.appendChild( - document.createTextNode(" " + this.options.legend), - ); - } - - if ( - this.options.collapsible || - (!lang.isUndefined(this.options.legend) && this.options.legend !== "") - ) { - this.fieldset.appendChild(this.legend); - } - - // Iterate this.createInput on input fields - for (var i = 0; i < this.options.fields.length; i++) { - var input = this.options.fields[i]; - - // Render the field - // input = this.createUniqueIdForUidField(input); - - if ( - input.inputParams.name == "uid" && - typeof input.inputParams.value == "undefined" - ) { - var d = new Date(), - uniqueUid = parseInt(d.getTime() * Math.random()); - input.inputParams.value = uniqueUid; + YAHOO.util.Event.onDOMReady(function () { + if (YAHOO.inputEx) { + inputEx.Group = function (options) { + inputEx.Group.superclass.constructor.call(this, options); + + if (this.hasInteractions) { + for (var i = 0; i < this.inputs.length; i++) { + this.runInteractions(this.inputs[i], this.inputs[i].getValue()); } - - var field = this.renderField(input); - - this.fieldset.appendChild(field.getEl()); - } - - // Collapsed at creation ? - if (this.options.collapsed) { - this.toggleCollapse(); - } - - // Append the fieldset - parentEl.appendChild(this.fieldset); - }, - - /** - * Instanciate one field given its parameters, type or fieldClass - * @param {Object} fieldOptions The field properties as required bu inputEx.buildField - */ - renderField: function (fieldOptions) { - // Instanciate the field - var fieldInstance = inputEx.buildField(fieldOptions); - - this.inputs.push(fieldInstance); - - // Create an index to access fields by their name - if (fieldInstance.options.name) { - this.inputsNames[fieldInstance.options.name] = fieldInstance; - } - - // Create the this.hasInteractions to run interactions at startup - if (!this.hasInteractions && fieldOptions.interactions) { - this.hasInteractions = true; } + }; + lang.extend( + inputEx.Group, + inputEx.Field, + /** + * @scope inputEx.Group.prototype + */ + { + /** + * Adds some options: legend, collapsible, fields... + * @param {Object} options Options object (inputEx inputParams) as passed to the constructor + */ + setOptions: function (options) { + this.options = {}; + this.options.className = options.className || "inputEx-Group"; + this.options.fields = options.fields; + this.options.id = options.id; + this.options.name = options.name; + this.options.value = options.value; + this.options.flatten = options.flatten; + this.options.legend = options.legend || ""; + + // leave this for compatibility reasons + this.inputConfigs = options.fields; + + this.options.collapsible = lang.isUndefined(options.collapsible) + ? false + : options.collapsible; + this.options.collapsed = lang.isUndefined(options.collapsed) + ? false + : options.collapsed; + this.options.disabled = lang.isUndefined(options.disabled) + ? false + : options.disabled; + + // Array containing the list of the field instances + this.inputs = []; + + // Associative array containing the field instances by names + this.inputsNames = {}; + }, + + /** + * Render the group + */ + render: function () { + var className = this.options.className; + if (this.options.collapsible) { + className += " expanded"; + } + // Create the div wrapper for this group + this.divEl = inputEx.cn("div", { className: className }); + if (this.options.id) { + this.divEl.id = this.options.id; + } - // Subscribe to the field "updated" event to send the group "updated" event - fieldInstance.updatedEvt.subscribe(this.onChange, this, true); + this.renderFields(this.divEl); - return fieldInstance; - }, + if (this.options.disabled) { + this.disable(); + } + }, + + /** + * Render all the fields. + * We use the parentEl so that inputEx.Form can append them to the FORM tag + */ + renderFields: function (parentEl) { + this.fieldset = inputEx.cn("fieldset"); + this.legend = inputEx.cn("legend", { + className: "inputEx-Group-legend", + }); - /** - * Add a listener for the 'collapsible' option - */ - initEvents: function () { - if (this.options.collapsible) { - Event.addListener( - this.legend, - "click", - this.toggleCollapse, - this, - true, - ); - } - }, + // Option Collapsible + //TODO: should it be renamed to 'collapsed'? + if (this.options.collapsible) { + var collapseImg = inputEx.cn( + "div", + { className: "inputEx-Group-collapseImg" }, + null, + " ", + ); + this.legend.appendChild(collapseImg); + inputEx.sn(this.fieldset, { className: "inputEx-Expanded" }); + } - /** - * Toggle the collapse state - */ - toggleCollapse: function () { - var fieldset = Dom.get(this.fieldset), - divElement = Dom.get(this.divEl); - if (Dom.hasClass(fieldset, "inputEx-Expanded")) { - Dom.removeClass(fieldset, "inputEx-Expanded"); - Dom.addClass(fieldset, "inputEx-Collapsed"); - Dom.removeClass(divElement, "expanded"); - Dom.addClass(divElement, "collapsed"); - } else { - var containers = divElement.parents(".WireIt-Container"); - if (containers.length > 0) { - /** @type {HTMLElement} */ - var container = containers[0]; - container - .querySelectorAll(".inputEx-Expanded, .fieldset") - .forEach(function (el, i) { - Dom.removeClass(el, "inputEx-Expanded"); - Dom.addClass(el, "inputEx-Collapsed"); - }); - document.querySelectorAll(".expanded").forEach(function (el, i) { - Dom.removeClass(el, "expanded"); - Dom.addClass(el, "collapsed"); - }); - } - Dom.removeClass(fieldset, "inputEx-Collapsed"); - Dom.addClass(fieldset, "inputEx-Expanded"); - Dom.removeClass(divElement, "collapsed"); - Dom.addClass(divElement, "expanded"); - } - }, + if ( + !lang.isUndefined(this.options.legend) && + this.options.legend !== "" + ) { + this.legend.appendChild( + document.createTextNode(" " + this.options.legend), + ); + } - /** - * Validate each field - * @returns {Boolean} true if all fields validate and required fields are not empty - */ - validate: function () { - var response = true; - - // Validate all the sub fields - for (var i = 0; i < this.inputs.length; i++) { - var input = this.inputs[i]; - input.setClassFromState(); // update field classes (mark invalid fields...) - var state = input.getState(); - if (state == inputEx.stateRequired || state == inputEx.stateInvalid) { - response = false; // but keep looping on fields to set classes - } - } - return response; - }, + if ( + this.options.collapsible || + (!lang.isUndefined(this.options.legend) && + this.options.legend !== "") + ) { + this.fieldset.appendChild(this.legend); + } - /** - * Enable all fields in the group - */ - enable: function () { - for (var i = 0; i < this.inputs.length; i++) { - this.inputs[i].enable(); - } - }, + // Iterate this.createInput on input fields + for (var i = 0; i < this.options.fields.length; i++) { + var input = this.options.fields[i]; - /** - * Disable all fields in the group - */ - disable: function () { - for (var i = 0; i < this.inputs.length; i++) { - this.inputs[i].disable(); - } - }, + // Render the field + // input = this.createUniqueIdForUidField(input); - /** - * Set the values of each field from a key/value hash object - * @param {Any} oValues The group value - * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) - */ - setValue: function (oValues, sendUpdatedEvt) { - if (!oValues) { - return; - } - for (var i = 0; i < this.inputs.length; i++) { - var field = this.inputs[i]; - var name = field.options.name; - if (name && !lang.isUndefined(oValues[name])) { - field.setValue(oValues[name], false); // don't fire the updated event ! - } else { - field.clear(false); - } - } + if ( + input.inputParams.name == "uid" && + typeof input.inputParams.value == "undefined" + ) { + var d = new Date(), + uniqueUid = parseInt(d.getTime() * Math.random()); + input.inputParams.value = uniqueUid; + } - if (sendUpdatedEvt !== false) { - // fire update event - this.fireUpdatedEvt(); - } - }, + var field = this.renderField(input); - /** - * Return an object with all the values of the fields - */ - getValue: function () { - var o = {}; - for (var i = 0; i < this.inputs.length; i++) { - var v = this.inputs[i].getValue(); - if (this.inputs[i].options.name) { - if (this.inputs[i].options.flatten && lang.isObject(v)) { - lang.augmentObject(o, v); - } else { - o[this.inputs[i].options.name] = v; + this.fieldset.appendChild(field.getEl()); } - } - } - return o; - }, - /** - * Close the group (recursively calls "close" on each field, does NOT hide the group ) - * Call this function before hidding the group to close any field popup - */ - close: function () { - for (var i = 0; i < this.inputs.length; i++) { - this.inputs[i].close(); - } - }, + // Collapsed at creation ? + if (this.options.collapsed) { + this.toggleCollapse(); + } - /** - * Set the focus to the first input in the group - */ - focus: function () { - if (this.inputs.length > 0) { - this.inputs[0].focus(); - } - }, + // Append the fieldset + parentEl.appendChild(this.fieldset); + }, - /** - * Return the sub-field instance by its name property - * @param {String} fieldName The name property - */ - getFieldByName: function (fieldName) { - if (!this.inputsNames.hasOwnProperty(fieldName)) { - return null; - } - return this.inputsNames[fieldName]; - }, + /** + * Instanciate one field given its parameters, type or fieldClass + * @param {Object} fieldOptions The field properties as required bu inputEx.buildField + */ + renderField: function (fieldOptions) { + // Instanciate the field + var fieldInstance = inputEx.buildField(fieldOptions); - /** - * Called when one of the group subfields is updated. - * @param {String} eventName Event name - * @param {Array} args Array of [fieldValue, fieldInstance] - */ - onChange: function (eventName, args) { - // Run interactions - var fieldValue = args[0]; - var fieldInstance = args[1]; - this.runInteractions(fieldInstance, fieldValue); + this.inputs.push(fieldInstance); - //this.setClassFromState(); + // Create an index to access fields by their name + if (fieldInstance.options.name) { + this.inputsNames[fieldInstance.options.name] = fieldInstance; + } - this.fireUpdatedEvt(); - }, + // Create the this.hasInteractions to run interactions at startup + if (!this.hasInteractions && fieldOptions.interactions) { + this.hasInteractions = true; + } - /** - * Run an action (for interactions) - * @param {Object} action inputEx action object - * @param {Any} triggerValue The value that triggered the interaction - */ - runAction: function (action, triggerValue) { - var field = this.getFieldByName(action.name); - if (YAHOO.lang.isFunction(field[action.action])) { - field[action.action].call(field); - } else if (YAHOO.lang.isFunction(action.action)) { - action.action.call(field, triggerValue); - } else { - throw new Error( - "action " + - action.action + - " is not a valid action for field " + - action.name, - ); - } - }, + // Subscribe to the field "updated" event to send the group "updated" event + fieldInstance.updatedEvt.subscribe(this.onChange, this, true); + + return fieldInstance; + }, + + /** + * Add a listener for the 'collapsible' option + */ + initEvents: function () { + if (this.options.collapsible) { + Event.addListener( + this.legend, + "click", + this.toggleCollapse, + this, + true, + ); + } + }, + + /** + * Toggle the collapse state + */ + toggleCollapse: function () { + var fieldset = Dom.get(this.fieldset), + divElement = Dom.get(this.divEl); + if (Dom.hasClass(fieldset, "inputEx-Expanded")) { + Dom.removeClass(fieldset, "inputEx-Expanded"); + Dom.addClass(fieldset, "inputEx-Collapsed"); + Dom.removeClass(divElement, "expanded"); + Dom.addClass(divElement, "collapsed"); + } else { + var containers = divElement.parents(".WireIt-Container"); + if (containers.length > 0) { + /** @type {HTMLElement} */ + var container = containers[0]; + container + .querySelectorAll(".inputEx-Expanded, .fieldset") + .forEach(function (el, i) { + Dom.removeClass(el, "inputEx-Expanded"); + Dom.addClass(el, "inputEx-Collapsed"); + }); + document + .querySelectorAll(".expanded") + .forEach(function (el, i) { + Dom.removeClass(el, "expanded"); + Dom.addClass(el, "collapsed"); + }); + } + Dom.removeClass(fieldset, "inputEx-Collapsed"); + Dom.addClass(fieldset, "inputEx-Expanded"); + Dom.removeClass(divElement, "collapsed"); + Dom.addClass(divElement, "expanded"); + } + }, + + /** + * Validate each field + * @returns {Boolean} true if all fields validate and required fields are not empty + */ + validate: function () { + var response = true; + + // Validate all the sub fields + for (var i = 0; i < this.inputs.length; i++) { + var input = this.inputs[i]; + input.setClassFromState(); // update field classes (mark invalid fields...) + var state = input.getState(); + if ( + state == inputEx.stateRequired || + state == inputEx.stateInvalid + ) { + response = false; // but keep looping on fields to set classes + } + } + return response; + }, + + /** + * Enable all fields in the group + */ + enable: function () { + for (var i = 0; i < this.inputs.length; i++) { + this.inputs[i].enable(); + } + }, + + /** + * Disable all fields in the group + */ + disable: function () { + for (var i = 0; i < this.inputs.length; i++) { + this.inputs[i].disable(); + } + }, + + /** + * Set the values of each field from a key/value hash object + * @param {Any} oValues The group value + * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) + */ + setValue: function (oValues, sendUpdatedEvt) { + if (!oValues) { + return; + } + for (var i = 0; i < this.inputs.length; i++) { + var field = this.inputs[i]; + var name = field.options.name; + if (name && !lang.isUndefined(oValues[name])) { + field.setValue(oValues[name], false); // don't fire the updated event ! + } else { + field.clear(false); + } + } - /** - * Run the interactions for the given field instance - * @param {inputEx.Field} fieldInstance Field that just changed - * @param {Any} fieldValue Field value - */ - runInteractions: function (fieldInstance, fieldValue) { - var index = inputEx.indexOf(fieldInstance, this.inputs); - var fieldConfig = this.options.fields[index]; - if (YAHOO.lang.isUndefined(fieldConfig.interactions)) { - return; - } + if (sendUpdatedEvt !== false) { + // fire update event + this.fireUpdatedEvt(); + } + }, + + /** + * Return an object with all the values of the fields + */ + getValue: function () { + var o = {}; + for (var i = 0; i < this.inputs.length; i++) { + var v = this.inputs[i].getValue(); + if (this.inputs[i].options.name) { + if (this.inputs[i].options.flatten && lang.isObject(v)) { + lang.augmentObject(o, v); + } else { + o[this.inputs[i].options.name] = v; + } + } + } + return o; + }, + + /** + * Close the group (recursively calls "close" on each field, does NOT hide the group ) + * Call this function before hidding the group to close any field popup + */ + close: function () { + for (var i = 0; i < this.inputs.length; i++) { + this.inputs[i].close(); + } + }, + + /** + * Set the focus to the first input in the group + */ + focus: function () { + if (this.inputs.length > 0) { + this.inputs[0].focus(); + } + }, + + /** + * Return the sub-field instance by its name property + * @param {String} fieldName The name property + */ + getFieldByName: function (fieldName) { + if (!this.inputsNames.hasOwnProperty(fieldName)) { + return null; + } + return this.inputsNames[fieldName]; + }, + + /** + * Called when one of the group subfields is updated. + * @param {String} eventName Event name + * @param {Array} args Array of [fieldValue, fieldInstance] + */ + onChange: function (eventName, args) { + // Run interactions + var fieldValue = args[0]; + var fieldInstance = args[1]; + this.runInteractions(fieldInstance, fieldValue); + + //this.setClassFromState(); + + this.fireUpdatedEvt(); + }, + + /** + * Run an action (for interactions) + * @param {Object} action inputEx action object + * @param {Any} triggerValue The value that triggered the interaction + */ + runAction: function (action, triggerValue) { + var field = this.getFieldByName(action.name); + if (YAHOO.lang.isFunction(field[action.action])) { + field[action.action].call(field); + } else if (YAHOO.lang.isFunction(action.action)) { + action.action.call(field, triggerValue); + } else { + throw new Error( + "action " + + action.action + + " is not a valid action for field " + + action.name, + ); + } + }, + + /** + * Run the interactions for the given field instance + * @param {inputEx.Field} fieldInstance Field that just changed + * @param {Any} fieldValue Field value + */ + runInteractions: function (fieldInstance, fieldValue) { + var index = inputEx.indexOf(fieldInstance, this.inputs); + var fieldConfig = this.options.fields[index]; + if (YAHOO.lang.isUndefined(fieldConfig.interactions)) { + return; + } - // Let's run the interactions ! - var interactions = fieldConfig.interactions; - for (var i = 0; i < interactions.length; i++) { - var interaction = interactions[i]; - if (interaction.valueTrigger === fieldValue) { - for (var j = 0; j < interaction.actions.length; j++) { - this.runAction(interaction.actions[j], fieldValue); + // Let's run the interactions ! + var interactions = fieldConfig.interactions; + for (var i = 0; i < interactions.length; i++) { + var interaction = interactions[i]; + if (interaction.valueTrigger === fieldValue) { + for (var j = 0; j < interaction.actions.length; j++) { + this.runAction(interaction.actions[j], fieldValue); + } + } } - } - } - }, + }, + + /** + * Clear all subfields + * @param {boolean} [sendUpdatedEvt] (optional) Wether this clear should fire the updatedEvt or not (default is true, pass false to NOT send the event) + */ + clear: function (sendUpdatedEvt) { + for (var i = 0; i < this.inputs.length; i++) { + this.inputs[i].clear(false); + } + if (sendUpdatedEvt !== false) { + // fire update event + this.fireUpdatedEvt(); + } + }, + }, + ); /** - * Clear all subfields - * @param {boolean} [sendUpdatedEvt] (optional) Wether this clear should fire the updatedEvt or not (default is true, pass false to NOT send the event) + * Register this class as "group" type */ - clear: function (sendUpdatedEvt) { - for (var i = 0; i < this.inputs.length; i++) { - this.inputs[i].clear(false); - } - if (sendUpdatedEvt !== false) { - // fire update event - this.fireUpdatedEvt(); - } - }, - }, - ); - - /** - * Register this class as "group" type - */ - inputEx.registerType("group", inputEx.Group); + inputEx.registerType("group", inputEx.Group); + } else { + console.log("InputEx ist nicht geladen"); + } + }); })(); diff --git a/Resources/Public/jsDomainModeling/extended/ListField.js b/Resources/Public/jsDomainModeling/extended/ListField.js index 7d91c28f1..c9e90384e 100755 --- a/Resources/Public/jsDomainModeling/extended/ListField.js +++ b/Resources/Public/jsDomainModeling/extended/ListField.js @@ -4,11 +4,6 @@ * (see line **************************************************/ (function () { - var inputEx = YAHOO.inputEx, - lang = YAHOO.lang, - Event = YAHOO.util.Event, - Dom = YAHOO.util.Dom; - /** * @class Meta field to create a list of other fields * @extends inputEx.Field @@ -23,514 +18,553 @@ *
  • listRemoveLabel: if useButtons is false, text to remove an item
    • * */ - inputEx.ListField = function (options) { - /** - * List of all the subField instances - */ - this.subFields = []; - - inputEx.ListField.superclass.constructor.call(this, options); - }; - lang.extend( - inputEx.ListField, - inputEx.Field, - /** - * @scope inputEx.ListField.prototype - */ - { - // reference to the last copied fieldset - lastCopiedFieldSet: {}, - /** - * Set the ListField classname - * @param {Object} options Options object (inputEx inputParams) as passed to the constructor - */ - setOptions: function (options) { - inputEx.ListField.superclass.setOptions.call(this, options); - - this.options.className = options.className - ? options.className - : "inputEx-Field inputEx-ListField"; - this.options.sortable = lang.isUndefined(options.sortable) - ? false - : options.sortable; - this.options.elementType = options.elementType || { type: "string" }; - this.options.useButtons = lang.isUndefined(options.useButtons) - ? false - : options.useButtons; - this.options.unique = lang.isUndefined(options.unique) - ? false - : options.unique; - this.options.listAddLabel = - options.listAddLabel || inputEx.messages.listAddLink; - this.options.listRemoveLabel = - options.listRemoveLabel || inputEx.messages.listRemoveLink; - }, - /** - * Render the addButton - */ - renderComponent: function () { - // Add element button - if (this.options.useButtons) { - this.addButton = inputEx.cn("img", { - src: inputEx.spacerUrl, - className: "inputEx-ListField-addButton", - }); - this.fieldContainer.appendChild(this.addButton); - } - - // List label - this.fieldContainer.appendChild( - inputEx.cn( - "span", - null, - { marginLeft: "4px" }, - this.options.listLabel, - ), - ); - - // Div element to contain the children - this.childContainer = inputEx.cn("div", { - className: "inputEx-ListField-childContainer", - }); - this.fieldContainer.appendChild(this.childContainer); - - // Add link - if (!this.options.useButtons) { - this.addButton = inputEx.cn( - "a", - { className: "inputEx-List-link" }, - null, - this.options.listAddLabel, - ); - this.fieldContainer.appendChild(this.addButton); - } - }, + YAHOO.util.Event.onDOMReady(function () { + if (YAHOO.inputEx) { + let inputEx = YAHOO.inputEx; + let lang = YAHOO.lang; + let Event = YAHOO.util.Event; + let Dom = YAHOO.util.Dom; + + inputEx.ListField = function (options) { + /** + * List of all the subField instances + */ + this.subFields = []; + + inputEx.ListField.superclass.constructor.call(this, options); + }; + lang.extend( + inputEx.ListField, + inputEx.Field, + /** + * @scope inputEx.ListField.prototype + */ + { + // reference to the last copied fieldset + lastCopiedFieldSet: {}, + /** + * Set the ListField classname + * @param {Object} options Options object (inputEx inputParams) as passed to the constructor + */ + setOptions: function (options) { + inputEx.ListField.superclass.setOptions.call(this, options); + + this.options.className = options.className + ? options.className + : "inputEx-Field inputEx-ListField"; + this.options.sortable = lang.isUndefined(options.sortable) + ? false + : options.sortable; + this.options.elementType = options.elementType || { + type: "string", + }; + this.options.useButtons = lang.isUndefined(options.useButtons) + ? false + : options.useButtons; + this.options.unique = lang.isUndefined(options.unique) + ? false + : options.unique; + this.options.listAddLabel = + options.listAddLabel || inputEx.messages.listAddLink; + this.options.listRemoveLabel = + options.listRemoveLabel || inputEx.messages.listRemoveLink; + }, + + /** + * Render the addButton + */ + renderComponent: function () { + // Add element button + if (this.options.useButtons) { + this.addButton = inputEx.cn("img", { + src: inputEx.spacerUrl, + className: "inputEx-ListField-addButton", + }); + this.fieldContainer.appendChild(this.addButton); + } - /** - * Handle the click event on the add button - */ - initEvents: function () { - Event.addListener( - this.addButton, - "click", - this.onAddButton, - this, - true, - ); - }, + // List label + this.fieldContainer.appendChild( + inputEx.cn( + "span", + null, + { marginLeft: "4px" }, + this.options.listLabel, + ), + ); + + // Div element to contain the children + this.childContainer = inputEx.cn("div", { + className: "inputEx-ListField-childContainer", + }); + this.fieldContainer.appendChild(this.childContainer); + + // Add link + if (!this.options.useButtons) { + this.addButton = inputEx.cn( + "a", + { className: "inputEx-List-link" }, + null, + this.options.listAddLabel, + ); + this.fieldContainer.appendChild(this.addButton); + } + }, + + /** + * Handle the click event on the add button + */ + initEvents: function () { + Event.addListener( + this.addButton, + "click", + this.onAddButton, + this, + true, + ); + }, + + /** + * Validate each field + * @returns {Boolean} true if all fields validate, required fields are not empty and unique constraint (if specified) is not violated + */ + validate: function () { + var response = true; + var uniques = {}; + + // Validate all the sub fields + for (var i = 0; i < this.subFields.length && response; i++) { + var input = this.subFields[i]; + input.setClassFromState(); // update field classes (mark invalid fields...) + var state = input.getState(); + if ( + state == inputEx.stateRequired || + state == inputEx.stateInvalid + ) { + response = false; // but keep looping on fields to set classes + } + if (this.options.unique) { + var hash = lang.dump(input.getValue()); + //logDebug('listfied index ',i, 'hash', hash); + if (uniques[hash]) { + response = false; // not unique + } else { + uniques[hash] = true; + } + } + } + return response; + }, + + /** + * Set the value of all the subfields + * @param {Array} value The list of values to set + * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) + */ + setValue: function (value, sendUpdatedEvt) { + if (!lang.isArray(value)) { + // TODO: throw exceptions ? + return; + } - /** - * Validate each field - * @returns {Boolean} true if all fields validate, required fields are not empty and unique constraint (if specified) is not violated - */ - validate: function () { - var response = true; - var uniques = {}; - - // Validate all the sub fields - for (var i = 0; i < this.subFields.length && response; i++) { - var input = this.subFields[i]; - input.setClassFromState(); // update field classes (mark invalid fields...) - var state = input.getState(); - if (state == inputEx.stateRequired || state == inputEx.stateInvalid) { - response = false; // but keep looping on fields to set classes - } - if (this.options.unique) { - var hash = lang.dump(input.getValue()); - //logDebug('listfied index ',i, 'hash', hash); - if (uniques[hash]) { - response = false; // not unique - } else { - uniques[hash] = true; + // Set the values (and add the lines if necessary) + for (var i = 0; i < value.length; i++) { + if (i == this.subFields.length) { + this.addElement(value[i]); + } else { + this.subFields[i].setValue(value[i], false); + } } - } - } - return response; - }, - /** - * Set the value of all the subfields - * @param {Array} value The list of values to set - * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) - */ - setValue: function (value, sendUpdatedEvt) { - if (!lang.isArray(value)) { - // TODO: throw exceptions ? - return; - } - - // Set the values (and add the lines if necessary) - for (var i = 0; i < value.length; i++) { - if (i == this.subFields.length) { - this.addElement(value[i]); - } else { - this.subFields[i].setValue(value[i], false); - } - } - - // Remove additional subFields - var additionalElements = this.subFields.length - value.length; - if (additionalElements > 0) { - for (var i = 0; i < additionalElements; i++) { - this.removeElement(value.length); - } - } - - inputEx.ListField.superclass.setValue.call(this, value, sendUpdatedEvt); - }, + // Remove additional subFields + var additionalElements = this.subFields.length - value.length; + if (additionalElements > 0) { + for (var i = 0; i < additionalElements; i++) { + this.removeElement(value.length); + } + } - /** - * Return the array of values - * @return {Array} The array - */ - getValue: function () { - var values = []; - for (var i = 0; i < this.subFields.length; i++) { - values[i] = this.subFields[i].getValue(); - } - return values; - }, + inputEx.ListField.superclass.setValue.call( + this, + value, + sendUpdatedEvt, + ); + }, + + /** + * Return the array of values + * @return {Array} The array + */ + getValue: function () { + var values = []; + for (var i = 0; i < this.subFields.length; i++) { + values[i] = this.subFields[i].getValue(); + } + return values; + }, + + /** + * Adds an element + * @param {Any} The initial value of the subfield to create + * @return {inputEx.Field} SubField added instance + */ + addElement: function (value) { + // Render the subField + var subFieldEl = this.renderSubField(value); + + // Adds it to the local list + this.subFields.push(subFieldEl); + + return subFieldEl; + }, + + /** + * Add a new element to the list and fire updated event + * @param {Event} e The original click event + */ + onAddButton: function (e) { + Event.stopEvent(e); + // Add a field with no value: + var subFieldEl = this.addElement(), + fieldset, + copiedFieldSet = this.lastCopiedFieldSet; + if (typeof copiedFieldSet["inputs"] != "undefined") { + for (i = 0; i < copiedFieldSet["inputs"].length; i++) { + fieldName = copiedFieldSet["inputs"][i]["options"]["name"]; + if ( + fieldName == "relationName" || + fieldName == "propertyName" || + fieldName == "propertyDescription" + ) { + copiedFieldSet["inputs"][i].setValue(""); + } else if (fieldName == "uid") { + copiedFieldSet["inputs"][i].setValue( + parseInt(new Date().getTime() * Math.random(), 10), + ); + } else if (fieldName == "propertyType") { + fieldset = copiedFieldSet.fieldset; + fieldset.removeAttribute("class"); + Dom.addClass( + fieldset, + copiedFieldSet["inputs"][i].getValue(), + ); + } else if (fieldName == "advancedSettings") { + if (copiedFieldSet.options.value) { + fieldset = copiedFieldSet.fieldset; + fieldset.removeAttribute("class"); + Dom.addClass( + fieldset, + copiedFieldSet.options.value.relationType, + ); + } + } + } + } - /** - * Adds an element - * @param {Any} The initial value of the subfield to create - * @return {inputEx.Field} SubField added instance - */ - addElement: function (value) { - // Render the subField - var subFieldEl = this.renderSubField(value); + // Focus on this field + subFieldEl.focus(); + + this.fireUpdatedEvt(); + }, + + /** + * Adds a new line to the List Field + * @param {Any} The initial value of the subfield to create + * @return {inputEx.Field} instance of the created field (inputEx.Field or derivative) + */ + renderSubField: function (value) { + // Div that wraps the deleteButton + the subField + var newDiv = inputEx.cn("div"); + + // Delete button + if (this.options.useButtons) { + var delButton = inputEx.cn("img", { + src: inputEx.spacerUrl, + className: "inputEx-ListField-delButton", + }); + Event.addListener(delButton, "click", this.onDelete, this, true); + newDiv.appendChild(delButton); + } - // Adds it to the local list - this.subFields.push(subFieldEl); + // Instanciate the new subField + var opts = lang.merge({}, this.options.elementType); + if (!opts.inputParams) { + opts.inputParams = {}; + } + if (!lang.isUndefined(value)) { + opts.inputParams.value = value; + } - return subFieldEl; - }, + // IS: Quick hack to get the list element number from within the field and its subfields. + document.currentListElementNumber = this.subFields.length; + + var el = inputEx.buildField(opts); + + /**** set a reference to the copy to enable value manipulation ****/ + this.lastCopiedFieldSet = el; + var subFieldEl = el.getEl(); + + Dom.setStyle(subFieldEl, "margin-left", "4px"); + Dom.setStyle(subFieldEl, "float", "left"); + newDiv.appendChild(subFieldEl); + + // Subscribe the onChange event to resend it + el.updatedEvt.subscribe(this.onChange, this, true); + + // Arrows to order: + if (this.options.sortable) { + var arrowUp = inputEx.cn("div", { + className: + "inputEx-ListField-Arrow inputEx-ListField-ArrowUp t3js-icon icon icon-size-small ", + }); + arrowUp.innerHTML = + '' + + '' + + '' + + "" + + ""; + Event.addListener(arrowUp, "click", this.onArrowUp, this, true); + newDiv.appendChild(arrowUp); + + var arrowDown = inputEx.cn("div", { + className: + "inputEx-ListField-Arrow inputEx-ListField-ArrowDown t3js-icon icon icon-size-small ", + }); + arrowDown.innerHTML = + '' + + '' + + '' + + "" + + ""; + Event.addListener( + arrowDown, + "click", + this.onArrowDown, + this, + true, + ); + newDiv.appendChild(arrowDown); + } - /** - * Add a new element to the list and fire updated event - * @param {Event} e The original click event - */ - onAddButton: function (e) { - Event.stopEvent(e); - // Add a field with no value: - var subFieldEl = this.addElement(), - fieldset, - copiedFieldSet = this.lastCopiedFieldSet; - if (typeof copiedFieldSet["inputs"] != "undefined") { - for (i = 0; i < copiedFieldSet["inputs"].length; i++) { - fieldName = copiedFieldSet["inputs"][i]["options"]["name"]; - if ( - fieldName == "relationName" || - fieldName == "propertyName" || - fieldName == "propertyDescription" - ) { - copiedFieldSet["inputs"][i].setValue(""); - } else if (fieldName == "uid") { - copiedFieldSet["inputs"][i].setValue( - parseInt(new Date().getTime() * Math.random(), 10), + // Delete link + if (!this.options.useButtons) { + var delButton = inputEx.cn( + "div", + { + className: + "inputEx-List-link t3js-icon icon icon-size-small icon-state-default t3-icon-edit-delete deleteButton icon-actions-edit-delete", + }, + null, + this.options.listRemoveLabel, ); - } else if (fieldName == "propertyType") { - fieldset = copiedFieldSet.fieldset; - fieldset.removeAttribute("class"); - Dom.addClass(fieldset, copiedFieldSet["inputs"][i].getValue()); - } else if (fieldName == "advancedSettings") { - if (copiedFieldSet.options.value) { - fieldset = copiedFieldSet.fieldset; - fieldset.removeAttribute("class"); - Dom.addClass( - fieldset, - copiedFieldSet.options.value.relationType, - ); + delButton.innerHTML = + '' + + '' + + '' + + "" + + ""; + Event.addListener(delButton, "click", this.onDelete, this, true); + newDiv.appendChild(delButton); + } + + // Line breaker + newDiv.appendChild(inputEx.cn("div", null, { clear: "both" })); + + this.childContainer.appendChild(newDiv); + + return el; + }, + + /** + * Switch a subField with its previous one + * Called when the user clicked on the up arrow of a sortable list + * @param {Event} e Original click event + */ + onArrowUp: function (e) { + var childElement = + Event.getTarget(e).parentNode.parentNode.parentNode.parentNode + .parentNode; + + var previousChildNode = null; + var nodeIndex = -1; + for ( + var i = 1; + i < childElement.parentNode.childNodes.length; + i++ + ) { + var el = childElement.parentNode.childNodes[i]; + if (el == childElement) { + previousChildNode = childElement.parentNode.childNodes[i - 1]; + nodeIndex = i; + break; } } - } - } - // Focus on this field - subFieldEl.focus(); + if (previousChildNode) { + // Remove the line + var removedEl = this.childContainer.removeChild(childElement); - this.fireUpdatedEvt(); - }, + // Adds it before the previousChildNode + var insertedEl = this.childContainer.insertBefore( + removedEl, + previousChildNode, + ); - /** - * Adds a new line to the List Field - * @param {Any} The initial value of the subfield to create - * @return {inputEx.Field} instance of the created field (inputEx.Field or derivative) - */ - renderSubField: function (value) { - // Div that wraps the deleteButton + the subField - var newDiv = inputEx.cn("div"); - - // Delete button - if (this.options.useButtons) { - var delButton = inputEx.cn("img", { - src: inputEx.spacerUrl, - className: "inputEx-ListField-delButton", - }); - Event.addListener(delButton, "click", this.onDelete, this, true); - newDiv.appendChild(delButton); - } - - // Instanciate the new subField - var opts = lang.merge({}, this.options.elementType); - if (!opts.inputParams) { - opts.inputParams = {}; - } - if (!lang.isUndefined(value)) { - opts.inputParams.value = value; - } - - // IS: Quick hack to get the list element number from within the field and its subfields. - document.currentListElementNumber = this.subFields.length; - - var el = inputEx.buildField(opts); - - /**** set a reference to the copy to enable value manipulation ****/ - this.lastCopiedFieldSet = el; - var subFieldEl = el.getEl(); - - Dom.setStyle(subFieldEl, "margin-left", "4px"); - Dom.setStyle(subFieldEl, "float", "left"); - newDiv.appendChild(subFieldEl); - - // Subscribe the onChange event to resend it - el.updatedEvt.subscribe(this.onChange, this, true); - - // Arrows to order: - if (this.options.sortable) { - var arrowUp = inputEx.cn("div", { - className: - "inputEx-ListField-Arrow inputEx-ListField-ArrowUp t3js-icon icon icon-size-small ", - }); - arrowUp.innerHTML = - '' + - '' + - '' + - "" + - ""; - Event.addListener(arrowUp, "click", this.onArrowUp, this, true); - newDiv.appendChild(arrowUp); - - var arrowDown = inputEx.cn("div", { - className: - "inputEx-ListField-Arrow inputEx-ListField-ArrowDown t3js-icon icon icon-size-small ", - }); - arrowDown.innerHTML = - '' + - '' + - '' + - "" + - ""; - Event.addListener(arrowDown, "click", this.onArrowDown, this, true); - newDiv.appendChild(arrowDown); - } - - // Delete link - if (!this.options.useButtons) { - var delButton = inputEx.cn( - "div", - { - className: - "inputEx-List-link t3js-icon icon icon-size-small icon-state-default t3-icon-edit-delete deleteButton icon-actions-edit-delete", - }, - null, - this.options.listRemoveLabel, - ); - delButton.innerHTML = - '' + - '' + - '' + - "" + - ""; - Event.addListener(delButton, "click", this.onDelete, this, true); - newDiv.appendChild(delButton); - } - - // Line breaker - newDiv.appendChild(inputEx.cn("div", null, { clear: "both" })); - - this.childContainer.appendChild(newDiv); - - return el; - }, + // Swap this.subFields elements (i,i-1) + var temp = this.subFields[nodeIndex]; + this.subFields[nodeIndex] = this.subFields[nodeIndex - 1]; + this.subFields[nodeIndex - 1] = temp; - /** - * Switch a subField with its previous one - * Called when the user clicked on the up arrow of a sortable list - * @param {Event} e Original click event - */ - onArrowUp: function (e) { - var childElement = - Event.getTarget(e).parentNode.parentNode.parentNode.parentNode - .parentNode; - - var previousChildNode = null; - var nodeIndex = -1; - for (var i = 1; i < childElement.parentNode.childNodes.length; i++) { - var el = childElement.parentNode.childNodes[i]; - if (el == childElement) { - previousChildNode = childElement.parentNode.childNodes[i - 1]; - nodeIndex = i; - break; - } - } - - if (previousChildNode) { - // Remove the line - var removedEl = this.childContainer.removeChild(childElement); - - // Adds it before the previousChildNode - var insertedEl = this.childContainer.insertBefore( - removedEl, - previousChildNode, - ); - - // Swap this.subFields elements (i,i-1) - var temp = this.subFields[nodeIndex]; - this.subFields[nodeIndex] = this.subFields[nodeIndex - 1]; - this.subFields[nodeIndex - 1] = temp; - - // Color Animation - if (this.arrowAnim) { - this.arrowAnim.stop(true); - } - this.arrowAnim = new YAHOO.util.ColorAnim( - insertedEl, - { - backgroundColor: { - from: "#eeee33", - to: "#eeeeee", - }, - }, - 0.4, - ); - this.arrowAnim.onComplete.subscribe(function () { - Dom.setStyle(insertedEl, "background-color", ""); - }); - this.arrowAnim.animate(); - - this.fireUpdatedEvt(); - } - }, + // Color Animation + if (this.arrowAnim) { + this.arrowAnim.stop(true); + } + this.arrowAnim = new YAHOO.util.ColorAnim( + insertedEl, + { + backgroundColor: { + from: "#eeee33", + to: "#eeeeee", + }, + }, + 0.4, + ); + this.arrowAnim.onComplete.subscribe(function () { + Dom.setStyle(insertedEl, "background-color", ""); + }); + this.arrowAnim.animate(); - /** - * Switch a subField with its next one - * Called when the user clicked on the down arrow of a sortable list - * @param {Event} e Original click event - */ - onArrowDown: function (e) { - var childElement = - Event.getTarget(e).parentNode.parentNode.parentNode.parentNode - .parentNode; - - var nodeIndex = -1; - var nextChildNode = null; - for (var i = 0; i < childElement.parentNode.childNodes.length; i++) { - var el = childElement.parentNode.childNodes[i]; - if (el == childElement) { - nextChildNode = childElement.parentNode.childNodes[i + 1]; - nodeIndex = i; - break; - } - } - - if (nextChildNode) { - // Remove the line - var removedEl = this.childContainer.removeChild(childElement); - // Adds it after the nextChildNode - var insertedEl = Dom.insertAfter(removedEl, nextChildNode); - - // Swap this.subFields elements (i,i+1) - var temp = this.subFields[nodeIndex]; - this.subFields[nodeIndex] = this.subFields[nodeIndex + 1]; - this.subFields[nodeIndex + 1] = temp; - - // Color Animation - if (this.arrowAnim) { - this.arrowAnim.stop(true); - } - this.arrowAnim = new YAHOO.util.ColorAnim( - insertedEl, - { backgroundColor: { from: "#eeee33", to: "#eeeeee" } }, - 1, - ); - this.arrowAnim.onComplete.subscribe(function () { - Dom.setStyle(insertedEl, "background-color", ""); - }); - this.arrowAnim.animate(); - - this.fireUpdatedEvt(); - } - }, + this.fireUpdatedEvt(); + } + }, + + /** + * Switch a subField with its next one + * Called when the user clicked on the down arrow of a sortable list + * @param {Event} e Original click event + */ + onArrowDown: function (e) { + var childElement = + Event.getTarget(e).parentNode.parentNode.parentNode.parentNode + .parentNode; + + var nodeIndex = -1; + var nextChildNode = null; + for ( + var i = 0; + i < childElement.parentNode.childNodes.length; + i++ + ) { + var el = childElement.parentNode.childNodes[i]; + if (el == childElement) { + nextChildNode = childElement.parentNode.childNodes[i + 1]; + nodeIndex = i; + break; + } + } - /** - * Called when the user clicked on a delete button. - * @param {Event} e The original click event - */ - onDelete: function (e) { - Event.stopEvent(e); - - // Get the wrapping div element - var elementDiv = - Event.getTarget(e).parentNode.parentNode.parentNode.parentNode - .parentNode; - - // Get the index of the subField - var index = -1; - - var subFieldEl = elementDiv.childNodes[this.options.useButtons ? 1 : 0]; - for (var i = 0; i < this.subFields.length; i++) { - if (this.subFields[i].getEl() == subFieldEl) { - index = i; - break; - } - } - - // Remove it - if (index != -1) { - this.removeElement(index); - } - - // Fire the updated event - this.fireUpdatedEvt(); - }, + if (nextChildNode) { + // Remove the line + var removedEl = this.childContainer.removeChild(childElement); + // Adds it after the nextChildNode + var insertedEl = Dom.insertAfter(removedEl, nextChildNode); - /** - * Remove the line from the dom and the subField from the list. - * @param {integer} index The index of the element to remove - */ - removeElement: function (index) { - var elementDiv = this.subFields[index].getEl().parentNode; - var fieldToRemove = this.subFields[index]; - if (fieldToRemove.inputs) { - for (var i = 0; i < fieldToRemove.inputs.length; i++) { - if (fieldToRemove.inputs[i].terminal !== undefined) { - fieldToRemove.inputs[i].terminal.removeAllWires(); + // Swap this.subFields elements (i,i+1) + var temp = this.subFields[nodeIndex]; + this.subFields[nodeIndex] = this.subFields[nodeIndex + 1]; + this.subFields[nodeIndex + 1] = temp; + + // Color Animation + if (this.arrowAnim) { + this.arrowAnim.stop(true); + } + this.arrowAnim = new YAHOO.util.ColorAnim( + insertedEl, + { backgroundColor: { from: "#eeee33", to: "#eeeeee" } }, + 1, + ); + this.arrowAnim.onComplete.subscribe(function () { + Dom.setStyle(insertedEl, "background-color", ""); + }); + this.arrowAnim.animate(); + + this.fireUpdatedEvt(); + } + }, + + /** + * Called when the user clicked on a delete button. + * @param {Event} e The original click event + */ + onDelete: function (e) { + Event.stopEvent(e); + + // Get the wrapping div element + var elementDiv = + Event.getTarget(e).parentNode.parentNode.parentNode.parentNode + .parentNode; + + // Get the index of the subField + var index = -1; + + var subFieldEl = + elementDiv.childNodes[this.options.useButtons ? 1 : 0]; + for (var i = 0; i < this.subFields.length; i++) { + if (this.subFields[i].getEl() == subFieldEl) { + index = i; + break; + } } - } - } - this.subFields[index] = undefined; - this.subFields = inputEx.compactArray(this.subFields); + // Remove it + if (index != -1) { + this.removeElement(index); + } - // Remove the element - elementDiv.parentNode.removeChild(elementDiv); - }, - }, - ); + // Fire the updated event + this.fireUpdatedEvt(); + }, + + /** + * Remove the line from the dom and the subField from the list. + * @param {integer} index The index of the element to remove + */ + removeElement: function (index) { + var elementDiv = this.subFields[index].getEl().parentNode; + var fieldToRemove = this.subFields[index]; + if (fieldToRemove.inputs) { + for (var i = 0; i < fieldToRemove.inputs.length; i++) { + if (fieldToRemove.inputs[i].terminal !== undefined) { + fieldToRemove.inputs[i].terminal.removeAllWires(); + } + } + } - /** - * Register this class as "list" type - */ - inputEx.registerType("list", inputEx.ListField); + this.subFields[index] = undefined; + this.subFields = inputEx.compactArray(this.subFields); + + // Remove the element + elementDiv.parentNode.removeChild(elementDiv); + }, + }, + ); - inputEx.messages.listAddLink = "add"; - inputEx.messages.listRemoveLink = "remove"; + /** + * Register this class as "list" type + */ + inputEx.registerType("list", inputEx.ListField); + + inputEx.messages.listAddLink = "add"; + inputEx.messages.listRemoveLink = "remove"; + } else { + console.log("InputEx ist nicht geladen"); + } + }); })(); diff --git a/Resources/Public/jsDomainModeling/wireit/lib/inputex/js/fields/TypeField.js b/Resources/Public/jsDomainModeling/wireit/lib/inputex/js/fields/TypeField.js index 2f43fe07d..e623f6b21 100644 --- a/Resources/Public/jsDomainModeling/wireit/lib/inputex/js/fields/TypeField.js +++ b/Resources/Public/jsDomainModeling/wireit/lib/inputex/js/fields/TypeField.js @@ -1,429 +1,694 @@ -(function() { - - var inputEx = YAHOO.inputEx, Event = YAHOO.util.Event, Dom = YAHOO.util.Dom, lang = YAHOO.lang; - - /** - * @class TypeField is a field to create fields. The user can create any value he wants by switching fields. - * @extends inputEx.Field - * @constructor - * @param {Object} options Standard inputEx inputParams definition - */ - inputEx.TypeField = function(options) { - inputEx.TypeField.superclass.constructor.call(this, options); - - // Build the updateFieldValue - if (lang.isUndefined(this.options.value)) { - this.updateFieldValue(); - } - }; - - lang.extend(inputEx.TypeField, inputEx.Field, - /** - * @scope inputEx.TypeField.prototype - */ - { - - /** - * Render the TypeField: create a button with a property panel that contains the field options - */ - renderComponent: function() { - // DIV element to wrap the Field "default value" - this.fieldValueWrapper = inputEx.cn('div', {className: "inputEx-TypeField-FieldValueWrapper"}); - this.fieldContainer.appendChild(this.fieldValueWrapper); - - // Render the popup that will contain the property form - this.propertyPanel = inputEx.cn('div', {className: "inputEx-TypeField-PropertiesPanel"}, {display: 'none'}); - - // The list of all inputEx declared types to be used in the "type" selector - var selectOptions = []; - for (var key in inputEx.typeClasses) { - if (inputEx.typeClasses.hasOwnProperty(key)) { - selectOptions.push(key); - } - } - this.typeSelect = new inputEx.SelectField({label: "Type", selectOptions: selectOptions, selectValues: selectOptions, parentEl: this.propertyPanel}); - - // DIV element to wrap the options group - this.groupOptionsWrapper = inputEx.cn('div'); - this.propertyPanel.appendChild(this.groupOptionsWrapper); - - // Button to switch the panel - this.button = inputEx.cn('div', {className: "inputEx-TypeField-EditButton"}); - this.button.appendChild(this.propertyPanel); - this.fieldContainer.appendChild(this.button); - - // Build the groupOptions - this.rebuildGroupOptions(); - }, - - /** - * Adds 2 event listeners: - * - on the button to toggel the propertiesPanel - */ - initEvents: function() { - inputEx.TypeField.superclass.initEvents.call(this); - - // "Toggle the properties panel" button : - Event.addListener(this.button, 'click', this.onTogglePropertiesPanel, this, true); - - // Prevent the button to receive a "click" event if the propertyPanel doesn't catch it - Event.addListener(this.propertyPanel, 'click', function(e) { - Event.stopPropagation(e); - }, this, true); - - // Listen the "type" selector to update the groupOptions - // Hack the type selector to rebuild the group option - this.typeSelect.updatedEvt.subscribe(this.rebuildGroupOptions, this, true); - }, - - /** - * Regenerate the property form - */ - rebuildGroupOptions: function() { - try { - - // Save the previous value: - var previousVal = null; - - // Close a previously created group - if (this.group) { - previousVal = this.group.getValue(); - this.group.close(); - this.group.destroy(); - this.groupOptionsWrapper.innerHTML = ""; - } - - // Get value is directly the class !! - var classO = inputEx.getFieldClass(this.typeSelect.getValue()); - - // Instanciate the group - var groupParams = {fields: classO.groupOptions, parentEl: this.groupOptionsWrapper}; - this.group = new inputEx.Group(groupParams); - - // Set the previous name/label - if (previousVal) { - this.group.setValue({ - name: previousVal.name, - label: previousVal.label - }, false); - } - - // Register the updated event - this.group.updatedEvt.subscribe(this.onChangeGroupOptions, this, true); - - // Create the value field - this.updateFieldValue(); - - } catch(ex) { - if (YAHOO.lang.isObject(window["console"]) && YAHOO.lang.isFunction(window["console"]["log"])) { - console.log("inputEx.TypeField.rebuildGroupOptions: ", ex); - } - } - - }, - - /** - * Toggle the property panel - */ - onTogglePropertiesPanel: function() { - if (this.propertyPanel.style.display == 'none') { - this.propertyPanel.style.display = ''; - Dom.addClass(this.button, "opened"); - } else { - this.propertyPanel.style.display = 'none'; - Dom.removeClass(this.button, "opened"); - } - }, - - /** - * Update the fieldValue with the changed properties - */ - onChangeGroupOptions: function() { - - // Update the field value - this.updateFieldValue(); - - // Fire updatedEvt - this.fireUpdatedEvt(); - }, - - /** - * Update the fieldValue - */ - updateFieldValue: function() { - try { - // Close previous field - if (this.fieldValue) { - this.fieldValue.close(); - this.fieldValue.destroy(); - this.fieldValue = null; - this.fieldValueWrapper.innerHTML = ''; - } - - // Re-build the fieldValue - var fieldOptions = { type: this.getValue().type, inputParams: this.group.getValue() }; - fieldOptions.inputParams.parentEl = this.fieldValueWrapper; - this.fieldValue = inputEx(fieldOptions); - - // Refire the event when the fieldValue is updated - this.fieldValue.updatedEvt.subscribe(this.fireUpdatedEvt, this, true); - } - catch(ex) { - console.log("Error while updateFieldValue", ex.message); - } - }, - - - /** - * Set the value of the label, typeProperties and group - * @param {Object} value Type object configuration - * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) - */ - setValue: function(value, sendUpdatedEvt) { - - // Set type in property panel - this.typeSelect.setValue(value.type, false); - - // Rebuild the panel propertues - this.rebuildGroupOptions(); - - // Set the parameters value - this.group.setValue(value.inputParams, false); - - // Rebuild the fieldValue - this.updateFieldValue(); - - // Set field value - if (lang.isObject(value.inputParams) && typeof value.inputParams.value != "undefined") { - this.fieldValue.setValue(value.inputParams.value); - } - - if (sendUpdatedEvt !== false) { - // fire update event - this.fireUpdatedEvt(); - } - }, - - /** - * Return the config for a entry in an Group - * @return {Object} Type object configuration - */ - getValue: function() { - - function getDefaultValueForField(classObj, paramName) { - for (var i = 0; i < classObj.groupOptions.length; i++) { - var f = classObj.groupOptions[i]; - if (f.inputParams.name == paramName) return f.inputParams.value; - } - return undefined; - } - - ; - - var inputParams = this.group.getValue(); - var classObj = inputEx.getFieldClass(this.typeSelect.getValue()); - - for (var key in inputParams) { - if (inputParams.hasOwnProperty(key)) { - var value1 = getDefaultValueForField(classObj, key); - var value2 = inputParams[key]; - if (value1 == value2) { - inputParams[key] = undefined; - } - } - } - - - var obj = { - // The field type - type: this.typeSelect.getValue(), - - // The field parameters - inputParams: inputParams - }; - - // The value defined by the fieldValue - if (this.fieldValue) obj.inputParams.value = this.fieldValue.getValue(); - - return obj; - } - - }); - - - /** - * Register this class as "select" type - */ - inputEx.registerType("type", inputEx.TypeField); - - - /** - * group Options for each field - */ - inputEx.Field.groupOptions = [ - { type: "string", inputParams:{label: "Label", name: "label", value: ''} }, - { type: "string", inputParams:{label: "Name", name: "name", value: ''} }, - { type: "string", inputParams: {label: "Description",name: "description", value: ''} }, - { type: "boolean", inputParams: {label: "Required?",name: "required", value: false} }, - { type: "boolean", inputParams: {label: "Show messages",name: "showMsg", value: false} } - ]; - - inputEx.StringField.groupOptions = inputEx.StringField.superclass.constructor.groupOptions.concat([ - { type: 'string', inputParams: { label: 'Type invite', name: 'typeInvite', value: ''}}, - { type: 'integer', inputParams: { label: 'Size', name: 'size', value: 20}}, - { type: 'integer', inputParams: { label: 'Min. length', name: 'minLength', value: 0}} - ]); - - - if (inputEx.CheckBox) { - inputEx.CheckBox.groupOptions = inputEx.CheckBox.superclass.constructor.groupOptions.concat([ - {type: 'string', inputParams: {label: 'Right Label', name: 'rightLabel'} } - ]); - } - - if (inputEx.ColorField) { - inputEx.ColorField.groupOptions = inputEx.ColorField.superclass.constructor.groupOptions.concat([]); - } - - if (inputEx.DateField) { - inputEx.DateField.groupOptions = inputEx.DateField.superclass.constructor.groupOptions.concat([ - {type: 'select', inputParams: {label: 'Date format', name: 'dateFormat', selectOptions: ["m/d/Y", "d/m/Y"], selectValues: ["m/d/Y", "d/m/Y"] } } - ]); - } - - if (inputEx.CombineField) { - inputEx.CombineField.groupOptions = inputEx.CombineField.superclass.constructor.groupOptions.concat([ - { type: 'list', inputParams: {name: 'fields', label: 'Elements', required: true, elementType: {type: 'type'} } }, - { type: 'list', inputParams: {name: 'separators', label: 'Separators', required: true } } - ]); - } - - if (inputEx.PairField) { - inputEx.PairField.groupOptions = inputEx.Field.groupOptions.concat([ - { type: 'type', inputParams: {label: 'Left field', name: 'leftFieldOptions', required: true} }, - { type: 'type', inputParams: {label: 'Right field', name: 'rightFieldOptions', required: true} } - ]); - } - - if (inputEx.EmailField) { - inputEx.EmailField.groupOptions = ([]).concat(inputEx.StringField.groupOptions); - } - - if (inputEx.IPv4Field) { - inputEx.IPv4Field.groupOptions = []; - } - - if (inputEx.PasswordField) { - inputEx.PasswordField.groupOptions = inputEx.PasswordField.superclass.constructor.groupOptions.concat([ - {type: 'boolean', inputParams: {label: 'Strength indicator', name: 'strengthIndicator', value: false} }, - {type: 'boolean', inputParams: {label: 'CapsLock warning', name: 'capsLockWarning', value: false} } - ]); - } - - - if (inputEx.RadioField) { - inputEx.RadioField.groupOptions = inputEx.RadioField.superclass.constructor.groupOptions.concat([ - {type: 'list', inputParams: {label: 'Options', name: 'choices', elementType: {type: 'string'} } }, - {type: 'boolean', inputParams: {label: 'Allow custom value', name: 'allowAny'}, value: false } - ]); - } - - if (inputEx.RTEField) { - inputEx.RTEField.groupOptions = inputEx.RTEField.superclass.constructor.groupOptions.concat([]); - } - - if (inputEx.UrlField) { - inputEx.UrlField.groupOptions = inputEx.UrlField.superclass.constructor.groupOptions.concat([ - { type: 'boolean', inputParams: {label: 'Display favicon', name:'favicon', value: true}} - ]); - } - - if (inputEx.Textarea) { - inputEx.Textarea.groupOptions = inputEx.Textarea.superclass.constructor.groupOptions.concat([ - { type: 'integer', inputParams: {label: 'Rows', name: 'rows', value: 6} }, - { type: 'integer', inputParams: {label: 'Cols', name: 'cols', value: 23} } - ]); - } - - if (inputEx.SelectField) { - inputEx.SelectField.groupOptions = inputEx.SelectField.superclass.constructor.groupOptions.concat([ - { type: 'list', inputParams: {name: 'selectValues', label: 'Values', elementType: {type: 'string'}, required: true } }, - { type: 'list', inputParams: {name: 'selectOptions', label: 'Options', elementType: {type: 'string'} } } - ]); - } - - - if (inputEx.SliderField) { - inputEx.SliderField.groupOptions = inputEx.SliderField.superclass.constructor.groupOptions.concat([ - { type: 'integer', inputParams: {label: 'Min. value', name: 'minValue', value: 0} }, - { type: 'integer', inputParams: {label: 'Max. value', name: 'maxValue', value: 100} } - ]); - } - - if (inputEx.ListField && typeof inputEx.ListField.superclass.constructor.groupOptions != 'undefined') { - inputEx.ListField.groupOptions = inputEx.ListField.superclass.constructor.groupOptions.concat([ - { type: 'string', inputParams: {label: 'List label', name: 'listLabel', value: ''}}, - { type: 'type', inputParams: {label: 'List element type', required: true, name: 'elementType'} } - ]); - } - - - if (inputEx.IntegerField) { - inputEx.IntegerField.groupOptions = inputEx.IntegerField.superclass.constructor.groupOptions.concat([ - //{ type: 'integer', inputParams: {label: 'Radix', name: 'radix', value: 10}}, - {type: 'boolean', inputParams: {label: 'Accept negative', name: 'negative', value: false} } - ]); - } - - if (inputEx.NumberField) { - inputEx.NumberField.groupOptions = inputEx.NumberField.superclass.constructor.groupOptions.concat([]); - } - - if (inputEx.VectorField) { - inputEx.VectorField.groupOptions = inputEx.Field.groupOptions.concat([ - { type: 'integer', inputParams: { label: 'Dimension', name:'dimension', value: 2}}, - { type: 'integer', inputParams: { label: 'Size', name:'size', value: 3}}, - { type: 'list', inputParams: {name: 'separators', label: 'Separators', required: true } } - ]); - } - - inputEx.TypeField.groupOptions = inputEx.TypeField.superclass.constructor.groupOptions.concat([]); - - - inputEx.Group.groupOptions = [ - { type: "string", inputParams:{label: "Name", name: "name", value: ''} }, - { type: 'string', inputParams: { label: 'Legend', name:'legend'}}, - { type: 'boolean', inputParams: {label: 'Collapsible', name:'collapsible', value: false}}, - { type: 'boolean', inputParams: {label: 'Collapsed', name:'collapsed', value: false}}, - { type: 'list', inputParams:{ label: 'Fields', name: 'fields', elementType: {type: 'type' } } } - ]; - - - if (inputEx.Form) { - inputEx.Form.groupOptions = inputEx.Form.superclass.constructor.groupOptions.concat([ - {type: 'list', inputParams:{ - label: 'Buttons', - name: 'buttons', - elementType: { - type: 'group', - inputParams: { - fields: [ - { inputParams: {label: 'Label', name: 'value'}}, - { type: 'select', inputParams: {label: 'Type', name: 'type', selectValues:["button", "submit"]} } - ] - } - } - } - } - ]); - } - - - if (inputEx.InPlaceEdit) { - inputEx.InPlaceEdit.groupOptions = inputEx.InPlaceEdit.superclass.constructor.groupOptions.concat([ - { type:'type', inputParams: {label: 'Editor', name: 'editorField'} } - ]); - } - - -})(); \ No newline at end of file +(function () { + var inputEx = YAHOO.inputEx, + Event = YAHOO.util.Event, + Dom = YAHOO.util.Dom, + lang = YAHOO.lang; + + YAHOO.util.Event.onDOMReady(function () { + if (YAHOO.inputEx) { + /** + * @class TypeField is a field to create fields. The user can create any value he wants by switching fields. + * @extends inputEx.Field + * @constructor + * @param {Object} options Standard inputEx inputParams definition + */ + inputEx.TypeField = function (options) { + inputEx.TypeField.superclass.constructor.call(this, options); + + // Build the updateFieldValue + if (lang.isUndefined(this.options.value)) { + this.updateFieldValue(); + } + }; + + lang.extend( + inputEx.TypeField, + inputEx.Field, + /** + * @scope inputEx.TypeField.prototype + */ + { + /** + * Render the TypeField: create a button with a property panel that contains the field options + */ + renderComponent: function () { + // DIV element to wrap the Field "default value" + this.fieldValueWrapper = inputEx.cn("div", { + className: "inputEx-TypeField-FieldValueWrapper", + }); + this.fieldContainer.appendChild(this.fieldValueWrapper); + + // Render the popup that will contain the property form + this.propertyPanel = inputEx.cn( + "div", + { className: "inputEx-TypeField-PropertiesPanel" }, + { display: "none" }, + ); + + // The list of all inputEx declared types to be used in the "type" selector + var selectOptions = []; + for (var key in inputEx.typeClasses) { + if (inputEx.typeClasses.hasOwnProperty(key)) { + selectOptions.push(key); + } + } + this.typeSelect = new inputEx.SelectField({ + label: "Type", + selectOptions: selectOptions, + selectValues: selectOptions, + parentEl: this.propertyPanel, + }); + + // DIV element to wrap the options group + this.groupOptionsWrapper = inputEx.cn("div"); + this.propertyPanel.appendChild(this.groupOptionsWrapper); + + // Button to switch the panel + this.button = inputEx.cn("div", { + className: "inputEx-TypeField-EditButton", + }); + this.button.appendChild(this.propertyPanel); + this.fieldContainer.appendChild(this.button); + + // Build the groupOptions + this.rebuildGroupOptions(); + }, + + /** + * Adds 2 event listeners: + * - on the button to toggel the propertiesPanel + */ + initEvents: function () { + inputEx.TypeField.superclass.initEvents.call(this); + + // "Toggle the properties panel" button : + Event.addListener( + this.button, + "click", + this.onTogglePropertiesPanel, + this, + true, + ); + + // Prevent the button to receive a "click" event if the propertyPanel doesn't catch it + Event.addListener( + this.propertyPanel, + "click", + function (e) { + Event.stopPropagation(e); + }, + this, + true, + ); + + // Listen the "type" selector to update the groupOptions + // Hack the type selector to rebuild the group option + this.typeSelect.updatedEvt.subscribe( + this.rebuildGroupOptions, + this, + true, + ); + }, + + /** + * Regenerate the property form + */ + rebuildGroupOptions: function () { + try { + // Save the previous value: + var previousVal = null; + + // Close a previously created group + if (this.group) { + previousVal = this.group.getValue(); + this.group.close(); + this.group.destroy(); + this.groupOptionsWrapper.innerHTML = ""; + } + + // Get value is directly the class !! + var classO = inputEx.getFieldClass(this.typeSelect.getValue()); + + // Instanciate the group + var groupParams = { + fields: classO.groupOptions, + parentEl: this.groupOptionsWrapper, + }; + this.group = new inputEx.Group(groupParams); + + // Set the previous name/label + if (previousVal) { + this.group.setValue( + { + name: previousVal.name, + label: previousVal.label, + }, + false, + ); + } + + // Register the updated event + this.group.updatedEvt.subscribe( + this.onChangeGroupOptions, + this, + true, + ); + + // Create the value field + this.updateFieldValue(); + } catch (ex) { + if ( + YAHOO.lang.isObject(window["console"]) && + YAHOO.lang.isFunction(window["console"]["log"]) + ) { + console.log("inputEx.TypeField.rebuildGroupOptions: ", ex); + } + } + }, + + /** + * Toggle the property panel + */ + onTogglePropertiesPanel: function () { + if (this.propertyPanel.style.display == "none") { + this.propertyPanel.style.display = ""; + Dom.addClass(this.button, "opened"); + } else { + this.propertyPanel.style.display = "none"; + Dom.removeClass(this.button, "opened"); + } + }, + + /** + * Update the fieldValue with the changed properties + */ + onChangeGroupOptions: function () { + // Update the field value + this.updateFieldValue(); + + // Fire updatedEvt + this.fireUpdatedEvt(); + }, + + /** + * Update the fieldValue + */ + updateFieldValue: function () { + try { + // Close previous field + if (this.fieldValue) { + this.fieldValue.close(); + this.fieldValue.destroy(); + this.fieldValue = null; + this.fieldValueWrapper.innerHTML = ""; + } + + // Re-build the fieldValue + var fieldOptions = { + type: this.getValue().type, + inputParams: this.group.getValue(), + }; + fieldOptions.inputParams.parentEl = this.fieldValueWrapper; + this.fieldValue = inputEx(fieldOptions); + + // Refire the event when the fieldValue is updated + this.fieldValue.updatedEvt.subscribe( + this.fireUpdatedEvt, + this, + true, + ); + } catch (ex) { + console.log("Error while updateFieldValue", ex.message); + } + }, + + /** + * Set the value of the label, typeProperties and group + * @param {Object} value Type object configuration + * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) + */ + setValue: function (value, sendUpdatedEvt) { + // Set type in property panel + this.typeSelect.setValue(value.type, false); + + // Rebuild the panel propertues + this.rebuildGroupOptions(); + + // Set the parameters value + this.group.setValue(value.inputParams, false); + + // Rebuild the fieldValue + this.updateFieldValue(); + + // Set field value + if ( + lang.isObject(value.inputParams) && + typeof value.inputParams.value != "undefined" + ) { + this.fieldValue.setValue(value.inputParams.value); + } + + if (sendUpdatedEvt !== false) { + // fire update event + this.fireUpdatedEvt(); + } + }, + + /** + * Return the config for a entry in an Group + * @return {Object} Type object configuration + */ + getValue: function () { + function getDefaultValueForField(classObj, paramName) { + for (var i = 0; i < classObj.groupOptions.length; i++) { + var f = classObj.groupOptions[i]; + if (f.inputParams.name == paramName) return f.inputParams.value; + } + return undefined; + } + + var inputParams = this.group.getValue(); + var classObj = inputEx.getFieldClass(this.typeSelect.getValue()); + + for (var key in inputParams) { + if (inputParams.hasOwnProperty(key)) { + var value1 = getDefaultValueForField(classObj, key); + var value2 = inputParams[key]; + if (value1 == value2) { + inputParams[key] = undefined; + } + } + } + + var obj = { + // The field type + type: this.typeSelect.getValue(), + + // The field parameters + inputParams: inputParams, + }; + + // The value defined by the fieldValue + if (this.fieldValue) + obj.inputParams.value = this.fieldValue.getValue(); + + return obj; + }, + }, + ); + + /** + * Register this class as "select" type + */ + inputEx.registerType("type", inputEx.TypeField); + + /** + * group Options for each field + */ + inputEx.Field.groupOptions = [ + { + type: "string", + inputParams: { label: "Label", name: "label", value: "" }, + }, + { + type: "string", + inputParams: { label: "Name", name: "name", value: "" }, + }, + { + type: "string", + inputParams: { label: "Description", name: "description", value: "" }, + }, + { + type: "boolean", + inputParams: { label: "Required?", name: "required", value: false }, + }, + { + type: "boolean", + inputParams: { + label: "Show messages", + name: "showMsg", + value: false, + }, + }, + ]; + + inputEx.StringField.groupOptions = + inputEx.StringField.superclass.constructor.groupOptions.concat([ + { + type: "string", + inputParams: { + label: "Type invite", + name: "typeInvite", + value: "", + }, + }, + { + type: "integer", + inputParams: { label: "Size", name: "size", value: 20 }, + }, + { + type: "integer", + inputParams: { label: "Min. length", name: "minLength", value: 0 }, + }, + ]); + + if (inputEx.CheckBox) { + inputEx.CheckBox.groupOptions = + inputEx.CheckBox.superclass.constructor.groupOptions.concat([ + { + type: "string", + inputParams: { label: "Right Label", name: "rightLabel" }, + }, + ]); + } + + if (inputEx.ColorField) { + inputEx.ColorField.groupOptions = + inputEx.ColorField.superclass.constructor.groupOptions.concat([]); + } + + if (inputEx.DateField) { + inputEx.DateField.groupOptions = + inputEx.DateField.superclass.constructor.groupOptions.concat([ + { + type: "select", + inputParams: { + label: "Date format", + name: "dateFormat", + selectOptions: ["m/d/Y", "d/m/Y"], + selectValues: ["m/d/Y", "d/m/Y"], + }, + }, + ]); + } + + if (inputEx.CombineField) { + inputEx.CombineField.groupOptions = + inputEx.CombineField.superclass.constructor.groupOptions.concat([ + { + type: "list", + inputParams: { + name: "fields", + label: "Elements", + required: true, + elementType: { type: "type" }, + }, + }, + { + type: "list", + inputParams: { + name: "separators", + label: "Separators", + required: true, + }, + }, + ]); + } + + if (inputEx.PairField) { + inputEx.PairField.groupOptions = inputEx.Field.groupOptions.concat([ + { + type: "type", + inputParams: { + label: "Left field", + name: "leftFieldOptions", + required: true, + }, + }, + { + type: "type", + inputParams: { + label: "Right field", + name: "rightFieldOptions", + required: true, + }, + }, + ]); + } + + if (inputEx.EmailField) { + inputEx.EmailField.groupOptions = [].concat( + inputEx.StringField.groupOptions, + ); + } + + if (inputEx.IPv4Field) { + inputEx.IPv4Field.groupOptions = []; + } + + if (inputEx.PasswordField) { + inputEx.PasswordField.groupOptions = + inputEx.PasswordField.superclass.constructor.groupOptions.concat([ + { + type: "boolean", + inputParams: { + label: "Strength indicator", + name: "strengthIndicator", + value: false, + }, + }, + { + type: "boolean", + inputParams: { + label: "CapsLock warning", + name: "capsLockWarning", + value: false, + }, + }, + ]); + } + + if (inputEx.RadioField) { + inputEx.RadioField.groupOptions = + inputEx.RadioField.superclass.constructor.groupOptions.concat([ + { + type: "list", + inputParams: { + label: "Options", + name: "choices", + elementType: { type: "string" }, + }, + }, + { + type: "boolean", + inputParams: { label: "Allow custom value", name: "allowAny" }, + value: false, + }, + ]); + } + + if (inputEx.RTEField) { + inputEx.RTEField.groupOptions = + inputEx.RTEField.superclass.constructor.groupOptions.concat([]); + } + + if (inputEx.UrlField) { + inputEx.UrlField.groupOptions = + inputEx.UrlField.superclass.constructor.groupOptions.concat([ + { + type: "boolean", + inputParams: { + label: "Display favicon", + name: "favicon", + value: true, + }, + }, + ]); + } + + if (inputEx.Textarea) { + inputEx.Textarea.groupOptions = + inputEx.Textarea.superclass.constructor.groupOptions.concat([ + { + type: "integer", + inputParams: { label: "Rows", name: "rows", value: 6 }, + }, + { + type: "integer", + inputParams: { label: "Cols", name: "cols", value: 23 }, + }, + ]); + } + + if (inputEx.SelectField) { + inputEx.SelectField.groupOptions = + inputEx.SelectField.superclass.constructor.groupOptions.concat([ + { + type: "list", + inputParams: { + name: "selectValues", + label: "Values", + elementType: { type: "string" }, + required: true, + }, + }, + { + type: "list", + inputParams: { + name: "selectOptions", + label: "Options", + elementType: { type: "string" }, + }, + }, + ]); + } + + if (inputEx.SliderField) { + inputEx.SliderField.groupOptions = + inputEx.SliderField.superclass.constructor.groupOptions.concat([ + { + type: "integer", + inputParams: { label: "Min. value", name: "minValue", value: 0 }, + }, + { + type: "integer", + inputParams: { + label: "Max. value", + name: "maxValue", + value: 100, + }, + }, + ]); + } + + if ( + inputEx.ListField && + typeof inputEx.ListField.superclass.constructor.groupOptions != + "undefined" + ) { + inputEx.ListField.groupOptions = + inputEx.ListField.superclass.constructor.groupOptions.concat([ + { + type: "string", + inputParams: { + label: "List label", + name: "listLabel", + value: "", + }, + }, + { + type: "type", + inputParams: { + label: "List element type", + required: true, + name: "elementType", + }, + }, + ]); + } + + if (inputEx.IntegerField) { + inputEx.IntegerField.groupOptions = + inputEx.IntegerField.superclass.constructor.groupOptions.concat([ + //{ type: 'integer', inputParams: {label: 'Radix', name: 'radix', value: 10}}, + { + type: "boolean", + inputParams: { + label: "Accept negative", + name: "negative", + value: false, + }, + }, + ]); + } + + if (inputEx.NumberField) { + inputEx.NumberField.groupOptions = + inputEx.NumberField.superclass.constructor.groupOptions.concat([]); + } + + if (inputEx.VectorField) { + inputEx.VectorField.groupOptions = inputEx.Field.groupOptions.concat([ + { + type: "integer", + inputParams: { label: "Dimension", name: "dimension", value: 2 }, + }, + { + type: "integer", + inputParams: { label: "Size", name: "size", value: 3 }, + }, + { + type: "list", + inputParams: { + name: "separators", + label: "Separators", + required: true, + }, + }, + ]); + } + + inputEx.TypeField.groupOptions = + inputEx.TypeField.superclass.constructor.groupOptions.concat([]); + + inputEx.Group.groupOptions = [ + { + type: "string", + inputParams: { label: "Name", name: "name", value: "" }, + }, + { type: "string", inputParams: { label: "Legend", name: "legend" } }, + { + type: "boolean", + inputParams: { + label: "Collapsible", + name: "collapsible", + value: false, + }, + }, + { + type: "boolean", + inputParams: { label: "Collapsed", name: "collapsed", value: false }, + }, + { + type: "list", + inputParams: { + label: "Fields", + name: "fields", + elementType: { type: "type" }, + }, + }, + ]; + + if (inputEx.Form) { + inputEx.Form.groupOptions = + inputEx.Form.superclass.constructor.groupOptions.concat([ + { + type: "list", + inputParams: { + label: "Buttons", + name: "buttons", + elementType: { + type: "group", + inputParams: { + fields: [ + { inputParams: { label: "Label", name: "value" } }, + { + type: "select", + inputParams: { + label: "Type", + name: "type", + selectValues: ["button", "submit"], + }, + }, + ], + }, + }, + }, + }, + ]); + } + + if (inputEx.InPlaceEdit) { + inputEx.InPlaceEdit.groupOptions = + inputEx.InPlaceEdit.superclass.constructor.groupOptions.concat([ + { + type: "type", + inputParams: { label: "Editor", name: "editorField" }, + }, + ]); + } + } else { + console.log("InputEx ist nicht geladen"); + } + }); +})();