Mercurial Hosting > sceditor

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start with sceditor-3.1.1
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 04 Aug 2022 15:21:29 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:4c4fc447baea
1 /**
2 * SCEditor Drag and Drop Plugin
3 * http://www.sceditor.com/
4 *
5 * Copyright (C) 2017, Sam Clarke (samclarke.com)
6 *
7 * SCEditor is licensed under the MIT license:
8 * http://www.opensource.org/licenses/mit-license.php
9 *
10 * @author Sam Clarke
11 */
12 (function (sceditor) {
13 'use strict';
14
15 /**
16 * Place holder GIF shown while image is loading.
17 * @type {string}
18 * @private
19 */
20 var loadingGif = 'data:image/gif;base64,R0lGODlhlgBkAPABAH19ffb29iH5BAAK' +
21 'AAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQA' +
22 'AACwAAAAAlgBkAAAC1YyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s' +
23 '73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0u' +
24 'v2OvwD2fP6iD/gH6Pc2GIhg2JeQSNjGuLf4GMlYKIloefAIUEl52ZmJyaY5mUhqyFnq' +
25 'mQr6KRoaMKp66hbLumpQ69oK+5qrOyg4a6qYV2x8jJysvMzc7PwMHS09TV1tfY2drb3' +
26 'N3e39DR4uPk5ebn6Onq6+zt7u/g4fL99UAAAh+QQACgAAACwAAAAAlgBkAIEAAAB9fX' +
27 '329vYAAAAC3JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MC' +
28 'ofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2OvwD2' +
29 'fP4iABgY+CcoCNeHuJdQyLjIaOiWiOj4CEhZ+SbZd/nI2RipqYhQOThKGpAZCuBZyAr' +
30 'ZprpqSupaCqtaazmLCRqai7rb2av5W5wqSShcm8fc7PwMHS09TV1tfY2drb3N3e39DR' +
31 '4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5/vVAAAIfkEAAoAAAAsAAAAAJYAZACBAAAAf' +
32 'X199vb2AAAAAuCUj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4P' +
33 'DAqHxKLxiEwql8ym8wmNSqfUqvWKzWq33K73Cw6Lx+Sy+YxOq9fstvsNj8vn9Lr9jr8' +
34 'E9nz+AgAYGLjQVwhXiJgguAiYgGjo9tinyCjoKLn3hpmJUGmJsBmguUnpCXCJOZraaX' +
35 'oKShoJe9DqehCqKlnqiZobuzrbyvuIO8xqKpxIPKlwrPCbBx0tPU1dbX2Nna29zd3t/' +
36 'Q0eLj5OXm5+jp6uvs7e7v4OHy8/T19vf4+fr7/P379UAAAh+QQACgAAACwAAAAAlgBk' +
37 'AIEAAAB9fX329vYAAAAC4JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3' +
38 'n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+' +
39 'f0uv2OvwT2fP6iD7gAMEhICAeImIAYiFDoOPi22KcouZfw6BhZGUBZeYlp6LbJiTD6C' +
40 'Qqg6Vm6eQqqKtkZ24iaKtrKunpQa9tmmju7Wwu7KFtMi3oYDMzompkHHS09TV1tfY2d' +
41 'rb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f31QAADs=';
42
43 /**
44 * Basic check for browser support
45 * @type {boolean}
46 * @private
47 */
48 var isSupported = typeof window.FileReader !== 'undefined';
49 var base64DataUri = /data:[^;]+;base64,/i;
50
51 function base64DataUriToBlob(url) {
52 // 5 is length of "data:" prefix
53 var mime = url.substr(5, url.indexOf(';') - 5);
54 var data = atob(url.substr(url.indexOf(',') + 1));
55 /* global Uint8Array */
56 var binary = new Uint8Array(data.length);
57
58 for (var i = 0; i < data.length; i++) {
59 binary[i] = data[i].charCodeAt(0);
60 }
61
62 try {
63 return new Blob([binary], { type: mime });
64 } catch (e) {
65 return null;
66 }
67 }
68
69 sceditor.plugins.dragdrop = function () {
70 if (!isSupported) {
71 return;
72 }
73
74 var base = this;
75 var opts;
76 var editor;
77 var handleFile;
78 var container;
79 var cover;
80 var placeholderId = 0;
81
82
83 function hideCover() {
84 cover.style.display = 'none';
85 container.className = container.className.replace(/(^| )dnd( |$)/g, '');
86 }
87
88 function showCover() {
89 if (cover.style.display === 'none') {
90 cover.style.display = 'block';
91 container.className += ' dnd';
92 }
93 }
94
95 function isAllowed(file) {
96 // FF sets type to application/x-moz-file until it has been dropped
97 if (file.type !== 'application/x-moz-file' && opts.allowedTypes &&
98 opts.allowedTypes.indexOf(file.type) < 0) {
99 return false;
100 }
101
102 return opts.isAllowed ? opts.isAllowed(file) : true;
103 };
104
105 function createHolder(toReplace) {
106 var placeholder = document.createElement('img');
107 placeholder.src = loadingGif;
108 placeholder.className = 'sceditor-ignore';
109 placeholder.id = 'sce-dragdrop-' + placeholderId++;
110
111 function replace(html) {
112 var node = editor
113 .getBody()
114 .ownerDocument
115 .getElementById(placeholder.id);
116
117 if (node) {
118 if (typeof html === 'string') {
119 node.insertAdjacentHTML('afterend', html);
120 }
121
122 node.parentNode.removeChild(node);
123 }
124 }
125
126 return function () {
127 if (toReplace) {
128 toReplace.parentNode.replaceChild(placeholder, toReplace);
129 } else {
130 editor.wysiwygEditorInsertHtml(placeholder.outerHTML);
131 }
132
133 return {
134 insert: function (html) {
135 replace(html);
136 },
137 cancel: replace
138 };
139 };
140 }
141
142 function handleDragOver(e) {
143 var dt = e.dataTransfer;
144 var files = dt.files.length || !dt.items ? dt.files : dt.items;
145
146 for (var i = 0; i < files.length; i++) {
147 // Dragging a string should be left to default
148 if (files[i].kind === 'string') {
149 return;
150 }
151 }
152
153 showCover();
154 e.preventDefault();
155 }
156
157 function handleDrop(e) {
158 var dt = e.dataTransfer;
159 var files = dt.files.length || !dt.items ? dt.files : dt.items;
160
161 hideCover();
162
163 for (var i = 0; i < files.length; i++) {
164 // Dragging a string should be left to default
165 if (files[i].kind === 'string') {
166 return;
167 }
168
169 if (isAllowed(files[i])) {
170 handleFile(files[i], createHolder());
171 }
172 }
173
174 e.preventDefault();
175 }
176
177 base.signalReady = function () {
178 editor = this;
179 opts = editor.opts.dragdrop || {};
180 handleFile = opts.handleFile;
181
182 container = editor.getContentAreaContainer().parentNode;
183
184 cover = container.appendChild(sceditor.dom.parseHTML(
185 '<div class="sceditor-dnd-cover" style="display: none">' +
186 '<p>' + editor._('Drop files here') + '</p>' +
187 '</div>'
188 ).firstChild);
189
190 container.addEventListener('dragover', handleDragOver);
191 container.addEventListener('dragleave', hideCover);
192 container.addEventListener('dragend', hideCover);
193 container.addEventListener('drop', handleDrop);
194
195 editor.getBody().addEventListener('dragover', handleDragOver);
196 editor.getBody().addEventListener('drop', hideCover);
197 };
198
199 base.signalPasteHtml = function (paste) {
200 if (!('handlePaste' in opts) || opts.handlePaste) {
201 var div = document.createElement('div');
202 div.innerHTML = paste.val;
203
204 var images = div.querySelectorAll('img');
205 for (var i = 0; i < images.length; i++) {
206 var image = images[i];
207
208 if (base64DataUri.test(image.src)) {
209 var file = base64DataUriToBlob(image.src);
210 if (file && isAllowed(file)) {
211 handleFile(file, createHolder(image));
212 } else {
213 image.parentNode.removeChild(image);
214 }
215 }
216 }
217
218 paste.val = div.innerHTML;
219 }
220 };
221 };
222 })(sceditor);