From 5625c9dc1e509deb4f579c5e4daa0b1ee76fa962 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Thu, 7 Feb 2013 00:41:14 +0700 Subject: [PATCH 01/10] flexible height and maxHeight option height and maxHeight option can pass a callback function or string 'auto', for recalculating height/maxHeight of modal-body everytime window's size changed. --- js/bootstrap-modal.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 0e39e9b..2456471 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -120,18 +120,21 @@ this.$element.css('margin-left', ''); } - this.$element.find('.modal-body') - .css('overflow', '') - .css(prop, ''); - - var modalOverflow = $(window).height() - 10 < this.$element.height(); - if (value){ + if (typeof value == 'function') value = $.proxy(value,this); + if (value == 'auto') value = $(window).height() - 165 ; + this.$element.find('.modal-body') .css('overflow', 'auto') .css(prop, value); + } else { + this.$element.find('.modal-body') + .css('overflow', '') + .css(prop, ''); } + var modalOverflow = $(window).height() - 10 < this.$element.height(); + if (modalOverflow || this.options.modalOverflow) { this.$element .css('margin-top', 0) From ab26577d7046eb7557b6c989201bc209520016c9 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Thu, 7 Feb 2013 01:09:36 +0700 Subject: [PATCH 02/10] fix missing height/maxHeight callback call --- js/bootstrap-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 2456471..2019205 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -121,7 +121,7 @@ } if (value){ - if (typeof value == 'function') value = $.proxy(value,this); + if (typeof value == 'function') value = $.proxy(value,this)(); if (value == 'auto') value = $(window).height() - 165 ; this.$element.find('.modal-body') From 14751d1f60e6b714fa1e9dc8b77a095f6f68d254 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Thu, 7 Feb 2013 01:56:36 +0700 Subject: [PATCH 03/10] fixed height/maxHeight callback could return null --- js/bootstrap-modal.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 2019205..7270b49 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -120,18 +120,12 @@ this.$element.css('margin-left', ''); } - if (value){ - if (typeof value == 'function') value = $.proxy(value,this)(); - if (value == 'auto') value = $(window).height() - 165 ; + if (typeof value == 'function') value = $.proxy(value,this)(); + if (value == 'auto') value = $(window).height() - 165 ; - this.$element.find('.modal-body') - .css('overflow', 'auto') - .css(prop, value); - } else { - this.$element.find('.modal-body') - .css('overflow', '') - .css(prop, ''); - } + this.$element.find('.modal-body') + .css('overflow', (value && 'auto') || '') + .css(prop, value || ''); var modalOverflow = $(window).height() - 10 < this.$element.height(); From c9393d51d80a1ac099725d24e76befdb17df5999 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Mon, 11 Feb 2013 05:45:10 +0700 Subject: [PATCH 04/10] revert all change to original jschr's code --- js/bootstrap-modal.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 7270b49..0e39e9b 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -120,15 +120,18 @@ this.$element.css('margin-left', ''); } - if (typeof value == 'function') value = $.proxy(value,this)(); - if (value == 'auto') value = $(window).height() - 165 ; - this.$element.find('.modal-body') - .css('overflow', (value && 'auto') || '') - .css(prop, value || ''); + .css('overflow', '') + .css(prop, ''); var modalOverflow = $(window).height() - 10 < this.$element.height(); + if (value){ + this.$element.find('.modal-body') + .css('overflow', 'auto') + .css(prop, value); + } + if (modalOverflow || this.options.modalOverflow) { this.$element .css('margin-top', 0) From 51b687b42ddbb1d3694cba7618454f8d645ee066 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Mon, 11 Feb 2013 11:22:58 +0700 Subject: [PATCH 05/10] Reposition the modal on size changed Modal with '.modal-reposition' class will listen to any input 'change' event to check modal-size changed and fire 'resize.modal'. --- js/bootstrap-modal.js | 4 ++++ js/bootstrap-modalmanager.js | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 0e39e9b..a737073 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -141,6 +141,10 @@ .css('margin-top', 0 - this.$element.height() / 2) .removeClass('modal-overflow'); } + + this.$element.data('height',this.$element.height()) + this.$element.data('width',this.$element.width()) + }, tab: function () { diff --git a/js/bootstrap-modalmanager.js b/js/bootstrap-modalmanager.js index 1373a47..d1bb07c 100644 --- a/js/bootstrap-modalmanager.js +++ b/js/bootstrap-modalmanager.js @@ -49,6 +49,14 @@ } }, 10); }); + // listen to any input 'change' event to check modal-size changed and fire 'resize.modal'. + $(document).on('change.modal','.modal.modal-reposition',function(e){ + var $target = $(e.target) + , wait = $target.data('repositionwait') || that.options.repositionWait || 300 + if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')){ + setTimeout(function(){$(window).trigger('resize.modal')},wait); + } + }); } }, From 4a1ab542b0789bd317f62cf4a2c5d8623f1b9d56 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Wed, 13 Feb 2013 02:40:38 +0700 Subject: [PATCH 06/10] Reposition - use currentTarget, modal.layout The "change" event may be triggered by input, select and textarea element within modal. Otherwise required writing a custom script to trigger when ajax loading complete or trigger every specific interval . --- js/bootstrap-modalmanager.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/js/bootstrap-modalmanager.js b/js/bootstrap-modalmanager.js index d1bb07c..13b5624 100644 --- a/js/bootstrap-modalmanager.js +++ b/js/bootstrap-modalmanager.js @@ -49,12 +49,17 @@ } }, 10); }); - // listen to any input 'change' event to check modal-size changed and fire 'resize.modal'. + // listen to 'change' event, checking if modal-size changed and call 'layout'. $(document).on('change.modal','.modal.modal-reposition',function(e){ - var $target = $(e.target) - , wait = $target.data('repositionwait') || that.options.repositionWait || 300 - if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')){ - setTimeout(function(){$(window).trigger('resize.modal')},wait); + var $target = $(e.currentTarget) + , modal = $target.data('modal'); + if (modal && modal.isShown){ + setTimeout( + function(){ + if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')) + modal.layout() + } + ,$target.data('repositionwait') || that.options.repositionWait || 300); } }); } From a5a0bbac5de5ad043b99f7d1608c471114ceea90 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Wed, 13 Feb 2013 11:20:38 +0700 Subject: [PATCH 07/10] class modal-flow, modal-fit --- js/bootstrap-modal.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index a737073..d44b2c7 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -104,6 +104,11 @@ var prop = this.options.height ? 'height' : 'max-height', value = this.options.height || this.options.maxHeight; + if (!value && this.$element.hasClass('modal-fit')){ + value = function(){return $(window).height() - 165} + prop = 'max-height'; + } + if (this.options.width){ this.$element.css('width', this.options.width); @@ -126,7 +131,7 @@ var modalOverflow = $(window).height() - 10 < this.$element.height(); - if (value){ + if (value && !this.$element.hasClass('modal-flow')){ this.$element.find('.modal-body') .css('overflow', 'auto') .css(prop, value); @@ -360,7 +365,7 @@ * ============== */ $(function () { - $(document).off('.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { + $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { var $this = $(this), href = $this.attr('href'), $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7 From f6648e7bb4d0f0eb97b7284835c2af4ed349b21a Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Wed, 13 Feb 2013 19:56:53 +0700 Subject: [PATCH 08/10] fit,flow & reposition - add data-api, demo --- index.html | 33 ++++++++++++++++++++++++++++++++- js/bootstrap-modal.js | 15 +++++++++++---- js/bootstrap-modalmanager.js | 2 +- 3 files changed, 44 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 5b14926..44eb34c 100644 --- a/index.html +++ b/index.html @@ -116,7 +116,17 @@

