【Scratch】Scratch作品展示api - Rafael Lab
BANNER 728X90

2018年4月6日 星期五

【Scratch】Scratch作品展示api





    Scratch 列表
    
    


    
        
    


    
    
    
    
    
    
        function update_scratch(username, offset, limit) {
            $.ajax({
                url: "https://api.scratch.mit.edu/users/" + username + "/projects",
                dataType: "json",
                data: {
                    offset: offset,
                    limit: limit,
                    format: "json"
                },
                success: function(response) {
                    if (response && response.length > 0) {
                        $.each(response, function(key, item) {
                            console.log(offset);
                            // 修改時間 (五天內修改的作品最熱門,些微時間誤差不考慮)
                            var hot = false;
                            var current = moment().subtract(5, 'days');
                            var mod = moment(item.history.modified);
                            if (mod > current) {
                                hot = true;
                            }
                            // 縮圖
                            var thumb = $('<img class="align-self-center border border-primary">');
                            $(thumb).attr({
                                "src": item.image,
                                "width": "128",
                                "data-toggle": "tooltip",
                                "title": item.title
                            }).tooltip();
                            // 專案標題
                            var title = $('<h6>
');
                            $(title).text(item.title);
                            // 作者
                            var user;
                            if (hot) {
                                user = $('<a class="x-username btn btn-warning btn-sm" target="_blank">');
                            } else {
                                user = $('<a class="x-username btn btn-info btn-sm" target="_blank">');
                            }
                            $(user).attr({
                                'href': '?username=' + username
                            }).text(username);
                            // 專案連結
                            var fullscreen = $('<a class="x-project dropdown-item" target="_blank">');
                            $(fullscreen).attr({
                                "href": "https://scratch.mit.edu/projects/" + item.id + "/#fullscreen"
                            }).text('全螢幕開啟');
                            var editor = $('<a class="dropdown-item" target="_blank">');
                            $(editor).attr({
                                "href": "https://scratch.mit.edu/projects/" + item.id + "/#editor"
                            }).text('編輯專案');
                            var scratch3 = $('<a class="dropdown-item" target="_blank">');
                            $(scratch3).attr({
                                "href": "https://llk.github.io/scratch-gui/#" + item.id
                            }).append($('<img src="https://llk.github.io/scratch-gui/static/favicon.ico" width="16">'), ' Scratch 3');
                            var getsb2 = $('<a class="dropdown-item" target="_blank">');
                            $(getsb2).attr({
                                "href": "http://getsb2.herokuapp.com/" + item.id
                            }).text('下載');
                            var sulfurous = $('<a class="dropdown-item" target="_blank">');
                            $(sulfurous).attr({
                                "href": "https://sulfurous.aau.at/html/app.html?id=" + item.id + "&full-screen=true"
                            }).text('Sulfurous');
                            var phosphorus = $('<a class="dropdown-item" target="_blank">');
                            $(phosphorus).attr({
                                "href": "https://phosphorus.github.io/app.html?id=" + item.id + "&full-screen=true"
                            }).text('Phosphorus');
                            // 統計資訊
                            var views = $('<span class="badge badge-dark">');
                            $(views).text(item.stats.views);
                            var loves = $('<span class="badge badge-danger">');
                            $(loves).text(item.stats.loves);
                            var favorites = $('<span class="badge badge-info">');
                            $(favorites).text(item.stats.favorites);
                            // 專案
                            var div = $('<div class="media col-sm-6 col-md-4">');
                            $(div).append(thumb).append(
                                $('<div class="media-body">').append(title, user,
                                    views, loves, favorites,
                                    $('<p class="m-0 p-0">').append(
                                        // dropdown menu
                                        $('<div class="dropdown">').append(
                                            $('<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">').text('選項')
                                        ).append(
                                            $('<div class="dropdown-menu">').append(
                                                fullscreen, editor, getsb2, scratch3, sulfurous, phosphorus
                                            )
                                        )
                                    )
                                )
                            );
                            // 加入一筆專案
                            $("#scratch").append(div);
                        });
                        // 查詢下一頁
                        update_scratch(username, offset + limit, limit);
                    }
                }
            });
        }
        $(document).ready(function() {
            // 參數
            var url = new URL(location);
            var username = url.searchParams.get('username');
            var pid = url.searchParams.get('pid');
            //username = 's1060001';

            if (username) { // 指定使用者
                update_scratch(username, 0, 40);

            } else {
                // s1060001 ~ s1060146
                $.each([106,105,104],function(year_index,year_value) {
                    for (var n = 1; n <= 146; n++) {
                        if (n < 10) {
                            var num = '000'+ n;
                        }else if(n < 100){
                            var num = '00'+ n;
                        }else if(n < 1000){
                            var num = '0'+ n;                      
                        }else {
                            var num = n; 
                        } 

                        update_scratch('s' + year_value + num, 0, 40);
                    }
                });
            }
            // 最後全部載入
            $(document).ajaxStop(function() {
                // 排序
                tinysort($('#scratch>div'), '.x-username', '.x-project');
            });
        });
    



沒有留言:

張貼留言