empty text nodes after spans
[fnpeditor.git] / src / editor / plugins / core / video / videoElement.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 function youtubeParser(url) {
16     var regExp = /^.*(?:youtu.be\/|v\/|\/u\/\w\/|embed\/|\?v=|&v=|shared\?ci=)([^#&?]*).*/;
17     var match = url.match(regExp);
18     return (match && match[1].length == 11) ? match[1] : false;
19 }
20
21 _.extend(linkElement, {
22     init: function() {
23         genericElement.init.call(this);
24         _.bindAll(this, 'changeLink', 'deleteLink');
25
26         var linkText = this.wlxmlNode.getAttr('src') || '',
27             linkUrl = this.getUrl(linkText);
28         
29         this.refreshLink(linkUrl);
30
31         this.box = $(_.template(boxTemplate)({text: linkText, url: linkUrl}));
32         this.box.find('.change').on('click', this.changeLink);
33         this.box.find('.delete').on('click', this.deleteLink);
34         this.box.hide();
35         this.addWidget(this.box);
36     },
37     onStateChange: function(changes) {
38         genericElement.onStateChange.call(this, changes);
39         if(_.isBoolean(changes.active)) {
40             this.box.toggle(changes.active);
41         }
42     },
43     onNodeAttrChange: function(event) {
44         if(event.meta.attr === 'src') {
45             var link = this.box.find('[link]');
46             link.text(event.meta.newVal);
47             var linkUrl = this.getUrl(event.meta.newVal);
48             link.attr('href', linkUrl);
49             this.refreshLink(linkUrl);
50         }
51     },
52
53     refreshLink: function(linkUrl) {
54         this._container().find('iframe').remove();
55         var video_id = youtubeParser(linkUrl);
56         if (video_id) {
57             var video_frame = '<iframe width="480" height="270" src="//www.youtube.com/embed/' + video_id +
58                 '?controls=2&amp;rel=0&amp;showinfo=0&amp;theme=light" frameborder="0" allowfullscreen></iframe>';
59             this._container().text('');
60             this._container().append($(video_frame));
61         } else {
62             this._container().text(gettext('No video. Click here to add link to your video'));
63         }
64     },
65
66     changeLink: function(e) {
67         var el = this,
68             dialog = Dialog.create({
69             title: gettext('Edit video url'),
70             executeButtonText: gettext('Apply'),
71             cancelButtonText: gettext('Cancel'),
72             fields: [
73                 {
74                     label: gettext('YouTube link'),
75                     name: 'src',
76                     type: 'input',
77                     initialValue: el.wlxmlNode.getAttr('src'),
78                     prePasteHandler:
79                         function(text) {
80                             return this.wlxmlNode.document.getLinkForUrl(text);
81                         }.bind(this)
82                 }
83             ]
84         });
85         e.preventDefault();
86         e.stopPropagation();
87
88         dialog.on('execute', function(event) {
89             el.wlxmlNode.document.transaction(function() {
90                 el.wlxmlNode.setAttr('src', event.formData.src);
91                 el.wlxmlNode.setAttr('videoid', youtubeParser(event.formData.src));
92                 event.success();
93             }, {
94                 metadata: {
95                     description: gettext('Edit video url')
96                     //fragment: doc.createFragment(doc.CaretFragment, {node: el.wlxmlNode.contents()[0], offset:offset})
97                 },
98                 success: function() {
99                     //el.canvas.select(doc.createFragment(doc.CaretFragment, {node: el.wlxmlNode.contents()[0], offset:offset}));
100                 }
101             });
102         });
103         dialog.show();
104         $(".attachment-library", dialog.$el).on('click', function() {
105             attachments.select(function(v) {$("input", dialog.$el).val(v);});
106         });
107
108     },
109
110     deleteLink: function() {
111         var el = this;
112
113         el.wlxmlNode.document.transaction(function() {
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 });