mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 22:06:30 +02:00
Code Issues Releases Wiki Activity

Form checkbox hookup for flavor page

Browse Source
This commit is contained in:
Angelos Chalaris
2018-05-16 19:37:08 +03:00
parent 211895eb0e
commit 87b91d02d2
3 changed files with 50 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/doc-fragments/buildYourOwnFlavor.js
View File

@@ -242,8 +242,8 @@ module.exports = {
<p>The <strong>Input control</strong> module contains styling rules for forms, input elements and buttons. This module is not always enabled, but it's highly recommended that you enable it, as some other components depend on its functionality to work properly.</p>
<form id="inputControl">
<div class="input-group">
<label for="layoutEnabled">Module enabled? (recommended)</label>
<input type="checkbox" checked autocomplete="off" id="layoutEnabled"/>
<label for="inputControlEnabled">Module enabled? (recommended)</label>
<input type="checkbox" checked autocomplete="off" id="inputControlEnabled"/>
</div>
<fieldset>
<legend id="forms-and-input">Forms &amp; input</legend>
@@ -819,6 +819,9 @@ module.exports = {
autoUpdatePairs.forEach(function(v){
autoUpdate(document.getElementById(v[0]), document.getElementById(v[1]));
});
controlDisablerPairs.forEach(function(v){
changeFormControls(v[0], v[1]);
});
}
var previewPairs = [
['foreColor','foreColorPreview'],
@@ -937,6 +940,24 @@ module.exports = {
['spinnerDonutBackColor', 'progressBackColor'],
['spinnerDonutForeColor', 'progressForeColor']
];
var controlDisablerPairs = [
['layoutEnabled', 'layout'],
['inputControlEnabled','inputControl'],
['navigationEnabled', 'navigation'],
['tableEnabled', 'table'],
['contextualEnabled', 'contextual'],
['progressEnabled', 'progress'],
['iconsEnabled', 'icons'],
['utilityEnabled', 'utility']
];
function changeFormControls(element, form){
document.getElementById(element).addEventListener('input', function(e){
if(e.target.checked)
Array.prototype.slice.call(document.querySelectorAll('#'+form+' :not(#'+element+')')).forEach(v => v.disabled = false);
else
Array.prototype.slice.call(document.querySelectorAll('#'+form+' :not(#'+element+')')).forEach(v => v.disabled = true);
});
}
function updateColorPreview(element, value) { document.getElementById(element).style.background = value }
function autoPreview(element, previewElement){
element.addEventListener('input', function(e){ updateColorPreview(previewElement, e.target.value)});

4
docs/v3/DEVLOG.md
View File

@@ -339,3 +339,7 @@
- Generalized flavor page previews.
- Hooked up most of the flavor page automatic updates.
- Updated flavor page with `autocomplete="off"` for all `input` fields.
## 20180516
- Made switches disable the controls for each form as necessary in the flavors page.

25
docs/v3/flavors.html
View File

@@ -266,8 +266,8 @@
<p>The <strong>Input control</strong> module contains styling rules for forms, input elements and buttons. This module is not always enabled, but it's highly recommended that you enable it, as some other components depend on its functionality to work properly.</p>
<form id="inputControl">
<div class="input-group">
<label for="layoutEnabled">Module enabled? (recommended)</label>
<input type="checkbox" checked autocomplete="off" id="layoutEnabled"/>
<label for="inputControlEnabled">Module enabled? (recommended)</label>
<input type="checkbox" checked autocomplete="off" id="inputControlEnabled"/>
</div>
<fieldset>
<legend id="forms-and-input">Forms &amp; input</legend>
@@ -843,6 +843,9 @@
autoUpdatePairs.forEach(function(v){
autoUpdate(document.getElementById(v[0]), document.getElementById(v[1]));
});
controlDisablerPairs.forEach(function(v){
changeFormControls(v[0], v[1]);
});
}
var previewPairs = [
['foreColor','foreColorPreview'],
@@ -961,6 +964,24 @@
['spinnerDonutBackColor', 'progressBackColor'],
['spinnerDonutForeColor', 'progressForeColor']
];
var controlDisablerPairs = [
['layoutEnabled', 'layout'],
['inputControlEnabled','inputControl'],
['navigationEnabled', 'navigation'],
['tableEnabled', 'table'],
['contextualEnabled', 'contextual'],
['progressEnabled', 'progress'],
['iconsEnabled', 'icons'],
['utilityEnabled', 'utility']
];
function changeFormControls(element, form){
document.getElementById(element).addEventListener('input', function(e){
if(e.target.checked)
Array.prototype.slice.call(document.querySelectorAll('#'+form+' :not(#'+element+')')).forEach(v => v.disabled = false);
else
Array.prototype.slice.call(document.querySelectorAll('#'+form+' :not(#'+element+')')).forEach(v => v.disabled = true);
});
}
function updateColorPreview(element, value) { document.getElementById(element).style.background = value }
function autoPreview(element, previewElement){
element.addEventListener('input', function(e){ updateColorPreview(previewElement, e.target.value)});