1
  2$(function(){
  3
  4    var model = {
  5        // renomear
  6        dat: [
  7
  8        ],
  9        read_json: function() {
 10
 11            $.ajax({
 12                url: "cards/info.json",
 13                dataType: 'json',
 14                async: false,
 15                success: function(data) {
 16                    $(data["cards"]).each(function(){
 17                        var card_info = $(this)[0];
 18                        model.set_data(card_info);
 19                    });
 20                }
 21            });
 22
 23        },
 24        set_data: function(d) {
 25            model.dat.push(d);
 26        },
 27        get_data: function() {
 28            return model.dat;
 29        },
 30        filter_data: function(conteudo) {
 31            var $d = model.dat;
 32            var $filter = [];
 33            var $c = conteudo.toLowerCase();
 34            $($d).each(function(i){
 35                if(
 36                    $d[i].name.toLowerCase().indexOf($c) >= 0 ||
 37                    $d[i].description.toLowerCase().indexOf($c) >= 0 ||
 38                    $d[i].button_text.toLowerCase().indexOf($c) >= 0
 39                ) {
 40                    $filter.push($d[i]);
 41                }
 42            });
 43
 44            return $filter;
 45        },
 46        init: function() {
 47            model.read_json();
 48        }
 49    };
 50
 51
 52    var octopus = {
 53        init: function() {
 54            model.init();
 55            view.init();
 56            octopus.create_card(model.get_data());
 57        },
 58        create_card: function(d) {
 59            $.each(d, function(i){
 60                view.create_card(d[i].name, d[i].description, d[i].button_text);
 61            });
 62        },
 63        filter_data: function(c) {
 64            var d = model.filter_data(c);
 65            $.each(d, function(i){
 66                view.create_card(d[i].name, d[i].description, d[i].button_text);
 67            });
 68        },
 69        recreate_cards: function() {
 70            octopus.create_card(model.get_data());
 71        }
 72    };
 73
 74    // Renomear
 75    var view = {
 76        init: function() {
 77            this.container = $(".flex-wrapper");
 78            this.search_field = $("#search_field");
 79            view.events();
 80        },
 81        events: function(){
 82            this.search_field.on('input',function(){
 83                var $conteudo = $(this).val();
 84                view.clean_cards();
 85
 86
 87                if($conteudo.length == 0){
 88                    octopus.recreate_cards();
 89                }else {
 90                    octopus.filter_data($conteudo);
 91                }
 92
 93            });
 94        },
 95        create_card: function(name, desc, bt_txt){
 96            var $card = $("<div>").addClass("card");
 97            var $h2 = $("<h2>").addClass("title").text(name);
 98            var $desc = $("<div>").addClass("description").text(desc);
 99            var $button = $("<button>").text(bt_txt);
100
101
102            $card.append($h2).append($desc).append($button);
103            this.container.append($card);
104        },
105        clean_cards: function() {
106            this.container.empty();
107        }
108    };
109
110
111    octopus.init();
112});