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