diff --git a/component.json b/component.json
index 84bece9..260bf59 100644
--- a/component.json
+++ b/component.json
@@ -9,7 +9,7 @@
],
"dependencies": {
"component/emitter": "1.1.3",
- "component/overlay": "0.3.1",
+ "component/overlay": "0.3.5",
"component/domify": "1.3.1",
"component/event": "0.1.4",
"component/classes": "1.2.1",
diff --git a/index.js b/index.js
index 3a6448b..3be023b 100644
--- a/index.js
+++ b/index.js
@@ -170,7 +170,7 @@ Dialog.prototype.effect = function(type){
*/
Dialog.prototype.modal = function(){
- this._overlay = overlay();
+ this.overlay();
return this;
};
@@ -182,14 +182,7 @@ Dialog.prototype.modal = function(){
*/
Dialog.prototype.overlay = function(opts){
- var self = this;
- opts = opts || { closable: true };
- var o = overlay(opts);
- o.on('hide', function(){
- self._overlay = null;
- self.hide();
- });
- this._overlay = o;
+ this._overlayOptions = opts || { closable: true };
return this;
};
@@ -234,13 +227,9 @@ Dialog.prototype.fixed = function(){
Dialog.prototype.show = function(){
var overlay = this._overlay;
- var self = this;
// overlay
- if (overlay) {
- overlay.show();
- this._classes.add('modal');
- }
+ this.showOverlay();
// escape
if (!overlay || overlay.closable) this.escapable();
@@ -260,10 +249,30 @@ Dialog.prototype.show = function(){
Dialog.prototype.hideOverlay = function(){
if (!this._overlay) return;
- this._overlay.remove();
+ this._overlay.off('hide');
+ this._overlay.hide();
this._overlay = null;
};
+/**
+ * Show the overlay.
+ *
+ * @api private
+ */
+
+Dialog.prototype.showOverlay = function(){
+ var self = this;
+
+ if (!self._overlayOptions) return;
+ self._overlay = overlay(self._overlayOptions)
+ .once('hide', function(){
+ self._overlay = null;
+ self.hide();
+ })
+ .show();
+ self._classes.add('modal');
+};
+
/**
* Hide the dialog with optional delay of `ms`,
* otherwise the dialog is removed immediately.
@@ -282,7 +291,7 @@ Dialog.prototype.hide = function(ms){
events.unbind(document, 'keydown', self._escKeyCallback);
}
- // prevent thrashing - this isn't used
+ // prevent thrashing
self.hiding = true;
// duration
diff --git a/package.json b/package.json
index 164d627..88bbf36 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
"component-event": "^0.1.0",
"component-emitter": "^1.1.1",
"domify": "^1.1.1",
- "overlay-component": "^0.3.0",
+ "overlay-component": "^0.3.5",
"component-classes": "^1.1.3",
"stringify": "^3.1.0"
},
diff --git a/test/index.html b/test/index.html
index e9e422a..dd33745 100644
--- a/test/index.html
+++ b/test/index.html
@@ -63,11 +63,11 @@
.on('hide', function(){
console.log('closed fourth');
- dialog('Click the overlay to close')
+ var overlayDialog = dialog('Click the overlay to close')
.effect('slide')
.overlay()
.show()
- .on('hide', function(){
+ .once('hide', function(){
console.log('closed fifth');
dialog('Modal')
@@ -93,6 +93,9 @@
.show()
.on('hide', function(){
console.log('closed eight');
+
+ //test overlay once again (#21)
+ overlayDialog.show();
});
});
diff --git a/test/reuse.html b/test/reuse.html
new file mode 100644
index 0000000..62e61bb
--- /dev/null
+++ b/test/reuse.html
@@ -0,0 +1,47 @@
+
+
+
+ Dialog
+
+
+
+
+
+ Dialog
+
+
+
+