Port sky-scrollable to Dart

sky/framework/sky-scrollable.sky

 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
-<import src="sky-element/sky-element.sky" as="SkyElement" />
-<import src="fling-curve.sky" as="FlingCurve" />
+<import src="sky-element.sky" />
 
-<sky-element
-  name="sky-scrollable"
-  on-gesturescrollstart="handleScrollStart_"
-  on-gesturescrollend="handleScrollEnd_"
-  on-gesturescrollupdate="handleScrollUpdate_"
-  on-gestureflingstart="handleFlingStart_"
-  on-gestureflingcancel="handleFlingCancel_"
-  on-wheel="handleWheel_">
+<sky-element>
 <template>
   <style>
   :host {
     overflow: hidden;
     position: relative;
   }
   #scrollable {
     transform: translateY(0);
   }
   #vbar {
     position: absolute;
     right: 0;
     width: 3px;
     background-color: lightgray;
     pointer-events: none;
     top: 0;
     height: 0;
     will-change: opacity;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
   </style>
   <div id="scrollable">
     <content />
   </div>
   <div id="vbar" />
 </template>
 <script>
-module.exports = class extends SkyElement {
-  created() {
-    this.scrollable_ = null;
-    this.vbar_ = null;
-    this.scrollOffset_ = 0;
-    this.flingCurve_ = null;
-    this.flingAnimationId_ = null;
+import "dart:math" as math;
+import "dart:sky";
+import "fling-curve.dart";
+
+@Tagname('sky-scrollable')
+class SkyScrollable extends SkyElement {
+  Element _scrollable;
+  Element _vbar;
+  double _scrollOffset = 0.0;
+  FlingCurve _flingCurve;
+  int _flingAnimationId;
+
+  SkyScrollable() {
+    addEventListener('gesturescrollstart', _handleScrollStart);
+    addEventListener('gesturescrollend', _handleScrollEnd);
+    addEventListener('gesturescrollupdate', _handleScrollUpdate);
+    addEventListener('gestureflingstart', _handleFlingStart);
+    addEventListener('gestureflingcancel', _handleFlingCancel);
+    addEventListener('wheel', _handleWheel);
   }
 
-  shadowRootReady() {
-    this.scrollable_ = this.shadowRoot.getElementById('scrollable');
-    this.vbar_ = this.shadowRoot.getElementById('vbar');
+  void shadowRootReady() {
+    _scrollable = shadowRoot.getElementById('scrollable');
+    _vbar = shadowRoot.getElementById('vbar');
   }
 
-  get scrollOffset() {
-    return this.scrollOffset_;
+  double get scrollOffset => _scrollOffset;
+
+  set scrollOffset(double value) {
+    // TODO(abarth): Can we get these values without forcing a synchronous layout?
+    double outerHeight = clientHeight.toDouble();
+    double innerHeight = _scrollable.clientHeight.toDouble();
+    double scrollRange = innerHeight - outerHeight;
+    double newScrollOffset = math.max(0.0, math.min(scrollRange, value));
+    if (newScrollOffset == _scrollOffset)
+      return;
+    _scrollOffset = newScrollOffset;
+    String transform = 'translateY(${(-_scrollOffset).toStringAsFixed(2)}px)';
+    _scrollable.style['transform'] = transform;
+
+    double topPercent = newScrollOffset / innerHeight * 100.0;
+    double heightPercent = outerHeight / innerHeight * 100.0;
+    _vbar.style['top'] = '${topPercent}%';
+    _vbar.style['height'] = '${heightPercent}%';
   }
 
-  set scrollOffset(value) {
-    // TODO(abarth): Can we get these values without forcing a synchronous layout?
-    var outerHeight = this.clientHeight;
-    var innerHeight = this.scrollable_.clientHeight;
-    var scrollRange = innerHeight - outerHeight;
-    var newScrollOffset = Math.max(0, Math.min(scrollRange, value));
-    if (newScrollOffset == this.scrollOffset_)
-      return;
-    this.scrollOffset_ = newScrollOffset;
-    var transform = 'translateY(' + -this.scrollOffset_.toFixed(2) + 'px)';
-    this.scrollable_.style.transform = transform;
-
-    var topPercent = newScrollOffset / innerHeight * 100;
-    var heightPercent = outerHeight / innerHeight * 100;
-    this.vbar_.style.top = topPercent + '%';
-    this.vbar_.style.height = heightPercent + '%';
+  bool scrollBy(double scrollDelta) {
+    double oldScrollOffset = _scrollOffset;
+    scrollOffset += scrollDelta;
+    return _scrollOffset != oldScrollOffset;
   }
 
-  scrollBy(scrollDelta) {
-    var oldScrollOffset = this.scrollOffset_;
-    this.scrollOffset += scrollDelta;
-    return this.scrollOffset_ != oldScrollOffset;
+  void _scheduleFlingUpdate() {
+    _flingAnimationId = window.requestAnimationFrame(_updateFling);
   }
 
-  scheduleFlingUpdate_() {
-    this.flingAnimationId_ = requestAnimationFrame(this.updateFling_.bind(this));
+  void _stopFling() {
+    window.cancelAnimationFrame(_flingAnimationId);
+    _flingCurve = null;
+    _flingAnimationId = null;
+    _vbar.style['opacity'] = '0';
   }
 
-  stopFling_() {
-    cancelAnimationFrame(this.flingAnimationId_);
-    this.flingCurve_ = null;
-    this.flingAnimationId_ = null;
-    this.vbar_.style.opacity = 0;
+  void _updateFling(double timeStamp) {
+    double scrollDelta = _flingCurve.update(timeStamp);
+    if (scrollDelta == 0.0 || !scrollBy(scrollDelta))
+      _stopFling();
+    else
+      _scheduleFlingUpdate();
   }
 
-  updateFling_(timeStamp) {
-    var scrollDelta = this.flingCurve_.update(timeStamp);
-    if (!scrollDelta || !this.scrollBy(scrollDelta))
-      return this.stopFling_();
-    this.scheduleFlingUpdate_();
+  void _handleScrollStart(_) {
+    _vbar.style['opacity'] = '1';
   }
 
-  handleScrollStart_(event) {
-    this.vbar_.style.opacity = 1;
+  void _handleScrollEnd(_) {
+    _vbar.style['opacity'] = '0';
   }
 
-  handleScrollEnd_(event) {
-    this.vbar_.style.opacity = 0;
+  void _handleScrollUpdate(GestureEvent event) {
+    scrollBy(-event.dy);
   }
 
-  handleScrollUpdate_(event) {
-    this.scrollBy(-event.dy);
+  void _handleFlingStart(GestureEvent event) {
+    _flingCurve = new FlingCurve(-event.velocityY, event.timeStamp);
+    _scheduleFlingUpdate();
   }
 
-  handleFlingStart_(event) {
-    this.flingCurve_ = new FlingCurve(-event.velocityY, event.timeStamp);
-    this.scheduleFlingUpdate_();
+  void _handleFlingCancel(_) {
+    _stopFling();
   }
 
-  handleFlingCancel_(event) {
-    this.stopFling_();
+  void _handleWheel(WheelEvent event) {
+    scrollBy(-event.offsetY);
   }
+}
 
-  handleWheel_(event) {
-    this.scrollBy(-event.offsetY);
-  }
-}.register();
+_init(script) => register(script, SkyScrollable);
 </script>
 </sky-element>