chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 (function() {
   6   /**
   7    * Size of additional padding in the inner scrollable section of the dropdown.
   8    */
   9   var DROPDOWN_INNER_PADDING = 12;
  10
  11   /** Size of vertical padding on the outer #dropdown element. */
  12   var DROPDOWN_OUTER_PADDING = 2;
  13
  14   /** Minimum height of toolbar dropdowns (px). */
  15   var MIN_DROPDOWN_HEIGHT = 200;
  16
  17   Polymer({
  18     is: 'viewer-toolbar-dropdown',
  19
  20     properties: {
  21       /** String to be displayed at the top of the dropdown. */
  22       header: String,
  23
  24       /** Icon to display when the dropdown is closed. */
  25       closedIcon: String,
  26
  27       /** Icon to display when the dropdown is open. */
  28       openIcon: String,
  29
  30       /** True if the dropdown is currently open. */
  31       dropdownOpen: {
  32         type: Boolean,
  33         value: false
  34       },
  35
  36       /** Toolbar icon currently being displayed. */
  37       dropdownIcon: {
  38         type: String,
  39         computed: 'computeIcon_(dropdownOpen, closedIcon, openIcon)'
  40       },
  41
  42       /** Lowest vertical point that the dropdown should occupy (px). */
  43       lowerBound: {
  44         type: Number,
  45         observer: 'lowerBoundChanged_'
  46       },
  47
  48       /**
  49        * True if the max-height CSS property for the dropdown scroll container
  50        * is valid. If false, the height will be updated the next time the
  51        * dropdown is visible.
  52        */
  53       maxHeightValid_: false,
  54
  55       /** Current animation being played, or null if there is none. */
  56       animation_: Object
  57     },
  58
  59     computeIcon_: function(dropdownOpen, closedIcon, openIcon) {
  60       return dropdownOpen ? openIcon : closedIcon;
  61     },
  62
  63     lowerBoundChanged_: function() {
  64       this.maxHeightValid_ = false;
  65       if (this.dropdownOpen)
  66         this.updateMaxHeight();
  67     },
  68
  69     toggleDropdown: function() {
  70       this.dropdownOpen = !this.dropdownOpen;
  71       if (this.dropdownOpen) {
  72         this.$.icon.classList.add('open');
  73         this.$.dropdown.style.display = 'block';
  74         if (!this.maxHeightValid_)
  75           this.updateMaxHeight();
  76       } else {
  77         this.$.icon.classList.remove('open');
  78       }
  79       this.cancelAnimation_();
  80       this.playAnimation_(this.dropdownOpen);
  81     },
  82
  83     updateMaxHeight: function() {
  84       var scrollContainer = this.$['scroll-container'];
  85       var height = this.lowerBound -
  86           scrollContainer.getBoundingClientRect().top -
  87           DROPDOWN_INNER_PADDING;
  88       height = Math.max(height, MIN_DROPDOWN_HEIGHT);
  89       scrollContainer.style.maxHeight = height + 'px';
  90       this.maxHeightValid_ = true;
  91     },
  92
  93     cancelAnimation_: function() {
  94       if (this._animation)
  95         this._animation.cancel();
  96     },
  97
  98     /**
  99      * Start an animation on the dropdown.
 100      * @param {boolean} isEntry True to play entry animation, false to play
 101      * exit.
 102      * @private
 103      */
 104     playAnimation_: function(isEntry) {
 105       this.animation_ = isEntry ? this.animateEntry_() : this.animateExit_();
 106       this.animation_.onfinish = function() {
 107         this.animation_ = null;
 108         if (!this.dropdownOpen)
 109           this.$.dropdown.style.display = 'none';
 110       }.bind(this);
 111     },
 112
 113     animateEntry_: function() {
 114       var maxHeight = this.$.dropdown.getBoundingClientRect().height -
 115           DROPDOWN_OUTER_PADDING;
 116
 117       if (maxHeight < 0)
 118         maxHeight = 0;
 119
 120       var fade = new KeyframeEffect(this.$.dropdown, [
 121             {opacity: 0},
 122             {opacity: 1}
 123           ], {duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
 124       var slide = new KeyframeEffect(this.$.dropdown, [
 125             {height: '20px', transform: 'translateY(-10px)'},
 126             {height: maxHeight + 'px', transform: 'translateY(0)'}
 127           ], {duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
 128
 129       return document.timeline.play(new GroupEffect([fade, slide]));
 130     },
 131
 132     animateExit_: function() {
 133       return this.$.dropdown.animate([
 134             {transform: 'translateY(0)', opacity: 1},
 135             {transform: 'translateY(-5px)', opacity: 0}
 136           ], {duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'});
 137     }
 138   });
 139
 140 })();