How to use addEventListener for browser window resizing in web deployment?
Alex Tweedly
alex at tweedly.net
Sat Aug 6 13:45:42 EDT 2022
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.
<html>
<head>
<meta charset="utf-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LiveCode Conference - Meeting Space</title>
<style>
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;
background:
url('https://michael.on-rev.com/Meeting%20Space/spinner.gif') no-repeat
center center;
background-color:#fafafa !important;
border-top: 0px solid #282828;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0)
}
to {
-moz-transform: rotate(360deg)
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0)
}
to {
-o-transform: rotate(360deg)
}
}
@keyframes rotation {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
#status {
position:absolute;
left: 0px;
bottom: 50px;
z-index: 1000;
vertical-align: bottom;
font-weight: 700;
color: #787878
text-align: center;
width:100%;
line-height: 90px;
}
#progress {
height: 20px;
width: 30px
color:green;
}
#controls {
display: inline-block;
float: right;
vertical-align: top;
margin-top: 30px;
margin-right: 20px
}
#output {
width: 100%;
height: 200px;
margin: 0 auto;
margin-top: 10px;
display: block;
background-color: #000;
color: #fff;
font-family: 'Lucida Console',Monaco,monospace;
outline: 0
}
</style>
<script src="https://js.stripe.com/v3/"
crossorigin="anonymous"></script>
<style>
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
#overlay-background {
border-radius: 5px;
border: 1px solid #cccccc;
padding: 20px;
background-color: #fff;
margin: 20%;
}
#card {
border-radius: 5px;
border: 1px solid #cccccc;
padding: 15px;
margin-bottom: 10px;
}
button {
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#submit {
background-color: #DA7B8A;
color: #fff;
}
#submit:hover:enabled {
background-color: #9A6B72;
}
#submit:disabled {
color: #ccc;
}
#cancel {
color: #fff;
}
#cancel:hover:enabled {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="spinner" id="spinner"></div>
<div class="emscripten" id="status">Loading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden="1"></progress>
</div>
<div id="emscripten_main">
<canvas class="emscripten" id="canvas"
oncontextmenu="event.preventDefault()"></canvas>
</div>
<textarea id="output" style="display:none;"></textarea>
<script>
var statusElement = document.getElementById("status")
, progressElement = document.getElementById("progress")
, spinnerElement = document.getElementById("spinner")
, Module = {
preRun: [],
postRun: [],
print: function() {
var e = document.getElementById("output");
return e && (e.value = ""),
function(t) {
arguments.length > 1 && (t =
Array.prototype.slice.call(arguments).join(" ")),
console.log(t),
e && (e.value += t + "\n",
e.scrollTop = e.scrollHeight)
}
}(),
printErr: function(e) {
arguments.length > 1 && (e =
Array.prototype.slice.call(arguments).join(" ")),
console.error(e)
},
canvas: function() {
var e = document.getElementById("canvas");
return e.addEventListener("webglcontextlost",
(function(e) {
alert("WebGL context lost. You will need to reload
the page."),
e.preventDefault()
}
), !1),
e
}(),
setStatus: function(e) {
if (Module.setStatus.last || (Module.setStatus.last = {
time: Date.now(),
text: ""
}),
e !== Module.setStatus.text) {
var t = e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/)
, n = Date.now();
t && n - Date.now() < 30 || (t ? (e = t[1],
progressElement.value = 100 * parseInt(t[2]),
progressElement.max = 100 * parseInt(t[4]),
progressElement.hidden = !1,
spinnerElement.hidden = !1) :
(progressElement.value = null,
progressElement.max = null,
progressElement.hidden = !0,
e || (onLoaded())),
statusElement.innerHTML = e)
}
},
totalDependencies: 0,
monitorRunDependencies: function(e) {
this.totalDependencies =
Math.max(this.totalDependencies, e),
Module.setStatus(e ? "Preparing... (" +
(this.totalDependencies - e) + "/" + this.totalDependencies + ")" :
"Starting App")
}
};
Module.setStatus("Loading..."),
window.onerror = function(e) {
Module.setStatus("Exception thrown, see JavaScript console"),
spinnerElement.style.display = "none",
Module.setStatus = function(e) {
e && Module.printErr("[post-exception status] " + e)
}
}
function onLoaded() {
return true;
}
</script>
<script>
function getInnerHeight() {
return window.innerHeight;
}
window.addEventListener("resize", function(data){
if (document.liveCode) {
var myStack =
document.liveCode.findStackWithName("Meeting Space");
if (myStack) {
myStack.browserResized(getInnerHeight());
}
}
});
document.getElementById("canvas").addEventListener("wheel",
function(event) {
event.preventDefault();
if (document.liveCode) {
var myStack =
document.liveCode.findStackWithName("Meeting Space");
if (myStack) {
myStack.scrollEvent(event.deltaX, event.deltaY);
}
}
});
</script>
<script async src="standalone-10.0.0-dp-3.js"></script>
<div id="overlay" style="display:none;">
<div id="overlay-background">
<div id="card"></div>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</div>
<script>
const stripe =
Stripe("pk_test_51J5qZpI8kDUYhBxrrHHUnkjaku4wkg7QHTYMh9Qe2gTLowh48YAFgS2zI5HOGKqmWjLj2BRIgdtUQo2z1VRKivSV00lTFGjzQb");
const elements = stripe.elements();
const card = elements.create("card");
card.mount("#card");
function displayFetchCardDetails() {
card.clear();
document.getElementById("submit").disabled = true;
document.getElementById("overlay").style.display = "block";
}
card.on("change", pEvent => {
if (pEvent.complete) {
document.getElementById("submit").disabled = false;
} else if (pEvent.error != undefined) {
document.getElementById("submit").disabled = true;
}
});
document.getElementById("submit").addEventListener("click", pEvent => {
document.getElementById("overlay").style.display = "none";
stripe.createToken(card).then((pResult) => {
if (pResult.error != undefined) {
document
.liveCode
.findStackWithName("Meeting Space")
.stripeFetchCardDetailsOnError(pResult.error.message);
} else {
document
.liveCode
.findStackWithName("Meeting Space")
.stripeFetchCardDetailsOnSuccess(pResult.token.id);
}
});
});
document.getElementById("cancel").addEventListener("click", pEvent => {
document.getElementById("overlay").style.display = "none";
document
.liveCode
.findStackWithName("Meeting Space")
.stripeFetchCardDetailsOnCancel();
});
</script>
</body>
</html>
On 06/08/2022 18:14, Andreas Bergendal via use-livecode wrote:
> 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 at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
More information about the use-livecode
mailing list