Skip to content

Commit 2b14ae7

Browse files
nolimits4webnolimits4web
committed
feat: new MD Range
1 parent 8104887 commit 2b14ae7

13 files changed

Lines changed: 148 additions & 35 deletions

File tree

‎src/core/components/color-picker/color-picker-md.less‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,17 @@
11
.md {
2+
.color-picker-slider,
3+
.color-picker-bar {
4+
&::before,
5+
&::after {
6+
display: none;
7+
}
8+
}
9+
.color-picker-bar {
10+
--f7-range-bar-border-radius: 4px;
11+
--f7-range-knob-color: #fff;
12+
--f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
13+
}
14+
.color-picker-slider {
15+
--f7-range-knob-height: 16px;
16+
}
217
}

‎src/core/components/color-picker/modules/alpha-slider.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export default {
2929
max: 1,
3030
step: 0.01,
3131
value: 1,
32+
limitBarPosition: false,
33+
limitKnobPosition: self.app.theme === 'ios',
3234
on: {
3335
change(range, value) {
3436
const alpha = Math.floor(value * 100) / 100;

‎src/core/components/color-picker/modules/brightness-slider.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export default {
3636
max: 1,
3737
step: 0.001,
3838
value: 0,
39+
limitBarPosition: false,
40+
limitKnobPosition: self.app.theme === 'ios',
3941
on: {
4042
change(range, value) {
4143
const b = Math.floor(value * 1000) / 1000;

‎src/core/components/color-picker/modules/hsb-sliders.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@ export default {
8585
max: 360,
8686
step: 0.1,
8787
value: 0,
88+
limitBarPosition: false,
89+
limitKnobPosition: self.app.theme === 'ios',
8890
on: {
8991
change(range, value) {
9092
self.setValue({ hue: value });
@@ -97,6 +99,8 @@ export default {
9799
max: 1,
98100
step: 0.001,
99101
value: 0,
102+
limitBarPosition: false,
103+
limitKnobPosition: self.app.theme === 'ios',
100104
on: {
101105
change(range, value) {
102106
const s = Math.floor(value * 1000) / 1000;
@@ -110,6 +114,8 @@ export default {
110114
max: 1,
111115
step: 0.001,
112116
value: 0,
117+
limitBarPosition: false,
118+
limitKnobPosition: self.app.theme === 'ios',
113119
on: {
114120
change(range, value) {
115121
const b = Math.floor(value * 1000) / 1000;

‎src/core/components/color-picker/modules/hue-slider.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export default {
2929
max: 360,
3030
step: 0.1,
3131
value: 0,
32+
limitBarPosition: false,
33+
limitKnobPosition: self.app.theme === 'ios',
3234
on: {
3335
change(range, value) {
3436
self.setValue({ hue: value });

‎src/core/components/color-picker/modules/rgb-bars.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ export default {
7979
step: 1,
8080
value: 0,
8181
vertical: true,
82+
limitBarPosition: false,
83+
limitKnobPosition: true,
8284
on: {
8385
change(range, value) {
8486
self.setValue({ rgb: [value, self.value.rgb[1], self.value.rgb[2]] });
@@ -92,6 +94,8 @@ export default {
9294
step: 1,
9395
value: 0,
9496
vertical: true,
97+
limitBarPosition: false,
98+
limitKnobPosition: true,
9599
on: {
96100
change(range, value) {
97101
self.setValue({ rgb: [self.value.rgb[0], value, self.value.rgb[2]] });
@@ -105,6 +109,8 @@ export default {
105109
step: 1,
106110
value: 0,
107111
vertical: true,
112+
limitBarPosition: false,
113+
limitKnobPosition: true,
108114
on: {
109115
change(range, value) {
110116
self.setValue({ rgb: [self.value.rgb[0], self.value.rgb[1], value] });

‎src/core/components/color-picker/modules/rgb-sliders.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ export default {
8484
max: 255,
8585
step: 1,
8686
value: 0,
87+
limitBarPosition: false,
88+
limitKnobPosition: self.app.theme === 'ios',
8789
on: {
8890
change(range, value) {
8991
self.setValue({ rgb: [value, self.value.rgb[1], self.value.rgb[2]] });
@@ -96,6 +98,8 @@ export default {
9698
max: 255,
9799
step: 1,
98100
value: 0,
101+
limitBarPosition: false,
102+
limitKnobPosition: self.app.theme === 'ios',
99103
on: {
100104
change(range, value) {
101105
self.setValue({ rgb: [self.value.rgb[0], value, self.value.rgb[2]] });
@@ -108,6 +112,8 @@ export default {
108112
max: 255,
109113
step: 1,
110114
value: 0,
115+
limitBarPosition: false,
116+
limitKnobPosition: self.app.theme === 'ios',
111117
on: {
112118
change(range, value) {
113119
self.setValue({ rgb: [self.value.rgb[0], self.value.rgb[1], value] });

‎src/core/components/range/range-class.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ class Range extends Framework7Class {
2525
scaleSteps: 5,
2626
scaleSubSteps: 0,
2727
formatScaleLabel: null,
28-
limitKnobPosition: app.theme === 'ios',
28+
limitKnobPosition: true,
29+
limitBarPosition: app.theme === 'md',
2930
};
3031

3132
// Extend defaults with modules params
@@ -83,6 +84,7 @@ class Range extends Framework7Class {
8384
scaleSteps,
8485
scaleSubSteps,
8586
limitKnobPosition,
87+
limitBarPosition,
8688
} = range.params;
8789

8890
extend(range, {
@@ -104,6 +106,7 @@ class Range extends Framework7Class {
104106
scaleSteps,
105107
scaleSubSteps,
106108
limitKnobPosition,
109+
limitBarPosition,
107110
});
108111

109112
if ($inputEl) {
@@ -446,6 +449,7 @@ class Range extends Framework7Class {
446449
vertical,
447450
verticalReversed,
448451
limitKnobPosition,
452+
limitBarPosition,
449453
} = range;
450454
const knobSize = vertical ? knobHeight : knobWidth;
451455
const rangeSize = vertical ? rangeHeight : rangeWidth;
@@ -459,9 +463,13 @@ class Range extends Framework7Class {
459463
: 'left';
460464
if (range.dual) {
461465
const progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
466+
const positionStartProgress = limitBarPosition ? knobSize / rangeSize : 0;
467+
const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
462468
$barActiveEl.css({
463-
[positionProperty]: `${progress[0] * 100}%`,
464-
[vertical ? 'height' : 'width']: `${(progress[1] - progress[0]) * 100}%`,
469+
[positionProperty]: `${(positionStartProgress + progress[0] * barProgressModify) * 100}%`,
470+
[vertical ? 'height' : 'width']: `${
471+
(progress[1] - progress[0] - positionStartProgress) * 100 * barProgressModify
472+
}%`,
465473
});
466474
knobs.forEach(($knobEl, knobIndex) => {
467475
let startPos = rangeSize * progress[knobIndex];
@@ -476,7 +484,8 @@ class Range extends Framework7Class {
476484
});
477485
} else {
478486
const progress = (value - min) / (max - min);
479-
$barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100}%`);
487+
const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
488+
$barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100 * barProgressModify}%`);
480489

481490
let startPos = rangeSize * progress;
482491

‎src/core/components/range/range-ios.less‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@
55
.range-knob {
66
border-radius: var(--f7-range-knob-height);
77
transition-duration: 300ms;
8+
position: absolute;
9+
left: 0;
10+
top: 0;
11+
width: 100%;
12+
height: 100%;
13+
&:after {
14+
content: '';
15+
position: absolute;
16+
left: 50%;
17+
top: 50%;
18+
width: 44px;
19+
height: 44px;
20+
}
821

922
&::before,
1023
&::after {

‎src/core/components/range/range-md.less‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,29 @@
11
.md {
2+
.range-knob-wrap {
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
}
27
.range-knob {
38
transition-duration: 200ms;
49
transition-property: transform, background-color;
10+
width: 4px;
11+
height: var(--f7-range-knob-height);
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
border-radius: 4px;
516
}
17+
618
.range-knob-active-state .range-knob {
7-
transform: scale(1.5);
19+
transform: scaleX(0.5);
20+
}
21+
.range-slider-vertical .range-knob {
22+
width: var(--f7-range-knob-height);
23+
height: 4px;
24+
}
25+
.range-slider-vertical .range-knob-active-state .range-knob {
26+
transform: scaleY(0.5);
827
}
928
.range-slider-min:not(.range-slider-dual) {
1029
.range-knob {
@@ -33,9 +52,53 @@
3352
.range-knob-active-state .range-knob-label {
3453
transform: translateY(0%) scale(1);
3554
}
36-
.range-slider-label {
37-
.range-knob-active-state .range-knob {
38-
transform: scale(0);
55+
.range-bar-active,
56+
.range-bar-inactive {
57+
border-radius: 4px;
58+
}
59+
.range-slider {
60+
&::before,
61+
&::after {
62+
content: '';
63+
position: absolute;
64+
width: 4px;
65+
height: 4px;
66+
border-radius: 50%;
67+
background: var(--f7-range-knob-color);
68+
top: calc(50% - 2px);
69+
z-index: 1;
70+
pointer-events: none;
71+
transition-duration: 200ms;
72+
}
73+
&::before {
74+
left: calc(var(--f7-range-knob-width) / 2 - 2px);
75+
}
76+
&::after {
77+
right: calc(var(--f7-range-knob-width) / 2 - 2px);
78+
}
79+
&:not(.range-slider-dual)::before {
80+
content: none;
81+
display: none;
82+
}
83+
&:has(.range-knob-active-state) {
84+
&::before,
85+
&::after {
86+
transform: scale(0.5);
87+
}
88+
}
89+
&.range-slider-vertical {
90+
&::before,
91+
&::after {
92+
top: auto;
93+
left: calc(50% - 2px);
94+
right: auto;
95+
}
96+
&::before {
97+
bottom: calc(var(--f7-range-knob-width) / 2 - 2px);
98+
}
99+
&::after {
100+
top: calc(var(--f7-range-knob-width) / 2 - 2px);
101+
}
39102
}
40103
}
41104
}

0 commit comments

Comments
 (0)