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

Allow attaching blocks to a marked spot from the toolbox modal. This is the last prerequisite for removal of the existing on-screen toolbox.

Browse Source
This commit is contained in:
Sean Lip
2016-11-17 17:12:27 -08:00
parent df56c64f4f
commit cf9a4fbdf4
4 changed files with 101 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
accessible/media/accessible.css
View File

@@ -49,7 +49,7 @@
.blocklyModal {
background-color: #fefefe;
border: 1px solid #888;
margin: 15% auto;
margin: 10% auto;
max-width: 600px;
padding: 20px;
width: 60%;

77
accessible/sidebar.component.js
View File

@@ -37,11 +37,18 @@ blocklyApp.SidebarComponent = ng.core.Component({
{{buttonConfig.text}}
</button>
</span>
<button (click)="showToolboxModal()"
<button (click)="showToolboxModalForAttachToMarkedSpot()"
[attr.disabled]="isAnyConnectionMarked() ? undefined : 'disabled'"
[attr.aria-disabled]="!isAnyConnectionMarked()"
class="blocklySidebarButton">
Attach new block to link...
</button>
<button (click)="showToolboxModalForCreateNewGroup()"
class="blocklySidebarButton">
Create new block group...
</button>
<button id="clear-workspace" (click)="workspace.clear()"
[attr.disabled]="isWorkspaceEmpty() ? 'disabled' : undefined"
[attr.aria-disabled]="isWorkspaceEmpty()"
class="blocklySidebarButton">
{{'CLEAR_WORKSPACE'|translate}}
@@ -55,9 +62,10 @@ blocklyApp.SidebarComponent = ng.core.Component({
constructor: [
blocklyApp.NotificationsService, blocklyApp.TreeService,
blocklyApp.UtilsService, blocklyApp.ToolboxModalService,
blocklyApp.ClipboardService,
function(
_notificationsService, _treeService, _utilsService,
_toolboxModalService) {
_toolboxModalService, _clipboardService) {
// ACCESSIBLE_GLOBALS is a global variable defined by the containing
// page. It should contain a key, customSidebarButtons, describing
// additional buttons that should be displayed after the default ones.
@@ -70,8 +78,12 @@ blocklyApp.SidebarComponent = ng.core.Component({
this.treeService = _treeService;
this.utilsService = _utilsService;
this.toolboxModalService = _toolboxModalService;
this.clipboardService = _clipboardService;
}
],
isAnyConnectionMarked: function() {
return this.clipboardService.isAnyConnectionMarked();
},
handleButtonClick: function(buttonConfig) {
buttonConfig.action();
if (buttonConfig.onClickNotification) {
@@ -85,7 +97,64 @@ blocklyApp.SidebarComponent = ng.core.Component({
isWorkspaceEmpty: function() {
return this.utilsService.isWorkspaceEmpty();
},
showToolboxModal: function() {
this.toolboxModalService.showModal();
showToolboxModalForAttachToMarkedSpot: function() {
var that = this;
this.toolboxModalService.showModal(function(opt_block) {
if (!opt_block) {
return;
}
var block = opt_block;
var blockDescription = that.utilsService.getBlockDescription(block);
// Clean up the active desc for the destination tree.
var oldDestinationTreeId = that.treeService.getTreeIdForBlock(
that.clipboardService.getMarkedConnectionBlock().id);
that.treeService.clearActiveDesc(oldDestinationTreeId);
var newBlockId = that.clipboardService.pasteToMarkedConnection(block);
// Invoke a digest cycle, so that the DOM settles.
setTimeout(function() {
that.treeService.focusOnBlock(newBlockId);
var newDestinationTreeId = that.treeService.getTreeIdForBlock(
newBlockId);
if (newDestinationTreeId != oldDestinationTreeId) {
// It is possible for the tree ID for the pasted block to change
// after the paste operation, e.g. when inserting a block between two
// existing blocks that are joined together. In this case, we need to
// also reset the active desc for the old destination tree.
that.treeService.initActiveDesc(oldDestinationTreeId);
}
that.notificationsService.setStatusMessage(
blockDescription + ' connected. ' +
'Now on copied block in workspace.');
});
}, function(block) {
return that.clipboardService.canBeCopiedToMarkedConnection(block);
});
},
showToolboxModalForCreateNewGroup: function() {
var that = this;
this.toolboxModalService.showModal(function(opt_block) {
if (!opt_block) {
return;
}
var block = opt_block;
var blockDescription = that.utilsService.getBlockDescription(block);
var xml = Blockly.Xml.blockToDom(block);
var newBlockId = Blockly.Xml.domToBlock(blocklyApp.workspace, xml).id;
setTimeout(function() {
that.treeService.focusOnBlock(newBlockId);
that.notificationsService.setStatusMessage(
blockDescription + ' added to workspace. ' +
'Now on added block in workspace.');
});
}, function(block) {
return true;
});
}
});

43
accessible/toolbox-modal.component.js
View File

@@ -31,15 +31,17 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
<!-- The $event.stopPropagation() here prevents the modal from
closing when its interior is clicked. -->
<div class="blocklyModal" (click)="$event.stopPropagation()" role="document">
<h3>Select a block for the new group...</h3>
<h3>Select a block...</h3>
<div *ngFor="#toolboxCategory of toolboxCategories; #categoryIndex=index">
<h4>{{toolboxCategory.categoryName}}</h4>
<div class="blocklyModalButtonContainer"
*ngFor="#block of toolboxCategory.blocks; #blockIndex=index">
<button [id]="getOptionId(getOverallIndex(categoryIndex, blockIndex))"
(click)="selectBlock(categoryIndex, blockIndex); hideModal();"
[ngClass]="{activeButton: activeButtonIndex == getOverallIndex(categoryIndex, blockIndex)}">
(click)="hideModal(getBlock(categoryIndex, blockIndex))"
[ngClass]="{activeButton: activeButtonIndex == getOverallIndex(categoryIndex, blockIndex)}"
[attr.disabled]="isBlockAvailable(getBlock(categoryIndex, blockIndex)) ? undefined : 'disabled'"
[attr.aria-disabled]="!isBlockAvailable(getBlock(categoryIndex, blockIndex))">
{{getBlockDescription(block)}}
</button>
</div>
@@ -77,12 +79,14 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
this.firstBlockIndexes = [];
this.activeButtonIndex = 0;
this.totalNumBlocks = null;
this.isBlockAvailable = null;
var that = this;
this.toolboxModalService.registerPreShowHook(
function(toolboxCategories) {
function(toolboxCategories, isBlockAvailable) {
that.modalIsVisible = true;
that.toolboxCategories = toolboxCategories;
that.isBlockAvailable = isBlockAvailable;
var cumulativeIndex = 0;
that.toolboxCategories.forEach(function(category) {
@@ -105,14 +109,20 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
var button = document.getElementById(
that.getOptionId(that.activeButtonIndex));
if (button.disabled) {
evt.preventDefault();
evt.stopPropagation();
return;
}
for (var i = 0; i < that.toolboxCategories.length; i++) {
if (that.firstBlockIndexes[i + 1] > that.activeButtonIndex) {
var categoryIndex = i;
var blockIndex =
that.activeButtonIndex - that.firstBlockIndexes[i];
that.selectBlock(categoryIndex, blockIndex);
break;
var block = that.getBlock(categoryIndex, blockIndex);
that.hideModal(block);
return;
}
}
@@ -154,19 +164,8 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
getOverallIndex: function(categoryIndex, blockIndex) {
return this.firstBlockIndexes[categoryIndex] + blockIndex;
},
selectBlock: function(categoryIndex, blockIndex) {
var block = this.toolboxCategories[categoryIndex].blocks[blockIndex];
var blockDescription = this.getBlockDescription(block);
var xml = Blockly.Xml.blockToDom(block);
var newBlockId = Blockly.Xml.domToBlock(blocklyApp.workspace, xml).id;
var that = this;
setTimeout(function() {
that.treeService.focusOnBlock(newBlockId);
that.notificationsService.setStatusMessage(
blockDescription + ' added to workspace. ' +
'Now on added block in workspace.');
});
getBlock: function(categoryIndex, blockIndex) {
return this.toolboxCategories[categoryIndex].blocks[blockIndex];
},
getBlockDescription: function(block) {
return this.utilsService.getBlockDescription(block);
@@ -189,9 +188,9 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
return 'toolbox-modal-option-' + this.totalNumBlocks;
},
// Closes the modal.
hideModal: function() {
hideModal: function(opt_block) {
this.modalIsVisible = false;
this.keyboardInputService.clearOverride();
this.toolboxModalService.hideModal();
this.toolboxModalService.hideModal(opt_block);
}
});

12
accessible/toolbox-modal.service.js
View File

@@ -27,6 +27,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
constructor: [function() {
this.modalIsShown = false;
this.onHideCallback = null;
this.isBlockAvailable = null;
this.preShowHook = function() {
throw Error(
'A pre-show hook must be defined for the toolbox modal before it ' +
@@ -69,21 +70,20 @@ blocklyApp.ToolboxModalService = ng.core.Class({
}],
registerPreShowHook: function(preShowHook) {
this.preShowHook = function() {
preShowHook(this.toolboxCategories);
preShowHook(this.toolboxCategories, this.isBlockAvailable);
};
},
isModalShown: function() {
return this.modalIsShown;
},
showModal: function(onHideCallback) {
showModal: function(onHideCallback, isBlockAvailable) {
this.onHideCallback = onHideCallback;
this.isBlockAvailable = isBlockAvailable;
this.preShowHook();
this.modalIsShown = true;
},
hideModal: function() {
hideModal: function(opt_block) {
this.modalIsShown = false;
if (this.onHideCallback) {
this.onHideCallback();
}
this.onHideCallback(opt_block);
}
});