diff options
Diffstat (limited to 'vendor/mervick/material-design-icons/demo/js/main.js')
| -rw-r--r-- | vendor/mervick/material-design-icons/demo/js/main.js | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/vendor/mervick/material-design-icons/demo/js/main.js b/vendor/mervick/material-design-icons/demo/js/main.js new file mode 100644 index 000000000..ed13d5cbc --- /dev/null +++ b/vendor/mervick/material-design-icons/demo/js/main.js @@ -0,0 +1,194 @@ +(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); |