2
\$\begingroup\$

But it looks like it is getting to big.

How can I break this up into smaller pieces?

In general this seems messy and I'm trying to make it more readable.

/******************************************************************************************************************(120)
** BVFave
** - renders favorites using underscore templates
**
**
*/

    var BVFave = Backbone.View.extend({
        Name: 'BVFave',
        path: $A.Reg.get('path_favicons'),
        E: {},
        initialize: function () {
            this.ns = this.el.id + '_';
            this.addArc();
            this.el_arcmarks = $A.el('#' + this.el.id + '_arcmarks');
            this.el_tags = $A.el('#' + this.el.id + '_tags');
            this.tags = {};
            this.listenTo(this.collection, 'sync', this.render);
        },

        addArc: function (){
            if (this.id) {
                var arc_string = '' + this.composeArc(this.id);
                var arc_string1 = '' + this.composeArcTop(this.id);

                this.el_fave_hold = $A.el('#fave_hold');
                this.el_arc_hold = $A.el('#arc_hold');

                $A.appendHTMLAsElement(arc_string, this.el_fave_hold);
                // $A.appendHTMLAsElement(arc_string1, this.el_arc_hold);
                this.el = $A.el('#' + this.id);
            } else {
            }
        },
        render: function () {
            var tag_string = '',
                page_string = '',
                current_id,
                previous_id;
            this.obj = this.collection.toJSON();

            // parse the json data
            _.each(this.obj, function (val) {
                previous_id = current_id;
                current_id = this.ns + val.tag;
                if ((previous_id !== current_id) || (previous_id === undefined)) {
                    this.tags[current_id] = this.composeTitle(current_id);
                    tag_string += this.composeTag(current_id);
                    page_string += this.composePage(current_id);
                }
                this.tags[current_id] += this.composeFavorite(val);
            }, this);

            // actual render
            if (!_.isEmpty(this.tags)) {
                this.el_arcmarks.innerHTML = page_string;
                this.el_tags.innerHTML = tag_string;
                this.renderFavorites();
                this.initializeTags();
            }
        },

        // insert favorite from memory into the DOM
        renderFavorites: function () {
            $A.someChild(this.el_arcmarks, function (val) {
                if (val.id) {
                    val.innerHTML = this.tags[val.id.slice(0, -5)];
                }
            }, this);
        },

        // make the tags clickable, note that jQuery handles spaces differently in the selector
        initializeTags: function (tag_el) {
            var self = this;
            if(!tag_el){
                _.each(this.tags, function (val, key) {
                    var id = '#' + key;
                    var el = $A.el(id);
                    // self.E[id]=el;
                    $(el).on("click", function () {
                        self.flip(this);
                    });
                }, this);
                var test = $A.el('#' + $A.oneKey(this.tags));
                this.flip(test);
            } else {
                $(tag_el).on("click", function () {
                    self.flip(this);
                });
            }
        },
        flip: function (tag_el) {

            // get elements
            var page_el = $A.el('#' + tag_el.id + '_page');

            // turn off
            if (this.prev_tag_el && (tag_el !== this.prev_tag_el)) {
                $A.toggleClass(this.prev_page_el, 'toggle_page_lazy');
                $A.toggleClass(this.prev_tag_el, 'toggle_tag_lazy');
            }

            // turn on
            if (this.prev_tag_el !== tag_el) {
                $A.animate(page_el, {time: 810});
                $A.toggleClass(page_el, 'toggle_page_active');
                $A.toggleClass(tag_el, 'toggle_tag_active');
            }

            // save previous
            this.prev_page_el = page_el;
            this.prev_tag_el = tag_el;
        },

        // id, favicon_local, url, title
        insertFavorite: function (obj_fav) {
            if (typeof obj_fav === 'string') {
                obj_fav = JSON.parse(obj_fav);
            }
            var tag_id = this.ns + obj_fav.tag;
            var title_el = $A.HTMLToElement(this.composeTitle(tag_id));
            var div_el = $A.HTMLToElement(this.composeFavorite(obj_fav));
            var page_el = $A.el('#' + tag_id + '_page') || this.insertTagAndPage(tag_id);
            var tag_el = $A.el('#' + tag_id);

            $A.someChild(page_el, function (iter) {
                if (iter === null) {
                    page_el.appendChild(title_el);
                    return page_el.appendChild(div_el);
                }
                if (iter.children[1] && (obj_fav.title < iter.children[1].innerHTML)) {
                    return page_el.insertBefore(div_el, iter);
                }
                if (iter === page_el.lastChild) {
                    return page_el.appendChild(div_el);
                }
            });
            this.flip(tag_el);
            return div_el;
        },

        // id
        insertTagAndPage: function (tag_id) {
            var tag_el = $A.HTMLToElement(this.composeTag(tag_id));
            var page_el = $A.HTMLToElement(this.composePage(tag_id));
            $A.insertChildById(this.el_arcmarks, page_el);
            $A.insertChildById(this.el_tags, tag_el);
            this.initializeTags(tag_el);
            return page_el;
        },

        // id
        composeArcTop: function (current_id) {
            var self = this;
            return _.template($('#arc_item-arcTop').html(), {
                id:   current_id,
                tag:  current_id.slice(self.ns.length)
            });
        },

        // id
        composeArc: function (current_id) {
            var self = this;
            return _.template($('#arc_item-arc').html(), {
                id:   current_id
            });
        },

        // id
        composeTag: function (current_id) {
            var self = this;
            return _.template($('#arc_item-tag').html(), {
                id:   current_id,
                tag:  current_id.slice(self.ns.length)
            });
        },

        // id
        composePage: function (current_id) {
            return _.template($('#arc_item-page').html(), {
                page: current_id + '_page'
            });
        },

        // id
        composeTitle: function (current_id) {
            var self = this;
            return _.template($('#arc_item-title').html(), {
                id:   current_id + '_title',
                tag:  current_id.slice(self.ns.length)
            });
        },

        // id, favicon_local, url, title
        composeFavorite: function (val) {
            return _.template($('#arc_item-arcmark').html(), {
                id:      this.ns + val.id,
                ida:     this.ns + val.id + 'a',
                idb:     this.ns + val.id + 'b',
                src:     this.path + val.favicon_local,
                href:    val.url,
                title:   val.title
            });
        }
    });

Here is what it renders:

enter image description here

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.