From 413e1420dad0daf868ed65dc6f2ae952407f061f Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Thu, 10 Sep 2015 21:43:38 -0700 Subject: [PATCH 01/11] Spelling. --- js/jquery.enhsplitter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index df884aa..fb49c7b 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -75,7 +75,7 @@ this.css('height', settings.height); } - // Verify the limits are within allowed constaints (size of panel) + // Verify the limits are within allowed constraints (size of panel) // With a little obfuscation to reduce 36 lines to 3 settings.limit = (settings.limit < 0 ? 0 : (settings.vertical ? (settings.limit > (this.width() / 2) ? this.width() / 2 : settings.limit) : (settings.limit > (this.height() / 2) ? this.height() / 2 : settings.limit))); // Once settings.limit has been range checked, use it as a default for lowerLimit and upperLimit. From c178c51a5694cb05b23b68c14f00abc173613b74 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 00:15:34 -0700 Subject: [PATCH 02/11] Implement delayed drag; prevent click event when drag starts and ends on collapse handle. Resolves #11. --- README.md | 23 ++++++++++++----- js/jquery.enhsplitter.js | 56 ++++++++++++++++++++++++++++++---------- package.json | 27 +++++++++++++++++++ 3 files changed, 86 insertions(+), 20 deletions(-) create mode 100644 package.json diff --git a/README.md b/README.md index c200409..e6648dd 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,25 @@ 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 ------- +## Release v1.1.0 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! - -# Demo +- 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. +- Fixed a few bugs. +- Significantly rewrote event handling, now smoother, faster, and tastier. + +## Branch v1.1.1 + +Changes made so far. +- (UX improvement) 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. + +# Demo and Documentation A demo and basic documentation of options are available at: diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index fb49c7b..59cb514 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -22,6 +22,8 @@ var splitterCount = 0; var splitters = []; var currentSplitter = null; + var dragStartPosition = null; + var disableClick = false; $.fn.enhsplitter = function (options) { var data = this.data('splitter'); @@ -221,6 +223,11 @@ $(document.documentElement) .on('click.splitter', '.splitter_handle', function (e) { + // Prevent clicks if the user started dragging too much. + // Some (all?) browsers fire the click event even after the bar has been dragged hundreds of pixels. + if (disableClick) { + return disableClick = false; + } currentSplitter = $(this).closest('.splitter_container').data('splitter'); if (currentSplitter.settings.collapsable) { @@ -252,6 +259,15 @@ currentSplitter = null; }) + .on('mousedown.splitter', '.splitter_handle', function (e) { + e.preventDefault(); + // This mousedown event gets called first because it is on top, but we need the other one to fire + // first - or duplicate the code, which is bad, m'kay? + $(this).closest('.splitter').trigger('mousedown'); + + dragStartPosition = (currentSplitter.settings.vertical) ? e.pageX : e.pageY; + }) + .on('mousedown.splitter touchstart.splitter', '.splitter_container > .splitter', function (e) { e.preventDefault(); currentSplitter = $(this).closest('.splitter_container').data('splitter'); @@ -264,10 +280,10 @@ } }) - // Todo: Explore and test the touch events. .on('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', '.splitter_mask, .splitter_container > .splitter', function (e) { if (currentSplitter) { e.preventDefault(); + dragStartPosition = null; // If the slider is dropped near it's collapsed position, set a saved position back to its // original start position so the collapse handle works somewhat properly. @@ -299,23 +315,33 @@ if (currentSplitter !== null) { currentSplitter.data('savedPosition', null); - if (currentSplitter.settings.vertical) { - var pageX = e.pageX; - if (e.originalEvent && e.originalEvent.changedTouches) { - pageX = e.originalEvent.changedTouches[0].pageX; + var position = (currentSplitter.settings.vertical) ? e.pageX : e.pageY; + if (e.originalEvent && e.originalEvent.changedTouches) { + position = (currentSplitter.settings.vertical) ? e.originalEvent.changedTouches[0].pageX : e.originalEvent.changedTouches[0].pageY; + } + + // If the user started the drag with a mousedown on the handle, give it a 5-pixel delay. + if (dragStartPosition !== null) { + if (position > (dragStartPosition + 5) || position < (dragStartPosition - 5)) { + dragStartPosition = null; + disableClick = true; + } else { + e.preventDefault(); + return false; } - currentSplitter.setPosition(pageX - currentSplitter.offset().left - currentSplitter.splitterSizeHalf); + } + + if (currentSplitter.settings.vertical) { + currentSplitter.setPosition(position - currentSplitter.offset().left); } else { - var pageY = e.pageY; - if (e.originalEvent && e.originalEvent.changedTouches) { - pageY = e.originalEvent.changedTouches[0].pageY; - } - currentSplitter.setPosition(pageY - currentSplitter.offset().top - currentSplitter.splitterSizeHalf); + currentSplitter.setPosition(position - currentSplitter.offset().top - currentSplitter.splitterSizeHalf); } e.preventDefault(); currentSplitter.settings.onDrag(e); } - }); + } + ) + ; } self.settings = settings; @@ -327,5 +353,7 @@ splitters.push(self); return self; - }; -})(jQuery); + } + ; +}) +(jQuery); diff --git a/package.json b/package.json new file mode 100644 index 0000000..7deee2e --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "jquery.enhsplitter", + "version": "1.1.0", + "description": "Enhanced splitter bar for separation of content, tool bars, frame emulation, and more.", + "main": "js/jquery.enhsplitter.js", + "scripts": { + "test": "" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/hiltonjanfield/jquery.enhsplitter.git" + }, + "keywords": [ + "jquery-plugin", + "ecosystem:jquery", + "splitter", + "frames", + "frameset", + "divider" + ], + "author": "Hilton Janfield", + "license": "GPL-3.0", + "bugs": { + "url": "https://github.com/hiltonjanfield/jquery.enhsplitter/issues" + }, + "homepage": "https://github.com/hiltonjanfield/jquery.enhsplitter#readme" +} From 7071a038d3f4c7024f67d5fba59e3ae7f844fc66 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 00:18:30 -0700 Subject: [PATCH 03/11] Change file version numbers for v1.1.1 branch. --- css/jquery.enhsplitter.css | 2 +- css/jquery.enhsplitter.less | 2 +- js/jquery.enhsplitter.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css index 3442ff3..3326a93 100644 --- a/css/jquery.enhsplitter.css +++ b/css/jquery.enhsplitter.css @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * LESS / CSS File - * Version 1.1.0 + * Version 1.1.1 * * https://github.com/hiltonjanfield/jquery.enhsplitter * diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less index 2d455bc..393b106 100644 --- a/css/jquery.enhsplitter.less +++ b/css/jquery.enhsplitter.less @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * LESS / CSS File - * Version 1.1.0 + * Version 1.1.1 * * https://github.com/hiltonjanfield/jquery.enhsplitter * diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index 59cb514..cd1cce8 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * Main ECMAScript File - * Version 1.1.0 + * Version 1.1.1 * * https://github.com/hiltonjanfield/jquery.enhsplitter * From 1894fa032df143c11b1c377a4ba1328750ccc86a Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 00:39:05 -0700 Subject: [PATCH 04/11] Change file version numbers for v1.2.0 branch. --- css/jquery.enhsplitter.css | 2 +- css/jquery.enhsplitter.less | 2 +- js/jquery.enhsplitter.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css index 3326a93..914bb3e 100644 --- a/css/jquery.enhsplitter.css +++ b/css/jquery.enhsplitter.css @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * LESS / CSS File - * Version 1.1.1 + * Version 1.2.0 * * https://github.com/hiltonjanfield/jquery.enhsplitter * diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less index 393b106..a6576ba 100644 --- a/css/jquery.enhsplitter.less +++ b/css/jquery.enhsplitter.less @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * LESS / CSS File - * Version 1.1.1 + * Version 1.2.0 * * https://github.com/hiltonjanfield/jquery.enhsplitter * diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index cd1cce8..7b13d61 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * Main ECMAScript File - * Version 1.1.1 + * Version 1.2.0 * * https://github.com/hiltonjanfield/jquery.enhsplitter * From 9787dd7ae816a93508687e8916b7418b52f610e1 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 00:39:05 -0700 Subject: [PATCH 05/11] Change file version numbers for v1.2.0 branch. --- README.md | 2 +- css/jquery.enhsplitter.css | 2 +- css/jquery.enhsplitter.less | 2 +- js/jquery.enhsplitter.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e6648dd..b90ec39 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ This release adds a number of new options, as well as a few fixes and overall UX - Fixed a few bugs. - Significantly rewrote event handling, now smoother, faster, and tastier. -## Branch v1.1.1 +## Branch v1.2.0 Changes made so far. - (UX improvement) Implemented drag-delay if the user clicks on the collapse handle then starts dragging. diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css index 3326a93..914bb3e 100644 --- a/css/jquery.enhsplitter.css +++ b/css/jquery.enhsplitter.css @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * LESS / CSS File - * Version 1.1.1 + * Version 1.2.0 * * https://github.com/hiltonjanfield/jquery.enhsplitter * diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less index 393b106..a6576ba 100644 --- a/css/jquery.enhsplitter.less +++ b/css/jquery.enhsplitter.less @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * LESS / CSS File - * Version 1.1.1 + * Version 1.2.0 * * https://github.com/hiltonjanfield/jquery.enhsplitter * diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index cd1cce8..7b13d61 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -1,7 +1,7 @@ /*! * jQuery Enhanced Splitter Plugin * Main ECMAScript File - * Version 1.1.1 + * Version 1.2.0 * * https://github.com/hiltonjanfield/jquery.enhsplitter * From b4821b628365c06b05ed64a95dedee3603b81385 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 22:05:31 -0700 Subject: [PATCH 06/11] Add CHANGELOG, update composer.json dependencies and package.json version. --- CHANGELOG.md | 29 +++++++++++++++++++++++++++++ README.md | 30 ++++++++---------------------- composer.json | 2 +- package.json | 2 +- 4 files changed, 39 insertions(+), 24 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..2e84e56 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,29 @@ +# 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+). +- (UX improvement) 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. +- Respect CSS min/max-width/height. + +## 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. diff --git a/README.md b/README.md index b90ec39..7b38047 100644 --- a/README.md +++ b/README.md @@ -3,31 +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. -- 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. -- Fixed a few bugs. -- Significantly rewrote event handling, now smoother, faster, and tastier. +A demo and basic documentation of options of the latest version are available at: -## Branch v1.2.0 - -Changes made so far. -- (UX improvement) 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. - -# Demo and Documentation + -A demo and basic documentation of options are available at: +## Requirements - +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: @@ -77,13 +63,13 @@ jQuery(function ($) { ``` -# License +## License Copyright (C) 2015 Hilton Janfield 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 diff --git a/composer.json b/composer.json index 27f6933..301fd9c 100644 --- a/composer.json +++ b/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", diff --git a/package.json b/package.json index 7deee2e..db48341 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.enhsplitter", - "version": "1.1.0", + "version": "1.2.0", "description": "Enhanced splitter bar for separation of content, tool bars, frame emulation, and more.", "main": "js/jquery.enhsplitter.js", "scripts": { From 60db5c94c5f66c3d187ce2811f1628d0d96dae01 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 23:30:12 -0700 Subject: [PATCH 07/11] Minor fix for code accidentally removed in the past. --- js/jquery.enhsplitter.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index 7b13d61..c475cbf 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -215,7 +215,8 @@ // If this is the first splitter, set up our events. if (splitters.length == 0) { - $(window).on('resize.splitter', function () { + $(window) + .on('resize.splitter', function () { $.each(splitters, function (i, splitter) { splitter.refresh(); }); @@ -332,7 +333,7 @@ } if (currentSplitter.settings.vertical) { - currentSplitter.setPosition(position - currentSplitter.offset().left); + currentSplitter.setPosition(position - currentSplitter.offset().left - currentSplitter.splitterSizeHalf); } else { currentSplitter.setPosition(position - currentSplitter.offset().top - currentSplitter.splitterSizeHalf); } @@ -340,20 +341,17 @@ currentSplitter.settings.onDrag(e); } } - ) - ; + ); } self.settings = settings; - // Initial position of the splitter itself. + // Set the initial position of the splitter. self.setPosition(self.translatePosition(settings.position)); self.data('splitter', self); - splitters.push(self); return self; - } - ; + }; }) (jQuery); From da41b2d7b8cdd54c3f91b50b98be7a4abdcec757 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Fri, 11 Sep 2015 23:40:54 -0700 Subject: [PATCH 08/11] Fixes #13. --- js/jquery.enhsplitter.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index c475cbf..420e2d9 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -287,20 +287,23 @@ dragStartPosition = null; // If the slider is dropped near it's collapsed position, set a saved position back to its - // original start position so the collapse handle works somewhat properly. + // original start position so the collapse handle works at least somewhat properly. if (!currentSplitter.data('savedPosition')) { if (currentSplitter.settings.collapseNormal) { if (currentSplitter.currentPosition <= (currentSplitter.settings.lowerLimit + 5)) { currentSplitter.data('savedPosition', self.translatePosition(currentSplitter.settings.position)); + disableClick = false; } } else { if (currentSplitter.settings.vertical) { if (currentSplitter.currentPosition >= (currentSplitter.containerWidth - currentSplitter.settings.upperLimit - 5)) { currentSplitter.data('savedPosition', self.translatePosition(currentSplitter.settings.position)); + disableClick = false; } } else { if (currentSplitter.currentPosition >= (currentSplitter.containerHeight - currentSplitter.settings.upperLimit - 5)) { currentSplitter.data('savedPosition', self.translatePosition(currentSplitter.settings.position)); + disableClick = false; } } } From 0be0b156de916681313bd433b292c8847e8225d4 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Sat, 12 Sep 2015 01:26:56 -0700 Subject: [PATCH 09/11] Rename .splitter class to .splitter_bar for consistency. --- CHANGELOG.md | 7 +++-- css/jquery.enhsplitter.css | 54 ++++++++++++++++++------------------- css/jquery.enhsplitter.less | 12 ++++----- js/jquery.enhsplitter.js | 10 +++---- 4 files changed, 41 insertions(+), 42 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e84e56..0dd5a29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,10 +4,9 @@ Changes made so far over v1.1.0. - Updated composer.json to specify valid jQuery versions (1.8+ / 2.0+). -- (UX improvement) 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. -- Respect CSS min/max-width/height. +- 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. ## Release v1.1.0 diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css index 914bb3e..0b17703 100644 --- a/css/jquery.enhsplitter.css +++ b/css/jquery.enhsplitter.css @@ -47,19 +47,19 @@ /* 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; @@ -67,24 +67,24 @@ 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; @@ -92,30 +92,30 @@ 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; @@ -123,40 +123,40 @@ 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 { diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less index a6576ba..a9c7567 100644 --- a/css/jquery.enhsplitter.less +++ b/css/jquery.enhsplitter.less @@ -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 { diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index 420e2d9..ffa3ae7 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -98,7 +98,7 @@ this.addClass('splitter-fixed'); } - splitter = $('
') + splitter = $('
') .insertAfter(panelOne); handle = $('
') .appendTo(splitter); @@ -264,12 +264,12 @@ e.preventDefault(); // This mousedown event gets called first because it is on top, but we need the other one to fire // first - or duplicate the code, which is bad, m'kay? - $(this).closest('.splitter').trigger('mousedown'); + $(this).closest('.splitter_bar').trigger('mousedown'); dragStartPosition = (currentSplitter.settings.vertical) ? e.pageX : e.pageY; }) - .on('mousedown.splitter touchstart.splitter', '.splitter_container > .splitter', function (e) { + .on('mousedown.splitter touchstart.splitter', '.splitter_container > .splitter_bar', function (e) { e.preventDefault(); currentSplitter = $(this).closest('.splitter_container').data('splitter'); if (currentSplitter.settings.fixed) { @@ -281,7 +281,7 @@ } }) - .on('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', '.splitter_mask, .splitter_container > .splitter', function (e) { + .on('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', '.splitter_mask, .splitter_container > .splitter_bar', function (e) { if (currentSplitter) { e.preventDefault(); dragStartPosition = null; @@ -315,7 +315,7 @@ } }) - .on('mousemove.splitter touchmove.splitter', '.splitter_mask, .splitter', function (e) { + .on('mousemove.splitter touchmove.splitter', '.splitter_mask, .splitter_bar', function (e) { if (currentSplitter !== null) { currentSplitter.data('savedPosition', null); From 4ec1566c9fc888dbc264f5dfa627b16752c3f6ce Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Sat, 12 Sep 2015 01:27:50 -0700 Subject: [PATCH 10/11] Change signature of onDrag* events. --- CHANGELOG.md | 2 ++ demo.html | 6 ++++++ js/jquery.enhsplitter.js | 8 ++++---- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0dd5a29..c89bd50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ Changes made so far over v1.1.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 diff --git a/demo.html b/demo.html index 0c5b6b9..fe6072d 100644 --- a/demo.html +++ b/demo.html @@ -473,23 +473,29 @@

Options

onDragStart
+ function (event, splitter_container) { ... } Default: $.noop

Event handler called when a user starts dragging a splitter.

+

Parameters passed are the standard event handler data, and the .splitter_container object.

onDragEnd
+ function (event, splitter_container) { ... } Default: $.noop

Event handler called when a user stops dragging a splitter.

+

Parameters passed are the standard event handler data, and the .splitter_container object.

onDrag
+ function (event, splitter_container) { ... } Default: $.noop

Event handler called after a user moves a splitter.

+

Parameters passed are the standard event handler data, and the .splitter_container object.

diff --git a/js/jquery.enhsplitter.js b/js/jquery.enhsplitter.js index ffa3ae7..0a75ba0 100644 --- a/js/jquery.enhsplitter.js +++ b/js/jquery.enhsplitter.js @@ -254,7 +254,7 @@ currentSplitter.find('.splitter_panel').trigger('resize.splitter'); e.preventDefault(); $('.splitter_mask').remove(); - currentSplitter.settings.onDrag(e); + currentSplitter.settings.onDrag(e, currentSplitter); } currentSplitter.removeClass('splitter-active'); currentSplitter = null; @@ -277,7 +277,7 @@ } else { currentSplitter.addClass('splitter-active'); $('
').css('cursor', currentSplitter.children().eq(1).css('cursor')).insertAfter(currentSplitter); - currentSplitter.settings.onDragStart(e); + currentSplitter.settings.onDragStart(e, currentSplitter); } }) @@ -309,7 +309,7 @@ } } $('.splitter_mask').remove(); - currentSplitter.settings.onDragEnd(e); + currentSplitter.settings.onDragEnd(e, currentSplitter); currentSplitter.removeClass('splitter-active'); currentSplitter = null; } @@ -341,7 +341,7 @@ currentSplitter.setPosition(position - currentSplitter.offset().top - currentSplitter.splitterSizeHalf); } e.preventDefault(); - currentSplitter.settings.onDrag(e); + currentSplitter.settings.onDrag(e, currentSplitter); } } ); From e8ea4a568f89bfa3b9e1ebd48f52051a6f06d148 Mon Sep 17 00:00:00 2001 From: Hilton Janfield Date: Sat, 12 Sep 2015 01:29:46 -0700 Subject: [PATCH 11/11] Add test page to test each feature for breaking changes. --- test.html | 185 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 test.html diff --git a/test.html b/test.html new file mode 100644 index 0000000..e74ebcd --- /dev/null +++ b/test.html @@ -0,0 +1,185 @@ + + + + + jQuery Splitter Features Test + + + + + + + + + + + + +

jquery.enhsplitter Features Tests

+ +

+ Demo and Documentation. + This test file uses jQuery 1.8.0, the minimum required version, to ensure there are no version compatibility breaks. +

+ + + + +