Adding jasny bootstrap off canvas nav
This commit is contained in:
Holger Koenemann
parent
50f5f94e4a
commit
4860073ec0
|
|
@ -0,0 +1,407 @@
|
|||
/*!
|
||||
* Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap)
|
||||
* Copyright 2011-2014 Arnold Daniels.
|
||||
* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
.nav-tabs-bottom {
|
||||
border-bottom: 0;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
.nav-tabs-bottom > li {
|
||||
margin-bottom: 0;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.nav-tabs-bottom > li > a {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.nav-tabs-bottom > li > a:hover,
|
||||
.nav-tabs-bottom > li > a:focus,
|
||||
.nav-tabs-bottom > li.active > a,
|
||||
.nav-tabs-bottom > li.active > a:hover,
|
||||
.nav-tabs-bottom > li.active > a:focus {
|
||||
border: 1px solid #dddddd;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
.nav-tabs-left {
|
||||
border-bottom: 0;
|
||||
border-right: 1px solid #dddddd;
|
||||
}
|
||||
.nav-tabs-left > li {
|
||||
margin-bottom: 0;
|
||||
margin-right: -1px;
|
||||
float: none;
|
||||
}
|
||||
.nav-tabs-left > li > a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.nav-tabs-left > li > a:hover,
|
||||
.nav-tabs-left > li > a:focus,
|
||||
.nav-tabs-left > li.active > a,
|
||||
.nav-tabs-left > li.active > a:hover,
|
||||
.nav-tabs-left > li.active > a:focus {
|
||||
border: 1px solid #dddddd;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.row > .nav-tabs-left {
|
||||
padding-right: 0;
|
||||
padding-left: 15px;
|
||||
margin-right: -1px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.row > .nav-tabs-left + .tab-content {
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
.nav-tabs-right {
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
.nav-tabs-right > li {
|
||||
margin-bottom: 0;
|
||||
margin-left: -1px;
|
||||
float: none;
|
||||
}
|
||||
.nav-tabs-right > li > a {
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.nav-tabs-right > li > a:hover,
|
||||
.nav-tabs-right > li > a:focus,
|
||||
.nav-tabs-right > li.active > a,
|
||||
.nav-tabs-right > li.active > a:hover,
|
||||
.nav-tabs-right > li.active > a:focus {
|
||||
border: 1px solid #dddddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.row > .nav-tabs-right {
|
||||
padding-left: 0;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.navmenu,
|
||||
.navbar-offcanvas {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.navmenu-fixed-left,
|
||||
.navmenu-fixed-right,
|
||||
.navbar-offcanvas {
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
.navmenu-fixed-left,
|
||||
.navbar-offcanvas.navmenu-fixed-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
.navmenu-fixed-right,
|
||||
.navbar-offcanvas {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
.navmenu-nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.navmenu-nav.dropdown-menu {
|
||||
position: static;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
float: none;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav {
|
||||
margin: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.navbar-offcanvas {
|
||||
width: auto;
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-offcanvas.offcanvas {
|
||||
position: static;
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
padding-bottom: 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav.navbar-left:first-child {
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar-offcanvas .navbar-nav.navbar-right:last-child {
|
||||
margin-right: -15px;
|
||||
}
|
||||
.navbar-offcanvas .navmenu-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navmenu-brand {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
padding: 10px 15px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.navmenu-brand:hover,
|
||||
.navmenu-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navmenu-default,
|
||||
.navbar-default .navbar-offcanvas {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-brand,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand {
|
||||
color: #777777;
|
||||
}
|
||||
.navmenu-default .navmenu-brand:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand:hover,
|
||||
.navmenu-default .navmenu-brand:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-brand:focus {
|
||||
color: #5e5e5e;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-default .navmenu-text,
|
||||
.navbar-default .navbar-offcanvas .navmenu-text {
|
||||
color: #777777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #333333;
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .open > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
|
||||
.navmenu-default .navmenu-nav > .open > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||
.navmenu-default .navmenu-nav > .open > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||
background-color: #e7e7e7;
|
||||
color: #555555;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .open > a .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||
.navmenu-default .navmenu-nav > .open > a:hover .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||
.navmenu-default .navmenu-nav > .open > a:focus .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||
border-top-color: #555555;
|
||||
border-bottom-color: #555555;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .dropdown > a .caret,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||
border-top-color: #777777;
|
||||
border-bottom-color: #777777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .divider,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > li > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
|
||||
color: #777777;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > li > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||
.navmenu-default .navmenu-nav > li > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||
color: #333333;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .active > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
|
||||
.navmenu-default .navmenu-nav > .active > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||
.navmenu-default .navmenu-nav > .active > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||
color: #555555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.navmenu-default .navmenu-nav > .disabled > a,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||
.navmenu-default .navmenu-nav > .disabled > a:hover,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||
.navmenu-default .navmenu-nav > .disabled > a:focus,
|
||||
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||
color: #cccccc;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse,
|
||||
.navbar-inverse .navbar-offcanvas {
|
||||
background-color: #222222;
|
||||
border-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-brand,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand {
|
||||
color: #999999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-brand:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
|
||||
.navmenu-inverse .navmenu-brand:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse .navmenu-text,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-text {
|
||||
color: #999999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #ffffff;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .open > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||
background-color: #080808;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .open > a .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:hover .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||
.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||
border-top-color: #ffffff;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||
border-top-color: #999999;
|
||||
border-bottom-color: #999999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||
background-color: #222222;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||
background-color: #000000;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > li > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
|
||||
color: #999999;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > li > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > li > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .active > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
|
||||
.navmenu-inverse .navmenu-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .active > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||
color: #ffffff;
|
||||
background-color: #080808;
|
||||
}
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a:hover,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||
.navmenu-inverse .navmenu-nav > .disabled > a:focus,
|
||||
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||
color: #444444;
|
||||
background-color: transparent;
|
||||
}
|
||||
.offcanvas {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas.in {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.offcanvas-xs {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-xs.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.offcanvas-sm {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-sm.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
.offcanvas-md {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-md.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.offcanvas-lg {
|
||||
display: none;
|
||||
}
|
||||
.offcanvas-lg.in {
|
||||
display: block;
|
||||
}
|
||||
.canvas-sliding {
|
||||
-webkit-transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
|
||||
transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
|
||||
}
|
||||
.offcanvas-clone {
|
||||
height: 0px !important;
|
||||
width: 0px !important;
|
||||
overflow: hidden !important;
|
||||
border: none !important;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
position: absolute !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
bottom: 0px !important;
|
||||
right: 0px !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -3,9 +3,11 @@
|
|||
function understrap_scripts() {
|
||||
wp_enqueue_style( 'understrap-theme', get_stylesheet_directory_uri() . '/css/theme.css', array(), '0.1', false );
|
||||
wp_enqueue_style( 'understrap-carousel-style', get_stylesheet_directory_uri() . '/css/owl.carousel.css', array(), '20024', false );
|
||||
wp_enqueue_style( 'understrap-off-canvas-style', get_stylesheet_directory_uri() . '/css/jasny-bootstrap.min.css', array(), '310', false );
|
||||
wp_enqueue_script('jquery');
|
||||
wp_enqueue_script( 'understrap-navigation', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', true );
|
||||
wp_enqueue_script( 'understrap-carousel-script', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '20024', true );
|
||||
wp_enqueue_script( 'understrap-off-canvas-script', get_template_directory_uri() . '/js/jasny-bootstrap.min.js', array(), '310', true );
|
||||
wp_enqueue_script( 'understrap-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
|
||||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||
wp_enqueue_script( 'comment-reply' );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,369 @@
|
|||
/* ========================================================================
|
||||
* Bootstrap: offcanvas.js v3.1.3
|
||||
* http://jasny.github.io/bootstrap/javascript/#offcanvas
|
||||
* ========================================================================
|
||||
* Copyright 2013-2014 Arnold Daniels
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License")
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ======================================================================== */
|
||||
|
||||
+function ($) { "use strict";
|
||||
|
||||
// OFFCANVAS PUBLIC CLASS DEFINITION
|
||||
// =================================
|
||||
|
||||
var OffCanvas = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.options = $.extend({}, OffCanvas.DEFAULTS, options)
|
||||
this.state = null
|
||||
this.placement = null
|
||||
|
||||
if (this.options.recalc) {
|
||||
this.calcClone()
|
||||
$(window).on('resize', $.proxy(this.recalc, this))
|
||||
}
|
||||
|
||||
if (this.options.autohide)
|
||||
$(document).on('click', $.proxy(this.autohide, this))
|
||||
|
||||
if (this.options.toggle) this.toggle()
|
||||
|
||||
if (this.options.disablescrolling) {
|
||||
this.options.disableScrolling = this.options.disablescrolling
|
||||
delete this.options.disablescrolling
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.DEFAULTS = {
|
||||
toggle: true,
|
||||
placement: 'auto',
|
||||
autohide: true,
|
||||
recalc: true,
|
||||
disableScrolling: true
|
||||
}
|
||||
|
||||
OffCanvas.prototype.offset = function () {
|
||||
switch (this.placement) {
|
||||
case 'left':
|
||||
case 'right': return this.$element.outerWidth()
|
||||
case 'top':
|
||||
case 'bottom': return this.$element.outerHeight()
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.calcPlacement = function () {
|
||||
if (this.options.placement !== 'auto') {
|
||||
this.placement = this.options.placement
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.$element.hasClass('in')) {
|
||||
this.$element.css('visiblity', 'hidden !important').addClass('in')
|
||||
}
|
||||
|
||||
var horizontal = $(window).width() / this.$element.width()
|
||||
var vertical = $(window).height() / this.$element.height()
|
||||
|
||||
var element = this.$element
|
||||
function ab(a, b) {
|
||||
if (element.css(b) === 'auto') return a
|
||||
if (element.css(a) === 'auto') return b
|
||||
|
||||
var size_a = parseInt(element.css(a), 10)
|
||||
var size_b = parseInt(element.css(b), 10)
|
||||
|
||||
return size_a > size_b ? b : a
|
||||
}
|
||||
|
||||
this.placement = horizontal >= vertical ? ab('left', 'right') : ab('top', 'bottom')
|
||||
|
||||
if (this.$element.css('visibility') === 'hidden !important') {
|
||||
this.$element.removeClass('in').css('visiblity', '')
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.opposite = function (placement) {
|
||||
switch (placement) {
|
||||
case 'top': return 'bottom'
|
||||
case 'left': return 'right'
|
||||
case 'bottom': return 'top'
|
||||
case 'right': return 'left'
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.getCanvasElements = function() {
|
||||
// Return a set containing the canvas plus all fixed elements
|
||||
var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
|
||||
|
||||
var fixed_elements = canvas.find('*').filter(function() {
|
||||
return $(this).css('position') === 'fixed'
|
||||
}).not(this.options.exclude)
|
||||
|
||||
return canvas.add(fixed_elements)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.slide = function (elements, offset, callback) {
|
||||
// Use jQuery animation if CSS transitions aren't supported
|
||||
if (!$.support.transition) {
|
||||
var anim = {}
|
||||
anim[this.placement] = "+=" + offset
|
||||
return elements.animate(anim, 350, callback)
|
||||
}
|
||||
|
||||
var placement = this.placement
|
||||
var opposite = this.opposite(placement)
|
||||
|
||||
elements.each(function() {
|
||||
if ($(this).css(placement) !== 'auto')
|
||||
$(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
|
||||
|
||||
if ($(this).css(opposite) !== 'auto')
|
||||
$(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
|
||||
})
|
||||
|
||||
this.$element
|
||||
.one($.support.transition.end, callback)
|
||||
.emulateTransitionEnd(350)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.disableScrolling = function() {
|
||||
var bodyWidth = $('body').width()
|
||||
var prop = 'padding-' + this.opposite(this.placement)
|
||||
|
||||
if ($('body').data('offcanvas-style') === undefined) {
|
||||
$('body').data('offcanvas-style', $('body').attr('style') || '')
|
||||
}
|
||||
|
||||
$('body').css('overflow', 'hidden')
|
||||
|
||||
if ($('body').width() > bodyWidth) {
|
||||
var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
|
||||
|
||||
setTimeout(function() {
|
||||
$('body').css(prop, padding)
|
||||
}, 1)
|
||||
}
|
||||
}
|
||||
|
||||
OffCanvas.prototype.show = function () {
|
||||
if (this.state) return
|
||||
|
||||
var startEvent = $.Event('show.bs.offcanvas')
|
||||
this.$element.trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) return
|
||||
|
||||
this.state = 'slide-in'
|
||||
this.calcPlacement();
|
||||
|
||||
var elements = this.getCanvasElements()
|
||||
var placement = this.placement
|
||||
var opposite = this.opposite(placement)
|
||||
var offset = this.offset()
|
||||
|
||||
if (elements.index(this.$element) !== -1) {
|
||||
$(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
|
||||
this.$element.css(placement, -1 * offset)
|
||||
this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
|
||||
}
|
||||
|
||||
elements.addClass('canvas-sliding').each(function() {
|
||||
if ($(this).data('offcanvas-style') === undefined) $(this).data('offcanvas-style', $(this).attr('style') || '')
|
||||
if ($(this).css('position') === 'static') $(this).css('position', 'relative')
|
||||
if (($(this).css(placement) === 'auto' || $(this).css(placement) === '0px') &&
|
||||
($(this).css(opposite) === 'auto' || $(this).css(opposite) === '0px')) {
|
||||
$(this).css(placement, 0)
|
||||
}
|
||||
})
|
||||
|
||||
if (this.options.disableScrolling) this.disableScrolling()
|
||||
|
||||
var complete = function () {
|
||||
if (this.state != 'slide-in') return
|
||||
|
||||
this.state = 'slid'
|
||||
|
||||
elements.removeClass('canvas-sliding').addClass('canvas-slid')
|
||||
this.$element.trigger('shown.bs.offcanvas')
|
||||
}
|
||||
|
||||
setTimeout($.proxy(function() {
|
||||
this.$element.addClass('in')
|
||||
this.slide(elements, offset, $.proxy(complete, this))
|
||||
}, this), 1)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.hide = function (fast) {
|
||||
if (this.state !== 'slid') return
|
||||
|
||||
var startEvent = $.Event('hide.bs.offcanvas')
|
||||
this.$element.trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) return
|
||||
|
||||
this.state = 'slide-out'
|
||||
|
||||
var elements = $('.canvas-slid')
|
||||
var placement = this.placement
|
||||
var offset = -1 * this.offset()
|
||||
|
||||
var complete = function () {
|
||||
if (this.state != 'slide-out') return
|
||||
|
||||
this.state = null
|
||||
this.placement = null
|
||||
|
||||
this.$element.removeClass('in')
|
||||
|
||||
elements.removeClass('canvas-sliding')
|
||||
elements.add(this.$element).add('body').each(function() {
|
||||
$(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
|
||||
})
|
||||
|
||||
this.$element.trigger('hidden.bs.offcanvas')
|
||||
}
|
||||
|
||||
elements.removeClass('canvas-slid').addClass('canvas-sliding')
|
||||
|
||||
setTimeout($.proxy(function() {
|
||||
this.slide(elements, offset, $.proxy(complete, this))
|
||||
}, this), 1)
|
||||
}
|
||||
|
||||
OffCanvas.prototype.toggle = function () {
|
||||
if (this.state === 'slide-in' || this.state === 'slide-out') return
|
||||
this[this.state === 'slid' ? 'hide' : 'show']()
|
||||
}
|
||||
|
||||
OffCanvas.prototype.calcClone = function() {
|
||||
this.$calcClone = this.$element.clone()
|
||||
.html('')
|
||||
.addClass('offcanvas-clone').removeClass('in')
|
||||
.appendTo($('body'))
|
||||
}
|
||||
|
||||
OffCanvas.prototype.recalc = function () {
|
||||
if (this.$calcClone.css('display') === 'none' || (this.state !== 'slid' && this.state !== 'slide-in')) return
|
||||
|
||||
this.state = null
|
||||
this.placement = null
|
||||
var elements = this.getCanvasElements()
|
||||
|
||||
this.$element.removeClass('in')
|
||||
|
||||
elements.removeClass('canvas-slid')
|
||||
elements.add(this.$element).add('body').each(function() {
|
||||
$(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
|
||||
})
|
||||
}
|
||||
|
||||
OffCanvas.prototype.autohide = function (e) {
|
||||
if ($(e.target).closest(this.$element).length === 0) this.hide()
|
||||
}
|
||||
|
||||
// OFFCANVAS PLUGIN DEFINITION
|
||||
// ==========================
|
||||
|
||||
var old = $.fn.offcanvas
|
||||
|
||||
$.fn.offcanvas = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('bs.offcanvas')
|
||||
var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
|
||||
|
||||
if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
|
||||
if (typeof option === 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.offcanvas.Constructor = OffCanvas
|
||||
|
||||
|
||||
// OFFCANVAS NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.offcanvas.noConflict = function () {
|
||||
$.fn.offcanvas = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// OFFCANVAS DATA-API
|
||||
// =================
|
||||
|
||||
$(document).on('click.bs.offcanvas.data-api', '[data-toggle=offcanvas]', function (e) {
|
||||
var $this = $(this), href
|
||||
var target = $this.attr('data-target')
|
||||
|| e.preventDefault()
|
||||
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
|
||||
var $canvas = $(target)
|
||||
var data = $canvas.data('bs.offcanvas')
|
||||
var option = data ? 'toggle' : $this.data()
|
||||
|
||||
e.stopPropagation()
|
||||
|
||||
if (data) data.toggle()
|
||||
else $canvas.offcanvas(option)
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: transition.js v3.1.3
|
||||
* http://getbootstrap.com/javascript/#transitions
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* ======================================================================== */
|
||||
|
||||
|
||||
+function ($) {
|
||||
'use strict';
|
||||
|
||||
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
|
||||
// ============================================================
|
||||
|
||||
function transitionEnd() {
|
||||
var el = document.createElement('bootstrap')
|
||||
|
||||
var transEndEventNames = {
|
||||
WebkitTransition : 'webkitTransitionEnd',
|
||||
MozTransition : 'transitionend',
|
||||
OTransition : 'oTransitionEnd otransitionend',
|
||||
transition : 'transitionend'
|
||||
}
|
||||
|
||||
for (var name in transEndEventNames) {
|
||||
if (el.style[name] !== undefined) {
|
||||
return { end: transEndEventNames[name] }
|
||||
}
|
||||
}
|
||||
|
||||
return false // explicit for ie8 ( ._.)
|
||||
}
|
||||
|
||||
if ($.support.transition !== undefined) return // Prevent conflict with Twitter Bootstrap
|
||||
|
||||
// http://blog.alexmaccaw.com/css-transitions
|
||||
$.fn.emulateTransitionEnd = function (duration) {
|
||||
var called = false, $el = this
|
||||
$(this).one($.support.transition.end, function () { called = true })
|
||||
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
|
||||
setTimeout(callback, duration)
|
||||
return this
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$.support.transition = transitionEnd()
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue