File: Examples/Example_2.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin   jQuery FSM   Examples/Example_2.html   Download  
File: Examples/Example_2.html
Role: Example script
Content type: text/plain
Description: Example
Class: jQuery FSM
Animate page elements using Finite State Machines
Author: By
Last change: update to jquery 3.7.1
Date: 7 months ago
Size: 8,393 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head> <title>iFSM in action! iFSM and submachines and promises...</title> <script type="text/javascript" src="../extlib/jquery.min.js"></script> <script type="text/javascript" src="../extlib/jquery.dotimeout.js"></script> <script type="text/javascript" src="../extlib/jquery.attrchange.js"></script> <script type="text/javascript" src="../iFSM.js"></script> <style type="text/css"> html { font-family: Helvetica, Arial, sans-serif; } body { padding: 0 20px; } button { margin: 0 2px; font-size: 20px; border: 1px solid #333; width: 70px; text-shadow: 0 -1px 0 #333; border-radius: 5px; } button.on { color: #dfd; background: #00aa00; background: -moz-linear-gradient(top, rgba(0,153,0,1) 0%, rgba(0,119,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,153,0,1)), color-stop(100%,rgba(0,119,0,1))); background: -webkit-linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%); background: -o-linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%); background: -ms-linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%); background: linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%); } button.off { color: #fdd; background: #CC0000; background: -moz-linear-gradient(top, rgba(204,0,0,1) 0%, rgba(153,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,0,0,1)), color-stop(100%,rgba(153,0,0,1))); background: -webkit-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%); background: -o-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%); background: linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%); } </style> <script type="text/javascript" id="iFSMscript"> var aStateDefinitionButton = { ButtonCountdown : { enterState : { init_function : function (){ this.myUIObject.html("on").attr({'class':'on'}); this.opts.counter=3; this.opts.andMachineTest.trigger('buttonRestart',this.myUIObject.attr('id')); } }, exitState : { init_function : function () { this.myUIObject.html("wait"); } }, click : { process_event_if : '(this.opts.counter<=0)', propagate_event_on_refused : 'notReady', next_state : 'ButtonWait' }, notReady : { init_function : function (){this.myUIObject.html(this.opts.counter);this.opts.counter=this.opts.counter-1;} }, start : { propagate_event: ['enterState','click'], } }, ButtonWait : { enterState : { init_function : function (){ this.myUIObject.trigger('setWait'); this.opts.andMachineTest.trigger('buttonWait',this.myUIObject.attr('id')); } }, setWait : { how_process_event : {delay:1000}, next_state : 'ButtonStop' }, }, ButtonStop : { enterState : { init_function : function (){ this.myUIObject.html("off").attr({'class':'off'}); this.opts.andMachineTest.trigger('buttonOff',this.myUIObject.attr('id')); }, }, click : { next_state : 'ButtonCountdown' } }, } var ManageFirstWaitButton = { FirstTime : { testFirstTime : { init_function : function(){this.trigger('setText','You pass in "mode wait" for the first time!');}, next_state : 'NotFirstTime', } }, NotFirstTime : { testFirstTime : { init_function : function(){this.trigger('setText','It is not the first time you pass in "mode wait" for this button!');}, } }, DefaultState : { start : { next_state : 'FirstTime', }, } }; var ButtonWaitEvents = { enterState : { propagate_event : 'testFirstTime', }, delegate_machines : { 'manageFirstWait' : { submachine : ManageFirstWaitButton, no_reinitialisation : true, }, } } var ManageStatusButton1 = { NoButtonWait :{}, ButtonWait : $.extend(true, {}, ButtonWaitEvents), //a way to use and share a unique definition of a State ButtonOff :{}, ButtonRestart :{}, DefaultState : { start : { next_state : 'NoButtonWait' }, onoff_button1_Wait : { next_state : 'ButtonWait' }, onoff_button1_Off : { next_state : 'ButtonOff' }, onoff_button1_Restart : { next_state : 'ButtonRestart' }, } } var ManageStatusButton2 = { NoButtonWait :{}, ButtonWait : $.extend(true, {}, ButtonWaitEvents), ButtonOff :{}, ButtonRestart :{}, DefaultState : { start : { next_state : 'NoButtonWait' }, onoff_button2_Wait : { next_state : 'ButtonWait' }, onoff_button2_Off : { next_state : 'ButtonOff' }, onoff_button2_Restart : { next_state : 'ButtonRestart' }, } } var ManageStatusButton3 = { NoButtonWait :{}, ButtonWait : $.extend(true, {}, ButtonWaitEvents), ButtonOff :{}, ButtonRestart :{}, DefaultState : { start : { next_state : 'NoButtonWait' }, onoff_button3_Wait : { next_state : 'ButtonWait' }, onoff_button3_Off : { next_state : 'ButtonOff' }, onoff_button3_Restart : { next_state : 'ButtonRestart' }, } } var AndMachineTest = { WaitForChange : { buttonWait : { init_function : function(param,event,data) {this.trigger(data+'_Wait');}, next_state : 'TestToChangeB4', propagate_event : 'doTest', }, buttonOff : { init_function : function(param,event,data) {this.trigger(data+'_Off');}, next_state : 'TestToChangeB4', propagate_event : 'doTest', }, buttonRestart : { init_function : function(param,event,data) {this.trigger(data+'_Restart');}, next_state : 'TestToChangeB4', propagate_event : 'doTest', } }, TestToChangeB4 : { delegate_machines : { 'manageButton1' : { submachine : ManageStatusButton1, no_reinitialisation : true, }, 'manageButton2' : { submachine : ManageStatusButton2, no_reinitialisation : true, }, 'manageButton3' : { submachine : ManageStatusButton3, no_reinitialisation : true, }, }, doTest : { next_state_on_target : { condition : '&&', submachines : { 'manageButton1' : { condition : '', target_list : ['ButtonWait'], }, 'manageButton2' : { target_list : ['ButtonWait'], }, 'manageButton3' : { condition : 'not', target_list : ['ButtonOff'], }, }, }, next_state : 'changeButton4', propagate_event : 'change', }, 'change': //we did not change state... { next_state : 'WaitForChange', }, }, changeButton4 : { 'change' : { init_function: function(){$('#onoff_button4').trigger('click');}, next_state : 'WaitForChange', } }, DefaultState : { setText : { init_function: function(param,event,data){$('#info').html(data)}, propagate_event : 'removeInfo', }, removeInfo : { how_process_event : {delay:2000}, init_function: function(param,event,data){$('#info').html('')}, } } } $(document).ready(function() { $('#onoff_button5').iFSM(AndMachineTest,{initState:'WaitForChange'}); $(".onoff").iFSM(aStateDefinitionButton,{initState:'ButtonCountdown',andMachineTest:$('#onoff_button5').getFSM(AndMachineTest)}); }); </script> </head> <body style="margin:100px;"> <h2>Test on SubMachines and 'next state' with conditions on submachine states</h2> <p>click on button will change their states (ButtonCountdown -> ButtonWait -> ButtonStop -> ButtonCountdown...)</p> <p>when you click on Button 1, 2 and 3, a special machine store their status (countdown/wait/stop) in respective submachines</p> <p>if button 1 and 2 are on 'wait' and button 3 is not 'Off', button 4 will change</p> <button class="onoff" id="onoff_button1"></button> <button class="onoff" id="onoff_button2"></button> <button class="onoff" id="onoff_button3"></button> <button class="onoff" id="onoff_button4"></button> <button class="onoff" id="onoff_button5"></button> <p id="info"></p> <p>provided by <a href="http://www.intersel.fr">Intersel</a></p> <br><br> <pre> <script>document.write($('#iFSMscript').html())</script> </pre> </body> </html>