Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history 
* fixed issue Tooltip and Popover container option
* demo fixes and updates
  • Loading branch information
@thednp
thednp committed Feb 19, 2017
1 parent b34da07 commit b51811a
Show file tree
Hide file tree
Showing 14 changed files with 96 additions and 120 deletions.
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ $ bower install --save bootstrap.native

```html
<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.5/bootstrap-native.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.5/bootstrap-native.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.6/bootstrap-native.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/bootstrap-native.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/bootstrap-native.min.js"></script>
<!-- Using Bower -->
Expand All @@ -35,8 +35,8 @@ $ bower install --save bootstrap.native

```html
<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.5/bootstrap-native-v4.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.5/bootstrap-native-v4.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.6/bootstrap-native-v4.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/bootstrap-native-v4.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/bootstrap-native-v4.min.js"></script>
<!-- Using Bower -->
Expand Down Expand Up @@ -66,8 +66,8 @@ The components are developed with clean code mainly for modern browsers that nat

```html
<!-- Using one of the CDN repositories-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.5/polyfill.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.5/polyfill.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.6/polyfill.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/polyfill.min.js"></script>
<!-- Using a local assets folder -->
<script type="text/javascript" src="/assets/js/polyfill.min.js"></script>
<!-- Using Bower -->
Expand Down
55 changes: 6 additions & 49 deletions assets/css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,6 @@ h3:not(.popover-title) {
font-weight: bold;
letter-spacing: -2px;
}
.navbar-brand {
font-weight: bold;
letter-spacing: -1px;
}

hr.clearfix {clear: both; width: 100%; float: left}

Expand Down Expand Up @@ -110,38 +106,13 @@ p .btn, p .form-control {margin-bottom: 20px; vertical-align: top}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}

.navbar-default .navbar-brand { color: #286090 }
.navbar-inverse .navbar-brand { color: #fff }

.navbar-nav .open .dropdown-menu { left: auto; right:0 }

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover { background-color: #286090; color: #fff }
.navbar-collapse.collapsing {overflow-y: hidden}


/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}

.navbar-default {border:0; background:#fff}
.navbar-nav { float: none}
.navbar-nav { float: none }


/* CUSTOMIZE THE CAROUSEL
Expand Down Expand Up @@ -252,7 +223,9 @@ p .btn, p .form-control {margin-bottom: 20px; vertical-align: top}
#side-nav > .nav li.active.list11.additional > ul { height: 506px; height: calc(32px*11 + 2px*10 + 32px*5 + 2px*4); }

#side-nav > .nav li > a { z-index: 1; padding: 6px 10px; }
#side-nav > .nav li > ul { z-index: 0 }
#side-nav > .nav li > ul { z-index: 0 }

.tooltip b, .tooltip strong {color: #fff}

/* RESPONSIVE CSS
-------------------------------------------------- */
Expand All @@ -272,22 +245,6 @@ p .btn, p .form-control {margin-bottom: 20px; vertical-align: top}
#side-nav .nav.affix-bottom { top: auto; bottom: 100px }

/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 40px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}

/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
.navbar .navbar-nav {margin-right: 15px; float: right}


Expand Down
10 changes: 7 additions & 3 deletions dist/bootstrap-native-v4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
var firstChar = selector.charAt(0);
for ( ; element && element !== document; element = element[parentNode] ) {// Get closest match
if ( firstChar === '.') {// If selector is a class
if ( firstChar === '.' ) {// If selector is a class
if ( queryElement(selector,element[parentNode]) !== null && hasClass(element,selector.replace('.','')) ) { return element; }
} else if ( firstChar === '#' ) { // If selector is an ID
if ( element.id === selector.substr(1) ) { return element; }
Expand Down Expand Up @@ -1118,7 +1118,9 @@
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[dismissible] = options[dismissible] || dismissibleData === 'true' ? true : false;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;
this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, content
var self = this,
Expand Down Expand Up @@ -1501,7 +1503,9 @@
this[animation] = options[animation] && options[animation] !== fade ? options[animation] : animationData || fade;
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;
this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, event targets, title and constants
var self = this, timer = 0, placementSetting = this[placement], tooltip = null,
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native-v4.min.js
View file

Large diffs are not rendered by default.

12 changes: 8 additions & 4 deletions dist/bootstrap-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
var firstChar = selector.charAt(0);
for ( ; element && element !== document; element = element[parentNode] ) {// Get closest match
if ( firstChar === '.') {// If selector is a class
if ( firstChar === '.' ) {// If selector is a class
if ( queryElement(selector,element[parentNode]) !== null && hasClass(element,selector.replace('.','')) ) { return element; }
} else if ( firstChar === '#' ) { // If selector is an ID
if ( element.id === selector.substr(1) ) { return element; }
Expand Down Expand Up @@ -1281,8 +1281,10 @@
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[dismissible] = options[dismissible] || dismissibleData === 'true' ? true : false;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;

this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, content
var self = this,
titleString = element[getAttribute](dataTitle) || null,
Expand Down Expand Up @@ -1663,7 +1665,9 @@
this[animation] = options[animation] && options[animation] !== fade ? options[animation] : animationData || fade;
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;
this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, event targets, title and constants
var self = this, timer = 0, placementSetting = this[placement], tooltip = null,
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native.min.js
View file

Large diffs are not rendered by default.

80 changes: 38 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,51 +39,47 @@
<!-- Just use it for all browsers on production websites. -->

<!-- Native JavaScript for Bootstrap 3 Polyfill -->
<!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.5/polyfill.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.6/polyfill.min.js"></script> -->
<script src="./dist/polyfill.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">

<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="https://github.com/thednp/bootstrap.native/" data-toggle="tooltip" data-placement="right" class="navbar-brand" title="Native JavaScript for Bootstrap<br>The sweetest Vanilla JavaScript library for everyone">
Native <span class="hidden-xs hidden-sm">JavaScript</span><span class="hidden-lg hidden-md">JS</span> for Bootstrap<span class="hidden">Native JavaScript for Bootstrap</span>
</a>
</div>
<nav id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="v4.html">V4</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Github <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/thednp/bootstrap.native/">Fork</a></li>
<li><a href="https://github.com/thednp/bootstrap.native/archive/master.zip">Download</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Share <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/bootstrap.native/index.html" title="Share Native JavaScript for Bootstrap on Facebook">Facebook</a></li>
<li>
<a target="_blank"
href="https://twitter.com/home?status=Spread the word about #bootstrapnative by @dnp_theme and download here http://thednp.github.io/bootstrap.native/index.html"
title="Share Native JavaScript for Bootstrap on Twitter">Twitter</a>
</li>
<li><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/bootstrap.native/index.html" title="Share Native JavaScript for Bootstrap on Google+">Google+</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="https://github.com/thednp/bootstrap.native/" data-toggle="tooltip" data-placement="bottom" class="navbar-brand" title="<b>Native JavaScript for Bootstrap</b><br>The sweetest Vanilla JavaScript library for everyone">Native JavaScript for Bootstrap</a>
</div>
<nav id="bs-navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="v4.html">V4</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Github <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/thednp/bootstrap.native/">Fork</a></li>
<li><a href="https://github.com/thednp/bootstrap.native/archive/master.zip">Download</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Share <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/bootstrap.native/index.html" title="Share Native JavaScript for Bootstrap on Facebook">Facebook</a></li>
<li>
<a target="_blank"
href="https://twitter.com/home?status=Spread the word about #bootstrapnative by @dnp_theme and download here http://thednp.github.io/bootstrap.native/index.html"
title="Share Native JavaScript for Bootstrap on Twitter">Twitter</a>
</li>
<li><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/bootstrap.native/index.html" title="Share Native JavaScript for Bootstrap on Google+">Google+</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>

Expand Down Expand Up @@ -195,9 +191,9 @@ <h3>Load from CDN</h3>
and <a href="https://cdnjs.com/libraries/bootstrap.native">here</a> on cdnjs. Other <a href="https://www.google.com/search?q=bootstrap+native+cdn" target="_blank">CDN links</a> are also available.</p>

<pre><code class="language-markup">&lt;!-- jsdelivr repo --&gt;
&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.5/bootstrap-native.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.6/bootstrap-native.min.js"&gt;&lt;/script&gt;
&lt;!-- or cdnjs repo --&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.5/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.6/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>

<p>As most of the scripts manipulate the DOM when ready, there is no need to include a <code>document.ready</code> like statement or link the script(s) in the <code>&lt;head&gt;</code>. We don't do that
with native JavaScript unless required by a special ocasion.</p>
Expand Down Expand Up @@ -233,7 +229,7 @@ <h3>Browser support</h3>
<p>The Native JavaScript for Bootstrap comes with a dedicated <kbd>4Kb</kbd> polyfill we made called <em><a href="./assets/js/polyfill.js" target="_blank">polyfill.js</a></em> for IE8-IE11. Since most
of the legacy browsers don't cover support for the standardized <code>Event</code> the <em>polyfill.js</em> can be combined with HTML5 shims like so:</p>

<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.5/polyfill.min.js"> &lt;/script>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.6/polyfill.min.js"> &lt;/script>
&lt;!--[if lt IE 9]>
&lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">&lt;/script>
&lt;![endif]-->
Expand Down Expand Up @@ -3248,7 +3244,7 @@ <h3 class="visible-xs">Navigation</h3>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>

<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.5/bootstrap-native.min.js"></script> now we have CDN -->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.6/bootstrap-native.min.js"></script> now we have CDN -->
<!--<script type="text/javascript" src="./dist/bootstrap-native.min.js"></script>-->
<script type="text/javascript" src="./dist/bootstrap-native.js"></script>
<script type="text/javascript" src="./assets/js/scripts.js"></script>
Expand Down
6 changes: 4 additions & 2 deletions lib/V3/popover-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,10 @@ var Popover = function( element, options ) {
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[dismissible] = options[dismissible] || dismissibleData === 'true' ? true : false;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;

this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, content
var self = this,
titleString = element[getAttribute](dataTitle) || null,
Expand Down
4 changes: 3 additions & 1 deletion lib/V3/tooltip-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ var Tooltip = function( element,options ) {
this[animation] = options[animation] && options[animation] !== fade ? options[animation] : animationData || fade;
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;
this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, event targets, title and constants
var self = this, timer = 0, placementSetting = this[placement], tooltip = null,
Expand Down
2 changes: 1 addition & 1 deletion lib/V3/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ var globalObject = typeof global !== 'undefined' ? global : this||window,
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
var firstChar = selector.charAt(0);
for ( ; element && element !== document; element = element[parentNode] ) {// Get closest match
if ( firstChar === '.') {// If selector is a class
if ( firstChar === '.' ) {// If selector is a class
if ( queryElement(selector,element[parentNode]) !== null && hasClass(element,selector.replace('.','')) ) { return element; }
} else if ( firstChar === '#' ) { // If selector is an ID
if ( element.id === selector.substr(1) ) { return element; }
Expand Down
4 changes: 3 additions & 1 deletion lib/V4/popover-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ var Popover = function( element, options ) {
this[placement] = options[placement] ? options[placement] : placementData || top;
this[delay] = parseInt(options[delay] || delayData) || 200;
this[dismissible] = options[dismissible] || dismissibleData === 'true' ? true : false;
this[container] = queryElement(options[container]) || queryElement(containerData) || modal ? modal : body;
this[container] = queryElement(options[container]) ? queryElement(options[container])
: queryElement(containerData) ? queryElement(containerData)
: modal ? modal : body;

// bind, content
var self = this,
Expand Down
Loading

0 comments on commit b51811a

Please sign in to comment.