Created
March 7, 2016 19:11
-
-
Save blefebvre/7b68d897869e47d226c7 to your computer and use it in GitHub Desktop.
Added support for full screen properties dialogs to multifield.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Original code written by Sreekanth Choudry Nalabotu | |
| * blog post: http://experience-aem.blogspot.com/2015/06/aem-61-touch-ui-composite-multifield-store-values-as-child-nodes.html | |
| */ | |
| (function () { | |
| var DATA_EAEM_NESTED = "data-eaem-nested"; | |
| var CFFW = ".coral-Form-fieldwrapper"; | |
| function setSelect($field, value){ | |
| var select = $field.closest(".coral-Select").data("select"); | |
| if(select){ | |
| select.setValue(value); | |
| } | |
| } | |
| function setCheckBox($field, value){ | |
| $field.prop( "checked", $field.attr("value") == value); | |
| } | |
| //reads multifield data from server, creates the nested composite multifields and fills them | |
| function addDataInFields() { | |
| function getMultiFieldNames($multifields){ | |
| var mNames = {}, mName; | |
| $multifields.each(function (i, multifield) { | |
| mName = $(multifield).children("[name$='@Delete']").attr("name"); | |
| if (typeof mName === "undefined") { | |
| return; | |
| } | |
| mName = mName.substring(0, mName.indexOf("@")); | |
| mName = mName.substring(2); | |
| mNames[mName] = $(multifield); | |
| }); | |
| return mNames; | |
| } | |
| function buildMultiField(data, $multifield, mName){ | |
| if(_.isEmpty(mName) || _.isEmpty(data)){ | |
| return; | |
| } | |
| _.each(data, function(value, key){ | |
| if(key == "jcr:primaryType"){ | |
| return; | |
| } | |
| $multifield.find(".js-coral-Multifield-add").click(); | |
| _.each(value, function(fValue, fKey){ | |
| if(fKey == "jcr:primaryType"){ | |
| return; | |
| } | |
| var $field = $multifield.find("[name='./" + fKey + "']").last(), | |
| type = $field.prop("type"); | |
| if(_.isEmpty($field)){ | |
| return; | |
| } | |
| //handle single selection dropdown | |
| if( type == "select-one"){ | |
| setSelect($field, fValue); | |
| }else if( type == "checkbox"){ | |
| setCheckBox($field, fValue); | |
| }else{ | |
| $field.val(fValue); | |
| } | |
| }); | |
| }); | |
| } | |
| function populateMultifields() { | |
| var $multifields = $("[" + DATA_EAEM_NESTED + "]"); | |
| if(_.isEmpty($multifields)){ | |
| return; | |
| } | |
| var mNames = getMultiFieldNames($multifields), | |
| $form = $(".cq-dialog"), | |
| actionUrl = $form.attr("action") + ".infinity.json"; | |
| $.ajax(actionUrl).done(postProcess); | |
| function postProcess(data){ | |
| _.each(mNames, function($multifield, mName){ | |
| buildMultiField(data[mName], $multifield, mName); | |
| }); | |
| } | |
| } | |
| // When the dialog is ready, call populateMultifields() | |
| $(document).on("dialog-ready", function() { | |
| populateMultifields(); | |
| }); | |
| // Attempt to populate multifields right away, in case the form is | |
| // opened full screen | |
| populateMultifields(); | |
| } | |
| //collect data from widgets in multifield and POST them to CRX | |
| function collectDataFromFields(){ | |
| function fillValue($form, fieldSetName, $field, counter){ | |
| var name = $field.attr("name"); | |
| if (!name) { | |
| return; | |
| } | |
| //strip ./ | |
| if (name.indexOf("./") == 0) { | |
| name = name.substring(2); | |
| } | |
| var value = $field.val(); | |
| if( $field.prop("type") == "checkbox" ){ | |
| value = $field.prop("checked") ? $field.val() : ""; | |
| } | |
| $('<input />').attr('type', 'hidden') | |
| .attr('name', fieldSetName + "/" + counter + "/" + name) | |
| .attr('value', value ) | |
| .appendTo($form); | |
| //remove the field, so that individual values are not POSTed | |
| $field.remove(); | |
| } | |
| $(document).on("click", ".cq-dialog-submit", function () { | |
| var $multifields = $("[" + DATA_EAEM_NESTED + "]"); | |
| if(_.isEmpty($multifields)){ | |
| return; | |
| } | |
| var $form = $(this).closest("form.foundation-form"), | |
| $fieldSets, $fields; | |
| $multifields.each(function(i, multifield){ | |
| $fieldSets = $(multifield).find("[class='coral-Form-fieldset']"); | |
| $fieldSets.each(function (counter, fieldSet) { | |
| $fields = $(fieldSet).children().children(CFFW); | |
| $fields.each(function (j, field) { | |
| fillValue($form, $(fieldSet).data("name"), $(field).find("[name]"), (counter + 1)); | |
| }); | |
| }); | |
| }); | |
| }); | |
| } | |
| $(document).ready(function () { | |
| addDataInFields(); | |
| collectDataFromFields(); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment