I did a whole lot of hacking today on butter.js. I've been assigned two tickets to work on for Butter.
The first ticket is #69 - Click & Drag plugins to create events
The second ticket is #71 - DOM Object database for tracks
The first ticket is pretty straight forward. The current version of butter (0.1.1 ) lets the user click on available popcorn plug-ins, which are added to the timeline in "tracks" that correspond to each plug-in. I have been asked to make these plug-ins draggable, so that the user can select the desired plug-in and drop it on the track that they want to associate the plug-in with.
I started out by skimming through the source to identify the possible places I would need to focus my efforts on. After skimming through it, I set to work setting up each plug-in option that was generated as a draggable list item. Initially, I was unaware that the object could be cloned and attached to the body, so I spent some time fiddling with css styles that JQuery UI seemed determined to override no matter the cost... these css styles kept the draggable list item confined to the parent div it was appended to. Once I was directed towards Bobby Richter's Butter 0.3 demo, I was able to get the cloned list item lifted out of the div and free to move around the document. Here's a demo of it in action. If you click and drag the plug-ins, you will see that they move freely about the document. As for dropping... well we'll get there soon ;)
Ticket 71 called on me to enable tracks on the timeline to reference objects on the DOM rather than a track being confined to a single type of plug-in. In the future this will provide a mechanism for the page to drive the tracks on the timeline (and enable the use of templates!)
When I started on this ticket today I wasn't entirely sure how to approach it, but after investigating the current method of creating tracks I began to envision in my head how this could be done. I started by creating an object to act as an associative array of DOM objects. basically, it contains a series of keys and values like this: { "idOfObject" : { type: "typeOfDOMObect", ...}, ... }
After plugging that into the source code as a variable, I hooked it up so that a menu is created at the top of the page containing the DOM objects inside of that variable. I used JQuery's delegate function to add click events to each Item in the menu, this way when an item is clicked, that item is used to create an empty track on the timeline. Here's a demo of that functionality (it's not done yet)
After all this, I realized the potential for these two demos to be merged.... so I merged them into a new branch, and after a bit of work and a lot of tweaking, I created a demo that allows a user to drag plug-in events onto the DOM Objects to create a track event on that track. Here's that demo... enjoy :P (One thing: if the default video doesn't load, try using this one as the source: http://scotland.proximity.on.ca/cadecairos/sequence/test/assets/crockford.ogv )
There are a few things I need to work on still, which include making the track events target the same DOM object for each track in the preview pane. I also need to label the track events.
Who knows what tomorrow holds.