skins/ckeditor/plugins/plinn_image/plugin.js

   1 /* © 2011 Benoît Pin, MINES ParisTech */
   2
   3
   4 (function(){
   5
   6 var reImage = /^image\//;
   7
   8 var PlinnCKDDUploader = function(editor) {
   9         this.editor = editor;
  10         this.uploadUrl = editor.config.baseHref + 'attachments/put_upload';
  11         this.uploadQueue = [];
  12         this._uploadQueueRunning = false;
  13         var self = this;
  14         editor.document.on('dragenter', function(e) {self.dragenter(e);});
  15         editor.document.on('dragover',  function(e) {self.dragover(e);});
  16         editor.document.on('drop',              function(e) {self.drop(e);});
  17 };
  18
  19 // Drag and drop
  20 PlinnCKDDUploader.prototype.dragenter = function(e) {
  21         var evt = e.data.$;
  22         disableDefault(evt);
  23         disablePropagation(evt);
  24 };
  25
  26 PlinnCKDDUploader.prototype.dragover = function(e) {
  27         var evt = e.data.$;
  28         disableDefault(evt);
  29         disablePropagation(evt);
  30         evt = getEventObject(evt);
  31         var dt = evt.dataTransfer;
  32         dt.dropEffect = 'copy';
  33 };
  34
  35 PlinnCKDDUploader.prototype.drop = function(e) {
  36         var evt = e.data.$;
  37         disableDefault(evt);
  38         disablePropagation(evt);
  39         getEventObject(evt);
  40         var dt = evt.dataTransfer;
  41         dt.dropEffect = 'copy';
  42         this.handleFiles(dt.files);
  43 };
  44
  45 PlinnCKDDUploader.prototype.createFileProxy = function(file) {
  46         var container = new CKEDITOR.dom.element('span');
  47         var rel = CKEDITOR.dom.element.createFromHtml('<span style="position:relative"/>');
  48         container.append(rel);
  49         var progressBar = CKEDITOR.dom.element.createFromHtml('<span style="display:block; position:absolute; background:#ef8e32; height:4px; border-radius:2px; width:0"/>')
  50         rel.append(progressBar);
  51         var link = new CKEDITOR.dom.element('a');
  52         link.setAttribute('href', '#');
  53         link.appendText(file.name);
  54         container.append(link);
  55
  56         var proxy = {};
  57         proxy.file = file;
  58         proxy.container = container;
  59         proxy.progressBar = progressBar;
  60         proxy.link = link;
  61         return proxy;
  62 };
  63
  64 // Methods about upload
  65 PlinnCKDDUploader.prototype.handleFiles = function(files) {
  66         var file, i, proxy;
  67         for (i=0 ; i<files.length ; i++) {
  68                 file = files[i];
  69                 if (reImage.test(file.type)) {
  70                         // TODO
  71                 }
  72                 else {
  73                         proxy = this.createFileProxy(file);
  74                         this.editor.insertElement(proxy.container);
  75                         this.uploadQueuePush(proxy);
  76                 }
  77         }
  78 };
  79
  80
  81
  82 PlinnCKDDUploader.prototype.beforeUpload = function(item) {
  83         this.uploadedItem = item;
  84         this.progressBar = item.progressBar;
  85         this.progressBarMaxSize = item.container.getSize('width');
  86 };
  87
  88
  89 PlinnCKDDUploader.prototype.upload = function(item) {
  90         // item.file must be the file to be uploaded
  91         this.beforeUpload(item);
  92         var reader = new FileReader();
  93         var req = new XMLHttpRequest();
  94         var file = item.file;
  95
  96         var self = this;
  97
  98         addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
  99         addListener(req, 'readystatechange',
 100                 function(evt) {
 101                         if (req.readyState === 4) {
 102                                 self.uploadCompleteHandler(req);
 103                         }
 104                 });
 105
 106         req.open("PUT", this.uploadUrl);
 107         req.setRequestHeader("Content-Type", file.type);
 108         req.setRequestHeader("X-File-Name", encodeURI(file.name));
 109         addListener(reader, 'load',
 110                 function(evt){
 111                         try {
 112                                 req.sendAsBinary(evt.target.result);
 113                         }
 114                         catch(e){}
 115                 });
 116         reader.readAsBinaryString(file);
 117 };
 118
 119
 120 PlinnCKDDUploader.prototype.uploadCompleteHandlerCB = function(req) {
 121         var item = this.uploadedItem;
 122         var data = req.responseXML.documentElement;
 123         var link = new CKEDITOR.dom.element('a');
 124         link.setAttribute('href', 'attachments/' + data.getAttribute('id'));
 125         link.appendText(data.getAttribute('title'));
 126         link.replace(item.container);
 127 };
 128
 129 PlinnCKDDUploader.prototype.uploadCompleteHandler = function(req) {
 130         this.uploadCompleteHandlerCB(req);
 131         this.uploadQueueLoadNext();
 132 };
 133
 134 PlinnCKDDUploader.prototype.progressHandlerCB = function(progress) {
 135         // 0 <= progress <= 1
 136         var size = this.progressBarMaxSize * progress;
 137         size = Math.round(size);
 138         this.progressBar.setStyle('width', String(size) + 'px');
 139 };
 140
 141 PlinnCKDDUploader.prototype.progressHandler = function(evt) {
 142         if (evt.lengthComputable) {
 143                 var progress = evt.loaded / evt.total;
 144                 this.progressHandlerCB(progress);
 145         }
 146 };
 147
 148 // Methods about queue
 149 PlinnCKDDUploader.prototype.uploadQueuePush = function(item) {
 150         this.uploadQueue.push(item);
 151         if (!this._uploadQueueRunning) {
 152                 this.startUploadQueue();
 153         }
 154 };
 155
 156 PlinnCKDDUploader.prototype.startUploadQueue = function() {
 157         this._uploadQueueRunning = true;
 158         this.uploadQueueLoadNext();
 159 };
 160
 161 PlinnCKDDUploader.prototype.uploadQueueLoadNext = function() {
 162         var item = this.uploadQueue.shift();
 163         if (item) {
 164                 this.upload(item);
 165         }
 166         else {
 167                 this._uploadQueueRunning = false;
 168         }
 169 };
 170
 171 var reSize = /getResizedImage\?size=(\d+)_(\d+)$/;
 172
 173 function updateImageSizeUrlParameters(img) {
 174         if (reSize.test(img.src)){
 175                 var matches = reSize.exec(img.src);
 176                 var srcWidth = parseInt(matches[1], 10);
 177                 var srcHeight = parseInt(matches[2], 10);
 178
 179                 var imgWidth = parseInt((img.style.width) ? img.style.width : img.width, 10);
 180                 var imgHeight = parseInt((img.style.height) ? img.style.height : img.height, 10);
 181
 182                 if ((imgWidth && imgHeight) && srcWidth !== imgWidth && srcHeight !== imgHeight) {
 183                         var newUrl = img.getAttribute('src', 2).replace(reSize, 'getResizedImage?size=' + imgWidth + '_' + imgHeight);
 184                         img.width = imgWidth;
 185                         img.height = imgHeight;
 186                         img.src = newUrl;
 187                 }
 188         }
 189 }
 190
 191 function openPlinnImageDialog(path, editor) {
 192         var winOptions  = "location=no,menubar=no,toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes" +
 193                 ",resizable=yes"  +
 194                 ",width=801"  +
 195                 ",height=600";
 196                 //",top="  + iTop +
 197                 //",left=" + iLeft ;
 198
 199         var win = open(path + 'dialog/plinn_image.html', 'PlinnImageDialog', winOptions);
 200         win.dialogArguments = {};
 201         win.dialogArguments.editor = editor;
 202         win.dialogArguments.pluginPath = path;
 203         win.dialogArguments.CKEDITOR = CKEDITOR;
 204 }
 205
 206
 207 CKEDITOR.plugins.add( 'plinn_image',
 208 {
 209         init : function( editor )
 210         {
 211                 /* Add listener on getData event to compute images
 212                    src attributes before saving data.
 213                 */
 214                 editor.on('instanceReady', function(){
 215                         editor.on('getData',
 216                                 function(evt) {
 217                                         var tmpDiv = document.createElement('div');
 218                                         tmpDiv.innerHTML = evt.data.dataValue;
 219                                         var images = tmpDiv.getElementsByTagName('IMG');
 220                                         var i;
 221                                         for (i = 0 ; i < images.length ; i++) {
 222                                                 updateImageSizeUrlParameters(images[i]);}
 223                                         evt.data.dataValue = tmpDiv.innerHTML;
 224                                 }
 225                         );
 226                         // drag & drop upload initialisation
 227                         var dd = new PlinnCKDDUploader(editor);
 228                 });
 229
 230
 231                 var pluginPath = this.path;
 232                 var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}';
 233                 var required = 'img[alt,src]';
 234                 var command = editor.addCommand('plinn_image',
 235                         {
 236                                 exec : function(editor){openPlinnImageDialog(pluginPath, editor);},
 237                                 allowedContent: allowed,
 238                                 requiredContent: required
 239                         }
 240                 );
 241
 242                 editor.ui.addButton('PlinnImage',
 243                         {
 244                                 label : editor.lang.common.image,
 245                                 icon : pluginPath + 'dialog/plinn_image.png',
 246                                 command : 'plinn_image'
 247                         });
 248         }
 249
 250 });
 251
 252 }());