Shift An Array And Rendering It In A Html List

Using the following script I am not able to swift and set the focus for an array back in the list when clicking PREV. It should work as this example: http://jsfiddle.net/QAsQj/2/ m

Solution 1:

Finally I solved it

Algo example here http://jsfiddle.net/QwATR/

Snippet_Categories = (function(Snippet) {

    var Snippet_Categories = function() {
        this.config = {
            curPos: 0, // index for selected element
            itemVisible: 4, // number of items visible
            minIndex: 0, // define visible area start
            maxIndex: 4 - 1, // define visible area end  = "itemVisible -1"
            outItems: 0// number of element out of visible area
        };
        this.data = {
            items: arguments[1].items
        };
        this.construct.apply(this, arguments);
    };

    $.extend(true, Snippet_Categories.prototype, Snippet.prototype, {
        init: function() {
            this.index = 0;     // set default indexthis.indexNew = 0; // set next index this.start = 0;
            this.render();
        },
        create: function() {
            returnthis.parent.$el.find('.snippet-categories');
        },
        removeFocus: function() {
            var test = $('li.focus');
            Focus.blur(test);
            //$('li.focus').removeClass('focus');
        },
        focus: function() {

            //$('ul > li:eq(' + this.config.curPos + ')').addClass('focus');var test = $('ul > li:eq(' + this.config.curPos + ')');

            return Focus.to(test, true);
        },
        render: function() {
            //debuggerthis.renderItems();
            this.focus();
        },
        renderItems: function() {
            var html = '<ul>';
            for (var i = 0; i < this.config.itemVisible; i++) {
                html += '<li data-idx="' + this.data.items.at(i + this.config.outItems).get('id') + '" class="">' + this.data.items.at(i + this.config.outItems).get('label') + '</li>';
            }
            html += '</ul>';
            $('.snippet-categories').empty();
            $('.snippet-categories').html(html);
        },
        navigate: function(direction) {
            if (direction === 'right') {
                if (this.config.curPos < this.config.maxIndex)
                {
                    this.removeFocus();
                    if (this.config.curPos < this.config.maxIndex)
                        this.config.curPos++;
                    else
                    {
                        this.config.outItems++;
                    }
                } else {
                    if (this.config.outItems < this.data.items.length - this.config.itemVisible)
                        this.config.outItems++;
                }
                this.renderItems();
                this.focus();
            }
            elseif (direction === 'left') {
                if (this.config.curPos > this.config.minIndex)
                {
                    this.removeFocus();
                    if (this.config.curPos > this.config.minIndex)
                        this.config.curPos--;
                    else
                    {
                        this.config.clicks--;
                    }
                } else {
                    if (this.config.outItems > 0)
                        this.config.outItems--;
                }
                this.renderItems();
                this.focus();
            }
        },
        onFocus: function() {
            //this.index = parseInt(Focus.focused[0].dataset.idx, 10);
            console.log('element in focus ' + this.index);
        }
    });

    return Snippet_Categories;

})(Snippet);