Permalink
Browse files

Add more config options for modal windows

  • Loading branch information...
ryancramerdesign committed Mar 27, 2015
1 parent 6bcec0f commit a0948b110941df53f7d823f3aeaa48498c875bc8
Showing with 59 additions and 8 deletions.
  1. +17 −1 wire/config.php
  2. +41 −6 wire/modules/Jquery/JqueryUI/modal.js
  3. +1 −1 wire/modules/Jquery/JqueryUI/modal.min.js
@@ -743,6 +743,22 @@
* 3. Width: 100% minus this many pixels
* 4. Height: 100% minus this many pixels
*
* Following that you may optionally specify any of the following, in any order.
* They must continue to be in CSV format, i.e. "key=value,key=value,key=value".
*
* 5. modal=true (whether dialog will have modal behavior, specify false to disable)
* 6. draggable=false (whether dialog is draggable, specify true to enable)*
* 7. resizable=true (whether dialog is resizable, specify false to disable)
* 8. hideOverflow=true (whether overflow in parent should be hidden, specify false to disable)
* 9. hide=250 (number of ms to fade out window after closing, default=250)
* 10. show=100 (number of ms to fade in window when opening, default=100)
* 11. closeOnEscape=false (whether hitting the ESC key should close the window, specify true to enable)
*
* The "large" modal option below demonstrates a few of these.
*
* *Note the draggable option does not work well unless the modal will open at the top of the
* page. Do not use on modals that may be triggered further down the page.
*
* @var array
* #property string large Settings for large modal windows (most common)
* #property string medium Settings for medium modal windows
@@ -751,7 +767,7 @@
*
*/
$config->modals = array(
'large' => "15,15,30,30",
'large' => "15,15,30,30,draggable=false,resizable=true,hide=250,show=100",
'medium' => "50,49,100,100",
'small' => "100,100,200,200",
'full' => "0,0,0,0",
@@ -61,21 +61,56 @@ function pwModalWindowSettings(name) {
var modal = config.modals[name];
if(typeof modal == "undefined") modal = config.modals['medium'];
modal = modal.split(',');

return {

// options that can be customized via config.modals, with default values
var options = {
modal: true,
draggable: false,
resizable: true,
hide: 250,
show: 100,
hideOverflow: true,
closeOnEscape: false
}

if(modal.length >= 4) {
for(var n = 4; n < modal.length; n++) {
var val = modal[n];
if (val.indexOf('=') < 1) continue;
val = val.split('=');
var key = jQuery.trim(val[0]);
val = jQuery.trim(val[1].toLowerCase());
if (typeof options[key] == "undefined") continue;
if (val == "true" || val == "1") {
val = true;
} else if (val == "false" || val == "0") {
val = false;
} else {
val = parseInt(val);
}
options[key] = val;
}
}

return {
modal: options.modal,
draggable: options.draggable,
resizable: options.resizable,
position: [ parseInt(modal[0]), parseInt(modal[1]) ],
width: $(window).width() - parseInt(modal[2]),
height: $(window).height() - parseInt(modal[3]),
hide: 250,
show: 100,
hide: options.hide,
show: options.show,
closeOnEscape: options.closeOnEscape,
create: function(event, ui) {
parent.jQuery('body').css('overflow', 'hidden');
if(options.hideOverflow) {
parent.jQuery('body').css('overflow', 'hidden');
}
},
beforeClose: function(event, ui) {
parent.jQuery('body').css('overflow', 'auto');
if(options.hideOverflow) {
parent.jQuery('body').css('overflow', 'auto');
}
}
}
};

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit a0948b1

Please sign in to comment.