Skip to content

Commit

Permalink
renamed to $().overlay
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgallen23
jgallen23 committed Oct 30, 2013
1 parent 50f97ce commit f1d6eeb
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 103 deletions.
14 changes: 7 additions & 7 deletions example/index.html
View file
Expand Up @@ -2,8 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>fidel-modal example</title>
<link rel="stylesheet" href="../dist/fidel.modal.css"/>
<title>overlay example</title>
<link rel="stylesheet" href="../dist/overlay.css"/>
<style>
.content {
display: none;
Expand All @@ -15,8 +15,8 @@
</head>
<body>

<button id="show">Show Modal</button>
<button id="showBD">Show Modal with backdropClick = false</button>
<button id="show">Show Overlay</button>
<button id="showBD">Show Overlay with backdropClick = false</button>
<div class="content">
<button data-action="hide">X</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
Expand Down Expand Up @@ -53,13 +53,13 @@

<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/fidel/dist/fidel.js"></script>
<script src="../dist/fidel.modal.js"></script>
<script src="../dist/fidel.overlay.js"></script>
<script>
$('#show').on('click', function() {
$('.content').modal();
$('.content').overlay();
});
$('#showBD').on('click', function() {
$('.content').modal({ backdropClick: false });
$('.content').overlay({ backdropClick: false });
});
</script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion grunt/less.yaml
View file
Expand Up @@ -4,4 +4,4 @@ options:

styles:
files:
'dist/fidel.overlay.css': 'lib/modal.less'
'dist/overlay.css': 'lib/overlay.less'
16 changes: 8 additions & 8 deletions lib/overlay.js
View file
@@ -1,16 +1,16 @@

(function($) {
$.declare('modal', {
$.declare('overlay', {
defaults: {
modalClass: 'modal',
backdropClass: 'modal-backdrop',
overlayClass: 'overlay',
backdropClass: 'overlay-backdrop',
backdropClick: true
},

init: function() {

if ($('.modal').length !== 0) {
$('.modal').modal('hide');
if ($('.'+this.overlayClass).length !== 0) {
$('.'+this.overlayClass).overlay('hide');
}

this.show();
Expand All @@ -34,20 +34,20 @@
},

show: function() {
this.el.addClass(this.modalClass);
this.el.addClass(this.overlayClass);
$('body').css('overflow', 'hidden');
this.showBackdrop();
this.el.show();
this.emit('show');
},

hide: function() {
this.el.removeClass(this.modalClass);
this.el.removeClass(this.overlayClass);
$('body').css('overflow', '');
this.hideBackdrop();
this.el.hide();
this.emit('hide');
this.el.removeData('modal');
this.el.removeData('overlay');
}
});
})(jQuery);
4 changes: 2 additions & 2 deletions lib/modal.less → lib/overlay.less
View file
@@ -1,9 +1,9 @@
@import "oban/oban";

.modal {
.overlay {
.oban-modal();
}

.modal-backdrop {
.overlay-backdrop {
.oban-modal-backdrop();
}
170 changes: 85 additions & 85 deletions test/overlay.test.js
View file
Expand Up @@ -12,168 +12,168 @@ suite('overlay', function() {

teardown(function() {
$('#fixture').empty();
$('.modal-backdrop').remove();
$('.overlay-backdrop').remove();
});

test('$().modal exists', function() {
assert.equal(typeof $('#fixture').modal, 'function');
test('$().overlay exists', function() {
assert.equal(typeof $('#fixture').overlay, 'function');
});

test('$().modal() returns el', function() {
var e = el.modal();
test('$().overlay() returns el', function() {
var e = el.overlay();
assert.equal(e, el);
});

test('$().modal() adds class and adds backdrop', function() {
el.modal();
test('$().overlay() adds class and adds backdrop', function() {
el.overlay();

console.log(el);
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);
});

test('click data-action="hide" closes modal', function() {
el.modal();
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
test('click data-action="hide" closes overlay', function() {
el.overlay();
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);

$('button').click();
assert.equal($('.modal').length, 0);
assert.equal($('.modal-backdrop').length, 0);
assert.equal($('.overlay').length, 0);
assert.equal($('.overlay-backdrop').length, 0);
});

test('click backdrop closes modal', function() {
el.modal();
$('.modal-backdrop').click();
assert.equal($('.modal').length, 0);
assert.equal($('.modal-backdrop').length, 0);
test('click backdrop closes overlay', function() {
el.overlay();
$('.overlay-backdrop').click();
assert.equal($('.overlay').length, 0);
assert.equal($('.overlay-backdrop').length, 0);
});

test('disable click backdrop', function() {
el.modal({ backdropClick: false });
$('.modal-backdrop').click();
assert.equal($('.modal').length, 1);
assert.equal($('.modal-backdrop').length, 1);
el.overlay({ backdropClick: false });
$('.overlay-backdrop').click();
assert.equal($('.overlay').length, 1);
assert.equal($('.overlay-backdrop').length, 1);
});

test('$().modal("hide") closes', function() {
el.modal();
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
assert.equal(typeof el.data('modal'), 'object');
test('$().overlay("hide") closes', function() {
el.overlay();
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);
assert.equal(typeof el.data('overlay'), 'object');

el.modal('hide');
assert.equal($('.modal').length, 0);
assert.equal($('.modal-backdrop').length, 0);
assert.equal(typeof el.data('modal'), 'undefined');
el.overlay('hide');
assert.equal($('.overlay').length, 0);
assert.equal($('.overlay-backdrop').length, 0);
assert.equal(typeof el.data('overlay'), 'undefined');
});

test('$().modal("hide") doesn\'t error if not visible', function() {
test('$().overlay("hide") doesn\'t error if not visible', function() {
assert.doesNotThrow(function() {
el.modal('hide');
el.overlay('hide');
});
});

test('$().modal("show") manually shows modal', function() {
el.modal();
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
test('$().overlay("show") manually shows overlay', function() {
el.overlay();
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);

el.modal('hide');
assert.equal($('.modal').length, 0);
assert.equal($('.modal-backdrop').length, 0);
el.overlay('hide');
assert.equal($('.overlay').length, 0);
assert.equal($('.overlay-backdrop').length, 0);

el.modal('show');
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
el.overlay('show');
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);
});

test('calling "show" twice doesn\'t add another backdrop', function() {
el.modal();
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
el.overlay();
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);

el.modal('show');
assert.ok(el.hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
el.overlay('show');
assert.ok(el.hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);
});

test('adds overflow hidden on body when modal is open', function() {
el.modal();
test('adds overflow hidden on body when overlay is open', function() {
el.overlay();

assert.equal($('body').css('overflow'), 'hidden');
});

test('display: block when showing modal', function() {
el.modal();
test('display: block when showing overlay', function() {
el.overlay();

assert.equal(el.css('display'), 'block');
});

test('display: none when hiding modal', function() {
el.modal();
el.modal('hide');
test('display: none when hiding overlay', function() {
el.overlay();
el.overlay('hide');

assert.equal(el.css('display'), 'none');
});

test('removes overflow hidden when closed', function() {
el.modal();
el.overlay();

el.modal('hide');
el.overlay('hide');

assert.equal($('body').css('overflow'), 'visible');

});

test('event for on show', function(done) {
el.on('show', function() { done(); });
el.modal();
el.overlay();
});

test('event for on hide', function(done) {
el.on('hide', function() { done(); });
el.modal();
el.modal('hide');
el.overlay();
el.overlay('hide');
});

test('test calling modal when one is already open', function() {
el.modal();
$('.content2').modal();
test('test calling overlay when one is already open', function() {
el.overlay();
$('.content2').overlay();

assert.ok(!el.hasClass('modal'));
assert.ok($('.content2').hasClass('modal'));
assert.equal($('.modal-backdrop').length, 1);
assert.ok(!el.hasClass('overlay'));
assert.ok($('.content2').hasClass('overlay'));
assert.equal($('.overlay-backdrop').length, 1);
});

test('custom class for modal and modal-backdrop', function() {
el.modal({
modalClass: 'modal2',
backdropClass: 'modal-backdrop2'
test('custom class for overlay and overlay-backdrop', function() {
el.overlay({
overlayClass: 'overlay2',
backdropClass: 'overlay-backdrop2'
});

assert.ok(el.hasClass('modal2'));
assert.equal($('.modal-backdrop2').length, 1);
assert.ok(el.hasClass('overlay2'));
assert.equal($('.overlay-backdrop2').length, 1);

//cleanup
el.modal('hide');
el.overlay('hide');
});

test('global settings for modalClass and backdropClass', function() {
$.fn.modal.defaults.modalClass = 'modal3';
$.fn.modal.defaults.backdropClass = 'modal-backdrop3';
test('global settings for overlayClass and backdropClass', function() {
$.fn.overlay.defaults.overlayClass = 'overlay3';
$.fn.overlay.defaults.backdropClass = 'overlay-backdrop3';

el.modal();
el.overlay();

assert.ok(el.hasClass('modal3'));
assert.equal($('.modal-backdrop3').length, 1);
assert.ok(el.hasClass('overlay3'));
assert.equal($('.overlay-backdrop3').length, 1);

//cleanup
el.modal('hide');
$.fn.modal.defaults = {};
el.overlay('hide');
$.fn.overlay.defaults = {};
});

test('$().modal("toggle")');
test('$().overlay("toggle")');

});

0 comments on commit f1d6eeb

Please sign in to comment.