scrollview View wrapper

mediaViewScrollview.js

/**
 *
 *
 *
 *
 * mediaViewScrollview
 *
 *
 *
 *
 */
YUI.add("mediaViewScrollview", function (Y) {

    Y.MediaViewScrollview = Y.Base.create("mediaViewScrollview", Y.View, [], {

        template: '<li id="sv-mediaitem-{id}" class="">{name} ({type})' +
            '<img src="{imgSrc}"/>' + 
            '<button class="yui-mediaviewscrollview-more">view more</button>' +
            '</li>',

        events: {
            'button': {
                'click': '_handleViewMoreClick'
            }
        },


        initializer: function () {

            var sv,
                con = this.get("container"),
                cfg = {
                    id: Y.guid(),
                    srcNode: con,
                    flick: {
                        minDistance:10,
                        minVelocity:0.3
                    }
                },
                w = this.get("width"),
                h = this.get("height"),
                ml = this.get("modelList");

            if (w) {
                cfg.width = w;
                cfg.flick.axis = "x";
            } else if (h) {
                cfg.height = h;
                cfg.flick.axis = "y";
            }




            sv = new Y.ScrollView(cfg);

            this.set("scrollview", sv);



            // Model list events
            ml.after('add', this._afterAddModel, this);
            ml.after('remove', this._afterRemoveModel, this);

            con.delegate("mousedown", function(e) {
                e.preventDefault();
            }, "img");

           
        },


        /**
         * Renders items in the modelList and sets up the carousel
         * @method render
         * @chainable
         */
        render: function () {
            this.get("scrollview").render();
            return this;
        },



        /**
         * Renders a single model
         * @return {String}  Rendered string of html
         */
        _renderModel: function (model) {
            return Y.Lang.sub(this.template, model.toJSON());
        },

        
        /**
         * Adds an item to the DOM and carousel - default
         * for modelList.after('add')
         *
         * @param {EventFacade|MediaModel} [event]  Event (with a model 
         *      property that's a mediaModel) or a mediaModel directly.
         *
         * @chainable
         */
        _afterAddModel: function (ev) {

            var s, m, 
                sv = this.get("scrollview");

            if (ev._event && ev.model) {
                m = ev.model;
            } else if (ev.name === 'mediaModel') {
                m = ev;
            }

            if (Y.one("#sv-mediaitem-" + m.get("clientId"))) {
                return this;
            }
            // the carousel adds it into the DOM
            var s = this._renderModel(m);
            this.get("container").appendChild(s);

            sv._bb.detach('mousewheel|*');
            sv.syncUI();

            return this;
        },

    
        /**
         * Removes an item from the carousel
         * @param {EventFacade|mediaModel}
         * @chainable
         */
        _afterRemoveModel: function (ev) {

            var s, m,
                sv = this.get("scrollview");

            if (ev._event && ev.model) {
                m = ev.model;
            } else if (ev.name === 'mediaModel') {
                m = ev;
            }

            if (m !== undefined) {
               s = Y.one("#sv-mediaitem-" + m.get("id"));
               if (s) {
                   s.remove();
               }
            }

            // not sure if we need to remove first, so 
            // we don't end up with lots of listeners.
            sv._bb.detach('mousewheel|*');
            sv.syncUI();            

            return this;

        },


        /**
         * @method _handleViewMoreClick
         * @protected
         * Handles click on the 'more' button
         */
        _handleViewMoreClick: function (ev) {

            // don't want to scroll or anything
            ev.halt();
            // work out which model it was for
            // for the event
            var li = ev.currentTarget.ancestor("li"),
                mid = li.get("id").replace("sv-mediaitem-", ""),
                m = this.get("modelList").getById(mid);

            this.fire("itemClick", {model: m});
        }
    
    }, {

        ATTRS: {

            scrollview: {},
            width: {},
            height: {},

        }

    });

}, "0.0.1", {requires:["scrollview", "view", "substitute"]});