/** * 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 = {}; Code.Lang = 'en'; /** * Lookup for names of supported languages. Keys should be in ISO 639 format. */ Code.LANGUAGE_NAME = { 'en': 'English', }; /** * 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() { return 'en'; }; /** * 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); } }; /** * 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() { // // var link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('href', 'demos/prettify.css'); document.head.appendChild(link); var script = document.createElement('script'); script.setAttribute('src', 'demos/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', 'python', '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 = "// BROBOT code\n"; code += "var STEPSMETER="+STEPSMETER+";\nvar STEPSTURN="+STEPSTURN+";\n\n"; 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') { // Add python Initialization code code = '# PYTHON BROBOT CODE\n'; code +='import time\nfrom BROBOT_Class import BROBOT\n'; code += 'myRobot = BROBOT()\n\n'; code += Blockly.Python.workspaceToCode(Code.workspace); content.textContent = code; if (typeof prettyPrintOne == 'function') { code = content.innerHTML; code = prettyPrintOne(code, 'py'); content.innerHTML = code; } } }; /** * Initialize Blockly. Called on page load. */ Code.init = function() { $( function() { $( "#dialog" ).dialog(); } ); Code.initLanguage(); 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/', 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() { document.head.parentElement.setAttribute('lang', 'en'); // Inject language strings. document.title += ' ' + 'title'; document.getElementById('tab_blocks').textContent = 'blocks'; document.getElementById('linkButton').title = 'link'; document.getElementById('runButton').title = 'run'; document.getElementById('trashButton').title = 'trash'; }; /** * Execute the user's code. * Just a quick and dirty eval. Catch infinite loops. */ Code.runJS = function() { console.log('run code...'); 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; console.log(code); eval(code); //try { // eval(code); //} catch (e) { // console.log('Code error...'); //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 = ''; } } }; window.addEventListener('load', Code.init);