Merge pull request #1 from nobuti/autoupdate

Autoupdate
8 years ago · 5f0a423128
parent 5f34edc8c7 6d2c6ac8ec
commit 5f0a423128
7 changed files with 126 additions and 1 deletions
--- a/examples/options-autoupdate.html
+++ b/examples/options-autoupdate.html
@ -0,0 +1,55 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>perfect-scrollbar example</title>
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 80%; height: 400px; overflow: auto; }
      .always-visible.contentHolder .content { background-image: url('./azusa.jpg'); width: 680px; height: 320px; }
      .spacer { text-align:center }
      .always-visible.ps-container > .ps-scrollbar-x-rail,
      .always-visible.ps-container > .ps-scrollbar-y-rail {
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div id="Default" class="contentHolder always-visible">
      <div id="Content" class="content">
      </div>
    </div>
    <p style='text-align: center'>
      <button onclick='addContent()'>Add new content!</button>
      <button onclick='removeContent()'>Remove content!</button>
    </p>
    <script>
      var i = 1;
      var $ = document.querySelector.bind(document);
      window.onload = function () {
        Ps.initialize($('#Default'), {
          autoupdate: true
        });
      };
      var addContent = function () {
        var newDiv = document.createElement('div');
        newDiv.id = 'node' + i++;
        var newContent = document.createTextNode('Hi there!');
        newDiv.appendChild(newContent);
        $('#Default').insertBefore(newDiv, $('#Content'));
      };
      var removeContent = function () {
        if (i <= 1) return;
        var node = $('#node' + --i);
        node.parentNode.removeChild(node);
      };
    </script>
  </body>
 </html>
--- a/src/js/lib/helper.js
+++ b/src/js/lib/helper.js
@ -23,6 +23,26 @@ var clone = exports.clone = function (obj) {
  }
 };
 exports.debounce = function (func, wait, immediate) {
  var timeout;
  return function () {
    var context = this;
    var args = arguments;
    var later = function () {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {
      func.apply(context, args);
    }
  };
 };
 exports.extend = function (original, source) {
  var result = clone(original);
  for (var key in source) {
--- a/src/js/plugin/autoupdate.js
+++ b/src/js/plugin/autoupdate.js
@ -0,0 +1,23 @@
 'use strict';
 var update = require('./update');
 var MutationObserver = window.MutationObserver;
 var instances = require('./instances');
 module.exports = function (element) {
  if (MutationObserver === null || MutationObserver === undefined) {
    // MutationObserver is not supported
    return;
  }
  var i = instances.get(element);
  var onMutationObserver = function () {
    update(element);
  };
  i.observer = new MutationObserver(onMutationObserver);
  onMutationObserver();
  var config = { childList: true, subtree: true };
  i.observer.observe(element, config);
 };
--- a/src/js/plugin/default-setting.js
+++ b/src/js/plugin/default-setting.js
@ -12,5 +12,6 @@ module.exports = {
  useBothWheelAxes: false,
  wheelPropagation: false,
  wheelSpeed: 1,
-  theme: 'default'
+  theme: 'default',
  autoupdate: true
 };
--- a/src/js/plugin/destroy.js
+++ b/src/js/plugin/destroy.js
@ -11,6 +11,10 @@ module.exports = function (element) {
    return;
  }
  if (i.observer) {
    i.observer.disconnect();
  }
  i.event.unbindAll();
  dom.remove(i.scrollbarX);
  dom.remove(i.scrollbarY);
--- a/src/js/plugin/initialize.js
+++ b/src/js/plugin/initialize.js
@ -4,6 +4,8 @@ var _ = require('../lib/helper');
 var cls = require('../lib/class');
 var instances = require('./instances');
 var updateGeometry = require('./update-geometry');
 var autoupdate = require('./autoupdate');
 var resizer = require('./resizer');
 // Handlers
 var handlers = {
@ -34,4 +36,9 @@ module.exports = function (element, userSettings) {
  nativeScrollHandler(element);
  updateGeometry(element);
  if (i.settings.autoupdate) {
    autoupdate(element);
    resizer(element);
  }
 };
--- a/src/js/plugin/resizer.js
+++ b/src/js/plugin/resizer.js
@ -0,0 +1,15 @@
 'use strict';
 var update = require('./update');
 var instances = require('./instances');
 var _ = require('../lib/helper');
 module.exports = function (element) {
  var i = instances.get(element);
  var onResize = function () {
    update(element);
  };
  i.event.bind(window, 'resize', _.debounce(onResize, 60));
 };