js_sample_rest_apptop/index.html at gh-pages · apiok/js_sample_rest_apptop · 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
130
131
132
133
<html>
<head>
    <meta charset="UTF-8">
    <title>Демографический топ</title>
</head>
<body>
<style>
body {font-size: 12px;}
div#appsTop {
    width: 740px; height:100%; overflow-y:scroll; margin:0 auto; font-family: Helvetica, Arial, sans-serif; font-size: 1.0em;
}
div.female, div.male {display: inline-block; width: 350px;}
div.female {margin: 0 20px 0 0;}

div.top-block {
    margin: 0 0 20px 0;
}
div.top-block div:nth-child(odd) {background: #fff;}
div.top-block div:nth-child(even) {background: #fef6ef;}

h1 {font-size: 1.8em; margin: 20px 0 10px;}
h2 {font-size: 1.31em;  margin: 10px 0 8px;}
div.female h2 {color: #8c214d;}
div.male h2 {color: #004e7a;}

div.top-block div, div.top-block div a {height: 24px;}
div.top-block div span {height: 24px; line-height: 24px; vertical-align: center;}
div.top-block div span:hover {font-weight: bold;}
span.number {
    width: 24px; display: inline-block; margin-left: 5px;
}
span.empty-icon {
    width: 18px; display: inline-block;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://api.odnoklassniki.ru/js/fapi5.js" defer="defer"></script>
<script type="text/javascript">
    var topLimit = 20;

    function ok_api_error(error) {
        if (error) {
            if (error.error_code || error.error_msg) {
                alert('ERROR #' + (error.error_code || 0) + ": " + (error.error_msg || "?"));
            } else {
                alert('ERROR ' + error);
            }
        } else {
            alert('UNKNOWN ERROR OCCURRED');
        }
    }

    function updateTop() {
        function drawSingleTop(title, top, html) {
            html.push('<div class="top-block"><h2>', title, '</h2>');

            var appsToShow = Math.min(top.apps.length, topLimit);

            for (var j = 0; j < appsToShow; j++) {
                var app = top.apps[j];
                html.push('<div><span class="number">', j + 1, '.</span> ');
                if (app.url) {
                    html.push('<a target="_blank" href="', app.url, '">');
                }
                if (app.icon) {
                    html.push('<img width="18" height="18" align="top" src="', app.icon, '"/>');
                } else {
                    html.push('<span class="empty-icon">&nbsp;</span>');
                }
                if (app.url) {
                    html.push('</a>');
                }
                html.push('&nbsp;<span>', app.name, '</span>');
                html.push('</div>');
            }
            html.push('</div>');
        }

        FAPI.Client.call({"method": "apps.getTop"}, function (status, data, error) {
            var html = [];
            html.push('<h1>Топ ', topLimit, ' по демографическим группам</h1>');
            if (status == 'ok') {
                var female = true;
                for (var i = 0; i < data.length; i++) {
                    var top = data[i];
                    if (top.type == 'general') {
                        drawSingleTop('Средняя аудитория', top, html);
                        html.push('<div class="female">');
                        continue;
                    }
                    if (!top.age || (top.age == "[-1,-1]") || !top.gender) {
                        continue;
                    }
                    var title = "["+(top.type=='web'?'Веб':'Моб')+"] "+(top.gender == 'm' ? 'Мужчины' : 'Женщины') + ' ' + top.age.replace(',', '-');
                    if (female && top.gender == 'm') {
                        female = false;
                        html.push('</div><div class="male">');
                    }
                    drawSingleTop(title, top, html);
                }
                html.push('</div>');
            } else {
                ok_api_error(error);
            }
            $('#appsTop').html(html.join(''));
        });
    }

    $(document).ready(function () {
        var rParams = FAPI.Util.getRequestParameters();
        FAPI.init(rParams["api_server"], rParams["apiconnection"],
                function () {
                    updateTop();
                },
                ok_api_error);
        $('#limit').on('change', function () {
            topLimit = $(this).val();
            updateTop();
        });
    });
</script>

<div style="float:right;">
    <select id="limit">
        <option selected="selected">20</option>
        <option>50</option>
        <option>100</option>
    </select>
</div>
<div id="appsTop"></div>

</body>
</html>