From 96b0054ff0712a1883c155acdc304d04a065f60e Mon Sep 17 00:00:00 2001 From: "Max F. Albrecht" <1@178.is> Date: Thu, 18 Jun 2015 14:06:00 +0200 Subject: [PATCH] js: modal: fix/rewrite maxBodyHeight calculation - calculation is now correct - added diagram for clarity --- app/assets/javascripts/lib/modal.coffee | 42 +++++++++++++++++++------ 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/lib/modal.coffee b/app/assets/javascripts/lib/modal.coffee index 1eb6c4b4b0..c16b1e473e 100644 --- a/app/assets/javascripts/lib/modal.coffee +++ b/app/assets/javascripts/lib/modal.coffee @@ -21,17 +21,41 @@ class Modal $(window).on "resize", @setModalBodyMaxHeight setModalBodyMaxHeight: => + + # ╔════════▲═════════════════════════════╗ ▲ + # ║ │ modalMargin ║ │ + # ║ ▼ ╔════════════════╗ ▲ ║ │ + # ║ ╠════════════════╣ │ ║ │ + # ║ ║................║ │ ║ │ + # ║ ║................║ │ ║ │ + # ║ ║................║ │ ║ │ + # ║ ║.. modalBody ..║ │ ║ │ + # ║ ║................║ │ ║ │ + # ║ ║................║ │ ║ │ + # ║ ║................║ │ modal ║ │ + # ║ ╠════════════════╣ │ Height ║ │ + # ║ ╚════════════════╝ ▼ ║ │ + # ║ ║ │ windowHeight + # ╚══════════════════════════════════════╝ ▼ + + # add a delay to not be quicker than the DOM reflow :( setTimeout => - windowHeight = $(window).height() - rim = ( @el.position().top - $(document).scrollTop() )*2 - elHeight = @el.outerHeight() - elBodyHeight = @el.find(".ui-modal-body").height() - height = windowHeight - rim - elHeight + elBodyHeight - @el.find(".ui-modal-body").css "max-height", height - # since this is an ongoing problem we leave this in prod for faster debugging - console.log "debug: ModalBodyMaxHeight was set to #{height}" - , 250 + + windowHeight = $(window).height() + modalMargin = @el.position().top # the margin on top of the modal + modalHeight = @el.outerHeight() + modalBodyHeight = @el.find(".ui-modal-body").height() + + # complete modal minus modal-body plus 2 margins is space we cant use: + extraNeededHeight = (modalHeight-modalBodyHeight)+(modalMargin*2) + # subtract that from the window e presto: + maximumModalBodyHeight = windowHeight - extraNeededHeight + + # now set it: + @el.find(".ui-modal-body").css "max-height", maximumModalBodyHeight + + , 125 onHide: => @el.remove()