CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-05 08:00:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Allow code demo to shrink more (#3345)

Browse Source 
If the width goes below a certain threshold,
some tabs are replaced with a single tab with a select menu.
This commit is contained in:
Zufeng
2019-12-12 08:53:37 +11:00
committed by Sam El-Husseini
parent 680377684f
commit 07b31489b5
3 changed files with 82 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
demos/code/code.js
View File

@@ -179,6 +179,15 @@ Code.changeLanguage = function() {
window.location.host + window.location.pathname + search;
};
/**
* Changes the output language by clicking the tab matching
* the selected language in the codeMenu.
*/
Code.changeCodingLanguage = function() {
var codeMenu = document.getElementById('code_menu');
Code.tabClick(codeMenu.options[codeMenu.selectedIndex].value);
}
/**
* Bind a function to a button's click event.
* On touch enabled browsers, ontouchend is treated as equivalent to onclick.
@@ -238,6 +247,14 @@ Code.LANG = Code.getLang();
*/
Code.TABS_ = ['blocks', 'javascript', 'php', 'python', 'dart', 'lua', 'xml'];
/**
* List of tab names with casing, for display in the UI.
* @private
*/
Code.TABS_DISPLAY_ = [
'Blocks', 'JavaScript', 'PHP', 'Python', 'Dart', 'Lua', 'XML',
];
Code.selected = 'blocks';
/**
@@ -246,7 +263,7 @@ Code.selected = 'blocks';
*/
Code.tabClick = function(clickedName) {
// If the XML tab was open, save and render the content.
if (document.getElementById('tab_xml').className == 'tabon') {
if (document.getElementById('tab_xml').classList.contains('tabon')) {
var xmlTextarea = document.getElementById('content_xml');
var xmlText = xmlTextarea.value;
var xmlDom = null;
@@ -266,25 +283,42 @@ Code.tabClick = function(clickedName) {
}
}
if (document.getElementById('tab_blocks').className == 'tabon') {
if (document.getElementById('tab_blocks').classList.contains('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';
var tab = document.getElementById('tab_' + name);
tab.classList.add('taboff');
tab.classList.remove('tabon');
document.getElementById('content_' + name).style.visibility = 'hidden';
}
// Select the active tab.
Code.selected = clickedName;
document.getElementById('tab_' + clickedName).className = 'tabon';
var selectedTab = document.getElementById('tab_' + clickedName);
selectedTab.classList.remove('taboff');
selectedTab.classList.add('tabon');
// Show the selected pane.
document.getElementById('content_' + clickedName).style.visibility =
'visible';
Code.renderContent();
// The code menu tab is on if the blocks tab is off.
var codeMenuTab = document.getElementById('tab_code');
if (clickedName == 'blocks') {
Code.workspace.setVisible(true);
codeMenuTab.className = 'taboff';
} else {
codeMenuTab.className = 'tabon';
}
// Sync the menu's value with the clicked tab value if needed.
var codeMenu = document.getElementById('code_menu');
for (var i = 0; i < codeMenu.options.length; i++) {
if (codeMenu.options[i].value == clickedName) {
codeMenu.selectedIndex = i;
break;
}
}
Blockly.svgResize(Code.workspace);
};
@@ -455,6 +489,14 @@ Code.init = function() {
Code.bindClick('tab_' + name,
function(name_) {return function() {Code.tabClick(name_);};}(name));
}
Code.bindClick('tab_code', function(e) {
if (e.target !== document.getElementById('tab_code')) {
// Prevent clicks on child codeMenu from triggering a tab click.
return;
}
Code.changeCodingLanguage();
});
onresize();
Blockly.svgResize(Code.workspace);
@@ -497,6 +539,14 @@ Code.initLanguage = function() {
}
languageMenu.addEventListener('change', Code.changeLanguage, true);
// Populate the coding language selection menu.
var codeMenu = document.getElementById('code_menu');
codeMenu.options.length = 0;
for (var i = 1; i < Code.TABS_.length; i++) {
codeMenu.options.add(new Option(Code.TABS_DISPLAY_[i], Code.TABS_[i]));
}
codeMenu.addEventListener('change', Code.changeCodingLanguage);
// Inject language strings.
document.title += ' ' + MSG['title'];
document.getElementById('title').textContent = MSG['title'];