From dc34411c265087747223a2312a658b7b2e721f0d Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 26 Oct 2016 15:19:02 +0300 Subject: [PATCH] Changes: * Carousel, Popover, Tooltip and Modal no longer store the timer in their prototype, but as a private variable * Tooltip and Popover improved, now the open method works better allowing their corresponding tooltip to also FADE IN * Tooltip and Popover are lighter as they export the getScroll() to utils.js file * Affix and ScrollSpy also uses the exported getScroll() * A small workaround to eliminate IIFE https://github.com/thednp/bootstrap.native/pull/80#issuecomment-256312687 * Documentation updates --- bower.json | 2 +- dist/bootstrap-native.js | 553 +++++++++++++++++------------------ dist/bootstrap-native.min.js | 6 +- index.html | 12 +- lib/affix-native.js | 45 ++- lib/alert-native.js | 10 +- lib/button-native.js | 16 +- lib/carousel-native.js | 85 +++--- lib/collapse-native.js | 32 +- lib/dropdown-native.js | 18 +- lib/modal-native.js | 24 +- lib/popover-native.js | 144 ++++----- lib/scrollspy-native.js | 24 +- lib/tab-native.js | 10 +- lib/tooltip-native.js | 124 ++++---- lib/utils.js | 11 +- package.json | 2 +- 17 files changed, 528 insertions(+), 590 deletions(-) diff --git a/bower.json b/bower.json index 94935cd8..fc3574cd 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bootstrap.native", - "version": "1.0.51", + "version": "1.1.0", "homepage": "http://thednp.github.io/bootstrap.native/", "authors": [ "dnp_theme" diff --git a/dist/bootstrap-native.js b/dist/bootstrap-native.js index 7752852d..09e5b1e6 100644 --- a/dist/bootstrap-native.js +++ b/dist/bootstrap-native.js @@ -1,4 +1,4 @@ -// Native Javascript for Bootstrap 3 v1.0.51 | © dnp_theme | MIT-License +// Native Javascript for Bootstrap 3 v1.1.0 | © dnp_theme | MIT-License (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD support: @@ -45,6 +45,7 @@ } return false; }, + // tooltip / popover stuff isElementInViewport = function(t) { // check if this.tooltip is in viewport var r = t.getBoundingClientRect(); return ( @@ -53,7 +54,15 @@ r.bottom <= (window.innerHeight || document.documentElement.clientHeight) && r.right <= (window.innerWidth || document.documentElement.clientWidth) ) - }; + }, + getScroll = function() { // also Affix and scrollSpy uses it + return { + y : window.pageYOffset || document.documentElement.scrollTop, + x : window.pageXOffset || document.documentElement.scrollLeft + } + }, + mouseHover = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ], + tipPositions = /\b(top|bottom|left|top)+/; // Native Javascript for Bootstrap 3 | Affix // by dnp_theme @@ -74,24 +83,21 @@ this.processOffsetTop = function () { if ( this.options.target !== null ) { - return this.options.target.getBoundingClientRect().top + this.scrollOffset(); + return this.options.target.getBoundingClientRect().top + getScroll().y; } else if ( this.options.offsetTop !== null ) { return this.options.offsetTop } - } + }; this.processOffsetBottom = function () { if ( this.options.offsetBottom !== null ) { var maxScroll = this.getMaxScroll(); - return maxScroll - this.element.offsetHeight - this.options.offsetBottom + return maxScroll - this.element.offsetHeight - this.options.offsetBottom; } - } + }; this.checkPosition = function () { - this.getPinOffsetTop = this.processOffsetTop - this.getPinOffsetBottom = this.processOffsetBottom - } - this.scrollOffset = function () { - return window.pageYOffset || document.documentElement.scrollTop - } + this.getPinOffsetTop = this.processOffsetTop; + this.getPinOffsetBottom = this.processOffsetBottom; + }; this.pinTop = function () { if ( !/\baffix/.test(this.element.className) ) { this.element.className += ' affix'; @@ -117,15 +123,15 @@ } } this.updatePin = function () { - if (this.affixed === false && (parseInt(this.processOffsetTop(),0) - parseInt(this.scrollOffset(),0) < 0)) { + if (this.affixed === false && (parseInt(this.processOffsetTop(),0) - parseInt(getScroll().y,0) < 0)) { this.pinTop(); - } else if (this.affixed === true && (parseInt(this.scrollOffset(),0) <= parseInt(this.getPinOffsetTop(),0) )) { + } else if (this.affixed === true && (parseInt(getScroll().y,0) <= parseInt(this.getPinOffsetTop(),0) )) { this.unPinTop() } - if (this.affixedBottom === false && (parseInt(this.processOffsetBottom(),0) - parseInt(this.scrollOffset(),0) < 0)) { + if (this.affixedBottom === false && (parseInt(this.processOffsetBottom(),0) - parseInt(getScroll().y,0) < 0)) { this.pinBottom(); - } else if (this.affixedBottom === true && (parseInt(this.scrollOffset(),0) <= parseInt(this.getPinOffsetBottom(),0) )) { + } else if (this.affixedBottom === true && (parseInt(getScroll().y,0) <= parseInt(this.getPinOffsetBottom(),0) )) { this.unPinBottom() } } @@ -167,21 +173,21 @@ this.resizeEvent() }; - (function () { + // (function () { // AFFIX DATA API // ================= - var Affixes = document.querySelectorAll('[data-spy="affix"]'), i = 0, afl = Affixes.length; - for (i;i -1 ) { return; } else { self.close(); } - } + }; this.toggle = function(e) { if (/\bopen/.test(this.menu.parentNode.className)) { this.close(); @@ -728,26 +731,26 @@ this.menu.setAttribute('aria-expanded',true); document.addEventListener('keydown', this.key, false); } - } + }; this.key = function(e) { if (e.which == 27) {self.close();} - } + }; this.close = function() { self.menu.parentNode.className = self.menu.parentNode.className.replace(/\bopen/,''); self.menu.setAttribute('aria-expanded',false); - } + }; this.menu.setAttribute('tabindex', '0'); // Fix onblur on Chrome | Safari document.addEventListener('click', this.handle, false); }; - (function () { + // (function () { // DROPDOWN DATA API // ================= - var Dropdowns = document.querySelectorAll('[data-toggle=dropdown]'), i = 0, ddl = Dropdowns.length; - for (i;i=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)},n=function(t,e){if(e=e||{},this.element="object"==typeof t?t:document.querySelector(t),this.options={},this.options.target=e.target?"object"==typeof e.target?e.target:document.querySelector(e.target):null,this.options.offsetTop=e.offsetTop&&e.offsetTop?"function"===e.offsetTop?e.offsetTop():parseInt(e.offsetTop,0):0,this.options.offsetBottom=e.offsetBottom&&e.offsetBottom?"function"===e.offsetBottom?e.offsetBottom():parseInt(e.offsetBottom,0):null,this.element||this.options.target||this.options.offsetTop||this.options.offsetBottom){var o=this;this.processOffsetTop=function(){return null!==this.options.target?this.options.target.getBoundingClientRect().top+this.scrollOffset():null!==this.options.offsetTop?this.options.offsetTop:void 0},this.processOffsetBottom=function(){if(null!==this.options.offsetBottom){var t=this.getMaxScroll();return t-this.element.offsetHeight-this.options.offsetBottom}},this.checkPosition=function(){this.getPinOffsetTop=this.processOffsetTop,this.getPinOffsetBottom=this.processOffsetBottom},this.scrollOffset=function(){return window.pageYOffset||document.documentElement.scrollTop},this.pinTop=function(){/\baffix/.test(this.element.className)||(this.element.className+=" affix",this.affixed=!0)},this.unPinTop=function(){/\baffix/.test(this.element.className)&&(this.element.className=this.element.className.replace(" affix",""),this.affixed=!1)},this.pinBottom=function(){/\baffix-bottom/.test(this.element.className)||(this.element.className+=" affix-bottom",this.affixedBottom=!0)},this.unPinBottom=function(){/\baffix-bottom/.test(this.element.className)&&(this.element.className=this.element.className.replace(" affix-bottom",""),this.affixedBottom=!1)},this.updatePin=function(){this.affixed===!1&&parseInt(this.processOffsetTop(),0)-parseInt(this.scrollOffset(),0)<0?this.pinTop():this.affixed===!0&&parseInt(this.scrollOffset(),0)<=parseInt(this.getPinOffsetTop(),0)&&this.unPinTop(),this.affixedBottom===!1&&parseInt(this.processOffsetBottom(),0)-parseInt(this.scrollOffset(),0)<0?this.pinBottom():this.affixedBottom===!0&&parseInt(this.scrollOffset(),0)<=parseInt(this.getPinOffsetBottom(),0)&&this.unPinBottom()},this.updateAffix=function(){this.unPinTop(),this.unPinBottom(),this.checkPosition(),this.updatePin()},this.getMaxScroll=function(){return Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight)},this.scrollEvent=function(){window.addEventListener("scroll",function(){o.updatePin()},!1)},this.resizeEvent=function(){var t=i&&i<10?500:50;window.addEventListener("resize",function(){setTimeout(function(){o.updateAffix()},t)},!1)},this.affixed=!1,this.affixedBottom=!1,this.getPinOffsetTop=0,this.getPinOffsetBottom=null,this.checkPosition(),this.updateAffix(),this.scrollEvent(),this.resizeEvent()}};!function(){var t=document.querySelectorAll('[data-spy="affix"]'),e=0,i=t.length;for(e;ea.index||0===i&&a.index===a.total-1)&&(a.direction="right"),a._slideTo(a.index,t)},this.controlsHandler=function(t){var e=t.currentTarget||t.srcElement;e===a.next?(a.index++,a.direction="left",a.index==a.total-1?a.index=a.total-1:a.index==a.total&&(a.index=0)):e===a.prev&&(a.index--,a.direction="right",0==a.index?a.index=0:a.index<0&&(a.index=a.total-1)),a._slideTo(a.index,t)},this.keyHandler=function(t){switch(t.which){case 39:t.preventDefault(),a.index++,a.direction="left",a.index==a.total-1?a.index=a.total-1:a.index==a.total&&(a.index=0);break;case 37:t.preventDefault(),a.index--,a.direction="right",0==a.index?a.index=0:a.index<0&&(a.index=a.total-1);break;default:return}a._slideTo(a.index,t)},this.options.interval!==!1&&this.cycle(),this.options&&"hover"===this.options.pause&&this.options.interval!==!1&&this.pause(),this._addEventListeners(),this.next&&this.next.addEventListener("click",function(t){t.preventDefault()},!1),this.prev&&this.prev.addEventListener("click",function(t){t.preventDefault()},!1)};!function(){var t=document.querySelectorAll('[data-ride="carousel"]'),e=0,i=t.length;for(e;e-1)return;e.close()}},this.toggle=function(t){/\bopen/.test(this.menu.parentNode.className)?(this.close(),document.removeEventListener("keydown",this.key,!1)):(this.menu.parentNode.className+=" open",this.menu.setAttribute("aria-expanded",!0),document.addEventListener("keydown",this.key,!1))},this.key=function(t){27==t.which&&e.close()},this.close=function(){e.menu.parentNode.className=e.menu.parentNode.className.replace(/\bopen/,""),e.menu.setAttribute("aria-expanded",!1)},this.menu.setAttribute("tabindex","0"),document.addEventListener("click",this.handle,!1)};!function(){var t=document.querySelectorAll("[data-toggle=dropdown]"),e=0,i=t.length;for(e;edocument.documentElement.clientHeight,n.scrollbarWidth=d()};this.open=function(){var i=document.querySelector(".modal.in");i&&(clearTimeout(i.getAttribute("data-timer")),e(i,"in"),setTimeout(function(){i.setAttribute("aria-hidden",!0),i.style.display=""},this.options.duration/2)),this.options.backdrop?this.createOverlay():this.overlay=null,this.overlay&&setTimeout(function(){t(n.overlay,"in")},0),clearTimeout(n.modal.getAttribute("data-timer")),this.timer=setTimeout(function(){n.modal.style.display="block",c(),n.adjustDialog(),r(),n.resize(),n.dismiss(),n.keydown(),t(document.body,"modal-open"),t(n.modal,"in"),n.modal.setAttribute("aria-hidden",!1)},this.options.duration/2),this.modal.setAttribute("data-timer",this.timer)},this.close=function(){this.overlay&&e(this.overlay,"in"),e(this.modal,"in"),this.modal.setAttribute("aria-hidden",!0),clearTimeout(this.modal.getAttribute("data-timer")),this.timer=setTimeout(function(){e(document.body,"modal-open"),n.resize(),n.resetAdjustments(),l(),n.dismiss(),n.keydown(),n.modal.style.display=""},this.options.duration/2),this.modal.setAttribute("data-timer",this.timer),setTimeout(function(){document.querySelector(".modal.in")||n.removeOverlay()},this.options.duration)},this.content=function(t){return this.modal.querySelector(".modal-content").innerHTML=t},this.createOverlay=function(){var t=document.createElement("div"),e=document.querySelector(".modal-backdrop");t.setAttribute("class","modal-backdrop fade"),e?this.overlay=e:(this.overlay=t,document.body.appendChild(t))},this.removeOverlay=function(){var t=document.querySelector(".modal-backdrop");null!==t&&void 0!==t&&document.body.removeChild(t)},this.keydown=function(){function t(t){n.options.keyboard&&27==t.which&&n.close()}/\bin/.test(this.modal.className)?document.removeEventListener("keydown",t,!1):document.addEventListener("keydown",t,!1)},this.trigger=function(){var t=document.querySelectorAll('[data-toggle="modal"]'),e=t.length,i=0;for(i;i×':e.innerHTML=this.title,this.popover.appendChild(e)}var i=document.createElement("div");i.setAttribute("class","popover-content"),this.popover.appendChild(t),this.popover.appendChild(i),this.options.dismiss&&null===this.title?i.innerHTML=this.content+'':i.innerHTML=this.content}else{var o=document.createElement("div");o.innerHTML=this.options.template,this.popover.innerHTML=o.firstChild.innerHTML}this.options.container.appendChild(this.popover),this.popover.style.display="block"},this.stylePopover=function(t){var e=this.link.getBoundingClientRect(),i=t||this.options.placement,o="true"===this.options.animation?"fade":"";this.popover.setAttribute("class","popover "+i+" "+o);var s={w:e.right-e.left,h:e.bottom-e.top},n={w:this.popover.offsetWidth,h:this.popover.offsetHeight},a=this.getScroll().y,r=this.getScroll().x;/top/.test(i)?(this.popover.style.top=e.top+a-n.h+"px",this.popover.style.left=e.left+r-n.w/2+s.w/2+"px"):/bottom/.test(i)?(this.popover.style.top=e.top+a+s.h+"px",this.popover.style.left=e.left+r-n.w/2+s.w/2+"px"):/left/.test(i)?(this.popover.style.top=e.top+a-n.h/2+s.h/2+"px",this.popover.style.left=e.left+r-n.w+"px"):/right/.test(i)&&(this.popover.style.top=e.top+a-n.h/2+s.h/2+"px",this.popover.style.left=e.left+r+s.w+"px")},this.updatePopover=function(){var t=null;t=s(this.popover)?this.options.placement:this.updatePlacement(),this.stylePopover(t),this.popover.className+=" in"},this.updatePlacement=function(){var t=this.options.placement;return/top/.test(t)?"bottom":/bottom/.test(t)?"top":/left/.test(t)?"right":/right/.test(t)?"left":void 0},this.getScroll=function(){return{y:window.pageYOffset||document.documentElement.scrollTop,x:window.pageXOffset||document.documentElement.scrollLeft}},"hover"===this.options.trigger?(this.link.addEventListener(n[0],this.open,!1),this.options.dismiss||this.link.addEventListener(n[1],this.close,!1)):"click"===this.options.trigger?(this.link.addEventListener("click",this.toggle,!1),this.options.dismiss||this.link.addEventListener("blur",this.close,!1)):"focus"===this.options.trigger&&(this.link.addEventListener("focus",this.toggle,!1),this.options.dismiss||this.link.addEventListener("blur",this.close,!1)),this.options.dismiss&&document.addEventListener("click",this.dismiss,!1),i&&i<9||window.addEventListener("resize",this.close,!1)}};!function(){var t=document.querySelectorAll("[data-toggle=popover]"),e=0,i=t.length;for(e;ethis.scrollOffset()&&this.scrollOffset()>=this.topEdge?this.activate():this.active===!0&&this.bottomEdge<=this.scrollOffset()&&this.scrollOffset()-1&&(this.checkEdges(),this.refresh(),this.scrollEvent(),i&&i<9||this.resizeEvent()))};!function(){var t=document.querySelectorAll('[data-spy="scroll"]'),e=0,i=t.length;for(e;e1?t[t.length-1]:void 0:t[0]},this.getActiveContent=function(){var t=this.getActiveTab().getElementsByTagName("A")[0].getAttribute("href").replace("#","");return t&&document.getElementById(t)},this.tab.addEventListener("click",this.handle,!1)};!function(){var t=document.querySelectorAll("[data-toggle='tab'], [data-toggle='pill']"),e=t.length,i=0;for(i;i=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)},n=function(){return{y:window.pageYOffset||document.documentElement.scrollTop,x:window.pageXOffset||document.documentElement.scrollLeft}},a=("onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"]),r=/\b(top|bottom|left|top)+/,l=function(t,e){if(e=e||{},this.element="object"==typeof t?t:document.querySelector(t),this.options={},this.options.target=e.target?"object"==typeof e.target?e.target:document.querySelector(e.target):null,this.options.offsetTop=e.offsetTop&&e.offsetTop?"function"===e.offsetTop?e.offsetTop():parseInt(e.offsetTop,0):0,this.options.offsetBottom=e.offsetBottom&&e.offsetBottom?"function"===e.offsetBottom?e.offsetBottom():parseInt(e.offsetBottom,0):null,this.element||this.options.target||this.options.offsetTop||this.options.offsetBottom){var o=this;this.processOffsetTop=function(){return null!==this.options.target?this.options.target.getBoundingClientRect().top+n().y:null!==this.options.offsetTop?this.options.offsetTop:void 0},this.processOffsetBottom=function(){if(null!==this.options.offsetBottom){var t=this.getMaxScroll();return t-this.element.offsetHeight-this.options.offsetBottom}},this.checkPosition=function(){this.getPinOffsetTop=this.processOffsetTop,this.getPinOffsetBottom=this.processOffsetBottom},this.pinTop=function(){/\baffix/.test(this.element.className)||(this.element.className+=" affix",this.affixed=!0)},this.unPinTop=function(){/\baffix/.test(this.element.className)&&(this.element.className=this.element.className.replace(" affix",""),this.affixed=!1)},this.pinBottom=function(){/\baffix-bottom/.test(this.element.className)||(this.element.className+=" affix-bottom",this.affixedBottom=!0)},this.unPinBottom=function(){/\baffix-bottom/.test(this.element.className)&&(this.element.className=this.element.className.replace(" affix-bottom",""),this.affixedBottom=!1)},this.updatePin=function(){this.affixed===!1&&parseInt(this.processOffsetTop(),0)-parseInt(n().y,0)<0?this.pinTop():this.affixed===!0&&parseInt(n().y,0)<=parseInt(this.getPinOffsetTop(),0)&&this.unPinTop(),this.affixedBottom===!1&&parseInt(this.processOffsetBottom(),0)-parseInt(n().y,0)<0?this.pinBottom():this.affixedBottom===!0&&parseInt(n().y,0)<=parseInt(this.getPinOffsetBottom(),0)&&this.unPinBottom()},this.updateAffix=function(){this.unPinTop(),this.unPinBottom(),this.checkPosition(),this.updatePin()},this.getMaxScroll=function(){return Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight)},this.scrollEvent=function(){window.addEventListener("scroll",function(){o.updatePin()},!1)},this.resizeEvent=function(){var t=i&&i<10?500:50;window.addEventListener("resize",function(){setTimeout(function(){o.updateAffix()},t)},!1)},this.affixed=!1,this.affixedBottom=!1,this.getPinOffsetTop=0,this.getPinOffsetBottom=null,this.checkPosition(),this.updateAffix(),this.scrollEvent(),this.resizeEvent()}},d=document.querySelectorAll('[data-spy="affix"]'),h=0,c=d.length;hl.index||0===i&&l.index===l.total-1)&&(l.direction="right"),l._slideTo(l.index,t)},this.controlsHandler=function(t){var e=t.currentTarget||t.srcElement;e===l.next?(l.index++,l.direction="left",l.index==l.total-1?l.index=l.total-1:l.index==l.total&&(l.index=0)):e===l.prev&&(l.index--,l.direction="right",0==l.index?l.index=0:l.index<0&&(l.index=l.total-1)),l._slideTo(l.index,t)},this.keyHandler=function(t){switch(t.which){case 39:t.preventDefault(),l.index++,l.direction="left",l.index==l.total-1?l.index=l.total-1:l.index==l.total&&(l.index=0);break;case 37:t.preventDefault(),l.index--,l.direction="right",0==l.index?l.index=0:l.index<0&&(l.index=l.total-1);break;default:return}l._slideTo(l.index,t)},this.options.interval!==!1&&this.cycle(),this.options&&"hover"===this.options.pause&&this.options.interval!==!1&&this.pause(),this._addEventListeners(),this.next&&this.next.addEventListener("click",function(t){t.preventDefault()},!1),this.prev&&this.prev.addEventListener("click",function(t){t.preventDefault()},!1)}),N=document.querySelectorAll('[data-ride="carousel"]'),L=0,S=N.length;L-1)return;e.close()}},this.toggle=function(t){/\bopen/.test(this.menu.parentNode.className)?(this.close(),document.removeEventListener("keydown",this.key,!1)):(this.menu.parentNode.className+=" open",this.menu.setAttribute("aria-expanded",!0),document.addEventListener("keydown",this.key,!1))},this.key=function(t){27==t.which&&e.close()},this.close=function(){e.menu.parentNode.className=e.menu.parentNode.className.replace(/\bopen/,""),e.menu.setAttribute("aria-expanded",!1)},this.menu.setAttribute("tabindex","0"),document.addEventListener("click",this.handle,!1)},M=document.querySelectorAll("[data-toggle=dropdown]"),_=0,z=M.length;_document.documentElement.clientHeight,n.scrollbarWidth=h()};this.open=function(){var i=document.querySelector(".modal.in");i&&(clearTimeout(i.getAttribute("data-timer")),e(i,"in"),setTimeout(function(){i.setAttribute("aria-hidden",!0),i.style.display=""},this.options.duration/2)),this.options.backdrop?this.createOverlay():this.overlay=null,this.overlay&&setTimeout(function(){t(n.overlay,"in")},0),clearTimeout(a),a=setTimeout(function(){n.modal.style.display="block",c(),n.adjustDialog(),l(),n.resize(),n.dismiss(),n.keydown(),t(document.body,"modal-open"),t(n.modal,"in"),n.modal.setAttribute("aria-hidden",!1)},this.options.duration/2)},this.close=function(){this.overlay&&e(this.overlay,"in"),e(this.modal,"in"),this.modal.setAttribute("aria-hidden",!0),clearTimeout(a),a=setTimeout(function(){e(document.body,"modal-open"),n.resize(),n.resetAdjustments(),d(),n.dismiss(),n.keydown(),n.modal.style.display=""},this.options.duration/2),setTimeout(function(){document.querySelector(".modal.in")||n.removeOverlay()},this.options.duration)},this.content=function(t){return this.modal.querySelector(".modal-content").innerHTML=t},this.createOverlay=function(){var t=document.createElement("div"),e=document.querySelector(".modal-backdrop");t.setAttribute("class","modal-backdrop fade"),e?this.overlay=e:(this.overlay=t,document.body.appendChild(t))},this.removeOverlay=function(){var t=document.querySelector(".modal-backdrop");null!==t&&void 0!==t&&document.body.removeChild(t)},this.keydown=function(){function t(t){n.options.keyboard&&27==t.which&&n.close()}/\bin/.test(this.modal.className)?document.removeEventListener("keydown",t,!1):document.addEventListener("keydown",t,!1)},this.trigger=function(){var t=document.querySelectorAll('[data-toggle="modal"]'),e=t.length,i=0;for(i;i×':e.innerHTML=this.title,this.popover.appendChild(e)}var i=document.createElement("div");i.setAttribute("class","popover-content"),this.popover.appendChild(t),this.popover.appendChild(i),this.options.dismiss&&null===this.title?i.innerHTML=this.content+'':i.innerHTML=this.content}else{var o=document.createElement("div");o.innerHTML=this.options.template,this.popover.innerHTML=o.firstChild.innerHTML}this.options.container.appendChild(this.popover),this.popover.style.display="block",this.popover.setAttribute("class","popover "+c+" "+this.options.animation)},this.showPopover=function(){!/\bin/.test(this.popover.className)&&t(this.popover,"in")},this.stylePopover=function(){var t=this.link.getBoundingClientRect(),e=n(),i={w:t.right-t.left,h:t.bottom-t.top},o={w:this.popover.offsetWidth,h:this.popover.offsetHeight};/top/.test(c)?(this.popover.style.top=t.top+e.y-o.h+"px",this.popover.style.left=t.left+e.x-o.w/2+i.w/2+"px"):/bottom/.test(c)?(this.popover.style.top=t.top+e.y+i.h+"px",this.popover.style.left=t.left+e.x-o.w/2+i.w/2+"px"):/left/.test(c)?(this.popover.style.top=t.top+e.y-o.h/2+i.h/2+"px",this.popover.style.left=t.left+e.x-o.w+"px"):/right/.test(c)&&(this.popover.style.top=t.top+e.y-o.h/2+i.h/2+"px",this.popover.style.left=t.left+e.x+i.w+"px"),this.popover.className.indexOf(c)===-1&&(this.popover.className=this.popover.className.replace(r,c))},this.updatePopover=function(){this.stylePopover(),s(this.popover)||(c=this.updatePlacement(),this.stylePopover())},this.updatePlacement=function(){return/top/.test(c)?"bottom":/bottom/.test(c)?"top":/left/.test(c)?"right":/right/.test(c)?"left":void 0},"hover"===this.options.trigger?(this.link.addEventListener(a[0],this.open,!1),this.options.dismiss||this.link.addEventListener(a[1],this.close,!1)):"click"===this.options.trigger?(this.link.addEventListener("click",this.toggle,!1),this.options.dismiss||this.link.addEventListener("blur",this.close,!1)):"focus"===this.options.trigger&&(this.link.addEventListener("focus",this.toggle,!1),this.options.dismiss||this.link.addEventListener("blur",this.close,!1)),this.options.dismiss&&document.addEventListener("click",this.dismiss,!1),i&&i<9||window.addEventListener("resize",this.close,!1)}},$=document.querySelectorAll("[data-toggle=popover]"),F=0,X=$.length;Fthis.scrollOffset()&&this.scrollOffset()>=this.topEdge?this.activate():this.active===!0&&this.bottomEdge<=this.scrollOffset()&&this.scrollOffset()-1&&(this.checkEdges(),this.refresh(),this.scrollEvent(),i&&i<9||this.resizeEvent()))},K=document.querySelectorAll('[data-spy="scroll"]'),Q=0,V=K.length;Q1?t[t.length-1]:void 0:t[0]},this.getActiveContent=function(){var t=this.getActiveTab().getElementsByTagName("A")[0].getAttribute("href").replace("#","");return t&&document.getElementById(t)},this.tab.addEventListener("click",this.handle,!1)},at=document.querySelectorAll("[data-toggle='tab'], [data-toggle='pill']"),rt=0,lt=at.length;rtUse

