Skip to content

Commit 2dc6c71

Browse files
ve3ve3
committed
v2.4.7
New custom input range with datalist.
1 parent 4323fe1 commit 2dc6c71

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+403
-141
lines changed

‎.dev-notes/todos.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
https://github.com/vadikom/smartmenus/issues/95
33
@see `hotfixLongSidebarSubmenus()` method in **rundiz-template-admin.js** file.
44
- [ ] Update accordion CSS transition to be smoother. (rdta-accordion.css - currently not working on some browsers.)
5-
- [ ] Update accordion CSS for `<details>` & `<summary>` to be same design and transition as original accordion. (rdta-accordion.css - currently not working on some browsers.)
5+
- [ ] Update accordion CSS for `<details>` & `<summary>` to be same design and transition as original accordion. (rdta-accordion.css - currently not working on some browsers.)
6+
- [ ] Add input range progress for Webkit engine (Chrome, MS Edge, Opera) when there is selector available. It's in **assets-src/css/rdta/typo-and-form/_form-input-range.css**.

‎_original-source-php/form.php‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,40 @@
230230
</form>
231231
<h5>Source</h5>
232232
<pre class="preview-source" data-target-src=".code-sample-form-inputrange" data-target-src-remove-first-space="20"></pre>
233+
<h4>Custom input range with <code>datalist</code></h4>
234+
<p class="rdta-version-info">(Since v.2.4.7)</p>
235+
<form class="rd-form code-sample-form-inputrange-with-datalist">
236+
<div class="form-group">
237+
<label class="control-label" for="input-range-datalist">Range with <code>datalist</code></label>
238+
<div class="control-wrapper">
239+
<div class="rd-input-range-with-datalist">
240+
<input id="input-range-datalist" type="range" list="input-range-datalist-datalist" min="0" max="500" step="any">
241+
<datalist id="input-range-datalist-datalist">
242+
<option value="0"></option>
243+
<option value="25"></option>
244+
<option value="50"></option>
245+
<option value="75"></option>
246+
<option value="100"></option>
247+
</datalist>
248+
</div>
249+
</div>
250+
</div>
251+
<div class="form-group">
252+
<label class="control-label" for="input-range-datalist2">Range with <code>datalist</code> and <code>label</code></label>
253+
<div class="control-wrapper">
254+
<div class="rd-input-range-with-datalist">
255+
<input id="input-range-datalist2" type="range" list="input-range-datalist2-datalist" min="0" max="500" step="any">
256+
<datalist id="input-range-datalist2-datalist">
257+
<option value="0" label="0"></option>
258+
<option value="50" label="50"></option>
259+
<option value="100" label="100"></option>
260+
</datalist>
261+
</div>
262+
</div>
263+
</div>
264+
</form>
265+
<h5>Source</h5>
266+
<pre class="preview-source" data-target-src=".code-sample-form-inputrange-with-datalist" data-target-src-remove-first-space="20"></pre>
233267
<h3>Select box</h3>
234268
<form class="rd-form code-sample-form-selectbox">
235269
<div class="form-group">
@@ -358,6 +392,12 @@
358392
</div>
359393
</div>
360394
</fieldset>
395+
<div class="form-group">
396+
<label class="control-label" for="form-horizontal-input-range-datalist">Range</label>
397+
<div class="control-wrapper">
398+
<input id="form-horizontal-input-range-datalist" type="range">
399+
</div>
400+
</div>
361401
<div class="form-group">
362402
<label class="control-label" for="input-select2">Select box</label>
363403
<div class="control-wrapper">

‎accordion.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<link rel="stylesheet" href="assets/css/smartmenus/sm-core-css.css?npm-v=1.1.1">
1414
<link rel="stylesheet" href="assets/css/smartmenus/sm-rdta/sm-rdta.css?v=49e159bb1b8cc5ae941d93c1508e901e">
1515

16-
<link rel="stylesheet" href="assets/css/rdta/typo-and-form/typo-and-form.css?v=67a4c4e3f1011120e7ea2e5cc64aee15">
17-
<link rel="stylesheet" href="assets/css/rdta/rundiz-template-admin.css?v=e2ece3963ae0f04496d81e5720b4b8ad">
16+
<link rel="stylesheet" href="assets/css/rdta/typo-and-form/typo-and-form.css?v=ed556a40d8dfb70c992f8b55e542d1f0">
17+
<link rel="stylesheet" href="assets/css/rdta/rundiz-template-admin.css?v=15d425f5ccc6b1eee956ba15dfe00075">
1818

