From 7a89c999552c3e4060e819d785888aee6a7b03eb Mon Sep 17 00:00:00 2001 From: tophf Date: Wed, 28 Jun 2017 09:09:29 +0300 Subject: [PATCH] add double-click --- _locales/en/messages.json | 4 ++ edit.html | 3 ++ edit.js | 80 ++++++++++++++++++++++++++------------- 3 files changed, 61 insertions(+), 26 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 584bb716..c6a336cf 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -131,6 +131,10 @@ "message": "Selection only", "description": "Style editor's 'highglight' drop-down list option: highlight the occurrences of currently selected text" }, + "cm_resizeGripHint": { + "message": "Double-click to maximize/restore the height", + "description": "Tooltip for the resize grip in style editor" + }, "genericDisabledLabel": { "message": "Disabled", "description": "Used in various lists/options to indicate that something is disabled" diff --git a/edit.html b/edit.html index d770fd14..2bfbd888 100644 --- a/edit.html +++ b/edit.html @@ -681,6 +681,9 @@ + diff --git a/edit.js b/edit.js index fb3b7eeb..70f077f8 100644 --- a/edit.js +++ b/edit.js @@ -343,53 +343,60 @@ function acmeEventListener(event) { // replace given textarea with the CodeMirror editor function setupCodeMirror(textarea, index) { - var cm = CodeMirror.fromTextArea(textarea, {lint: null}); + const cm = CodeMirror.fromTextArea(textarea, {lint: null}); + const wrapper = cm.display.wrapper; - cm.on("change", indicateCodeChange); + cm.on('change', indicateCodeChange); if (prefs.get('editor.autocompleteOnTyping')) { cm.on('change', autocompleteOnTyping); cm.on('pick', autocompletePicked); } - cm.on("blur", function(cm) { + cm.on('blur', () => { editors.lastActive = cm; hotkeyRerouter.setState(true); - setTimeout(function() { - var cm = editors.lastActive; - var childFocused = cm.display.wrapper.contains(document.activeElement); - cm.display.wrapper.classList.toggle("CodeMirror-active", childFocused); - }, 0); + setTimeout(() => { + wrapper.classList.toggle('CodeMirror-active', wrapper.contains(document.activeElement)); + }); }); - cm.on("focus", function() { + cm.on('focus', () => { hotkeyRerouter.setState(false); - cm.display.wrapper.classList.add("CodeMirror-active"); + wrapper.classList.add('CodeMirror-active'); }); cm.on('mousedown', (cm, event) => toggleContextMenuDelete.call(cm, event)); - var resizeGrip = cm.display.wrapper.appendChild(document.createElement("div")); - resizeGrip.className = "resize-grip"; - resizeGrip.addEventListener("mousedown", function(e) { - e.preventDefault(); - var cm = e.target.parentNode.CodeMirror; - var minHeight = cm.defaultTextHeight() + let lastClickTime = 0; + const resizeGrip = wrapper.appendChild(template.resizeGrip.cloneNode(true)); + resizeGrip.onmousedown = event => { + if (event.button != 0) { + return; + } + event.preventDefault(); + if (Date.now() - lastClickTime < 500) { + lastClickTime = 0; + toggleSectionHeight(cm); + return; + } + lastClickTime = Date.now(); + const minHeight = cm.defaultTextHeight() + cm.display.lineDiv.offsetParent.offsetTop /* .CodeMirror-lines padding */ - + cm.display.wrapper.offsetHeight - cm.display.wrapper.clientHeight /* borders */; - cm.display.wrapper.style.pointerEvents = 'none'; + + wrapper.offsetHeight - wrapper.clientHeight /* borders */; + wrapper.style.pointerEvents = 'none'; document.body.style.cursor = 's-resize'; function resize(e) { - const cmPageY = cm.display.wrapper.getBoundingClientRect().top + window.scrollY; + const cmPageY = wrapper.getBoundingClientRect().top + window.scrollY; const height = Math.max(minHeight, e.pageY - cmPageY); - if (height != cm.display.wrapper.clientHeight) { + if (height != wrapper.clientHeight) { cm.setSize(null, height); } } - document.addEventListener("mousemove", resize); - document.addEventListener("mouseup", function resizeStop() { - document.removeEventListener("mouseup", resizeStop); - document.removeEventListener("mousemove", resize); - cm.display.wrapper.style.pointerEvents = ''; + document.addEventListener('mousemove', resize); + document.addEventListener('mouseup', function resizeStop() { + document.removeEventListener('mouseup', resizeStop); + document.removeEventListener('mousemove', resize); + wrapper.style.pointerEvents = ''; document.body.style.cursor = ''; }); - }); + }; editors.splice(index || editors.length, 0, cm); return cm; @@ -872,6 +879,27 @@ function toggleStyle() { save(); } +function toggleSectionHeight(cm) { + if (cm.state.toggleHeightSaved) { + // restore previous size + cm.setSize(null, cm.state.toggleHeightSaved); + cm.state.toggleHeightSaved = 0; + } else { + // maximize + const wrapper = cm.display.wrapper; + const allBounds = $('#sections').getBoundingClientRect(); + const pageExtrasHeight = allBounds.top + window.scrollY + + parseFloat(getComputedStyle($('#sections')).paddingBottom); + const sectionExtrasHeight = cm.getSection().clientHeight - wrapper.offsetHeight; + cm.state.toggleHeightSaved = wrapper.clientHeight; + cm.setSize(null, window.innerHeight - sectionExtrasHeight - pageExtrasHeight); + const bounds = cm.getSection().getBoundingClientRect(); + if (bounds.top < 0 || bounds.bottom > window.innerHeight) { + window.scrollBy(0, bounds.top); + } + } +} + function autocompleteOnTyping(cm, info, debounced) { if (cm.state.completionActive || info.origin && !info.origin.includes('input')