Skip to content

Commit

Permalink
No commit message
Browse files Browse the repository at this point in the history
  • Loading branch information
@thednp
thednp committed Apr 10, 2015
1 parent 29cb5ef commit 4a59897
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 75 deletions.
2 changes: 1 addition & 1 deletion assets/css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,4 +278,4 @@ body .syntaxhighlighter .container:after { content: none }
body .syntaxhighlighter .line.alt1,
body .syntaxhighlighter .line.alt2 { background: none !important }
.syntaxhighlighter code {background: none}
.syntaxhighlighter .container { padding:0; width: auto; min-width: 850px}
.syntaxhighlighter .container { padding:0; width: 100% !important}
81 changes: 49 additions & 32 deletions dist/bootstrap-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,45 +18,54 @@
this.options.duration = document.documentElement.classList.contains('ie') ? 0 : this.duration;

this.dialog = this.modal.querySelector('.modal-dialog');
this.timer = 0;

if ( this.options.content !== undefined ) {
this.content( this.options.content );
}

this.init()
}

Modal.prototype.init = function() {
if ( this.options.content && this.options.content !== undefined ) {
this.content( this.options.content );
}
this.resize();
this.dismiss();
this.keydown();
this.trigger();
}
this.trigger();
}

Modal.prototype.open = function() {
this._open();
}

Modal.prototype.close = function() {
this._close();
}

Modal.prototype._open = function() {
var self = this;

document.body.classList.add('modal-open');
this.modal.style.display = 'block';

if ( this.options.backdrop ) {
this.createOverlay();
} else { this.overlay = null }

} else { this.overlay = null }

document.body.classList.add('modal-open');
this.modal.style.display = 'block';

setTimeout(function() {
clearTimeout(self.modal.getAttribute('data-timer'));
this.timer = setTimeout( function() {

if ( self.overlay !== null ) {
self._resize();
self.overlay.classList.add('in');
}
self.modal.classList.add('in');
if ( self.overlay !== null ) { self._resize(); self.overlay.classList.add('in'); }
self.modal.setAttribute('aria-hidden', false);
}, self.options.duration/2);
this.modal.setAttribute('data-timer',self.timer);

this.opened = true;
}

Modal.prototype.close = function() {
this._close();
}

Modal.prototype._close = function() {
var self = this;

Expand All @@ -66,10 +75,13 @@
if ( this.overlay ) this.overlay.classList.remove('in');
document.body.classList.remove('modal-open');

setTimeout(function() {
clearTimeout(self.modal.getAttribute('data-timer'));
this.timer = setTimeout( function() {
self.modal.style.display = 'none';
if ( self.overlay ) self.removeOverlay();
}, self.options.duration);
self.removeOverlay();
}, self.options.duration/2);
this.modal.setAttribute('data-timer',self.timer);

this.opened = false;
}

Expand All @@ -78,17 +90,21 @@
}

Modal.prototype.createOverlay = function() {
if (this.overlay === undefined || this.overlay === null ) {
var backdrop = document.createElement('div');
backdrop.setAttribute('class','modal-backdrop fade');
var backdrop = document.createElement('div'), overlay = document.querySelector('.modal-backdrop');
backdrop.setAttribute('class','modal-backdrop fade');

if ( overlay ) {
this.overlay = overlay;
} else {
this.overlay = backdrop;
document.body.appendChild(backdrop);
}
document.body.appendChild(backdrop);
}
}

Modal.prototype.removeOverlay = function() {
if ( this.overlay === document.querySelector('.modal-backdrop') ) {
document.body.removeChild(this.overlay)
var overlay = document.querySelector('.modal-backdrop');
if ( overlay !== null && overlay !== undefined ) {
document.body.removeChild(overlay)
}
}

Expand Down Expand Up @@ -117,7 +133,8 @@
}

