Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-01 13:39:22 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added: browse/upload image button to SquireUI

Browse source
This commit is contained in:
djmaze 2020-09-11 14:40:13 +02:00
parent a7cc115bfb
commit a022139403
4 changed files with 57 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

91
dev/Common/HtmlEditor.js
View file

@ -105,26 +105,22 @@ class HtmlEditor {
this.element = element;
this.resize = this.resizeEditor.throttle(100);
this.resize = (() => {
try {
this.editor && this.__resizable && this.editor.resize(element.clientWidth, element.clientHeight);
} catch (e) {} // eslint-disable-line no-empty
}).throttle(100);
this.init();
}
runOnBlur() {
this.onBlur && this.onBlur();
}
blurTrigger() {
if (this.onBlur) {
clearTimeout(this.blurTimer);
this.blurTimer = setTimeout(() => this.runOnBlur(), 200);
this.blurTimer = setTimeout(() => this.onBlur && this.onBlur(), 200);
}
}
focusTrigger() {
this.onBlur && clearTimeout(this.blurTimer);
}
/**
* @returns {boolean}
*/
@ -136,11 +132,9 @@ class HtmlEditor {
* @returns {void}
*/
clearCachedSignature() {
if (this.editor) {
this.editor.execCommand('insertSignature', {
clearCache: true
});
}
this.editor && this.editor.execCommand('insertSignature', {
clearCache: true
});
}
/**
@ -150,24 +144,11 @@ class HtmlEditor {
* @returns {void}
*/
setSignature(signature, html, insertBefore = false) {
if (this.editor) {
this.editor.execCommand('insertSignature', {
isHtml: html,
insertBefore: insertBefore,
signature: signature
});
}
}
/**
* @returns {boolean}
*/
checkDirty() {
return this.editor ? this.editor.checkDirty() : false;
}
resetDirty() {
this.editor && this.editor.resetDirty();
this.editor && this.editor.execCommand('insertSignature', {
isHtml: html,
insertBefore: insertBefore,
signature: signature
});
}
/**
@ -338,42 +319,12 @@ class HtmlEditor {
}
else if (window.Squire) {
this.editor = new SquireUI(this.element, this.editor);
/*
// TODO
this.editor.on('key', event => !(event && event.data && EventKeyCode.Tab === event.data.keyCode));
if (window.FileReader) {
this.editor.on('dragover', (event) => {
event.dataTransfer = clipboardData
});
this.editor.on('drop', (event) => {
event.dataTransfer = clipboardData
if (0 < event.data.dataTransfer.getFilesCount()) {
const file = event.data.dataTransfer.getFile(0);
if (file && event.data.dataTransfer.id && file.type && file.type.match(/^image/i)) {
const id = event.data.dataTransfer.id,
imageId = `[img=${id}]`,
reader = new FileReader();
reader.onloadend = () => {
if (reader.result) {
this.replaceHtml(imageId, `<img src="${reader.result}" />`);
}
};
reader.readAsDataURL(file);
event.data.dataTransfer.setData('text/html', imageId);
}
}
});
}
*/
setTimeout(onReady,1);
}
if (this.editor) {
this.editor.on('blur', () => this.blurTrigger());
this.editor.on('focus', () => this.focusTrigger());
this.editor.on('focus', () => this.blurTimer && clearTimeout(this.blurTimer));
this.editor.on('mode', () => {
this.blurTrigger();
this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
@ -409,18 +360,6 @@ class HtmlEditor {
} catch (e) {} // eslint-disable-line no-empty
}
resizeEditor() {
try {
this.editor && this.__resizable && this.editor.resize(this.element.clientWidth, this.element.clientHeight);
} catch (e) {} // eslint-disable-line no-empty
}
setReadOnly(value) {
try {
this.editor && this.editor.setReadOnly(!!value);
} catch (e) {} // eslint-disable-line no-empty
}
clear(focus) {
this.setHtml('', focus);
}

47
dev/External/SquireUI.js vendored
View file

@ -186,7 +186,16 @@ class SquireUI
},
/*
bidi: {
allowHtmlEditorBitiButtons
bdoLtr: {
html: '&lrm;𝐁',
cmd: () => this.doAction('bold','B'),
hint: 'Bold'
},
bdoRtl: {
html: '&rlm;𝐁',
cmd: () => this.doAction('bold','B'),
hint: 'Bold'
}
},
*/
inline: {
@ -274,7 +283,7 @@ class SquireUI
},
hint: 'Link'
},
image: {
imageUrl: {
html: '🖼️',
cmd: () => {
if ('IMG' === this.getParentNodeName()) {
@ -284,13 +293,13 @@ class SquireUI
src != null && src.length && squire.insertImage(src);
}
},
hint: 'Image'
hint: 'Image URL'
},
/*
imageUpload: {
// TODO
html: '📂️',
cmd: () => browseImage.click(),
hint: 'Image select',
}
*/
},
/*
table: {
@ -316,8 +325,20 @@ class SquireUI
plain = doc.createElement('textarea'),
wysiwyg = doc.createElement('div'),
toolbar = doc.createElement('div'),
browseImage = doc.createElement('input'),
squire = new Squire(wysiwyg, SquireDefaultConfig);
browseImage.type = 'file';
browseImage.accept = 'image/*';
browseImage.style.display = 'none';
browseImage.onchange = () => {
if (browseImage.files.length) {
let reader = new FileReader();
reader.readAsDataURL(browseImage.files[0]);
reader.onloadend = () => reader.result && squire.insertImage(reader.result);
}
}
plain.className = 'squire-plain cke_plain cke_editable';
wysiwyg.className = 'squire-wysiwyg cke_wysiwyg_div cke_editable';
this.mode = ''; // 'plain' | 'wysiwyg'
@ -333,6 +354,9 @@ class SquireUI
toolbar.className = 'squire-toolbar cke_top';
for (let group in actions) {
if ('bidi' == group && !rl.settings.app('allowHtmlEditorBitiButtons')) {
continue;
}
let toolgroup = doc.createElement('div');
toolgroup.className = 'squire-toolgroup cke_toolgroup';
toolgroup.id = 'squire-toolgroup-'+group;
@ -498,12 +522,6 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
}
}
checkDirty() {
return false;
}
resetDirty() {}
getData() {
return this.squire.getHTML();
}
@ -521,11 +539,6 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
this.wysiwyg.style.height = height;
this.plain.style.height = height;
}
setReadOnly(bool) {
this.plain.readOnly = !!bool;
this.wysiwyg.contentEditable = !!bool;
}
}
window.SquireUI = SquireUI;