From 3113a7f236b5ff9639380b6b4ce7bf159c25cde4 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 5 Jan 2018 17:41:21 +0000 Subject: [PATCH 1/3] Added jQuery plugin method Closes #73 --- dist/js/bootstrap.offcanvas.js | 27 ++++++++++++++----------- dist/js/bootstrap.offcanvas.min.js | 2 +- src/coffee/bootstrap.offcanvas.coffee | 29 +++++++++++++-------------- 3 files changed, 30 insertions(+), 28 deletions(-) diff --git a/dist/js/bootstrap.offcanvas.js b/dist/js/bootstrap.offcanvas.js index f1699a0..fd4a47f 100644 --- a/dist/js/bootstrap.offcanvas.js +++ b/dist/js/bootstrap.offcanvas.js @@ -2,7 +2,7 @@ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; (function($, window) { - var Offcanvas, OffcanvasDropdown, OffcanvasTouch, transformCheck; + var Offcanvas, OffcanvasDropdown, OffcanvasTouch; OffcanvasDropdown = (function() { function OffcanvasDropdown(element) { this.element = element; @@ -157,6 +157,7 @@ function Offcanvas(element) { var t, target; this.element = element; + this._transformSupported = __bind(this._transformSupported, this); this.bodyOverflow = __bind(this.bodyOverflow, this); this._sendEventsAfter = __bind(this._sendEventsAfter, this); this._sendEventsBefore = __bind(this._sendEventsBefore, this); @@ -171,7 +172,7 @@ if (this.target.length && !this.target.hasClass('js-offcanvas-done')) { this.element.addClass('js-offcanvas-has-events'); this.location = this.target.hasClass("navbar-offcanvas-right") ? "right" : "left"; - this.target.addClass(transform ? "offcanvas-transform js-offcanvas-done" : "offcanvas-position js-offcanvas-done"); + this.target.addClass(this._transformSupported() ? "offcanvas-transform js-offcanvas-done" : "offcanvas-position js-offcanvas-done"); this.target.data('offcanvas', this); this.element.on("click", this._clicked); this.target.on('transitionend', (function(_this) { @@ -295,25 +296,27 @@ } }; - return Offcanvas; - - })(); - transformCheck = (function(_this) { - return function() { + Offcanvas.prototype._transformSupported = function() { var asSupport, el, regex, translate3D; el = document.createElement('div'); translate3D = "translate3d(0px, 0px, 0px)"; regex = /translate3d\(0px, 0px, 0px\)/g; el.style.cssText = "-webkit-transform: " + translate3D + "; -moz-transform: " + translate3D + "; -o-transform: " + translate3D + "; transform: " + translate3D; asSupport = el.style.cssText.match(regex); - return _this.transform = asSupport.length != null; + return asSupport.length != null; }; - })(this); + + return Offcanvas; + + })(); + $.fn.bsOffcanvas = function() { + return this.each(function() { + return new Offcanvas($(this)); + }); + }; return $(function() { - transformCheck(); $('[data-toggle="offcanvas"]').each(function() { - var oc; - return oc = new Offcanvas($(this)); + return $(this).bsOffcanvas(); }); $(window).on('resize', function() { $('.navbar-offcanvas.in').each(function() { diff --git a/dist/js/bootstrap.offcanvas.min.js b/dist/js/bootstrap.offcanvas.min.js index b56e8c1..8928915 100644 --- a/dist/js/bootstrap.offcanvas.min.js +++ b/dist/js/bootstrap.offcanvas.min.js @@ -21,4 +21,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -(function(){var a=function(a,b){return function(){return a.apply(b,arguments)}};!function(b,c){var d,e,f,g;e=function(){function c(c){this.element=c,this._clickEvent=a(this._clickEvent,this),this.element=b(this.element),this.nav=this.element.closest(".nav"),this.dropdown=this.element.parent().find(".dropdown-menu"),this.element.on("click",this._clickEvent),this.nav.closest(".navbar-offcanvas").on("click",function(a){return function(){if(a.dropdown.is(".shown"))return a.dropdown.removeClass("shown").closest(".active").removeClass("active")}}(this))}return c.prototype._clickEvent=function(a){return this.dropdown.hasClass("shown")||a.preventDefault(),a.stopPropagation(),b(".dropdown-toggle").not(this.element).closest(".active").removeClass("active").find(".dropdown-menu").removeClass("shown"),this.dropdown.toggleClass("shown"),this.element.parent().toggleClass("open")},c}(),f=function(){function d(c,d,e,f){this.button=c,this.element=d,this.location=e,this.offcanvas=f,this._getFade=a(this._getFade,this),this._getCss=a(this._getCss,this),this._touchEnd=a(this._touchEnd,this),this._touchMove=a(this._touchMove,this),this._touchStart=a(this._touchStart,this),this.endThreshold=130,this.startThreshold=this.element.hasClass("navbar-offcanvas-right")?b("body").outerWidth()-60:20,this.maxStartThreshold=this.element.hasClass("navbar-offcanvas-right")?b("body").outerWidth()-20:60,this.currentX=0,this.fade=!!this.element.hasClass("navbar-offcanvas-fade"),b(document).on("touchstart",this._touchStart),b(document).on("touchmove",this._touchMove),b(document).on("touchend",this._touchEnd)}return d.prototype._touchStart=function(a){if(this.startX=a.originalEvent.touches[0].pageX,this.element.is(".in"))return this.element.height(b(c).outerHeight())},d.prototype._touchMove=function(a){var c;if(b(a.target).parents(".navbar-offcanvas").length>0)return!0;if(this.startX>this.startThreshold&&this.startX0||(d=!1,e=a.originalEvent.changedTouches[0].pageX,Math.abs(e)!==this.startX?(c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(e)>this.endThreshold+50:ethis.endThreshold&&this.startX>this.startThreshold&&this.startX0)return!0;if(this.startX>this.startThreshold&&this.startX0||(d=!1,e=a.originalEvent.changedTouches[0].pageX,Math.abs(e)!==this.startX?(c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(e)>this.endThreshold+50:ethis.endThreshold&&this.startX>this.startThreshold&&this.startX + el = document.createElement 'div' + translate3D = "translate3d(0px, 0px, 0px)" + regex = /translate3d\(0px, 0px, 0px\)/g - # Transform checker - # - # Checks if transform3d is available for us to use - transformCheck = => - el = document.createElement 'div' - translate3D = "translate3d(0px, 0px, 0px)" - regex = /translate3d\(0px, 0px, 0px\)/g + el.style.cssText = "-webkit-transform: #{translate3D}; -moz-transform: #{translate3D}; -o-transform: #{translate3D}; transform: #{translate3D}" + asSupport = el.style.cssText.match regex - el.style.cssText = "-webkit-transform: #{translate3D}; -moz-transform: #{translate3D}; -o-transform: #{translate3D}; transform: #{translate3D}" - asSupport = el.style.cssText.match regex + asSupport.length? - @transform = asSupport.length? + $.fn.bsOffcanvas = -> + this.each -> new Offcanvas $(this) $ -> - # Work out if transform3d is available for use - transformCheck() - $('[data-toggle="offcanvas"]').each -> - oc = new Offcanvas $(this) + $(this).bsOffcanvas() $(window).on 'resize', -> $('.navbar-offcanvas.in').each -> From f81651108c488c3b1a5f38bac8a3dc01c865eddc Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 5 Jan 2018 17:53:18 +0000 Subject: [PATCH 2/3] fixed hound --- .travis.yml | 2 +- dist/js/bootstrap.offcanvas.js | 1 - dist/js/bootstrap.offcanvas.min.js | 2 +- src/coffee/bootstrap.offcanvas.coffee | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.travis.yml b/.travis.yml index c6c7fe1..8050323 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,7 @@ language: node_js sudo: false node_js: - - "0.10" + - "9.0" notifications: webhooks: urls: diff --git a/dist/js/bootstrap.offcanvas.js b/dist/js/bootstrap.offcanvas.js index fd4a47f..f46646c 100644 --- a/dist/js/bootstrap.offcanvas.js +++ b/dist/js/bootstrap.offcanvas.js @@ -157,7 +157,6 @@ function Offcanvas(element) { var t, target; this.element = element; - this._transformSupported = __bind(this._transformSupported, this); this.bodyOverflow = __bind(this.bodyOverflow, this); this._sendEventsAfter = __bind(this._sendEventsAfter, this); this._sendEventsBefore = __bind(this._sendEventsBefore, this); diff --git a/dist/js/bootstrap.offcanvas.min.js b/dist/js/bootstrap.offcanvas.min.js index 8928915..95b8fd0 100644 --- a/dist/js/bootstrap.offcanvas.min.js +++ b/dist/js/bootstrap.offcanvas.min.js @@ -21,4 +21,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -(function(){var a=function(a,b){return function(){return a.apply(b,arguments)}};!function(b,c){var d,e,f;e=function(){function c(c){this.element=c,this._clickEvent=a(this._clickEvent,this),this.element=b(this.element),this.nav=this.element.closest(".nav"),this.dropdown=this.element.parent().find(".dropdown-menu"),this.element.on("click",this._clickEvent),this.nav.closest(".navbar-offcanvas").on("click",function(a){return function(){if(a.dropdown.is(".shown"))return a.dropdown.removeClass("shown").closest(".active").removeClass("active")}}(this))}return c.prototype._clickEvent=function(a){return this.dropdown.hasClass("shown")||a.preventDefault(),a.stopPropagation(),b(".dropdown-toggle").not(this.element).closest(".active").removeClass("active").find(".dropdown-menu").removeClass("shown"),this.dropdown.toggleClass("shown"),this.element.parent().toggleClass("open")},c}(),f=function(){function d(c,d,e,f){this.button=c,this.element=d,this.location=e,this.offcanvas=f,this._getFade=a(this._getFade,this),this._getCss=a(this._getCss,this),this._touchEnd=a(this._touchEnd,this),this._touchMove=a(this._touchMove,this),this._touchStart=a(this._touchStart,this),this.endThreshold=130,this.startThreshold=this.element.hasClass("navbar-offcanvas-right")?b("body").outerWidth()-60:20,this.maxStartThreshold=this.element.hasClass("navbar-offcanvas-right")?b("body").outerWidth()-20:60,this.currentX=0,this.fade=!!this.element.hasClass("navbar-offcanvas-fade"),b(document).on("touchstart",this._touchStart),b(document).on("touchmove",this._touchMove),b(document).on("touchend",this._touchEnd)}return d.prototype._touchStart=function(a){if(this.startX=a.originalEvent.touches[0].pageX,this.element.is(".in"))return this.element.height(b(c).outerHeight())},d.prototype._touchMove=function(a){var c;if(b(a.target).parents(".navbar-offcanvas").length>0)return!0;if(this.startX>this.startThreshold&&this.startX0||(d=!1,e=a.originalEvent.changedTouches[0].pageX,Math.abs(e)!==this.startX?(c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(e)>this.endThreshold+50:ethis.endThreshold&&this.startX>this.startThreshold&&this.startX0)return!0;if(this.startX>this.startThreshold&&this.startX0||(d=!1,e=a.originalEvent.changedTouches[0].pageX,Math.abs(e)!==this.startX?(c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(e)>this.endThreshold+50:ethis.endThreshold&&this.startX>this.startThreshold&&this.startX + _transformSupported: -> el = document.createElement 'div' translate3D = "translate3d(0px, 0px, 0px)" regex = /translate3d\(0px, 0px, 0px\)/g From 3701c8644f065bb8e8e6377e2878e9d4d8206833 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 5 Jan 2018 17:59:42 +0000 Subject: [PATCH 3/3] test fixes --- dist/js/bootstrap.offcanvas.js | 4 ++-- dist/js/bootstrap.offcanvas.min.js | 2 +- src/coffee/bootstrap.offcanvas.coffee | 6 +++--- tests/test.js | 12 ++++++------ 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/dist/js/bootstrap.offcanvas.js b/dist/js/bootstrap.offcanvas.js index f46646c..a87e6f7 100644 --- a/dist/js/bootstrap.offcanvas.js +++ b/dist/js/bootstrap.offcanvas.js @@ -14,7 +14,7 @@ this.nav.closest('.navbar-offcanvas').on('click', (function(_this) { return function() { if (_this.dropdown.is('.shown')) { - return _this.dropdown.removeClass('shown').closest('.active').removeClass('active'); + return _this.dropdown.removeClass('shown').closest('.open').removeClass('open'); } }; })(this)); @@ -25,7 +25,7 @@ e.preventDefault(); } e.stopPropagation(); - $('.dropdown-toggle').not(this.element).closest('.active').removeClass('active').find('.dropdown-menu').removeClass('shown'); + $('.dropdown-toggle').not(this.element).closest('.open').removeClass('open').find('.dropdown-menu').removeClass('shown'); this.dropdown.toggleClass("shown"); return this.element.parent().toggleClass('open'); }; diff --git a/dist/js/bootstrap.offcanvas.min.js b/dist/js/bootstrap.offcanvas.min.js index 95b8fd0..7d491c3 100644 --- a/dist/js/bootstrap.offcanvas.min.js +++ b/dist/js/bootstrap.offcanvas.min.js @@ -21,4 +21,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -(function(){var a=function(a,b){return function(){return a.apply(b,arguments)}};!function(b,c){var d,e,f;e=function(){function c(c){this.element=c,this._clickEvent=a(this._clickEvent,this),this.element=b(this.element),this.nav=this.element.closest(".nav"),this.dropdown=this.element.parent().find(".dropdown-menu"),this.element.on("click",this._clickEvent),this.nav.closest(".navbar-offcanvas").on("click",function(a){return function(){if(a.dropdown.is(".shown"))return a.dropdown.removeClass("shown").closest(".active").removeClass("active")}}(this))}return c.prototype._clickEvent=function(a){return this.dropdown.hasClass("shown")||a.preventDefault(),a.stopPropagation(),b(".dropdown-toggle").not(this.element).closest(".active").removeClass("active").find(".dropdown-menu").removeClass("shown"),this.dropdown.toggleClass("shown"),this.element.parent().toggleClass("open")},c}(),f=function(){function d(c,d,e,f){this.button=c,this.element=d,this.location=e,this.offcanvas=f,this._getFade=a(this._getFade,this),this._getCss=a(this._getCss,this),this._touchEnd=a(this._touchEnd,this),this._touchMove=a(this._touchMove,this),this._touchStart=a(this._touchStart,this),this.endThreshold=130,this.startThreshold=this.element.hasClass("navbar-offcanvas-right")?b("body").outerWidth()-60:20,this.maxStartThreshold=this.element.hasClass("navbar-offcanvas-right")?b("body").outerWidth()-20:60,this.currentX=0,this.fade=!!this.element.hasClass("navbar-offcanvas-fade"),b(document).on("touchstart",this._touchStart),b(document).on("touchmove",this._touchMove),b(document).on("touchend",this._touchEnd)}return d.prototype._touchStart=function(a){if(this.startX=a.originalEvent.touches[0].pageX,this.element.is(".in"))return this.element.height(b(c).outerHeight())},d.prototype._touchMove=function(a){var c;if(b(a.target).parents(".navbar-offcanvas").length>0)return!0;if(this.startX>this.startThreshold&&this.startX0||(d=!1,e=a.originalEvent.changedTouches[0].pageX,Math.abs(e)!==this.startX?(c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(e)>this.endThreshold+50:ethis.endThreshold&&this.startX>this.startThreshold&&this.startX0)return!0;if(this.startX>this.startThreshold&&this.startX0||(d=!1,e=a.originalEvent.changedTouches[0].pageX,Math.abs(e)!==this.startX?(c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(e)>this.endThreshold+50:ethis.endThreshold&&this.startX>this.startThreshold&&this.startX if @dropdown.is('.shown') - @dropdown.removeClass('shown').closest('.active').removeClass('active') + @dropdown.removeClass('shown').closest('.open').removeClass('open') # Private: Click event on link _clickEvent: (e) => @@ -24,8 +24,8 @@ # Hide currently visible dropdown menus $('.dropdown-toggle').not(@element) - .closest('.active') - .removeClass 'active' + .closest('.open') + .removeClass 'open' .find '.dropdown-menu' .removeClass 'shown' diff --git a/tests/test.js b/tests/test.js index bd8bd7e..af548c1 100644 --- a/tests/test.js +++ b/tests/test.js @@ -27,7 +27,7 @@ assert.expect(2); $("#js-dropdown-test").trigger("click"); - assert.ok($("#js-dropdown-test").parent().hasClass("active"), "Dropdown menu should be visible"); + assert.ok($("#js-dropdown-test").parent().hasClass("open"), "Dropdown menu should be visible"); assert.ok($("#js-dropdown-test").parent().find(".dropdown-menu").hasClass("shown"), "Dropdown menu should be hidden"); $("#js-dropdown-test").trigger("click"); }); @@ -36,12 +36,12 @@ assert.expect(4); $("#js-dropdown-test").trigger("click"); - assert.ok($("#js-dropdown-test").parent().hasClass("active"), "Dropdown menu should be visible"); + assert.ok($("#js-dropdown-test").parent().hasClass("open"), "Dropdown menu should be visible"); assert.ok($("#js-dropdown-test").parent().find(".dropdown-menu").hasClass("shown"), "Dropdown menu should be hidden"); $('.navbar-offcanvas').trigger('click'); - assert.ok(!$("#js-dropdown-test").parent().hasClass("active"), "Dropdown menu should not be visible"); + assert.ok(!$("#js-dropdown-test").parent().hasClass("open"), "Dropdown menu should not be visible"); assert.ok(!$("#js-dropdown-test").parent().find(".dropdown-menu").hasClass("shown"), "Dropdown menu should not be hidden"); }); @@ -49,15 +49,15 @@ assert.expect(6); $("#js-dropdown-test").trigger("click"); - assert.ok($("#js-dropdown-test").parent().hasClass("active"), "Dropdown menu should be visible"); + assert.ok($("#js-dropdown-test").parent().hasClass("open"), "Dropdown menu should be visible"); assert.ok($("#js-dropdown-test").parent().find(".dropdown-menu").hasClass("shown"), "Dropdown menu should be hidden"); $("#js-dropdown-test2").trigger("click"); - assert.ok($("#js-dropdown-test2").parent().hasClass("active"), "Dropdown menu should be visible"); + assert.ok($("#js-dropdown-test2").parent().hasClass("open"), "Dropdown menu should be visible"); assert.ok($("#js-dropdown-test2").parent().find(".dropdown-menu").hasClass("shown"), "Dropdown menu should be hidden"); - assert.ok($("#js-dropdown-test").parent().is(":not(.active)")); + assert.ok($("#js-dropdown-test").parent().is(":not(.open)")); assert.ok($("#js-dropdown-test").parent().find(".dropdown-menu").is(":not(.shown)")); $("#js-dropdown-test2").trigger("click");