chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.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 Polymer({
   6   is: 'viewer-zoom-button',
   7
   8   behaviors: [
   9     Polymer.NeonAnimationRunnerBehavior
  10   ],
  11
  12   properties: {
  13     /**
  14      * Icons to be displayed on the FAB. Multiple icons should be separated with
  15      * spaces, and will be cycled through every time the FAB is clicked.
  16      */
  17     icons: String,
  18
  19     /**
  20      * Array version of the list of icons. Polymer does not allow array
  21      * properties to be set from HTML, so we must use a string property and
  22      * perform the conversion manually.
  23      * @private
  24      */
  25     icons_: {
  26       type: Array,
  27       value: [''],
  28       computed: 'computeIconsArray_(icons)'
  29     },
  30
  31     opened: {
  32       type: Boolean,
  33       value: true
  34     },
  35
  36     delay: Number,
  37
  38     animationConfig: {
  39       type: Object,
  40       computed: 'computeAnimationConfig_(delay)'
  41     },
  42
  43     /**
  44      * Index of the icon currently being displayed.
  45      */
  46     activeIndex: {
  47       type: Number,
  48       value: 0
  49     },
  50
  51     /**
  52      * Icon currently being displayed on the FAB.
  53      * @private
  54      */
  55     visibleIcon_: {
  56       type: String,
  57       computed: 'computeVisibleIcon_(icons_, activeIndex)'
  58     }
  59   },
  60
  61   computeAnimationConfig_: function(delay) {
  62     return {
  63       'entry': {
  64         name: 'transform-animation',
  65         node: this,
  66         timing: {
  67           easing: 'cubic-bezier(0, 0, 0.2, 1)',
  68           duration: 250,
  69           delay: delay
  70         },
  71         transformFrom: 'translateX(100%)'
  72       },
  73       'exit': {
  74         name: 'transform-animation',
  75         node: this,
  76         timing: {
  77           easing: 'cubic-bezier(0.4, 0, 1, 1)',
  78           duration: 250,
  79           delay: delay
  80         },
  81         transformTo: 'translateX(100%)'
  82       }
  83     };
  84   },
  85
  86   computeIconsArray_: function(icons) {
  87     return icons.split(' ');
  88   },
  89
  90   computeVisibleIcon_: function(icons, activeIndex) {
  91     return icons[activeIndex];
  92   },
  93
  94   listeners: {
  95     'neon-animation-finish': '_onAnimationFinished'
  96   },
  97
  98   _onAnimationFinished: function() {
  99     this.style.transform = this.opened ? 'none' : 'translateX(100%)';
 100   },
 101
 102   show: function() {
 103     if (!this.opened) {
 104       this.toggle_();
 105     }
 106   },
 107
 108   hide: function() {
 109     if (this.opened)
 110       this.toggle_();
 111   },
 112
 113   toggle_: function() {
 114     this.opened = !this.opened;
 115     this.cancelAnimation();
 116     this.playAnimation(this.opened ? 'entry' : 'exit');
 117   },
 118
 119   fireClick: function() {
 120     // We cannot attach an on-click to the entire viewer-zoom-button, as this
 121     // will include clicks on the margins. Instead, proxy clicks on the FAB
 122     // through.
 123     this.fire('fabclick');
 124
 125     this.activeIndex = (this.activeIndex + 1) % this.icons_.length;
 126   }
 127 });