mirror of
https://github.com/the-djmaze/snappymail.git
synced 2025-02-26 15:59:29 +08:00
Added: browse/upload image button to SquireUI
This commit is contained in:
djmaze
parent
a7cc115bfb
commit
a022139403
4 changed files with 57 additions and 106 deletions
23
README.md
23
README.md
|
|
@ -88,23 +88,23 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
|
|||
|
||||
|js/* |1.14.0 |native |
|
||||
|----------- |--------: |--------: |
|
||||
|admin.js |2.130.942 | 941.623 |
|
||||
|app.js |4.184.455 |2.559.130 |
|
||||
|admin.js |2.130.942 | 936.773 |
|
||||
|app.js |4.184.455 |2.554.276 |
|
||||
|boot.js | 671.522 | 5.834 |
|
||||
|libs.js | 647.614 | 326.686 |
|
||||
|libs.js | 647.614 | 327.282 |
|
||||
|polyfills.js | 325.834 | 0 |
|
||||
|TOTAL |7.960.367 |3.833.273 |
|
||||
|TOTAL |7.960.367 |3.824.165 |
|
||||
|
||||
|js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli |
|
||||
|--------------- |--------: |--------: |--------: |--------: |--------: |
|
||||
|admin.min.js | 252.147 | 128.739 | 73.657 | 37.549 | 32.265 |
|
||||
|app.min.js | 511.202 | 349.263 |140.462 | 91.754 | 73.588 |
|
||||
|admin.min.js | 252.147 | 128.449 | 73.657 | 37.486 | 32.167 |
|
||||
|app.min.js | 511.202 | 348.973 |140.462 | 91.692 | 73.600 |
|
||||
|boot.min.js | 66.007 | 3.166 | 22.567 | 1.571 | 1.345 |
|
||||
|libs.min.js | 572.545 | 303.770 |176.720 | 94.774 | 83.577 |
|
||||
|libs.min.js | 572.545 | 304.025 |176.720 | 94.879 | 83.565 |
|
||||
|polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 |
|
||||
|TOTAL |1.434.353 | 784.938 |424.718 |225.648 |190.775 |
|
||||
|TOTAL |1.434.353 | 784.938 |424.718 |225.628 |190.677 |
|
||||
|
||||
649.415 bytes (199.070 gzip) is not much, but it feels faster.
|
||||
649.415 bytes (199.090 gzip) is not much, but it feels faster.
|
||||
|
||||
### CSS changes
|
||||
|
||||
|
|
@ -140,15 +140,14 @@ The [squire](https://github.com/neilj/Squire) implementation is not 100% compati
|
|||
|
||||
Still TODO:
|
||||
|
||||
* upload image inline
|
||||
* support for tables (really needed?!?)
|
||||
|
||||
| | normal | min | gzip | min gzip |
|
||||
|-------- |-------: |-------: |------: |--------: |
|
||||
|squire | 128.729 | 47.215 | 33.671 | 15.596 |
|
||||
|squire | 128.826 | 47.074 | 33.671 | 15.596 |
|
||||
|ckeditor | ? | 520.035 | ? | 155.916 |
|
||||
|
||||
CKEditor including the 8 asset requests is 633.46 KB / 183.54 KB (gzip).
|
||||
CKEditor including the 7 asset requests (css,language,plugins,icons) is 633.46 KB / 180.47 KB (gzip).
|
||||
|
||||
Enable it in /data/\_data\_/\_default\_/configs/application.ini in the [labs] section add/edit: `use_squire_html_editor = On`
|
||||
|
||||
|
|
|
|||
|
|
@ -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
47
dev/External/SquireUI.js
vendored
|
|
@ -186,7 +186,16 @@ class SquireUI
|
|||
},
|
||||
/*
|
||||
bidi: {
|
||||
allowHtmlEditorBitiButtons
|
||||
bdoLtr: {
|
||||
html: '‎𝐁',
|
||||
cmd: () => this.doAction('bold','B'),
|
||||
hint: 'Bold'
|
||||
},
|
||||
bdoRtl: {
|
||||
html: '‏𝐁',
|
||||
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;
|
||||
|
|
|
|||
2
vendors/squire/build/squire.js
vendored
2
vendors/squire/build/squire.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue