/** * Attach placeholderdialog with table of placeholder TLEs to be entered inside the associated input to the selected set of elements. * * The `de_epages.shopmailtypeUiPlaceholderdialog()` attaches placeholderdialog with table of placeholder TLEs to be entered inside the associated input to the selected set of elements. * * ### Examples * Attach shopmailtypeUiPlaceholderdialog to span. * * JavaScript: * * de_epages('#ep-insertPlaceHolder').shopmailtypeUiPlaceholderdialog(); * * HTML: * * <span id="ep-insertPlaceHolder" class="PseudoLink CursorPointer" data-de_epages-shopmailtype-ui-placeholderdialog='{"name" : "Subject","data" : {"placeholder" : [{"code":"#Code0","description":"Description0"},{"code":"#Code1","description":"Description1"},{"code":"#Code2","description":"Description2"}]}, "wording" : {"infoText" : "PlaceholderInfoText", "placeholder" : "Placeholder"}}'><span class="ep-sprite ico_s_paragraph"></span>InsertPlaceholder</span> * <input type="text" value="My subject is so pretty" name="Subject"/> * * * @class jQuery.ui.shopmailtypeUiPlaceholderdialog * @extends jQuery.widget * * @uses jQuery.ui.widget * @uses jQuery.datatables * @uses jQuery.tmpl * @uses de_epages * @uses ep.ui.simpledialog * @since 6.15.0 */ /** * @cfg {String} [name] Name of the associated input. $('input[name="' + name + '"]').first(); */ /** * @cfg {Object} data Object with placeholder data array at key "placeholder". A placeholder is an object with keys "code" and "description". */ /** * See `jQuery.ui.shopmailtypeUiPlaceholderdialog` for details. * * @param {Object} options A map of additional options pass to the method. * @param {String} [name] Name of the associated input. $('input[name="' + name + '"]').first(); * @param {Object} data Object with placeholder data array at key "placeholder". A placeholder is an object with keys "code" and "description". * * @method shopmailtypeUiPlaceholderdialog * @member jQuery * * @since 6.15.0 */ /* * @copyright © Copyright 2006-2010, epages GmbH, All Rights Reserved. * * @module de_epages/shopmailtype/ui/placeholderdialog * * @revision $Revision: 1.10 $ */ define("de_epages/shopmailtype/ui/placeholderdialog", [ "jquery", "ep", "de_epages", "$tmpl!./placeholderdialog", "jquery/ui/widget", "jquery/datatables", "ep/ui/simpledialog" ], function ($, ep, de_epages, tmplPlaceholderdialog) { // Widget. $.widget('ui.shopmailtypeUiPlaceholderdialog', { options : { data : { placeholder : [] }, name : 'Subject' }, _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-placeholderdialog'))); // Render template. self.content = tmplPlaceholderdialog(o); self.table = $.tmplItem(self.content).elements.table; // Set table *data* and *input* name. self._setOptions({ data : o.data, name : o.name }); // Add tr click listener. We pass the widget as an attribute of // the data attribute of the event object to the listener, since // we need *this* to be the *tr* element firing the click. self.table.on('click', 'tbody tr', {self : self}, self._onTrClick); // Init dialog. self.element = ep(self.element).uiSimpledialog({ content : self.content }); }, _setOption : function (key, value) { var self = this, o = self.options; if (key === 'data' && value.placeholder) { // Init *tableData*. var i, tableData = { aaData : [], aoColumns : [ {sTitle : o.wording.placeholder} ], bSort : false }; for (i = 0; i < value.placeholder.length; i++) { var _placeholder = value.placeholder[i]; tableData.aaData[i] = [_placeholder.description, _placeholder.code]; } // Clear table. $.fn.DataTable.fnIsDataTable(self.table[0]) && self.table.dataTable().fnDestroy(); // Init table. self.table.dataTable(tableData); } else { if (key === 'name') { // Set input. self.input = $('input[name="' + value + '"]').first(); } } self._superApply(arguments); }, _close : function () { this.element.uiSimpledialog('close'); }, _onTrClick : function (event) { // The instance of the widget is *self* (as per the usual). // *this* is the *tr* element firing the click event. var self = event.data.self, o = self.options, placeholder = o.data.placeholder[self.table.fnGetPosition(this)].code, beginning = self.input.val().substring(0, self.input.prop('selectionStart')), end = self.input.val().substring(self.input.prop('selectionEnd')), newPosition = self.input.prop('selectionStart') + placeholder.length; // Insert placeholder into *input*. self.input .val(beginning + placeholder + end) .prop({ 'selectionStart' : newPosition, 'selectionEnd' : newPosition }) .focus(); // Close the dialog. self._close(); }, destroy : function () { var self = this; self.table && $.fn.DataTable.fnIsDataTable(self.table) && self.table.dataTable().fnDestroy(); self.content && self.content.remove(); self.element.data('uiUiSimpledialog') && self.element.uiSimpledialog('destroy'); self._superApply(arguments); } }); return de_epages; });