scratchx/js/scratchx.js

// Simulate the bare minimum of the view that exists on the main site
var Scratch = Scratch || {};
Scratch.FlashApp = Scratch.FlashApp || {};

var editorId = "scratch";

function handleEmbedStatus(e) {
    $('#scratch-loader').hide();
    var scratch = $('#' + editorId);
    if (!e.success) {
        scratch.css('marginTop', '10');
        scratch.find('IMG.proj_thumb').css('width', '179px');
        scratch.find('DIV.scratch_unsupported').show();
        scratch.find('DIV.scratch_loading').hide();
    } else {
        Scratch.FlashApp.ASobj = scratch[0];
    }
}

// enables the SWF to log errors
function JSthrowError(e) {
    if (window.onerror) window.onerror(e, 'swf', 0);
    else console.error(e);
}

function JSeditorReady() {
    try {
        handleParameters();
        $("#" + editorId).trigger("editorReady");
        return true;
    } catch (error) {
        console.error(error.message, "\n", error.stack);
        throw error;
    }
}

function JSprojectLoaded() {
    loadExtensionQueue();
}

function JSshowExtensionDialog() {
    showModal("dialogs");
}

var extensionQueue = [];
function handleParameters() {
    var project;
    var queryString = window.location.search.substring(1);
    var queryVars = queryString.split(/[&;]/);
    for (var i = 0; i < queryVars.length; i++) {
        var nameVal = queryVars[i].split('=');
        switch(nameVal[0]){
            case 'ext':
                extensionQueue.push(nameVal[1]);
                break;
            case 'proj':
                project = nameVal[1];
                break;
        }
    }
    if (project) {
        Scratch.FlashApp.ASobj.ASloadSBXFromURL(project);
    }
    else {
        loadExtensionQueue();
    }
}

function loadExtensionQueue() {
    for (var i = 0; i < extensionQueue.length; ++i) {
        var extensionURL = extensionQueue[i];
        ScratchExtensions.loadExternalJS(extensionURL);
    }
    extensionQueue = [];
}

var flashVars = {
    autostart: 'false',
    extensionDevMode: 'true',
    server: encodeURIComponent(location.host),
    cloudToken: '4af4863d-a921-4004-b2cb-e0ad00ee1927',
    cdnToken: '34f16bc63e8ada7dfd7ec12c715d0c94',
    urlOverrides: {
        sitePrefix: "http://scratch.mit.edu/",
        siteCdnPrefix: "http://cdn.scratch.mit.edu/",
        assetPrefix: "http://assets.scratch.mit.edu/",
        assetCdnPrefix: "http://cdn.assets.scratch.mit.edu/",
        projectPrefix: "http://projects.scratch.mit.edu/",
        projectCdnPrefix: "http://cdn.projects.scratch.mit.edu/",
        internalAPI: "internalapi/",
        siteAPI: "site-api/",
        staticFiles: "scratchr2/static/"
    },
    inIE: (navigator.userAgent.indexOf('MSIE') > -1)
};

var params = {
    allowscriptaccess: 'always',
    allowfullscreen: 'true',
    wmode: 'direct',
    menu: 'false'
};

$.each(flashVars, function (prop, val) {
    if ($.isPlainObject(val))
        flashVars[prop] = encodeURIComponent(JSON.stringify(val));
});

swfobject.switchOffAutoHideShow();

swfobject.embedSWF('Scratch.swf', 'scratch', '100%', '100%', '11.7.0', 'libs/expressInstall.swf',
        flashVars, params, null, handleEmbedStatus);


/* File uploads */
function sendFileToFlash(file) {
    /*
     * Use the HTML5 FileReader API to send base-64 encoded file
     * contents to Flash via ASloadBase64SBX (or do it when the SWF
     * is ready).
     */
    var fileReader = new FileReader();
    fileReader.onload = function (e) {
        var fileAsB64 = ab_to_b64(fileReader.result);
        showPage(editorId);
        if (Scratch.FlashApp.ASobj.ASloadBase64SBX !== undefined) {
            Scratch.FlashApp.ASobj.ASloadBase64SBX(fileAsB64);
        } else {
            $(document).on("editorReady", function(e) {
                Scratch.FlashApp.ASobj.ASloadBase64SBX(fileAsB64);
                $(this).off(e);
            });
        }
        
    }
    fileReader.readAsArrayBuffer(file);
}

var loadFileListener = function(e) {
    /*
     * Buttons with data-action="load-file" trigger a file input
     * prompt, passed to a handler that passes the file to Flash.
     */
    $('<input type="file" />').on('change', function(){
        sendFileToFlash(this.files[0])
    }).click();
}


function sendURLtoFlash() {
    /*
     * Send a URL to Flash with ASloadGithubURL, or do it when the
     * editor is ready.
     */
    var urls = [];
    for (var i = 0; i < arguments.length; i++) {
        urls.push(arguments[i]);
    }
    if (urls.length <= 0) return;
    if (Scratch.FlashApp.ASobj.ASloadGithubURL !== undefined) {
        Scratch.FlashApp.ASobj.ASloadGithubURL(urls);
    } else {
        $(document).on("editorReady",  function(e) {
            Scratch.FlashApp.ASobj.ASloadGithubURL(urls);
            $(this).off(e);
        });
    }
}


/* Load from URL */
var loadURLlistener = function(e) {
    /*
     * Links with data-action="load-url" send their href to Flash
     * So use like...
     *    <a href="?url=urlToLoad" data-action="load-url">Load this</a>
     */
    e.preventDefault();
    showPage(editorId);
    loadFromURLParameter($(this).attr("href"));
}

