OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 'use strict'; | 5 'use strict'; |
6 | 6 |
7 installClass('HTMLMarqueeElement', function(global, HTMLMarqueeElementPrototype)
{ | 7 installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) { |
8 | 8 |
9 var kDefaultScrollAmount = 6; | 9 var kDefaultScrollAmount = 6; |
10 var kDefaultScrollDelayMS = 85; | 10 var kDefaultScrollDelayMS = 85; |
11 var kMinimumScrollDelayMS = 60; | 11 var kMinimumScrollDelayMS = 60; |
12 | 12 |
13 var kDefaultLoopLimit = -1; | 13 var kDefaultLoopLimit = -1; |
14 | 14 |
15 var kBehaviorScroll = 'scroll'; | 15 var kBehaviorScroll = 'scroll'; |
16 var kBehaviorSlide = 'slide'; | 16 var kBehaviorSlide = 'slide'; |
17 var kBehaviorAlternate = 'alternate'; | 17 var kBehaviorAlternate = 'alternate'; |
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
115 reflectAttribute(HTMLMarqueeElementPrototype, 'vspace', 'vspace'); | 115 reflectAttribute(HTMLMarqueeElementPrototype, 'vspace', 'vspace'); |
116 reflectAttribute(HTMLMarqueeElementPrototype, 'width', 'width'); | 116 reflectAttribute(HTMLMarqueeElementPrototype, 'width', 'width'); |
117 reflectBooleanAttribute(HTMLMarqueeElementPrototype, 'truespeed', 'trueSpeed
'); | 117 reflectBooleanAttribute(HTMLMarqueeElementPrototype, 'truespeed', 'trueSpeed
'); |
118 | 118 |
119 defineInlineEventHandler(HTMLMarqueeElementPrototype, 'start'); | 119 defineInlineEventHandler(HTMLMarqueeElementPrototype, 'start'); |
120 defineInlineEventHandler(HTMLMarqueeElementPrototype, 'finish'); | 120 defineInlineEventHandler(HTMLMarqueeElementPrototype, 'finish'); |
121 defineInlineEventHandler(HTMLMarqueeElementPrototype, 'bounce'); | 121 defineInlineEventHandler(HTMLMarqueeElementPrototype, 'bounce'); |
122 | 122 |
123 HTMLMarqueeElementPrototype.createdCallback = function() { | 123 HTMLMarqueeElementPrototype.createdCallback = function() { |
124 var shadow = this.createShadowRoot(); | 124 var shadow = this.createShadowRoot(); |
125 var style = global.document.createElement('style'); | 125 var style = document.createElement('style'); |
126 style.textContent = ':host { display: inline-block; width: -webkit-fill-avai
lable; overflow: hidden; text-align: initial; }' + | 126 style.textContent = ':host { display: inline-block; width: -webkit-fill-avai
lable; overflow: hidden; text-align: initial; }' + |
127 ':host([direction="up"]), :host([direction="down"]) { height: 200px;
}'; | 127 ':host([direction="up"]), :host([direction="down"]) { height: 200px;
}'; |
128 shadow.appendChild(style); | 128 shadow.appendChild(style); |
129 | 129 |
130 var mover = global.document.createElement('div'); | 130 var mover = document.createElement('div'); |
131 shadow.appendChild(mover); | 131 shadow.appendChild(mover); |
132 | 132 |
133 mover.appendChild(global.document.createElement('content')); | 133 mover.appendChild(document.createElement('content')); |
134 | 134 |
135 this.loopCount_ = 0; | 135 this.loopCount_ = 0; |
136 this.mover_ = mover; | 136 this.mover_ = mover; |
137 this.player_ = null; | 137 this.player_ = null; |
138 this.continueCallback_ = null; | 138 this.continueCallback_ = null; |
139 | 139 |
140 for (var i = 0; i < kPresentationalAttributes.length; ++i) | 140 for (var i = 0; i < kPresentationalAttributes.length; ++i) |
141 this.initializeAttribute_(kPresentationalAttributes[i]); | 141 this.initializeAttribute_(kPresentationalAttributes[i]); |
142 }; | 142 }; |
143 | 143 |
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
227 set: function(value) { | 227 set: function(value) { |
228 if (value <= 0 && value != -1) | 228 if (value <= 0 && value != -1) |
229 throw new DOMExceptionInPrivateScript("IndexSizeError", "The pro
vided value (" + value + ") is neither positive nor -1."); | 229 throw new DOMExceptionInPrivateScript("IndexSizeError", "The pro
vided value (" + value + ") is neither positive nor -1."); |
230 this.setAttribute('loop', value); | 230 this.setAttribute('loop', value); |
231 }, | 231 }, |
232 }); | 232 }); |
233 | 233 |
234 HTMLMarqueeElementPrototype.getGetMetrics_ = function() { | 234 HTMLMarqueeElementPrototype.getGetMetrics_ = function() { |
235 this.mover_.style.width = '-webkit-max-content'; | 235 this.mover_.style.width = '-webkit-max-content'; |
236 | 236 |
237 var moverStyle = global.getComputedStyle(this.mover_); | 237 var moverStyle = getComputedStyle(this.mover_); |
238 var marqueeStyle = global.getComputedStyle(this); | 238 var marqueeStyle = getComputedStyle(this); |
239 | 239 |
240 var metrics = {}; | 240 var metrics = {}; |
241 metrics.contentWidth = parseInt(moverStyle.width); | 241 metrics.contentWidth = parseInt(moverStyle.width); |
242 metrics.contentHeight = parseInt(moverStyle.height); | 242 metrics.contentHeight = parseInt(moverStyle.height); |
243 metrics.marqueeWidth = parseInt(marqueeStyle.width); | 243 metrics.marqueeWidth = parseInt(marqueeStyle.width); |
244 metrics.marqueeHeight = parseInt(marqueeStyle.height); | 244 metrics.marqueeHeight = parseInt(marqueeStyle.height); |
245 | 245 |
246 this.mover_.style.width = ''; | 246 this.mover_.style.width = ''; |
247 return metrics; | 247 return metrics; |
248 }; | 248 }; |
(...skipping 135 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
384 ++this.loopCount_; | 384 ++this.loopCount_; |
385 this.continue_(); | 385 this.continue_(); |
386 if (this.player_ && this.behavior === kBehaviorAlternate) | 386 if (this.player_ && this.behavior === kBehaviorAlternate) |
387 this.dispatchEvent(new Event('bounce', false, true)); | 387 this.dispatchEvent(new Event('bounce', false, true)); |
388 }.bind(this)); | 388 }.bind(this)); |
389 }; | 389 }; |
390 | 390 |
391 HTMLMarqueeElementPrototype.start = function() { | 391 HTMLMarqueeElementPrototype.start = function() { |
392 if (this.continueCallback_ || this.player_) | 392 if (this.continueCallback_ || this.player_) |
393 return; | 393 return; |
394 this.continueCallback_ = global.requestAnimationFrame(function() { | 394 this.continueCallback_ = requestAnimationFrame(function() { |
395 this.continueCallback_ = null; | 395 this.continueCallback_ = null; |
396 this.continue_(); | 396 this.continue_(); |
397 }.bind(this)); | 397 }.bind(this)); |
398 this.dispatchEvent(new Event('start', false, true)); | 398 this.dispatchEvent(new Event('start', false, true)); |
399 }; | 399 }; |
400 | 400 |
401 HTMLMarqueeElementPrototype.stop = function() { | 401 HTMLMarqueeElementPrototype.stop = function() { |
402 if (!this.continueCallback_ && !this.player_) | 402 if (!this.continueCallback_ && !this.player_) |
403 return; | 403 return; |
404 | 404 |
405 if (this.continueCallback_) { | 405 if (this.continueCallback_) { |
406 global.cancelAnimationFrame(this.continueCallback_); | 406 cancelAnimationFrame(this.continueCallback_); |
407 this.continueCallback_ = null; | 407 this.continueCallback_ = null; |
408 return; | 408 return; |
409 } | 409 } |
410 | 410 |
411 // FIXME: Rather than canceling the animation, we really should just | 411 // FIXME: Rather than canceling the animation, we really should just |
412 // pause the animation, but the pause function is still flagged as | 412 // pause the animation, but the pause function is still flagged as |
413 // experimental. | 413 // experimental. |
414 if (this.player_) { | 414 if (this.player_) { |
415 var player = this.player_; | 415 var player = this.player_; |
416 this.player_ = null; | 416 this.player_ = null; |
417 player.cancel(); | 417 player.cancel(); |
418 } | 418 } |
419 }; | 419 }; |
420 | 420 |
421 // FIXME: We have to inject this HTMLMarqueeElement as a custom element in o
rder to make | 421 // FIXME: We have to inject this HTMLMarqueeElement as a custom element in o
rder to make |
422 // createdCallback, attachedCallback, detachedCallback and attributeChangedC
allback workable. | 422 // createdCallback, attachedCallback, detachedCallback and attributeChangedC
allback workable. |
423 // global.document.registerElement('i-marquee', { | 423 // document.registerElement('i-marquee', { |
424 // prototype: HTMLMarqueeElementPrototype, | 424 // prototype: HTMLMarqueeElementPrototype, |
425 // }); | 425 // }); |
426 }); | 426 }); |
OLD | NEW |