/*jslint nomen: true*/ /*globals define*/ /** * @class de_epages.presentation.tray.contentselectedview * @author Copyright 2006-2013, epages GmbH, All Rights Reserved * * The tray's content selected view displays all elements which are selected in the dialog * * ### Example * HTML: * <div class="container"></div> * * JavaScript: * var view = new ContentSelectedView(); * view.render().$el.appendTo('.container'); * * @uses jQuery.ui.accordion * @uses Backbone * * @return {Object} ContentSelectedView */ define('de_epages/presentation/tray/selected-view', [ 'jquery/ui/accordion', 'backbone', 'underscore', '$tmpl!./selected-view', '$dict!../dictionary', 'ep/ui/input' ], function ($, Backbone, _, template, dict) { 'use strict'; // used to write the type with the correct language tag to the model var translationMap = { 'products': 'Products', 'categories': 'Categories', 'shippingMethods': 'ShippingMethods', 'paymentMethods': 'PaymentMethods', 'customers': 'Customers', 'users': 'Users' }; return Backbone.View.extend({ tagname: 'div', template: template, className: 'Content', events: { 'change input': '_publishRememberSelection' }, /** * Render template and display all selected objects * * @since 6.17.0 * @chainable * @return {Object} ContentSelectedView */ render: function () { var self = this, groupedData = [], has_dataAvailable = false, renderedTemplate = ''; // Group selected elements by type groupedData = self.collection.groupBy(function (model) { // returns e.g. // dict.translate("Products") return dict.translate(translationMap[model.get('type')]); }); // Check if our grouped data contains at least one property has_dataAvailable = _.keys(groupedData).length > 0 ? true : false; renderedTemplate = self.template({ data: groupedData, show_rememberSelection: has_dataAvailable }).dictParse(dict, true); $.extend(self, $.tmplItem(renderedTemplate).elements); self.$el.html(renderedTemplate.children()); if (has_dataAvailable) { self.rememberSelection.uiInput(); } self.$('.accordion-container').accordion({ heightStyle: "content", collapsible: true }); self.$('.ico_s_delete').on('click', $.proxy(self.removeItem, self)); return self; }, /** * Removes an item from the collection and re-renders the view * * @since 6.17.0 * @param {Event} event onClick ebent that is fired */ removeItem: function (event) { var self = this, id = $(event.target).data('id'), rememberSelection = self.rememberSelection.prop('checked') ? true : false; self.collection.remove(self.collection.findWhere({ 'ObjectID': id })); self.render(); if (rememberSelection) { self.rememberSelection.prop('checked', true); } }, /* * [ description] * * @since 6.17.0 * @param {Event} event fired whenever thecorresponding checkbox is clicked */ _publishRememberSelection: function (event) { this.trigger('rememberSelectionChanged', $(event.target).prop('checked')); } }); });