From e8a28a999fdb79da37da5b86a654b5fb3437dabf Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 2 Oct 2015 08:05:52 +0100 Subject: [PATCH 1/6] Initial v2 work Moved the offcanvas classes off the navbar element to the element that holds the navbar links. This leaves the navbar-header on the screen at all times. Also looking at improving the transitions between hidden & shown --- bower.json | 2 +- dist/css/bootstrap.offcanvas.css | 8 +++- dist/css/bootstrap.offcanvas.min.css | 2 +- dist/js/bootstrap.offcanvas.js | 10 ++++- dist/js/bootstrap.offcanvas.min.js | 2 +- example/index.html | 63 +++------------------------ package.json | 4 +- src/coffee/bootstrap.offcanvas.coffee | 8 +++- src/sass/_vars.scss | 3 ++ src/sass/bootstrap.offcanvas.scss | 16 ++++++- tests/css/bootstrap.offcanvas.css | 8 +++- 11 files changed, 56 insertions(+), 70 deletions(-) diff --git a/bower.json b/bower.json index 822163a..9f86b9d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bootstrap-offcanvas", - "version": "1.4.2", + "version": "2.0.0", "authors": [ "Phil Hughes " ], diff --git a/dist/css/bootstrap.offcanvas.css b/dist/css/bootstrap.offcanvas.css index e925b1e..04d7a67 100644 --- a/dist/css/bootstrap.offcanvas.css +++ b/dist/css/bootstrap.offcanvas.css @@ -1,4 +1,8 @@ @media (max-width: 767px) { + .navbar-default .navbar-offcanvas { + background-color: #f8f8f8; } + .navbar-inverse .navbar-offcanvas { + background-color: #222; } .navbar-offcanvas { position: absolute; height: 100%; @@ -6,8 +10,10 @@ max-width: 100%; left: -250px; top: 0; + padding-left: 15px; + padding-right: 15px; z-index: 999; - overflow-y: scroll; + overflow: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } diff --git a/dist/css/bootstrap.offcanvas.min.css b/dist/css/bootstrap.offcanvas.min.css index df35eb1..a6326eb 100644 --- a/dist/css/bootstrap.offcanvas.min.css +++ b/dist/css/bootstrap.offcanvas.min.css @@ -1 +1 @@ -@media (max-width: 767px){.navbar-offcanvas{position:absolute;height:100%;width:250px;max-width:100%;left:-250px;top:0;z-index:999;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in;}.navbar-offcanvas.in{box-shadow:0 0 20px rgba(0, 0, 0, 0.3);}.navbar-offcanvas.navbar-offcanvas-fade{opacity:0;}.navbar-offcanvas.navbar-offcanvas-fade.in{opacity:1;}.navbar-offcanvas.offcanvas-transform.in{-webkit-transform:translateX(250px);-ms-transform:translateX(250px);transform:translateX(250px);}.navbar-offcanvas.offcanvas-position.in{left:0;}.navbar-offcanvas.navbar-offcanvas-right{left:auto;right:-250px;}.navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in{-webkit-transform:translateX(-250px);-ms-transform:translateX(-250px);transform:translateX(-250px);}.navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in{left:auto;right:0;}.navbar-offcanvas .dropdown.active .caret{border-top:0;border-bottom:4px solid;}.navbar-offcanvas .dropdown-menu{position:relative;display:block;width:100%;background:inherit;border:inherit;box-shadow:none;padding:0;overflow:hidden;-webkit-transition:height 0.15s ease-in;transition:height 0.15s ease-in;height:0;}.navbar-offcanvas .dropdown-menu.shown{height:auto;margin-bottom:10px;}.navbar-offcanvas .dropdown-menu>li>a{color:#777;padding:5px 15px 5px 30px;}}.offcanvas-toggle{background:#f8f8f8;}.offcanvas-toggle .icon-bar{background:#000;}.offcanvas-toggle.offcanvas-toggle-close{margin-right:0;}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(1){-webkit-transform:rotate(45deg) translate(5px, 4px);-ms-transform:rotate(45deg) translate(5px, 4px);transform:rotate(45deg) translate(5px, 4px);}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(2){opacity:0;}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(3){-webkit-transform:rotate(-45deg) translate(4px, -4px);-ms-transform:rotate(-45deg) translate(4px, -4px);transform:rotate(-45deg) translate(4px, -4px);} \ No newline at end of file +@media (max-width: 767px){.navbar-default .navbar-offcanvas{background-color:#f8f8f8}.navbar-inverse .navbar-offcanvas{background-color:#222}.navbar-offcanvas{position:absolute;height:100%;width:250px;max-width:100%;left:-250px;top:0;padding-left:15px;padding-right:15px;z-index:999;overflow:scroll;-webkit-overflow-scrolling:touch;-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in}.navbar-offcanvas.in{box-shadow:0 0 20px rgba(0,0,0,0.3)}.navbar-offcanvas.navbar-offcanvas-fade{opacity:0}.navbar-offcanvas.navbar-offcanvas-fade.in{opacity:1}.navbar-offcanvas.offcanvas-transform.in{-webkit-transform:translateX(250px);-ms-transform:translateX(250px);transform:translateX(250px)}.navbar-offcanvas.offcanvas-position.in{left:0}.navbar-offcanvas.navbar-offcanvas-right{left:auto;right:-250px}.navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in{-webkit-transform:translateX(-250px);-ms-transform:translateX(-250px);transform:translateX(-250px)}.navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in{left:auto;right:0}.navbar-offcanvas .dropdown.active .caret{border-top:0;border-bottom:4px solid}.navbar-offcanvas .dropdown-menu{position:relative;display:block;width:100%;background:inherit;border:inherit;box-shadow:none;padding:0;overflow:hidden;-webkit-transition:height 0.15s ease-in;transition:height 0.15s ease-in;height:0}.navbar-offcanvas .dropdown-menu.shown{height:auto;margin-bottom:10px}.navbar-offcanvas .dropdown-menu>li>a{color:#777;padding:5px 15px 5px 30px}}.offcanvas-toggle{background:#f8f8f8}.offcanvas-toggle .icon-bar{background:#000}.offcanvas-toggle.offcanvas-toggle-close{margin-right:0}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(1){-webkit-transform:rotate(45deg) translate(5px, 4px);-ms-transform:rotate(45deg) translate(5px, 4px);transform:rotate(45deg) translate(5px, 4px)}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(2){opacity:0}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(3){-webkit-transform:rotate(-45deg) translate(4px, -4px);-ms-transform:rotate(-45deg) translate(4px, -4px);transform:rotate(-45deg) translate(4px, -4px)} diff --git a/dist/js/bootstrap.offcanvas.js b/dist/js/bootstrap.offcanvas.js index 201f810..1f35822 100644 --- a/dist/js/bootstrap.offcanvas.js +++ b/dist/js/bootstrap.offcanvas.js @@ -150,6 +150,14 @@ this.target.addClass(transform ? "offcanvas-transform js-offcanas-done" : "offcanvas-position js-offcanas-done"); this.target.data('offcanvas', this); this.element.on("click", this._clicked); + this.target.on('transitionend', (function(_this) { + return function() { + console.log(_this.target.is(':not(.in)')); + if (_this.target.is(':not(.in)')) { + return _this.target.height(''); + } + }; + })(this)); $(document).on("click", this._documentClicked); if (this.target.hasClass('navbar-offcanvas-touch')) { t = new OffcanvasTouch(this.target, this.location, this); @@ -167,8 +175,6 @@ Offcanvas.prototype._navbarHeight = function() { if (this.target.is('.in')) { return this.target.height($(window).outerHeight()); - } else { - return this.target.height(''); } }; diff --git a/dist/js/bootstrap.offcanvas.min.js b/dist/js/bootstrap.offcanvas.min.js index 7e87824..ddc753c 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;return e=function(){function c(c){this.element=c,this._clickEvent=a(this._clickEvent,this),this.element=b(this.element),this.dropdown=this.element.parent().find(".dropdown-menu"),this.element.on("click",this._clickEvent)}return c.prototype._clickEvent=function(a){return this.dropdown.hasClass("shown")||a.preventDefault(),this.dropdown.toggleClass("shown"),this.element.parent().toggleClass("active")},c}(),f=function(){function c(c,d,e){this.element=c,this.location=d,this.offcanvas=e,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")?!0:!1,b(document).on("touchstart",this._touchStart),b(document).on("touchmove",this._touchMove),b(document).on("touchend",this._touchEnd)}return c.prototype._touchStart=function(a){return this.startX=a.originalEvent.touches[0].pageX},c.prototype._touchMove=function(a){var c;if(b(a.target).parents(".navbar-offcanvas").length>0)return!0;if(this.startX>this.startThreshold&&this.startX0?!0:(d=a.originalEvent.changedTouches[0].pageX,c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(d)>this.endThreshold+50:dthis.endThreshold&&this.startX>this.startThreshold&&this.startX0)return!0;if(this.startX>this.startThreshold&&this.startX0?!0:(d=a.originalEvent.changedTouches[0].pageX,c=this.element.hasClass("navbar-offcanvas-right")?Math.abs(d)>this.endThreshold+50:dthis.endThreshold&&this.startX>this.startThreshold&&this.startX
- - -