backbone.statemachine.js
function(instance) {
        // If this is the first state machine registered in the debugger,
        // we create the debugger's html.
        if (this.viewsArray.length === 0) {
          var container = this.el = $('<div id="backbone-statemachine-debug-container">'+
            '<h3>backbone.statemachine: DEBUGGER</h3>'+
            '<a id="backbone-statemachine-debug-hideshow">hide</a>'+
            '<style>'+
            '#backbone-statemachine-debug-container{background-color:rgba(0,0,0,0.5);position:absolute;height:300px;width:300px;right:0;top:0;padding:10px;z-index:10;-moz-border-radius-bottomleft:30px;-webkit-border-radius-bottomleft:30px;border-bottom-left-radius:30px;}'+
            '#backbone-statemachine-debug-container.collapsed{height:20px;width:60px;}'+
            '#backbone-statemachine-debug-container a{color:blue;cursor:pointer;}'+
            '#backbone-statemachine-debug-container h3{margin:0;text-align:center;color:white;margin-bottom:0.5em;}'+
            '.backbone-statemachine-debug{width:60px;height:60px;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;text-align:center;}'+
            '.backbone-statemachine-debug .state{font-weight:bold;}'+
            'a#backbone-statemachine-debug-hideshow{position:absolute;bottom:12px;left:12px;font-weight:bold;color:white;}'+
            '</style></div>'
          ).appendTo($('body'))

          $('#backbone-statemachine-debug-hideshow', this.el).click(function(event){
            event.preventDefault()
            if (this.collapsed) {
              $(container).removeClass('collapsed').children().show()
              $(this).html('hide')
              this.collapsed = false
            } else {
              $(container).addClass('collapsed').children().hide()
              $(this).html('show').show()
              this.collapsed = true
            }
          })
        }
        // create the debug view, pick a random color for it, and add it to the debugger.
        var debugView = new this({model: instance})
        var bgColor = this.pickColor()
        $(debugView.el).appendTo(this.el).css({'background-color': bgColor})
        debugView.render()
        if (this.collapsed) $(debugView.el).hide()
        this.viewsArray.push(debugView)
      }
function(instance) {
        // If this is the first state machine registered in the debugger,
        // we create the debugger's html.
        if (this.viewsArray.length === 0) {
          var container = this.el = $('<div id="backbone-statemachine-debug-container">'+
            '<h3>backbone.statemachine: DEBUGGER</h3>'+
            '<a id="backbone-statemachine-debug-hideshow">hide</a>'+
            '<style>'+
            '#backbone-statemachine-debug-container{background-color:rgba(0,0,0,0.5);position:absolute;height:300px;width:300px;right:0;top:0;padding:10px;z-index:10;-moz-border-radius-bottomleft:30px;-webkit-border-radius-bottomleft:30px;border-bottom-left-radius:30px;}'+
            '#backbone-statemachine-debug-container.collapsed{height:20px;width:60px;}'+
            '#backbone-statemachine-debug-container a{color:blue;cursor:pointer;}'+
            '#backbone-statemachine-debug-container h3{margin:0;text-align:center;color:white;margin-bottom:0.5em;}'+
            '.backbone-statemachine-debug{width:60px;height:60px;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;text-align:center;}'+
            '.backbone-statemachine-debug .state{font-weight:bold;}'+
            'a#backbone-statemachine-debug-hideshow{position:absolute;bottom:12px;left:12px;font-weight:bold;color:white;}'+
            '</style></div>'
          ).appendTo($('body'))

          $('#backbone-statemachine-debug-hideshow', this.el).click(function(event){
            event.preventDefault()
            if (this.collapsed) {
              $(container).removeClass('collapsed').children().show()
              $(this).html('hide')
              this.collapsed = false
            } else {
              $(container).addClass('collapsed').children().hide()
              $(this).html('show').show()
              this.collapsed = true
            }
          })
        }
        // create the debug view, pick a random color for it, and add it to the debugger.
        var debugView = new this({model: instance})
        var bgColor = this.pickColor()
        $(debugView.el).appendTo(this.el).css({'background-color': bgColor})
        debugView.render()
        if (this.collapsed) $(debugView.el).hide()
        this.viewsArray.push(debugView)
      }
function ( instance ) { // If this is the first state machine registered in the debugger, // we create the debugger's html. if ( this . viewsArray . length === 0 ) { var container = this . el = $ ( '<div id="backbone-statemachine-debug-container">' + '<h3>backbone.statemachine: DEBUGGER</h3>' + '<a id="backbone-statemachine-debug-hideshow">hide</a>' + '<style>' + '#backbone-statemachine-debug-container{background-color:rgba(0,0,0,0.5);position:absolute;height:300px;width:300px;right:0;top:0;padding:10px;z-index:10;-moz-border-radius-bottomleft:30px;-webkit-border-radius-bottomleft:30px;border-bottom-left-radius:30px;}' + '#backbone-statemachine-debug-container.collapsed{height:20px;width:60px;}' + '#backbone-statemachine-debug-container a{color:blue;cursor:pointer;}' + '#backbone-statemachine-debug-container h3{margin:0;text-align:center;color:white;margin-bottom:0.5em;}' + '.backbone-statemachine-debug{width:60px;height:60px;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;text-align:center;}' + '.backbone-statemachine-debug .state{font-weight:bold;}' + 'a#backbone-statemachine-debug-hideshow{position:absolute;bottom:12px;left:12px;font-weight:bold;color:white;}' + '</style></div>' ) . appendTo ( $ ( 'body' ) ) $ ( '#backbone-statemachine-debug-hideshow' , this . el ) . click ( function ( event ) { event . preventDefault ( ) if ( this . collapsed ) { $ ( container ) . removeClass ( 'collapsed' ) . children ( ) . show ( ) $ ( this ) . html ( 'hide' ) this . collapsed = false } else { $ ( container ) . addClass ( 'collapsed' ) . children ( ) . hide ( ) $ ( this ) . html ( 'show' ) . show ( ) this . collapsed = true } } ) } // create the debug view, pick a random color for it, and add it to the debugger. var debugView = new this ( { model : instance } ) var bgColor = this . pickColor ( ) $ ( debugView . el ) . appendTo ( this . el ) . css ( { 'background-color' : bgColor } ) debugView . render ( ) if ( this . collapsed ) $ ( debugView . el ) . hide ( ) this . viewsArray . push ( debugView ) }
Registers a state machine in the debugger, so that a debug view will be created for it.
Registers a state machine in the debugger so that a debug view will be created for it .