diff options
Diffstat (limited to 'node_modules/montage/ui/slot.reel/slot.js')
-rwxr-xr-x | node_modules/montage/ui/slot.reel/slot.js | 262 |
1 files changed, 22 insertions, 240 deletions
diff --git a/node_modules/montage/ui/slot.reel/slot.js b/node_modules/montage/ui/slot.reel/slot.js index 41220373..9d7ceb6f 100755 --- a/node_modules/montage/ui/slot.reel/slot.js +++ b/node_modules/montage/ui/slot.reel/slot.js | |||
@@ -14,12 +14,13 @@ var Montage = require("montage").Montage, | |||
14 | @class module:"montage/ui/slot.reel".Slot | 14 | @class module:"montage/ui/slot.reel".Slot |
15 | @extends module:montage/ui/component.Component | 15 | @extends module:montage/ui/component.Component |
16 | */ | 16 | */ |
17 | var Slot = exports.Slot = Montage.create(Component, /** @lends module:"montage/ui/slot.reel".Slot# */ { | 17 | exports.Slot = Montage.create(Component, /** @lends module:"montage/ui/slot.reel".Slot# */ { |
18 | 18 | ||
19 | hasTemplate: { | 19 | hasTemplate: { |
20 | enumerable: false, | 20 | enumerable: false, |
21 | value: false | 21 | value: false |
22 | }, | 22 | }, |
23 | |||
23 | /** | 24 | /** |
24 | Description TODO | 25 | Description TODO |
25 | @type {Property} | 26 | @type {Property} |
@@ -30,47 +31,7 @@ var Slot = exports.Slot = Montage.create(Component, /** @lends module:"montage/u | |||
30 | value: null, | 31 | value: null, |
31 | serializable: true | 32 | serializable: true |
32 | }, | 33 | }, |
33 | /** | 34 | |
34 | Description TODO | ||
35 | @type {Property} | ||
36 | @default null | ||
37 | */ | ||
38 | transition: { | ||
39 | enumerable: false, | ||
40 | value: null | ||
41 | }, | ||
42 | /** | ||
43 | Description TODO | ||
44 | @private | ||
45 | */ | ||
46 | _content: { | ||
47 | enumerable: false, | ||
48 | value: null | ||
49 | }, | ||
50 | /** | ||
51 | Description TODO | ||
52 | @private | ||
53 | */ | ||
54 | _contentToRemove: { | ||
55 | enumerable: false, | ||
56 | value: null | ||
57 | }, | ||
58 | /** | ||
59 | Description TODO | ||
60 | @private | ||
61 | */ | ||
62 | _contentToAppend: { | ||
63 | enumerable: false, | ||
64 | value: null | ||
65 | }, | ||
66 | /** | ||
67 | Description TODO | ||
68 | @private | ||
69 | */ | ||
70 | _contentHasChanged: { | ||
71 | enumerable: false, | ||
72 | value: true | ||
73 | }, | ||
74 | /** | 35 | /** |
75 | Description TODO | 36 | Description TODO |
76 | @type {Function} | 37 | @type {Function} |
@@ -79,222 +40,43 @@ var Slot = exports.Slot = Montage.create(Component, /** @lends module:"montage/u | |||
79 | content: { | 40 | content: { |
80 | enumerable: false, | 41 | enumerable: false, |
81 | get: function() { | 42 | get: function() { |
82 | return this._content; | 43 | return Object.getPropertyDescriptor(Component, "domContent").get.call(this); |
83 | }, | 44 | }, |
84 | set: function(value) { | 45 | set: function(value) { |
85 | 46 | var element; | |
86 | // if no change or busy drawing a switch, ignore this "new" value | 47 | if (value && typeof value.needsDraw !== "undefined") { |
87 | if ((!!value && this._content === value)|| (!!this._contentToAppend && value === this._contentToAppend) || this._isSwitchingContent) { | ||
88 | return; | ||
89 | } | ||
90 | |||
91 | if (this._contentToAppend) { | ||
92 | // If we already had some content that was going to be appended, don't bother with it | ||
93 | // the new value we just received will supercede it | ||
94 | this._contentToAppend.needsDraw = false; | ||
95 | this._drawList = []; | ||
96 | } | ||
97 | |||
98 | // TODO if given a serialized component or something (a template) we should be able to handle that | ||
99 | |||
100 | this._contentToAppend = value; | ||
101 | |||
102 | if (this._contentToAppend && typeof this._contentToAppend.needsDraw !== "undefined") { | ||
103 | |||
104 | // If the incoming content was a component; make sure it has an element before we say it needs to draw | 48 | // If the incoming content was a component; make sure it has an element before we say it needs to draw |
105 | if (!this._contentToAppend.element) { | 49 | if (!value.element) { |
106 | var nodeToAppend = document.createElement("div"); | 50 | element = document.createElement("div"); |
107 | nodeToAppend.id = "appendDiv"; | 51 | element.id = "appendDiv"; // TODO: This should be uniquely generated |
108 | 52 | ||
109 | if (this.delegate && typeof this.delegate.slotElementForComponent === "function") { | 53 | if (this.delegate && typeof this.delegate.slotElementForComponent === "function") { |
110 | nodeToAppend = this.delegate.slotElementForComponent(this, this._contentToAppend, nodeToAppend); | 54 | element = this.delegate.slotElementForComponent(this, value, element); |
111 | } | 55 | } |
112 | this._contentToAppend.setElementWithParentComponent(nodeToAppend, this); | ||
113 | } else { | 56 | } else { |
114 | this._contentToAppend.setElementWithParentComponent(this._contentToAppend.element, this); | 57 | element = value.element; |
115 | } | 58 | } |
116 | |||
117 | // The child component will need to draw; this may trigger a draw for the slot itself | 59 | // The child component will need to draw; this may trigger a draw for the slot itself |
118 | this._contentToAppend.needsDraw = true; | 60 | Object.getPropertyDescriptor(Component, "domContent").set.call(this, element); |
61 | value.setElementWithParentComponent(element, this); | ||
62 | value.needsDraw = true; | ||
63 | } else { | ||
64 | Object.getPropertyDescriptor(Component, "domContent").set.call(this, value); | ||
119 | } | 65 | } |
120 | |||
121 | this.needsDraw = true; | 66 | this.needsDraw = true; |
122 | this._contentToRemove = this._content; | ||
123 | this._contentHasChanged = true; | ||
124 | |||
125 | return value; | ||
126 | } | ||
127 | }, | ||
128 | /** | ||
129 | Description TODO | ||
130 | @private | ||
131 | */ | ||
132 | _isSwitchingContent: { | ||
133 | enumerable: false, | ||
134 | value: false | ||
135 | }, | ||
136 | |||
137 | childComponentWillPrepareForDraw: { | ||
138 | value: function(child) { | ||
139 | if (child.element.parentElement == null) { | ||
140 | // by the time a child component lets us know it's about to prepare to draw for the first time | ||
141 | // we know we need to append its element to our own element. | ||
142 | this._element.appendChild(child.element); | ||
143 | this.needsDraw = true; | ||
144 | } | ||
145 | } | 67 | } |
146 | }, | 68 | }, |
147 | 69 | ||
148 | _canAppendContent: { | ||
149 | enumerable: false, | ||
150 | value: false | ||
151 | }, | ||
152 | |||
153 | canDraw: { | ||
154 | value: function() { | ||
155 | |||
156 | if (this._contentToAppend) { | ||
157 | if (typeof this._contentToAppend.needsDraw !== "undefined") { | ||
158 | this._canAppendContent = this._contentToAppend.canDraw(); | ||
159 | if (this._canAppendContent) { | ||
160 | this.needsDraw = true; | ||
161 | } | ||
162 | } else { | ||
163 | this._canAppendContent = true; | ||
164 | } | ||
165 | } else { | ||
166 | // No content to append, but we can render that situation (empty out the slot) | ||
167 | this._canAppendContent = true; | ||
168 | } | ||
169 | |||
170 | // We'll always offer to draw if asked to allow children to draw, but what the slot does when it draws | ||
171 | // will depend on the _canAppendContent flag determined at this point | ||
172 | return true; | ||
173 | } | ||
174 | }, | ||
175 | /** | 70 | /** |
176 | Description TODO | 71 | Description TODO |
177 | @function | 72 | @type {Function} |
73 | @default null | ||
178 | */ | 74 | */ |
179 | draw: { | 75 | contentDidChange: { |
180 | value: function() { | 76 | value: function(newContent, oldContent) { |
181 | |||
182 | |||
183 | if (!this._canAppendContent) { | ||
184 | return; | ||
185 | } | ||
186 | |||
187 | // Prevent other switching while we're in the middle of rendering this current switch | ||
188 | this._isSwitchingContent = true; | ||
189 | |||
190 | var nodeToAppend, nodeToRemove, rangeToRemove; | ||
191 | |||
192 | // If there's no content currently inside the slot we need to have one for transition support which expects | ||
193 | // a start and an end node; but we want to make sure the node is included in the rangeToRemove | ||
194 | if (this._contentToRemove) { | ||
195 | if (this._contentToRemove.nodeType) { | ||
196 | // The content is a node itself; use this node | ||
197 | nodeToRemove = this._contentToRemove; | ||
198 | } else if (this._contentToRemove.element) { | ||
199 | // The content has an element property set; use the element | ||
200 | nodeToRemove = this._contentToRemove.element; | ||
201 | } | ||
202 | } else { | ||
203 | if (this.transition) { | ||
204 | nodeToRemove = document.createElement("div"); | ||
205 | nodeToRemove.id = "removeDiv"; | ||