Menu style changes and pointer support
This commit is contained in:
Lewis Hemens
parent
e73ba39e13
commit
5c837d80bf
29
index.html
29
index.html
|
|
@ -17,38 +17,41 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#dialog {
|
||||
.dialog {
|
||||
transition: height 0.3s;
|
||||
background: #DDD;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
margin: 10px;
|
||||
border: 1px solid #444;
|
||||
background: #D0E0FF;
|
||||
|
||||
#dialog.hidden {
|
||||
height: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 60px;
|
||||
width: 15%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background: #DEF;
|
||||
outline: 0 !important;
|
||||
border: 0px;
|
||||
border-width: 1px;
|
||||
border-color: #DDD;
|
||||
}
|
||||
|
||||
button.active {
|
||||
font-weight: bold;
|
||||
border-color: #444;
|
||||
background: #D0E0FF;
|
||||
}
|
||||
|
||||
#ascii-canvas {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
cursor: crosshair;
|
||||
};
|
||||
|
||||
#export-area {
|
||||
|
|
@ -61,15 +64,15 @@ button.active {
|
|||
<body>
|
||||
<div id="menu">
|
||||
<div id="buttons">
|
||||
<button id="box-button">Box</button>
|
||||
<button id="box-button" class="active">Box</button>
|
||||
<button id="line-button">Line</button>
|
||||
<button id="freeform-button">Draw</button>
|
||||
<button id="erase-button">Erase</button>
|
||||
<button id="move-button">Resize</button>
|
||||
<button id="menu-button">Menu</button>
|
||||
</div>
|
||||
<div id="dialog" class="hidden">
|
||||
<textarea id="export-area"></textarea>
|
||||
<div id="menu-button-dialog" class="dialog">
|
||||
<pre id="export-area">BLAH</pre>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="ascii-canvas"></canvas>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@ ascii.Controller.prototype.handlePress = function(position) {
|
|||
* @param {ascii.Vector} position
|
||||
*/
|
||||
ascii.Controller.prototype.handleMove = function(position) {
|
||||
// Update the cursor pointer, depending on the draw function.
|
||||
this.view.canvas.style.cursor = this.drawFunction.getCursor(
|
||||
this.view.screenToCell(position));
|
||||
|
||||
// No clicks, so just ignore.
|
||||
if (this.pressVector == null) { return; }
|
||||
|
||||
|
|
@ -156,12 +160,12 @@ ascii.Controller.prototype.installBindings = function() {
|
|||
* @param {string} id The ID of the element clicked.
|
||||
*/
|
||||
ascii.Controller.prototype.updateButtons = function(id) {
|
||||
$('#buttons > button').removeClass();
|
||||
$('#dialog').addClass('hidden');
|
||||
$('#buttons > button').removeClass('active');
|
||||
$('.dialog').removeClass('visible');
|
||||
|
||||
$('#' + id).addClass('active');
|
||||
if (id == 'menu-button') {
|
||||
$('#dialog').removeClass('hidden');
|
||||
}
|
||||
$('#' + id + '-dialog').addClass('visible');
|
||||
|
||||
// Install the right draw tool based on button pressed.
|
||||
if (id == 'box-button') {
|
||||
this.drawFunction = new ascii.DrawBox(this.state);
|
||||
|
|
|
|||
|
|
@ -44,6 +44,11 @@ ascii.DrawFunction.prototype.start = function(position) {};
|
|||
ascii.DrawFunction.prototype.move = function(position) {};
|
||||
/** End of drawing. @param {ascii.Vector} position */
|
||||
ascii.DrawFunction.prototype.end = function(position) {};
|
||||
/** Cursor for given cell.
|
||||
* @param {ascii.Vector} position
|
||||
* @return {string}
|
||||
*/
|
||||
ascii.DrawFunction.prototype.getCursor = function(position) {};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
|
@ -67,7 +72,9 @@ ascii.DrawBox.prototype.move = function(position) {
|
|||
ascii.DrawBox.prototype.end = function(position) {
|
||||
this.state.commitDraw();
|
||||
};
|
||||
|
||||
ascii.DrawBox.prototype.getCursor = function(position) {
|
||||
return 'crosshair';
|
||||
};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
|
@ -94,10 +101,12 @@ ascii.DrawLine.prototype.move = function(position) {
|
|||
|
||||
drawLine(this.state, this.startPosition, position, clockwise);
|
||||
};
|
||||
|
||||
ascii.DrawLine.prototype.end = function(position) {
|
||||
this.state.commitDraw();
|
||||
};
|
||||
ascii.DrawLine.prototype.getCursor = function(position) {
|
||||
return 'crosshair';
|
||||
};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
|
@ -116,9 +125,11 @@ ascii.DrawFreeform.prototype.start = function(position) {
|
|||
ascii.DrawFreeform.prototype.move = function(position) {
|
||||
this.state.setValue(position, this.value);
|
||||
};
|
||||
|
||||
ascii.DrawFreeform.prototype.end = function(position) {
|
||||
};
|
||||
ascii.DrawFreeform.prototype.getCursor = function(position) {
|
||||
return 'crosshair';
|
||||
};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
|
|
@ -215,3 +226,11 @@ ascii.DrawMove.prototype.followLine = function(startPosition, direction) {
|
|||
}
|
||||
};
|
||||
|
||||
ascii.DrawMove.prototype.getCursor = function(position) {
|
||||
if (this.state.getCell(position).isSpecial()) {
|
||||
return 'pointer';
|
||||
} else {
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue