fix: advanced playground and playground to work when hosted (#6021)

This commit is contained in:
alschmiedt
2022-03-23 11:08:55 -07:00
committed by GitHub
parent c7a359a842
commit 364bf14ce6
3 changed files with 37 additions and 40 deletions

View File

@@ -3,29 +3,14 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Advanced Blockly Playground</title> <title>Advanced Blockly Playground</title>
<script src="../../blockly_uncompressed.js"></script> <script src="prepare.js"></script>
<script src="../../msg/messages.js"></script>
<script src="../themes/test_themes.js"></script>
<script src="./screenshot.js"></script> <script src="./screenshot.js"></script>
<script src="../themes/test_themes.js"></script>
<script src="../../node_modules/@blockly/dev-tools/dist/index.js"></script> <script src="../../node_modules/@blockly/dev-tools/dist/index.js"></script>
<script src="../../node_modules/@blockly/theme-modern/dist/index.js"></script> <script src="../../node_modules/@blockly/theme-modern/dist/index.js"></script>
<script> <script type="module">
// Custom requires for the playground. import Blockly from './blockly.mjs';
// Rendering.
goog.require('Blockly.minimalist.Renderer');
goog.require('Blockly.Themes.Zelos');
// Other.
goog.require('Blockly.WorkspaceCommentSvg');
goog.require('Blockly.libraryBlocks');
goog.require('Blockly.Dart.all');
goog.require('Blockly.JavaScript.all');
goog.require('Blockly.Lua.all');
goog.require('Blockly.PHP.all');
goog.require('Blockly.Python.all');
</script>
<script>
'use strict'; 'use strict';
function start() { function start() {
@@ -144,7 +129,7 @@ function configureContextMenu(menuOptions, e) {
// Adds a default-sized workspace comment to the workspace. // Adds a default-sized workspace comment to the workspace.
menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e)); menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e));
} }
start();
</script> </script>
<style> <style>
@@ -169,7 +154,7 @@ function configureContextMenu(menuOptions, e) {
} }
</style> </style>
</head> </head>
<body onload="start()"> <body>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

View File

@@ -70,16 +70,30 @@
}); });
</script>`); </script>`);
} else { } else {
// The below code is necessary for a few reasons:
// - We need an absolute path instead of relative path because the
// advanced_playground the and regular playground are in different folders.
// - We need to get the root directory for blockly because it is
// different for github.io, appspot and local.
const files = [
'blockly_compressed.js',
'msg/messages.js',
'blocks_compressed.js',
'dart_compressed.js',
'javascript_compressed.js',
'lua_compressed.js',
'php_compressed.js',
'python_compressed.js',
];
// We need to load Blockly in compiled mode. // We need to load Blockly in compiled mode.
const hostName = window.location.host.replaceAll('.', '\\.');
const matches = new RegExp(hostName + '\\/(.*)tests').exec(window.location.href);
const root = matches && matches[1] ? matches[1] : '';
// Load blockly_compressed.js et al. using <script> tags. // Load blockly_compressed.js et al. using <script> tags.
document.write('<script src="../../blockly_compressed.js"></script>'); for (let i = 0; i < files.length; i++) {
document.write('<script src="../../msg/messages.js"></script>'); document.write('<script src="/' + root + files[i] + '"></script>');
document.write('<script src="../../blocks_compressed.js"></script>'); }
document.write('<script src="../../dart_compressed.js"></script>');
document.write('<script src="../../javascript_compressed.js"></script>');
document.write('<script src="../../lua_compressed.js"></script>');
document.write('<script src="../../php_compressed.js"></script>');
document.write('<script src="../../python_compressed.js"></script>');
} }
})(); })();

View File

@@ -5,24 +5,22 @@
*/ */
'use strict'; 'use strict';
goog.provide('Blockly.TestThemes');
/** /**
* A theme with classic colours but enables start hats. * A theme with classic colours but enables start hats.
*/ */
Blockly.Themes.TestHats = Blockly.Theme.defineTheme('testhats', { const TestHatsTheme = Blockly.Theme.defineTheme('testhats', {
'base': Blockly.Themes.Classic 'base': Blockly.Themes.Classic
}); });
Blockly.Themes.TestHats.setStartHats(true); TestHatsTheme.setStartHats(true);
/** /**
* A theme with classic colours but a different font. * A theme with classic colours but a different font.
*/ */
Blockly.Themes.TestFont = Blockly.Theme.defineTheme('testfont', { const TestFontTheme = Blockly.Theme.defineTheme('testfont', {
'base': Blockly.Themes.Classic 'base': Blockly.Themes.Classic
}); });
Blockly.Themes.TestFont.setFontStyle({ TestFontTheme.setFontStyle({
'family': '"Times New Roman", Times, serif', 'family': '"Times New Roman", Times, serif',
'weight': null, // Use default font-weight 'weight': null, // Use default font-weight
'size': 16 'size': 16
@@ -33,9 +31,9 @@ Blockly.Themes.TestFont.setFontStyle({
* @type {!Object<string, Blockly.Theme>} * @type {!Object<string, Blockly.Theme>}
* @private * @private
*/ */
Blockly.Themes.testThemes_ = { const testThemes_ = {
'Test Hats': Blockly.Themes.TestHats, 'Test Hats': TestHatsTheme,
'Test Font': Blockly.Themes.TestFont 'Test Font': TestFontTheme
}; };
/** /**
@@ -45,7 +43,7 @@ Blockly.Themes.testThemes_ = {
* @package * @package
*/ */
function getTestTheme(value) { function getTestTheme(value) {
return Blockly.Themes.testThemes_[value]; return testThemes_[value];
} }
/** /**
@@ -54,7 +52,7 @@ function getTestTheme(value) {
*/ */
function populateTestThemes() { function populateTestThemes() {
var themeChanger = document.getElementById('themeChanger'); var themeChanger = document.getElementById('themeChanger');
var keys = Object.keys(Blockly.Themes.testThemes_); var keys = Object.keys(testThemes_);
for (var i = 0, key; (key = keys[i]); i++) { for (var i = 0, key; (key = keys[i]); i++) {
var option = document.createElement('option'); var option = document.createElement('option');
option.setAttribute('value', key); option.setAttribute('value', key);