wp-includes/js/tinymce/plugins/media/plugin.js

   1 /**
   2  * plugin.js
   3  *
   4  * Copyright, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 /*jshint maxlen:255 */
  12 /*eslint max-len:0 */
  13 /*global tinymce:true */
  14
  15 tinymce.PluginManager.add('media', function(editor, url) {
  16         var urlPatterns = [
  17                 {regex: /youtu\.be\/([\w\-.]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$1'},
  18                 {regex: /youtube\.com(.+)v=([^&]+)/, type: 'iframe', w: 425, h: 350, url: '//www.youtube.com/embed/$2'},
  19                 {regex: /vimeo\.com\/([0-9]+)/, type: 'iframe', w: 425, h: 350, url: '//player.vimeo.com/video/$1?title=0&byline=0&portrait=0&color=8dc7dc'},
  20                 {regex: /maps\.google\.([a-z]{2,3})\/maps\/(.+)msid=(.+)/, type: 'iframe', w: 425, h: 350, url: '//maps.google.com/maps/ms?msid=$2&output=embed"'}
  21         ];
  22
  23         function guessMime(url) {
  24                 if (url.indexOf('.mp3') != -1) {
  25                         return 'audio/mpeg';
  26                 }
  27
  28                 if (url.indexOf('.wav') != -1) {
  29                         return 'audio/wav';
  30                 }
  31
  32                 if (url.indexOf('.mp4') != -1) {
  33                         return 'video/mp4';
  34                 }
  35
  36                 if (url.indexOf('.webm') != -1) {
  37                         return 'video/webm';
  38                 }
  39
  40                 if (url.indexOf('.ogg') != -1) {
  41                         return 'video/ogg';
  42                 }
  43
  44                 if (url.indexOf('.swf') != -1) {
  45                         return 'application/x-shockwave-flash';
  46                 }
  47
  48                 return '';
  49         }
  50
  51         function getVideoScriptMatch(src) {
  52                 var prefixes = editor.settings.media_scripts;
  53
  54                 if (prefixes) {
  55                         for (var i = 0; i < prefixes.length; i++) {
  56                                 if (src.indexOf(prefixes[i].filter) !== -1) {
  57                                         return prefixes[i];
  58                                 }
  59                         }
  60                 }
  61         }
  62
  63         function showDialog() {
  64                 var win, width, height, data;
  65                 var generalFormItems = [
  66                         {name: 'source1', type: 'filepicker', filetype: 'media', size: 40, autofocus: true, label: 'Source'}
  67                 ];
  68
  69                 function recalcSize(e) {
  70                         var widthCtrl, heightCtrl, newWidth, newHeight;
  71
  72                         widthCtrl = win.find('#width')[0];
  73                         heightCtrl = win.find('#height')[0];
  74
  75                         newWidth = widthCtrl.value();
  76                         newHeight = heightCtrl.value();
  77
  78                         if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
  79                                 if (e.control == widthCtrl) {
  80                                         newHeight = Math.round((newWidth / width) * newHeight);
  81                                         heightCtrl.value(newHeight);
  82                                 } else {
  83                                         newWidth = Math.round((newHeight / height) * newWidth);
  84                                         widthCtrl.value(newWidth);
  85                                 }
  86                         }
  87
  88                         width = newWidth;
  89                         height = newHeight;
  90                 }
  91
  92                 if (editor.settings.media_alt_source !== false) {
  93                         generalFormItems.push({name: 'source2', type: 'filepicker', filetype: 'media', size: 40, label: 'Alternative source'});
  94                 }
  95
  96                 if (editor.settings.media_poster !== false) {
  97                         generalFormItems.push({name: 'poster', type: 'filepicker', filetype: 'image', size: 40, label: 'Poster'});
  98                 }
  99
 100                 if (editor.settings.media_dimensions !== false) {
 101                         generalFormItems.push({
 102                                 type: 'container',
 103                                 label: 'Dimensions',
 104                                 layout: 'flex',
 105                                 align: 'center',
 106                                 spacing: 5,
 107                                 items: [
 108                                         {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
 109                                         {type: 'label', text: 'x'},
 110                                         {name: 'height', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
 111                                         {name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'}
 112                                 ]
 113                         });
 114                 }
 115
 116                 data = getData(editor.selection.getNode());
 117                 width = data.width;
 118                 height = data.height;
 119
 120                 win = editor.windowManager.open({
 121                         title: 'Insert/edit video',
 122                         data: data,
 123                         bodyType: 'tabpanel',
 124                         body: [
 125                                 {
 126                                         title: 'General',
 127                                         type: "form",
 128                                         onShowTab: function() {
 129                                                 data = htmlToData(this.next().find('#embed').value());
 130                                                 this.fromJSON(data);
 131                                         },
 132                                         items: generalFormItems
 133                                 },
 134
 135                                 {
 136                                         title: 'Embed',
 137                                         type: "panel",
 138                                         layout: 'flex',
 139                                         direction: 'column',
 140                                         align: 'stretch',
 141                                         padding: 10,
 142                                         spacing: 10,
 143                                         onShowTab: function() {
 144                                                 this.find('#embed').value(dataToHtml(this.parent().toJSON()));
 145                                         },
 146                                         items: [
 147                                                 {
 148                                                         type: 'label',
 149                                                         text: 'Paste your embed code below:',
 150                                                         forId: 'mcemediasource'
 151                                                 },
 152                                                 {
 153                                                         id: 'mcemediasource',
 154                                                         type: 'textbox',
 155                                                         flex: 1,
 156                                                         name: 'embed',
 157                                                         value: getSource(),
 158                                                         multiline: true,
 159                                                         label: 'Source'
 160                                                 }
 161                                         ]
 162                                 }
 163                         ],
 164                         onSubmit: function() {
 165                                 editor.insertContent(dataToHtml(this.toJSON()));
 166                         }
 167                 });
 168         }
 169
 170         function getSource() {
 171                 var elm = editor.selection.getNode();
 172
 173                 if (elm.getAttribute('data-mce-object')) {
 174                         return editor.selection.getContent();
 175                 }
 176         }
 177
 178         function dataToHtml(data) {
 179                 var html = '';
 180
 181                 if (!data.source1) {
 182                         tinymce.extend(data, htmlToData(data.embed));
 183                         if (!data.source1) {
 184                                 return '';
 185                         }
 186                 }
 187
 188                 if (!data.source2) {
 189                         data.source2 = '';
 190                 }
 191
 192                 if (!data.poster) {
 193                         data.poster = '';
 194                 }
 195
 196                 data.source1 = editor.convertURL(data.source1, "source");
 197                 data.source2 = editor.convertURL(data.source2, "source");
 198                 data.source1mime = guessMime(data.source1);
 199                 data.source2mime = guessMime(data.source2);
 200                 data.poster = editor.convertURL(data.poster, "poster");
 201                 data.flashPlayerUrl = editor.convertURL(url + '/moxieplayer.swf', "movie");
 202
 203                 if (data.embed) {
 204                         html = updateHtml(data.embed, data, true);
 205                 } else {
 206                         tinymce.each(urlPatterns, function(pattern) {
 207                                 var match, i, url;
 208
 209                                 if ((match = pattern.regex.exec(data.source1))) {
 210                                         url = pattern.url;
 211
 212                                         for (i = 0; match[i]; i++) {
 213                                                 /*jshint loopfunc:true*/
 214                                                 /*eslint no-loop-func:0 */
 215                                                 url = url.replace('$' + i, function() {
 216                                                         return match[i];
 217                                                 });
 218                                         }
 219
 220                                         data.source1 = url;
 221                                         data.type = pattern.type;
 222                                         data.width = data.width || pattern.w;
 223                                         data.height = data.height || pattern.h;
 224                                 }
 225                         });
 226
 227                         var videoScript = getVideoScriptMatch(data.source1);
 228                         if (videoScript) {
 229                                 data.type = 'script';
 230                                 data.width = videoScript.width;
 231                                 data.height = videoScript.height;
 232                         }
 233
 234                         data.width = data.width || 300;
 235                         data.height = data.height || 150;
 236
 237                         tinymce.each(data, function(value, key) {
 238                                 data[key] = editor.dom.encode(value);
 239                         });
 240
 241                         if (data.type == "iframe") {
 242                                 html += '<iframe src="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '"></iframe>';
 243                         } else if (data.source1mime == "application/x-shockwave-flash") {
 244                                 html += '<object data="' + data.source1 + '" width="' + data.width + '" height="' + data.height + '" type="application/x-shockwave-flash">';
 245
 246                                 if (data.poster) {
 247                                         html += '<img src="' + data.poster + '" width="' + data.width + '" height="' + data.height + '" />';
 248                                 }
 249
 250                                 html += '</object>';
 251                         } else if (data.source1mime.indexOf('audio') != -1) {
 252                                 if (editor.settings.audio_template_callback) {
 253                                         html = editor.settings.audio_template_callback(data);
 254                                 } else {
 255                                         html += (
 256                                                 '<audio controls="controls" src="' + data.source1 + '">' +
 257                                                         (data.source2 ? '\n<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
 258                                                 '</audio>'
 259                                         );
 260                                 }
 261                         } else if (data.type == "script") {
 262                                 html += '<script src="' + data.source1 + '"></script>';
 263                         } else {
 264                                 if (editor.settings.video_template_callback) {
 265                                         html = editor.settings.video_template_callback(data);
 266                                 } else {
 267                                         html = (
 268                                                 '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' +
 269                                                         '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' +
 270                                                         (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') +
 271                                                 '</video>'
 272                                         );
 273                                 }
 274                         }
 275                 }
 276
 277                 return html;
 278         }
 279
 280         function htmlToData(html) {
 281                 var data = {};
 282
 283                 new tinymce.html.SaxParser({
 284                         validate: false,
 285                         allow_conditional_comments: true,
 286                         special: 'script,noscript',
 287                         start: function(name, attrs) {
 288                                 if (!data.source1 && name == "param") {
 289                                         data.source1 = attrs.map.movie;
 290                                 }
 291
 292                                 if (name == "iframe" || name == "object" || name == "embed" || name == "video" || name == "audio") {
 293                                         if (!data.type) {
 294                                                 data.type = name;
 295                                         }
 296
 297                                         data = tinymce.extend(attrs.map, data);
 298                                 }
 299
 300                                 if (name == "script") {
 301                                         var videoScript = getVideoScriptMatch(attrs.map.src);
 302                                         if (!videoScript) {
 303                                                 return;
 304                                         }
 305
 306                                         data = {
 307                                                 type: "script",
 308                                                 source1: attrs.map.src,
 309                                                 width: videoScript.width,
 310                                                 height: videoScript.height
 311                                         };
 312                                 }
 313
 314                                 if (name == "source") {
 315                                         if (!data.source1) {
 316                                                 data.source1 = attrs.map.src;
 317                                         } else if (!data.source2) {
 318                                                 data.source2 = attrs.map.src;
 319                                         }
 320                                 }
 321
 322                                 if (name == "img" && !data.poster) {
 323                                         data.poster = attrs.map.src;
 324                                 }
 325                         }
 326                 }).parse(html);
 327
 328                 data.source1 = data.source1 || data.src || data.data;
 329                 data.source2 = data.source2 || '';
 330                 data.poster = data.poster || '';
 331
 332                 return data;
 333         }
 334
 335         function getData(element) {
 336                 if (element.getAttribute('data-mce-object')) {
 337                         return htmlToData(editor.serializer.serialize(element, {selection: true}));
 338                 }
 339
 340                 return {};
 341         }
 342
 343         function updateHtml(html, data, updateAll) {
 344                 var writer = new tinymce.html.Writer();
 345                 var sourceCount = 0, hasImage;
 346
 347                 function setAttributes(attrs, updatedAttrs) {
 348                         var name, i, value, attr;
 349
 350                         for (name in updatedAttrs) {
 351                                 value = "" + updatedAttrs[name];
 352
 353                                 if (attrs.map[name]) {
 354                                         i = attrs.length;
 355                                         while (i--) {
 356                                                 attr = attrs[i];
 357
 358                                                 if (attr.name == name) {
 359                                                         if (value) {
 360                                                                 attrs.map[name] = value;
 361                                                                 attr.value = value;
 362                                                         } else {
 363                                                                 delete attrs.map[name];
 364                                                                 attrs.splice(i, 1);
 365                                                         }
 366                                                 }
 367                                         }
 368                                 } else if (value) {
 369                                         attrs.push({
 370                                                 name: name,
 371                                                 value: value
 372                                         });
 373
 374                                         attrs.map[name] = value;
 375                                 }
 376                         }
 377                 }
 378
 379                 new tinymce.html.SaxParser({
 380                         validate: false,
 381                         allow_conditional_comments: true,
 382                         special: 'script,noscript',
 383
 384                         comment: function(text) {
 385                                 writer.comment(text);
 386                         },
 387
 388                         cdata: function(text) {
 389                                 writer.cdata(text);
 390                         },
 391
 392                         text: function(text, raw) {
 393                                 writer.text(text, raw);
 394                         },
 395
 396                         start: function(name, attrs, empty) {
 397                                 switch (name) {
 398                                         case "video":
 399                                         case "object":
 400                                         case "embed":
 401                                         case "img":
 402                                         case "iframe":
 403                                                 setAttributes(attrs, {
 404                                                         width: data.width,
 405                                                         height: data.height
 406                                                 });
 407                                         break;
 408                                 }
 409
 410                                 if (updateAll) {
 411                                         switch (name) {
 412                                                 case "video":
 413                                                         setAttributes(attrs, {
 414                                                                 poster: data.poster,
 415                                                                 src: ""
 416                                                         });
 417
 418                                                         if (data.source2) {
 419                                                                 setAttributes(attrs, {
 420                                                                         src: ""
 421                                                                 });
 422                                                         }
 423                                                 break;
 424
 425                                                 case "iframe":
 426                                                         setAttributes(attrs, {
 427                                                                 src: data.source1
 428                                                         });
 429                                                 break;
 430
 431                                                 case "source":
 432                                                         sourceCount++;
 433
 434                                                         if (sourceCount <= 2) {
 435                                                                 setAttributes(attrs, {
 436                                                                         src: data["source" + sourceCount],
 437                                                                         type: data["source" + sourceCount + "mime"]
 438                                                                 });
 439
 440                                                                 if (!data["source" + sourceCount]) {
 441                                                                         return;
 442                                                                 }
 443                                                         }
 444                                                 break;
 445
 446                                                 case "img":
 447                                                         if (!data.poster) {
 448                                                                 return;
 449                                                         }
 450
 451                                                         hasImage = true;
 452                                                         break;
 453                                         }
 454                                 }
 455
 456                                 writer.start(name, attrs, empty);
 457                         },
 458
 459                         end: function(name) {
 460                                 if (name == "video" && updateAll) {
 461                                         for (var index = 1; index <= 2; index++) {
 462                                                 if (data["source" + index]) {
 463                                                         var attrs = [];
 464                                                         attrs.map = {};
 465
 466                                                         if (sourceCount < index) {
 467                                                                 setAttributes(attrs, {
 468                                                                         src: data["source" + index],
 469                                                                         type: data["source" + index + "mime"]
 470                                                                 });
 471
 472                                                                 writer.start("source", attrs, true);
 473                                                         }
 474                                                 }
 475                                         }
 476                                 }
 477
 478                                 if (data.poster && name == "object" && updateAll && !hasImage) {
 479                                         var imgAttrs = [];
 480                                         imgAttrs.map = {};
 481
 482                                         setAttributes(imgAttrs, {
 483                                                 src: data.poster,
 484                                                 width: data.width,
 485                                                 height: data.height
 486                                         });
 487
 488                                         writer.start("img", imgAttrs, true);
 489                                 }
 490
 491                                 writer.end(name);
 492                         }
 493                 }, new tinymce.html.Schema({})).parse(html);
 494
 495                 return writer.getContent();
 496         }
 497
 498         editor.on('ResolveName', function(e) {
 499                 var name;
 500
 501                 if (e.target.nodeType == 1 && (name = e.target.getAttribute("data-mce-object"))) {
 502                         e.name = name;
 503                 }
 504         });
 505
 506         editor.on('preInit', function() {
 507                 // Make sure that any messy HTML is retained inside these
 508                 var specialElements = editor.schema.getSpecialElements();
 509                 tinymce.each('video audio iframe object'.split(' '), function(name) {
 510                         specialElements[name] = new RegExp('<\/' + name + '[^>]*>','gi');
 511                 });
 512
 513                 // Allow elements
 514                 editor.schema.addValidElements('object[id|style|width|height|classid|codebase|*],embed[id|style|width|height|type|src|*],video[*],audio[*]');
 515
 516                 // Set allowFullscreen attribs as boolean
 517                 var boolAttrs = editor.schema.getBoolAttrs();
 518                 tinymce.each('webkitallowfullscreen mozallowfullscreen allowfullscreen'.split(' '), function(name) {
 519                         boolAttrs[name] = {};
 520                 });
 521
 522                 // Converts iframe, video etc into placeholder images
 523                 editor.parser.addNodeFilter('iframe,video,audio,object,embed,script', function(nodes, name) {
 524                         var i = nodes.length, ai, node, placeHolder, attrName, attrValue, attribs, innerHtml;
 525                         var videoScript;
 526
 527                         while (i--) {
 528                                 node = nodes[i];
 529
 530                                 if (node.name == 'script') {
 531                                         videoScript = getVideoScriptMatch(node.attr('src'));
 532                                         if (!videoScript) {
 533                                                 continue;
 534                                         }
 535                                 }
 536
 537                                 placeHolder = new tinymce.html.Node('img', 1);
 538                                 placeHolder.shortEnded = true;
 539
 540                                 if (videoScript) {
 541                                         if (videoScript.width) {
 542                                                 node.attr('width', videoScript.width.toString());
 543                                         }
 544
 545                                         if (videoScript.height) {
 546                                                 node.attr('height', videoScript.height.toString());
 547                                         }
 548                                 }
 549
 550                                 // Prefix all attributes except width, height and style since we
 551                                 // will add these to the placeholder
 552                                 attribs = node.attributes;
 553                                 ai = attribs.length;
 554                                 while (ai--) {
 555                                         attrName = attribs[ai].name;
 556                                         attrValue = attribs[ai].value;
 557
 558                                         if (attrName !== "width" && attrName !== "height" && attrName !== "style") {
 559                                                 if (attrName == "data" || attrName == "src") {
 560                                                         attrValue = editor.convertURL(attrValue, attrName);
 561                                                 }
 562
 563                                                 placeHolder.attr('data-mce-p-' + attrName, attrValue);
 564                                         }
 565                                 }
 566
 567                                 // Place the inner HTML contents inside an escaped attribute
 568                                 // This enables us to copy/paste the fake object
 569                                 innerHtml = node.firstChild && node.firstChild.value;
 570                                 if (innerHtml) {
 571                                         placeHolder.attr("data-mce-html", escape(innerHtml));
 572                                         placeHolder.firstChild = null;
 573                                 }
 574
 575                                 placeHolder.attr({
 576                                         width: node.attr('width') || "300",
 577                                         height: node.attr('height') || (name == "audio" ? "30" : "150"),
 578                                         style: node.attr('style'),
 579                                         src: tinymce.Env.transparentSrc,
 580                                         "data-mce-object": name,
 581                                         "class": "mce-object mce-object-" + name
 582                                 });
 583
 584                                 node.replace(placeHolder);
 585                         }
 586                 });
 587
 588                 // Replaces placeholder images with real elements for video, object, iframe etc
 589                 editor.serializer.addAttributeFilter('data-mce-object', function(nodes, name) {
 590                         var i = nodes.length, node, realElm, ai, attribs, innerHtml, innerNode, realElmName;
 591
 592                         while (i--) {
 593                                 node = nodes[i];
 594                                 realElmName = node.attr(name);
 595                                 realElm = new tinymce.html.Node(realElmName, 1);
 596
 597                                 // Add width/height to everything but audio
 598                                 if (realElmName != "audio" && realElmName != "script") {
 599                                         realElm.attr({
 600                                                 width: node.attr('width'),
 601                                                 height: node.attr('height')
 602                                         });
 603                                 }
 604
 605                                 realElm.attr({
 606                                         style: node.attr('style')
 607                                 });
 608
 609                                 // Unprefix all placeholder attributes
 610                                 attribs = node.attributes;
 611                                 ai = attribs.length;
 612                                 while (ai--) {
 613                                         var attrName = attribs[ai].name;
 614
 615                                         if (attrName.indexOf('data-mce-p-') === 0) {
 616                                                 realElm.attr(attrName.substr(11), attribs[ai].value);
 617                                         }
 618                                 }
 619
 620                                 if (realElmName == "script") {
 621                                         realElm.attr('type', 'text/javascript');
 622                                 }
 623
 624                                 // Inject innerhtml
 625                                 innerHtml = node.attr('data-mce-html');
 626                                 if (innerHtml) {
 627                                         innerNode = new tinymce.html.Node('#text', 3);
 628                                         innerNode.raw = true;
 629                                         innerNode.value = unescape(innerHtml);
 630                                         realElm.append(innerNode);
 631                                 }
 632
 633                                 node.replace(realElm);
 634                         }
 635                 });
 636         });
 637
 638         editor.on('ObjectSelected', function(e) {
 639                 var objectType = e.target.getAttribute('data-mce-object');
 640
 641                 if (objectType == "audio" || objectType == "script") {
 642                         e.preventDefault();
 643                 }
 644         });
 645
 646         editor.on('objectResized', function(e) {
 647                 var target = e.target, html;
 648
 649                 if (target.getAttribute('data-mce-object')) {
 650                         html = target.getAttribute('data-mce-html');
 651                         if (html) {
 652                                 html = unescape(html);
 653                                 target.setAttribute('data-mce-html', escape(
 654                                         updateHtml(html, {
 655                                                 width: e.width,
 656                                                 height: e.height
 657                                         })
 658                                 ));
 659                         }
 660                 }
 661         });
 662
 663         editor.addButton('media', {
 664                 tooltip: 'Insert/edit video',
 665                 onclick: showDialog,
 666                 stateSelector: ['img[data-mce-object=video]', 'img[data-mce-object=iframe]']
 667         });
 668
 669         editor.addMenuItem('media', {
 670                 icon: 'media',
 671                 text: 'Insert video',
 672                 onclick: showDialog,
 673                 context: 'insert',
 674                 prependToContext: true
 675         });
 676 });