/** * Attach simpledialog with a form with some email inputs as its content to the selected set of elements. * * The `de_epages.shopmailtypeUiEditmailaddress()` attaches simpledialog with a form with some email inputs as its content to the selected set of elements. * * ### Examples * Attach shopmailtypeUiEditmailaddress to edit button passing along some options in data attribute. * * JavaScript: * * de_epages('#ep-edit-FROM').shopmailtypeUiEditmailaddress(); * * HTML: * * <input class="ep-width-70p Disabled-Edit" type="text" value=""TTester" <ttester@epages.com>" name="FROM" readonly="readonly"> * <span class="CommandLinkSmall" id="ep-edit-FROM" data-de_epages-shopmailtype-ui-editmailaddress="{"name" : "FROM", "data":{"FROM":[{"email":"ttester@epages.com","name":"TTester"}]},"multiple":false,"showSetDefault":true,"wording":{"setDefault":"Use This Address As Default Sender","email":"E-mail address","name" : "Name", "deleteMail" : "Delete", "addMail" : "Add Email Address","apply":"Apply"}}"><span><span class="WithIcon Edit">Edit</span></span></span> * * * @class jQuery.ui.shopmailtypeUiEditmailaddress * @extends jQuery.widget * * @uses jQuery.ui.widget * @uses de_epages * @uses ep.ui.simpledialog * @uses ep.ui.validate * @uses ep.ui.input * @since 6.15.0 */ /** * @cfg {Boolean} [multiple] Allow multiple e-mail addresses to be entered. */ /** * @cfg {String} [name] Name of the associated input. $('input[name="' + name + '"]') */ /** * @cfg {String} [showSetDefault] If true, there is a checkbox inside the dialog. When the checkbox is checked and apply is clicked, the entered e-mail address data is ajaxed over to the server. */ /** * @cfg {Object} wording Wording for the dialog. See example. */ /** * @cfg {Object} data E-mail data for the dialog. There has to be a key (named as the option name) which holds an array of objects with keys "email" and "name" */ /** * See `jQuery.ui.shopmailtypeUiEditmailaddress` for details. * * @param {Object} options A map of additional options pass to the method. * @param {Boolean} [multiple] Allow multiple e-mail addresses to be entered. * @param {String} [name] Name of the associated input. $('input[name="' + name + '"]') * @param {String} [showSetDefault] If true, there is a checkbox inside the dialog. When the checkbox is checked and apply is clicked, the entered e-mail address data is ajaxed over to the server. * @param {Object} wording Wording for the dialog. See example. * @param {Object} data E-mail data for the dialog. There has to be a key (named as the option name) which holds an array of objects with keys "email" and "name" * * @method shopmailtypeUiEditmailaddress * @member jQuery * * @since 6.15.0 */ /*jslint nomen: true*/ /*global define*/ define('de_epages/shopmailtype/ui/editmailaddress', [ 'jquery', 'ep', 'de_epages', '$tmpl!./editmailaddress', 'jquery/ui/widget', 'ep/ajax', 'ep/ui/simpledialog', 'ep/ui/validate', 'ep/ui/input' ], function ($, ep, de_epages, tmplEditMailadress) { 'use strict'; // Widget. $.widget('ui.shopmailtypeUiEditmailaddress', { options: { wording: {}, data: { 'dummy': [] }, name: 'dummy', multiple: true, showSetDefault: false }, _create: function () { var self = this, o = self.options; // Merge in options from data attribute. $.extend(true, o, $.parseJSON(self.element.attr('data-de_epages-shopmailtype-ui-editmailaddress') || "null")); // Set corresponding input element. if (!o.name) { return self.destroy(); } self.input = $('input[name="' + o.name + '"]'); // Render template. self.content = $('<form>').append(tmplEditMailadress(o.data[o.name].length ? o.data[o.name] : [{}], { wording: o.wording })); // Init delete event listeners. self.content.on('click', '.icon-remove', $.proxy(self, '_deleteMail')); // Init *uiValidate* and *uiInput*. $(self.content.find('input[type="email"]')).uiValidate({ type: 'email' }); $(self.content.find('input[type="text"]')).uiInput(); // Add footer. // i.e. *setDefault* checkbox or *addMail* button. self.footer = $('<footer>'); if (o.multiple) { $('<span style="padding-left:158px;" class="DisplayBlock PseudoLink CursorPointer">').text(o.wording.addMail).on('click', $.proxy(self, '_addMail')).appendTo(self.footer); } else { if (o.showSetDefault) { // Init and render template. if (!$.template['de_epages.shopmailtype.inc.setdefault']) { $.template('de_epages.shopmailtype.inc.setdefault', '<div class="InputRow">' + '<input type="checkbox" name="setdefault" id="setdefault"/>' + '<label class="InputLabellingXWide AlignLeft" for="setdefault">${$item.wording.setDefault}</label>' + '</div>'); } self.setDefault = $.tmpl('de_epages.shopmailtype.inc.setdefault', {}, { wording: o.wording }).appendTo(self.footer).find('input[type="checkbox"]').uiInput(); } } // Init *uiSimpleDialog*. self.element = $(self.element).uiSimpledialog({ content: [self.content[0], self.footer[0]], buttons: [{ text: o.wording.apply, callback: function () { if (self.content.find('input[type="email"]:invalid').length) { $(self.content.find('input[type="email"]:invalid')).trigger('validate.uiValidate'); } else { self._apply(); self._close(); } } }] }); }, _deleteMail: function (event) { event.stopPropagation(); // Otherwise *self.dialog._close()* is called, since // the click was fired by an element which at that point // is no longer part of the dialog. $(event.target).parent().next().remove(); $(event.target).parent().remove(); }, _addMail: function () { var self = this, o = self.options, inputrow = tmplEditMailadress({}, { wording: o.wording }); // Init *uiValidate* and *uiInput*. $(inputrow.find('input[type="email"]')).uiValidate({ type: 'email' }); $(inputrow.find('input[type="text"]')).uiInput(); inputrow.appendTo(self.content); }, _apply: function () { var self = this, o = self.options, value = '', inputs = self.content.find('input[type="text"], input[type="email"]'), names = inputs.filter('[type="text"]'), name = '', doajax = self.setDefault && self.setDefault.is(':checked'); // Let us add all those emails and names together. inputs.filter('[type="email"]').each(function (index, email) { email = email.value; name = names[index].value; // Set default Sender Address, if the checkbox is checked. if ((index === 0) && doajax) { ep.ajax({ type: 'POST', dataType: 'json', data: { 'DefaultEmail': email, 'DefaultName': name, 'ViewAction': 'JSONViewResponse', 'ChangeAction': 'JSONMakeDefaultSender', 'ObjectID': ep.config.objectId } }); } value = value + (value ? ';' : '') + name + (name ? ' <' : '') + email + (name ? '>' : ''); }); // Output email string into input. self.input.val(value); }, _close: function () { this.element.uiSimpledialog('close'); }, destroy: function () { var self = this; if (self.content) { self.content.remove(); } self.element.uiSimpledialog('destroy'); self._superApply(arguments); } }); return de_epages; });