Load from CDN

Thanks to jsdelivr and cdnjs we have CDN links, so drop one of these lines before your ending </body> tag. Latest releases come here on jsdelivr and here on cdnjs.

<!-- jsdelivr repo -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.1.0/bootstrap-native.min.js"></script>
 <!-- or cdnjs repo -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/1.0.2/bootstrap-native.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/1.1.0/bootstrap-native.min.js"></script>

As most of the scripts manipulate the DOM when ready, there is no need to include a document.ready statement or link the script(s) in the <head>. That's your first performance tip if you are new around here.

@@ -185,6 +185,7 @@

npm, Bower, RequireJS, CommonJS

# Via NPM: $ npm install --save bootstrap.native +

You can also create custom builds, check the README for more info.

Additional Styling

Since we are not using jQuery to do all the animations, we only need to enable the CSS3 transitions. Luckily, we only need one line, for Collapse component, so copy this line in your application CSS files. Also the dismissible Popover feature require some styling for the closing button.

@@ -316,8 +317,8 @@

Additional Note

Dropdown

-

Dropdown opens the dropdown-menu on click and closes it on click/blur after a 200ms timeout, to allow the click event on it's menu items, including external links. Dropdown doesn't cover the original methods or events, but will properly handle all events, especially blur, even for later added dropdown elements.

-

Above all, the script will also allow users to dismiss the dropdown by pressing the Esc button. The script handles nesting as well.

+

Dropdown opens the dropdown-menu on click and closes it on click/blur, but handles the click event on it's menu items, including external links. Dropdown doesn't cover the original methods or events, but will properly handle all events, especially blur, even for later added dropdown elements.

+

Above all, the script will also allow users to dismiss the dropdown by pressing the Esc button. The script also handles nesting dropdowns and forms inside the dropdown-menu.

@@ -1044,9 +1045,8 @@

Navigation

- + - diff --git a/lib/affix-native.js b/lib/affix-native.js index 9698d3f3..a5a15e27 100644 --- a/lib/affix-native.js +++ b/lib/affix-native.js @@ -17,24 +17,21 @@ var Affix = function(element,options) { this.processOffsetTop = function () { if ( this.options.target !== null ) { - return this.options.target.getBoundingClientRect().top + this.scrollOffset(); + return this.options.target.getBoundingClientRect().top + getScroll().y; } else if ( this.options.offsetTop !== null ) { return this.options.offsetTop } - } + }; this.processOffsetBottom = function () { if ( this.options.offsetBottom !== null ) { var maxScroll = this.getMaxScroll(); - return maxScroll - this.element.offsetHeight - this.options.offsetBottom + return maxScroll - this.element.offsetHeight - this.options.offsetBottom; } - } + }; this.checkPosition = function () { - this.getPinOffsetTop = this.processOffsetTop - this.getPinOffsetBottom = this.processOffsetBottom - } - this.scrollOffset = function () { - return window.pageYOffset || document.documentElement.scrollTop - } + this.getPinOffsetTop = this.processOffsetTop; + this.getPinOffsetBottom = this.processOffsetBottom; + }; this.pinTop = function () { if ( !/\baffix/.test(this.element.className) ) { this.element.className += ' affix'; @@ -60,15 +57,15 @@ var Affix = function(element,options) { } } this.updatePin = function () { - if (this.affixed === false && (parseInt(this.processOffsetTop(),0) - parseInt(this.scrollOffset(),0) < 0)) { + if (this.affixed === false && (parseInt(this.processOffsetTop(),0) - parseInt(getScroll().y,0) < 0)) { this.pinTop(); - } else if (this.affixed === true && (parseInt(this.scrollOffset(),0) <= parseInt(this.getPinOffsetTop(),0) )) { + } else if (this.affixed === true && (parseInt(getScroll().y,0) <= parseInt(this.getPinOffsetTop(),0) )) { this.unPinTop() } - if (this.affixedBottom === false && (parseInt(this.processOffsetBottom(),0) - parseInt(this.scrollOffset(),0) < 0)) { + if (this.affixedBottom === false && (parseInt(this.processOffsetBottom(),0) - parseInt(getScroll().y,0) < 0)) { this.pinBottom(); - } else if (this.affixedBottom === true && (parseInt(this.scrollOffset(),0) <= parseInt(this.getPinOffsetBottom(),0) )) { + } else if (this.affixedBottom === true && (parseInt(getScroll().y,0) <= parseInt(this.getPinOffsetBottom(),0) )) { this.unPinBottom() } } @@ -110,18 +107,18 @@ var Affix = function(element,options) { this.resizeEvent() }; -(function () { +// (function () { // AFFIX DATA API // ================= - var Affixes = document.querySelectorAll('[data-spy="affix"]'), i = 0, afl = Affixes.length; - for (i;i -1 ) { return; } else { self.close(); } - } + }; this.toggle = function(e) { if (/\bopen/.test(this.menu.parentNode.className)) { this.close(); @@ -28,23 +28,23 @@ var Dropdown = function( element) { this.menu.setAttribute('aria-expanded',true); document.addEventListener('keydown', this.key, false); } - } + }; this.key = function(e) { if (e.which == 27) {self.close();} - } + }; this.close = function() { self.menu.parentNode.className = self.menu.parentNode.className.replace(/\bopen/,''); self.menu.setAttribute('aria-expanded',false); - } + }; this.menu.setAttribute('tabindex', '0'); // Fix onblur on Chrome | Safari document.addEventListener('click', this.handle, false); }; -(function () { +// (function () { // DROPDOWN DATA API // ================= - var Dropdowns = document.querySelectorAll('[data-toggle=dropdown]'), i = 0, ddl = Dropdowns.length; - for (i;i