xTalk <-> JavaScript ES6 / HTML5 Translations

[OpenXTalkPaul]

I'm going to use this thread to store a list of xTalk sort of syntax to JavaScript ES6 / HTML5 Translations, that is JS code translations of past, present or future xTalk syntax, functions, commands properties. I'm trying to keep naming to the naming used in HyperCard (first) and LC / OXT Community (second), any other previous implementation (third), in an effort to have some consistency between dialects.

These snippets come from either my HC Simulator 'Simscript' additions or from working with the Emscripten port of the community engine. Feel free to use them for anything, no one owes me anything for doing it.

Some of this might be specific to HyperCard Simulator, but the rest of it should generally be useable JS code

Code: Select all

-------------------------------- begin OpenXTalk additions -----------------------------------------------------------------
function openStacks
  const tstacks = document.getElementsByTagName("stack-part");
  let myString = "";
   for (const element of tstacks) { myString += "stack \\"" + element.name.toString() + "\\"\\n" ; }
   return myString;
end openStacks
function stacksInUse
  return the openStacks
end stacksInUse

function topstack
  let theStacks = document.getElementsByTagName('stack-part');
  const lastElement = theStacks[theStacks.length - 1];
  return lastElement.toString();
end topstack

function userAgent
-- full userAgent info:
return window.navigator.userAgent;
end userAgent

function userLanguage
return navigator.language;
end userLanguage

function isOnline
return navigator.onLine;
end isOnline

function platform
return navigator.platform;
end platform

function screenOrientation
return ''+ screen.orientation.type
end screenOrientation

function mobileDeviceOrientation
return the screenOrientation
end mobileDeviceOrientation

function screenDepth
return window.screen.colorDepth;
end screenDepth

function screenPixelScale
return window.devicePixelRatio;
end screenPixelScale

function screenRect
return ''+ screen.left + ',' + screen.top +','+ window.screen.height + ',' + window.screen.width;
end screenRect

function processor
let cores = navigator.hardwareConcurrency;
return 'js ' + cores.toString() + ' cores';
end processor

-- set the fullscreen of stack....
on setFullscreen
document.fullscreenElement;
//document.requestFullscreen();
document.fullScreen;
end setFullscreen

function fullscreen
return document.fullscreenElement !== null;
end fullscreen

-- you can get or set properties
on setBackDrop pColor
result = document.body.style.background = pColor ;
end setBackDrop

function backDrop
return document.body.style.background;
end backDrop


function gamePadAPIAvailable
return ('getGamepads' in navigator);
end gamePadAPIAvailable

function webMIDIAvailable
-- return ('midi' in navigator);
if(typeof(window.requestMIDIAccess)!="undefined"){
     return false
}else{
     return true
}
end webMIDIAvailable

function webMIDIAvailable
    return ('requestMIDIAccess' in navigator);
if(typeof(window.requestMIDIAccess)!="undefined"){
     return false
}else{
     return true
}
end webMIDIAvailable

function tinySynthAvailable
return ('WebAudioTinySynth' in navigator);

if(typeof(window.WebAudioTinySynth)!="undefined"){
     return false
}else{
     return true
}
end tinySynthAvailable


on launchURL pURL
put char 1 to 8 of pURL into tTemp
if tTemp contains "https://" then
  var a = document.createElement('a');
  a.href = encodeURI(pURL);
  a.click();
else
   put "https://" before pURL
   var a = document.createElement('a');
   a.href = encodeURI(pURL);
   a.click();
end if
end launchURL

function systemAppearance
-- check for darkMode:
if the darkMode is true then
   return "dark"
else
   return "light"
end if
end systemAppearance

function darkMode
return window.matchMedia('(prefers-color-scheme:dark)').matches;
end darkMode

function milliseconds
return Date.now();
end milliseconds

function millisecs
return the milliseconds
end millisecs

function cursor
return this.stackOf().style.cursor ;
-- return document.body.style.cursor ;
end cursor

on setCursor pCursorName
if pCursorName is in "alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,ew-resize,grab,grabbing,help,move,n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,s-resize,se-resize,sw-resize,text,auto,vertical-text,w-resize,wait,zoom-in,zoom-out,initial" then
result = this.stackOf().style.cursor = pCursorName ;
result = document.body.style.cursor = pCursorName ;
else
exit setCursor
end if
end setCursor

-- basic clipboard write access:-- result = navigator.clipboard.writeText("Hello Clipboard!");
--- get our console-like text area (in the OXT Emscripten Engine wrapper webpage):-- result = document.getElementById('output').value;

Syntax like 'screenPixelScale' property is named same as LCS OXT,
While 'isOnline' or the 'userAgent' are syntax that I made up and which only make sense in a web-browser context.

[OpenXTalkPaul]

Here's another keyword/property I made up that only makes sense when running in a web browser context:
'get the currentURL' --- returns the URL address of the webpage the script is running in:

Implement in HC Sim with this:

Code: Select all

function currentURL 
  return window.location.href;
end currentURL

Please feel free to suggest alternative naming for the syntax.