1919
<link class="exclude-preview" rel="stylesheet" href="assets/css-preview/prism.css?v=de20a76f891181fd461354e782db7a0f">
2020
<link class="exclude-preview" rel="stylesheet" href="assets/css-preview/documents.css?v=723a2316bd4d6e8a361b431002473a2c">
@@ -403,7 +403,7 @@ <h5>Source</h5>
403403
</main>
404404
<footer>
405405
<div class="rd-page-footer-left">Visit my <a href="https://github.com/Rundiz/rundiz-template-for-admin" target="_blank">GitHub</a></div>
406-
<div class="rd-page-footer-right"><a href="https://rundiz.com" target="_blank">Rundiz</a> template for admin 2.4.7dev-20250520</div>
406+
<div class="rd-page-footer-right"><a href="https://rundiz.com" target="_blank">Rundiz</a> template for admin 2.4.7</div>
407407
</footer>
408408
</div><!--.rd-page-wrapper-->
409409

@@ -421,7 +421,7 @@ <h5>Source</h5>
421421
<script src="assets/js/sticky-sidebar/jquery.sticky-sidebar.min.js?npm-v=3.3.1"></script>
422422
<script src="assets/js/resize-sensor/ResizeSensor.js?v=8652505c23e8fdc8016445c5e13bee64"></script><!-- use with sticky sidebar js. -->
423423

424-
<script src="assets/js/rdta/rundiz-template-admin.js?v=738567aa9693cf5324fdc885aa97d2a8"></script>
424+
<script src="assets/js/rdta/rundiz-template-admin.js?v=e6408f8c56d7b90332e3c3ba31a988ce"></script>
425425

426426
<script class="exclude-preview" src="assets/js-preview/prism.js?v=0718daece78cc150461b32c0ceab4fab" data-manual></script>
427427
<script class="exclude-preview" src="assets/js-preview/view-target-source.js?v=c9c8f5d72845b3693400fb9490283bfa"></script>

‎alert-box.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<link rel="stylesheet" href="assets/css/smartmenus/sm-core-css.css?npm-v=1.1.1">
1414
<link rel="stylesheet" href="assets/css/smartmenus/sm-rdta/sm-rdta.css?v=49e159bb1b8cc5ae941d93c1508e901e">
1515

16-
<link rel="stylesheet" href="assets/css/rdta/typo-and-form/typo-and-form.css?v=67a4c4e3f1011120e7ea2e5cc64aee15">
17-
<link rel="stylesheet" href="assets/css/rdta/rundiz-template-admin.css?v=e2ece3963ae0f04496d81e5720b4b8ad">
16+
<link rel="stylesheet" href="assets/css/rdta/typo-and-form/typo-and-form.css?v=ed556a40d8dfb70c992f8b55e542d1f0">
17+
<link rel="stylesheet" href="assets/css/rdta/rundiz-template-admin.css?v=15d425f5ccc6b1eee956ba15dfe00075">
1818

1919
<link class="exclude-preview" rel="stylesheet" href="assets/css-preview/prism.css?v=de20a76f891181fd461354e782db7a0f">
2020
<link class="exclude-preview" rel="stylesheet" href="assets/css-preview/documents.css?v=723a2316bd4d6e8a361b431002473a2c">
@@ -397,7 +397,7 @@ <h5>Source</h5>
397397
</main>
398398
<footer>
399399
<div class="rd-page-footer-left">Visit my <a href="https://github.com/Rundiz/rundiz-template-for-admin" target="_blank">GitHub</a></div>
400-
<div class="rd-page-footer-right"><a href="https://rundiz.com" target="_blank">Rundiz</a> template for admin 2.4.7dev-20250520</div>
400+
<div class="rd-page-footer-right"><a href="https://rundiz.com" target="_blank">Rundiz</a> template for admin 2.4.7</div>
401401
</footer>
402402
</div><!--.rd-page-wrapper-->
403403

@@ -415,7 +415,7 @@ <h5>Source</h5>
415415
<script src="assets/js/sticky-sidebar/jquery.sticky-sidebar.min.js?npm-v=3.3.1"></script>
416416
<script src="assets/js/resize-sensor/ResizeSensor.js?v=8652505c23e8fdc8016445c5e13bee64"></script><!-- use with sticky sidebar js. -->
417417

