JSignage:InteractiveTutorial2

Description

Advanced click handler

• We can make this demo a little fancier by changing the making the text color dependent on the value.

Source code

$.uiStyle = 'round';

var counter = 0, more, less, counterArea;

function getTextColor( value ) {
  if ( value > 0 )
    return 'green';
  else if ( value < 0 )
    return 'red';
  else
    return 'grey';
}

$('svg').add([
  more = $.pushButton( { left: 100, top: 100, width: 200, height: 60, fontWeight: 'bold', begin: 0 }, 'More' ),
  less = $.pushButton( { left: 400, top: 100, width: 200, height: 60, fontWeight: 'bold' }, 'Less' ),
  counterArea = $.textArea( {
    left: 700, top: 100, width: 100, height: 60,
    fontSize: 'max',
    textAlign: 'end',
    frame: { frameColor: 'black', padding: 5, frameSize: 2 }
  } ).text( $.tspan(0, { fill: getTextColor(0) } ) )
]);

more.click( function() {
  ++counter;
  counterArea.text( $.tspan( counter, { fill: getTextColor(counter) } ) );
});

less.click( function() {
  --counter;
  counterArea.text( $.tspan( counter, { fill: getTextColor(counter) } ) );
});