Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update Plugin API docs to include up-to-date docs for Track Invariant

  • Loading branch information...
commit f0eded885eeff1ef3496800cd8eba818114c6297 1 parent 0247ebb
@rwaldron rwaldron authored
Showing with 190 additions and 76 deletions.
  1. +190 −76 addon-development/_posts/2012-12-12-plugins.md
View
266 addon-development/_posts/2012-12-12-plugins.md
@@ -32,7 +32,7 @@ Popcorn also offers a plugin factory. Popcorn plugins are a way for developers t
{% highlight js linenos %}
// Pattern 1
// Provide a function that returns an object
- (function (Popcorn) {
+ (function( Popcorn ) {
Popcorn.plugin( "pluginName" , function( options ) {
// do stuff
// this refers to the popcorn object
@@ -40,10 +40,65 @@ Popcorn also offers a plugin factory. Popcorn plugins are a way for developers t
// You are required to return an object
// with a start and end property
return {
- start: function(){...},
- end: function(){...},
- frame: function(){...},
- toString: function(){...}
+ _setup: function( track ) {
+ // setup code, fire on initialization
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ _update: function( track ) {
+ // update code, fire on update/modification of a plugin created track event.
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ _teardown: function( track ) {
+ // teardown code, fire on removal of plugin or destruction of instance
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ start: function( event, track ) {
+ // fire on track.start
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ end: function( event, track ) {
+ // fire on track.end
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ frame: function( event, track ) {
+ // when frameAnimation is enabled, fire on every frame between start and end
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ toString: function() {
+ // provide a custom toString method for each plugin
+ // defaults to return start, end, id, and target
+ // this refers to the popcorn object
+ }
};
});
})(Popcorn);
@@ -52,38 +107,67 @@ Popcorn also offers a plugin factory. Popcorn plugins are a way for developers t
// Pattern 2
// Provide an object
// Popcorn will manage the events
- (function (Popcorn) {
+ (function( Popcorn ) {
Popcorn.plugin( "pluginName" , {
- _setup : function( options ) {
- // setup code, fire on initialization
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ _setup: function( track ) {
+ // setup code, fire on initialization
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- start: function( event, options ){
- // fire on options.start
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ _update: function( track ) {
+ // update code, fire on update/modification of a plugin created track event.
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ _teardown: function( track ) {
+ // teardown code, fire on removal of plugin or destruction of instance
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ start: function( event, track ) {
+ // fire on track.start
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- end: function( event, options ){
- // fire on options.end
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ end: function( event, track ) {
+ // fire on track.end
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- frame: function( event, options ) {
- // when frameAnimation is enabled, fire on every frame between start and end
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ frame: function( event, track ) {
+ // when frameAnimation is enabled, fire on every frame between start and end
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- toString: function( event, options ) {
- // provide a custom toString method for each plugin
- // defaults to return start, end, id, and target
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
- }
+ toString: function() {
+ // provide a custom toString method for each plugin
+ // defaults to return start, end, id, and target
+ // this refers to the popcorn object
+ }
});
})(Popcorn);
@@ -91,42 +175,72 @@ Popcorn also offers a plugin factory. Popcorn plugins are a way for developers t
// Pattern 3
// Provide an object with a plugin wide name space
// Popcorn will manage the events
- (function (Popcorn) {
- Popcorn.plugin( "pluginName", (function(){
-
+ (function( Popcorn ) {
+ Popcorn.plugin( "pluginName", (function() {
+
// Define plugin wide variables out here
-
+
return {
- _setup : function( options ) {
- // setup code, fire on initialization
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ _setup: function( track ) {
+ // setup code, fire on initialization
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ _update: function( track ) {
+ // update code, fire on update/modification of a plugin created track event.
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- start: function( event, options ){
- // fire on options.start
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ _teardown: function( track ) {
+ // teardown code, fire on removal of plugin or destruction of instance
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- end: function( event, options ){
- // fire on options.end
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ start: function( event, track ) {
+ // fire on track.start
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- frame: function( event, options ) {
- // when frameAnimation is enabled, fire on every frame between start and end
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
+ end: function( event, track ) {
+ // fire on track.end
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
},
- toString: function( event, options ) {
- // provide a custom toString method for each plugin
- // defaults to return start, end, id, and target
- // event refers to the event object
- // options refers to the options passed into the plugin on init
- // this refers to the popcorn object
- }
+ frame: function( event, track ) {
+ // when frameAnimation is enabled, fire on every frame between start and end
+
+ // |event| refers to the event object
+
+ // |track| refers to the TrackEvent created by the options passed
+ // into the plugin on init
+
+ // this refers to the popcorn object
+ },
+ toString: function() {
+ // provide a custom toString method for each plugin
+ // defaults to return start, end, id, and target
+ // this refers to the popcorn object
+ }
+ };
})();
})(Popcorn);
{% endhighlight %}
@@ -139,29 +253,29 @@ Butter, popcorn’s point and click authoring tool offers plugin authors a turnk
// Pattern 3
// Provide a plugin manifest with your plugin
// This allows for butter to register your plugin
- (function (Popcorn) {
- Popcorn.plugin( "pluginName", (function(){
-
+ (function( Popcorn ) {
+ Popcorn.plugin( "pluginName", (function() {
+
// Define plugin wide variables out here
-
+
return {
// Define a manifest for the butter authoring tool to use
manifest: {
// Plugin meta data
// will be used in the butter ui
- about:{
- name: "name of plugin",
- version: "semantic version",
- author: "author name",
- website: "author url"
+ about: {
+ name: "name of plugin",
+ version: "semantic version",
+ author: "author name",
+ website: "author url"
},
// Object representation of the plugin options
// a form will be constructed against this object
- options:{
- start : {elem:'input', type:'text', label:'In'},
- end : {elem:'input', type:'text', label:'Out'},
- target : 'id-selector',
- text : {elem:'input', type:'text', label:'Text'}
+ options: {
+ start: { elem: "input", type: "text", label: "In" },
+ end: { elem: "input", type: "text", label: "Out" },
+ target: "id-selector",
+ text: { elem: "input", type: "text", label: "Text" }
}
},
_setup: function( options ){...},
Please sign in to comment.
Something went wrong with that request. Please try again.