418-
<script src="assets/js/rdta/rundiz-template-admin.js?v=738567aa9693cf5324fdc885aa97d2a8"></script>
418+
<script src="assets/js/rdta/rundiz-template-admin.js?v=e6408f8c56d7b90332e3c3ba31a988ce"></script>
419419

420420
<script class="exclude-preview" src="assets/js-preview/prism.js?v=0718daece78cc150461b32c0ceab4fab" data-manual></script>
421421
<script class="exclude-preview" src="assets/js-preview/view-target-source.js?v=c9c8f5d72845b3693400fb9490283bfa"></script>

‎alert-dialog.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<link rel="stylesheet" href="assets/css/smartmenus/sm-core-css.css?npm-v=1.1.1">
1414
<link rel="stylesheet" href="assets/css/smartmenus/sm-rdta/sm-rdta.css?v=49e159bb1b8cc5ae941d93c1508e901e">
1515

16-
<link rel="stylesheet" href="assets/css/rdta/typo-and-form/typo-and-form.css?v=67a4c4e3f1011120e7ea2e5cc64aee15">
17-
<link rel="stylesheet" href="assets/css/rdta/rundiz-template-admin.css?v=e2ece3963ae0f04496d81e5720b4b8ad">
16+
<link rel="stylesheet" href="assets/css/rdta/typo-and-form/typo-and-form.css?v=ed556a40d8dfb70c992f8b55e542d1f0">
17+
<link rel="stylesheet" href="assets/css/rdta/rundiz-template-admin.css?v=15d425f5ccc6b1eee956ba15dfe00075">
1818

1919
<link class="exclude-preview" rel="stylesheet" href="assets/css-preview/prism.css?v=de20a76f891181fd461354e782db7a0f">
2020
<link class="exclude-preview" rel="stylesheet" href="assets/css-preview/documents.css?v=723a2316bd4d6e8a361b431002473a2c">
@@ -381,7 +381,7 @@ <h3>Events</h3>
381381
</main>
382382
<footer>
383383
<div class="rd-page-footer-left">Visit my <a href="https://github.com/Rundiz/rundiz-template-for-admin" target="_blank">GitHub</a></div>
384-
<div class="rd-page-footer-right"><a href="https://rundiz.com" target="_blank">Rundiz</a> template for admin 2.4.7dev-20250520</div>
384+
<div class="rd-page-footer-right"><a href="https://rundiz.com" target="_blank">Rundiz</a> template for admin 2.4.7</div>
385385
</footer>
386386
</div><!--.rd-page-wrapper-->
387387

@@ -399,7 +399,7 @@ <h3>Events</h3>
399399
<script src="assets/js/sticky-sidebar/jquery.sticky-sidebar.min.js?npm-v=3.3.1"></script>
400400
<script src="assets/js/resize-sensor/ResizeSensor.js?v=8652505c23e8fdc8016445c5e13bee64"></script><!-- use with sticky sidebar js. -->
401401

402-
<script src="assets/js/rdta/rundiz-template-admin.js?v=738567aa9693cf5324fdc885aa97d2a8"></script>
402+
<script src="assets/js/rdta/rundiz-template-admin.js?v=e6408f8c56d7b90332e3c3ba31a988ce"></script>
403403

404404
<script class="exclude-preview" src="assets/js-preview/prism.js?v=0718daece78cc150461b32c0ceab4fab" data-manual></script>
405405
<script class="exclude-preview" src="assets/js-preview/view-target-source.js?v=c9c8f5d72845b3693400fb9490283bfa"></script>

‎assets-src/css/rdta/_form-input-range.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*!
2+
* ----------------------------------------------------------------------------------------------
3+
* _form-input-range.css
4+
* ----------------------------------------------------------------------------------------------
5+
* form > input[type="range"]
6+
*/
7+
8+
9+
.rd-input-range-with-datalist {
10+
display: block;
11+
}
12+
13+
.rd-input-range-with-datalist datalist {
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: space-between;
17+
position: relative;
18+
writing-mode: vertical-lr;
19+
}
20+
21+
.rd-input-range-with-datalist datalist > option {
22+
font-size: 0;
23+
padding: 0;
24+
visibility: hidden;
25+
}
26+
27+
.rd-input-range-with-datalist datalist > option::before {
28+
content: "– " attr(label);
29+
font-size: 0.8rem;
30+
visibility: visible;
31+
}

