spiderfw 0.6.38 → 0.6.39

data/apps/core/components/public/js/tinymce/plugins/imagetools/src/main/js/ImagePanel.js

@@ -0,0 +1,218 @@
+/**
+ * ImagePanel.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ * ...
+ *
+ * @-x-less ImagePanel.less
+ */
+define("tinymce/imagetoolsplugin/ImagePanel", [
+	"global!tinymce.ui.Control",
+	"global!tinymce.ui.DragHelper",
+	"global!tinymce.geom.Rect",
+	"global!tinymce.util.Tools",
+	"global!tinymce.util.Promise",
+	"tinymce/imagetoolsplugin/CropRect"
+], function(Control, DragHelper, Rect, Tools, Promise, CropRect) {
+	function loadImage(image) {
+		return new Promise(function(resolve) {
+			function loaded() {
+				image.removeEventListener('load', loaded);
+				resolve(image);
+			}
+
+			if (image.complete) {
+				resolve(image);
+			} else {
+				image.addEventListener('load', loaded);
+			}
+		});
+	}
+
+	return Control.extend({
+		Defaults: {
+			classes: "imagepanel"
+		},
+
+		selection: function(rect) {
+			if (arguments.length) {
+				this.state.set('rect', rect);
+				return this;
+			}
+
+			return this.state.get('rect');
+		},
+
+		imageSize: function() {
+			var viewRect = this.state.get('viewRect');
+
+			return {
+				w: viewRect.w,
+				h: viewRect.h
+			};
+		},
+
+		toggleCropRect: function(state) {
+			this.state.set('cropEnabled', state);
+		},
+
+		imageSrc: function(url) {
+			var self = this, img = new Image();
+
+			img.src = url;
+
+			loadImage(img).then(function() {
+				var rect, $img, lastRect = self.state.get('viewRect');
+
+				$img = self.$el.find('img');
+				if ($img[0]) {
+					$img.replaceWith(img);
+				} else {
+					self.getEl().appendChild(img);
+				}
+
+				rect = {x: 0, y: 0, w: img.naturalWidth, h: img.naturalHeight};
+				self.state.set('viewRect', rect);
+				self.state.set('rect', Rect.inflate(rect, -20, -20));
+
+				if (!lastRect || lastRect.w != rect.w || lastRect.h != rect.h) {
+					self.zoomFit();
+				}
+
+				self.repaintImage();
+				self.fire('load');
+			});
+		},
+
+		zoom: function(value) {
+			if (arguments.length) {
+				this.state.set('zoom', value);
+				return this;
+			}
+
+			return this.state.get('zoom');
+		},
+
+		postRender: function() {
+			this.imageSrc(this.settings.imageSrc);
+			return this._super();
+		},
+
+		zoomFit: function() {
+			var self = this, $img, pw, ph, w, h, zoom, padding;
+
+			padding = 10;
+			$img = self.$el.find('img');
+			pw = self.getEl().clientWidth;
+			ph = self.getEl().clientHeight;
+			w = $img[0].naturalWidth;
+			h = $img[0].naturalHeight;
+			zoom = Math.min((pw - padding) / w, (ph - padding) / h);
+
+			if (zoom >= 1) {
+				zoom = 1;
+			}
+
+			self.zoom(zoom);
+		},
+
+		repaintImage: function() {
+			var x, y, w, h, pw, ph, $img, zoom, rect, elm;
+
+			elm = this.getEl();
+			zoom = this.zoom();
+			rect = this.state.get('rect');
+			$img = this.$el.find('img');
+			pw = elm.offsetWidth;
+			ph = elm.offsetHeight;
+			w = $img[0].naturalWidth * zoom;
+			h = $img[0].naturalHeight * zoom;
+			x = Math.max(0, pw / 2 - w / 2);
+			y = Math.max(0, ph / 2 - h / 2);
+
+			$img.css({
+				left: x,
+				top: y,
+				width: w,
+				height: h
+			});
+
+			if (this.cropRect) {
+				this.cropRect.setRect({
+					x: rect.x * zoom + x,
+					y: rect.y * zoom + y,
+					w: rect.w * zoom,
+					h: rect.h * zoom
+				});
+
+				this.cropRect.setClampRect({
+					x: x,
+					y: y,
+					w: w,
+					h: h
+				});
+
+				this.cropRect.setViewPortRect({
+					x: 0,
+					y: 0,
+					w: pw,
+					h: ph
+				});
+			}
+		},
+
+		bindStates: function() {
+			var self = this;
+
+			function setupCropRect(rect) {
+				self.cropRect = new CropRect(
+					rect,
+					self.state.get('viewRect'),
+					self.state.get('viewRect'),
+					self.getEl()
+				);
+
+				self.cropRect.on('updateRect', function(e) {
+					var rect = e.rect, zoom = self.zoom();
+
+					rect = {
+						x: Math.round(rect.x / zoom),
+						y: Math.round(rect.y / zoom),
+						w: Math.round(rect.w / zoom),
+						h: Math.round(rect.h / zoom)
+					};
+
+					self.state.set('rect', rect);
+				});
+
+				self.on('remove', self.cropRect.destroy);
+			}
+
+			self.state.on('change:cropEnabled', function(e) {
+				self.cropRect.toggleVisibility(e.value);
+				self.repaintImage();
+			});
+
+			self.state.on('change:zoom', function() {
+				self.repaintImage();
+			});
+
+			self.state.on('change:rect', function(e) {
+				var rect = e.value;
+
+				if (!self.cropRect) {
+					setupCropRect(rect);
+				}
+
+				self.cropRect.setRect(rect);
+			});
+		}
+	});
+});

