Skip to content

Commit

Permalink
Add global settings
Browse files Browse the repository at this point in the history
  • Loading branch information
vodkabears committed Feb 18, 2015
1 parent 2e3f6b5 commit b4391d2
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 30 deletions.
26 changes: 21 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,27 @@ Or:
<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>
```

## Globals

```html
<script>
window.remodalGlobals = {
namespace: "modal",
defaults: {
hashTracking: false
}
};
</script>
<script src="js/jquery.remodal.js"></script>
```

#### namespace

Base HTML class for your modals. CSS theme will need to be updated to reflect this.

#### defaults

Extends default settings.

## Options

Expand All @@ -79,11 +100,6 @@ You can pass additional options by the `data-remodal-options` attribute.
</div>
```

#### namespace
`Default: "remodal"`

(String) Base HTML class for your modals. CSS theme will need to be updated to reflect this.

#### hashTracking
`Default: true`

Expand Down
14 changes: 14 additions & 0 deletions examples/index-zepto.html
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,20 @@ <h1>Another one window</h1>
<a class="remodal-confirm" href="#">Hello!</a>
</div>

<!-- You can define the global options -->
<script>
// window.remodalGlobals = {
// namespace: "remodal",
// defaults: {
// hashTracking: true,
// closeOnConfirm: true,
// closeOnCancel: true,
// closeOnEscape: true,
// closeOnAnyClick: true
// }
// };
</script>

<script src="../libs/zepto/zepto.min.js"></script>
<script src="../src/jquery.remodal.js"></script>

Expand Down
14 changes: 14 additions & 0 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,20 @@ <h1>Another one window</h1>
<a class="remodal-confirm" href="#">Hello!</a>
</div>

<!-- You can define the global options -->
<script>
// window.remodalGlobals = {
// namespace: "remodal",
// defaults: {
// hashTracking: true,
// closeOnConfirm: true,
// closeOnCancel: true,
// closeOnEscape: true,
// closeOnAnyClick: true
// }
// };
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.remodal.js"></script>
Expand Down
48 changes: 24 additions & 24 deletions src/jquery.remodal.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
* @private
*/
var pluginName = "remodal",
defaults = {
namespace: pluginName,
namespace = window.remodalGlobals && window.remodalGlobals.namespace || pluginName,
defaults = $.extend({
hashTracking: true,
closeOnConfirm: true,
closeOnCancel: true,
closeOnEscape: true,
closeOnAnyClick: true
},
}, window.remodalGlobals && window.remodalGlobals.defaults),

