diff src/development/plugins/dragdrop.js @ 0:4c4fc447baea

start with sceditor-3.1.1
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 04 Aug 2022 15:21:29 -0600
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/development/plugins/dragdrop.js	Thu Aug 04 15:21:29 2022 -0600
@@ -0,0 +1,222 @@
+/**
+ * SCEditor Drag and Drop Plugin
+ * http://www.sceditor.com/
+ *
+ * Copyright (C) 2017, Sam Clarke (samclarke.com)
+ *
+ * SCEditor is licensed under the MIT license:
+ *	http://www.opensource.org/licenses/mit-license.php
+ *
+ * @author Sam Clarke
+ */
+(function (sceditor) {
+	'use strict';
+
+	/**
+	 * Place holder GIF shown while image is loading.
+	 * @type {string}
+	 * @private
+	 */
+	var loadingGif = 'data:image/gif;base64,R0lGODlhlgBkAPABAH19ffb29iH5BAAK' +
+		'AAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQA' +
+		'AACwAAAAAlgBkAAAC1YyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s' +
+		'73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0u' +
+		'v2OvwD2fP6iD/gH6Pc2GIhg2JeQSNjGuLf4GMlYKIloefAIUEl52ZmJyaY5mUhqyFnq' +
+		'mQr6KRoaMKp66hbLumpQ69oK+5qrOyg4a6qYV2x8jJysvMzc7PwMHS09TV1tfY2drb3' +
+		'N3e39DR4uPk5ebn6Onq6+zt7u/g4fL99UAAAh+QQACgAAACwAAAAAlgBkAIEAAAB9fX' +
+		'329vYAAAAC3JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MC' +
+		'ofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2OvwD2' +
+		'fP4iABgY+CcoCNeHuJdQyLjIaOiWiOj4CEhZ+SbZd/nI2RipqYhQOThKGpAZCuBZyAr' +
+		'ZprpqSupaCqtaazmLCRqai7rb2av5W5wqSShcm8fc7PwMHS09TV1tfY2drb3N3e39DR' +
+		'4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5/vVAAAIfkEAAoAAAAsAAAAAJYAZACBAAAAf' +
+		'X199vb2AAAAAuCUj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4P' +
+		'DAqHxKLxiEwql8ym8wmNSqfUqvWKzWq33K73Cw6Lx+Sy+YxOq9fstvsNj8vn9Lr9jr8' +
+		'E9nz+AgAYGLjQVwhXiJgguAiYgGjo9tinyCjoKLn3hpmJUGmJsBmguUnpCXCJOZraaX' +
+		'oKShoJe9DqehCqKlnqiZobuzrbyvuIO8xqKpxIPKlwrPCbBx0tPU1dbX2Nna29zd3t/' +
+		'Q0eLj5OXm5+jp6uvs7e7v4OHy8/T19vf4+fr7/P379UAAAh+QQACgAAACwAAAAAlgBk' +
+		'AIEAAAB9fX329vYAAAAC4JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3' +
+		'n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+' +
+		'f0uv2OvwT2fP6iD7gAMEhICAeImIAYiFDoOPi22KcouZfw6BhZGUBZeYlp6LbJiTD6C' +
+		'Qqg6Vm6eQqqKtkZ24iaKtrKunpQa9tmmju7Wwu7KFtMi3oYDMzompkHHS09TV1tfY2d' +
+		'rb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f31QAADs=';
+
+	/**
+	 * Basic check for browser support
+	 * @type {boolean}
+	 * @private
+	 */
+	var isSupported = typeof window.FileReader !== 'undefined';
+	var base64DataUri = /data:[^;]+;base64,/i;
+
+	function base64DataUriToBlob(url) {
+		// 5 is length of "data:" prefix
+		var mime = url.substr(5, url.indexOf(';') - 5);
+		var data = atob(url.substr(url.indexOf(',') + 1));
+		/* global Uint8Array */
+		var binary = new Uint8Array(data.length);
+
+		for (var i = 0; i < data.length; i++) {
+			binary[i] = data[i].charCodeAt(0);
+		}
+
+		try {
+			return new Blob([binary], { type: mime });
+		} catch (e) {
+			return null;
+		}
+	}
+
+	sceditor.plugins.dragdrop = function () {
+		if (!isSupported) {
+			return;
+		}
+
+		var base = this;
+		var	opts;
+		var editor;
+		var handleFile;
+		var container;
+		var cover;
+		var placeholderId = 0;
+
+
+		function hideCover() {
+			cover.style.display = 'none';
+			container.className = container.className.replace(/(^| )dnd( |$)/g, '');
+		}
+
+		function showCover() {
+			if (cover.style.display === 'none') {
+				cover.style.display = 'block';
+				container.className += ' dnd';
+			}
+		}
+
+		function isAllowed(file) {
+			// FF sets type to application/x-moz-file until it has been dropped
+			if (file.type !== 'application/x-moz-file' && opts.allowedTypes &&
+				opts.allowedTypes.indexOf(file.type) < 0) {
+				return false;
+			}
+
+			return opts.isAllowed ? opts.isAllowed(file) : true;
+		};
+
+		function createHolder(toReplace) {
+			var placeholder = document.createElement('img');
+			placeholder.src = loadingGif;
+			placeholder.className = 'sceditor-ignore';
+			placeholder.id = 'sce-dragdrop-' + placeholderId++;
+
+			function replace(html) {
+				var node = editor
+					.getBody()
+					.ownerDocument
+					.getElementById(placeholder.id);
+
+				if (node) {
+					if (typeof html === 'string') {
+						node.insertAdjacentHTML('afterend', html);
+					}
+
+					node.parentNode.removeChild(node);
+				}
+			}
+
+			return function () {
+				if (toReplace) {
+					toReplace.parentNode.replaceChild(placeholder, toReplace);
+				} else {
+					editor.wysiwygEditorInsertHtml(placeholder.outerHTML);
+				}
+
+				return {
+					insert: function (html) {
+						replace(html);
+					},
+					cancel: replace
+				};
+			};
+		}
+
+		function handleDragOver(e) {
+			var dt    = e.dataTransfer;
+			var files = dt.files.length || !dt.items ? dt.files : dt.items;
+
+			for (var i = 0; i < files.length; i++) {
+				// Dragging a string should be left to default
+				if (files[i].kind === 'string') {
+					return;
+				}
+			}
+
+			showCover();
+			e.preventDefault();
+		}
+
+		function handleDrop(e) {
+			var dt    = e.dataTransfer;
+			var files = dt.files.length || !dt.items ? dt.files : dt.items;
+
+			hideCover();
+
+			for (var i = 0; i < files.length; i++) {
+				// Dragging a string should be left to default
+				if (files[i].kind === 'string') {
+					return;
+				}
+
+				if (isAllowed(files[i])) {
+					handleFile(files[i], createHolder());
+				}
+			}
+
+			e.preventDefault();
+		}
+
+		base.signalReady = function () {
+			editor = this;
+			opts = editor.opts.dragdrop || {};
+			handleFile = opts.handleFile;
+
+			container = editor.getContentAreaContainer().parentNode;
+
+			cover = container.appendChild(sceditor.dom.parseHTML(
+				'<div class="sceditor-dnd-cover" style="display: none">' +
+					'<p>' + editor._('Drop files here') + '</p>' +
+				'</div>'
+			).firstChild);
+
+			container.addEventListener('dragover', handleDragOver);
+			container.addEventListener('dragleave', hideCover);
+			container.addEventListener('dragend', hideCover);
+			container.addEventListener('drop', handleDrop);
+
+			editor.getBody().addEventListener('dragover', handleDragOver);
+			editor.getBody().addEventListener('drop', hideCover);
+		};
+
+		base.signalPasteHtml = function (paste) {
+			if (!('handlePaste' in opts) || opts.handlePaste) {
+				var div = document.createElement('div');
+				div.innerHTML = paste.val;
+
+				var images = div.querySelectorAll('img');
+				for (var i = 0; i < images.length; i++) {
+					var image = images[i];
+
+					if (base64DataUri.test(image.src)) {
+						var file = base64DataUriToBlob(image.src);
+						if (file && isAllowed(file)) {
+							handleFile(file, createHolder(image));
+						} else {
+							image.parentNode.removeChild(image);
+						}
+					}
+				}
+
+				paste.val = div.innerHTML;
+			}
+		};
+	};
+})(sceditor);