data/apps/core/components/public/js/tinymce/plugins/imagetools/src/main/js/Plugin.js

@@ -0,0 +1,411 @@
+/**
+ * Plugin.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2016 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ *
+ * Settings:
+ *  imagetools_cors_hosts - Array of remote domains that has CORS setup.
+ *  imagetools_proxy - Url to proxy that streams images from remote host to local host.
+ *  imagetools_toolbar - Toolbar items to render when an editable image is selected.
+ */
+define("tinymce/imagetoolsplugin/Plugin", [
+	"global!tinymce.PluginManager",
+	"global!tinymce.Env",
+	"global!tinymce.util.Promise",
+	"global!tinymce.util.URI",
+	"global!tinymce.util.Tools",
+	"global!tinymce.util.Delay",
+	"ephox/imagetools/api/ImageTransformations",
+	"ephox/imagetools/api/BlobConversions",
+	"tinymce/imagetoolsplugin/Dialog"
+], function(PluginManager, Env, Promise, URI, Tools, Delay, ImageTransformations, BlobConversions, Dialog) {
+	var plugin = function(editor) {
+		var count = 0, imageUploadTimer, lastSelectedImage;
+
+		if (!Env.fileApi) {
+			return;
+		}
+
+		/*
+		function startCrop() {
+			var imageRect, viewPortRect;
+
+			imageRect = getSelectedImage().getBoundingClientRect();
+
+			imageRect = {
+				x: imageRect.left,
+				y: imageRect.top,
+				w: imageRect.width,
+				h: imageRect.height
+			};
+
+			viewPortRect = {
+				x: 0,
+				y: 0,
+				w: editor.getBody().scrollWidth,
+				h: editor.getBody().scrollHeight
+			};
+
+			cropRect = new CropRect(imageRect, viewPortRect, imageRect, editor.getBody());
+			cropRect.toggleVisibility(true);
+
+			editor.selection.getSel().removeAllRanges();
+			editor.nodeChanged();
+		}
+
+		function stopCrop() {
+			if (cropRect) {
+				cropRect.destroy();
+				cropRect = null;
+			}
+		}
+		*/
+
+		function getImageSize(img) {
+			var width, height;
+
+			function isPxValue(value) {
+				return value.indexOf('px') == value.length - 2;
+			}
+
+			width = img.style.width;
+			height = img.style.height;
+			if (width || height) {
+				if (isPxValue(width) && isPxValue(height)) {
+					return {
+						w: parseInt(width, 10),
+						h: parseInt(height, 10)
+					};
+				}
+
+				return null;
+			}
+
+			width = editor.$(img).attr('width');
+			height = editor.$(img).attr('height');
+			if (width && height) {
+				return {
+					w: parseInt(width, 10),
+					h: parseInt(height, 10)
+				};
+			}
+
+			return null;
+		}
+
+		function setImageSize(img, size) {
+			var width, height;
+
+			if (size) {
+				width = img.style.width;
+				height = img.style.height;
+
+				if (width || height) {
+					editor.$(img).css({
+						width: size.w,
+						height: size.h
+					}).removeAttr('data-mce-style');
+				}
+
+				width = img.width;
+				height = img.height;
+
+				if (width || height) {
+					editor.$(img).attr({
+						width: size.w,
+						height: size.h
+					});
+				}
+			}
+		}
+
+		function getNaturalImageSize(img) {
+			return {
+				w: img.naturalWidth,
+				h: img.naturalHeight
+			};
+		}
+
+		function getSelectedImage() {
+			return editor.selection.getNode();
+		}
+
+		function createId() {
+			return 'imagetools' + count++;
+		}
+
+		function isLocalImage(img) {
+			var url = img.src;
+
+			return url.indexOf('data:') === 0 || url.indexOf('blob:') === 0 || new URI(url).host === editor.documentBaseURI.host;
+		}
+
+		function isCorsImage(img) {
+			return Tools.inArray(editor.settings.imagetools_cors_hosts, new URI(img.src).host) !== -1;
+		}
+
+		function getApiKey() {
+			return editor.settings.api_key || editor.settings.imagetools_api_key;
+		}
+
+		function requestUrlAsBlob(url) {
+			return new Promise(function(resolve) {
+				var xhr, apiKey;
+
+				xhr = new XMLHttpRequest();
+				xhr.onload = function() {
+					resolve(this.response);
+				};
+
+				xhr.open('GET', url, true);
+
+				apiKey = getApiKey();
+				if (apiKey) {
+					xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+					xhr.setRequestHeader('tiny-api-key', apiKey);
+				}
+
+				xhr.responseType = 'blob';
+				xhr.send();
+			});
+		}
+
+		function imageToBlob(img) {
+			var src = img.src;
+
+			if (isCorsImage(img)) {
+				return requestUrlAsBlob(img.src);
+			}
+
+			if (!isLocalImage(img)) {
+				src = editor.settings.imagetools_proxy;
+				src += (src.indexOf('?') === -1 ? '?' : '&') + 'url=' + encodeURIComponent(img.src);
+
+				if (getApiKey()) {
+					return requestUrlAsBlob(src);
+				}
+
+				img = new Image();
+				img.src = src;
+			}
+
+			return BlobConversions.imageToBlob(img);
+		}
+
+		function findSelectedBlobInfo() {
+			var blobInfo;
+
+			blobInfo = editor.editorUpload.blobCache.getByUri(getSelectedImage().src);
+			if (blobInfo) {
+				return blobInfo;
+			}
+
+			return imageToBlob(getSelectedImage()).then(function(blob) {
+				return BlobConversions.blobToBase64(blob).then(function(base64) {
+					var blobCache = editor.editorUpload.blobCache;
+					var blobInfo = blobCache.create(createId(), blob, base64);
+					blobCache.add(blobInfo);
+					return blobInfo;
+				});
+			});
+		}
+
+		function startTimedUpload() {
+			imageUploadTimer = Delay.setEditorTimeout(editor, function() {
+				editor.editorUpload.uploadImagesAuto();
+			}, 30000);
+		}
+
+		function cancelTimedUpload() {
+			clearTimeout(imageUploadTimer);
+		}
+
+		function updateSelectedImage(blob, uploadImmediately) {
+			return BlobConversions.blobToDataUri(blob).then(function(dataUri) {
+				var id, base64, blobCache, blobInfo, selectedImage;
+
+				selectedImage = getSelectedImage();
+				id = createId();
+				blobCache = editor.editorUpload.blobCache;
+				base64 = URI.parseDataUri(dataUri).data;
+
+				blobInfo = blobCache.create(id, blob, base64);
+				blobCache.add(blobInfo);
+
+				editor.undoManager.transact(function() {
+					function imageLoadedHandler() {
+						editor.$(selectedImage).off('load', imageLoadedHandler);
+						editor.nodeChanged();
+
+						if (uploadImmediately) {
+							editor.editorUpload.uploadImagesAuto();
+						} else {
+							cancelTimedUpload();
+							startTimedUpload();
+						}
+					}
+
+					editor.$(selectedImage).on('load', imageLoadedHandler);
+
+					editor.$(selectedImage).attr({
+						src: blobInfo.blobUri()
+					}).removeAttr('data-mce-src');
+				});
+
+				return blobInfo;
+			});
+		}
+
+		function selectedImageOperation(fn) {
+			return function() {
+				return editor._scanForImages().then(findSelectedBlobInfo).then(fn).then(updateSelectedImage);
+			};
+		}
+
+		function rotate(angle) {
+			return function() {
+				return selectedImageOperation(function(blobInfo) {
+					var size = getImageSize(getSelectedImage());
+
+					if (size) {
+						setImageSize(getSelectedImage(), {
+							w: size.h,
+							h: size.w
+						});
+					}
+
+					return ImageTransformations.rotate(blobInfo.blob(), angle);
+				})();
+			};
+		}
+
+		function flip(axis) {
+			return function() {
+				return selectedImageOperation(function(blobInfo) {
+					return ImageTransformations.flip(blobInfo.blob(), axis);
+				})();
+			};
+		}
+
+		function editImageDialog() {
+			var img = getSelectedImage(), originalSize = getNaturalImageSize(img);
+
+			if (img) {
+				imageToBlob(img).then(Dialog.edit).then(function(blob) {
+					return new Promise(function(resolve) {
+						BlobConversions.blobToImage(blob).then(function(newImage) {
+							var newSize = getNaturalImageSize(newImage);
+
+							if (originalSize.w != newSize.w || originalSize.h != newSize.h) {
+								if (getImageSize(img)) {
+									setImageSize(img, newSize);
+								}
+							}
+
+							URL.revokeObjectURL(newImage.src);
+							resolve(blob);
+						});
+					});
+				}).then(function(blob) {
+					updateSelectedImage(blob, true);
+				}, function() {
+					// Close dialog
+				});
+			}
+		}
+
+		function addButtons() {
+			editor.addButton('rotateleft', {
+				title: 'Rotate counterclockwise',
+				onclick: rotate(-90)
+			});
+
+			editor.addButton('rotateright', {
+				title: 'Rotate clockwise',
+				onclick: rotate(90)
+			});
+
+			editor.addButton('flipv', {
+				title: 'Flip vertically',
+				onclick: flip('v')
+			});
+
+			editor.addButton('fliph', {
+				title: 'Flip horizontally',
+				onclick: flip('h')
+			});
+
+			editor.addButton('editimage', {
+				title: 'Edit image',
+				onclick: editImageDialog
+			});
+
+			editor.addButton('imageoptions', {
+				title: 'Image options',
+				icon: 'options',
+				cmd: 'mceImage'
+			});
+
+			/*
+			editor.addButton('crop', {
+				title: 'Crop',
+				onclick: startCrop
+			});
+			*/
+		}
+
+		function addEvents() {
+			editor.on('NodeChange', function(e) {
+				//If the last node we selected was an image
+				//And had a source that doesn't match the current blob url
+				//We need to attempt to upload it
+				if (lastSelectedImage && lastSelectedImage.src != e.element.src) {
+					cancelTimedUpload();
+					editor.editorUpload.uploadImagesAuto();
+					lastSelectedImage = undefined;
+				}
+
+				//Set up the lastSelectedImage
+				if (isEditableImage(e.element)) {
+					lastSelectedImage = e.element;
+				}
+			});
+		}
+
+		function isEditableImage(img) {
+			var selectorMatched = editor.dom.is(img, 'img:not([data-mce-object],[data-mce-placeholder])');
+
+			return selectorMatched && (isLocalImage(img) || isCorsImage(img) || editor.settings.imagetools_proxy);
+		}
+
+		function addToolbars() {
+			var toolbarItems = editor.settings.imagetools_toolbar;
+
+			if (!toolbarItems) {
+				toolbarItems = 'rotateleft rotateright | flipv fliph | crop editimage imageoptions';
+			}
+
+			editor.addContextToolbar(
+				isEditableImage,
+				toolbarItems
+			);
+		}
+
+		addButtons();
+		addToolbars();
+		addEvents();
+
+		editor.addCommand('mceEditImage', editImageDialog);
+	};
+
+	PluginManager.add('imagetools', plugin);
+
+	return function() {};
+});