🎉 Release v1.1.0

idiotWu · Dec 16, 2015 · ffc06ae · ffc06ae
1 parent 2816359
commit ffc06ae
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 9 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "smooth-scrollbar",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "authors": [
     "Dolphin Wood <[email protected]>"
   ],

diff --git a/demo/index.html b/demo/index.html
@@ -52,8 +52,47 @@ <h3>Nest Scrollbar</h3>
             </scrollbar>
         </section>
     </article>
+
+    <article>
+        <h3>Work with <a href="https://github.com/RubaXa/Sortable" target="_blank">Sortable</a></h3>
+        <scrollbar id="sortable">
+            <ul>
+                <li>item 1</li>
+                <li>item 2</li>
+                <li>item 3</li>
+                <li>item 4</li>
+                <li>item 5</li>
+                <li>item 6</li>
+                <li>item 7</li>
+                <li>item 8</li>
+                <li>item 9</li>
+                <li>item 10</li>
+                <li>item 11</li>
+                <li>item 12</li>
+                <li>item 13</li>
+                <li>item 14</li>
+                <li>item 15</li>
+                <li>item 16</li>
+                <li>item 17</li>
+                <li>item 18</li>
+                <li>item 19</li>
+                <li>item 20</li>
+                <li>item 21</li>
+                <li>item 22</li>
+                <li>item 23</li>
+                <li>item 24</li>
+                <li>item 25</li>
+                <li>item 26</li>
+                <li>item 27</li>
+                <li>item 28</li>
+                <li>item 29</li>
+                <li>item 30</li>
+            </ul>
+        </scrollbar>
+    </article>
 </main>
 
+<script src="../bower_components/Sortable/Sortable.js"></script>
 <script src="../dist/smooth_scrollbar.js"></script>
 <script src="main.js"></script>
 </body>

diff --git a/demo/main.js b/demo/main.js
@@ -3,6 +3,47 @@
 
     Scrollbar.initAll();
 
+    var sortOpts = {
+        scroll: false,
+        animation: 150,
+        ghostClass: 'onsort'
+    };
+
+    if ('ontouchstart' in document) {
+        // touch screen
+        var isDrag = false;
+
+        sortOpts.onStart = function(evt) {
+            isDrag = true;
+            var dragEvt = document.createEvent('Event');
+            dragEvt.initEvent('dragstart', true, true);
+            evt.from.dispatchEvent(dragEvt);
+        };
+
+        sortOpts.onEnd = function(evt) {
+            isDrag = false;
+            var dragEvt = document.createEvent('Event');
+            dragEvt.initEvent('dragend', true, true);
+            evt.from.dispatchEvent(dragEvt);
+        };
+
+        window.addEventListener('touchmove', function(evt) {
+            if (!isDrag) return;
+
+            var touchList = evt.touches;
+            var finger = touchList[touchList.length - 1];
+
+            var dragEvt = document.createEvent('Event');
+            dragEvt.initEvent('drag', true, true);
+            dragEvt.clientX= finger.clientX;
+            dragEvt.clientY = finger.clientY;
+
+            evt.target.dispatchEvent(dragEvt);
+        });
+    }
+
+    Sortable.create(document.querySelector('#sortable ul'), sortOpts);
+
     var toggle = document.querySelector('#toggle'),
         curSB = document.querySelector('#cur-sb'),
         compare = document.querySelector('#compare');

diff --git a/demo/style.css b/demo/style.css
@@ -18,7 +18,7 @@ h3 {
   font-size: 1.2em;
 }
 
-.scroll {
+.scroll, scrollbar {
   position: relative;
   width: 600px;
   height: 400px;
@@ -91,4 +91,28 @@ em {
   color: #ccc;
   background: rgba(0, 0, 0, .5);
   border: none;
+}
+
+#sortable {
+  margin-bottom: 500px;
+}
+
+#sortable ul {
+  width: 200px;
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+}
+
+#sortable li {
+  width: 200px;
+  line-height: 30px;
+  background: #72b8ff;
+  color: #fff;
+  border: 1px solid #fff;
+  cursor: move;
+}
+
+#sortable li.onsort {
+  opacity: 0.7;
 }
diff --git a/dist/smooth_scrollbar.css b/dist/smooth_scrollbar.css
@@ -4,10 +4,6 @@ scrollbar,
   display: block;
   position: relative;
   overflow: hidden;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
 }
 scrollbar .scroll-content,
 [scrollbar] .scroll-content,

diff --git a/dist/smooth_scrollbar.js b/dist/smooth_scrollbar.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smooth-scrollbar",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Customize scrollbar in modern browsers with smooth scrolling experience.",
   "main": "dist/smooth_scrollbar.js",
   "scripts": {