☰

Greasy Fork is available in English.

Scratch 2.0 Embedded Phosphorus Player

Replaces the default Scratch 2.0 project player with Phosphorus and adds the option to switch between players.

Version vom 29.05.2017. Aktuellste Version

// ==UserScript==
// @name         Scratch 2.0 Embedded Phosphorus Player
// @namespace    http://garethpw.net
// @version      0.2
// @description  Replaces the default Scratch 2.0 project player with Phosphorus and adds the option to switch between players.
// @author       Gareth Welch
// @include      /^https:\/\/scratch\.mit\.edu\/projects\/[0-9]+\//
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var style_text = `
        #project .box-head {
            padding-bottom: 40px !important;
        }

        .stage #tabs {
            margin-bottom: 1px !important;
        }

        .stage #tabs li {
            -moz-border-radius: 5px 5px 0 0;
            -webkit-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
            float: left;
        }

        .stage .phosphorus {
            margin-top: 16px;
        }
    `;

    var tabs_ul_html = `
        <ul id="tabs" class="tabs-index box-h-tabs h-tabs">
            <li tab-name="phosphorus" class="active">
                <a>Phosphorus</a>
            </li>
            <li tab-name="flash">
                <a>Flash</a>
            </li>
        </ul>
    `;

    window.onload = function() {
        //var project_id = parseInt(window.location.href.match(/^https:\/\/scratch\.mit\.edu\/projects\/([0-9]+)\//)[1]);
        var project_id = parseInt(document.getElementById("project").getAttribute("data-project-id"));

        var player_html_phosphorus = (
            '<iframe allowfullscreen="true" allowtransparency="true" src="https://phosphorus.github.io/embed.html?id='+
            project_id+
            '&light-content=false" width="482" height="393" class="phosphorus" style="border: 0px;"></iframe>'
        );

        var current_player = '';

        var style = document.createElement("style");
        style.appendChild(document.createTextNode(style_text));
        document.head.appendChild(style);

        var stage = document.getElementsByClassName("stage")[0];

        stage.innerHTML = tabs_ul_html + stage.innerHTML;

        var player = stage.querySelector("#player");
        var player_html_flash = player.innerHTML;

        var tabs_ul = stage.querySelector("#tabs");
        var tab_phosphorus = tabs_ul.querySelector('[tab-name="phosphorus"]');
        var tab_flash = tabs_ul.querySelector('[tab-name="flash"]');

        function switch_player(old_player, new_player) {
            if (old_player == new_player) { return; }

            var new_player_html = (new_player == "flash" ? player_html_flash : player_html_phosphorus);

            var old_tab = (old_player == "flash" ? tab_flash : tab_phosphorus);
            var new_tab = (new_player == "flash" ? tab_flash : tab_phosphorus);

            old_tab.className = '';
            new_tab.className = "active";

            player.innerHTML = new_player_html;

            current_player = new_player;
        }

        switch_player("flash", "phosphorus");

        tab_phosphorus.addEventListener("click", function() {
           switch_player(current_player, "phosphorus");
        });

        tab_flash.addEventListener("click", function() {
           switch_player(current_player, "flash");
        });
    };
})();