1 /* This is the constructor of the widget. It's called by the

     2    initialization routine.

     3 */

     4 IriSP.TutorialWidget = function(Popcorn, config, Serializer) {

     5   IriSP.Widget.call(this, Popcorn, config, Serializer);

     6   /* After having called the parent constructor, a couple objects are defined for us

     7      this._config contains all the configuration options passed in the config.

     8      this._id holds the id of the div where the widget has to draw himself

     9      this._serializer is an object containing the metadata that was request in the configuration 

    10      options.

    11   */

    12   

    13 }

    14 

    15 /* We need to create assign new prototype to TutorialWidget.prototype

    16    because we're going to declare methods in it */

    17 IriSP.TutorialWidget.prototype = new IriSP.Widget();

    18 

    19 /* This method draws the widget - it's called automatically by

    20    the initialization script.

    21  */

    22 IriSP.TutorialWidget.prototype.draw = function() {

    23     /* this.selector is a shortcut to jQuery(widget.container) - it's used everywhere in the code */

    24     this.selector.html('Hello');

    25     this.selector.css({

    26             "text-align" : "center",

    27             "padding": "10px 0",

    28             "font-size" : "14px"

    29         });

    30         

    31     /* The following is a list of idioms found throughout the code */

    32     var templ = IriSP.player_template; /* get the compiled template code for the player.html template - 

    33                                           templates are located in the src/templates directory and are automatically

    34                                           compiled and made available in the compiled file as IriSP.templatename_template (without the .html)

    35                                         */

    36     var res = IriSP.templToHTML(IriSP.player_template, {var: 1}); /* format the template with the variable 'var' */

    37     

    38     /* this._Popcorn is a handle on the Popcorn object. It exposes the API which is documented

    39        here : http://popcornjs.org/api

    40        currentTime is a Popcorn method that either returns or changes the currentTime.

    41        */

    42     var time = this._Popcorn.currentTime();    

    43     

    44     /* Listen to the IriSP.TutorialWidget.foo message. By convention, the name of

    45        a message is IriSP.widgetName.messageName */

    46     this._Popcorn.listen("IriSP.TutorialWidget.foo",

    47                           /* IriSP.wrap preserves this in the callback */

    48                           IriSP.wrap(this, this.fooMessageHandler));

    49     /* send a message, passing an object allong */

    50     this._Popcorn.trigger("IriSP.TutorialWidget.foo", {name: "Dave", surname: "Grohl"});

    51 };

    52 

    53 /* Handler for the IriSP.foo message */

    54 IriSP.TutorialWidget.prototype.fooMessageHandler = function(param) {

    55   

    56   // show that this is preserved correctly.

    57   console.log(this !== window, this);

    58   

    59   this.selector.append(IriSP.templToHTML("<h2>{{ name }}, {{ surname }}</h2>", {name: param.name, surname: param.surname}));

    60   return;

    61 };