Files.app: Move UI related sources into the ui directory.

ui/file_manager/file_manager/foreground/js/scrollbar.js

-// Copyright (c) 2013 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.
-
-'use strict';
-
-/**
- * Creates a new scroll bar element.
- * @extends {HTMLDivElement}
- * @constructor
- */
-var ScrollBar = cr.ui.define('div');
-
-/**
- * Mode of the scrollbar. As for now, only vertical scrollbars are supported.
- * @type {number}
- */
-ScrollBar.Mode = {
-  VERTICAL: 0,
-  HORIZONTAL: 1
-};
-
-ScrollBar.prototype = {
-  set mode(value) {
-    this.mode_ = value;
-    if (this.mode_ == ScrollBar.Mode.VERTICAL) {
-      this.classList.remove('scrollbar-horizontal');
-      this.classList.add('scrollbar-vertical');
-    } else {
-      this.classList.remove('scrollbar-vertical');
-      this.classList.add('scrollbar-horizontal');
-    }
-    this.redraw_();
-  },
-  get mode() {
-    return this.mode_;
-  }
-};
-
-/**
- * Inherits after HTMLDivElement.
- */
-ScrollBar.prototype.__proto__ = HTMLDivElement.prototype;
-
-/**
- * Initializes the DOM structure of the scrollbar.
- */
-ScrollBar.prototype.decorate = function() {
-  this.classList.add('scrollbar');
-  this.button_ = util.createChild(this, 'scrollbar-button', 'div');
-  this.mode = ScrollBar.Mode.VERTICAL;
-  this.idleTimerId_ = 0;
-
-  this.button_.addEventListener('mousedown',
-                                this.onButtonPressed_.bind(this));
-  window.addEventListener('mouseup', this.onMouseUp_.bind(this));
-  window.addEventListener('mousemove', this.onMouseMove_.bind(this));
-};
-
-/**
- * Initialize a scrollbar.
- *
- * @param {Element} parent Parent element, must have a relative or absolute
- *     positioning.
- * @param {Element=} opt_scrollableArea Element with scrollable contents.
- *     If not passed, then call attachToView manually when the scrollable
- *     element becomes available.
- */
-ScrollBar.prototype.initialize = function(parent, opt_scrollableArea) {
-  parent.appendChild(this);
-  if (opt_scrollableArea)
-    this.attachToView(opt_scrollableArea);
-};
-
-/**
- * Attaches the scrollbar to a scrollable element and attaches handlers.
- * @param {Element} view Scrollable element.
- */
-ScrollBar.prototype.attachToView = function(view) {
-  this.view_ = view;
-  this.view_.addEventListener('scroll', this.onScroll_.bind(this));
-  this.view_.addEventListener('relayout', this.onRelayout_.bind(this));
-  this.domObserver_ = new MutationObserver(this.onDomChanged_.bind(this));
-  this.domObserver_.observe(this.view_, {subtree: true, attributes: true});
-  this.onRelayout_();
-};
-
-/**
- * Scroll handler.
- * @private
- */
-ScrollBar.prototype.onScroll_ = function() {
-  this.scrollTop_ = this.view_.scrollTop;
-  this.redraw_();
-
-  // Add class 'scrolling' to scrollbar to make it visible while scrolling.
-  this.button_.classList.add('scrolling');
-
-  // Set timer to remove class 'scrolling' after scrolling becomes idle.
-  if (this.idleTimerId_)
-    clearTimeout(this.idleTimerId_);
-  this.idleTimerId_ = setTimeout(function() {
-    this.idleTimerId_ = 0;
-    this.button_.classList.remove('scrolling');
-  }.bind(this), 1000);
-};
-
-/**
- * Relayout handler.
- * @private
- */
-ScrollBar.prototype.onRelayout_ = function() {
-  this.scrollHeight_ = this.view_.scrollHeight;
-  this.clientHeight_ = this.view_.clientHeight;
-  this.offsetTop_ = this.view_.offsetTop;
-  this.scrollTop_ = this.view_.scrollTop;
-  this.redraw_();
-};
-
-/**
- * Pressing on the scrollbar's button handler.
- *
- * @param {Event} event Pressing event.
- * @private
- */
-ScrollBar.prototype.onButtonPressed_ = function(event) {
-  this.buttonPressed_ = true;
-  this.buttonPressedEvent_ = event;
-  this.buttonPressedPosition_ = this.button_.offsetTop - this.view_.offsetTop;
-  this.button_.classList.add('pressed');
-
-  event.preventDefault();
-};
-
-/**
- * Releasing the button handler. Note, that it may not be called when releasing
- * outside of the window. Therefore this is also called from onMouseMove_.
- *
- * @param {Event} event Mouse event.
- * @private
- */
-ScrollBar.prototype.onMouseUp_ = function(event) {
-  this.buttonPressed_ = false;
-  this.button_.classList.remove('pressed');
-};
-
-/**
- * Mouse move handler. Updates the scroll position.
- *
- * @param {Event} event Mouse event.
- * @private
- */
-ScrollBar.prototype.onMouseMove_ = function(event) {
-  if (!this.buttonPressed_)
-    return;
-  if (!event.which) {
-    this.onMouseUp_(event);
-    return;
-  }
-  var clientSize = this.getClientHeight();
-  var totalSize = this.getTotalHeight();
-  // TODO(hirono): Fix the geometric calculation.  crbug.com/253779
-  var buttonSize = Math.max(50, clientSize / totalSize * clientSize);
-  var buttonPosition = this.buttonPressedPosition_ +
-      (event.screenY - this.buttonPressedEvent_.screenY);
-  // Ensures the scrollbar is in the view.
-  buttonPosition =
-      Math.max(0, Math.min(buttonPosition, clientSize - buttonSize));
-  var scrollPosition;
-  if (clientSize > buttonSize) {
-    scrollPosition = Math.max(totalSize - clientSize, 0) *
-        buttonPosition / (clientSize - buttonSize);
-  } else {
-    scrollPosition = 0;
-  }
-
-  this.scrollTop_ = scrollPosition;
-  this.view_.scrollTop = scrollPosition;
-  this.redraw_();
-};
-
-/**
- * Handles changed in Dom by redrawing the scrollbar. Ignores consecutive calls.
- * @private
- */
-ScrollBar.prototype.onDomChanged_ = function() {
-  if (this.domChangedTimer_) {
-    clearTimeout(this.domChangedTimer_);
-    this.domChangedTimer_ = null;
-  }
-  this.domChangedTimer_ = setTimeout(function() {
-    this.onRelayout_();
-    this.domChangedTimer_ = null;
-  }.bind(this), 50);
-};
-
-/**
- * Redraws the scrollbar.
- * @private
- */
-ScrollBar.prototype.redraw_ = function() {
-  if (!this.view_)
-    return;
-
-  var clientSize = this.getClientHeight();
-  var clientTop = this.offsetTop_;
-  var scrollPosition = this.scrollTop_;
-  var totalSize = this.getTotalHeight();
-  var hidden = totalSize <= clientSize;
-
-  var buttonSize = Math.max(50, clientSize / totalSize * clientSize);
-  var buttonPosition;
-  if (clientSize - buttonSize > 0) {
-    buttonPosition = scrollPosition / (totalSize - clientSize) *
-        (clientSize - buttonSize);
-  } else {
-    buttonPosition = 0;
-  }
-  var buttonTop = buttonPosition + clientTop;
-
-  var time = Date.now();
-  if (this.hidden != hidden ||
-      this.lastButtonTop_ != buttonTop ||
-      this.lastButtonSize_ != buttonSize) {
-    requestAnimationFrame(function() {
-      this.hidden = hidden;
-      this.button_.style.top = buttonTop + 'px';
-      this.button_.style.height = buttonSize + 'px';
-    }.bind(this));
-  }
-
-  this.lastButtonTop_ = buttonTop;
-  this.lastButtonSize_ = buttonSize;
-};
-
-/**
- * Returns the viewport height of the view.
- * @return {number} The viewport height of the view in px.
- * @protected
- */
-ScrollBar.prototype.getClientHeight = function() {
-  return this.clientHeight_;
-};
-
-/**
- * Returns the total height of the view.
- * @return {number} The total height of the view in px.
- * @protected
- */
-ScrollBar.prototype.getTotalHeight = function() {
-  return this.scrollHeight_;
-};
-
-/**
- * Creates a new scroll bar for elements in the main panel.
- * @extends {ScrollBar}
- * @constructor
- */
-var MainPanelScrollBar = cr.ui.define('div');
-
-/**
- * Inherits after ScrollBar.
- */
-MainPanelScrollBar.prototype.__proto__ = ScrollBar.prototype;
-
-/** @override */
-MainPanelScrollBar.prototype.decorate = function() {
-  ScrollBar.prototype.decorate.call(this);
-
-  /**
-   * Margin for the transparent preview panel at the bottom.
-   * @type {number}
-   * @private
-   */
-  this.bottomMarginForPanel_ = 0;
-};
-
-/**
- * GReturns the viewport height of the view, considering the preview panel.
- *
- * @return {number} The viewport height of the view in px.
- * @override
- * @protected
- */
-MainPanelScrollBar.prototype.getClientHeight = function() {
-  return this.clientHeight_ - this.bottomMarginForPanel_;
-};
-
-/**
- * Returns the total height of the view, considering the preview panel.
- *
- * @return {number} The total height of the view in px.
- * @override
- * @protected
- */
-MainPanelScrollBar.prototype.getTotalHeight = function() {
-  return this.scrollHeight_ - this.bottomMarginForPanel_;
-};
-
-/**
- * Sets the bottom margin height of the view for the transparent preview panel.
- * @param {number} margin Margin to be set in px.
- */
-MainPanelScrollBar.prototype.setBottomMarginForPanel = function(margin) {
-  this.bottomMarginForPanel_ = margin;
-};