Use javascript to bring unimaginable features to your plugins and fires

Javascript support is what makes Toustrm so different, unique and amazing. Added to the ability to manipulate page design via css, javascript becomes an engine of interactions, logic, and animations.

To add programming to your plugin, access the javascript editor at the bottom in the right menu of the plugin editor or press Ctrl + Alt + J. Any code you enter and save in this editor will be incorporated into your plugin. But beware, the code will only be compiled on your cell phone, and it is not possible, for security reasons, to see its effects on the Desktop Client. Warning: Javascript codes can be dangerous. Do not use this feature if you do not have prior knowledge of the language.

Global selectors and functions

The plugin selector is screen-win-plugin and the fires are their fire_id followed by .fire class. You can also use classes to make your selections. The global function that emits an event is: sendActions([{type:string, value:string},...])

Example script to remove a fire when clicking on another one:


const fire = document.querySelector('#fire-win-9-8 .fire');

fire.addEventListener("click",() => {

    document.getElementById('fire-win-14-8').remove()

})

Using variables to control the flow of execution:

let sel = el => document.querySelector(`#fire-win-${el} .fire`);

let control = false;

sel('9-8').addEventListener('click',ev=>{
    if(control){
        sel('14-8').style.background = 'red';
        control = false;
    } else {
        sel('14-8').style.background = 'blue';
        control = true;
    }
})

You can use all Javascript APIs to your advantage, such as localStorage to save your plugin state for the next run:

const sel = el => document.querySelector(`#fire-win-${el} .fire`);
const fire1 = sel('9-8'), fire2 = sel('14-8');
let get = item => localStorage.getItem(item);
let set = (item, value) => localStorage.setItem(item, value);

let control = get('control') === 'on' ? true : false;

if(control)
  fire2.style.background = 'red';
else
    fire2.style.background = 'blue';


fire1.addEventListener('click',ev=>{
  if(control){
    fire2.style.background = 'red';
    control = false;
    set('control','on')
  } else {
    fire2.style.background = 'blue';
    control = true;
    set('control','off')
  }
})

And, of course, you can also send your Actions programmatically:

const sel = el => document.querySelector(`#fire-win-${el} .fire`);
const fire1 = sel('9-8');
fire1.addEventListener('click',ev=>{
  sendActions([
    {
      type:'keypress',value:'AudioVolUp'
    }
  ])
})

sendActions

Types

keypress

keyhold

keyrelease

releaseall

writetext

writetextterminal

delay

triggerfire

command

goto

backhome

Keys (value)

keys[i];