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