(function($, Backbone) { var models = {}, views = {}, renderData = function (data) { var icons = [], categories = []; $.each(data, function (category, items) { $.each(items, function (content, d) { categories.push(category); icons.push({ category: category, caption: content.replace(/_/g, ' '), className: content.replace(/_/g, '-'), content: content, code: d[0].toUpperCase(), is_new: d[1] && true }); }); }); var view = new views.Icons({collection: new models.Icons(icons)}); view.render(); }; models.Icon = Backbone.Model.extend(); models.Icons = Backbone.Collection.extend({ model: models.Icon }); views.Icon = Backbone.View.extend({ tagName: 'div', className: 'item-container', template: _.template($('#grid-item').html()), events : { "click" : "showSnackBar" }, initialize: function (options) { this.listenTo(this.model, 'hideSnackBar', this.hideSnackBar); _.bindAll(this, 'render', 'hideSnackBar'); }, render: function () { $(this.el).html(this.template(this.model.attributes)); return this; }, showSnackBar: function() { $("body").click(); this.model.trigger('hideSnackBar'); $(this.el).addClass("selected"); var view = new views.snackbarView({model: this.model}); view.render(); return false; }, hideSnackBar: function() { $(this.el).removeClass("selected"); } }); views.snackbarView = Backbone.View.extend({ container: $('#snackbar'), template: _.template($('#snackbar-template').html()), initialize: function (options) { this.collection = options.collection; $("body").on("click focus", $.proxy(this.hide, this)); }, render: function () { var hidden = !this.container.children(".container:not(:hidden)").length; this.container.empty(); this.container.append(this.template(this.model.attributes)); if (hidden) { this.container.children(".container").hide().slideDown('fast'); } else { this.container.children(".container").stop(0, 0).slideDown('fast'); } }, hide: function() { this.model.trigger('hideSnackBar'); this.container.children(".container").slideUp('fast'); } }); views.Icons = Backbone.View.extend({ container: $('#grid-container'), empty_content: $('#empty-grid').html(), search_input: $('#search'), search_clear: $('#search-panel .clear-icon'), initialize: function (options) { this.collection = options.collection; this.search_input.bind('keyup', $.proxy(this.search, this)); this.search_clear.bind('click', $.proxy(this.clear_search, this)); _.bindAll(this, 'render'); }, clear_search : function() { this.search_input.val(''); this.search_input.focus(); this.search(); return this; }, search: function () { var str = this.search_input.val(); if (str.length > 0) { this.search_clear.show(); } else { this.search_clear.hide(); } str = str.replace(/[\-_]+/g, ' ').replace(/\s+/, ' ').trim(); if (str.length > 0) { var models = this.collection.filter(function (item) { return item.get("caption").indexOf(str) > -1 }); this.render(models); } else { this.render(); } $('body, html').animate({scrollTop: this.container.offset().top - 64}, 0); return this; }, render: function (searchCollection) { var container = this.container, category = null, grid = $("<div/>", {"class" : "grid"}), self = this, models = searchCollection || this.collection; container.empty(); models.forEach(function (item) { var itemView = new views.Icon({model: item}); if (category === null) { category = item.get('category'); } if (category !== item.get('category')) { $("<h2/>").html(category.charAt(0).toUpperCase() + category.slice(1)). appendTo(self.container); grid.appendTo(self.container); category = item.get('category'); grid = $("<div/>", {"class" : "grid"}); grid.append(itemView.render().el); } else { grid.append(itemView.render().el); } }); if (category !== null) { $("<h2/>").html(category.charAt(0).toUpperCase() + category.slice(1)). appendTo(self.container); grid.appendTo(self.container); } else { container.html(self.empty_content); } return this; } }); $(document).ready(function () { var is_fixed_search = false, $win = $(window), search_panel = $("#search-panel"), header_panel = $("#head-panel"); $win.on("scroll resize", function () { if ($win.scrollTop() > header_panel.outerHeight()) { if (!is_fixed_search) { is_fixed_search = true; search_panel.addClass("top-fixed"); } } else { if (is_fixed_search) { is_fixed_search = false; search_panel.removeClass("top-fixed"); } } }); renderData(window.data); $("body").on("focus", "textarea.code", function() { var $this = $(this); $this.select(); window.setTimeout(function() { $this.select(); }, 1); function mouseUpHandler() { $this.off("mouseup", mouseUpHandler); return false; } $this.mouseup(mouseUpHandler); }); $("#snackbar").on("click focus", function(e) { e.preventDefault(); return false; }); }); }) (jQuery, Backbone);