From 5cfd4b1dad0996564447aa63b30c1dd09fe42910 Mon Sep 17 00:00:00 2001
From: Hyunje Jun <me@noraesae.net>
Date: Sat, 30 Sep 2017 14:55:29 +0900
Subject: [PATCH] Update default example

Update and destroy doesn't work for the time being, as it is in the form
of new APIs.
---
 examples/{ => assets}/azusa.jpg | Bin
 examples/options-default.html   |  50 ++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 19 deletions(-)
 rename examples/{ => assets}/azusa.jpg (100%)
diff --git a/examples/azusa.jpg b/examples/assets/azusa.jpg
similarity index 100%
rename from examples/azusa.jpg
rename to examples/assets/azusa.jpg
diff --git a/examples/options-default.html b/examples/options-default.html
index 3cf6bf25c..f4745a063 100644
--- a/examples/options-default.html
+++ b/examples/options-default.html
@@ -3,16 +3,26 @@
   <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>
+    <link href="../css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/perfect-scrollbar.js"></script>
     <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
-      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
-      .spacer { text-align:center }
+    #container {
+      position: relative;
+      margin: 0px auto;
+      padding: 0px;
+      width: 600px;
+      height: 400px;
+      overflow: auto;
+    }
+    #container .content {
+      background-image: url('./assets/azusa.jpg');
+      width: 1280px;
+      height: 720px;
+    }
     </style>
   </head>
   <body>
-    <div id="Default" class="contentHolder">
+    <div id="container">
       <div class="content">
       </div>
     </div>
@@ -22,19 +32,21 @@
       <button onclick='updateSize()'>Change!</button>
     </p>
     <script>
-      var $ = document.querySelector.bind(document);
-      window.onload = function () {
-        Ps.initialize($('#Default'));
-      };
-      var updateSize = function () {
-        var width = parseInt($('#width').value, 10);
-        var height = parseInt($('#height').value, 10);
-        var container = $('#Default');
-        container.style.width = width + 'px';
-        container.style.height = height + 'px';
-        Ps.update(document.querySelector('#Default'));
-      };
+    var $ = document.querySelector.bind(document);
+
+    var container = $('#container');
+
+    var ps = PerfectScrollbar.initialize(container);
+
+    function updateSize() {
+      var width = parseInt($('#width').value, 10);
+      var height = parseInt($('#height').value, 10);
+
+      container.style.width = width + 'px';
+      container.style.height = height + 'px';
+
+      ps.update();
+    }
     </script>
   </body>
 </html>
-