Modal.prototype._resize = function() {
var self = this, overlay = this.overlay||document.querySelector('.modal-backdrop'), dim = { w: document.documentElement.clientWidth + 'px', h: document.documentElement.clientHeight + 'px' };
var self = this, overlay = this.overlay||document.querySelector('.modal-backdrop'),
dim = { w: document.documentElement.clientWidth + 'px', h: document.documentElement.clientHeight + 'px' };
setTimeout(function() {
if ( overlay !== null && overlay.classList.contains('in') ) {
overlay.style.height = dim.h; overlay.style.width = dim.w
Expand All @@ -138,17 +155,17 @@
var self = this;
this.modal.addEventListener('click', function(e){
if ( e.target.parentNode.getAttribute('data-dismiss') === 'modal' || e.target.getAttribute('data-dismiss') === 'modal' || e.target === self.modal ) {
self.close()
e.preventDefault(); self.close()
} else { e.stopPropagation(); e.preventDefault(); }
})
}

var Modals = document.querySelectorAll('.modal');
[].forEach.call(Modals,function(modal,idx) {
var options = {};
options.keyboard = modal.getAttribute('data-keyboard') && modal.getAttribute('data-keyboard');
options.backdrop = modal.getAttribute('data-backdrop') && modal.getAttribute('data-backdrop');
options.duration = modal.getAttribute('data-duration') && modal.getAttribute('data-duration');
options.keyboard = modal.getAttribute('data-keyboard');
options.backdrop = modal.getAttribute('data-backdrop');
options.duration = modal.getAttribute('data-duration');
return new Modal(modal,options)
});

Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native.min.js
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<link href="./assets/css/bootstrap.min.css" rel="stylesheet">
<!--<![endif]-->
<!--[if gte IE 9]><!-->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!--<![endif]-->

<!-- Custom styles for this template -->
Expand Down Expand Up @@ -153,7 +153,7 @@ <h2>Use</h2>
<h3>Load from CDN</h3>
<p>Thanks to <a href="http://www.jsdelivr.com/">jsdelivr</a> we have a CDN link, so drop this line before your ending <code>&lt;/body></code> tag. Latest releases <a href="http://www.jsdelivr.com/#!bootstrap.native">come here</a>.</p>
<pre><span class="brush: xml; ruler: true; toolbar:false; gutter: false">
&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.2/bootstrap-native.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.3/bootstrap-native.min.js"&gt;&lt;/script&gt;
</span></pre>
<p>As most of the scripts manipulate the DOM when ready, there is no need to include a <code>document.ready</code> statement or link the script(s) in the <code>&lt;head&gt;</code>. That's your first performance tip if you are new around here.</p>
<h3>Working locally</h3>
Expand Down Expand Up @@ -943,7 +943,8 @@ <h3 class="visible-xs">Navigation</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js" type="text/javascript"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.2/bootstrap-native.min.js"></script> <!-- now we have CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.0/bootstrap-native.min.js"></script> <!-- now we have CDN -->

<script type="text/javascript" src="./assets/js/scripts.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion lib/min/modal-native.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

92 changes: 55 additions & 37 deletions lib/modal-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,45 +18,54 @@
this.options.duration = document.documentElement.classList.contains('ie') ? 0 : this.duration;

this.dialog = this.modal.querySelector('.modal-dialog');
this.timer = 0;

if ( this.options.content !== undefined ) {
this.content( this.options.content );
}

this.init()
}

Modal.prototype.init = function() {
if ( this.options.content && this.options.content !== undefined ) {
this.content( this.options.content );
}
this.resize();
this.dismiss();
this.keydown();
this.trigger();
}
this.trigger();
}

Modal.prototype.open = function() {
this._open();
}

Modal.prototype.close = function() {
this._close();
}

Modal.prototype._open = function() {
var self = this;

document.body.classList.add('modal-open');
this.modal.style.display = 'block';

if ( this.options.backdrop ) {
this.createOverlay();
} else { this.overlay = null }

} else { this.overlay = null }

document.body.classList.add('modal-open');
this.modal.style.display = 'block';

setTimeout(function() {
clearTimeout(self.modal.getAttribute('data-timer'));
this.timer = setTimeout( function() {

if ( self.overlay !== null ) {
self._resize();
self.overlay.classList.add('in');
}
self.modal.classList.add('in');
if ( self.overlay !== null ) { self._resize(); self.overlay.classList.add('in'); }
self.modal.setAttribute('aria-hidden', false);
}, self.options.duration/2);
this.modal.setAttribute('data-timer',self.timer);

this.opened = true;
}

Modal.prototype.close = function() {
this._close();
}

Modal.prototype._close = function() {
var self = this;

Expand All @@ -66,10 +75,13 @@
if ( this.overlay ) this.overlay.classList.remove('in');
document.body.classList.remove('modal-open');

setTimeout(function() {
clearTimeout(self.modal.getAttribute('data-timer'));
this.timer = setTimeout( function() {
self.modal.style.display = 'none';
if ( self.overlay ) self.removeOverlay();
}, self.options.duration);
self.removeOverlay();
}, self.options.duration/2);
this.modal.setAttribute('data-timer',self.timer);

this.opened = false;
}

Expand All @@ -78,17 +90,21 @@
}

Modal.prototype.createOverlay = function() {
if (this.overlay === undefined || this.overlay === null ) {
var backdrop = document.createElement('div');
backdrop.setAttribute('class','modal-backdrop fade');
var backdrop = document.createElement('div'), overlay = document.querySelector('.modal-backdrop');
backdrop.setAttribute('class','modal-backdrop fade');

if ( overlay ) {
this.overlay = overlay;
} else {
this.overlay = backdrop;
document.body.appendChild(backdrop);
}
document.body.appendChild(backdrop);
}
}

Modal.prototype.removeOverlay = function() {
if ( this.overlay === document.querySelector('.modal-backdrop') ) {
document.body.removeChild(this.overlay)
var overlay = document.querySelector('.modal-backdrop');
if ( overlay !== null && overlay !== undefined ) {
document.body.removeChild(overlay)
}
}

Expand All @@ -110,14 +126,15 @@
s = b.getAttribute('data-target') && b.getAttribute('data-target').replace('#','')
|| b.getAttribute('href') && b.getAttribute('href').replace('#','');
if ( document.getElementById( s ) === self.modal ) {
self.open()
self.open()
}
})
})
})
}

