diff options
Diffstat (limited to 'node_modules/montage/ui/scroll-bars.reel')
-rw-r--r-- | node_modules/montage/ui/scroll-bars.reel/scroll-bars.html | 117 | ||||
-rw-r--r-- | node_modules/montage/ui/scroll-bars.reel/scroll-bars.js | 247 |
2 files changed, 364 insertions, 0 deletions
diff --git a/node_modules/montage/ui/scroll-bars.reel/scroll-bars.html b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.html new file mode 100644 index 00000000..a9d92944 --- /dev/null +++ b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.html | |||
@@ -0,0 +1,117 @@ | |||
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 | <title></title> | ||
10 | <script type="text/montage-serialization"> | ||
11 | { | ||
12 | "owner": { | ||
13 | "module": "montage/ui/scroll-bars.reel", | ||
14 | "name": "ScrollBars", | ||
15 | "properties": { | ||
16 | "element": { | ||
17 | "#": "montage-scroll-bars" | ||
18 | }, | ||
19 | "_top": { | ||
20 | "#": "top" | ||
21 | }, | ||
22 | "_bottomClip": { | ||
23 | "#": "bottom-clip" | ||
24 | }, | ||
25 | "_bottom": { | ||
26 | "#": "bottom" | ||
27 | }, | ||
28 | "_left": { | ||
29 | "#": "left" | ||
30 | }, | ||
31 | "_rightClip": { | ||
32 | "#": "right-clip" | ||
33 | }, | ||
34 | "_right": { | ||
35 | "#": "right" | ||
36 | } | ||
37 | } | ||
38 | } | ||
39 | } | ||
40 | </script> | ||
41 | <style> | ||
42 | .montage-scroll-bars { | ||
43 | position: absolute; | ||
44 | left: 0; | ||
45 | top: 0; | ||
46 | right: 0; | ||
47 | bottom: 0; | ||
48 | z-index: 9999; | ||
49 | pointer-events: none; | ||
50 | } | ||
51 | .montage-scroll-bars .top { | ||
52 | position: absolute; | ||
53 | right: 2px; | ||
54 | background: black; | ||
55 | -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.27); | ||
56 | width: 5px; | ||
57 | height: 3px; | ||
58 | border-radius: 4px 4px 0 0; | ||
59 | opacity: 0; | ||
60 | clip: rect(-1px, 6px, 3px, -1px); | ||
61 | -webkit-transform: translateZ(0); | ||
62 | } | ||
63 | .montage-scroll-bars .bottom { | ||
64 | background: black; | ||
65 | -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.27); | ||
66 | width: 5px; | ||
67 | border-radius: 0 0 4px 4px; | ||
68 | opacity: 0; | ||
69 | -webkit-transform: translateZ(0); | ||
70 | } | ||
71 | .montage-scroll-bars .bottom-clip { | ||
72 | position: absolute; | ||
73 | right: 2px; | ||
74 | width: 5px; | ||
75 | -webkit-transform: translateZ(0); | ||
76 | } | ||
77 | .montage-scroll-bars .left { | ||
78 | position: absolute; | ||
79 | bottom: 2px; | ||
80 | background: black; | ||
81 | -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.27); | ||
82 | width: 3px; | ||
83 | height: 5px; | ||
84 | border-radius: 4px 0 0 4px; | ||
85 | opacity: 0; | ||
86 | clip: rect(-1px, 3px, 6px, -1px); | ||
87 | -webkit-transform: translateZ(0); | ||
88 | } | ||
89 | .montage-scroll-bars .right { | ||
90 | background: black; | ||
91 | -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.27); | ||
92 | height: 5px; | ||
93 | border-radius: 0 4px 4px 0; | ||
94 | opacity: 0; | ||
95 | -webkit-transform: translateZ(0); | ||
96 | } | ||
97 | .montage-scroll-bars .right-clip { | ||
98 | position: absolute; | ||
99 | bottom: 2px; | ||
100 | height: 5px; | ||
101 | -webkit-transform: translateZ(0); | ||
102 | } | ||
103 | </style> | ||
104 | </head> | ||
105 | <body> | ||
106 | <div id="montage-scroll-bars" class="montage-scroll-bars"> | ||
107 | <div id="top" class="top"></div> | ||
108 | <div id="bottom-clip" class="bottom-clip"> | ||
109 | <div id="bottom" class="bottom"></div> | ||
110 | </div> | ||
111 | <div id="left" class="left"></div> | ||
112 | <div id="right-clip" class="right-clip"> | ||
113 | <div id="right" class="right"></div> | ||
114 | </div> | ||
115 | </div> | ||
116 | </body> | ||
117 | </html> \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js new file mode 100644 index 00000000..48b6a4c9 --- /dev/null +++ b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js | |||
@@ -0,0 +1,247 @@ | |||
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 | var Montage = require("montage").Montage, | ||
8 | Component = require("ui/component").Component; | ||
9 | |||
10 | var ScrollBars = exports.ScrollBars = Montage.create(Component, { | ||
11 | |||
12 | // Scroll and length are defined in a [0..1] range | ||
13 | |||
14 | _verticalScroll: { | ||
15 | enumerable: false, | ||
16 | value: 0 | ||
17 | }, | ||
18 | |||
19 | _horizontalScroll: { | ||
20 | enumerable: false, | ||
21 | value: 0 | ||
22 | }, | ||
23 | |||
24 | _verticalLength: { | ||
25 | enumerable: false, | ||
26 | value: 0 | ||
27 | }, | ||
28 | |||
29 | _horizontalLength: { | ||
30 | enumerable: false, | ||
31 | value: 0 | ||
32 | }, | ||
33 | |||
34 | verticalScroll: { | ||
35 | get: function () { | ||
36 | return this._verticalScroll; | ||
37 | }, | ||
38 | set: function (value) { | ||
39 | this._verticalScroll = value; | ||
40 | this.needsDraw = true; | ||
41 | } | ||
42 | }, | ||
43 | |||
44 | horizontalScroll: { | ||
45 | get: function () { | ||
46 | return this._horizontalScroll; | ||
47 | }, | ||
48 | set: function (value) { | ||
49 | this._horizontalScroll = value; | ||
50 | this.needsDraw = true; | ||
51 | } | ||
52 | }, | ||
53 | |||
54 | verticalLength: { | ||
55 | get: function () { | ||
56 | return this._verticalLength; | ||
57 | }, | ||
58 | set: function (value) { | ||
59 | this._verticalLength = value; | ||
60 | this.needsDraw = true; | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | horizontalLength: { | ||
65 | get: function () { | ||
66 | return this._horizontalLength; | ||
67 | }, | ||
68 | set: function (value) { | ||
69 | this._horizontalLength = value; | ||
70 | this.needsDraw = true; | ||
71 | } | ||
72 | }, | ||
73 | |||
74 | _opacity: { | ||
75 | enumerable: false, | ||
76 | value: 0 | ||
77 | }, | ||
78 | |||
79 | opacity: { | ||
80 | get: function () { | ||
81 | return this._opacity; | ||
82 | }, | ||
83 | set: function (value) { | ||
84 | this._opacity = value; | ||
85 | this.needsDraw = true; | ||
86 | } | ||
87 | }, | ||
88 | |||
89 | _isDisplayUpdated: { | ||
90 | enumerable: false, | ||
91 | value: false | ||
92 | }, | ||
93 | |||
94 | _displayVertical: { | ||
95 | enumerable: false, | ||
96 | value: false | ||
97 | }, | ||
98 | |||
99 | displayVertical: { | ||
100 | get: function () { | ||
101 | return this._displayVertical; | ||
102 | }, | ||
103 |