|
1
|
|
|
<?php |
|
2
|
|
|
namespace rtens\domin\delivery\web\fields; |
|
3
|
|
|
|
|
4
|
|
|
use rtens\domin\delivery\cli\fields\RangeField as CliRangeField; |
|
5
|
|
|
use rtens\domin\delivery\web\Element; |
|
6
|
|
|
use rtens\domin\delivery\web\HeadElements; |
|
7
|
|
|
use rtens\domin\delivery\web\MobileDetector; |
|
8
|
|
|
use rtens\domin\delivery\web\WebField; |
|
9
|
|
|
use rtens\domin\Parameter; |
|
10
|
|
|
use rtens\domin\reflection\types\RangeType; |
|
11
|
|
|
|
|
12
|
|
|
class RangeField extends CliRangeField implements WebField { |
|
13
|
|
|
|
|
14
|
|
|
/** @var MobileDetector */ |
|
15
|
|
|
private $mobile; |
|
16
|
|
|
|
|
17
|
|
|
public function __construct(MobileDetector $mobile) { |
|
18
|
|
|
$this->mobile = $mobile; |
|
19
|
|
|
} |
|
20
|
|
|
|
|
21
|
|
|
/** |
|
22
|
|
|
* @param Parameter $parameter |
|
23
|
|
|
* @param mixed $value |
|
24
|
|
|
* @return string |
|
25
|
|
|
*/ |
|
26
|
|
|
public function render(Parameter $parameter, $value) { |
|
27
|
|
|
/** @var RangeType $range */ |
|
28
|
|
|
$range = $parameter->getType(); |
|
29
|
|
|
$min = $range->getMin(); |
|
30
|
|
|
$max = $range->getMax(); |
|
31
|
|
|
$step = $range->getStep(); |
|
32
|
|
|
|
|
33
|
|
|
$value = (int)$value; |
|
34
|
|
|
$name = $parameter->getName(); |
|
35
|
|
|
|
|
36
|
|
|
return (string)new Element('div', ['class' => 'form-group', 'id' => $name], [ |
|
37
|
|
|
new Element('div', ['class' => 'slider']), |
|
38
|
|
|
new Element('input', [ |
|
39
|
|
|
'class' => 'amount form-control', |
|
40
|
|
|
'type' => 'number', |
|
41
|
|
|
'name' => $name, |
|
42
|
|
|
'value' => $value |
|
43
|
|
|
]), |
|
44
|
|
|
new Element('script', [], [ |
|
45
|
|
|
"$(function() { |
|
46
|
|
|
$('#$name .slider').slider({ |
|
47
|
|
|
range: 'min', |
|
48
|
|
|
value: $value, |
|
49
|
|
|
min: $min, |
|
50
|
|
|
max: $max, |
|
51
|
|
|
step: $step, |
|
52
|
|
|
slide: function(event, ui) { |
|
53
|
|
|
$('#$name .amount').val(ui.value); |
|
54
|
|
|
} |
|
55
|
|
|
}); |
|
56
|
|
|
});" |
|
57
|
|
|
]) |
|
58
|
|
|
]); |
|
59
|
|
|
} |
|
60
|
|
|
|
|
61
|
|
|
/** |
|
62
|
|
|
* @param Parameter $parameter |
|
63
|
|
|
* @return array|Element[] |
|
64
|
|
|
*/ |
|
65
|
|
|
public function headElements(Parameter $parameter) { |
|
66
|
|
|
$elements = [ |
|
67
|
|
|
HeadElements::jquery(), |
|
68
|
|
|
HeadElements::jqueryUi(), |
|
69
|
|
|
HeadElements::jqueryUiCss(), |
|
70
|
|
|
]; |
|
71
|
|
|
|
|
72
|
|
|
if ($this->mobile->isMobile()) { |
|
73
|
|
|
$elements[] = HeadElements::script('//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'); |
|
74
|
|
|
} |
|
75
|
|
|
|
|
76
|
|
|
return $elements; |
|
77
|
|
|
} |
|
78
|
|
|
} |
rtens /
domin