Modal.prototype._resize = function() {
var self = this, overlay = this.overlay||document.querySelector('.modal-backdrop'), dim = { w: document.documentElement.clientWidth + 'px', h: document.documentElement.clientHeight + 'px' };
var self = this, overlay = this.overlay||document.querySelector('.modal-backdrop'),
dim = { w: document.documentElement.clientWidth + 'px', h: document.documentElement.clientHeight + 'px' };
setTimeout(function() {
if ( overlay !== null && overlay.classList.contains('in') ) {
overlay.style.height = dim.h; overlay.style.width = dim.w
Expand All @@ -130,25 +147,26 @@
window.addEventListener('resize', function() {
setTimeout(function() {
self._resize()
}, 50)
}, 50)
}, false);
}

Modal.prototype.dismiss = function() {
var self = this;
this.modal.addEventListener('click', function(e){
if ( e.target.parentNode.getAttribute('data-dismiss') === 'modal' || e.target.getAttribute('data-dismiss') === 'modal' || e.target === self.modal ) {
self.close()
} else { e.stopPropagation(); e.preventDefault(); }
e.preventDefault(); self.close()
} else { e.stopPropagation(); e.preventDefault(); }
})
}

var Modals = document.querySelectorAll('.modal');
[].forEach.call(Modals,function(modal,idx) {
var options = {};
options.keyboard = modal.getAttribute('data-keyboard') && modal.getAttribute('data-keyboard');
options.backdrop = modal.getAttribute('data-backdrop') && modal.getAttribute('data-backdrop');
options.duration = modal.getAttribute('data-duration') && modal.getAttribute('data-duration');
return new Modal(modal,options)
options.keyboard = modal.getAttribute('data-keyboard');
options.backdrop = modal.getAttribute('data-backdrop');
options.duration = modal.getAttribute('data-duration');
return new Modal(modal,options)
})

// })();

0 comments on commit 4a59897

Please sign in to comment.