var grid = [];
var words= [];
var width = 1;
var height= 1;
var SIZE = 30;
var currentModeText = document.getElementById('currentMode');
var inputGrid = document.getElementById('generator-grid');
var canvas = new fabric.Canvas('c', { selection: false });
var LabeledRect = fabric.util.createClass(fabric.Rect, {
type: 'labeledRect',
initialize: function(options) {
options = options || {};
this.callSuper('initialize', options);
this.set('label', options.label || '');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
label: this.get('label')
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
ctx.font = '20px Helvetica';
ctx.fillStyle = '#333';
ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
}
});
var initGrid = function() {
// grid
var modifyGridSize = function modifyGridSize() {
var currentWidth = width;//grid[0] ? grid[0].length : 0;
var currentHeight = height;//grid.length;
console.log('grid size is ' + currentWidth + ' x ' + currentHeight);
var iHtml = '';
for(var i = 0,l = currentHeight; i ';
}
iHtml += '
';
}
inputGrid.innerHTML = iHtml;
dynamicEvents();
};
document.getElementById('grid-width').addEventListener("change", function(evt){
width = evt.currentTarget.value;
modifyGridSize();
}, false);
document.getElementById('grid-height').addEventListener("change", function(evt){
height = evt.currentTarget.value;
modifyGridSize();
}, false);
var goToNextCase = function goToNextCase(sens) {
var currentCase = document.activeElement;
var currentX = currentCase.getAttribute('data-x');
var currentY = currentCase.getAttribute('data-y');
if (sens === 39) {
if (currentX == width-1) {
currentY++;
currentX = -1;
}
}
var nextCase;
// left = 37
// up = 38
// right = 39
// down = 40
switch( sens ) {
case 37:
nextCase = document.querySelector('.inputGrid[data-x="'+(+currentX-1)+'"][data-y="'+currentY+'"]');
break;
case 38:
nextCase = document.querySelector('.inputGrid[data-x="'+currentX+'"][data-y="'+(+currentY-1)+'"]');
break;
case 39:
nextCase = document.querySelector('.inputGrid[data-x="'+(+currentX+1)+'"][data-y="'+currentY+'"]');
break;
case 40:
nextCase = document.querySelector('.inputGrid[data-x="'+currentX+'"][data-y="'+(+currentY+1)+'"]');
break;
default: nextCase = currentCase;
break;
}
if(nextCase != undefined) {
nextCase.focus();
}
};
var gridKeyup = function gridKeyup(evt) {
var typedKey = evt.keyCode;
var senses = [37,38,39,40];
if (senses.indexOf(typedKey) !== -1) {
goToNextCase(typedKey);
} else if (typedKey >= 65 && typedKey <= 90) {
evt.currentTarget.value = String.fromCharCode(typedKey).toUpperCase();
goToNextCase(39);
}
};
var dynamicEvents = function dynamicEvents() {
var inputs = document.getElementsByClassName('inputGrid');
var inputsLength = inputs.length;
for (var i = 0; i < inputsLength; i++) {
var input = inputs[i];
input.removeEventListener("keyup",gridKeyup);
input.addEventListener("keyup", gridKeyup.bind(this), false);
}
};
var isGridValid = function isGridValid() {
for (var i = 0,l = height; i