Release 0.6.2

1. Reattach rails when removed.
2. Check if parentNode exists when DOM-removing.
3. Consume mousewheel event for hovered textarea.
4. Other minor fixes.

gulpfile.js

@@ -5,6 +5,7 @@ var gulp = require('gulp')
   , bump = require('gulp-bump')
   , connect = require('gulp-connect')
   , eslint = require('gulp-eslint')
+  , insert = require('gulp-insert')
   , rename = require('gulp-rename')
   , rimraf = require('gulp-rimraf')
   , sass = require('gulp-sass')
@@ -12,6 +13,8 @@ var gulp = require('gulp')
   , uglify = require('gulp-uglify')
   , zip = require('gulp-zip');
 
+var version = '/* perfect-scrollbar v' + require('./package').version + ' */\n';
+
 gulp.task('lint', function () {
   return gulp.src(['./src/**/*.js', './gulpfile.js'])
     .pipe(eslint())
@@ -39,6 +42,7 @@ function browserified() {
 gulp.task('js', ['clean:js'], function () {
   return gulp.src('./src/js/adaptor/*.js')
     .pipe(browserified())
+    .pipe(insert.prepend(version))
     .pipe(rename(function (path) {
       if (path.basename === 'global') {
         path.basename = 'perfect-scrollbar';
@@ -54,6 +58,7 @@ gulp.task('js:min', ['clean:js:min'], function () {
   return gulp.src('./src/js/adaptor/*.js')
     .pipe(browserified())
     .pipe(uglify())
+    .pipe(insert.prepend(version))
     .pipe(rename(function (path) {
       if (path.basename === 'global') {
         path.basename = 'perfect-scrollbar.min';
@@ -77,6 +82,7 @@ gulp.task('clean:css:min', function () {
 gulp.task('sass', ['clean:css'], function () {
   return gulp.src('./src/css/main.scss')
     .pipe(sass())
+    .pipe(insert.prepend(version))
     .pipe(rename('perfect-scrollbar.css'))
     .pipe(gulp.dest('./dist/css'))
     .pipe(connect.reload());
@@ -85,6 +91,7 @@ gulp.task('sass', ['clean:css'], function () {
 gulp.task('sass:min', ['clean:css:min'], function () {
   return gulp.src('./src/css/main.scss')
     .pipe(sass({outputStyle: 'compressed'}))
+    .pipe(insert.prepend(version))
     .pipe(rename('perfect-scrollbar.min.css'))
     .pipe(gulp.dest('./dist/css'));
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-scrollbar",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Minimalistic but perfect custom scrollbar plugin",
   "author": "Hyunje Alex Jun <me@noraesae.net>",
   "contributors": [
@@ -32,6 +32,7 @@
     "gulp-bump": "^0.1.11",
     "gulp-connect": "^2.2.0",
     "gulp-eslint": "^0.2.0",
+    "gulp-insert": "^0.4.0",
     "gulp-rename": "^1.2.0",
     "gulp-rimraf": "^0.1.1",
     "gulp-sass": "^1.3.1",

src/css/main.scss

@@ -4,13 +4,6 @@ $ps-bar-default: #aaa;
 $ps-bar-hover: #999;
 
 // Helper mixins
-@mixin opacity($o) {
-  $IEValue: $o * 100;
-  opacity: $o;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
-      filter: alpha(opacity=$IEValue);
-}
-
 @mixin border-radius($r) {
   -webkit-border-radius: $r;
      -moz-border-radius: $r;
@@ -30,13 +23,13 @@ $ps-bar-hover: #999;
   display: none;
   position: absolute; /* please don't change 'position' */
   @include border-radius(4px);
-  @include opacity(0);
+  opacity: 0;
   @include transition(background-color .2s linear, opacity .2s linear);
 }
 
 @mixin scrollbar-rail-hover {
   background-color: $ps-rail-hover;
-  @include opacity(0.9);
+  opacity: 0.9;
 }
 
 @mixin scrollbar-default {
@@ -107,7 +100,7 @@ $ps-bar-hover: #999;
 
     >.ps-scrollbar-x-rail,
     >.ps-scrollbar-y-rail {
-      @include opacity(0.6);
+      opacity: 0.6;
     }
 
     >.ps-scrollbar-x-rail:hover {

src/js/lib/dom.js

@@ -70,6 +70,8 @@ exports.remove = function (element) {
   if (typeof element.remove !== 'undefined') {
     element.remove();
   } else {
-    element.parentNode.removeChild(element);
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
   }
 };

src/js/plugin/handler/mouse-wheel.js

@@ -58,6 +58,27 @@ function bindMouseWheelHandler(element, i) {
     return [deltaX, deltaY];
   }
 
+  function shouldBeConsumedByTextarea(deltaX, deltaY) {
+    var hoveredTextarea = element.querySelector('textarea:hover');
+    if (hoveredTextarea) {
+      var maxScrollTop = hoveredTextarea.scrollHeight - hoveredTextarea.clientHeight;
+      if (maxScrollTop > 0) {
+        if (!(hoveredTextarea.scrollTop === 0 && deltaY > 0) &&
+            !(hoveredTextarea.scrollTop === maxScrollTop && deltaY < 0)) {
+          return true;
+        }
+      }
+      var maxScrollLeft = hoveredTextarea.scrollLeft - hoveredTextarea.clientWidth;
+      if (maxScrollLeft > 0) {
+        if (!(hoveredTextarea.scrollLeft === 0 && deltaX < 0) &&
+            !(hoveredTextarea.scrollLeft === maxScrollLeft && deltaX > 0)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   function mousewheelHandler(e) {
     // FIXME: this is a quick fix for the select problem in FF and IE.
     // If there comes an effective way to deal with the problem,
@@ -71,6 +92,10 @@ function bindMouseWheelHandler(element, i) {
     var deltaX = delta[0];
     var deltaY = delta[1];
 
+    if (shouldBeConsumedByTextarea(deltaX, deltaY)) {
+      return;
+    }
+
     shouldPrevent = false;
     if (!i.settings.useBothWheelAxes) {
       // deltaX will only be used for horizontal scrolling and deltaY will

src/js/plugin/update-geometry.js

@@ -60,6 +60,13 @@ module.exports = function (element) {
   i.contentWidth = element.scrollWidth;
   i.contentHeight = element.scrollHeight;
 
+  if (!element.contains(i.scrollbarXRail)) {
+    d.appendTo(i.scrollbarXRail, element);
+  }
+  if (!element.contains(i.scrollbarYRail)) {
+    d.appendTo(i.scrollbarYRail, element);
+  }
+
   if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
     i.scrollbarXActive = true;
     i.railXWidth = i.containerWidth - i.railXMarginWidth;

src/js/plugin/update.js

@@ -4,27 +4,18 @@
 'use strict';
 
 var d = require('../lib/dom')
-  , destroy = require('./destroy')
-  , initialize = require('./initialize')
   , instances = require('./instances')
   , updateGeometry = require('./update-geometry');
 
 module.exports = function (element) {
   var i = instances.get(element);
 
-  if (!i.scrollbarXRail || !element.contains(i.scrollbarXRail) ||
-      !i.scrollbarYRail || !element.contains(i.scrollbarYRail)) {
-    // If there's something wrong in the plugin, re-initialise.
-    destroy(element);
-    initialize(element);
-  } else {
-    // Hide scrollbars not to affect scrollWidth and scrollHeight
-    d.css(i.scrollbarXRail, 'display', 'none');
-    d.css(i.scrollbarYRail, 'display', 'none');
+  // Hide scrollbars not to affect scrollWidth and scrollHeight
+  d.css(i.scrollbarXRail, 'display', 'none');
+  d.css(i.scrollbarYRail, 'display', 'none');
 
-    updateGeometry(element);
+  updateGeometry(element);
 
-    d.css(i.scrollbarXRail, 'display', 'block');
-    d.css(i.scrollbarYRail, 'display', 'block');
-  }
+  d.css(i.scrollbarXRail, 'display', 'block');
+  d.css(i.scrollbarYRail, 'display', 'block');
 };