https://focusky.com/js/cores/LogPanel.js?33

1
2// LogPanel
3function LogPanel() {
4    this.panel = $("<div class='cc-log-panel'></div>");
5    this.buttons = $("<div class='cc-log-buttons'></div>");
6    this.showButton = $("<div class='button button-highlight'><span class='icon icon-arrow-left'></span></div>");
7    this.hideButton = $("<div class='button button-highlight'><span class='icon icon-arrow-right'></span></div>");
8    this.clearButton = $("<div class='button button-caution'><span class='icon icon-trash'></span></div>");
9    this.messages = $("<div class='cc-log-messages'></div>");
10    this.messagePanel = $("<ul></ul>");
11
12    this.panel
13        .append(this.buttons
14            .append(this.showButton)
15            .append(this.hideButton)
16            .append(this.clearButton)
17        )
18        .append(this.messages
19            .append(this.messagePanel));
20
21    this.showButton.on("click", this.show.bind(this));
22    this.hideButton.on("click", this.hide.bind(this));
23    this.clearButton.on("click", this.clear.bind(this));
24
25    this.panel.appendTo($("body"));
26}
27
28LogPanel.prototype = {
29    constructor: LogPanel,
30
31    log: function (value) {
32        this.messagePanel.prepend($("<li>" + " " + value + "</li>"));
33        // this.messagePanel.prepend($("<li>" + new Date().toLocaleTimeString().replace(" AM", "").replace(" PM", "") + " " + value + "</li>"));
34    },
35
36    show: function () {
37        this.messages.width(this.messages.width() + 100);
38    },
39
40    hide: function () {
41        this.messages.width(this.messages.width() - 100);
42    },
43
44    clear: function () {
45        this.messagePanel.empty();
46    }
47}