v1.2.0 Branch Merge

CHANGELOG.md

@@ -0,0 +1,30 @@
+# jQuery Enhanced Splitter Change Log
+
+## Branch v1.2.0
+
+Changes made so far over v1.1.0.
+- Updated composer.json to specify valid jQuery versions (1.8+ / 2.0+).
+- Implemented drag-delay if the user clicks on the collapse handle then starts dragging. Drag will not begin until mouse has moved past 5 pixels in either direction. (UX improvement)
+- Prevent click event if the user started and ended their drag on the collapse handle. (UX improvement)
+- Change splitter bar class from .splitter to .splitter_bar for consistency.
+- Fixed issue where collapse handle would ignore one click if manually dragged to the collapsed position. (UX improvement/bug)
+- Modified onDrag, onDragStart, onDragEnd events to pass splitter container for easy manipulation.
+
+## Release v1.1.0
+
+This release adds a number of new options, as well as a few fixes and overall UX improvements.
+- Added 'lowerLimit' and 'upperLimit' options, changed 'limit' to an alias to set both.
+- Added 'collapse' option.
+- Added 'fixed' option.
+- Added 'splitterSize' option.
+- Changed 'orientation' string setting to 'vertical' boolean setting. (BREAKING CHANGE)
+- Fixed a few bugs.
+- Significantly rewrote event handling, now smoother, faster, and tastier.
+
+## Release v1.0.1
+
+More bug fixes, improved event handlers, improved CSS.
+
+## Release v1.0.0
+
+Original release of fork, with significant changes and bug fixes.

README.md

@@ -3,20 +3,17 @@
 jquery.enhsplitter is a plugin to generate sliding splitters on your page. Useful for separating content, emulating the
 look of frames, collapsable tool windows, and more. Completely customizable look and feel, and touchscreen friendly.
 
-Release v1.1.0
-------
+## Demo and Documentation
 
-This release adds a number of new options, as well as a few fixes and overall UX improvements.
-But since nobody is using this yet, I won't bother documenting all the changes here. Rest assured that any changes
-from here forward will be properly documented!
+A demo and basic documentation of options of the latest version are available at:
 
-# Demo
+<http://janfield.ca/github/jquery.enhsplitter/demo.html>
 
-A demo and basic documentation of options are available at:
+## Requirements
 
-<http://janfield.ca/github/jquery.enhsplitter/demo.html>
+jquery.enhsplitter requires jQuery v1.8 or greater, or v2.0 or greater.
 
-# Example
+## Example
 
 A minimal call to jquery.enhsplitter in a jQuery ready function looks like this:
 
