src/editor/plugins/core/img/imgElement.js

   1 define(function(require) {
   2
   3 'use strict';
   4 /* globals gettext */
   5
   6
   7 var $ = require('libs/jquery'),
   8     _ = require('libs/underscore'),
   9     genericElement = require('modules/documentCanvas/canvas/genericElement'),
  10     Dialog = require('views/dialog/dialog'),
  11     boxTemplate = require('libs/text!./box.html'),
  12     attachments = require('views/attachments/attachments'),
  13     linkElement = Object.create(genericElement);
  14
  15
  16 _.extend(linkElement, {
  17     init: function() {
  18         genericElement.init.call(this);
  19         _.bindAll(this, 'changeLink', 'deleteLink');
  20
  21         var linkText = this.wlxmlNode.getAttr('src') || '',
  22             linkUrl = this.getUrl(linkText);
  23
  24         this.refreshLink(linkUrl);
  25
  26         this.box = $(_.template(boxTemplate)({text: linkText, url: linkUrl}));
  27         this.box.find('.change').on('click', this.changeLink);
  28         this.box.find('.delete').on('click', this.deleteLink);
  29         this.box.hide();
  30         this.addWidget(this.box);
  31     },
  32     onStateChange: function(changes) {
  33         genericElement.onStateChange.call(this, changes);
  34         if(_.isBoolean(changes.active)) {
  35             this.box.toggle(changes.active);
  36         }
  37     },
  38     onNodeAttrChange: function(event) {
  39         if(event.meta.attr === 'src') {
  40             var link = this.box.find('[link]');
  41             link.text(event.meta.newVal);
  42             var linkUrl = this.getUrl(event.meta.newVal);
  43             link.attr('href', linkUrl);
  44             this.refreshLink(linkUrl);
  45         }
  46     },
  47
  48     refreshLink: function(linkUrl) {
  49         this._container().text('');
  50         if (linkUrl && linkUrl !== 'http://') {
  51             this._container().text('');
  52             this._container().attr('style', 'background-image: url(\'' + linkUrl + '\');');
  53         } else {
  54             this._container().text(gettext('No image. Click here to add image'));
  55         }
  56     },
  57
  58     changeLink: function(e) {
  59         var el = this,
  60             //doc = this.wlxmlNode.document,
  61             //offset = el.canvas.getSelection().toDocumentFragment().offset,
  62             dialog = Dialog.create({
  63             title: gettext('Edit image'),
  64             executeButtonText: gettext('Apply'),
  65             cancelButtonText: gettext('Cancel'),
  66             fields: [
  67                 {label: gettext('Image'), name: 'src', type: 'input', initialValue: el.wlxmlNode.getAttr('src'),
  68                 prePasteHandler: function(text) {
  69                                     return this.wlxmlNode.document.getLinkForUrl(text);
  70                                 }.bind(this),
  71                                 description: '<a href="#-" class="attachment-library">' + gettext('attachment library') + '</a>'
  72             }
  73             ]
  74         });
  75         e.preventDefault();
  76         e.stopPropagation();
  77
  78         dialog.on('execute', function(event) {
  79             el.wlxmlNode.document.transaction(function() {
  80                 el.wlxmlNode.setAttr('src', event.formData.src);
  81                 event.success();
  82             }, {
  83                 metadata: {
  84                     description: gettext('Edit image')
  85                     //fragment: doc.createFragment(doc.CaretFragment, {node: el.wlxmlNode.contents()[0], offset:offset})
  86                 },
  87                 success: function() {
  88                     //el.canvas.select(doc.createFragment(doc.CaretFragment, {node: el.wlxmlNode.contents()[0], offset:offset}));
  89                 }
  90             });
  91         });
  92         dialog.show();
  93         $(".attachment-library", dialog.$el).on('click', function() {
  94             attachments.select(function(v) {$("input", dialog.$el).val(v);});
  95         });
  96
  97     },
  98
  99     deleteLink: function() {
 100         var el = this,
 101             doc = this.wlxmlNode.document;
 102
 103         el.wlxmlNode.document.transaction(function() {
 104             //var f = el.canvas.getSelection().toDocumentFragment(),
 105             //    prefLen = 0,
 106             //    ret;
 107             //
 108             //if(el.wlxmlNode.isPrecededByTextNode()) {
 109             //    prefLen = el.wlxmlNode.prev().getText().length;
 110             //}
 111             //
 112             //ret = el.wlxmlNode.unwrapContent();
 113             //return doc.createFragment(doc.CaretFragment, {node: ret.element1, offset: prefLen + f.offset});
 114             el.wlxmlNode.detach();
 115         }, {
 116             metadata: {
 117                 description: gettext('Remove link')
 118             }
 119         });
 120     },
 121
 122     getUrl: function(link) {
 123         var pattern = /^[a-z]*:\/\//g;
 124         if(!pattern.test(link) && !/^\//.test(link)) {
 125             link = 'http://' + link;
 126         }
 127         return this.wlxmlNode.document.getUrlForLink(link);
 128     }
 129 });
 130
 131 return linkElement;
 132
 133 });