Long Modals


- +
+

Fit, flow & Reposition

+ 
+
+
+ +
+
+
+ + @@ -280,6 +290,27 @@

A Very Long

+ + + diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index dd0b0ef..fbe9ecf 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -127,7 +127,8 @@ this.$element.find('.modal-body') .css('overflow', '') - .css(prop, ''); + .css('max-height', '') + .css('height', ''); var modalOverflow = $(window).height() - 10 < this.$element.height(); @@ -147,8 +148,8 @@ .removeClass('modal-overflow'); } - this.$element.data('height',this.$element.height()) - this.$element.data('width',this.$element.width()) + this.$element.data('modalheight',this.$element.height()) + this.$element.data('modalwidth',this.$element.width()) }, @@ -365,12 +366,18 @@ * ============== */ $(function () { - $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { + $(document).off('click.modal').on('click.modal.data-api', '[data-toggle|="modal"]', function ( e ) { var $this = $(this), + toggle = $this.attr('data-toggle'), href = $this.attr('href'), $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7 option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()); + if (toggle!='modal'){ + if ($target.data('modal')) option = $target.data('modal').isShown? 'layout':'show'; + $target.toggleClass(toggle); + } + e.preventDefault(); $target .modal(option) diff --git a/js/bootstrap-modalmanager.js b/js/bootstrap-modalmanager.js index fa23d6c..7a891b7 100644 --- a/js/bootstrap-modalmanager.js +++ b/js/bootstrap-modalmanager.js @@ -56,7 +56,7 @@ if (modal && modal.isShown){ setTimeout( function(){ - if ($target.height()!=$target.data('height') || $target.width()!=$target.data('width')) + if ($target.height()!=$target.data('modalheight') || $target.width()!=$target.data('modalwidth')) modal.layout() } ,$target.data('repositionwait') || that.options.repositionWait || 300); From 4b05923c8b121cd279417a07b5a889ac568a4a0d Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Wed, 13 Feb 2013 23:47:09 +0700 Subject: [PATCH 09/10] rename index.html to demo.html --- index.html => demo.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename index.html => demo.html (100%) diff --git a/index.html b/demo.html similarity index 100% rename from index.html rename to demo.html From 63fd21167eb5e3847e3bf40c9e899ad46b07c977 Mon Sep 17 00:00:00 2001 From: sathit jittanupat Date: Tue, 19 Feb 2013 01:48:33 +0700 Subject: [PATCH 10/10] demo fit, flow & reposition --- demo.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/demo.html b/demo.html index 44eb34c..e89385c 100644 --- a/demo.html +++ b/demo.html @@ -299,9 +299,11 @@

Fit, flow & reposition

-
+
+ +