mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 10:36:19 +02:00
Code Issues Releases Wiki Activity

use select tag for mode dropdowns. more a11y. fixes #112. Also make font sizes flexible

Browse Source
This commit is contained in:
Kushagra Gour
2017-06-10 14:47:48 +05:30
parent ba98ddfc3b
commit 34fa3547f0
3 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/index.html
View File

@ -40,7 +40,8 @@
<body> <body>
<div class="main-container"> <div class="main-container">
<div class="main-header"> <div class="main-header">
<div class="main-header__btn-wrap fr flex flex-v-center"> <input type="text" id="js-title-input" title="Click to edit" class="item-title-input" value="Untitled Work">
<div class="main-header__btn-wrap flex flex-v-center">
<a id="runBtn" class="hide flex flex-v-center hint--rounded hint--bottom-left" aria-label="Run preview (Ctrl/⌘ + Shift + 5)" d-click="setPreviewContent"> <a id="runBtn" class="hide flex flex-v-center hint--rounded hint--bottom-left" aria-label="Run preview (Ctrl/⌘ + Shift + 5)" d-click="setPreviewContent">
<svg style="width: 14px; height: 14px;"> <svg style="width: 14px; height: 14px;">
<use xlink:href="#play-icon"></use> <use xlink:href="#play-icon"></use>
@ -66,20 +67,19 @@
</svg>Open </svg>Open
</a> </a>
</div> </div>
<input type="text" id="js-title-input" title="Click to edit" class="item-title-input" value="Untitled Work">
</div> </div>
<div class="content-wrap flex flex-grow"> <div class="content-wrap flex flex-grow">
<div class="code-side" id="js-code-side"> <div class="code-side" id="js-code-side">
<div data-code-wrap-id="0" id="js-html-code" data-type="html" class="code-wrap"> <div data-code-wrap-id="0" id="js-html-code" data-type="html" class="code-wrap">
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane"> <div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
<div class="btn-group" dropdown title="Click to change"> <label class="btn-group" dropdow title="Click to change">
<span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span> <span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span>
<ul class="js-modes-menu dropdown__menu"> <select data-type="html" class="js-mode-select hidden-select" name="">
<li><a data-type="html" data-mode="html">HTML</a></li> <option value="html">HTML</option>
<li><a data-type="html" data-mode="markdown">Markdown</a></li> <option value="markdown">Markdown</option>
<li><a data-type="html" data-mode="jade">Pug</a></li> <option value="jade">Pug</option>
</ul> </select>
</div> </label>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane"> <a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
</a> </a>
@ -88,17 +88,17 @@
</div> </div>
<div data-code-wrap-id="1" id="js-css-code" data-type="css" class="code-wrap"> <div data-code-wrap-id="1" id="js-css-code" data-type="css" class="code-wrap">
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane"> <div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
<div class="btn-group" dropdown title="Click to change"> <label class="btn-group" title="Click to change">
<span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span> <span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span>
<ul class="js-modes-menu dropdown__menu"> <select data-type="css" class="js-mode-select hidden-select" name="">
<li><a data-type="css" data-mode="css">CSS</a></li> <option value="css">CSS</option>
<li><a data-type="css" data-mode="scss">SCSS</a></li> <option value="scss">SCSS</option>
<li><a data-type="css" data-mode="sass">SASS</a></li> <option value="sass">SASS</option>
<li><a data-type="css" data-mode="less">LESS</a></li> <option value="less">LESS</option>
<li><a data-type="css" data-mode="stylus">Stylus</a></li> <option value="stylus">Stylus</option>
<li><a data-type="css" data-mode="acss">Atomic CSS</a></li> <option value="acss">Atomic CSS</option>
</ul> </select>
</div> </label>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane"> <a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
</a> </a>
@ -107,15 +107,15 @@
</div> </div>
<div data-code-wrap-id="2" id="js-js-code" data-type="js" class="code-wrap"> <div data-code-wrap-id="2" id="js-js-code" data-type="js" class="code-wrap">
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane"> <div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
<div class="btn-group" dropdown title="Click to change"> <label class="btn-group" title="Click to change">
<span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span> <span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span>
<ul class="js-modes-menu dropdown__menu"> <select data-type="js" class="js-mode-select hidden-select">
<li><a data-type="js" data-mode="js">JS</a></li> <option value="js">JS</option>
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li> <option value="coffee">CoffeeScript</option>
<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li> <option value="es6">ES6 (Babel)</option>
<li><a data-type="js" data-mode="typescript">TypeScript</a></li> <option value="typescript">TypeScript</option>
</ul> </select>
</div> </label>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane"> <a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
</a> </a>

