/**
* 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 [email protected] (Neil Fraser)
*/
'use strict';
var slice = Array.prototype.slice;
var baseUrl = baseUrl || '.';
var storage = new JSONStorage('https://glowing-fire-4998.firebaseio.com/hyproto');
/**
* Create a namespace for the application.
*/
var Code = {};
/**
* Lookup for names of supported languages. Keys should be in ISO 639 format.
*/
Code.LANGUAGE_NAME = {
'en': 'English',
'zh-hant': 'æ£é«”ä¸æ–‡',
'zh-hans': '简体ä¸æ–‡'
};
/**
* List of RTL languages.
*/
Code.LANGUAGE_RTL = ['ar', 'fa', 'he'];
/**
* 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 = 'zh-hant';
}
return lang;
};
Code.getPage = function () {
var page = Code.getStringParamFromUrl('page', 'index');
return page;
};
Code.getTags = function () {
var tags = Code.getStringParamFromUrl('tags', '').trim();
if (!tags.length) {
tags = '*';
}
tags = tags.split(/\s*,\s*/);
return tags;
};
Code.getDemoPage = function () {
var area = document.querySelector('#demo-area.show');
if (area) {
var select = document.querySelector('#demo-select');
var link;
if ((select.value) * 1 < 10) {
link = '0' + select.value;
} else {
link = select.value;
}
return 'demo-area-' + link;
}
return 'default';
};
Code.getPinDropdown = function () {
var tags = Code.getTags(),
mappings = [
[
["2", "2"],
["3~", "3"],
["4", "4"],
["5~", "5"],
["6~", "6"],
["7", "7"],
["8", "8"],
["9~", "9"],
["10~", "10"],
["11~", "11"],
["12", "12"],
["13", "13"],
["14 ( A0 )", "14"],
["15 ( A1 )", "15"],
["16 ( A2 )", "16"],
["17 ( A3 )", "17"],
["18 ( A4 )", "18"],
["19 ( A5 )", "19"]
],
[
["12~", "12"],
["13~", "13"],
["14~", "14"],
["15~", "15"],
["16~", "16"],
["AD", "17"],
["0~", "0"],
["TX", "1"],
["2~", "2"],
["RX", "3"],
["4~", "4"],
["5~", "5"]
],
[
["0", "0"],
["2", "2"],
["3", "3"],
["4", "4"],
["5", "5"],
["6", "6"],
["7", "7"],
["8", "8"],
["9", "9"],
["10", "10"],
["11", "11"],
["12", "12"],
["13", "13"],
["14", "14"],
["15", "15"],
["16", "16"],
["17", "17"],
["18", "18"],
["19", "19"]
]
];
if (tags.length === 1 && tags[0] !== '*') {
if (tags[0] === 'smart') {
return mappings[1];
}
return mappings[0];
}
return mappings[2];
};
Code.loadDoc = function (href, callback) {
var link = document.createElement('link'),
tag = document.getElementsByTagName('script')[0];
link.rel = 'import';
link.href = href;
if (typeof callback === 'function') {
link.onload = function () {
callback(link.import);
};
tag.parentNode.insertBefore(link, tag);
} else {
return new Promise(function (resolve) {
Code.loadDoc(href, resolve);
});
}
};
Code.loadJs = function (src, callback) {
var js = document.createElement('script'),
tag = document.getElementsByTagName('script')[0];
js.async = 1;
js.src = src;
if (typeof callback === 'function') {
js.onload = function () {
callback(js);
};
tag.parentNode.insertBefore(js, tag);
} else {
return new Promise(function (resolve) {
Code.loadJs(src, resolve);
});
}
};
/**
* 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 && BlocklyStorage.isLinkUrl()) {
// 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;
var hash = window.location.hash;
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 + hash;
};
/**
* 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);
}
if (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', baseUrl + '/prettify-tomorrow.css');
link.onload = function () {
Blockly.fireUiEvent(window, 'resize');
};
document.head.appendChild(link);
Code.loadJs(baseUrl + '/prettify.js');
};
/**
* 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
};
};
Code.checkDeviceOnline = function (device) {
device = {};
device.inputArea = document.getElementById('input-device');
device.btn = document.getElementById('check-btn');
device.icon = document.getElementById('check-icon');
if (!localStorage.boardCheckOpen) {
localStorage.boardCheckOpen = 0;
}
device.btn.onclick = function () {
if (localStorage.boardCheckOpen == 1) {
localStorage.boardCheckOpen = 0;
device.inputArea.className = device.inputArea.className.replace("open", "");
} else {
localStorage.boardCheckOpen = 1;
device.inputArea.className = device.inputArea.className + "open";
}
};
device.check = function (v) {
boardReady({
device: v,
multi: true
}, true, function (board) {
device.icon.setAttribute('class', 'check board-online icon-power');
board.once(webduino.BoardEvent.DISCONNECT, function (e) {
device.icon.setAttribute('class', 'check board-error icon-power');
});
});
device.icon.setAttribute('class', 'check board-error icon-power');
};
device.inputArea.oninput = function () {
localStorage.boardState = this.value;
if (this.value.length > 3 && this.value.length <= 8 && this.value.indexOf('.') === -1) {
device.check(this.value);
} else {
device.icon.setAttribute('class', 'check icon-power');
}
};
if (localStorage.boardState) {
device.inputArea.value = localStorage.boardState;
device.inputArea.oninput();
}
if (localStorage.boardCheckOpen == 0) {
device.inputArea.className = device.inputArea.className.replace("open", "");
} else if (localStorage.boardCheckOpen == 1 && device.inputArea.value.length < 4) {
localStorage.boardCheckOpen = 0;
device.inputArea.className = device.inputArea.className.replace("open", "");
} else {
device.inputArea.className = device.inputArea.className + "open";
}
};
Code.copyCode = function (copy) {
copy = {};
copy.jsTab = document.getElementById('tab_javascript');
copy.copyBtn = document.getElementById('copyCode');
copy.clipboard = new Clipboard('#copyCode');
copy.clipboard.on('success', function (e) {
copy.copyBtn.setAttribute('data-tooltip', 'Copied!!!');
});
copy.copyBtn.addEventListener('mouseleave', function () {
copy.copyBtn.setAttribute('data-tooltip', 'Copy to clipboard');
});
copy.jsTab.addEventListener('click', function () {
copy.copyBtn.style.display = 'table-cell';
});
document.getElementById('tab_blocks').addEventListener('click', function () {
copy.copyBtn.style.display = 'none';
});
};
Code.bindHotkey = function (document) {
Blockly.bindEvent_(document, 'keydown', null, function (e) {
switch (Code.getHotKey(e)) {
case Code.HOTKEY.EXEC:
Code.runJS();
break;
default:
break;
}
});
};
Code.getHotKey = function (e) {
// Ctrl/Cmd + E
if ((e.ctrlKey || e.metaKey) && e.keyCode === 69) {
return Code.HOTKEY.EXEC;
}
return Code.HOTKEY.UNKNOWN;
};
Code.loadDemoArea = function () {
var area = document.getElementById('demo-area');
var content = document.querySelector('.demo-area-content');
var btn = document.getElementById('demoButton');
var select = document.getElementById('demo-select');
var close = document.querySelector('.close-btn');
var contentHeight = document.getElementById('content_blocks').offsetHeight;
var resizeLeftBar = document.querySelector('#demo-area .resize-bar-left');
var resizeRightBar = document.querySelector('#demo-area .resize-bar-right');
var resizeBottomBar = document.querySelector('#demo-area .resize-bar-bottom');
var resizeTopBar = document.querySelector('#demo-area .resize-bar-top');
var resizeTopLeftBar = document.querySelector('#demo-area .resize-bar-top-left');
var resizeTopRightBar = document.querySelector('#demo-area .resize-bar-top-right');
var resizeBottomLeftBar = document.querySelector('#demo-area .resize-bar-bottom-left');
var resizeBottomRightBar = document.querySelector('#demo-area .resize-bar-bottom-right');
var MIN_WIDTH = 225;
var MIN_HEIGHT = 225;
area.className = area.className.replace("show", "");
if (localStorage.demoAreaWidth && localStorage.demoAreaWidth) {
area.style.width = localStorage.demoAreaWidth;
area.style.height = localStorage.demoAreaHeight;
}
if (localStorage.demoArea == 'open') {
area.className = area.className + "show";
btn.className = "notext toolMenu opened";
}
if (!localStorage.demoAreaSelect) {
localStorage.demoAreaSelect = 1;
}
select.value = localStorage.demoAreaSelect;
Code.reloadSandbox();
window.addEventListener('unload', function () {
localStorage.demoAreaWidth = area.style.width;
localStorage.demoAreaHeight = area.style.height;
});
$(area).contents().click(function() {
Code.setTopArea('demo');
});
content.addEventListener('mousedown', function (e) {
e.stopPropagation();
});
area.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var mouseX = e.pageX;
var mouseY = e.pageY;
var positionRight = document.body.offsetWidth - area.offsetLeft - area.offsetWidth;
var positionTop = area.offsetTop;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveX = evt.pageX;
var mouseMoveY = evt.pageY;
area.style.right = positionRight - (mouseMoveX - mouseX) + 'px';
area.style.top = positionTop + (mouseMoveY - mouseY) + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.remove();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
});
resizeLeftBar && resizeLeftBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var ox = e.pageX;
var dw = area.offsetWidth;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var rx = evt.pageX;
var width = dw - rx + ox - 20;
width = width < MIN_WIDTH ? MIN_WIDTH : width;
area.style.width = width + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.remove();
area.dataset.width = area.style.width;
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
e.stopPropagation();
});
resizeRightBar && resizeRightBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var frameWidth = area.offsetWidth;
var mouseX = e.pageX;
var positionRight = document.body.offsetWidth - area.offsetLeft - frameWidth;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveX = evt.pageX;
var dist = mouseMoveX - mouseX;
var width = frameWidth + dist - 20;
if (width < MIN_WIDTH) {
width = MIN_WIDTH;
dist = width - frameWidth + 20;
}
area.style.width = width + 'px';
area.style.right = positionRight - dist + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.width = area.style.width;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
resizeBottomBar && resizeBottomBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var oy = e.pageY;
var dh = area.offsetHeight;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var ry = evt.pageY;
var height = dh + ry - oy - 20;
height = height < MIN_HEIGHT ? MIN_HEIGHT : height;
area.style.height = height + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.height = area.style.height;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
resizeTopBar && resizeTopBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var frameHeight = area.offsetHeight;
var mouseY = e.pageY;
var positionTop = area.offsetTop;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveY = evt.pageY;
var dist = mouseMoveY - mouseY;
var height = frameHeight - dist - 20;
if (height < MIN_HEIGHT) {
height = MIN_HEIGHT;
dist = frameHeight - 20 - height;
}
area.style.height = height + 'px';
area.style.top = positionTop + dist + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.height = area.style.height;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
resizeTopLeftBar && resizeTopLeftBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var frameHeight = area.offsetHeight;
var frameWidth = area.offsetWidth;
var mouseX = e.pageX;
var mouseY = e.pageY;
var positionTop = area.offsetTop;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveX = evt.pageX;
var mouseMoveY = evt.pageY;
var distX = mouseMoveX - mouseX;
var distY = mouseMoveY - mouseY;
var height = frameHeight - distY - 20;
var width = frameWidth - distX - 20;
if (height < MIN_HEIGHT) {
height = MIN_HEIGHT;
distY = frameHeight - 20 - height;
}
width = width < MIN_WIDTH ? MIN_WIDTH : width;
area.style.width = width + 'px';
area.style.height = height + 'px';
area.style.top = positionTop + distY + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.width = area.style.width;
area.dataset.height = area.style.height;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
resizeTopRightBar && resizeTopRightBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var frameHeight = area.offsetHeight;
var frameWidth = area.offsetWidth;
var mouseX = e.pageX;
var mouseY = e.pageY;
var positionTop = area.offsetTop;
var positionRight = document.body.offsetWidth - area.offsetLeft - frameWidth;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveX = evt.pageX;
var mouseMoveY = evt.pageY;
var distX = mouseMoveX - mouseX;
var distY = mouseMoveY - mouseY;
var height = frameHeight - distY - 20;
var width = frameWidth + distX - 20;
if (width < MIN_WIDTH) {
width = MIN_WIDTH;
distX = width - frameWidth + 20;
}
if (height < MIN_HEIGHT) {
height = MIN_HEIGHT;
distY = frameHeight - 20 - height;
}
area.style.width = width + 'px';
area.style.right = positionRight - distX + 'px';
area.style.height = height + 'px';
area.style.top = positionTop + distY + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.width = area.style.width;
area.dataset.height = area.style.height;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
resizeBottomLeftBar && resizeBottomLeftBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var frameHeight = area.offsetHeight;
var frameWidth = area.offsetWidth;
var mouseX = e.pageX;
var mouseY = e.pageY;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveX = evt.pageX;
var mouseMoveY = evt.pageY;
var distX = mouseMoveX - mouseX;
var distY = mouseMoveY - mouseY;
var height = frameHeight + distY - 20;
var width = frameWidth - distX - 20;
width = width < MIN_WIDTH ? MIN_WIDTH : width;
height = height < MIN_HEIGHT ? MIN_HEIGHT : height;
area.style.width = width + 'px';
area.style.height = height + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.width = area.style.width;
area.dataset.height = area.style.height;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
resizeBottomRightBar && resizeBottomRightBar.addEventListener('mousedown', function (e) {
var cover = document.createElement('div');
var frame = document.getElementById('demo-frame');
var frameHeight = area.offsetHeight;
var frameWidth = area.offsetWidth;
var mouseX = e.pageX;
var mouseY = e.pageY;
var positionRight = document.body.offsetWidth - area.offsetLeft - frameWidth;
area.style.opacity = '0.4';
frame.style.pointerEvents = 'none';
area.className += " resize";
Code.setTopArea('demo');
cover.classList.add('demo-cover');
document.body.appendChild(cover);
var move = function (evt) {
var mouseMoveX = evt.pageX;
var mouseMoveY = evt.pageY;
var distX = mouseMoveX - mouseX;
var distY = mouseMoveY - mouseY;
var height = frameHeight + distY - 20;
var width = frameWidth + distX - 20;
if (width < MIN_WIDTH) {
width = MIN_WIDTH;
distX = width - frameWidth + 20;
}
height = height < MIN_HEIGHT ? MIN_HEIGHT : height;
area.style.width = width + 'px';
area.style.height = height + 'px';
area.style.right = positionRight - distX + 'px';
};
var up = function () {
area.style.opacity = '1';
frame.style.pointerEvents = 'auto';
area.classList.remove('resize');
cover.removeEventListener('mousemove', move);
cover.removeEventListener('mouseup', up);
cover.removeEventListener('selectstart', disableSelect);
cover.remove();
area.dataset.width = area.style.width;
area.dataset.height = area.style.height;
};
var disableSelect = function (evt) {
evt.preventDefault();
};
cover.addEventListener('mousemove', move);
cover.addEventListener('mouseup', up);
cover.addEventListener('selectstart', disableSelect);
e.stopPropagation();
});
btn.onclick = function () {
if (localStorage.demoArea == 'open') {
area.className = area.className.replace("show", "");
localStorage.demoArea = 'close';
btn.className = "notext toolMenu";
} else {
area.className += " show";
localStorage.demoArea = 'open';
btn.className = "notext toolMenu opened";
Code.setTopArea('demo');
}
Code.reloadSandbox();
};
close.onclick = function () {
area.className = area.className.replace("show", "");
localStorage.demoArea = 'close';
btn.className = "notext toolMenu";
};
select.onchange = function () {
ga('send', 'event', 'Webduino-blockly', 'demo select', this.value);
localStorage.demoAreaSelect = this.value;
Code.reloadSandbox();
};
};
Code.loadSample = function () {
var sampleBtn = document.getElementById('sampleButton'),
sampleMenu = document.getElementById('smaple-menu'),
sampleMenuOpen = false,
sampleBtnOver = false,
sampleTitle = '