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