From 34fa3547f028f704fee068419b1cacf6e9b3e111 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 10 Jun 2017 14:47:48 +0530 Subject: [PATCH] use select tag for mode dropdowns. more a11y. fixes #112. Also make font sizes flexible --- src/index.html | 56 +++++++++++++++++++++++++------------------------- src/script.js | 17 +++++++++------ src/style.css | 21 ++++++++++++++----- 3 files changed, 55 insertions(+), 39 deletions(-) diff --git a/src/index.html b/src/index.html index ba75022..df92b04 100644 --- a/src/index.html +++ b/src/index.html @@ -40,7 +40,8 @@
-
+ +
@@ -66,20 +67,19 @@ Open
-
-
+
+ +
@@ -88,17 +88,17 @@
-
+
+ +
@@ -107,15 +107,15 @@
-
+
+ +
@@ -721,4 +721,4 @@ - \ No newline at end of file + diff --git a/src/script.js b/src/script.js index cba2ad8..e66664b 100644 --- a/src/script.js +++ b/src/script.js @@ -551,6 +551,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl function updateHtmlMode(value) { htmlMode = value; htmlModelLabel.textContent = modes[value].label; + // FIXME - use a better selector for the mode selectbox + htmlModelLabel.parentElement.querySelector('select').value = value; scope.cm.html.setOption('mode', modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.html, modes[value].cmPath || modes[value].cmMode); return handleModeRequirements(value); @@ -558,6 +560,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl function updateCssMode(value) { cssMode = value; cssModelLabel.textContent = modes[value].label; + // FIXME - use a better selector for the mode selectbox + cssModelLabel.parentElement.querySelector('select').value = value; scope.cm.css.setOption('mode', modes[value].cmMode); scope.cm.css.setOption('readOnly', modes[value].cmDisable); CodeMirror.autoLoadMode(scope.cm.css, modes[value].cmPath || modes[value].cmMode); @@ -566,6 +570,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl function updateJsMode(value) { jsMode = value; jsModelLabel.textContent = modes[value].label; + // FIXME - use a better selector for the mode selectbox + jsModelLabel.parentElement.querySelector('select').value = value; scope.cm.js.setOption('mode', modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.js, modes[value].cmPath || modes[value].cmMode); return handleModeRequirements(value); @@ -1508,11 +1514,10 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl }); // Attach listeners on mode change menu items - var modeItems = $all('.js-modes-menu a'); - modeItems.forEach(function (item) { - item.addEventListener('click', function (e) { - var mode = e.currentTarget.dataset.mode; - var type = e.currentTarget.dataset.type; + $all('.js-mode-select').forEach((selectBox) => { + selectBox.addEventListener('change', function (e) { + var mode = e.target.value; + var type = e.target.dataset.type; var currentMode = type === 'html' ? htmlMode : (type === 'css' ? cssMode : jsMode); if (currentMode !== mode) { if (type === 'html') { @@ -1832,4 +1837,4 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl init(); -})(window.alertsService); \ No newline at end of file +})(window.alertsService); diff --git a/src/style.css b/src/style.css index f823f9b..00ffe47 100644 --- a/src/style.css +++ b/src/style.css @@ -10,6 +10,7 @@ body { background: var(--color-bg); color: rgba(255,255,255,0.9); min-height: 100vh; + font-size: 87.5%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; } h1 { @@ -64,6 +65,14 @@ select, input[type="text"], input[type="number"], textarea { padding: 3px 5px; font-size: inherit; } +.hidden-select { + opacity: 0; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} .btn { display: inline-block; border: 0; @@ -188,7 +197,7 @@ select, input[type="text"], input[type="number"], textarea { .code-wrap__header-label { /*transform: translate(0px) scale(1.2);*/ display: inline-block; - font-size: 1.3em; + font-size: 1.1em; opacity: 0.5; /*transform-origin: left center;*/ } @@ -287,6 +296,8 @@ li.CodeMirror-hint-active { z-index: 1; } .main-header { + display: flex; + flex-wrap: nowrap; border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); } @@ -383,7 +394,7 @@ li.CodeMirror-hint-active { background: none; border: 0; color: rgba(255,255,255,0.6); - width: calc(100vw - 440px); + flex: 1; } .search-input { background: rgba(255, 255, 255, 0.1); @@ -419,7 +430,7 @@ li.CodeMirror-hint-active { margin: 0 auto; opacity: 0; padding: 2em; - font-size: 1.3em; + font-size: 1.1em; line-height: 1.4; max-height: 90vh; box-sizing: border-box; @@ -567,7 +578,7 @@ li.CodeMirror-hint-active { } .saved-item-tile__title { pointer-events: none; - font-size: 1.6em; + font-size: 1.4em; margin: 0 0 1em 0; opacity: 0.8; } @@ -873,4 +884,4 @@ li.CodeMirror-hint-active { } .console:not(.is-minimized) .code-wrap__header { cursor: ns-resize; -} \ No newline at end of file +}