Separate a class module.

src/js/lib/class.js

@@ -0,0 +1,37 @@
+/* Copyright (c) 2015 Hyunje Alex Jun and other contributors
+ * Licensed under the MIT License
+ */
+'use strict';
+
+function oldAdd(element, className) {
+  var classes = element.className.split(' ');
+  if (classes.indexOf(className) < 0) {
+    classes.push(className);
+  }
+  element.className = classes.join(' ');
+}
+
+function oldRemove(element, className) {
+  var classes = element.className.split(' ');
+  var idx = classes.indexOf(className);
+  if (idx >= 0) {
+    classes.splice(idx, 1);
+  }
+  element.className = classes.join(' ');
+}
+
+exports.add = function (element, className) {
+  if (element.classList) {
+    element.classList.add(className);
+  } else {
+    oldAdd(element, className);
+  }
+};
+
+exports.remove = function (element, className) {
+  if (element.classList) {
+    element.classList.remove(className);
+  } else {
+    oldRemove(element, className);
+  }
+};

src/js/plugin/ps.js

@@ -3,7 +3,8 @@
  */
 'use strict';
 
-var defaultSettings = require('./default-setting')
+var cls = require('../lib/class')
+  , defaultSettings = require('./default-setting')
   , h = require('../lib/helper');
 
 var incrementingId = 0;
@@ -55,7 +56,7 @@ module.exports = function (element, settingOrCommand) {
 
   // Or generate new perfectScrollbar
 
-  $this.addClass('ps-container');
+  cls.add(element, 'ps-container');
 
   var containerWidth;
   var containerHeight;
@@ -169,8 +170,8 @@ module.exports = function (element, settingOrCommand) {
 
   function updateGeometry() {
     // Hide scrollbars not to affect scrollWidth and scrollHeight
-    $this.removeClass('ps-active-x');
+    cls.remove(element, 'ps-active-x');
-    $this.removeClass('ps-active-y');
+    cls.remove(element, 'ps-active-y');
 
     containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
     containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
@@ -211,10 +212,10 @@ module.exports = function (element, settingOrCommand) {
     updateCss();
 
     if (scrollbarXActive) {
-      $this.addClass('ps-active-x');
+      cls.add(element, 'ps-active-x');
     }
     if (scrollbarYActive) {
-      $this.addClass('ps-active-y');
+      cls.add(element, 'ps-active-y');
     }
   }
 
@@ -230,14 +231,14 @@ module.exports = function (element, settingOrCommand) {
     };
 
     var mouseUpHandler = function (e) {
-      $this.removeClass('ps-in-scrolling');
+      cls.remove(element, 'ps-in-scrolling');
       $(ownerDocument).unbind(eventClass('mousemove'), mouseMoveHandler);
     };
 
     $scrollbarX.bind(eventClass('mousedown'), function (e) {
       currentPageX = e.pageX;
       currentLeft = $scrollbarX.position().left;
-      $this.addClass('ps-in-scrolling');
+      cls.add(element, 'ps-in-scrolling');
 
       $(ownerDocument).bind(eventClass('mousemove'), mouseMoveHandler);
       $(ownerDocument).one(eventClass('mouseup'), mouseUpHandler);
@@ -262,14 +263,14 @@ module.exports = function (element, settingOrCommand) {
     };
 
     var mouseUpHandler = function (e) {
-      $this.removeClass('ps-in-scrolling');
+      cls.remove(element, 'ps-in-scrolling');
       $(ownerDocument).unbind(eventClass('mousemove'), mouseMoveHandler);
     };
 
     $scrollbarY.bind(eventClass('mousedown'), function (e) {
       currentPageY = e.pageY;
       currentTop = $scrollbarY.position().top;
-      $this.addClass('ps-in-scrolling');
+      cls.add(element, 'ps-in-scrolling');
 
       $(ownerDocument).bind(eventClass('mousemove'), mouseMoveHandler);
       $(ownerDocument).one(eventClass('mouseup'), mouseUpHandler);
@@ -560,8 +561,8 @@ module.exports = function (element, settingOrCommand) {
         clearInterval(scrollingLoop);
         scrollingLoop = null;
       }
-      $this.removeClass('ps-in-scrolling');
+      cls.remove(element, 'ps-in-scrolling');
-      $this.removeClass('ps-in-scrolling');
+      cls.remove(element, 'ps-in-scrolling');
     }
 
     var isSelected = false;
@@ -593,10 +594,10 @@ module.exports = function (element, settingOrCommand) {
 
         if (mousePosition.x < containerGeometry.left + 3) {
           scrollDiff.left = -5;
-          $this.addClass('ps-in-scrolling');
+          cls.add(element, 'ps-in-scrolling');
         } else if (mousePosition.x > containerGeometry.right - 3) {
           scrollDiff.left = 5;
-          $this.addClass('ps-in-scrolling');
+          cls.add(element, 'ps-in-scrolling');
         } else {
           scrollDiff.left = 0;
         }
@@ -607,14 +608,14 @@ module.exports = function (element, settingOrCommand) {
           } else {
             scrollDiff.top = -20;
           }
-          $this.addClass('ps-in-scrolling');
+          cls.add(element, 'ps-in-scrolling');
         } else if (mousePosition.y > containerGeometry.bottom - 3) {
           if (mousePosition.y - containerGeometry.bottom + 3 < 5) {
             scrollDiff.top = 5;
           } else {
             scrollDiff.top = 20;
           }
-          $this.addClass('ps-in-scrolling');
+          cls.add(element, 'ps-in-scrolling');
         } else {
           scrollDiff.top = 0;
         }