// Current modal
current,
Expand Down Expand Up @@ -99,7 +99,7 @@
*/
function lockScreen() {
var $html = $("html"),
lockedClass = defaults.namespace + "-is-locked",
lockedClass = namespace + "-is-locked",
$body,
paddingRight;

Expand All @@ -120,7 +120,7 @@
*/
function unlockScreen() {
var $html = $("html"),
lockedClass = defaults.namespace + "-is-locked",
lockedClass = namespace + "-is-locked",
$body,
paddingRight;

Expand Down Expand Up @@ -186,26 +186,26 @@

// Build DOM
remodal.$body = $(document.body);
remodal.$overlay = $("." + remodal.settings.namespace + "-overlay");
remodal.$overlay = $("." + namespace + "-overlay");

if (!remodal.$overlay.length) {
remodal.$overlay = $("<div>").addClass(remodal.settings.namespace + "-overlay");
remodal.$overlay = $("<div>").addClass(namespace + "-overlay");
remodal.$body.append(remodal.$overlay);
}

remodal.$bg = $("." + remodal.settings.namespace + "-bg");
remodal.$bg = $("." + namespace + "-bg");
remodal.$closeButton = $("<a href='#'></a>")
.addClass(remodal.settings.namespace + "-close");
remodal.$wrapper = $("<div>").addClass(remodal.settings.namespace + "-wrapper");
.addClass(namespace + "-close");
remodal.$wrapper = $("<div>").addClass(namespace + "-wrapper");
remodal.$modal = $modal;
remodal.$modal.addClass(remodal.settings.namespace);
remodal.$modal.addClass(namespace);
remodal.$modal.css("visibility", "visible");

remodal.$modal.append(remodal.$closeButton);
remodal.$wrapper.append(remodal.$modal);
remodal.$body.append(remodal.$wrapper);
remodal.$confirmButton = remodal.$modal.find("." + remodal.settings.namespace + "-confirm");
remodal.$cancelButton = remodal.$modal.find("." + remodal.settings.namespace + "-cancel");
remodal.$confirmButton = remodal.$modal.find("." + namespace + "-confirm");
remodal.$cancelButton = remodal.$modal.find("." + namespace + "-cancel");

// Calculate timeouts
tdOverlay = getTransitionDuration(remodal.$overlay);
Expand All @@ -215,14 +215,14 @@
remodal.td = tdBg > remodal.td ? tdBg : remodal.td;

// Add close button event listener
remodal.$closeButton.bind("click." + remodal.settings.namespace, function(e) {
remodal.$closeButton.bind("click." + namespace, function(e) {
e.preventDefault();

remodal.close();
});

// Add cancel button event listener
remodal.$cancelButton.bind("click." + remodal.settings.namespace, function(e) {
remodal.$cancelButton.bind("click." + namespace, function(e) {
e.preventDefault();

remodal.$modal.trigger("cancel");
Expand All @@ -233,7 +233,7 @@
});

// Add confirm button event listener
remodal.$confirmButton.bind("click." + remodal.settings.namespace, function(e) {
remodal.$confirmButton.bind("click." + namespace, function(e) {
e.preventDefault();

remodal.$modal.trigger("confirm");
Expand All @@ -244,17 +244,17 @@
});

// Add keyboard event listener
$(document).bind("keyup." + remodal.settings.namespace, function(e) {
$(document).bind("keyup." + namespace, function(e) {
if (e.keyCode === 27 && remodal.settings.closeOnEscape) {
remodal.close();
}
});

// Add overlay event listener
remodal.$wrapper.bind("click." + remodal.settings.namespace, function(e) {
remodal.$wrapper.bind("click." + namespace, function(e) {
var $target = $(e.target);

if (!$target.hasClass(remodal.settings.namespace + "-wrapper")) {
if (!$target.hasClass(namespace + "-wrapper")) {
return;
}

Expand Down Expand Up @@ -293,7 +293,7 @@
if (current && current !== remodal) {
current.$overlay.hide();
current.$wrapper.hide();
current.$body.removeClass(remodal.settings.namespace + "-is-active");
current.$body.removeClass(namespace + "-is-active");
}

current = remodal;
Expand All @@ -303,7 +303,7 @@
remodal.$wrapper.show();

setTimeout(function() {
remodal.$body.addClass(remodal.settings.namespace + "-is-active");
remodal.$body.addClass(namespace + "-is-active");

setTimeout(function() {
remodal.busy = false;
Expand Down Expand Up @@ -339,7 +339,7 @@
$(window).scrollTop(scrollTop);
}

remodal.$body.removeClass(remodal.settings.namespace + "-is-active");
remodal.$body.removeClass(namespace + "-is-active");

setTimeout(function() {
remodal.$overlay.hide();
Expand Down Expand Up @@ -409,7 +409,7 @@
// Auto initialization of modal windows.
// They should have the 'remodal' class attribute.
// Also you can write `data-remodal-options` attribute to pass params into the modal.
$(document).find("." + defaults.namespace).each(function(i, container) {
$(document).find("." + namespace).each(function(i, container) {
var $container = $(container),
options = $container.data(pluginName + "-options");

Expand Down Expand Up @@ -467,6 +467,6 @@
}
}

$(window).bind("hashchange." + pluginName, hashHandler);
$(window).bind("hashchange." + namespace, hashHandler);

})(window.jQuery || window.Zepto);
1 change: 0 additions & 1 deletion test/remodal_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,6 @@

QUnit.test("Options parsing", function() {
propEqual($inst2.settings, {
namespace: "remodal",
hashTracking: false,
closeOnConfirm: false,
closeOnCancel: false,
Expand Down

0 comments on commit b4391d2

Please sign in to comment.