firephp-for-browser-devtools/src/enabler.rep.js at master · firephp/firephp-for-browser-devtools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

const WINDOW = window;

exports.main = function (JSONREP, node, options) {

    var api = {
        currentContext: null
    };

    WINDOW.crossbrowser.runtime.onMessage.addListener(function (message) {

        if (message.to === "message-listener") {
            if (message.event === "currentContext") {
                api.currentContext = message.context;
            }
        }

        if (api.onMessage) {
            api.onMessage(message);
        }
    });


    return JSONREP.makeRep2({
        "config": {
            "node": node,
            "api": api
        },
        "code": (riotjs:makeRep () >>>

            <div>
                <button if={enabled === false} onclick={triggerEnable} class="enable">Click to Enable</button>
                <button if={enabled === true} onclick={triggerDisable} class="disable">Click to Disable</button>
            </div>

            <style>

                :scope DIV BUTTON {
                    width: 100%;
                    height: 20px;
                    font-weight: bold;
                    cursor: pointer;
                    background-color: white;
                    padding: 3px;
                    height: auto;
                }

                :scope DIV BUTTON.enable {
                    color: #000000;
                    border-top: 2px solid #ff5151;
                    border-bottom: 2px solid #ff5151;
                    border-left: 10px solid #ff5151;
                    border-right: 10px solid #ff5151;
                }

                :scope DIV BUTTON.disable {
                    color: #000000;
                    border-top: 2px solid #05c600;
                    border-bottom: 2px solid #05c600;
                    border-left: 10px solid #05c600;
                    border-right: 10px solid #05c600;
                }

            </style>

            <script>

                const COMPONENT = require("./component");

                const tag = this;

                tag.enabled = null;

                const comp = COMPONENT.for({
                    browser: WINDOW.crossbrowser
                });

                comp.on("setting.enabled", function (enabled) {
                    tag.enabled = !!enabled;
                    if (!context) {
                        tag.enabled = null;
                    }
                    tag.update();
                });

                comp.on("changed.context", function (context) {
                    comp.contextChangeAcknowledged();
                    if (!context) {
                        tag.enabled = null;
                        tag.update();
                    } else {
                        comp.getSetting("enabled").then(function (enabled) {
                            tag.enabled = enabled;
                            tag.update();
                        });
                    }
                });

                tag.on("mount", tag.update);

                tag.triggerEnable = function (event) {
                    comp.setSetting(
                        "enabled",
                        true
                    ).then(function () {
                        tag.update();

                        return comp.getGlobalSetting("reloadOnEnable").then(function (enabled) {
                            if (enabled) {
                                comp.reloadBrowser();
                            }
                        });
                    });
                }

                tag.triggerDisable = function (event) {
                    comp.setSetting(
                        "enabled",
                        false
                    ).then(function () {
                        tag.update();
                    });
                }

            </script>

        <<<)
    }, options);
};