From 50026cae09cef8ca7b7428f29cb8ce0dd817baca Mon Sep 17 00:00:00 2001 From: Gabor Greif Date: Mon, 9 Jul 2018 16:30:18 +0200 Subject: [PATCH 1/3] first shot at onresize --- js/lib.js | 6 ++++++ src/Graphics/UI/Threepenny/Events.hs | 7 ++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/js/lib.js b/js/lib.js index c94c3cfb..3be0a9bd 100644 --- a/js/lib.js +++ b/js/lib.js @@ -46,6 +46,12 @@ Haskell.on = function (el, eventType, fun) { fun(e.keyCode); return true; }); + } else if(eventType === 'resize') { + window.onresize = function(e) { + var t = e.target; + fun([t.innerWidth, t.innerHeight]); + return true; + }; } else { $(el).on(eventType, function(e) { fun(e.which ? [e.which.toString()] : e.detail || []); diff --git a/src/Graphics/UI/Threepenny/Events.hs b/src/Graphics/UI/Threepenny/Events.hs index 33b5de14..7145d1e7 100644 --- a/src/Graphics/UI/Threepenny/Events.hs +++ b/src/Graphics/UI/Threepenny/Events.hs @@ -8,7 +8,7 @@ module Graphics.UI.Threepenny.Events ( -- * Standard DOM events click, contextmenu, mousemove, mousedown, mouseup, hover, leave, - focus, blur, + focus, blur, resize, KeyCode, keyup, keydown, keypress, ) where @@ -87,6 +87,11 @@ focus = silence . domEvent "focus" blur :: Element -> Event () blur = silence . domEvent "blur" +-- | Element reports its window's resize. +-- Note that there should only be at most one +-- 'resize' event registered. +resize :: Element -> Event (Int,Int) +resize = fmap readCoordinates . domEvent "resize" type KeyCode = Int From 8dcf1e051fc645b8ab9bd48ba333c77c20cdd3fe Mon Sep 17 00:00:00 2001 From: Gabor Greif Date: Tue, 10 Jul 2018 13:05:01 +0200 Subject: [PATCH 2/3] send a resize event immediately after registration to submit the initial window size --- js/lib.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/lib.js b/js/lib.js index 3be0a9bd..7373dddd 100644 --- a/js/lib.js +++ b/js/lib.js @@ -52,6 +52,7 @@ Haskell.on = function (el, eventType, fun) { fun([t.innerWidth, t.innerHeight]); return true; }; + fun([window.innerWidth, window.innerHeight]); } else { $(el).on(eventType, function(e) { fun(e.which ? [e.which.toString()] : e.detail || []); From 26493e0a703da9c1ed3988fb4366fa149a7af4cf Mon Sep 17 00:00:00 2001 From: Gabor Greif Date: Wed, 11 Jul 2018 13:36:54 +0200 Subject: [PATCH 3/3] alternative resize event taking the window --- src/Graphics/UI/Threepenny/Events.hs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Graphics/UI/Threepenny/Events.hs b/src/Graphics/UI/Threepenny/Events.hs index 7145d1e7..83768ed5 100644 --- a/src/Graphics/UI/Threepenny/Events.hs +++ b/src/Graphics/UI/Threepenny/Events.hs @@ -8,12 +8,13 @@ module Graphics.UI.Threepenny.Events ( -- * Standard DOM events click, contextmenu, mousemove, mousedown, mouseup, hover, leave, - focus, blur, resize, + focus, blur, resize, resize', KeyCode, keyup, keydown, keypress, ) where import Graphics.UI.Threepenny.Attributes import Graphics.UI.Threepenny.Core +import System.IO.Unsafe (unsafePerformIO) silence = fmap (const ()) @@ -92,6 +93,9 @@ blur = silence . domEvent "blur" -- 'resize' event registered. resize :: Element -> Event (Int,Int) resize = fmap readCoordinates . domEvent "resize" +resize' :: Window -> Event (Int,Int) +resize' w = fmap readCoordinates $ domEvent "resize" e -- do fmap readCoordinates . + where e = unsafePerformIO (runUI w $ getBody w) type KeyCode = Int