From f05debf6865d7b7834aeab8956e19f4de29789ea Mon Sep 17 00:00:00 2001 From: tophf Date: Sat, 2 Dec 2017 00:49:59 +0300 Subject: [PATCH] popup: show hotkey info upon clicking the area on the right --- _locales/en/messages.json | 8 ++++ popup.html | 2 + popup/hotkeys.js | 63 +++++++++++++++++++++++++++++ popup/popup.css | 83 ++++++++++++++++++++++++++++++++++++++- 4 files changed, 154 insertions(+), 2 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 461b65d7..e7f5877e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -639,6 +639,14 @@ "message": "Shift-click or right-click opens manager with styles applicable for current site", "description": "Tooltip for the 'Manage' button in the popup." }, + "popupHotkeysInfo": { + "message": "<1>-<9>, <0>, also on numpad - toggles Nth style (0 is 10)\n- toggles first style with a name that starts with the letter\n opens editor instead of toggling\n enables listed styles\n disables listed styles\n and <`> (backtick) - toggles initially enabled styles; doesn't apply to subsequently enabled styles while the popup is open so you can restore the initial selection after testing stuff: simply disable all, then toggle i.e. \nMore info on wiki", + "description": "NOTE1: preserve < and > symbols so that is styled as a key.\nNOTE2: the last line is displayed as a text of the link to the wiki page.\nNOTE3: this is the list of hotkeys displayed after clicking the right edge of the extension popup." + }, + "popupHotkeysTooltip": { + "message": "Click to see available hotkeys", + "description": "Tooltip displayed when hovering the right edge of the extension popup" + }, "popupOpenEditInWindow": { "message": "Open editor in a new window", "description": "Label for the checkbox controlling 'edit' action behavior in the popup." diff --git a/popup.html b/popup.html index 7582c80f..f844adbf 100644 --- a/popup.html +++ b/popup.html @@ -102,6 +102,8 @@ + +
diff --git a/popup/hotkeys.js b/popup/hotkeys.js index f5ab526d..12820168 100644 --- a/popup/hotkeys.js +++ b/popup/hotkeys.js @@ -8,6 +8,7 @@ window.addEventListener('showStyles:done', function _() { let togglables = getTogglables(); window.addEventListener('keydown', onKeyDown); + initHotkeyInfo(); return; function onKeyDown(event) { @@ -102,4 +103,66 @@ window.addEventListener('showStyles:done', function _() { } }); } + + function initHotkeyInfo() { + const container = $('#hotkey-info'); + let title; + container.onclick = ({target}) => { + if (target.localName === 'button') { + close(); + } else if (!container.dataset.active) { + open(); + } + }; + + function close() { + delete container.dataset.active; + document.body.style.height = ''; + container.title = title; + } + + function open() { + title = container.title; + container.title = ''; + container.dataset.active = true; + if (!container.firstElementChild) { + buildElement(); + } + const height = 4 + + container.firstElementChild.scrollHeight + + container.lastElementChild.scrollHeight + + parseFloat(getComputedStyle(container.firstElementChild).paddingBottom) * 4; + if (height > document.body.clientHeight) { + document.body.style.height = height + 'px'; + } + } + + function buildElement() { + const keysToElements = line => + line + .split(/(<.*?>)/) + .map(s => (!s.startsWith('<') ? s : + $element({tag: 'mark', textContent: s.slice(1, -1)}))); + const linesToElements = text => + text + .trim() + .split('\n') + .map((line, i, array) => + $element(i < array.length - 1 ? { + tag: 'p', + appendChild: keysToElements(line), + } : { + tag: 'a', + target: '_blank', + href: 'https://github.com/openstyles/stylus/wiki/Popup', + textContent: line, + })); + [ + linesToElements(t('popupHotkeysInfo')), + $element({tag: 'button', textContent: t('confirmOK')}), + ].forEach(child => { + container.appendChild($element({appendChild: child})); + }); + } + } }); diff --git a/popup/popup.css b/popup/popup.css index d1845581..08130452 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -109,21 +109,27 @@ body.blocked > DIV { display: flex; align-items: center; padding: 5px 0.75em; + position: relative; } .entry:nth-child(even) { background-color: rgba(0, 0, 0, 0.05); } -.entry:nth-child(-n+10):before { +.entry:nth-child(-n+10):before, +.entry:nth-child(10):before { counter-increment: style-number; content: counter(style-number); position: absolute; + top: .9ex; right: 5px; - margin-top: 1px; color: #aaa; } +.entry:nth-child(10):before { + content: "0"; +} + .entry .style-edit-link { margin-right: 2px; } @@ -231,6 +237,9 @@ a:hover .svg-icon { body > .actions { margin-top: 0.5em; + /* raise the actions above the hotkey-info */ + position: relative; + z-index: 4; } .actions > div:not(:last-child):not(#disable-all-wrapper), @@ -439,6 +448,76 @@ body.blocked .actions > .left-gutter { margin: 0; } +/******************************************/ + +#hotkey-info { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 16px; + cursor: help; + margin: 0; + padding: 0; + z-index: 1; + hyphens: auto; +} + +#hotkey-info:not([data-active]) > * { + display: none; +} + +#hotkey-info[data-active] { + left: 6ex; + width: auto; + cursor: auto; + display: flex; + flex-direction: column; + border-left: 2px solid white; + box-shadow: 0 0 90px rgba(0, 0, 0, .5); + z-index: 5; +} + +#hotkey-info div:first-child { + flex-grow: 1; + padding: 0 1em; + font-size: 11px; + overflow-y: auto; +} + +#hotkey-info div { + padding: 1em; + border-top: 1px solid #ddd; + background-color: white; +} + +#hotkey-info div:last-child { + box-shadow: 0 0 90px rgba(0, 0, 0, .25); + position: relative; +} + +#hotkey-info p { + text-indent: -3px; +} + +#hotkey-info p:last-child { + margin-bottom: 0; +} + +#hotkey-info mark { + display: inline-block; + background: linear-gradient(#ccc, #fff); + padding: 1px 6px 0; + margin: 2px; + border: 1px solid white; + border-radius: 4px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, .3); + font-weight: bold; + white-space: nowrap; +} + +/******************************************/ + @keyframes lights-off { from { background-color: transparent;