mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 02:26:20 +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

56
src/index.html
View File

@ -40,7 +40,8 @@
<body>
<div class="main-container">
<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">
<svg style="width: 14px; height: 14px;">
<use xlink:href="#play-icon"></use>
@ -66,20 +67,19 @@
</svg>Open
</a>
</div>
<input type="text" id="js-title-input" title="Click to edit" class="item-title-input" value="Untitled Work">
</div>
<div class="content-wrap flex flex-grow">
<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 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>
<ul class="js-modes-menu dropdown__menu">
<li><a data-type="html" data-mode="html">HTML</a></li>
<li><a data-type="html" data-mode="markdown">Markdown</a></li>
<li><a data-type="html" data-mode="jade">Pug</a></li>
</ul>
</div>
<select data-type="html" class="js-mode-select hidden-select" name="">
<option value="html">HTML</option>
<option value="markdown">Markdown</option>
<option value="jade">Pug</option>
</select>
</label>
<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>
@ -88,17 +88,17 @@
</div>
<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="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>
<ul class="js-modes-menu dropdown__menu">
<li><a data-type="css" data-mode="css">CSS</a></li>
<li><a data-type="css" data-mode="scss">SCSS</a></li>
<li><a data-type="css" data-mode="sass">SASS</a></li>
<li><a data-type="css" data-mode="less">LESS</a></li>
<li><a data-type="css" data-mode="stylus">Stylus</a></li>
<li><a data-type="css" data-mode="acss">Atomic CSS</a></li>
</ul>
</div>
<select data-type="css" class="js-mode-select hidden-select" name="">
<option value="css">CSS</option>
<option value="scss">SCSS</option>
<option value="sass">SASS</option>
<option value="less">LESS</option>
<option value="stylus">Stylus</option>
<option value="acss">Atomic CSS</option>
</select>
</label>
<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>
@ -107,15 +107,15 @@
</div>
<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="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>
<ul class="js-modes-menu dropdown__menu">
<li><a data-type="js" data-mode="js">JS</a></li>
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li>
<li><a data-type="js" data-mode="typescript">TypeScript</a></li>
</ul>
</div>
<select data-type="js" class="js-mode-select hidden-select">
<option value="js">JS</option>
<option value="coffee">CoffeeScript</option>
<option value="es6">ES6 (Babel)</option>
<option value="typescript">TypeScript</option>
</select>
</label>
<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>
@ -721,4 +721,4 @@
<script src="script.js"></script>
<script src="dropdown.js"></script>
</body>
</html>
</html>

17
src/script.js
View File

@ -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);
})(window.alertsService);

21
src/style.css
View File

@ -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;
}
}