summaryrefslogtreecommitdiff
path: root/blockly/demos/code/code.js
diff options
context:
space:
mode:
Diffstat (limited to 'blockly/demos/code/code.js')
-rw-r--r--blockly/demos/code/code.js532
1 files changed, 532 insertions, 0 deletions
diff --git a/blockly/demos/code/code.js b/blockly/demos/code/code.js
new file mode 100644
index 0000000..65a2621
--- /dev/null
+++ b/blockly/demos/code/code.js
@@ -0,0 +1,532 @@
+/**
+ * Blockly Demos: Code
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Code demo.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+/**
+ * Create a namespace for the application.
+ */
+var Code = {};
+
+/**
+ * Lookup for names of supported languages. Keys should be in ISO 639 format.
+ */
+Code.LANGUAGE_NAME = {
+ 'ar': 'العربية',
+ 'be-tarask': 'Taraškievica',
+ 'br': 'Brezhoneg',
+ 'ca': 'Català',
+ 'cs': 'Česky',
+ 'da': 'Dansk',
+ 'de': 'Deutsch',
+ 'el': 'Ελληνικά',
+ 'en': 'English',
+ 'es': 'Español',
+ 'et': 'Eesti',
+ 'fa': 'فارسی',
+ 'fr': 'Français',
+ 'he': 'עברית',
+ 'hrx': 'Hunsrik',
+ 'hu': 'Magyar',
+ 'ia': 'Interlingua',
+ 'is': 'Íslenska',
+ 'it': 'Italiano',
+ 'ja': '日本語',
+ 'ko': '한국어',
+ 'mk': 'Македонски',
+ 'ms': 'Bahasa Melayu',
+ 'nb': 'Norsk Bokmål',
+ 'nl': 'Nederlands, Vlaams',
+ 'oc': 'Lenga d\'òc',
+ 'pl': 'Polski',
+ 'pms': 'Piemontèis',
+ 'pt-br': 'Português Brasileiro',
+ 'ro': 'Română',
+ 'ru': 'Русский',
+ 'sc': 'Sardu',
+ 'sk': 'Slovenčina',
+ 'sr': 'Српски',
+ 'sv': 'Svenska',
+ 'ta': 'தமிழ்',
+ 'th': 'ภาษาไทย',
+ 'tlh': 'tlhIngan Hol',
+ 'tr': 'Türkçe',
+ 'uk': 'Українська',
+ 'vi': 'Tiếng Việt',
+ 'zh-hans': '简体中文',
+ 'zh-hant': '正體中文'
+};
+
+/**
+ * List of RTL languages.
+ */
+Code.LANGUAGE_RTL = ['ar', 'fa', 'he', 'lki'];
+
+/**
+ * Blockly's main workspace.
+ * @type {Blockly.WorkspaceSvg}
+ */
+Code.workspace = null;
+
+/**
+ * Extracts a parameter from the URL.
+ * If the parameter is absent default_value is returned.
+ * @param {string} name The name of the parameter.
+ * @param {string} defaultValue Value to return if paramater not found.
+ * @return {string} The parameter value or the default value if not found.
+ */
+Code.getStringParamFromUrl = function(name, defaultValue) {
+ var val = location.search.match(new RegExp('[?&]' + name + '=([^&]+)'));
+ return val ? decodeURIComponent(val[1].replace(/\+/g, '%20')) : defaultValue;
+};
+
+/**
+ * Get the language of this user from the URL.
+ * @return {string} User's language.
+ */
+Code.getLang = function() {
+ var lang = Code.getStringParamFromUrl('lang', '');
+ if (Code.LANGUAGE_NAME[lang] === undefined) {
+ // Default to English.
+ lang = 'en';
+ }
+ return lang;
+};
+
+/**
+ * Is the current language (Code.LANG) an RTL language?
+ * @return {boolean} True if RTL, false if LTR.
+ */
+Code.isRtl = function() {
+ return Code.LANGUAGE_RTL.indexOf(Code.LANG) != -1;
+};
+
+/**
+ * Load blocks saved on App Engine Storage or in session/local storage.
+ * @param {string} defaultXml Text representation of default blocks.
+ */
+Code.loadBlocks = function(defaultXml) {
+ try {
+ var loadOnce = window.sessionStorage.loadOnceBlocks;
+ } catch(e) {
+ // Firefox sometimes throws a SecurityError when accessing sessionStorage.
+ // Restarting Firefox fixes this, so it looks like a bug.
+ var loadOnce = null;
+ }
+ if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+ // An href with #key trigers an AJAX call to retrieve saved blocks.
+ BlocklyStorage.retrieveXml(window.location.hash.substring(1));
+ } else if (loadOnce) {
+ // Language switching stores the blocks during the reload.
+ delete window.sessionStorage.loadOnceBlocks;
+ var xml = Blockly.Xml.textToDom(loadOnce);
+ Blockly.Xml.domToWorkspace(xml, Code.workspace);
+ } else if (defaultXml) {
+ // Load the editor with default starting blocks.
+ var xml = Blockly.Xml.textToDom(defaultXml);
+ Blockly.Xml.domToWorkspace(xml, Code.workspace);
+ } else if ('BlocklyStorage' in window) {
+ // Restore saved blocks in a separate thread so that subsequent
+ // initialization is not affected from a failed load.
+ window.setTimeout(BlocklyStorage.restoreBlocks, 0);
+ }
+};
+
+/**
+ * Save the blocks and reload with a different language.
+ */
+Code.changeLanguage = function() {
+ // Store the blocks for the duration of the reload.
+ // This should be skipped for the index page, which has no blocks and does
+ // not load Blockly.
+ // MSIE 11 does not support sessionStorage on file:// URLs.
+ if (typeof Blockly != 'undefined' && window.sessionStorage) {
+ var xml = Blockly.Xml.workspaceToDom(Code.workspace);
+ var text = Blockly.Xml.domToText(xml);
+ window.sessionStorage.loadOnceBlocks = text;
+ }
+
+ var languageMenu = document.getElementById('languageMenu');
+ var newLang = encodeURIComponent(
+ languageMenu.options[languageMenu.selectedIndex].value);
+ var search = window.location.search;
+ if (search.length <= 1) {
+ search = '?lang=' + newLang;
+ } else if (search.match(/[?&]lang=[^&]*/)) {
+ search = search.replace(/([?&]lang=)[^&]*/, '$1' + newLang);
+ } else {
+ search = search.replace(/\?/, '?lang=' + newLang + '&');
+ }
+
+ window.location = window.location.protocol + '//' +
+ window.location.host + window.location.pathname + search;
+};
+
+/**
+ * Bind a function to a button's click event.
+ * On touch enabled browsers, ontouchend is treated as equivalent to onclick.
+ * @param {!Element|string} el Button element or ID thereof.
+ * @param {!Function} func Event handler to bind.
+ */
+Code.bindClick = function(el, func) {
+ if (typeof el == 'string') {
+ el = document.getElementById(el);
+ }
+ el.addEventListener('click', func, true);
+ el.addEventListener('touchend', func, true);
+};
+
+/**
+ * Load the Prettify CSS and JavaScript.
+ */
+Code.importPrettify = function() {
+ //<link rel="stylesheet" href="../prettify.css">
+ //<script src="../prettify.js"></script>
+ var link = document.createElement('link');
+ link.setAttribute('rel', 'stylesheet');
+ link.setAttribute('href', '../prettify.css');
+ document.head.appendChild(link);
+ var script = document.createElement('script');
+ script.setAttribute('src', '../prettify.js');
+ document.head.appendChild(script);
+};
+
+/**
+ * Compute the absolute coordinates and dimensions of an HTML element.
+ * @param {!Element} element Element to match.
+ * @return {!Object} Contains height, width, x, and y properties.
+ * @private
+ */
+Code.getBBox_ = function(element) {
+ var height = element.offsetHeight;
+ var width = element.offsetWidth;
+ var x = 0;
+ var y = 0;
+ do {
+ x += element.offsetLeft;
+ y += element.offsetTop;
+ element = element.offsetParent;
+ } while (element);
+ return {
+ height: height,
+ width: width,
+ x: x,
+ y: y
+ };
+};
+
+/**
+ * User's language (e.g. "en").
+ * @type {string}
+ */
+Code.LANG = Code.getLang();
+
+/**
+ * List of tab names.
+ * @private
+ */
+Code.TABS_ = ['blocks', 'javascript', 'php', 'python', 'dart', 'lua', 'xml'];
+
+Code.selected = 'blocks';
+
+/**
+ * Switch the visible pane when a tab is clicked.
+ * @param {string} clickedName Name of tab clicked.
+ */
+Code.tabClick = function(clickedName) {
+ // If the XML tab was open, save and render the content.
+ if (document.getElementById('tab_xml').className == 'tabon') {
+ var xmlTextarea = document.getElementById('content_xml');
+ var xmlText = xmlTextarea.value;
+ var xmlDom = null;
+ try {
+ xmlDom = Blockly.Xml.textToDom(xmlText);
+ } catch (e) {
+ var q =
+ window.confirm(MSG['badXml'].replace('%1', e));
+ if (!q) {
+ // Leave the user on the XML tab.
+ return;
+ }
+ }
+ if (xmlDom) {
+ Code.workspace.clear();
+ Blockly.Xml.domToWorkspace(xmlDom, Code.workspace);
+ }
+ }
+
+ if (document.getElementById('tab_blocks').className == 'tabon') {
+ Code.workspace.setVisible(false);
+ }
+ // Deselect all tabs and hide all panes.
+ for (var i = 0; i < Code.TABS_.length; i++) {
+ var name = Code.TABS_[i];
+ document.getElementById('tab_' + name).className = 'taboff';
+ document.getElementById('content_' + name).style.visibility = 'hidden';
+ }
+
+ // Select the active tab.
+ Code.selected = clickedName;
+ document.getElementById('tab_' + clickedName).className = 'tabon';
+ // Show the selected pane.
+ document.getElementById('content_' + clickedName).style.visibility =
+ 'visible';
+ Code.renderContent();
+ if (clickedName == 'blocks') {
+ Code.workspace.setVisible(true);
+ }
+ Blockly.svgResize(Code.workspace);
+};
+
+/**
+ * Populate the currently selected pane with content generated from the blocks.
+ */
+Code.renderContent = function() {
+ var content = document.getElementById('content_' + Code.selected);
+ // Initialize the pane.
+ if (content.id == 'content_xml') {
+ var xmlTextarea = document.getElementById('content_xml');
+ var xmlDom = Blockly.Xml.workspaceToDom(Code.workspace);
+ var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
+ xmlTextarea.value = xmlText;
+ xmlTextarea.focus();
+ } else if (content.id == 'content_javascript') {
+ var code = Blockly.JavaScript.workspaceToCode(Code.workspace);
+ content.textContent = code;
+ if (typeof prettyPrintOne == 'function') {
+ code = content.innerHTML;
+ code = prettyPrintOne(code, 'js');
+ content.innerHTML = code;
+ }
+ } else if (content.id == 'content_python') {
+ code = Blockly.Python.workspaceToCode(Code.workspace);
+ content.textContent = code;
+ if (typeof prettyPrintOne == 'function') {
+ code = content.innerHTML;
+ code = prettyPrintOne(code, 'py');
+ content.innerHTML = code;
+ }
+ } else if (content.id == 'content_php') {
+ code = Blockly.PHP.workspaceToCode(Code.workspace);
+ content.textContent = code;
+ if (typeof prettyPrintOne == 'function') {
+ code = content.innerHTML;
+ code = prettyPrintOne(code, 'php');
+ content.innerHTML = code;
+ }
+ } else if (content.id == 'content_dart') {
+ code = Blockly.Dart.workspaceToCode(Code.workspace);
+ content.textContent = code;
+ if (typeof prettyPrintOne == 'function') {
+ code = content.innerHTML;
+ code = prettyPrintOne(code, 'dart');
+ content.innerHTML = code;
+ }
+ } else if (content.id == 'content_lua') {
+ code = Blockly.Lua.workspaceToCode(Code.workspace);
+ content.textContent = code;
+ if (typeof prettyPrintOne == 'function') {
+ code = content.innerHTML;
+ code = prettyPrintOne(code, 'lua');
+ content.innerHTML = code;
+ }
+ }
+};
+
+/**
+ * Initialize Blockly. Called on page load.
+ */
+Code.init = function() {
+ Code.initLanguage();
+
+ var rtl = Code.isRtl();
+ var container = document.getElementById('content_area');
+ var onresize = function(e) {
+ var bBox = Code.getBBox_(container);
+ for (var i = 0; i < Code.TABS_.length; i++) {
+ var el = document.getElementById('content_' + Code.TABS_[i]);
+ el.style.top = bBox.y + 'px';
+ el.style.left = bBox.x + 'px';
+ // Height and width need to be set, read back, then set again to
+ // compensate for scrollbars.
+ el.style.height = bBox.height + 'px';
+ el.style.height = (2 * bBox.height - el.offsetHeight) + 'px';
+ el.style.width = bBox.width + 'px';
+ el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
+ }
+ // Make the 'Blocks' tab line up with the toolbox.
+ if (Code.workspace && Code.workspace.toolbox_.width) {
+ document.getElementById('tab_blocks').style.minWidth =
+ (Code.workspace.toolbox_.width - 38) + 'px';
+ // Account for the 19 pixel margin and on each side.
+ }
+ };
+ window.addEventListener('resize', onresize, false);
+
+ // Interpolate translated messages into toolbox.
+ var toolboxText = document.getElementById('toolbox').outerHTML;
+ toolboxText = toolboxText.replace(/{(\w+)}/g,
+ function(m, p1) {return MSG[p1]});
+ var toolboxXml = Blockly.Xml.textToDom(toolboxText);
+
+ Code.workspace = Blockly.inject('content_blocks',
+ {grid:
+ {spacing: 25,
+ length: 3,
+ colour: '#ccc',
+ snap: true},
+ media: '../../media/',
+ rtl: rtl,
+ toolbox: toolboxXml,
+ zoom:
+ {controls: true,
+ wheel: true}
+ });
+
+ // Add to reserved word list: Local variables in execution environment (runJS)
+ // and the infinite loop detection function.
+ Blockly.JavaScript.addReservedWords('code,timeouts,checkTimeout');
+
+ Code.loadBlocks('');
+
+ if ('BlocklyStorage' in window) {
+ // Hook a save function onto unload.
+ BlocklyStorage.backupOnUnload(Code.workspace);
+ }
+
+ Code.tabClick(Code.selected);
+
+ Code.bindClick('trashButton',
+ function() {Code.discard(); Code.renderContent();});
+ Code.bindClick('runButton', Code.runJS);
+ // Disable the link button if page isn't backed by App Engine storage.
+ var linkButton = document.getElementById('linkButton');
+ if ('BlocklyStorage' in window) {
+ BlocklyStorage['HTTPREQUEST_ERROR'] = MSG['httpRequestError'];
+ BlocklyStorage['LINK_ALERT'] = MSG['linkAlert'];
+ BlocklyStorage['HASH_ERROR'] = MSG['hashError'];
+ BlocklyStorage['XML_ERROR'] = MSG['xmlError'];
+ Code.bindClick(linkButton,
+ function() {BlocklyStorage.link(Code.workspace);});
+ } else if (linkButton) {
+ linkButton.className = 'disabled';
+ }
+
+ for (var i = 0; i < Code.TABS_.length; i++) {
+ var name = Code.TABS_[i];
+ Code.bindClick('tab_' + name,
+ function(name_) {return function() {Code.tabClick(name_);};}(name));
+ }
+ onresize();
+ Blockly.svgResize(Code.workspace);
+
+ // Lazy-load the syntax-highlighting.
+ window.setTimeout(Code.importPrettify, 1);
+};
+
+/**
+ * Initialize the page language.
+ */
+Code.initLanguage = function() {
+ // Set the HTML's language and direction.
+ var rtl = Code.isRtl();
+ document.dir = rtl ? 'rtl' : 'ltr';
+ document.head.parentElement.setAttribute('lang', Code.LANG);
+
+ // Sort languages alphabetically.
+ var languages = [];
+ for (var lang in Code.LANGUAGE_NAME) {
+ languages.push([Code.LANGUAGE_NAME[lang], lang]);
+ }
+ var comp = function(a, b) {
+ // Sort based on first argument ('English', 'Русский', '简体字', etc).
+ if (a[0] > b[0]) return 1;
+ if (a[0] < b[0]) return -1;
+ return 0;
+ };
+ languages.sort(comp);
+ // Populate the language selection menu.
+ var languageMenu = document.getElementById('languageMenu');
+ languageMenu.options.length = 0;
+ for (var i = 0; i < languages.length; i++) {
+ var tuple = languages[i];
+ var lang = tuple[tuple.length - 1];
+ var option = new Option(tuple[0], lang);
+ if (lang == Code.LANG) {
+ option.selected = true;
+ }
+ languageMenu.options.add(option);
+ }
+ languageMenu.addEventListener('change', Code.changeLanguage, true);
+
+ // Inject language strings.
+ document.title += ' ' + MSG['title'];
+ document.getElementById('title').textContent = MSG['title'];
+ document.getElementById('tab_blocks').textContent = MSG['blocks'];
+
+ document.getElementById('linkButton').title = MSG['linkTooltip'];
+ document.getElementById('runButton').title = MSG['runTooltip'];
+ document.getElementById('trashButton').title = MSG['trashTooltip'];
+};
+
+/**
+ * Execute the user's code.
+ * Just a quick and dirty eval. Catch infinite loops.
+ */
+Code.runJS = function() {
+ Blockly.JavaScript.INFINITE_LOOP_TRAP = ' checkTimeout();\n';
+ var timeouts = 0;
+ var checkTimeout = function() {
+ if (timeouts++ > 1000000) {
+ throw MSG['timeout'];
+ }
+ };
+ var code = Blockly.JavaScript.workspaceToCode(Code.workspace);
+ Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
+ try {
+ eval(code);
+ } catch (e) {
+ alert(MSG['badCode'].replace('%1', e));
+ }
+};
+
+/**
+ * Discard all blocks from the workspace.
+ */
+Code.discard = function() {
+ var count = Code.workspace.getAllBlocks().length;
+ if (count < 2 ||
+ window.confirm(Blockly.Msg.DELETE_ALL_BLOCKS.replace('%1', count))) {
+ Code.workspace.clear();
+ if (window.location.hash) {
+ window.location.hash = '';
+ }
+ }
+};
+
+// Load the Code demo's language strings.
+document.write('<script src="msg/' + Code.LANG + '.js"></script>\n');
+// Load Blockly's language strings.
+document.write('<script src="../../msg/js/' + Code.LANG + '.js"></script>\n');
+
+window.addEventListener('load', Code.init);