git.sur5r.net Git - bacula/bacula/blob - gui/baculum/debian/missing-sources/framework/Web/Javascripts/source/tinymce-405/plugins/image/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 /*global tinymce:true */
  12
  13 tinymce.PluginManager.add('image', function(editor) {
  14         function getImageSize(url, callback) {
  15                 var img = document.createElement('img');
  16
  17                 function done(width, height) {
  18                         img.parentNode.removeChild(img);
  19                         callback({width: width, height: height});
  20                 }
  21
  22                 img.onload = function() {
  23                         done(img.clientWidth, img.clientHeight);
  24                 };
  25
  26                 img.onerror = function() {
  27                         done();
  28                 };
  29
  30                 img.src = url;
  31
  32                 var style = img.style;
  33                 style.visibility = 'hidden';
  34                 style.position = 'fixed';
  35                 style.bottom = style.left = 0;
  36                 style.width = style.height = 'auto';
  37
  38                 document.body.appendChild(img);
  39         }
  40
  41         function createImageList(callback) {
  42                 return function() {
  43                         var imageList = editor.settings.image_list;
  44
  45                         if (typeof(imageList) == "string") {
  46                                 tinymce.util.XHR.send({
  47                                         url: imageList,
  48                                         success: function(text) {
  49                                                 callback(tinymce.util.JSON.parse(text));
  50                                         }
  51                                 });
  52                         } else {
  53                                 callback(imageList);
  54                         }
  55                 };
  56         }
  57
  58         function showDialog(imageList) {
  59                 var win, data, dom = editor.dom, imgElm = editor.selection.getNode();
  60                 var width, height, imageListCtrl;
  61
  62                 function buildImageList() {
  63                         var linkImageItems = [{text: 'None', value: ''}];
  64
  65                         tinymce.each(imageList, function(link) {
  66                                 linkImageItems.push({
  67                                         text: link.text || link.title,
  68                                         value: link.value || link.url,
  69                                         menu: link.menu
  70                                 });
  71                         });
  72
  73                         return linkImageItems;
  74                 }
  75
  76                 function recalcSize(e) {
  77                         var widthCtrl, heightCtrl, newWidth, newHeight;
  78
  79                         widthCtrl = win.find('#width')[0];
  80                         heightCtrl = win.find('#height')[0];
  81
  82                         newWidth = widthCtrl.value();
  83                         newHeight = heightCtrl.value();
  84
  85                         if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) {
  86                                 if (e.control == widthCtrl) {
  87                                         newHeight = Math.round((newWidth / width) * newHeight);
  88                                         heightCtrl.value(newHeight);
  89                                 } else {
  90                                         newWidth = Math.round((newHeight / height) * newWidth);
  91                                         widthCtrl.value(newWidth);
  92                                 }
  93                         }
  94
  95                         width = newWidth;
  96                         height = newHeight;
  97                 }
  98
  99                 function onSubmitForm() {
 100                         function waitLoad(imgElm) {
 101                                 function selectImage() {
 102                                         imgElm.onload = imgElm.onerror = null;
 103                                         editor.selection.select(imgElm);
 104                                         editor.nodeChanged();
 105                                 }
 106
 107                                 imgElm.onload = function() {
 108                                         if (!data.width && !data.height) {
 109                                                 dom.setAttribs(imgElm, {
 110                                                         width: imgElm.clientWidth,
 111                                                         height: imgElm.clientHeight
 112                                                 });
 113                                         }
 114
 115                                         selectImage();
 116                                 };
 117
 118                                 imgElm.onerror = selectImage;
 119                         }
 120
 121                         var data = win.toJSON();
 122
 123                         if (data.width === '') {
 124                                 data.width = null;
 125                         }
 126
 127                         if (data.height === '') {
 128                                 data.height = null;
 129                         }
 130
 131                         if (data.style === '') {
 132                                 data.style = null;
 133                         }
 134
 135                         data = {
 136                                 src: data.src,
 137                                 alt: data.alt,
 138                                 width: data.width,
 139                                 height: data.height,
 140                                 style: data.style
 141                         };
 142
 143                         editor.undoManager.transact(function() {
 144                                 if (!data.src) {
 145                                         if (imgElm) {
 146                                                 dom.remove(imgElm);
 147                                                 editor.nodeChanged();
 148                                         }
 149
 150                                         return;
 151                                 }
 152
 153                                 if (!imgElm) {
 154                                         data.id = '__mcenew';
 155                                         editor.selection.setContent(dom.createHTML('img', data));
 156                                         imgElm = dom.get('__mcenew');
 157                                         dom.setAttrib(imgElm, 'id', null);
 158                                 } else {
 159                                         dom.setAttribs(imgElm, data);
 160                                 }
 161
 162                                 waitLoad(imgElm);
 163                         });
 164                 }
 165
 166                 function removePixelSuffix(value) {
 167                         if (value) {
 168                                 value = value.replace(/px$/, '');
 169                         }
 170
 171                         return value;
 172                 }
 173
 174                 function updateSize() {
 175                         getImageSize(this.value(), function(data) {
 176                                 if (data.width && data.height) {
 177                                         width = data.width;
 178                                         height = data.height;
 179
 180                                         win.find('#width').value(width);
 181                                         win.find('#height').value(height);
 182                                 }
 183                         });
 184                 }
 185
 186                 width = dom.getAttrib(imgElm, 'width');
 187                 height = dom.getAttrib(imgElm, 'height');
 188
 189                 if (imgElm.nodeName == 'IMG' && !imgElm.getAttribute('data-mce-object')) {
 190                         data = {
 191                                 src: dom.getAttrib(imgElm, 'src'),
 192                                 alt: dom.getAttrib(imgElm, 'alt'),
 193                                 width: width,
 194                                 height: height
 195                         };
 196                 } else {
 197                         imgElm = null;
 198                 }
 199
 200                 if (imageList) {
 201                         imageListCtrl = {
 202                                 name: 'target',
 203                                 type: 'listbox',
 204                                 label: 'Image list',
 205                                 values: buildImageList(),
 206                                 onselect: function(e) {
 207                                         var altCtrl = win.find('#alt');
 208
 209                                         if (!altCtrl.value() || (e.lastControl && altCtrl.value() == e.lastControl.text())) {
 210                                                 altCtrl.value(e.control.text());
 211                                         }
 212
 213                                         win.find('#src').value(e.control.value());
 214                                 }
 215                         };
 216                 }
 217
 218                 // General settings shared between simple and advanced dialogs
 219                 var generalFormItems = [
 220                         {name: 'src', type: 'filepicker', filetype: 'image', label: 'Source', autofocus: true, onchange: updateSize},
 221                         imageListCtrl,
 222                         {name: 'alt', type: 'textbox', label: 'Image description'},
 223                         {
 224                                 type: 'container',
 225                                 label: 'Dimensions',
 226                                 layout: 'flex',
 227                                 direction: 'row',
 228                                 align: 'center',
 229                                 spacing: 5,
 230                                 items: [
 231                                         {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
 232                                         {type: 'label', text: 'x'},
 233                                         {name: 'height', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
 234                                         {name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'}
 235                                 ]
 236                         }
 237                 ];
 238
 239                 function updateStyle() {
 240                         function addPixelSuffix(value) {
 241                                 if (value.length > 0 && /^[0-9]+$/.test(value)) {
 242                                         value += 'px';
 243                                 }
 244
 245                                 return value;
 246                         }
 247
 248                         var data = win.toJSON();
 249                         var css = dom.parseStyle(data.style);
 250
 251                         dom.setAttrib(imgElm, 'style', '');
 252
 253                         delete css.margin;
 254                         css['margin-top'] = css['margin-bottom'] = addPixelSuffix(data.vspace);
 255                         css['margin-left'] = css['margin-right'] = addPixelSuffix(data.hspace);
 256                         css['border-width'] = addPixelSuffix(data.border);
 257
 258                         win.find('#style').value(dom.serializeStyle(dom.parseStyle(dom.serializeStyle(css))));
 259                 }
 260
 261                 if (editor.settings.image_advtab) {
 262                         // Parse styles from img
 263                         if (imgElm) {
 264                                 data.hspace = removePixelSuffix(imgElm.style.marginLeft || imgElm.style.marginRight);
 265                                 data.vspace = removePixelSuffix(imgElm.style.marginTop || imgElm.style.marginBottom);
 266                                 data.border = removePixelSuffix(imgElm.style.borderWidth);
 267                                 data.style = editor.dom.serializeStyle(editor.dom.parseStyle(editor.dom.getAttrib(imgElm, 'style')));
 268                         }
 269
 270                         // Advanced dialog shows general+advanced tabs
 271                         win = editor.windowManager.open({
 272                                 title: 'Insert/edit image',
 273                                 data: data,
 274                                 bodyType: 'tabpanel',
 275                                 body: [
 276                                         {
 277                                                 title: 'General',
 278                                                 type: 'form',
 279                                                 items: generalFormItems
 280                                         },
 281
 282                                         {
 283                                                 title: 'Advanced',
 284                                                 type: 'form',
 285                                                 pack: 'start',
 286                                                 items: [
 287                                                         {
 288                                                                 label: 'Style',
 289                                                                 name: 'style',
 290                                                                 type: 'textbox'
 291                                                         },
 292                                                         {
 293                                                                 type: 'form',
 294                                                                 layout: 'grid',
 295                                                                 packV: 'start',
 296                                                                 columns: 2,
 297                                                                 padding: 0,
 298                                                                 alignH: ['left', 'right'],
 299                                                                 defaults: {
 300                                                                         type: 'textbox',
 301                                                                         maxWidth: 50,
 302                                                                         onchange: updateStyle
 303                                                                 },
 304                                                                 items: [
 305                                                                         {label: 'Vertical space', name: 'vspace'},
 306                                                                         {label: 'Horizontal space', name: 'hspace'},
 307                                                                         {label: 'Border', name: 'border'}
 308                                                                 ]
 309                                                         }
 310                                                 ]
 311                                         }
 312                                 ],
 313                                 onSubmit: onSubmitForm
 314                         });
 315                 } else {
 316                         // Simple default dialog
 317                         win = editor.windowManager.open({
 318                                 title: 'Edit image',
 319                                 data: data,
 320                                 body: generalFormItems,
 321                                 onSubmit: onSubmitForm
 322                         });
 323                 }
 324         }
 325
 326         editor.addButton('image', {
 327                 icon: 'image',
 328                 tooltip: 'Insert/edit image',
 329                 onclick: createImageList(showDialog),
 330                 stateSelector: 'img:not([data-mce-object])'
 331         });
 332
 333         editor.addMenuItem('image', {
 334                 icon: 'image',
 335                 text: 'Insert image',
 336                 onclick: createImageList(showDialog),
 337                 context: 'insert',
 338                 prependToContext: true
 339         });
 340 });