aboutsummaryrefslogtreecommitdiff
path: root/js/components/slider.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/components/slider.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/components/slider.reel')
-rw-r--r--js/components/slider.reel/knob.pngbin0 -> 523 bytes
-rw-r--r--js/components/slider.reel/slider.css66
-rw-r--r--js/components/slider.reel/slider.html38
-rw-r--r--js/components/slider.reel/slider.js250
4 files changed, 354 insertions, 0 deletions
diff --git a/js/components/slider.reel/knob.png b/js/components/slider.reel/knob.png
new file mode 100644
index 00000000..b798a8cb
--- /dev/null
+++ b/js/components/slider.reel/knob.png
Binary files differ
diff --git a/js/components/slider.reel/slider.css b/js/components/slider.reel/slider.css
new file mode 100644
index 00000000..59338d31
--- /dev/null
+++ b/js/components/slider.reel/slider.css
@@ -0,0 +1,66 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7.slider-parent {
8 position:relative;
9}
10
11.slider-parent.horizontal {
12 width: 100%;
13 height: 12px;
14}
15
16.slider-parent.vertical {
17 height: 100%;
18 width: 12px;
19}
20
21.slider-track {
22 position:absolute;
23 background-color: #999999;
24 width: 100%;
25 height: 100%;
26}
27
28.slider-track:hover
29{
30 cursor:pointer;
31}
32
33.slider-track.horizontal {
34 height: 100%;
35 width:100%;
36}
37
38.slider-track.vertical {
39 width: 100%;
40 height:100%;
41}
42
43.knob {
44 position: absolute;
45 width: 12px;
46 height: 12px;
47 background-image: url(knob.png);
48 background-repeat: no-repeat;
49 background-position: center center;
50 float:left;
51}
52
53.knob:hover
54{
55 cursor:pointer;
56}
57
58.knob.horizontal {
59 margin-left: -6px;
60 margin-right: -6px;
61}
62
63.knob.vertical {
64 margin-top: -6px;
65 margin-bottom: -6px;
66} \ No newline at end of file
diff --git a/js/components/slider.reel/slider.html b/js/components/slider.reel/slider.html
new file mode 100644
index 00000000..b30d20a2
--- /dev/null
+++ b/js/components/slider.reel/slider.html
@@ -0,0 +1,38 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="slider.css">
11
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "module": "js/components/slider.reel",
16 "name": "Slider",
17 "properties": {
18 "element": {"#": "slider"},
19 "parentDiv": {"#": "parentDiv"},
20 "track": {"#": "slider_track"},
21 "knob": {"#": "knob"}
22
23 }
24 }
25 }
26 </script>
27
28
29</head>
30<body>
31 <div id="slider" class="slider">
32 <div id="parentDiv" class="slider-parent">
33 <canvas id="slider_track" class="slider-track"></canvas>
34 <div id="knob" class="knob"></div>
35 </div>
36 </div>
37</body>
38</html> \ No newline at end of file
diff --git a/js/components/slider.reel/slider.js b/js/components/slider.reel/slider.js
new file mode 100644
index 00000000..fced8aad
--- /dev/null
+++ b/js/components/slider.reel/slider.js
@@ -0,0 +1,250 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage;
8var SliderBase = require("js/components/sliderbase").SliderBase;
9
10var Slider = exports.Slider = Montage.create(SliderBase, {
11
12 // "horizontal" or "vertical"
13 _direction: {
14 enumerable: true,
15 value: "horizontal"
16 },
17
18 direction: {
19 enumerable: true,
20 get: function() {
21 return this._direction;
22 },
23 set: function(value) {
24
25 if (value !== this._direction) {
26 this._direction = value;
27 this.needsDraw = true;
28 }
29 }
30 },
31
32 customBackground: {
33 enumerable: true,
34 serializable:true,
35 value: null
36 },
37
38 _sliderTrack: {
39 enumerable: false,
40 value: null
41 },
42
43 // Should support clicking on the track
44 _allowTrackClick: {
45 enumerable: true,
46 value: true
47 },
48
49 allowTrackClick: {
50 enumerable: true,
51 get: function() {
52 return this._allowTrackClick;
53 },
54 set: function(value) {
55
56 if (value !== this._allowTrackClick) {
57 this._allowTrackClick = value;
58 }
59 }
60 },
61
62 _knob: {
63 enumerable: false,
64 value: null
65 },
66
67 _positionValue: {
68 enumerable: false,
69 value: 0
70 },
71
72 _previousPositionValue: {
73 enumerable: false,
74 value: 0
75 },
76
77 _percentValue: {
78 enumerable: false,
79 value: 0
80 },
81
82 _knobPercentWidth: {
83 enumerable: false,
84 value: 0
85 },
86
87 _knobOffsetWidth: {
88 enumerable: false,
89 value: 0
90 },
91
92 _length: {
93 enumerable: false,
94 value: 0
95 },
96
97 _deltaLeft: {
98 enumerable: false,
99 value: 0
100 },
101
102 _valueFromPageOffset: {
103 value: function(offset, pageY, isShiftKeyPressed) {
104 var clickPoint;
105 if(this._direction === "horizontal")
106 {
107 clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(offset,pageY)).x;
108 }
109 else
110 {
111 clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(offset,pageY)).y;
112 }
113 this.value = (clickPoint*this._valueCoef)+this._minValue;
114
115 if(!this._isMouseDown && (this._previousValue !== this._value))
116 {
117 this._dispatchActionEvent();
118 }
119 }
120 },
121
122 setPercentValueFromValue: {
123 value: function () {
124 this._percentValue = (this._value-this._minValue)/(this._maxValue-this._minValue)*(100 - this._knobPercentWidth);
125 }