From cc81bb5970e099b578356128799cf12286ea14c9 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Wed, 8 Feb 2023 14:49:05 +0100 Subject: [PATCH] simplified JavaScript This mostly replaces jQuery code with leaner vanilla JS. --- jquery.paste_image_reader.js | 64 ----------------- script.js | 136 ++++++++++++++++++++--------------- 2 files changed, 80 insertions(+), 120 deletions(-) delete mode 100644 jquery.paste_image_reader.js diff --git a/jquery.paste_image_reader.js b/jquery.paste_image_reader.js deleted file mode 100644 index d52b25c..0000000 --- a/jquery.paste_image_reader.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Image paste Event handler - * - * @author STRd6 - * @license MIT License - * @link http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/ - */ -(function ($) { - var defaults; - $.event.fix = (function (originalFix) { - return function (event) { - event = originalFix.apply(this, arguments); - if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) { - event.clipboardData = event.originalEvent.clipboardData; - } - return event; - }; - })($.event.fix); - - defaults = { - callback: $.noop, - matchType: /image.*/ - }; - - return $.fn.pasteImageReader = function (options) { - if (typeof options === "function") { - options = { - callback: options - }; - } - options = $.extend({}, defaults, options); - return this.each(function () { - var $this, element; - element = this; - $this = $(this); - return $this.bind('paste', function (event) { - var clipboardData, found; - found = false; - clipboardData = event.clipboardData; - if(typeof clipboardData === 'undefined') return; - return Array.prototype.forEach.call(clipboardData.types, function (type, i) { - var file, reader; - if (found) { - return; - } - if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) { - file = clipboardData.items[i].getAsFile(); - reader = new FileReader(); - reader.onload = function (evt) { - return options.callback.call(element, { - dataURL: evt.target.result, - event: evt, - file: file, - name: file.name - }); - }; - reader.readAsDataURL(file); - return found = true; - } - }); - }); - }); - }; -})(jQuery); diff --git a/script.js b/script.js index 75e4bb0..42280cf 100644 --- a/script.js +++ b/script.js @@ -1,67 +1,91 @@ -/* DOKUWIKI:include jquery.paste_image_reader.js */ +(function () { -jQuery(function () { - var _didInit = false; - function init() { - if (!jQuery('#wiki__text').length || _didInit) return; - _didInit = true; - jQuery('html').pasteImageReader({ - callback: function (x) { - if (!jQuery('#wiki__text').length) return; + /** + * Handle pasting of files + * + * @param {ClipboardEvent} e + */ + function handlePaste(e) { + if (!document.getElementById('wiki__text')) return; // only when editing - console.log(x); + const items = (e.clipboardData || e.originalEvent.clipboardData).items; + for (let index in items) { + const item = items[index]; - // create dialog - var offset = jQuery('.plugin_imagepaste').length * 20; - var $box = jQuery('
' + LANG.plugins.imgpaste.inprogress + '
'); - $box.dialog({ - title: 'Upload', - dialogClass: 'plugin_imagepaste', - closeOnEscape: false, - resizable: false, - position: { - my: 'center+' + offset + ' center+' + offset - }, - appendTo: '.dokuwiki' - }); + if (item.kind === 'file') { + const reader = new FileReader(); + reader.onload = event => { + uploadData(event.target.result); + }; + reader.readAsDataURL(item.getAsFile()); - // upload via AJAX - jQuery.ajax({ - url: DOKU_BASE + 'lib/exe/ajax.php', - type: 'POST', - data: { - call: 'plugin_imgpaste', - data: x.dataURL, - id: JSINFO.id - }, + // we had at least one file, prevent default + e.preventDefault(); + e.stopPropagation(); + } + } + } + + /** + * Uploads the given dataURL to the server and displays a progress dialog + * + * @param {string} dataURL + */ + function uploadData(dataURL) { + // create dialog + const offset = document.querySelectorAll('.plugin_imagepaste').length * 3; + const box = document.createElement('div'); + box.className = 'plugin_imagepaste'; + box.innerText = LANG.plugins.imgpaste.inprogress; + box.style.position = 'fixed'; + box.style.top = offset + 'em'; + box.style.left = '1em'; + document.querySelector('.dokuwiki').append(box); - // insert syntax and close dialog - success: function (data) { - $box.find('.content').addClass('success').text(data.message); - insertAtCarret('wiki__text', '{{:' + data.id + '}}'); - $box.delay(500).fadeOut(500, function () { - $box.dialog('destroy').remove() - }); - }, + // upload via AJAX + jQuery.ajax({ + url: DOKU_BASE + 'lib/exe/ajax.php', + type: 'POST', + data: { + call: 'plugin_imgpaste', + data: dataURL, + id: JSINFO.id + }, - // display error and close dialog - error: function (xhr, status, error) { - $box.find('.content').addClass('error').text(error); - $box.delay(1000).fadeOut(500, function () { - $box.dialog('destroy').remove() - }); - } - }); + // insert syntax and close dialog + success: function (data) { + box.classList.remove('info'); + box.classList.add('success'); + box.innerText = data.message; + setTimeout(() => { + box.remove(); + }, 1000); + insertSyntax(data.id); + }, + + // display error and close dialog + error: function (xhr, status, error) { + box.classList.remove('info'); + box.classList.add('error'); + box.innerText = error; + setTimeout(() => { + box.remove(); + }, 1000); } }); } - init(); + /** + * Inserts the given ID into the current editor + * + * @todo add suppprt for other editors like Prosemirror or CKEditor + * @param {string} id The newly uploaded file ID + */ + function insertSyntax(id) { + insertAtCarret('wiki__text', '{{:' + id + '}}'); + } + + // main + window.addEventListener('paste', handlePaste); - // fastwiki plugin support - jQuery(window).on('fastwiki:afterSwitch', function(evt, viewMode, isSectionEdit, prevViewMode) { - if (viewMode == 'edit' || isSectionEdit) { - init(); - } - }); -}); +})();