diff options
Diffstat (limited to 'js/panels')
33 files changed, 2214 insertions, 2 deletions
diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js index bc43ebc4..191dbae5 100755 --- a/js/panels/CSSPanel/css-shorthand-map.js +++ b/js/panels/CSSPanel/css-shorthand-map.js | |||
@@ -52,7 +52,6 @@ exports.CSS_SHORTHAND_MAP = { | |||
52 | 'font-style' : ['font'], | 52 | 'font-style' : ['font'], |
53 | 'font-family' : ['font'], | 53 | 'font-family' : ['font'], |
54 | 'font-size' : ['font'], | 54 | 'font-size' : ['font'], |
55 | 'font-style' : ['font'], | ||
56 | 'font-variant' : ['font'], | 55 | 'font-variant' : ['font'], |
57 | 'font-weight' : ['font'], | 56 | 'font-weight' : ['font'], |
58 | 57 | ||
@@ -74,4 +73,21 @@ exports.CSS_SHORTHAND_MAP = { | |||
74 | '-webkit-transition-duration' : ['-webkit-transition'], | 73 | '-webkit-transition-duration' : ['-webkit-transition'], |
75 | '-webkit-transition-timing-function' : ['-webkit-transition'], | 74 | '-webkit-transition-timing-function' : ['-webkit-transition'], |
76 | '-webkit-transition-delay' : ['-webkit-transition'] | 75 | '-webkit-transition-delay' : ['-webkit-transition'] |
76 | }; | ||
77 | |||
78 | exports.CSS_SHORTHAND_TO_SUBPROP_MAP = { | ||
79 | 'background' : ["background-image", "background-repeat-x", "background-repeat-y", "background-attachment", | ||
80 | "background-position-x", "background-position-y", "background-origin", "background-clip", | ||
81 | "background-color"], | ||
82 | 'border' : ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width", | ||
83 | "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", | ||
84 | "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image"], | ||
85 | 'border-radius' : ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", | ||
86 | "border-bottom-left-radius"], | ||
87 | 'font' : ["font-family", "font-size", "font-style", "font-variant", "font-weight", "line-height"], | ||
88 | 'list' : ["list-style-type", "list-style-image", "list-style-position"], | ||
89 | 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], | ||
90 | 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], | ||
91 | '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", | ||
92 | "-webkit-transition-timing-function", "-webkit-transition-delay"] | ||
77 | }; \ No newline at end of file | 93 | }; \ No newline at end of file |
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index 251e86e4..1561f973 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html | |||
@@ -61,6 +61,13 @@ | |||
61 | "element": {"#": "panel_5"} | 61 | "element": {"#": "panel_5"} |
62 | } | 62 | } |
63 | }, | 63 | }, |
64 | "panel_6": { | ||
65 | "module": "js/panels/Panel.reel", | ||
66 | "name": "Panel", | ||
67 | "properties": { | ||
68 | "element": {"#": "panel_6"} | ||
69 | } | ||
70 | }, | ||
64 | 71 | ||
65 | "owner": { | 72 | "owner": { |
66 | "module": "js/panels/PanelContainer.reel", | 73 | "module": "js/panels/PanelContainer.reel", |
@@ -74,7 +81,8 @@ | |||
74 | "panel_2": {"@": "panel_2"}, | 81 | "panel_2": {"@": "panel_2"}, |
75 | "panel_3": {"@": "panel_3"}, | 82 | "panel_3": {"@": "panel_3"}, |
76 | "panel_4": {"@": "panel_4"}, | 83 | "panel_4": {"@": "panel_4"}, |
77 | "panel_5": {"@": "panel_5"} | 84 | "panel_5": {"@": "panel_5"}, |
85 | "panel_6": {"@": "panel_6"} | ||
78 | }, | 86 | }, |
79 | "listeners": [ | 87 | "listeners": [ |
80 | { | 88 | { |
@@ -104,6 +112,7 @@ | |||
104 | <article data-montage-id="panel_3"></article> | 112 | <article data-montage-id="panel_3"></article> |
105 | <article data-montage-id="panel_4"></article> | 113 | <article data-montage-id="panel_4"></article> |
106 | <article data-montage-id="panel_5"></article> | 114 | <article data-montage-id="panel_5"></article> |
115 | <article data-montage-id="panel_6"></article> | ||
107 | </article> | 116 | </article> |
108 | </section> | 117 | </section> |
109 | </body> | 118 | </body> |
diff --git a/js/panels/collapse-composer.js b/js/panels/collapse-composer.js new file mode 100644 index 00000000..0bd916c8 --- /dev/null +++ b/js/panels/collapse-composer.js | |||
@@ -0,0 +1,137 @@ | |||
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/core/core").Montage; | ||
8 | var Composer = require("montage/ui/composer/composer").Composer; | ||
9 | |||
10 | exports.CollapseComposer = Montage.create(Composer, { | ||
11 | |||
12 | collapsed : { | ||
13 | value: false | ||
14 | }, | ||
15 | |||
16 | _expandedHeight : { | ||
17 | value: null | ||
18 | }, | ||
19 | |||
20 | _doCollapse : { | ||
21 | value: false, | ||
22 | distinct: true | ||
23 | }, | ||
24 | |||
25 | _doExpand : { | ||
26 | value: false, | ||
27 | distinct: true | ||
28 | }, | ||
29 | |||
30 | _step : { | ||
31 | value: 0, | ||
32 | distinct: true | ||
33 | }, | ||
34 | |||
35 | load: { | ||
36 | value: function() { | ||
37 | //this.element.addEventListener("mousedown", this, true); | ||
38 | this.element.addEventListener("click", this, false); | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | unload: { | ||
43 | value: function() { | ||
44 | //this.element.removeEventListener("mousedown", this, true); | ||
45 | this.element.removeEventListener("click", this, true); | ||
46 | } | ||
47 | }, | ||
48 | |||
49 | handleClick : { | ||
50 | value: function(e) { | ||
51 | e.preventDefault(); | ||
52 | this.toggleCollapse(); | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | toggleCollapse : { | ||
57 | value: function() { | ||
58 | if(this.collapsed) { | ||
59 | this.initExpand(); | ||
60 | } else { | ||
61 | this.initCollapse(); | ||
62 | } | ||
63 | |||
64 | this.collapsed = !this.collapsed; | ||
65 | } | ||
66 | }, | ||
67 | |||
68 | initCollapse : { | ||
69 | value: function() { | ||
70 | //this.component.element.style.display = 'none'; | ||
71 | console.log("init collapse"); | ||
72 | this._expandedHeight = window.getComputedStyle(this.component.element).height; | ||
73 | this.needsFrame = this._doCollapse = true; | ||
74 | } | ||
75 | }, | ||
76 | |||
77 | initExpand : { | ||
78 | value: function() { | ||
79 | //this.component.element.style.display = ''; | ||
80 | console.log("init collapse"); | ||
81 | |||
82 | this.needsFrame = this._doExpand = true; | ||
83 | } | ||
84 | }, | ||
85 | |||
86 | frame : { | ||
87 | value: function() { | ||
88 | if(this._doCollapse) { | ||
89 | if (this._step === 0) { | ||
90 | this.component.element.style.height = this._expandedHeight; | ||