boundries → boundaries
[fnpeditor.git] / 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 });