extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-30 03:54:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add range value counts

Browse Source
This commit is contained in:
zombieFox 2019-11-26 01:38:30 +00:00
parent 97c44dd3e5
commit 5dc1bc1675
3 changed files with 254 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/css/form.css
View File

@ -1241,6 +1241,25 @@ input[type="range"]:disabled::-moz-range-progress {
cursor: default;
}
.form-group-text-small,
.form-group-text-medium,
.form-group-text-large {
padding-left: 0.5em;
padding-right: 0.5em;
}
.form-group-text-small {
min-width: 3em;
}
.form-group-text-medium {
min-width: 6em;
}
.form-group-text-large {
min-width: 9em;
}
.form-group {
margin: 0 0 1em 0;
display: inline-flex;
@ -1274,7 +1293,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group>input[type="search"],
.form-group>input[type="tel"],
.form-group>input[type="text"],
.form-group>input[type="color"] {
.form-group>input[type="color"],
.form-group>input[type="range"] {
margin: 0;
border-radius: 0;
height: inherit;
@ -1302,7 +1322,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group>input[type="search"]:focus,
.form-group>input[type="tel"]:focus,
.form-group>input[type="text"]:focus,
.form-group>input[type="color"]:focus {
.form-group>input[type="color"]:focus,
.form-group>input[type="range"]:focus {
z-index: 2;
}
@ -1315,7 +1336,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group>input[type="search"]:hover,
.form-group>input[type="tel"]:hover,
.form-group>input[type="text"]:hover,
.form-group>input[type="color"]:hover {
.form-group>input[type="color"]:hover,
.form-group>input[type="range"]:hover {
z-index: 3;
}
@ -1329,7 +1351,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group>input[type="search"]:first-child,
.form-group>input[type="tel"]:first-child,
.form-group>input[type="text"]:first-child,
.form-group>input[type="color"]:first-child {
.form-group>input[type="color"]:first-child,
.form-group>input[type="range"]:first-child {
border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}
@ -1343,7 +1366,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group>input[type="search"]:last-child,
.form-group>input[type="tel"]:last-child,
.form-group>input[type="text"]:last-child,
.form-group>input[type="color"]:last-child {
.form-group>input[type="color"]:last-child,
.form-group>input[type="range"]:last-child {
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}
@ -1370,6 +1394,36 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}
.form-group .form-group-radius-left.form-group-text,
.form-group .form-group-radius-left.button,
.form-group>select.form-group-radius-left,
.form-group>input.form-group-radius-left[type="email"],
.form-group>input.form-group-radius-left[type="number"],
.form-group>input.form-group-radius-left[type="password"],
.form-group>input.form-group-radius-left[type="search"],
.form-group>input.form-group-radius-left[type="tel"],
.form-group>input.form-group-radius-left[type="text"],
.form-group>input.form-group-radius-left[type="color"],
.form-group>input.form-group-radius-left[type="range"] {
border-top-left-radius: var(--theme-radius);
border-bottom-left-radius: var(--theme-radius);
}
.form-group .form-group-radius-right.form-group-text,
.form-group .form-group-radius-right.button,
.form-group>select.form-group-radius-right,
.form-group>input.form-group-radius-right[type="email"],
.form-group>input.form-group-radius-right[type="number"],
.form-group>input.form-group-radius-right[type="password"],
.form-group>input.form-group-radius-right[type="search"],
.form-group>input.form-group-radius-right[type="tel"],
.form-group>input.form-group-radius-right[type="text"],
.form-group>input.form-group-radius-right[type="color"],
.form-group>input.form-group-radius-right[type="range"] {
border-top-right-radius: var(--theme-radius);
border-bottom-right-radius: var(--theme-radius);
}
.form-dropdown {
position: relative;
}

155
src/index.html
View File

@ -145,7 +145,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-width">Width</label>
<input id="control-layout-width" class="control-layout-width" type="range" min="5" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-layout-width" class="control-layout-width mr-3" type="range" min="5" max="100" value="0" tabindex="-1">
<div class="control-layout-width-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<hr>
<label class="control-layout-alignment-label">Area alignment</label>
@ -215,7 +218,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
<input id="control-layout-padding" class="control-layout-padding" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="control-layout-padding-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
</div>
</div>
@ -226,7 +232,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
<input id="control-layout-gutter" class="control-layout-gutter" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="control-layout-gutter-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
</div>
</div>
@ -256,7 +265,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-header-area-width">Width</label>
<input id="control-header-area-width" class="control-header-area-width" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-area-width" class="control-header-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-header-area-width-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-header-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
<div class="button-wrap">
@ -332,7 +344,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-greeting-size">Size</label>
<input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-greeting-size" class="control-header-greeting-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-greeting-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-header-greeting-size-default button mb-0" tabindex="-1">Default Greeting size</button>
@ -362,7 +377,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-transitional-size">Size</label>
<input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-transitional-size" class="control-header-transitional-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-transitional-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-header-transitional-size-default button mb-0" tabindex="-1">Default Transitional size</button>
@ -436,7 +454,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-clock-size">Size</label>
<input id="control-header-clock-size" class="control-header-clock-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-clock-size" class="control-header-clock-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-clock-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-header-clock-size-default button mb-0" tabindex="-1">Default Clock size</button>
@ -571,7 +592,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-date-size">Size</label>
<input id="control-header-date-size" class="control-header-date-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-date-size" class="control-header-date-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-date-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-header-date-size-default button mb-0" tabindex="-1">Default Date size</button>
@ -602,7 +626,10 @@
<div class="form-indent">
<div class="input-wrap">
<label for="control-header-search-width">Width</label>
<input id="control-header-search-width" class="control-header-search-width" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-search-width" class="control-header-search-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-header-search-width-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
</div>
<hr>
@ -670,7 +697,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-search-size">Size</label>
<input id="control-header-search-size" class="control-header-search-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-search-size" class="control-header-search-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-search-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
<div class="button-wrap">
@ -706,7 +736,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-button-size">Size</label>
<input id="control-header-button-size" class="control-header-button-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-button-size" class="control-header-button-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-header-button-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-header-button-size-default button mb-0" tabindex="-1">Default Button size</button>
@ -720,12 +753,18 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-header-border-top">Top</label>
<input id="control-header-border-top" class="control-header-border-top mb-0" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-border-top" class="control-header-border-top mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="control-header-border-top-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<hr>
<div class="input-wrap">
<label for="control-header-border-bottom">Bottom</label>
<input id="control-header-border-bottom" class="control-header-border-bottom" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-border-bottom" class="control-header-border-bottom mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="control-header-border-bottom-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
</div>
</div>
@ -771,7 +810,10 @@
<hr>
<div class="input-wrap">
<label for="control-header-shade-opacity">Opacity</label>
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-header-shade-opacity-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<hr>
<div class="input-wrap">
@ -796,7 +838,10 @@
<div class="form-indent">
<div class="input-wrap">
<label for="control-group-name-size">Name Size</label>
<input id="control-group-name-size" class="control-group-name-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-group-name-size" class="control-group-name-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
<div class="control-group-name-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-group-name-size-default button mb-0" tabindex="-1">Default Name size</button>
@ -845,7 +890,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-group-border">Between groups</label>
<input id="control-group-border" class="control-group-border mb-0" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-group-border" class="control-group-border mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
<div class="control-group-border-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-link-area-width-helper form-helper small">Border between groups may not be visible if there is only one group.</p>
</div>
@ -860,7 +908,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-link-area-width">Width</label>
<input id="control-link-area-width" class="control-link-area-width" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-link-area-width" class="control-link-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
<div class="control-link-area-width-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-link-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
<div class="button-wrap">
@ -899,7 +950,10 @@
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-size">Bookmark Size</label>
<input id="control-link-item-size" class="control-link-item-size" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-size" class="control-link-item-size mr-3" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
<div class="control-link-item-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-size-default button mb-0" tabindex="-1">Default Bookmark size</button>
@ -948,7 +1002,10 @@
<hr>
<div class="input-wrap">
<label for="control-link-item-display-rotate" class="">Content rotation</label>
<input id="control-link-item-display-rotate" class="control-link-item-display-rotate" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
<div class="control-link-item-display-rotate-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-rotate-default button mb-0" tabindex="-1">Default rotation</button>
@ -956,7 +1013,10 @@
<hr>
<div class="input-wrap">
<label for="control-link-item-display-translate-x" class="">Content horizontally offset</label>
<input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="control-link-item-display-translate-x-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-translate-x-default button mb-0" tabindex="-1">Default horizontal translate</button>
@ -964,7 +1024,10 @@
<hr>
<div class="input-wrap">
<label for="control-link-item-display-translate-y" class="">Content vertically offset</label>
<input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
<div class="control-link-item-display-translate-y-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-translate-y-default button mb-0" tabindex="-1">Default vertical translate</button>
@ -978,7 +1041,10 @@
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-display-letcon-letter-size">Letter size</label>
<input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default Letter size</button>
@ -986,7 +1052,10 @@
<hr>
<div class="input-wrap">
<label for="control-link-item-display-letcon-icon-size">Icon size</label>
<input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default Icon size</button>
@ -999,7 +1068,10 @@
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-display-name-size">Name size</label>
<input id="control-link-item-display-name-size" class="control-link-item-display-name-size" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-name-size-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
@ -1061,7 +1133,10 @@
<div class="menu-item-form">
<div class="input-wrap">
<label for="control-link-item-border">All sides</label>
<input id="control-link-item-border" class="control-link-item-border mb-0" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-link-item-border" class="control-link-item-border mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
<div class="control-link-item-border-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
</div>
</div>
@ -1194,7 +1269,10 @@
<hr>
<div class="input-wrap">
<label for="control-theme-radius">Radius</label>
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="10" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="300" value="0" step="10" tabindex="-1">
<div class="control-theme-radius-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
@ -1275,23 +1353,38 @@
<hr>
<div class="input-wrap">
<label for="control-background-image-opacity">Opacity</label>
<input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-background-image-opacity" class="control-background-image-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-opacity-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-grayscale">Grayscale</label>
<input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-background-image-grayscale" class="control-background-image-grayscale mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-grayscale-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-blur">Blur</label>
<input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-background-image-blur" class="control-background-image-blur mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
<div class="control-background-image-blur-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-accent">Accent overlay</label>
<input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="90" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="90" value="0" tabindex="-1">
<div class="control-background-image-accent-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
<div class="input-wrap">
<label for="control-background-image-scale">Size</label>
<input id="control-background-image-scale" class="control-background-image-scale" type="range" min="100" max="300" value="0" tabindex="-1">
<div class="form-group form-group-block mb-0">
<input id="control-background-image-scale" class="control-background-image-scale mr-3" type="range" min="100" max="300" value="0" tabindex="-1">
<div class="control-background-image-scale-count form-group-text form-group-text-medium form-group-radius-left"></div>
</div>
</div>
</div>
</div>

71
src/js/control.js
View File

@ -94,6 +94,7 @@ var control = (function() {
element: helper.e(".control-layout-width"),
path: "layout.width",
type: "range",
rangeCountElement: helper.e(".control-layout-width-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -136,6 +137,7 @@ var control = (function() {
func: function() {
render.class();
layout.render.width();
render.range.count(this);
}
}, {
element: helper.e(".control-layout-alignment-topleft"),
@ -222,6 +224,7 @@ var control = (function() {
element: helper.e(".control-layout-padding"),
path: "layout.padding",
type: "range",
rangeCountElement: helper.e(".control-layout-padding-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -263,11 +266,13 @@ var control = (function() {
}],
func: function() {
layout.render.padding();
render.range.count(this);
}
}, {
element: helper.e(".control-layout-gutter"),
path: "layout.gutter",
type: "range",
rangeCountElement: helper.e(".control-layout-gutter-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -309,6 +314,7 @@ var control = (function() {
}],
func: function() {
layout.render.gutter();
render.range.count(this);
}
}, {
element: helper.e(".control-layout-title"),
@ -329,6 +335,7 @@ var control = (function() {
element: helper.e(".control-header-area-width"),
path: "header.area.width",
type: "range",
rangeCountElement: helper.e(".control-header-area-width-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -370,6 +377,7 @@ var control = (function() {
}],
func: function() {
header.render.area.width();
render.range.count(this);
}
}, {
element: helper.e(".control-header-area-width-match"),
@ -512,6 +520,7 @@ var control = (function() {
path: "header.greeting.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-header-greeting-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -553,6 +562,7 @@ var control = (function() {
}],
func: function() {
header.render.greeting.size();
render.range.count(this);
}
}, {
element: helper.e(".control-header-greeting-size-default"),
@ -602,6 +612,7 @@ var control = (function() {
path: "header.transitional.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-header-transitional-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -643,6 +654,7 @@ var control = (function() {
}],
func: function() {
header.render.transitional.size();
render.range.count(this);
}
}, {
element: helper.e(".control-header-transitional-size-default"),
@ -816,6 +828,7 @@ var control = (function() {
path: "header.clock.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-header-clock-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -857,6 +870,7 @@ var control = (function() {
}],
func: function() {
header.render.clock.size();
render.range.count(this);
}
}, {
element: helper.e(".control-header-clock-size-default"),
@ -1168,6 +1182,7 @@ var control = (function() {
path: "header.date.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-header-date-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1209,6 +1224,7 @@ var control = (function() {
}],
func: function() {
header.render.date.size();
render.range.count(this);
}
}, {
element: helper.e(".control-header-date-size-default"),
@ -1276,6 +1292,7 @@ var control = (function() {
element: helper.e(".control-header-search-width"),
path: "header.search.width",
type: "range",
rangeCountElement: helper.e(".control-header-search-width-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1317,6 +1334,7 @@ var control = (function() {
}],
func: function() {
header.render.search.width();
render.range.count(this);
}
}, {
element: helper.e(".control-header-search-focus"),
@ -1410,6 +1428,7 @@ var control = (function() {
path: "header.search.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-header-search-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1451,6 +1470,7 @@ var control = (function() {
}],
func: function() {
header.render.search.size();
render.range.count(this);
}
}, {
element: helper.e(".control-header-search-size-default"),
@ -1504,6 +1524,7 @@ var control = (function() {
path: "header.button.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-header-button-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1545,6 +1566,7 @@ var control = (function() {
}],
func: function() {
header.render.button.size();
render.range.count(this);
}
}, {
element: helper.e(".control-header-button-size-default"),
@ -1593,8 +1615,10 @@ var control = (function() {
path: "header.shade.opacity",
type: "range",
valueMod: ["reverse", "float"],
rangeCountElement: helper.e(".control-header-shade-opacity-count"),
func: function() {
header.render.opacity();
render.range.count(this);
}
}, {
element: helper.e(".control-header-radius"),
@ -1616,6 +1640,7 @@ var control = (function() {
path: "group.name.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-group-name-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1657,6 +1682,7 @@ var control = (function() {
}],
func: function() {
link.render.group.size();
render.range.count(this);
}
}, {
element: helper.e(".control-group-name-size-default"),
@ -1714,25 +1740,31 @@ var control = (function() {
element: helper.e(".control-group-border"),
path: "group.border",
type: "range",
rangeCountElement: helper.e(".control-group-border-count"),
func: function() {
link.render.group.border();
render.class();
render.range.count(this);
}
}, {
element: helper.e(".control-header-border-top"),
path: "header.border.top",
type: "range",
rangeCountElement: helper.e(".control-header-border-top-count"),
func: function() {
header.render.border();
render.class();
render.range.count(this);
}
}, {
element: helper.e(".control-header-border-bottom"),
path: "header.border.bottom",
type: "range",
rangeCountElement: helper.e(".control-header-border-bottom-count"),
func: function() {
header.render.border();
render.class();
render.range.count(this);
}
}, {
element: helper.e(".control-header-position-sticky"),
@ -1752,6 +1784,7 @@ var control = (function() {
element: helper.e(".control-link-area-width"),
path: "link.area.width",
type: "range",
rangeCountElement: helper.e(".control-link-area-width-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1793,6 +1826,7 @@ var control = (function() {
}],
func: function() {
link.render.area.width();
render.range.count(this);
}
}, {
element: helper.e(".control-link-area-width-match"),
@ -1872,6 +1906,7 @@ var control = (function() {
path: "link.item.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-link-item-size-count"),
additionalEvents: [{
event: "input",
func: function() {
@ -1913,6 +1948,7 @@ var control = (function() {
}],
func: function() {
link.render.item.size();
render.range.count(this);
}
}, {
element: helper.e(".control-link-show"),
@ -2016,8 +2052,10 @@ var control = (function() {
path: "link.item.display.letcon.letter.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-link-item-display-letcon-letter-size-count"),
func: function() {
link.render.item.display.letter();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-letcon-letter-size-default"),
@ -2032,8 +2070,10 @@ var control = (function() {
path: "link.item.display.letcon.icon.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-link-item-display-letcon-icon-size-count"),
func: function() {
link.render.item.display.icon();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-letcon-icon-size-default"),
@ -2056,8 +2096,10 @@ var control = (function() {
path: "link.item.display.name.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-link-item-display-name-size-count"),
func: function() {
link.render.item.name();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-name-size-default"),
@ -2071,8 +2113,10 @@ var control = (function() {
element: helper.e(".control-link-item-display-rotate"),
path: "link.item.display.rotate",
type: "range",
rangeCountElement: helper.e(".control-link-item-display-rotate-count"),
func: function() {
link.render.item.rotate();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-rotate-default"),
@ -2087,8 +2131,10 @@ var control = (function() {
path: "link.item.display.translate.x",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-link-item-display-translate-x-count"),
func: function() {
link.render.item.translate.x();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-translate-x-default"),
@ -2103,8 +2149,10 @@ var control = (function() {
path: "link.item.display.translate.y",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-link-item-display-translate-y-count"),
func: function() {
link.render.item.translate.y();
render.range.count(this);
}
}, {
element: helper.e(".control-link-item-display-translate-y-default"),
@ -2182,9 +2230,11 @@ var control = (function() {
element: helper.e(".control-link-item-border"),
path: "link.item.border",
type: "range",
rangeCountElement: helper.e(".control-link-item-border-count"),
func: function() {
render.class();
link.render.item.border();
render.range.count(this);
}
}, {
element: helper.e(".control-link-style-block"),
@ -2289,9 +2339,11 @@ var control = (function() {
path: "theme.radius",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-theme-radius-count"),
func: function() {
theme.render.radius();
render.class();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-radius-default"),
@ -2440,39 +2492,49 @@ var control = (function() {
path: "background.image.opacity",
type: "range",
valueMod: ["reverse", "float"],
rangeCountElement: helper.e(".control-background-image-opacity-count"),
func: function() {
background.render.opacity();
render.range.count(this);
}
}, {
element: helper.e(".control-background-image-grayscale"),
path: "background.image.grayscale",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-background-image-grayscale-count"),
func: function() {
background.render.grayscale();
render.range.count(this);
}
}, {
element: helper.e(".control-background-image-blur"),
path: "background.image.blur",
type: "range",
rangeCountElement: helper.e(".control-background-image-blur-count"),
func: function() {
background.render.blur();
render.range.count(this);
}
}, {
element: helper.e(".control-background-image-accent"),
path: "background.image.accent",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-background-image-accent-count"),
func: function() {
background.render.accent();
render.range.count(this);
}
}, {
element: helper.e(".control-background-image-scale"),
path: "background.image.scale",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-background-image-scale-count"),
func: function() {
background.render.scale();
render.range.count(this);
}
}, {
element: helper.e(".control-data-import"),
@ -3527,9 +3589,18 @@ var control = (function() {
if (supportedType.includes(arrayItem.element.type)) {
setValue[arrayItem.type](arrayItem);
};
if (arrayItem.rangeCountElement) {
render.range.count(arrayItem);
};
});
};
render.range = {
count: function(control) {
control.rangeCountElement.textContent = control.element.value;
}
};
var init = function() {
bind.controls();
render.update();