diff options
Diffstat (limited to 'js/components/popup.reel')
-rwxr-xr-x | js/components/popup.reel/css/popup.scss | 54 | ||||
-rwxr-xr-x | js/components/popup.reel/popup.html | 28 | ||||
-rwxr-xr-x | js/components/popup.reel/popup.js | 336 |
3 files changed, 209 insertions, 209 deletions
diff --git a/js/components/popup.reel/css/popup.scss b/js/components/popup.reel/css/popup.scss index 75ff2814..4f40b7c8 100755 --- a/js/components/popup.reel/css/popup.scss +++ b/js/components/popup.reel/css/popup.scss | |||
@@ -34,43 +34,43 @@ $grey_light: #494949; | |||
34 | 34 | ||
35 | .default_popup | 35 | .default_popup |
36 | { | 36 | { |
37 | //MUST HAVE TO ALLOW FOR SIZE AJUSTMENTS | 37 | //MUST HAVE TO ALLOW FOR SIZE AJUSTMENTS |
38 | position: absolute; | 38 | position: absolute; |
39 | width: auto; | 39 | width: auto; |
40 | float: left; | 40 | float: left; |
41 | 41 | ||
42 | //TEXT STYLES | 42 | //TEXT STYLES |
43 | font-family: 'Droid Sans', sans-serif; | 43 | font-family: 'Droid Sans', sans-serif; |
44 | color: #FFF; | 44 | color: #FFF; |
45 | 45 | ||
46 | //BACKGROUND AND CONTAINER | 46 | //BACKGROUND AND CONTAINER |
47 | background: $grey_light; | 47 | background: $grey_light; |
48 | border: 1px solid $grey_dark; | 48 | border: 1px solid $grey_dark; |
49 | border-radius: 8px; | 49 | border-radius: 8px; |
50 | padding: 8px; | 50 | padding: 8px; |
51 | box-shadow: 0px 0px 8px rgba(0, 0, 0, .8); | 51 | box-shadow: 0px 0px 8px rgba(0, 0, 0, .8); |
52 | pointerEvents: auto; | 52 | pointerEvents: auto; |
53 | } | 53 | } |
54 | 54 | ||
55 | .default_popup .content | 55 | .default_popup .content |
56 | { | 56 | { |
57 | overflow: auto; | 57 | overflow: auto; |
58 | float: left; | 58 | float: left; |
59 | } | 59 | } |
60 | 60 | ||
61 | .default_popup .tooltip | 61 | .default_popup .tooltip |
62 | { | 62 | { |
63 | position: absolute; | 63 | position: absolute; |
64 | overflow: hidden; | 64 | overflow: hidden; |
65 | } | 65 | } |
66 | 66 | ||
67 | .default_popup .tooltip span | 67 | .default_popup .tooltip span |
68 | { | 68 | { |
69 | -webkit-transform:rotate(45deg); | 69 | -webkit-transform:rotate(45deg); |
70 | width: 12px; | 70 | width: 12px; |
71 | height: 12px; | 71 | height: 12px; |
72 | margin: 3px; | 72 | margin: 3px; |
73 | display: block; | 73 | display: block; |
74 | background: $grey_light; | 74 | background: $grey_light; |
75 | border: 1px solid $grey_dark; | 75 | border: 1px solid $grey_dark; |
76 | } | 76 | } |
diff --git a/js/components/popup.reel/popup.html b/js/components/popup.reel/popup.html index ee468827..9729b2cc 100755 --- a/js/components/popup.reel/popup.html +++ b/js/components/popup.reel/popup.html | |||
@@ -29,11 +29,11 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE | |||
29 | POSSIBILITY OF SUCH DAMAGE. | 29 | POSSIBILITY OF SUCH DAMAGE. |
30 | </copyright> --> | 30 | </copyright> --> |
31 | <html lang="en"> | 31 | <html lang="en"> |
32 | <head> | 32 | <head> |
33 | 33 | ||
34 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | 34 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
35 | 35 | ||
36 | <link rel="stylesheet" type="text/css" href="css/popup.css"> | 36 | <link rel="stylesheet" type="text/css" href="css/popup.css"> |
37 | 37 | ||
38 | <script type="text/montage-serialization"> | 38 | <script type="text/montage-serialization"> |
39 | { | 39 | { |
@@ -47,16 +47,16 @@ POSSIBILITY OF SUCH DAMAGE. | |||
47 | } | 47 | } |
48 | } | 48 | } |
49 | </script> | 49 | </script> |
50 | 50 | ||
51 | </head> | 51 | </head> |
52 | |||
53 | <body> | ||
54 | 52 | ||
55 | <div data-montage-id="default_popup" class="default_popup"> | 53 | <body> |
56 | <div data-montage-id="tooltip" class="tooltip"><span/></div> | ||
57 | <div data-montage-id="content" class="content"></div> | ||
58 | </div> | ||
59 | 54 | ||
60 | </body> | 55 | <div data-montage-id="default_popup" class="default_popup"> |
56 | <div data-montage-id="tooltip" class="tooltip"><span/></div> | ||
57 | <div data-montage-id="content" class="content"></div> | ||
58 | </div> | ||
59 | |||
60 | </body> | ||
61 | 61 | ||
62 | </html> | 62 | </html> |
diff --git a/js/components/popup.reel/popup.js b/js/components/popup.reel/popup.js index c66a39fa..f9f38a3c 100755 --- a/js/components/popup.reel/popup.js +++ b/js/components/popup.reel/popup.js | |||
@@ -30,237 +30,237 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | 30 | ||
31 | //////////////////////////////////////////////////////////////////////// | 31 | //////////////////////////////////////////////////////////////////////// |
32 | // | 32 | // |
33 | var Montage = require("montage/core/core").Montage, | 33 | var Montage = require("montage/core/core").Montage, |
34 | Component = require("montage/ui/component").Component; | 34 | Component = require("montage/ui/component").Component; |
35 | //////////////////////////////////////////////////////////////////////// | 35 | //////////////////////////////////////////////////////////////////////// |
36 | //Exporting as Popup | 36 | //Exporting as Popup |
37 | exports.Popup = Montage.create(Component, { | 37 | exports.Popup = Montage.create(Component, { |
38 | //////////////////////////////////////////////////////////////////// | 38 | //////////////////////////////////////////////////////////////////// |
39 | // | 39 | // |
40 | hasTemplate: { | 40 | hasTemplate: { |
41 | value: true | 41 | value: true |
42 | }, | 42 | }, |
43 | //////////////////////////////////////////////////////////////////// | 43 | //////////////////////////////////////////////////////////////////// |
44 | // | 44 | // |
45 | _content: { | 45 | _content: { |
46 | numerable: false, | 46 | numerable: false, |
47 | value: null | 47 | value: null |
48 | }, | 48 | }, |
49 | //////////////////////////////////////////////////////////////////// | 49 | //////////////////////////////////////////////////////////////////// |
50 | // | 50 | // |
51 | content: { | 51 | content: { |
52 | enumerable: true, | 52 | enumerable: true, |
53 | get: function() { | 53 | get: function() { |
54 | return this._content; | 54 | return this._content; |
55 | }, | 55 | }, |
56 | set: function(value) { | 56 | set: function(value) { |
57 | this._content = value; | 57 | this._content = value; |
58 | } | 58 | } |
59 | }, | 59 | }, |
60 | //////////////////////////////////////////////////////////////////// | 60 | //////////////////////////////////////////////////////////////////// |
61 | // | 61 | // |
62 | _position: { | 62 | _position: { |
63 | numerable: false, | 63 | numerable: false, |
64 | value: null | 64 | value: null |
65 | }, | 65 | }, |
66 | //////////////////////////////////////////////////////////////////// | 66 | //////////////////////////////////////////////////////////////////// |
67 | //Position is set with X,Y Coordinates from Top and Left respetively | 67 | //Position is set with X,Y Coordinates from Top and Left respetively |
68 | position: { | 68 | position: { |
69 | enumerable: true, | 69 | enumerable: true, |
70 | get: function() { | 70 | get: function() { |
71 | return this._position; | 71 | return this._position; |
72 | }, | 72 | }, |
73 | set: function(value) { | 73 | set: function(value) { |
74 | this._position = value; | 74 | this._position = value; |
75 | if (value.x) { | 75 | if (value.x) { |
76 | this.element.style.left = value.x; | 76 | this.element.style.left = value.x; |
77 | } | 77 | } |
78 | if (value.y) { | 78 | if (value.y) { |
79 | this.element.style.top = value.y; | 79 | this.element.style.top = value.y; |
80 | } | 80 | } |
81 | } | 81 | } |
82 | }, | 82 | }, |
83 | //////////////////////////////////////////////////////////////////// | 83 | //////////////////////////////////////////////////////////////////// |
84 | // | 84 | // |
85 | _tooltip: { | 85 | _tooltip: { |
86 | numerable: false, | 86 | numerable: false, |
87 | value: null | 87 | value: null |
88 | }, | 88 | }, |
89 | //////////////////////////////////////////////////////////////////// | 89 | //////////////////////////////////////////////////////////////////// |
90 | // | 90 | // |
91 | tooltip: { | 91 | tooltip: { |
92 | enumerable: true, | 92 | enumerable: true, |
93 | get: function() { | 93 | get: function() { |
94 | return this._tooltip; | 94 | return this._tooltip; |
95 | }, | 95 | }, |
96 | set: function(value) { | 96 | set: function(value) { |
97 | this._tooltip = value; | 97 | this._tooltip = value; |
98 | } | 98 | } |
99 | }, | 99 | }, |
100 | //////////////////////////////////////////////////////////////////// | 100 | //////////////////////////////////////////////////////////////////// |
101 | // | 101 | // |
102 | prepareForDraw: { | 102 | prepareForDraw: { |
103 | enumerable: false, | 103 | enumerable: false, |
104 | value: function() { |