15
src/script.js
View File

@ -551,6 +551,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
function updateHtmlMode(value) { function updateHtmlMode(value) {
htmlMode = value; htmlMode = value;
htmlModelLabel.textContent = modes[value].label; 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); scope.cm.html.setOption('mode', modes[value].cmMode);
CodeMirror.autoLoadMode(scope.cm.html, modes[value].cmPath || modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.html, modes[value].cmPath || modes[value].cmMode);
return handleModeRequirements(value); return handleModeRequirements(value);
@ -558,6 +560,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
function updateCssMode(value) { function updateCssMode(value) {
cssMode = value; cssMode = value;
cssModelLabel.textContent = modes[value].label; 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('mode', modes[value].cmMode);
scope.cm.css.setOption('readOnly', modes[value].cmDisable); scope.cm.css.setOption('readOnly', modes[value].cmDisable);
CodeMirror.autoLoadMode(scope.cm.css, modes[value].cmPath || modes[value].cmMode); 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) { function updateJsMode(value) {
jsMode = value; jsMode = value;
jsModelLabel.textContent = modes[value].label; 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); scope.cm.js.setOption('mode', modes[value].cmMode);
CodeMirror.autoLoadMode(scope.cm.js, modes[value].cmPath || modes[value].cmMode); CodeMirror.autoLoadMode(scope.cm.js, modes[value].cmPath || modes[value].cmMode);
return handleModeRequirements(value); return handleModeRequirements(value);
@ -1508,11 +1514,10 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyl
}); });
// Attach listeners on mode change menu items // Attach listeners on mode change menu items
var modeItems = $all('.js-modes-menu a'); $all('.js-mode-select').forEach((selectBox) => {
modeItems.forEach(function (item) { selectBox.addEventListener('change', function (e) {
item.addEventListener('click', function (e) { var mode = e.target.value;
var mode = e.currentTarget.dataset.mode; var type = e.target.dataset.type;
var type = e.currentTarget.dataset.type;
var currentMode = type === 'html' ? htmlMode : (type === 'css' ? cssMode : jsMode); var currentMode = type === 'html' ? htmlMode : (type === 'css' ? cssMode : jsMode);
if (currentMode !== mode) { if (currentMode !== mode) {
if (type === 'html') { if (type === 'html') {

19
src/style.css
View File

@ -10,6 +10,7 @@ body {
background: var(--color-bg); background: var(--color-bg);
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
min-height: 100vh; min-height: 100vh;
font-size: 87.5%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
} }
h1 { h1 {
@ -64,6 +65,14 @@ select, input[type="text"], input[type="number"], textarea {
padding: 3px 5px; padding: 3px 5px;
font-size: inherit; font-size: inherit;
} }
.hidden-select {
opacity: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.btn { .btn {
display: inline-block; display: inline-block;
border: 0; border: 0;
@ -188,7 +197,7 @@ select, input[type="text"], input[type="number"], textarea {
.code-wrap__header-label { .code-wrap__header-label {
/*transform: translate(0px) scale(1.2);*/ /*transform: translate(0px) scale(1.2);*/
display: inline-block; display: inline-block;
font-size: 1.3em; font-size: 1.1em;
opacity: 0.5; opacity: 0.5;
/*transform-origin: left center;*/ /*transform-origin: left center;*/
} }
@ -287,6 +296,8 @@ li.CodeMirror-hint-active {
z-index: 1; z-index: 1;
} }
.main-header { .main-header {
display: flex;
flex-wrap: nowrap;
border: 0; border: 0;
border-bottom: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14);
} }
@ -383,7 +394,7 @@ li.CodeMirror-hint-active {
background: none; background: none;
border: 0; border: 0;
color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.6);
width: calc(100vw - 440px); flex: 1;
} }
.search-input { .search-input {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
@ -419,7 +430,7 @@ li.CodeMirror-hint-active {
margin: 0 auto; margin: 0 auto;
opacity: 0; opacity: 0;
padding: 2em; padding: 2em;
font-size: 1.3em; font-size: 1.1em;
line-height: 1.4; line-height: 1.4;
max-height: 90vh; max-height: 90vh;
box-sizing: border-box; box-sizing: border-box;
@ -567,7 +578,7 @@ li.CodeMirror-hint-active {
} }
.saved-item-tile__title { .saved-item-tile__title {
pointer-events: none; pointer-events: none;
font-size: 1.6em; font-size: 1.4em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
opacity: 0.8; opacity: 0.8;
} }