@@ -66,13 +63,13 @@ jQuery(function ($) {
 ```
 
 
-# License
+## License
 
 Copyright (C) 2015 Hilton Janfield <hilton@janfield.ca>
 
 Released under the terms of the [GNU Lesser General Public License](http://www.gnu.org/licenses/lgpl.html)
 
-# Original Author and Contributors
+## Original Author and Contributors
 
 This plugin was originally created by Jakub Jankiewicz. See https://github.com/jcubic/jquery.splitter
 

composer.json

@@ -27,7 +27,7 @@
   "homepage": "https://github.com/hiltonjanfield/jquery.enhsplitter",
   "bugs": "https://github.com/hiltonjanfield/jquery.enhsplitter/issues",
   "dependencies": {
-    "jquery": ">=2.1"
+    "jquery": ">=1.8 || >=2.0"
   },
   "main": [
     "js/jquery.enhsplitter.js",

css/jquery.enhsplitter.css

@@ -1,7 +1,7 @@
 /*!
  * jQuery Enhanced Splitter Plugin
  * LESS / CSS File
- * Version 1.1.0
+ * Version 1.2.0
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
@@ -47,116 +47,116 @@
   /* Right panel */
   right: 0;
 }
-.splitter_container.splitter-fixed > .splitter {
+.splitter_container.splitter-fixed > .splitter_bar {
   cursor: default;
 }
-.splitter_container.splitter-handle-disabled > .splitter > .splitter_handle {
+.splitter_container.splitter-handle-disabled > .splitter_bar > .splitter_handle {
   cursor: inherit;
 }
-.splitter {
+.splitter_bar {
   background-color: #c0c0c0;
   position: absolute;
   padding: 0 !important;
   box-sizing: border-box;
 }
-.splitter > .splitter_handle {
+.splitter_bar > .splitter_handle {
   cursor: pointer;
   background-color: #999999;
   position: relative;
   margin: auto;
   z-index: 1000;
   box-sizing: border-box;
 }
-.splitter > .splitter_handle:hover {
+.splitter_bar > .splitter_handle:hover {
   background-color: #666666;
   border-color: #666666;
 }
-.splitter > .splitter_handle:active {
+.splitter_bar > .splitter_handle:active {
   background-color: #000000;
   border-color: #000000;
 }
-.splitter.splitter-invisible {
+.splitter_bar.splitter-invisible {
   background: none!important;
   border: none!important;
   box-shadow: none!important;
 }
-.splitter.splitter-invisible .splitter_handle,
-.splitter.splitter-handle-none .splitter_handle {
+.splitter_bar.splitter-invisible .splitter_handle,
+.splitter_bar.splitter-handle-none .splitter_handle {
   display: none;
 }
-.splitter-vertical > .splitter {
+.splitter-vertical > .splitter_bar {
   border-left: 1px solid #eeeeee;
   border-right: 1px solid #666666;
   cursor: ew-resize;
   z-index: 900;
   width: 7px;
   height: 100%;
 }
-.splitter-vertical > .splitter > .splitter_handle {
+.splitter-vertical > .splitter_bar > .splitter_handle {
   top: 50%;
   margin-top: -25px;
   height: 50px;
 }
-.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle {
+.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle {
   width: 3px;
   border-left: 1px solid #999999;
   border-right: 1px solid #999999;
   background-color: transparent;
 }
-.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle:hover {
+.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
   border-color: #666666;
 }
-.splitter-vertical > .splitter.splitter-handle-default > .splitter_handle:active {
+.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active {
   border-color: #000000;
 }
-.splitter-vertical > .splitter.splitter-handle-bar > .splitter_handle {
+.splitter-vertical > .splitter_bar.splitter-handle-bar > .splitter_handle {
   width: 3px;
 }
-.splitter-vertical > .splitter.splitter-handle-block > .splitter_handle {
+.splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle {
   width: 5px;
 }
-.splitter-horizontal > .splitter {
+.splitter-horizontal > .splitter_bar {
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
   cursor: ns-resize;
   z-index: 800;
   width: 100%;
   height: 7px;
 }
-.splitter-horizontal > .splitter > .splitter_handle {
+.splitter-horizontal > .splitter_bar > .splitter_handle {
   width: 50px;
 }
-.splitter-horizontal > .splitter.splitter-handle-default > .splitter_handle {
+.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle {
   height: 3px;
   margin-top: 1px;
   border-top: 1px solid #999999;
   border-bottom: 1px solid #999999;
   background-color: transparent;
 }
-.splitter-horizontal > .splitter.splitter-handle-default > .splitter_handle:hover {
+.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
   border-color: #666666;
 }
-.splitter-horizontal > .splitter.splitter-handle-default > .splitter_handle:active {
+.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active {
   border-color: #000000;
 }
-.splitter-horizontal > .splitter.splitter-handle-bar > .splitter_handle {
+.splitter-horizontal > .splitter_bar.splitter-handle-bar > .splitter_handle {
   height: 3px;
   margin-top: 1px;
 }
-.splitter-horizontal > .splitter.splitter-handle-block > .splitter_handle {
+.splitter-horizontal > .splitter_bar.splitter-handle-block > .splitter_handle {
   height: 5px;
   margin-top: 1px;
 }
-.splitter_container.splitter-active > .splitter {
+.splitter_container.splitter-active > .splitter_bar {
   z-index: 1000;
   /* Important to keep z-index of active splitter above .splitterMask. */
 }
-.splitter_container.splitter-active > .splitter > .splitter_handle {
+.splitter_container.splitter-active > .splitter_bar > .splitter_handle {
   border-color: #000000;
   cursor: inherit;
 }
-.splitter_container.splitter-active > .splitter.splitter-handle-bar > .splitter_handle,
-.splitter_container.splitter-active > .splitter.splitter-handle-block > .splitter_handle {
+.splitter_container.splitter-active > .splitter_bar.splitter-handle-bar > .splitter_handle,
+.splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle {
   background-color: #000000;
 }
 .splitter_mask {

css/jquery.enhsplitter.less

@@ -1,7 +1,7 @@
 /*!
  * jQuery Enhanced Splitter Plugin
  * LESS / CSS File
- * Version 1.1.0
+ * Version 1.2.0
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
@@ -71,16 +71,16 @@
 
   }
 
-  &.splitter-fixed > .splitter {
+  &.splitter-fixed > .splitter_bar {
     cursor: default;
   }
 
-  &.splitter-handle-disabled > .splitter > .splitter_handle {
+  &.splitter-handle-disabled > .splitter_bar > .splitter_handle {
     cursor: inherit;
   }
 }
 
-.splitter {
+.splitter_bar {
   background-color: @splitter_color;
   position: absolute;
   padding: 0 !important;
@@ -120,7 +120,7 @@
 }
 
 .splitter-vertical {
-  > .splitter {
+  > .splitter_bar {
     border-left: 1px solid @splitter_highlight;
     border-right: 1px solid @splitter_shadow;
     cursor: ew-resize;
@@ -166,7 +166,7 @@
 }
 
 .splitter-horizontal {
-  > .splitter {
+  > .splitter_bar {
     border-top: 1px solid @splitter_highlight;
     border-bottom: 1px solid @splitter_shadow;
     cursor: ns-resize;
@@ -212,7 +212,7 @@
   }
 }
 
-.splitter_container.splitter-active > .splitter {
+.splitter_container.splitter-active > .splitter_bar {
   z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */
 
   > .splitter_handle {

demo.html

@@ -473,23 +473,29 @@ <h1>Options</h1>
 
         <dt>onDragStart</dt>
         <dd>
+            <code>function (event, splitter_container) { ... }</code>
             <code class="default">Default: $.noop</code>
 
             <p>Event handler called when a user starts dragging a splitter.</p>
+            <p>Parameters passed are the standard event handler data, and the .splitter_container object.</p>
         </dd>
 
         <dt>onDragEnd</dt>
         <dd>
+            <code>function (event, splitter_container) { ... }</code>
             <code class="default">Default: $.noop</code>
 
             <p>Event handler called when a user stops dragging a splitter.</p>
+            <p>Parameters passed are the standard event handler data, and the .splitter_container object.</p>
         </dd>
 
         <dt>onDrag</dt>
         <dd>
+            <code>function (event, splitter_container) { ... }</code>
             <code class="default">Default: $.noop</code>
 
             <p>Event handler called after a user moves a splitter.</p>
+            <p>Parameters passed are the standard event handler data, and the .splitter_container object.</p>
         </dd>
     </dl>
 </div>