Index: sky/framework/sky-scrollable.sky |
diff --git a/sky/framework/sky-scrollable.sky b/sky/framework/sky-scrollable.sky |
deleted file mode 100644 |
index 64d78dd7fab0b5a87d00bf98cca6954a40b4b21d..0000000000000000000000000000000000000000 |
--- a/sky/framework/sky-scrollable.sky |
+++ /dev/null |
@@ -1,162 +0,0 @@ |
-<!-- |
-// 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" /> |
- |
-<sky-element> |
-<template> |
- <style> |
- :host { |
- overflow: hidden; |
- position: relative; |
- will-change: transform; |
- } |
- #scrollable { |
- will-change: transform; |
- } |
- #vbar { |
- position: absolute; |
- right: 0; |
- background-color: lightgray; |
- pointer-events: none; |
- top: 0; |
- height: 0; |
- will-change: opacity; |
- opacity: 0; |
- transition-property: opacity; |
- transition-function: ease-in-out; |
- } |
- </style> |
- <div id="scrollable"> |
- <content /> |
- </div> |
- <div id="vbar" /> |
-</template> |
-<script> |
-import "dart:math" as math; |
-import "dart:sky"; |
-import "animation/fling-curve.dart"; |
-import "theme/view-configuration.dart" as config; |
- |
-@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); |
- } |
- |
- void shadowRootReady() { |
- _scrollable = shadowRoot.getElementById('scrollable'); |
- _vbar = shadowRoot.getElementById('vbar'); |
- // This is not documented anywhere, but the scrollbar appears to only paint |
- // 3px even though it's official width is 10px? |
- // Chrome appears 3px wide with a 3px outer spacing. |
- // Contacts appears 3px wide with a 5px runner and 5px outer spacing. |
- // Settings appears 4px wide with no outer spacing. |
- const double paintPercent = 0.3; |
- const double outerGapPercent = 0.3; |
- const double innerGapPercent = 0.4; |
- const double paintWidth = paintPercent * config.kScrollbarSize; |
- _vbar.style['width'] = "${paintWidth}px"; |
- _vbar.style['margin-right'] = "${outerGapPercent * config.kScrollbarSize}px"; |
- _vbar.style['margin-left'] ="${innerGapPercent * config.kScrollbarSize}px"; |
- // The scroll thumb never quite makes it to the top or bottom in gmail |
- // or chrome (in chrome more from the bottom than the top). |
- _vbar.style['margin-top'] = "${config.kScrollbarSize}px"; |
- _vbar.style['margin-bottom'] = "${config.kScrollbarSize}px"; |
- |
- // Some android apps round their scrollbars, some don't, not rounding for now. |
- |
- const double msToSeconds = 1.0 / 1000.0; |
- _vbar.style['transition-duration'] = "${msToSeconds * config.kScrollbarFadeDuration}s"; |
- _vbar.style['transition-delay'] = "${msToSeconds * config.kScrollbarFadeDelay}s"; |
- } |
- |
- 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; |
- // TODO(eseidel): We should scroll in device pixels instead of logical |
- // pixels, but to do that correctly we need to use a device pixel unit. |
- _scrollOffset = newScrollOffset; |
- String transform = 'translateY(${(-_scrollOffset).toInt()}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}%'; |
- } |
- |
- bool scrollBy(double scrollDelta) { |
- double oldScrollOffset = _scrollOffset; |
- scrollOffset += scrollDelta; |
- return _scrollOffset != oldScrollOffset; |
- } |
- |
- void _scheduleFlingUpdate() { |
- _flingAnimationId = window.requestAnimationFrame(_updateFling); |
- } |
- |
- void _stopFling() { |
- window.cancelAnimationFrame(_flingAnimationId); |
- _flingCurve = null; |
- _flingAnimationId = null; |
- _vbar.style['opacity'] = '0'; |
- } |
- |
- void _updateFling(double timeStamp) { |
- double scrollDelta = _flingCurve.update(timeStamp); |
- if (scrollDelta == 0.0 || !scrollBy(scrollDelta)) |
- _stopFling(); |
- else |
- _scheduleFlingUpdate(); |
- } |
- |
- void _handleScrollStart(_) { |
- _vbar.style['opacity'] = '1'; |
- } |
- |
- void _handleScrollEnd(_) { |
- _vbar.style['opacity'] = '0'; |
- } |
- |
- void _handleScrollUpdate(GestureEvent event) { |
- scrollBy(-event.dy); |
- } |
- |
- void _handleFlingStart(GestureEvent event) { |
- _flingCurve = new FlingCurve(-event.velocityY, event.timeStamp); |
- _scheduleFlingUpdate(); |
- } |
- |
- void _handleFlingCancel(_) { |
- _stopFling(); |
- } |
- |
- void _handleWheel(WheelEvent event) { |
- scrollBy(-event.offsetY); |
- } |
-} |
- |
-_init(script) => register(script, SkyScrollable); |
-</script> |
-</sky-element> |