‎assets-src/css/rdta/rundiz-template-admin.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
@import '_form.css';
1919
@import '_form-input-file.css';
20+
@import '_form-input-range.css';
2021

2122
@import '_input-group.css';
2223
@import '_navbar.css';

‎assets-src/css/rdta/typo-and-form/_form-input-range.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ input[type="range"] {
1414
-webkit-appearance: none;
1515
appearance: none;
1616
height: 37px;
17-
margin: 10px 0;
1817
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);/* remove white-blue background color on tap or on touch in chrome for android. */
1918
}
2019

@@ -95,5 +94,5 @@ input[type="range"]:focus::-webkit-slider-runnable-track {
9594
input[type="range"]::-moz-range-progress {
9695
background-color: #52A0E5;
9796
}
98-
/* currently not available for Webkit engine such as Chrome, Edge, etc. */
97+
/* @todo[rdta] currently not available for Webkit engine such as Chrome, Edge, etc. */
9998
/* end input range progress */

‎assets-src/js/rdta/rundiz-template-admin.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
class RundizTemplateAdmin {
88

99

10+
/**
11+
* @type {Boolean} Mark that is the input range already listened for `input` event or not. Default is `false` not listened.
12+
*/
13+
#isListenedInputRangeEvent = false;
14+
15+
1016
/**
1117
* Check if jQuery is loaded or not.
1218
*
@@ -209,6 +215,58 @@ class RundizTemplateAdmin {
209215
}// customInputFile
210216

211217

218+
/**
219+
* Activate custom input range with `datalist`.
220+
*
221+
* @since 2.4.7
222+
* @link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#validation Document reference for default `max` value.
223+
* @returns {undefined}
224+
*/
225+
customInputRangeWithDatalist() {
226+
const customIRWDClass = 'rd-input-range-with-datalist';
227+
228+
document.querySelectorAll('.' + customIRWDClass)?.forEach((eachIR) => {
229+
const eachDatalist = eachIR.querySelector('datalist');
230+
// get max option value for certain `datalist`.
231+
let maxOptionValue = 0;
232+
for (let i = 0; i < eachDatalist.options.length; i++) {
233+
const optionValue = parseFloat(eachDatalist.options[i].value);
234+
if (!isNaN(optionValue) && optionValue > maxOptionValue) {
235+
maxOptionValue = optionValue;
236+
}
237+
}// endfor;
238+
// get input `max` attribute value. default is 100.
239+
let inputRangeMax = 100;
240+
const inputRange = eachIR.querySelector('input[type="range"]');
241+
if (inputRange.hasAttribute('max')) {
242+
inputRangeMax = inputRange.getAttribute('max');
243+
}
244+
const datalistPercentWidth = ((100 * parseFloat(maxOptionValue)) / parseFloat(inputRangeMax));
245+
// set datalist width.
246+
eachDatalist.style.width = 'calc(' + datalistPercentWidth + '% + 15px)';// 15px is come from input range thumb width.
247+
// do not automatically append the `output` HTML element to let dev design their style.
248+
});
249+
250+
if (false === this.#isListenedInputRangeEvent) {
251+
// if not listened the input range event yet.
252+
// listen on slide the input range and show its value to `output` HTML element.
253+
document.addEventListener('input', (event) => {
254+
this.#isListenedInputRangeEvent = true;
255+
let thisInput = event.target;
256+
if (!thisInput.closest('.' + customIRWDClass)) {
257+
return ;
258+
}
259+
const customIRWDContainer = thisInput.closest('.' + customIRWDClass);
260+
const outputHTML = customIRWDContainer.querySelector('output');
261+
if (outputHTML) {
262+
// if there is `output` HTML in the custom input range.
263+
outputHTML.value = thisInput.value;
264+
}
265+
});
266+
}
267+
}// customInputRangeWithDatalist
268+
269+
212270
/**
213271
* Toggle all checkbox in a table.
214272
*
@@ -596,5 +654,7 @@ document.addEventListener('DOMContentLoaded',function() {
596654

597655
// activate custom input file.
598656
rdtaClass.customInputFile();
657+
// activate custom input range WITH datalist.
658+
rdtaClass.customInputRangeWithDatalist();
599659
//rdtaInputFile();
600660
});

‎assets/css/rdta/rundiz-template-admin.css‎

Lines changed: 27 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)