| 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 |