Re: How to use addEventListener for browser window resizing in web deployment?

[Andreas Bergendal via use-livecode]

Wow, thanks Alex! That’s brilliant and exactly what I need!
I must have missed (or forgotten) that session at the conference - I’ll try to 
find it among the recordings to see if it helps explaining the various bits a 
little. In any case I’ll experiment with the code and see what I can get to 
work.

Cheers,
Andreas
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: How to use addEventListener for browser window resizing in web deployment?

[Alex Tweedly via use-livecode]

You are correct Andreas - all this basic javascript interaction *really* 
should be in the default built already.


A sample stack for building a web app was discussed in a session in the 
LC Global conference, by Steven Crichton and Michael McReary. It has all 
kinds of javascript magic, and the corresponding LC pairing. AFAIK, that 
stack hasn't been made public, so it wouldn't be up to me to show large 
sections - but I'm sure it's ok to give a couple of snippets .


In the stack script of the app (includes some stuff with 'spinner - 
probably not generally needed) :



on openStack
   if the platform is "web" then
  do "document.querySelector('#canvas').removeAttribute('width');" 
as "javascript"
  do 
"document.querySelector('#canvas').removeAttribute('height');" as 
"javascript"
  do "document.querySelector('#canvas').style.width = '100%';" as 
"javascript"
  do 
"document.querySelector('#emscripten_main').removeAttribute('width');" 
as "javascript"
  do 
"document.querySelector('#emscripten_main').removeAttribute('height');" 
as "javascript"
  do "document.querySelector('#emscripten_main').style.width = 
'100%';" as "javascript"
  do "var element = 
document.getElementById('spinner');element.parentNode.removeChild(element);" 
as "javascript"
  do "var element = 
document.getElementById('status');element.parentNode.removeChild(element);" 
as "javascript"
  do 
"document.querySelector('#donestatus').removeAttribute('style');" as 
"javascript"
  do "document.querySelector('#by').removeAttribute('style');" as 
"javascript"


  send "doBrowserResize" to me in 0 millisecs
   end if
end openStack

on browserResized pInnerHeight
   set the height of this stack to pInnerHeight
   do 
"document.querySelector('#emscripten_main').removeAttribute('width');" 
as "javascript"
   do "document.querySelector('#emscripten_main').style.width = 
'100%';" as "javascript"

end browserResized

on doBrowserResize
   set the cJavascriptHandlers of this stack to "browserResized" & 
return & "scrollEvent"

   set the visible of this stack to true
   do "getInnerHeight();" as "javascript"
   browserResized the result
end doBrowserResize

on scrollEvent pHScroll, pVScroll
   send "scrollEvent" && pHScroll & comma & pVScroll to this card in 0 
seconds

end scrollEvent


and in the standalone.html :

Hmmm - I don't understand it well enough to clip out the needed parts - 
so I've included the whole thing below  :-(   Again, it includes stuff 
with spinner, and stripe - which probably should be removed in the 
general case. Hopefully, LC will get their act together and provide a 
default build where basic functionality works.


Good luck,

Alex.



    
    
    

    LiveCode Conference - Meeting Space

    
    body {
        font-family: arial;
        margin: 0;
        padding: none;
        background-color:#fafafa !important;
        border-top: 0px solid #282828;
    }
    .emscripten {
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block
    }
    div.emscripten {
        text-align: center
    }
    div.emscripten_border {
        border: 0px solid #000
    }
    canvas.emscripten {
        border: 0 none
    }
    #emscripten_logo {
        display: inline-block;
        margin: 0
    }
    .spinner {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 1000;

Re: How to use addEventListener for browser window resizing in web deployment?

[Mark Wieder via use-livecode]

On 8/6/22 04:44, Andreas Bergendal via use-livecode wrote:


and Ali Lloyd’s cool WordLC app:
https://alilloyd.livecodehosting.com/wordlc/wordlc.html


Unfortunately that throws a divide-by-zero error at line 461 in 
computeGridFieldWidth when I try to resize the window.


--
 Mark Wieder
 ahsoftw...@gmail.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: How to use addEventListener for browser window resizing in web deployment?

[Andreas Bergendal via use-livecode]

Thanks guys, those are indeed great resources for many cases. 

What I’m after here however, are specific solutions to the javascript/livecode 
’pairing’ of code to manage browser window/stack resizing.
To avoid reinventing the wheel, if possible. I imagine this would be of great 
interest to a lot of people here, since having your stack react to browser 
window resizing should be quite crucial in many cases of LC web deployment.

That’s why I’m also confident that the mothership will build this into future 
releases of LC10. But as an early adopter, I can’t wait… ;-)
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: How to use addEventListener for browser window resizing in web deployment?

[Mark Wieder via use-livecode]

On 8/6/22 07:30, harrison--- via use-livecode wrote:


I have found the following website to be very helpful with a lot of my 
javascript projects.

Do you know about these guys?

https://www.w3schools.com/js/default.asp 



And also the amazing GitHub Copilot:

https://docs.github.com/en/copilot

--
 Mark Wieder
 ahsoftw...@gmail.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: How to use addEventListener for browser window resizing in web deployment?

[harrison--- via use-livecode]

Hi Andreas,

I have found the following website to be very helpful with a lot of my 
javascript projects.

Do you know about these guys?

https://www.w3schools.com/js/default.asp 


I hope that helps you.

Cheers,

Rick

> On Aug 6, 2022, at 7:44 AM, Andreas Bergendal via use-livecode 
>  wrote:
> 
> Hi all,
> 
> So I’ve been experimenting with web deployment with LC 10 dp 4. Now I would 
> like my stack to be able to react to resizeStack events when the browser 
> window is resized by the user. Or to adapt to e.g. a mobile browser screen 
> size.
> 
> For this, if I understand correctly, some javascript needs to be used. I’ve 
> tried to piece together how to do that from these sources:
> https://livecode.com/using-the-new-web-features-in-livecode-10-dp-1/
> 
> and Ali Lloyd’s cool WordLC app:
> https://alilloyd.livecodehosting.com/wordlc/wordlc.html
> 
> where he uses window.addEventListener(”resize” […] etc in the html file to 
> catch browser window resizing for the stack to react on. However, as I can’t 
> see his LC script side of it, I fail to figure out the proper adaptation to 
> my needs:
> 
> I want my stack to get, from javascript, the impulse that the browser window 
> has changed its width/height and what the new width/height is, in order to 
> trigger a normal resizeStack handler to deal with that.
> 
> Ideally, the javascript part of this should be included by LC in the 
> standalone build, and I hope that’s what they plan at least when LC10 stable 
> ships (seems logical), but in the meantime - can someone please help get the 
> code right?
> 
> /Andreas
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription 
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode