From 526089a848461be66436a017530a3071773ffa98 Mon Sep 17 00:00:00 2001 From: Yura Trambitskiy Date: Fri, 20 Mar 2015 14:57:20 +0300 Subject: [PATCH] added wrap method for added wrapping block with overflow: auto (useful for high big height dialogs) --- dialog.css | 22 ++++++++++++++++++++++ index.js | 39 +++++++++++++++++++++++++++++++++++++++ test/index.html | 15 +++++++++++++++ 3 files changed, 76 insertions(+) diff --git a/dialog.css b/dialog.css index 30cb212..f07db90 100644 --- a/dialog.css +++ b/dialog.css @@ -91,3 +91,25 @@ text-align: left; width: inherit; } + +/* dialog wrap */ + +.dialog-wrap { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; +} + +.dialog-wrap.not-modal { + cursor: pointer; +} + +.dialog-wrap .dialog { + position: absolute; + margin-bottom: 150px; + cursor: auto; +} diff --git a/index.js b/index.js index 3a6448b..6b23d45 100644 --- a/index.js +++ b/index.js @@ -223,6 +223,45 @@ Dialog.prototype.fixed = function(){ return this; } +/** + * Wraps the dialog el with .dialog-wrap element. + * Useful for nice scrollbar feature in large dialogs. + * Can be used with overlay only (otherwise it will generate overlay by itself)! + * + * @return {Dialog} for chaining + * @api public + */ + +Dialog.prototype.wrap = function(){ + var self = this; + var wrap = document.createElement('div'); + wrap.className = 'dialog-wrap'; + + //if no overlay add it + if (!self._overlay) { + self._overlay = overlay(); + } + + //as wrap covers all screen it should take care of close on overlay zone click (if not modal) + if (!self._classes.has('modal')) { + wrap.className += ' not-modal' + events.bind(wrap, 'click', function(e) { + if (e.target === wrap) { + self.emit('close'); + self.hide(); + } + }); + } + + //append dialog + wrap.appendChild(self.el); + + //redefine this.el so methods like remove can clean up full wrap instead of the element + self.el = wrap; + + return this; +} + /** * Show the dialog. * diff --git a/test/index.html b/test/index.html index e9e422a..26bae48 100644 --- a/test/index.html +++ b/test/index.html @@ -23,6 +23,9 @@ top: 20px; left: 15%; } + .dialog.pretty-high .content { + min-height: 1000px; + } @@ -95,6 +98,18 @@ console.log('closed eight'); }); + dialog('Pretty high wrapped dialog') + .effect('fade') + .overlay() + .closable() + .fixed() + .wrap() + .addClass('pretty-high') + .show() + .on('hide', function(){ + console.log('closed nine'); + }); + }); }); });