action-toggle-button/example.html at master · chameleonui/action-toggle-button · 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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Toggled Button</title>
    <link rel="stylesheet" href="./build/build.css">
    <link rel="stylesheet" href="./example.css">
</head>
<body>

    <h1>AJAX Toggled Button Example</h1>

    <div class="listed-buttons">
        <p>
            <a href="http://private-eff7d-experiments.apiary-mock.com/action-confirm-button-get" class="button-default js-action-confirm" data-state="stateA"><i class="fa fa-star-o"></i></a>
        </p>
        <p>
            <a href="http://private-eff7d-experiments.apiary-mock.com/action-confirm-button-get" class="button-primary js-action-confirm"  data-state="stateB"><i class="fa fa-star"></i></a>
        </p>
        <p>
            <a href="http://private-eff7d-experiments.apiary-mock.com/action-confirm-button-get" class="button-default js-action-confirm"  data-state="stateA"><i class="fa fa-star-o"></i></a>
        </p>
    </div>
    <div>
        <p>
            <a href="#" class="js-add-button">Add button</a>
        </p>
    </div>

    <h2>Buttons</h2>

    <p><a href="#" class="button-default"><i class="fa fa-star-o"></i></a></p>
    <p><a href="#" class="button-disabled"><i class="fa fa-spinner fa-spin"></i></a></p>
    <p><a href="#" class="button-primary"><i class="fa fa-star"></i></a></p>


    <script src="./build/build.js"></script>
    <script>
        var ATB = require('action-toggle-button');
        var jQuery = require('jquery');

        (function(){
            var list = jQuery('.listed-buttons');
            var stateArray = ['<p><a href="http://private-eff7d-experiments.apiary-mock.com/action-confirm-button-get" class="button-default js-action-confirm" data-state="stateA"><i class="fa fa-star-o"></i></a></p>', '<p><a href="http://private-eff7d-experiments.apiary-mock.com/action-confirm-button-get" class="button-primary js-action-confirm" data-state="stateB"><i class="fa fa-star"></i></a></p>'];

            jQuery('body').on('click', '.js-add-button', this, function(event) {
                event.preventDefault();
                list.append(stateArray[Math.floor(Math.random() * stateArray.length)]);
            });

        }).call(jQuery);


        var acme = function(self) {
            var _self = this;

            var instance = new ATB({
                callback: function (xhrResponse) {
                    return xhrResponse.status === 200;
                }
            });

            instance.init(self);

            instance.on('request', function() {
            });

            instance.on('response', function() {
            });

            instance.on('error', function() {
                console.log('error', this.self, this.response);
            });

            instance.on('success', function() {
                console.log('success', this.self, this.response);
            });

        };

        jQuery('body').on('click', '.js-action-confirm', this, function(event) {
            event.preventDefault();
            jQuery(this).removeClass('js-action-confirm');


            acme(this);
        });

    </script>
</body>
</html>