track_template.js

var utopiary = require("../../../lib/ifi/utopiary.js"),
    topiclogic = require("../../../lib/ifi/topiclogic.js"),
    screenplay = require("../../../lib/ifi/client/screenplay.js");

var $ = screenplay.$,
    getBaseName = topiclogic.getBaseName,
    getRootTopic = topiclogic.getRootTopic;

var albumSource = {
    hello:{
        chorus:[
            "Hello, I love you",
            "Won't you tell me your name?",
            "Hello, I love you",
            "Let me jump in your game",
        ],
        verses:[
            [
                "She's walking down the street",
                "Blind to every eye she meets",
                "Do you think you'll be the guy",
                "To make the queen of the angels sigh?",
            ],
            [
                "She holds her head so high",
                "Like a statue in the sky",
                "Her arms are wicked, and her legs are long",
                "When she moves my brain screams out this song",
            ],
            [
                "Sidewalk crouches at her feet",
                "Like a dog that begs for something sweet",
                "Do you hope to make her see, you fool?",
                "Do you hope to pluck this dusky jewel?",
            ],
        ],
        conclusion:[
            "Hello, hello, hello, hello",
            "Hello, hello, hello, I want you",
            "Hello, I need my baby",
            "Hello, hello, hello, hello",
            "Hello, hello, hello, hello",
        ],
    }
};

$(function(){

    var tree = new utopiary.TopicTree();

    function findInclusive(from, selector){
        return $(from).find(selector).addBack(selector);
    }

    function isAttached(q, ancestorq){
        return ancestorq.find(q).length > 0;
    }

    function pivotControl(topic, dom, topicPath, domSelector, binding){

        var matchingControls = findInclusive(dom, domSelector);

        //parent and reference siblings caret for insertion
        var preceding = matchingControls.first().prev();
        var following = matchingControls.last().next();

        //remove descendant controls
        matchingControls.detach();

        //get example for cloning
        var example = matchingControls.first();

        var topicRegex =  tree.globToRegExp(topiclogic.resolve(topic, topicPath));

        var finalizers = {};

        var topicAddedHandler = function(topic){
            if(topic.match(topicRegex)) { //TODO make more effßicient - top-level item listener type? top level topicAddedMatch listener type?

                var control = example.clone();   //create album control
                var unbind = binding(topic, control);  //schedule creation of song controls

                finalizers[topic] = function () {
                    unbind();                           //undo creation and binding of song controls
                    if (preceding === control) {            //update caret
                        preceding = control.prev();
                    }
                    control.remove();                   //destroy album control
                    delete finalizers[topic];        //dispose of this finalizer
                }

                if (preceding.length && isAttached(preceding, dom)) {      //preceding sibling exists
                    preceding.after(control);
                }
                else if (following.length && isAttached(following, dom)) { //following sibling exists
                    following.before(control);
                }
                else {                                               //only parent exists
                    dom.prepend(control);
                }

                preceding = control; //update caret
            }
        };

        var topicRemovedHandler = function(topic){
            if(topic.match(topicRegex)) {
                finalizers[topic]();
            }
        }

        tree.addCatchupListener("tree", "topicAdded", topicAddedHandler)
        tree.addListener("tree", "topicRemoved", topicRemovedHandler);

        return function(){
            tree.removeListener(topicAddedHandler);
            tree.removeListener(topicRemovedHandler);
            _.forIn(finalizers, function(finalizer){
                finalizer();
            })
        }
    }

    function pivot(relativePath, relativeSelector, binder){
        return function(topic, control){
            return pivotControl(topic, control, relativePath, relativeSelector, binder);
        }
    }

    var content = $("#content");

    var albumTemplate = $(".template").clone().removeClass("template");

    var promiseUnbind = tree.promiseMergeItem("/album", albumSource).then(function(albumItem){
        var albumBinder =
            pivot("album", ".album",
                pivot("*", ".song",
                    pivot("verses/*", ".verse",
                        pivot("*", ".line", function(topic, control){
                            return screenplay.bindLeaf(tree, topic, control);
                        })
                    )
                )
            );

        albumBinder(getRootTopic(), albumTemplate);
    });

    promiseUnbind.then(function(){
        content.append(albumTemplate);
    });

})