(function () {
var DATA_NESTED = "data-multifield-nested";
var CFFW = ".coral-Form-fieldwrapper";
//reads multifield data from server, creates the nested composite multifields and fills them
function addDataInFields() {
$(document).on("dialog-ready", function () {
var $fieldSets = $("[" + DATA_NESTED + "][class='coral-Form-fieldset']");
if (_.isEmpty($fieldSets)) {
return;
}
var mNames = [];
$fieldSets.each(function (i, fieldSet) {
mNames.push($(fieldSet).data("name"));
});
mNames = _.uniq(mNames);
var actionUrl = $fieldSets.closest("form.foundation-form").attr("action") + ".json";
$.ajax(actionUrl).done(postProcess);
function postProcess(data) {
_.each(mNames, function (mName) {
buildMultiField(data, mName);
});
}
//creates & fills the nested multifield with data
function fillNestedFields($multifield, valueArr) {
_.each(valueArr, function (record, index) {
$multifield.find(".js-coral-Multifield-add").click();
//a setTimeout may be needed
_.each(record, function (value, key) {
var $field = $($multifield.find("[name='./" + key + "']")[index]);
$field.val(value);
});
});
}
function buildMultiField(data, mName) {
if (_.isEmpty(mName)) {
return;
}
$fieldSets = $("[data-name='" + mName + "']");
mName = mName.substring(2);
var mValues = data[mName], $field, name;
if (_.isString(mValues)) {
mValues = [JSON.parse(mValues)];
}
_.each(mValues, function (record, i) {
if (!record) {
return;
}
if (_.isString(record)) {
record = JSON.parse(record);
}
_.each(record, function (rValue, rKey) {
$field = $($fieldSets[i]).find("[name='./" + rKey + "']");
if (_.isArray(rValue) && !_.isEmpty(rValue)) {
fillNestedFields($($fieldSets[i]).find("[data-init='multifield']"), rValue);
} else {
$field.val(rValue);
}
});
});
}
});
}
function fillValue($field, record) {
var name = $field.attr("name");
if (!name) {
return;
}
//strip ./
if (name.indexOf("./") === 0) {
name = name.substring(2);
}
record[name] = $field.val();
//remove the field, so that individual values are not POSTed
//$field.remove();
}
//for getting the nested multifield data as js objects
function getRecordFromMultiField($multifield) {
var $fieldSets = $multifield.find("[class='coral-Form-fieldset']");
var records = [], record, $fields, name;
$fieldSets.each(function (i, fieldSet) {
$fields = $(fieldSet).find("[name]");
record = {};
$fields.each(function (j, field) {
fillValue($(field), record);
});
if (!$.isEmptyObject(record)) {
records.push(record);
}
});
return records;
}
//collect data from widgets in multifield and POST them to CRX as JSON
function collectDataFromFields() {
$(document).on("click", ".cq-dialog-submit", function () {
var fieldd = $(".coral-Multifield");
var sizee = fieldd.attr("data-minlinksallowed");
if (sizee) {
var uii = $(window).adaptTo("foundation-ui");
var totalLinkCount = $(".coral-Multifield-list li").length;
if (totalLinkCount < sizee) {
uii.alert("Minimum " + sizee + " fields are required");
return false;
}
}
var $form = $(this).closest("form.foundation-form");
$form.find('input.input-mf-data').each(function(){
$(this).remove();
});
var $fieldSets = $("[" + DATA_NESTED + "][class='coral-Form-fieldset']");
var record, $fields, $field, name, $nestedMultiField;
$fieldSets.each(function (i, fieldSet) {
$fields = $(fieldSet).children().children(CFFW);
record = {};
$fields.each(function (j, field) {
$field = $(field);
//may be a nested multifield
$nestedMultiField = $field.find("[data-init='multifield']");
if ($nestedMultiField.length === 0) {
fillValue($field.find("[name]"), record);
} else {
name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name");
if (!name) {
return;
}
//strip ./
name = name.substring(2);
record[name] = getRecordFromMultiField($nestedMultiField);
}
});
if ($.isEmptyObject(record)) {
return;
}
//add the record JSON in a hidden field as string
$('<input />').attr('type', 'hidden')
.attr('class', 'input-mf-data')
.attr('name', $(fieldSet).data("name"))
.attr('value', JSON.stringify(record))
.appendTo($form);
});
return true;
});
}
$(document).ready(function () {
addDataInFields();
collectDataFromFields();
});
$(document).on("dialog-ready", function () {
$(".js-coral-Multifield-add").click(function () {
var field = $(this).parent();
var size = field.attr("data-limit");
if (size) {
var ui = $(window).adaptTo("foundation-ui");
var totalLinkCount = $(this).prev('ol').children('li').length;
if (totalLinkCount >= size) {
ui.alert("Warning", "Only " + totalLinkCount + " fields are allowed!", "notice");
return false;
}
}
});
});
//extend otb multifield for adjusting event propagation when there are nested multifields
//for working around the nested multifield add and reorder
CUI.MultifieldProject = 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.MultifieldProject);
})();
(function () {
var DATA_NESTED = "data-multifield-nested";
var CFFW = ".coral-Form-fieldwrapper";
//reads multifield data from server, creates the nested composite multifields and fills them
function addDataInFields() {
$(document).on("dialog-ready", function () {
var $fieldSets = $("[" + DATA_NESTED + "][class='coral-Form-fieldset']");
if (_.isEmpty($fieldSets)) {
return;
}
var mNames = [];
$fieldSets.each(function (i, fieldSet) {
mNames.push($(fieldSet).data("name"));
});
mNames = _.uniq(mNames);
var actionUrl = $fieldSets.closest("form.foundation-form").attr("action") + ".json";
$.ajax(actionUrl).done(postProcess);
function postProcess(data) {
_.each(mNames, function (mName) {
buildMultiField(data, mName);
});
}
//creates & fills the nested multifield with data
function fillNestedFields($multifield, valueArr) {
_.each(valueArr, function (record, index) {
$multifield.find(".js-coral-Multifield-add").click();
//a setTimeout may be needed
_.each(record, function (value, key) {
var $field = $($multifield.find("[name='./" + key + "']")[index]);
$field.val(value);
});
});
}
function buildMultiField(data, mName) {
if (_.isEmpty(mName)) {
return;
}
$fieldSets = $("[data-name='" + mName + "']");
mName = mName.substring(2);
var mValues = data[mName], $field, name;
if (_.isString(mValues)) {
mValues = [JSON.parse(mValues)];
}
_.each(mValues, function (record, i) {
if (!record) {
return;
}
if (_.isString(record)) {
record = JSON.parse(record);
}
_.each(record, function (rValue, rKey) {
$field = $($fieldSets[i]).find("[name='./" + rKey + "']");
if (_.isArray(rValue) && !_.isEmpty(rValue)) {
fillNestedFields($($fieldSets[i]).find("[data-init='multifield']"), rValue);
} else {
$field.val(rValue);
}
});
});
}
});
}
function fillValue($field, record) {
var name = $field.attr("name");
if (!name) {
return;
}
//strip ./
if (name.indexOf("./") === 0) {
name = name.substring(2);
}
record[name] = $field.val();
//remove the field, so that individual values are not POSTed
//$field.remove();
}
//for getting the nested multifield data as js objects
function getRecordFromMultiField($multifield) {
var $fieldSets = $multifield.find("[class='coral-Form-fieldset']");
var records = [], record, $fields, name;
$fieldSets.each(function (i, fieldSet) {
$fields = $(fieldSet).find("[name]");
record = {};
$fields.each(function (j, field) {
fillValue($(field), record);
});
if (!$.isEmptyObject(record)) {
records.push(record);
}
});
return records;
}
//collect data from widgets in multifield and POST them to CRX as JSON
function collectDataFromFields() {
$(document).on("click", ".cq-dialog-submit", function () {
var fieldd = $(".coral-Multifield");
var sizee = fieldd.attr("data-minlinksallowed");
if (sizee) {
var uii = $(window).adaptTo("foundation-ui");
var totalLinkCount = $(".coral-Multifield-list li").length;
if (totalLinkCount < sizee) {
uii.alert("Minimum " + sizee + " fields are required");
return false;
}
}
var $form = $(this).closest("form.foundation-form");
$form.find('input.input-mf-data').each(function(){
$(this).remove();
});
var $fieldSets = $("[" + DATA_NESTED + "][class='coral-Form-fieldset']");
var record, $fields, $field, name, $nestedMultiField;
$fieldSets.each(function (i, fieldSet) {
$fields = $(fieldSet).children().children(CFFW);
record = {};
$fields.each(function (j, field) {
$field = $(field);
//may be a nested multifield
$nestedMultiField = $field.find("[data-init='multifield']");
if ($nestedMultiField.length === 0) {
fillValue($field.find("[name]"), record);
} else {
name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name");
if (!name) {
return;
}
//strip ./
name = name.substring(2);
record[name] = getRecordFromMultiField($nestedMultiField);
}
});
if ($.isEmptyObject(record)) {
return;
}
//add the record JSON in a hidden field as string
$('<input />').attr('type', 'hidden')
.attr('class', 'input-mf-data')
.attr('name', $(fieldSet).data("name"))
.attr('value', JSON.stringify(record))
.appendTo($form);
});
return true;
});
}
$(document).ready(function () {
addDataInFields();
collectDataFromFields();
});
$(document).on("dialog-ready", function () {
$(".js-coral-Multifield-add").click(function () {
var field = $(this).parent();
var size = field.attr("data-limit");
if (size) {
var ui = $(window).adaptTo("foundation-ui");
var totalLinkCount = $(this).prev('ol').children('li').length;
if (totalLinkCount >= size) {
ui.alert("Warning", "Only " + totalLinkCount + " fields are allowed!", "notice");
return false;
}
}
});
});
//extend otb multifield for adjusting event propagation when there are nested multifields
//for working around the nested multifield add and reorder
CUI.MultifieldProject = 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.MultifieldProject);
})();
