diff options
Diffstat (limited to 'node_modules/montage-user/ui/scroll-bars.reel')
-rw-r--r-- | node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.html | 117 | ||||
-rw-r--r-- | node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.js | 241 |
2 files changed, 358 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.html b/node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.html new file mode 100644 index 00000000..93986b5d --- /dev/null +++ b/node_modules/montage-user/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> | ||
diff --git a/node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.js b/node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.js new file mode 100644 index 00000000..4a954399 --- /dev/null +++ b/node_modules/montage-user/ui/scroll-bars.reel/scroll-bars.js | |||
@@ -0,0 +1,241 @@ | |||
1 | var Montage = require("montage").Montage, | ||
2 | Component = require("ui/component").Component; | ||
3 | |||
4 | var ScrollBars = exports.ScrollBars = Montage.create(Component, { | ||
5 | |||
6 | // Scroll and length are defined in a [0..1] range | ||
7 | |||
8 | _verticalScroll: { | ||
9 | enumerable: false, | ||
10 | value: 0 | ||
11 | }, | ||
12 | |||
13 | _horizontalScroll: { | ||
14 | enumerable: false, | ||
15 | value: 0 | ||
16 | }, | ||
17 | |||
18 | _verticalLength: { | ||
19 | enumerable: false, | ||
20 | value: 0 | ||
21 | }, | ||
22 | |||
23 | _horizontalLength: { | ||
24 | enumerable: false, | ||
25 | value: 0 | ||
26 | }, | ||
27 | |||
28 | verticalScroll: { | ||
29 | get: function () { | ||
30 | return this._verticalScroll; | ||
31 | }, | ||
32 | set: function (value) { | ||
33 | this._verticalScroll = value; | ||
34 | this.needsDraw = true; | ||
35 | } | ||
36 | }, | ||
37 | |||
38 | horizontalScroll: { | ||
39 | get: function () { | ||
40 | return this._horizontalScroll; | ||
41 | }, | ||
42 | set: function (value) { | ||
43 | this._horizontalScroll = value; | ||
44 | this.needsDraw = true; | ||
45 | } | ||
46 | }, | ||
47 | |||
48 | verticalLength: { | ||
49 | get: function () { | ||
50 | return this._verticalLength; | ||
51 | }, | ||
52 | set: function (value) { | ||
53 | this._verticalLength = value; | ||
54 | this.needsDraw = true; | ||
55 | } | ||
56 | }, | ||
57 | |||
58 | horizontalLength: { | ||
59 | get: function () { | ||
60 | return this._horizontalLength; | ||
61 | }, | ||
62 | set: function (value) { | ||
63 | this._horizontalLength = value; | ||
64 | this.needsDraw = true; | ||
65 | } | ||
66 | }, | ||
67 | |||
68 | _opacity: { | ||
69 | enumerable: false, | ||
70 | value: 0 | ||
71 | }, | ||
72 | |||
73 | opacity: { | ||
74 | get: function () { | ||
75 | return this._opacity; | ||
76 | }, | ||
77 | set: function (value) { | ||
78 | this._opacity = value; | ||
79 | this.needsDraw = true; | ||
80 | } | ||
81 | }, | ||
82 | |||
83 | _isDisplayUpdated: { | ||
84 | enumerable: false, | ||
85 | value: false | ||
86 | }, | ||
87 | |||
88 | _displayVertical: { | ||
89 | enumerable: false, | ||
90 | value: false | ||
91 | }, | ||
92 | |||
93 | displayVertical: { | ||
94 | get: function () { | ||
95 | return this._displayVertical; | ||
96 | }, | ||
97 | set: function (value) { | ||
98 |