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 });