var loadURLformListener = function(e) {
    // Load text input value on submit
    e.preventDefault();
    showPage(editorId);
    sendURLtoFlash($('input[type="text"]', this).val());
}

function loadFromURLParameter(queryString) {
    /*
     * Get all url=urlToLoad from the querystring and send to Flash
     * Use like...
     *     http://scratchx.org/?url=urlToLoad1&url=urlToLoad2
     */
    var paramString = queryString.replace(/^\?|\/$/g, '');
    var vars = paramString.split("&");
    var showedEditor = false;
    var urls = [];
    for (var i=0; i<vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair.length > 1 && pair[0]=="url") {
            if (!showedEditor) {
                // Only try to switch to the editor once
                showPage(editorId);
                showedEditor = true;
            }
            urls.push(pair[1]);
        }
    }
    if (urls.length > 0) sendURLtoFlash.apply(window, urls);
}


/* Modals */

function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper) {
    elementType = elementType ? elementType : "div";
    var $element = $("#" + elementId);
    if (!$element.length) {
        $template = $("#" + templateId);
        $element = $("<"+elementType+"></"+elementType+">")
            .attr("id", elementId)
            .html($template.html());
        if (wrapper) $element.wrapInner(wrapper);
        $element.appendTo(appendTo)
    }
    return $element;
};

function showModal(templateId) {
    /*
     * Copies the HTML referenced by data-template into a new element,
     * with id="modal-[template value]" and creates an overlay on the
     * page, which when clicked will close the popup.
     */

    var zIndex = 100;
    var modalId = "modal-" + templateId;
    $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>");
    var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper);
    $modal.addClass("modal");
    $(".modal-fade-screen", $modal)
        .addClass("visible")
        .click(function(e){$(this).trigger("modal:exit")});
    $(".modal-inner", $modal).click(function(e){e.stopPropagation();})
    $("body").addClass("modal-open");
    attachListeners();
    var triggerExit = function (e) {$(this).trigger("modal:exit");}
    $(document).on("click", "[data-action='load-file'], [data-action='load-url'], [data-action='show']", triggerExit);
    $(document).on("submit", ".url-load-form", triggerExit)
    $(document).on("modal:exit", function(){
        $("body").removeClass("modal-open");
        Scratch.FlashApp.ASobj.ASsetModalOverlay(false);
        $(".modal-fade-screen", $modal).removeClass("visible");
        $(this).off();
    });
    return $modal;
}

$(document).keyup(function(e) {
    // Exit modals with esc key
    if (e.keyCode == 27) $(document).trigger("modal:exit");
});

$(document).on("modal:exit", function(e){Scratch.FlashApp.ASobj.ASsetModalOverlay(false);});

$(document).on('click', "[data-action='modal']", function(e){
    /*
     * Usage:
     *     <a href="#content" data-action="modal" data-template="id-for-content">Popup</a>
     */

    e.preventDefault();
    showModal($(this).data("template"));
});

function JSshowWarning(extensionData) {
    $modal = showModal("template-warning");
    $("button, .modal-close", $modal).click(function(e){
        e.preventDefault();
        $(document).trigger("modal:exit")
    });

}


/* Page switching */

var showClickListener = function(e) {
    /*
     * Anything with data-action="show" should switch the view
     * to that page. Works like tabs sort of. Use like...
     *     <!-- Makes a link to the Privacy Policy section -->
     *     <button data-target="#privacy-policy" data-action="show">Privacy Policy</button>
     * 
     */
    window.location.hash = $(this).data("target");
}

$(window).bind('hashchange', function(e) {
    var page = '';
    if (document.location.hash == '') {
        page = 'home';
    } else {
        page = window.location.hash.substr(1);
    }
    showPage(page);
});

function showPage(path) {
    /*
     * Show a part of the page.  The site is set up like
     * body
     *   main
     *     article#home
     *     article#privacy-policy
     *     ...
     *   editor
     * 
     * Each <article> is a "page" of the site, plus one special
     * view, which is the editor.
     * 
     * The editor is not actually hidden, but located -9999px above
     * the viewport. This is because if it's hidden, it doesn't load
     * when the page is loaded.
     *
     * So first we have to hide everything that we're not going to show
     * or move the editor up, then display everything we're going to show
     * if it's hidden.
     *
     * If we are linking to an anchor within a page, then show its parent.
     */
    var toHide = "body > main, body > main > article";
    var toShow = "#" + path;
    var $toShow = $(toShow);

    if (!$toShow.length) return;

    $(toHide).filter(":visible").hide();
    if (toShow != "#" + editorId) $("#" + editorId).css({top: "-9999px"});
    $("body > main, body > main > article").has($toShow).show();
    $toShow.show();
    if (path == editorId) {
        $toShow.css({top: 0});
    }
}

function attachListeners(){
    $("[data-action='load-file']").on('click', loadFileListener);
    $("[data-action='load-url']").on('click', loadURLlistener);
    $(".url-load-form").on('submit', loadURLformListener);
    $("[data-action='show']").on('click', showClickListener);
}

var initialID = "home";
function initPage() {
    /*
     * On load, show the page identified by the URL fragment. Default to #home.
     */
    attachListeners();
    if (window.location.hash) initialID = window.location.hash.substr(1);
    showPage(initialID);
    loadFromURLParameter(window.location.search);
}
$(initPage);