#362 ✓ resolved
boaz (at bocoup)

Plugin conventions

Reported by boaz (at bocoup) | February 24th, 2011 @ 01:25 AM | in 0.9 (closed)

I think we should come up with some conventions for plugin interaction with the DOM so that a Popcorn.js users can rely on a consistent classname/id structure and general behavior.

We might also consider removing plugin fragments from the DOM after a certain point. I am not sure what the best practice is for this.

Currently we leave it to the developer to decide how they are going to interact with the DOM. This is probably the best approach to allow for flexibility. Given that we are expecting Popcorn.js users to create rich stateful experiences, however, we should consider creating a couple of more fleshed out plugin patterns that go into detail about best practices for interacting with the DOM in different circumstances.

1) Is there a classname I should that every plugin should wrap it's innerhtml in?
2) Are there different abstract wrapping classnames that I should use for different types of popcorn componants? Eg: .over-video, .one-of-many, .stand-alone, etc?
3) Do I teardown my plugin?

Dojo, YUI and jQuery UI all have this kind of generally-agreed-upon setup, teardown, classname naming and id naming convention. We might consider agreeing upon answers to the above questions.

Consider the attached screenshot of the DOM tree that I am working with at http://dev.webmademovies.org. I am having some trouble writing CSS for this demo. Are we interested in supporting this kind of use case?

Comments and changes to this ticket

  • db48x

    db48x February 24th, 2011 @ 06:41 AM

    Sounds like a good idea to me. I think the place to start is putting a consistent class on the elements a plugin creates. Using the name of the plugin is probably the best bet. Or perhaps 'foo-instance' or something.

  • boaz (at bocoup)
  • Rick

    Rick February 24th, 2011 @ 09:29 AM

    This is a great idea.

    I think Popcorn should handle this in the core - no need to add more "steps" to the plugin authoring process.

  • annasob

    annasob March 24th, 2011 @ 04:45 PM

    Would this be another tie in for an effect #275? Or is this more of a what to name the div each plugin creates so that a user can write CSS around it?

  • Rick

    Rick March 24th, 2011 @ 04:51 PM

    @annasob this would mean that plugins would create dom elements with ids/classnames that conformed to a prefixed scheme, ie. an element with an id="popcorn-footnote" or class set like ".popcorn-maps"

  • Rick

    Rick March 24th, 2011 @ 05:49 PM

    • Milestone changed from 0.5 to 0.6
    • Milestone order changed from “2” to “0”

    Pushing to 0.6 unless someone else can tackle

  • annasob

    annasob April 15th, 2011 @ 06:29 PM

    This seems like a documentation issue to me. Whether popcorn created divs or plugins create divs their name/id will still need to be documented.

  • annasob

    annasob May 10th, 2011 @ 03:43 PM

    • Milestone changed from 0.6 to 0.7
    • Milestone order changed from “12” to “0”
  • Scott Downe

    Scott Downe June 2nd, 2011 @ 04:27 PM

    • Milestone changed from 0.7 to 0.8
    • Milestone order changed from “1” to “0”
  • David Humphrey

    David Humphrey July 20th, 2011 @ 02:57 PM

    • Milestone changed from 0.8 to 0.9

    This will apply to the things we ship, and we need to normalize how we do IDs and such, and then document it later (before 1.0). Moving to 0.9.

  • brianchirls

    brianchirls September 2nd, 2011 @ 12:23 PM

    I've started a separate ticket for "Plugin Best Practices" at #706, as it covers a range of other issues.

    I'd like to include a standardized scheme for classes, as it's a great idea. I like "popcorn-" followed by the plugin name. I considered just the plugin name, but something like "footnote" is too generic and likely to collide.

    For once, I vote for handling this in plugins, not the core, since there are likely to be exceptions. For example, not every plugin will create a new div, such as "code."

  • Rick

    Rick September 2nd, 2011 @ 12:49 PM

    • State changed from “new” to “resolved”

    I'm going to defer to your new ticket as a broader look at plugin conventions

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins


Referenced by