mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-13 18:16: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

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);