added options.fade; added setters for scrollWidth and scrollHeight

davidfig · Jan 24, 2019 · 0eed27c · 0eed27c
1 parent 9f23839
commit 0eed27c
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,9 @@
     "pixi-viewport": ">=3.12.0",
     "pixi.js": ">=4.6.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "pixi-ease": "^1.1.2"
+  },
   "devDependencies": {
     "babel-preset-env": "^1.7.0",
     "clicked": "^2.0.0",

diff --git a/src/defaults.json b/src/defaults.json
@@ -8,5 +8,8 @@
     "stopPropagation": true,
     "scrollbarOffsetHorizontal": 0,
     "scrollbarOffsetVertical": 0,
-    "underflow": "top-left"
+    "underflow": "top-left",
+    "fadeScrollbar": false,
+    "fadeWait": 3000,
+    "fadeEase": "easeInOutSine"
 }
diff --git a/src/scrollbox.js b/src/scrollbox.js
@@ -1,8 +1,11 @@
 const Viewport = require('pixi-viewport')
+const Ease = require('pixi-ease')
 
 const defaults = require('./defaults')
 const DEFAULTS = require('./defaults.json')
 
+const FADE_SCROLLBAR_TIME = 1000
+
 /**
  * pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
  */
@@ -24,11 +27,15 @@ class Scrollbox extends PIXI.Container
      * @param {number} [options.scrollbarBackground=0xdddddd] background color of scrollbar
      * @param {number} [options.scrollbarForeground=0x888888] foreground color of scrollbar
      * @param {string} [options.underflow=top-left] what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
+     * @param {(boolean|number)} [options.fade] fade the scrollbar when not in use (true = 1000ms)
+     * @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
+     * @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
      */
     constructor(options)
     {
         super()
         this.options = defaults(options, DEFAULTS)
+        this.ease = new Ease.list()
 
         /**
          * content in placed in here
@@ -288,18 +295,28 @@ class Scrollbox extends PIXI.Container
 
     /**
      * width of content area
+     * if not set then it uses content.width to calculate width
      */
     get scrollWidth()
     {
-        return this.content.width
+        return this._scrollWidth || this.content.width
+    }
+    set scrollWidth(value)
+    {
+        this._scrollWidth = value
     }
 
     /**
      * height of content area
+     * if not set then it uses content.height to calculate height
      */
     get scrollHeight()
     {
-        return this.content.height
+        return this._scrollHeight || this.content.height
+    }
+    set scrollHeight(value)
+    {
+        this._scrollHeight = value
     }
 
     /**
@@ -308,16 +325,16 @@ class Scrollbox extends PIXI.Container
      */
     _drawScrollbars()
     {
-        this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.content.width > this.options.boxWidth
-        this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.content.height > this.options.boxHeight
+        this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth
+        this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight
         this.scrollbar.clear()
         let options = {}
         options.left = 0
-        options.right = this.content.width + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
+        options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
         options.top = 0
-        options.bottom = this.content.height + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
-        const width = this.content.width + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
-        const height = this.content.height + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
+        options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
+        const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
+        const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
         this.scrollbarTop = (this.content.top / height) * this.boxHeight
         this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
         this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
@@ -355,6 +372,7 @@ class Scrollbox extends PIXI.Container
                 .endFill()
         }
         this.content.forceHitArea = new PIXI.Rectangle(0, 0, options.right, options.bottom)
+        this.activateFade()
     }
 
     /**
@@ -394,6 +412,24 @@ class Scrollbox extends PIXI.Container
         }
     }
 
+    /**
+     * show the scrollbar and restart the timer for fade if options.fade is set
+     */
+    activateFade()
+    {
+        if (this.options.fade)
+        {
+            if (this.fade)
+            {
+                this.ease.remove(this.fade)
+            }
+            this.scrollbar.alpha = 1
+            const time = this.options.fade === true ? FADE_SCROLLBAR_TIME : this.options.fade
+            this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase })
+            this.fade.on('each', () => this.content.dirty = true)
+        }
+    }
+
     /**
      * handle pointer down on scrollbar
      * @param {PIXI.interaction.InteractionEvent} e
@@ -504,12 +540,22 @@ class Scrollbox extends PIXI.Container
      * @param {object} options
      * @param {number} [options.boxWidth] width of scrollbox including scrollbar (in pixels)
      * @param {number} [options.boxHeight] height of scrollbox including scrollbar (in pixels)
+     * @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
+     * @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
      */
     resize(options)
     {
         this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
         this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
-        this.content.resize(this.options.boxWidth, this.options.boxHeight, this.content.width, this.content.height)
+        if (options.scrollWidth)
+        {
+            this.scrollWidth = options.scrollWidth
+        }
+        if (options.scrollHeight)
+        {
+            this.scrollHeight = options.scrollHeight
+        }
+        this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
         this.update()
     }
 

diff --git a/yarn.lock b/yarn.lock
@@ -625,6 +625,16 @@ penner@^0.1.3:
   resolved "https://registry.yarnpkg.com/penner/-/penner-0.1.3.tgz#0b8b482d4e9b39af2f3d7c37592229b8acc29705"
   integrity sha1-C4tILU6bOa8vPXw3WSIpuKzClwU=
 
+pixi-ease@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pixi-ease/-/pixi-ease-1.1.2.tgz#e0345985518496dbc7c2942dbdac8058d727e931"
+  integrity sha512-dr8xpjnJxZQQPTzk2ArGLkZDkoNkF2k3WPGpSvkLpzNL8LFpCqsBnb3juGQ7Srxd2cs4SmfLJ5YIpS4bGgQl0Q==
+  dependencies:
+    eventemitter3 "^3.1.0"
+    penner "^0.1.3"
+    yy-angle "^1.3.1"
+    yy-color "^1.1.1"
+
 pixi-gl-core@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/pixi-gl-core/-/pixi-gl-core-1.1.4.tgz#8b4b5c433b31e419bc379dc565ce1b835a91b372"
@@ -752,6 +762,18 @@ underscore@^1.7.0:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
   integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==
 
+yy-angle@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/yy-angle/-/yy-angle-1.3.1.tgz#996ed0ab1cd521b0ee09eb71e41db503b7a172e4"
+  integrity sha512-A81E2JVWPx6UuHnmNyM0wgyiC+azFW3J1U0+kIZ+HFX7ERXmsPAGo6S8kRTa4WoQUky5wbsn+4orkAA8Am5q5w==
+
+yy-color@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/yy-color/-/yy-color-1.1.2.tgz#5c98fba33ea53e054f785443d26c6279300e5c00"
+  integrity sha512-xAnFzZ3IPOsoQwKfhEhsq7tfhpNXrXrjeUtoStdwBKgfKdhoJatqLNBvybPYt270pX3LqSdAr1x/M07hxjIHEw==
+  dependencies:
+    yy-random "^1.0.1"
+
 yy-counter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/yy-counter/-/yy-counter-2.1.0.tgz#6c023c5a5f48a962cf34f234cbb26f64d8bd2c2e"
@@ -773,7 +795,7 @@ yy-jsdoc-template@^1.3.0:
     taffydb "^2.7.2"
     underscore "^1.7.0"
 
-yy-random@^1.7.1:
+yy-random@^1.0.1, yy-random@^1.7.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/yy-random/-/yy-random-1.7.3.tgz#02bcf4b527b11eb36258808c467ad163507cc09e"
   integrity sha512-6ehVIOde2r6wUR/ocy/5Tw6PDvx9En1x6X6ClKPCbQMnU2zBVXlmyW3KluEank7rwKS9fnWzcToj8wqLokc50Q==