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@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
