diff options
Diffstat (limited to 'blockly/demos/code/code.js')
-rw-r--r-- | blockly/demos/code/code.js | 532 |
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); |