Facebook Messengerで起きた罰を探しやすくするUI

batsu.facebook-messanger.js

(function() {
    // insert jquery
    var script = document.createElement('script');
    script.src = "http://code.jquery.com/jquery-2.1.4.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    // bootstrap
    var bs_link = document.createElement('link');
    bs_link.rel = "stylesheet";
    bs_link.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
    document.getElementsByTagName('head')[0].appendChild(bs_link);
    var bs_script = document.createElement('script');
    bs_script.src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js";
    document.getElementsByTagName('head')[0].appendChild(bs_link);    
    
    var build_interface = function() {
        // delete nav
        $(".nav").remove();
        // delete footer
        $(".footer").remove();
        // modify css
        $(".contents").css("padding-left", "10px");
        $("p").css("word-wrap", "break-word");

        // add topic title
        $(".thread").contents().filter(function(){ return this.nodeType != 1;}).wrap("<div class='topic'></div>").wrap("<b></b>");
        $(".topic").css("font-size", "18px").css("padding", "10px, 5px");
        $(".thread").each(function (index) {
            var id = "thread-" + index;
            $(this).attr("id", id);
            $(this).addClass("panel panel-default");
        });
        
        // reverse messages
        var reverseThread = function (thread) {
            var contents = thread.children();
            var ms = contents.filter(".message").detach();
            var ps = contents.filter("p").detach();
            ms = ms.get().reverse();
            ps = ps.get().reverse();
            for (var i = 0; i < ms.length; i++) {
                thread.append(ms[i]);
                thread.append(ps[i]);
            }
        };

        // add reverse button
        $(".thread").each(function() {
            var topic = $(this).contents().filter(".topic");
            var thread = $(this);
            var button = $("<button class='btn btn-default'>reverse time</button>").click(function () {
                reverseThread(thread);
                return false;
            });
            button.insertAfter(topic.find("b"));
        });
        
        // search func
        var titleFilter = function (word_string) {
            var words = word_string.toLowerCase().split(" ");
            $(".thread").each(function() {
                var s = $(this).find(".topic > b").text().toLowerCase();
                var found = 0;
                $.each(words, function() {
                    console.log(s, this, s.indexOf(this));
                    if (s.indexOf(this) != -1) {
                        found = 1;
                        return false;
                    }
                });
                if (found) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        };

        // search ui
        var search_input = $("<input type='text' class='form-control' name='search_text'/>");
        var search_button = $("<button class='btn btn-default'>search</button>").click(function () {
            var word_string = search_input.val();
            titleFilter(word_string);
            return false;
        });
        var reset_button = $("<button class='btn btn-default'>reset</button>").click(function () {
            $('.thread').show();
            search_input.val("");
            return false;
        });
        $("<form class='form-inline'></form>").append($("<label for='search_text'>Search Text</label>")).append(search_input).append(search_button).append(reset_button).insertAfter(".contents > h1");
            
    };
    window.setTimeout(build_interface, 1000);
})();