hell-labs/f9
hell-labs/f9
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dragdrop_attach: Drag and Drop Attachments

Browse source
This commit is contained in:
snow flurry 2025-03-05 12:12:03 -08:00
parent 650ff6e081
commit 59569a4908
7 changed files with 419 additions and 1 deletions

3
plugin/Makefile
View file

@ -4,7 +4,8 @@ MODS := \
f9_theme \
media_bbc \
yt_nocookie \
topic_mute
topic_mute \
dragdrop_attach
PKGDIR := $(PWD)/../packages

3
plugin/dragdrop_attach/Makefile Normal file
View file

@ -0,0 +1,3 @@
PROJECT := dragdrop_attach
include ../plugin.mk

14
plugin/dragdrop_attach/src/Subs-DragDropAttach.php Normal file
View file

@ -0,0 +1,14 @@
<?php
function dda_sceditor_options(&$sce_options) {
loadJavaScriptFile('sceditor.dragdrop.js', array('minimize' => true), 'smf_sceditor_dragdrop');
loadJavaScriptFile('dragdrop-attach.js', array('minimize' => true), 'dda_dragdrop_attach');
if (!empty($sce_options['plugins'])) {
$sce_options['plugins'] .= ',';
} else {
$sce_options['plugins'] = '';
}
$sce_options['plugins'] .= 'dragdrop_attach,dragdrop';
}
?>

112
plugin/dragdrop_attach/src/dragdrop-attach.js Normal file
View file

@ -0,0 +1,112 @@
$(function () {
// List of common (expected?) image types and their file extensions. Used
// to generate a filename, if needed.
const mimeMap = {
'image/avif': '.avif',
'image/bmp': '.bmp',
'image/gif': '.gif',
'image/jpeg': '.jpg',
'image/png': '.png',
'image/svg+xml': '.svg',
'image/tiff': '.tiff',
'image/webp': '.webp',
};
function getDropzone() {
const dropElem = document.getElementById('attachment_upload');
if (dropElem != null && dropElem.dropzone) {
if (dropElem.dropzonePatched != true) {
// On success, resolve the inline promise
dropElem.dropzone.on('success', function (file, responseText, ev) {
if (!('inlinePromise' in file)) {
// not ours, don't care
return;
}
const { resolve, reject } = file.inlinePromise;
if (!responseText || responseText.generalErrors) {
// smf_fileUpload will handle the error. let's just get
// out of here
reject();
return;
}
const response = responseText.files[0];
if (response.errors != null && response.errors.length > 0) {
reject();
return;
}
resolve(response);
});
// On error, reject the inline promise
dropElem.dropzone.on('error', function (file, errorMessage, xhr) {
// just reject, we don't need to do anything
if ('inlinePromise' in file) {
file.inlinePromise.reject();
}
});
// ensure this is only run once
dropElem.dropzonePatched = true;
}
return dropElem.dropzone;
}
return null;
}
sceditor.plugins.dragdrop_attach = function () {
var editor;
function inlineAttach(file, createPlaceholder) {
const dropzone = getDropzone();
if (dropzone == null) {
throw new Error('missing dropzone');
}
// Pasted inline images don't necessarily have file names :<
if (file.name == null) {
const ext = mimeMap[file.type];
if (ext == null) {
throw new Error('Unexpected mime type ' + file.type);
}
file.name = 'image' + ext;
}
const placeholder = (editor.inSourceMode() || createPlaceholder == null)
? null
: createPlaceholder();
new Promise(function(resolve, reject) {
file.inlinePromise = {
resolve: resolve,
reject: reject,
};
dropzone.addFile(file);
}).then(function(response) {
const bbcode = '[attach id=' + response.attachID + ']' + response.name + '[/attach]';
if (placeholder) {
placeholder.insert(editor.fromBBCode(bbcode));
} else {
editor.insertText(bbcode);
}
}).catch(function() {
if (placeholder) {
placeholder.cancel();
}
});
}
this.signalReady = function () {
editor = this;
// This requires our customized sceditor.dragdrop.js, otherwise
// we'd be in a potential race condition depending on whether
// dragdrop or our plugin is loaded first
this.opts.dragdrop = this.opts.dragdrop || {};
if (this.opts.dragdrop.handleFile == null) {
this.opts.dragdrop.handleFile = inlineAttach;
}
}
}
});

23
plugin/dragdrop_attach/src/package-info.xml Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0"?>
<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
<id>@flurry:dragdrop_attach</id>
<name>Drag-and-Drop Inline Attachments</name>
<version>1.0</version>
<type>modification</type>
<install for="2.1.* - 2.1.99">
<readme parsebbc="true">readme.txt</readme>
<require-file name="Subs-DragDropAttach.php" destination="$sourcedir" />
<require-file name="sceditor.dragdrop.js" destination="Themes/default/scripts" />
<require-file name="dragdrop-attach.js" destination="Themes/default/scripts" />
<hook hook="integrate_sceditor_options" function="dda_sceditor_options" file="$sourcedir/Subs-DragDropAttach.php" />
</install>
<uninstall for="2.1.* - 2.1.99">
<remove-file name="$sourcedir/Subs-DragDropAttach.php" />
<remove-file name="Themes/default/scripts/sceditor.dragdrop.js" />
<remove-file name="Themes/default/scripts/dragdrop-attach.js" />
<hook hook="integrate_sceditor_options" function="dda_sceditor_options" file="$sourcedir/Subs-DragDropAttach.php" reverse="true" />
</uninstall>
</package-info>

4
plugin/dragdrop_attach/src/readme.txt Normal file
View file

@ -0,0 +1,4 @@
[size=x-large][b]Drag-and-Drop Inline Attachments[/b][/size]
This allows users to drag-and-drop attachments into the post compose window,
and use them as inline attachments.

261
plugin/dragdrop_attach/src/sceditor.dragdrop.js Normal file
View file

@ -0,0 +1,261 @@
/**
* 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;
}
// HACK: if #attachment_upload doesn't exist, we can't support attachments
if (document.getElementById('attachment_upload') == null) {
return;
}
var base = this;
var opts;
var editor;
var container;
var cover;
var placeholderId = 0;
// dynamic wrapper for the actual handleFile function
function handleFile(file, createPlaceholder) {
var opts = editor.opts.dragdrop || {};
if (opts.handleFile != null) {
opts.handleFile(file, createPlaceholder);
} else {
console.error("handleFile function missing!");
}
}
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 || {};
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);
};
// signalPasteEvent is a DOM event passthrough, required for
// non-WYSIWYG pastes
base.signalPasteEvent = function (paste) {
var dt = paste.clipboardData;
var files = dt.files.length || !dt.items ? dt.files : dt.items;
if (!editor.inSourceMode()) {
// let signalPasteHtml deal with it
return;
}
if (!('handlePaste' in opts) || opts.handlePaste) {
// at this point, do the same thing as 'drop' events
for (var i = 0; i < files.length; i++) {
if (files[i].kind === 'string') {
return;
}
if (isAllowed(files[i])) {
// Can't create a placeholder in source mode!
handleFile(files[i], null);
}
}
}
paste.preventDefault();
};
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);