mirror of
https://github.com/google/blockly.git
synced 2026-01-27 10:40:09 +01:00
Field colour + Blockly actions (#2855)
* Update field colour to support blockly actions
This commit is contained in:
@@ -311,41 +311,19 @@ Blockly.FieldColour.prototype.onClick_ = function(e) {
|
||||
* @private
|
||||
*/
|
||||
Blockly.FieldColour.prototype.onKeyDown_ = function(e) {
|
||||
var colours = this.colours_ || Blockly.FieldColour.COLOURS;
|
||||
var columns = this.columns_ || Blockly.FieldColour.COLUMNS;
|
||||
var x = this.highlightedIndex_ % columns;
|
||||
var y = Math.floor(this.highlightedIndex_ / columns);
|
||||
var handled = false, navigation = false;
|
||||
if (e.keyCode === Blockly.utils.KeyCodes.UP && y > 0) {
|
||||
// Move up one grid cell.
|
||||
y--;
|
||||
navigation = true;
|
||||
} else if (e.keyCode === Blockly.utils.KeyCodes.DOWN &&
|
||||
y < Math.floor(colours.length / columns) - 1) {
|
||||
// Move down one grid cell.
|
||||
y++;
|
||||
navigation = true;
|
||||
var handled = false;
|
||||
if (e.keyCode === Blockly.utils.KeyCodes.UP) {
|
||||
this.moveHighlightBy_(0, -1);
|
||||
handled = true;
|
||||
} else if (e.keyCode === Blockly.utils.KeyCodes.DOWN) {
|
||||
this.moveHighlightBy_(0, 1);
|
||||
handled = true;
|
||||
} else if (e.keyCode === Blockly.utils.KeyCodes.LEFT) {
|
||||
// Move left one grid cell, even in RTL.
|
||||
x--;
|
||||
if (x < 0 && y > 0) {
|
||||
x = columns - 1;
|
||||
y--;
|
||||
} else if (x < 0) {
|
||||
x = 0;
|
||||
}
|
||||
navigation = true;
|
||||
this.moveHighlightBy_(-1, 0);
|
||||
handled = true;
|
||||
} else if (e.keyCode === Blockly.utils.KeyCodes.RIGHT) {
|
||||
// Move right one grid cell, even in RTL.
|
||||
x++;
|
||||
if (x > columns - 1 &&
|
||||
y < Math.floor(colours.length / columns) - 1) {
|
||||
x = 0;
|
||||
y++;
|
||||
} else if (x > columns - 1) {
|
||||
x--;
|
||||
}
|
||||
navigation = true;
|
||||
this.moveHighlightBy_(1, 0);
|
||||
handled = true;
|
||||
} else if (e.keyCode === Blockly.utils.KeyCodes.ENTER) {
|
||||
// Select the highlighted colour.
|
||||
var highlighted = this.getHighlighted_();
|
||||
@@ -358,16 +336,90 @@ Blockly.FieldColour.prototype.onKeyDown_ = function(e) {
|
||||
Blockly.DropDownDiv.hideWithoutAnimation();
|
||||
handled = true;
|
||||
}
|
||||
if (navigation) {
|
||||
var cell = this.picker_.childNodes[y].childNodes[x];
|
||||
var index = (y * columns) + x;
|
||||
this.setHighlightedCell_(cell, index);
|
||||
}
|
||||
if (handled || navigation) {
|
||||
if (handled) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles the given action.
|
||||
* This is only triggered when keyboard accessibility mode is enabled.
|
||||
* @param {!Blockly.Action} action The action to be handled.
|
||||
* @return {boolean} True if the field handled the action, false otherwise.
|
||||
* @package
|
||||
*/
|
||||
Blockly.FieldColour.prototype.onBlocklyAction = function(action) {
|
||||
if (action === Blockly.navigation.ACTION_PREVIOUS) {
|
||||
this.moveHighlightBy_(0, -1);
|
||||
return true;
|
||||
} else if (action === Blockly.navigation.ACTION_NEXT) {
|
||||
this.moveHighlightBy_(0, 1);
|
||||
return true;
|
||||
} else if (action === Blockly.navigation.ACTION_OUT) {
|
||||
this.moveHighlightBy_(-1, 0);
|
||||
return true;
|
||||
} else if (action === Blockly.navigation.ACTION_IN) {
|
||||
this.moveHighlightBy_(1, 0);
|
||||
return true;
|
||||
}
|
||||
return Blockly.FieldColour.superClass_.onBlocklyAction.call(this, action);
|
||||
};
|
||||
|
||||
/**
|
||||
* Move the currently highlighted position by dx and dy.
|
||||
* @param {number} dx Change of x
|
||||
* @param {number} dy Change of y
|
||||
* @private
|
||||
*/
|
||||
Blockly.FieldColour.prototype.moveHighlightBy_ = function(dx, dy) {
|
||||
var colours = this.colours_ || Blockly.FieldColour.COLOURS;
|
||||
var columns = this.columns_ || Blockly.FieldColour.COLUMNS;
|
||||
|
||||
// Get the current x and y coordinates
|
||||
var x = this.highlightedIndex_ % columns;
|
||||
var y = Math.floor(this.highlightedIndex_ / columns);
|
||||
|
||||
// Add the offset
|
||||
x += dx;
|
||||
y += dy;
|
||||
|
||||
if (dx < 0) {
|
||||
// Move left one grid cell, even in RTL.
|
||||
// Loop back to the end of the previous row if we have room.
|
||||
if (x < 0 && y > 0) {
|
||||
x = columns - 1;
|
||||
y--;
|
||||
} else if (x < 0) {
|
||||
x = 0;
|
||||
}
|
||||
} else if (dx > 0) {
|
||||
// Move right one grid cell, even in RTL.
|
||||
// Loop to the start of the next row, if there's room.
|
||||
if (x > columns - 1 &&
|
||||
y < Math.floor(colours.length / columns) - 1) {
|
||||
x = 0;
|
||||
y++;
|
||||
} else if (x > columns - 1) {
|
||||
x--;
|
||||
}
|
||||
} else if (dy < 0) {
|
||||
// Move up one grid cell, stop at the top.
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
}
|
||||
} else if (dy > 0) {
|
||||
// Move down one grid cell, stop at the bottom.
|
||||
if (y > Math.floor(colours.length / columns) - 1) {
|
||||
y = Math.floor(colours.length / columns) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Move the highlight to the new coordinates.
|
||||
var cell = this.picker_.childNodes[y].childNodes[x];
|
||||
var index = (y * columns) + x;
|
||||
this.setHighlightedCell_(cell, index);
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle a mouse move event. Highlight the hovered colour.
|
||||
* @param {!MouseEvent} e Mouse event.
|
||||
|
||||
Reference in New Issue
Block a user