Hi Vipin,
The suggestions, which you ave provided are already available in touchui-widgets-init.js file in acs-commons-4.2.0.
For the reference, I am adding the touchui-widgets-init.js file below. Could you please let me know, if there are any other changes to be made apart from this. vipin
/*
* #%L
* ACS AEM Commons Package
* %%
* Copyright (C) 2013 Adobe
* %%
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* #L%
*
* A sample component dialog using the Touch UI Multi Field
* Note the usage of empty valued acs-commons-nested property
*/
(function () {
"use strict";
if (typeof window.ACS === "undefined") {
window.ACS = {};
}
if (typeof window.ACS.TouchUI === "undefined") {
window.ACS.TouchUI = {};
}
ACS.TouchUI.Widget = new Class({
toString: 'ACS TouchUI Widget Base Class',
ACS_COMMONS_NESTED: "acs-commons-nested",
DATA_ACS_COMMONS_NESTED: "data-acs-commons-nested",
CFFW: ".coral-Form-fieldwrapper",
JSON_STORE: "JSON_STORE",
NODE_STORE: "NODE_STORE",
SELECTOR_FORM_CQ_DIALOG: "form.cq-dialog",
SELECTOR_FORM_SITES_PROPERTIES: "form#cq-sites-properties-form",
SELECTOR_FORM_CREATE_PAGE: "form.cq-siteadmin-admin-createpage",
SELECTOR_FORM_PROPERTIES_PAGE: "form#propertiesform",
nestedPluck: function(object, key) {
if (!_.isObject(object) || _.isEmpty(object) || _.isEmpty(key)) {
return [];
}
if (key.indexOf("/") === -1) {
return object[key];
}
var nestedKeys = _.reject(key.split("/"), function(token) {
return token.trim() === "";
}), nestedObjectOrValue = object;
_.each(nestedKeys, function(nKey) {
if(_.isUndefined(nestedObjectOrValue)){
return;
}
if(_.isUndefined(nestedObjectOrValue[nKey])){
nestedObjectOrValue = undefined;
return;
}
nestedObjectOrValue = nestedObjectOrValue[nKey];
});
return nestedObjectOrValue;
},
isSelectOne: function ($field) {
return !_.isEmpty($field) && ($field.prop("type") === "select-one");
},
setSelectOne: function ($field, value) {
var select = $field.closest(".coral-Select").data("select");
if(!select){
var dataInit = $field.closest('.coral-Select').data('init');
if(dataInit === 'graphiciconselect'){
$field.val(value);
$field.closest('.coral-Form-field').find('.selected-icon i').removeClass().addClass(value);
}
}else{
select.setValue(value);
}
},
isSelectMultiple: function ($field) {
return !_.isEmpty($field) && ($field.prop("type") === "select-multiple");
},
setSelectMultiple: function ($field, value) {
var select = $field.closest(".coral-Select").data("select");
if (select){
select.setValue(value);
}
},
isCoralSelect: function ($field) {
return !_.isEmpty($field) && ($field.parent().prop('tagName') === "CORAL-SELECT");
},
setCoralSelect: function ($field, value) {
$field.parent().get(0).set("value",value);
},
// To support coral 3 UI checkbox, add property granite:class=coral-Form-fieldwrapper to the field in dialog.
isCheckbox: function ($field) {
return !_.isEmpty($field) && ($field.prop("type") === "checkbox" || $field.hasClass("coral-Checkbox"));
},
setCheckBox: function ($field, value) {
if($field.parent().hasClass("coral-Checkbox")){
$field.parent().prop("checked", $field.attr("value") === value);
}else {
$field.prop("checked", $field.attr("value") === value);
}
},
isDateField: function ($field) {
return !_.isEmpty($field) && $field.prop("type") === "hidden" && ($field.parent().hasClass("coral-DatePicker") || $field.parent().prop('tagName') === "CORAL-DATEPICKER");
},
setDateField: function ($field, value) {
var date = moment(new Date(value));
var $parent = $field.parent();
if (date.isValid()) {
$parent.find("input.coral-Textfield").val(date.format($parent.attr("data-displayed-format")));
$field.val(date.format($parent.attr("data-stored-format")));
if ($parent.prop('tagName') === "CORAL-DATEPICKER") {
$field.val(date.format($parent.attr("displayformat")));
$parent.get(0).set("value",date.format($parent.attr("valueformat")));
}
}
else {
$parent.find("input.coral-Textfield").val(value);
$field.val(value);
$parent.get(0).set("value",value);
}
},
isRichTextField: function ($field) {
return !_.isEmpty($field) && $field.prop("type") === "hidden" && !$field.hasClass("coral-RichText-isRichTextFlag") && $field.parent().hasClass("richtext-container");
},
setRichTextField: function ($field, value) {
$field.val(value);
$field.parent().find(".coral-RichText-editable.coral-RichText").empty().append(value);
},
isAutocomplete: function($field) {
return !_.isEmpty($field) && ($field.find("ul").hasClass("js-coral-Autocomplete-tagList") || $field.closest("ul").hasClass("js-coral-Autocomplete-tagList"));
},
isFoundationAutocomplete: function($field) {
return !_.isEmpty($field) && ($field.parents('foundation-autocomplete').length > 0);
},
setAutocomplete: function($field,value) {
var cmf = this;
var tagsArray = value.split(',');
var $tagList = CUI.Widget.fromElement(CUI.TagList,$field);
if ($tagList) {
$(tagsArray).each(function (i, item) {
var selectedItem = $field.closest(cmf.CFFW).find("li[data-value='" + item + "']");
$tagList._appendItem({"display": selectedItem.text(), "value": item});
});
}
},
setFoundationAutocomplete: function($field,value) {
$field.parents('foundation-autocomplete').val(value);
},
isTagsField: function ($field) {
return !_.isEmpty($field) && ($field.hasClass("js-TagsPickerField-tagList") || $field.closest("ul").hasClass("js-TagsPickerField-tagList"));
},
getTagsFieldName: function ($fieldWrapper) {
return $fieldWrapper.children(".js-cq-TagsPickerField").data("property-path").substr(2);
},
setTagsField: function($field, value) {
var cmf = this;
var tagsArray = value.split(',');
var $tagList = CUI.Widget.fromElement(CUI.TagList,$field);
var cuiTagList = $field.data("tagList");
if ($tagList) {
$(tagsArray).each(function (i, item) {
var tagPath = "/etc/tags/" + item.replace(":", "/");
$.get(tagPath + ".tag.json").done(function(data){
cuiTagList._appendItem( { value: data.tagID, display: data.titlePath} );
});
});
}
},
isColorField: function ($field) {
return $field.attr("is") === "coral-textfield" && $field.hasClass("coral-ColorInput-input");
},
setColorField: function ($field, value) {
if (value && value.trim() !== "") {
value = value.trim();
$field.val(value);
//set value
$field.parent().attr("value", value);
//set background color
$field.parent().removeClass("coral-ColorInput--novalue");
var hexToRGB = CUI.util.color.HexToRGB(value);
var rgbColor = "background-color: rgb(" + hexToRGB.r + ", " + hexToRGB.g + ", " + hexToRGB.b + ");";
$field.parent().find("div[role='presentation'] button[is='coral-button']").attr("style", rgbColor);
$field.parent().find("coral-overlay button[is='coral-button']").attr("style", rgbColor);
//set selected
var colorItem = $field.parent().find("coral-colorinput-item[value='#" + value.replace('#', '').toUpperCase() + "']");
colorItem.attr("aria-selected", true);
colorItem.attr("selected", "");
colorItem.addClass("is-selected");
}
},
setWidgetValue: function ($field, value) {
if (_.isEmpty($field)) {
return;
}
if (this.isSelectOne($field)) {
this.setSelectOne($field, value);
} else if (this.isSelectMultiple($field)) {
this.setSelectMultiple($field, value);
} else if (this.isCheckbox($field)) {
this.setCheckBox($field, value);
} else if (this.isRichTextField($field)) {
this.setRichTextField($field, value);
} else if (this.isDateField($field)) {
this.setDateField($field, value);
} else if (this.isAutocomplete($field)) {
this.setAutocomplete($field,value);
} else if (this.isTagsField($field)) {
this.setTagsField($field,value);
} else if (this.isFoundationAutocomplete($field)) {
this.setFoundationAutocomplete($field,value);
} else if (this.isCoralSelect($field)) {
this.setCoralSelect($field, value);
} else if (this.isColorField($field)) {
this.setColorField($field, value);
} else {
$field.val(value);
}
},
isJsonStore: function(name){
return (_.isEmpty(name) || name === this.JSON_STORE);
},
isNodeStore: function(name){
return (name === this.NODE_STORE);
},
addCompositeMultifieldRemoveListener: function($multifield){
var cmf = this;
$multifield.find(".js-coral-Multifield-remove").click(function(){
setTimeout(function () {
cmf.addCompositeMultifieldValidator();
}, 500);
});
},
addCompositeMultifieldValidator: function(){
var fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' " +
"data-init='quicktip' data-quicktip-type='error' />"),
cmf = this,
selector = "[" + cmf.DATA_ACS_COMMONS_NESTED + "] >* input, [" + cmf.DATA_ACS_COMMONS_NESTED + "] >* textarea";
$.validator.register({
selector: selector,
validate: validate,
show: show,
clear: clear
});
function validate($el){
var $multifield = $el.closest(".coral-Multifield"),
$inputs = $multifield.find("input, textarea"),
$input, isRequired, message = null;
$inputs.each(function(index, input){
$input = $(input);
isRequired = $input.attr("required") || ($input.attr("aria-required") === "true");
if (isRequired && $input.val().length === 0) {
$input.addClass("is-invalid");
message = "Please fill the required multifield items";
}else{
$input.removeClass("is-invalid");
}
});
if(message){
$(".cq-dialog-submit").attr("disabled", "disabled");
}else{
$(".cq-dialog-submit").removeAttr("disabled");
}
return message;
}
function show($el, message){
/* jshint validthis: true */
clear($el);
var $multifield = $el.closest(".coral-Multifield"),
arrow = $el.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";
fieldErrorEl.clone()
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", message)
.insertAfter($multifield);
}
function clear($el){
var $multifield = $el.closest(".coral-Multifield");
$multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove();
}
validate($($(selector)[0]));
},
isPropertiesPage: function($document) {
return $document.find(this.SELECTOR_FORM_SITES_PROPERTIES).length === 1;
},
isPropertiesFormPage: function($document) {
return $document.find(this.SELECTOR_FORM_PROPERTIES_PAGE).length === 1;
},
isCreatePageWizard: function($document) {
return $document.find(this.SELECTOR_FORM_CREATE_PAGE).length == 1;
},
getPropertiesFormSelector: function() {
return this.SELECTOR_FORM_CQ_DIALOG + "," + this.SELECTOR_FORM_SITES_PROPERTIES + "," +
this.SELECTOR_FORM_CREATE_PAGE + "," + this.SELECTOR_FORM_PROPERTIES_PAGE;
},
});
if (!ACS.TouchUI.extendedMultfield) {
//extend otb multifield for adjusting event propagation when there are nested multifields
//for working around the nested multifield add and reorder
CUI.Multifield = new Class({
toString: "Multifield",
extend: CUI.Multifield,
construct: function (options) {
this.script = this.$element.find(".js-coral-Multifield-input-template:last");
},
_addListeners: function () {
this.superClass._addListeners.call(this);
//otb coral event handler is added on selector .js-coral-Multifield-add
//any nested multifield add click events are propagated to the parent multifield;
//to prevent adding a new composite field in both nested multifield and parent multifield
//when user clicks on add of nested multifield, stop the event propagation to parent multifield
this.$element.on("click", ".js-coral-Multifield-add", function (e) {
e.stopPropagation();
});
this.$element.on("drop", function (e) {
e.stopPropagation();
});
}
});
CUI.Widget.registry.register("multifield", CUI.Multifield);
ACS.TouchUI.extendedMultfield = true;
}
}());
