From 41ad3366e4073ce16d43766ce4fb8807533ba53f Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 20 Sep 2016 11:23:29 +0200 Subject: [PATCH] Added editor autosave controls --- com.woltlab.wcf/templates/wysiwyg.tpl | 2 + .../install/files/acp/templates/wysiwyg.tpl | 2 + .../redactor2/plugins/WoltLabAutosave.js | 2 + .../WoltLabSuite/Core/Ui/Redactor/Autosave.js | 77 ++++++++++++++++++- wcfsetup/install/files/style/ui/redactor.scss | 47 +++++++++++ wcfsetup/install/lang/de.xml | 2 + wcfsetup/install/lang/en.xml | 2 + 7 files changed, 133 insertions(+), 1 deletion(-) diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl index 162b73b792..8d0a61da3e 100644 --- a/com.woltlab.wcf/templates/wysiwyg.tpl +++ b/com.woltlab.wcf/templates/wysiwyg.tpl @@ -54,6 +54,8 @@ 'wcf.attachment.dragAndDrop.dropHere': '{lang}wcf.attachment.dragAndDrop.dropHere{/lang}', 'wcf.attachment.dragAndDrop.dropNow': '{lang}wcf.attachment.dragAndDrop.dropNow{/lang}', + 'wcf.editor.autosave.restored': '{lang}wcf.editor.autosave.restored{/lang}', + 'wcf.editor.code.edit': '{lang}wcf.editor.code.edit{/lang}', 'wcf.editor.code.file': '{lang}wcf.editor.code.file{/lang}', 'wcf.editor.code.file.description': '{lang}wcf.editor.code.file.description{/lang}', diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl index 162b73b792..8d0a61da3e 100644 --- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl +++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl @@ -54,6 +54,8 @@ 'wcf.attachment.dragAndDrop.dropHere': '{lang}wcf.attachment.dragAndDrop.dropHere{/lang}', 'wcf.attachment.dragAndDrop.dropNow': '{lang}wcf.attachment.dragAndDrop.dropNow{/lang}', + 'wcf.editor.autosave.restored': '{lang}wcf.editor.autosave.restored{/lang}', + 'wcf.editor.code.edit': '{lang}wcf.editor.code.edit{/lang}', 'wcf.editor.code.file': '{lang}wcf.editor.code.file{/lang}', 'wcf.editor.code.file.description': '{lang}wcf.editor.code.file.description{/lang}', diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAutosave.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAutosave.js index 2c9762a26b..7b033d5399 100644 --- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAutosave.js +++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabAutosave.js @@ -7,6 +7,8 @@ $.Redactor.prototype.WoltLabAutosave = function() { if (this.opts.woltlab.autosave) { //noinspection JSUnresolvedVariable this.opts.woltlab.autosave.watch(this); + //noinspection JSUnresolvedVariable + this.opts.woltlab.autosave.createOverlay(); WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'autosaveDestroy_' + this.$element[0].id, this.WoltLabAutosave.destroy.bind(this)); WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'autosaveReset_' + this.$element[0].id, this.WoltLabAutosave.reset.bind(this)); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js index d964565cef..fd51448f62 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js @@ -7,7 +7,7 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Ui/Redactor/Autosave */ -define(['Dom/Traverse'], function(DomTraverse) { +define(['Language', 'Dom/Traverse'], function(Language, DomTraverse) { "use strict"; // time between save requests in seconds @@ -28,10 +28,14 @@ define(['Dom/Traverse'], function(DomTraverse) { * @param {Element} element textarea element */ init: function (element) { + this._container = null; this._editor = null; this._element = element; this._key = _prefix + elData(this._element, 'autosave'); this._lastMessage = ''; + this._originalMessage = ''; + this._overlay = null; + this._restored = false; this._timer = null; this._cleanup(); @@ -75,6 +79,10 @@ define(['Dom/Traverse'], function(DomTraverse) { return this._element.value; } + //noinspection JSUnresolvedVariable + this._originalMessage = this._element.value; + this._restored = true; + return value.content; } @@ -125,6 +133,71 @@ define(['Dom/Traverse'], function(DomTraverse) { } }, + /** + * Creates the autosave controls, used to keep or discard the restored draft. + */ + createOverlay: function () { + if (!this._restored) { + return; + } + + var container = elCreate('div'); + container.className = 'redactorAutosaveRestored active'; + + var title = elCreate('span'); + title.textContent = Language.get('wcf.editor.autosave.restored'); + container.appendChild(title); + + var button = elCreate('a'); + button.href = '#'; + button.innerHTML = ''; + button.addEventListener(WCF_CLICK_EVENT, (function (event) { + event.preventDefault(); + + this.hideOverlay(); + }).bind(this)); + container.appendChild(button); + + button = elCreate('a'); + button.href = '#'; + button.innerHTML = ''; + button.addEventListener(WCF_CLICK_EVENT, (function (event) { + event.preventDefault(); + + // remove from storage + this.clear(); + + // set code + this._editor.code.start(this._originalMessage); + + // set value + this._editor.core.textarea().val(this._editor.clean.onSync(this._editor.$editor.html())); + + this.hideOverlay(); + }).bind(this)); + container.appendChild(button); + + this._editor.core.box()[0].appendChild(container); + + this._container = container; + }, + + /** + * Hides the autosave controls. + */ + hideOverlay: function () { + if (this._container !== null) { + this._container.classList.remove('active'); + + window.setTimeout((function () { + elRemove(this._container); + + this._container = null; + this._originalMessage = ''; + }).bind(this), 1000); + } + }, + /** * Saves the current message to storage unless there was no change. * @@ -148,6 +221,8 @@ define(['Dom/Traverse'], function(DomTraverse) { })); this._lastMessage = content; + + this.hideOverlay(); } catch (e) { window.console.warn("Unable to write to local storage: " + e.message); diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index be3ca19efe..89456b6b52 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -606,3 +606,50 @@ } } } + +.redactorAutosaveRestored { + background-color: $wcfContentBackground; + border-top: 1px solid $wcfContentBorderInner; + bottom: 1px; + display: flex; + opacity: 0; + position: absolute; + right: 1px; + transition: opacity .12s linear, visibility 0s linear .12s; + visibility: hidden; + + &.active { + opacity: 1; + transition-delay: 0s; + visibility: visible; + } + + > a { + border-left: 1px solid $wcfContentBorderInner; + flex: 0 0 auto; + padding: 10px; + } + + > span { + color: $wcfContentDimmedText; + flex: 1 1 auto; + padding: 10px; + } + + @include screen-sm-up { + border-left: 1px solid $wcfContentBorderInner; + border-top-left-radius: 2px; + + > span { + padding: 10px 20px; + } + } + + @include screen-xs { + left: 1px; + + > span { + text-align: center; + } + } +} diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 5437a97a36..ebf10f99de 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -2350,6 +2350,8 @@ Fehler sind beispielsweise: + + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index fcbd6b9ea0..6630e0800a 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -2312,6 +2312,8 @@ Errors are: + + -- 2.20.1