/*globals define, window*/ /*jslint nomen: true*/ define('de_epages/shop/linkpicker/linktextview', [ 'jquery', 'backbone', 'ep', '$tmpl!de_epages/shop/linkpicker/linktextview', '$dict!../dictionary', 'ep/ui/input' /** * External url view * @param {Function} $ jQuery * @param {Function} Backbone Backbone * @param {Function} ep Used for accessing ep.config.storeFrontUrl * @param {Function} template Template for rendering the link text view * @param {Function} dict Dictionary * @return {Backbone View} Link text view */ ], function ($, Backbone, ep, template, dict) { 'use strict'; return Backbone.View.extend({ /** * Tag used for $el * @type {String} */ tagName: 'div', /** * Rendered template with translations * @type {String} */ template: template({}).dictParse(dict, true), /** * Events the view listens to * @type {Object} */ events: { 'change input#ep-linkpicker-linkText': '_publishLinkText', 'change input#ep-linkpicker-linkTargetBlank': '_publishTargetOption', 'click .ep-linkpicker-linkPreview': '_openPreview' }, /** * Append the template and process inputs * @return {Backbone view} */ render: function () { var template = this.template; template .find('span, a') .dictParseAttr(dict, 'title') .end() .find(':input') .uiInput(); $.extend(this, template.tmplItem('elements')); this.$el.append(template); return this; }, /** * Gets the link text from the input field * @return {String} link text */ getLinkText: function () { return this.linkText.val(); }, /** * Sets the link text of the input field * @param {String} _text [link text] */ setLinkText: function (_text) { this.linkText.val(_text); }, /** * Sets the link url which is the title of all preview links * (little globe and the 'Preview' itself) since this is used by '_openPreview' to determine the location * @param {String} _url [Url to be set] */ setLinkUrl: function (_url) { // set this.linkPreview.each(function () { $(this).attr('title', _url); }); }, /** * Sets the link target * @param {Boolean} _is_linkTargetBlank [true if link should be opened in a new window, false otherwise] */ setLinkTarget: function (_is_linkTargetBlank) { this.linkTargetBlank.attr('checked', _is_linkTargetBlank); }, /** * Open link in preview window, check if url exists and add protocol / server address or storefront url if necessary * @param {Event} _event [Event that was fired] * @private */ _openPreview: function (_event) { _event.preventDefault(); _event.stopPropagation(); var url = $(_event.target).attr('title'); if (url !== '' && url !== 'http://') { if (url.indexOf("?") !== 0) { // no relative url? if (url.indexOf("/") !== 0) { // no file? // What Benni was thinking: // if the url contains no '//' (protocol), url.split returns the original string (length ===1) // so we need to add a protocol in front of the url (hilarious check, isn't it) if (url.split('//').length === 1) { url = "http://" + url; } } else { //file url = ep.config.protocolAndServer + url; } } else { url = ep.config.storeFrontUrl + url; } window.open(url, 'LinkpickerPreview'); this.trigger('previewopened', url); } }, /** * Trigger the 'linktextchanged' event and publish linktext * @param {Event} _event [Event that was fired] * @private */ _publishLinkText: function (_event) { this.trigger('linktextchanged', $(_event.target).val()); }, /** * Trigger the 'targetoptionchanged' event and publish if link should be opened in new window * @param {Event} _event [Event that was fired] * @private */ _publishTargetOption: function (_event) { this.trigger('targetoptionchanged', $(_event.target).is(':checked')); } }); });