diff --git a/src/generator.html b/src/generator.html
index 3c93f14..a651e30 100644
--- a/src/generator.html
+++ b/src/generator.html
@@ -13,20 +13,30 @@
display: block;
height: 100%;
width: 100%;
+ overflow: hidden;
}
header {
- height: 30px;
+ height: 50px;
display: block;
- position: fixed;
+ position: absolute;
+ right: 0;
top: 0;
left: 0;
+ background-color: #6C9BD9;
+ box-shadow: 0 8px 6px -6px black;
}
+ h3 {margin: 5px;}
body>div {
- padding-top: 30px;
+ padding-top: 50px;
display: block;
width: 100%;
height: 100%;
}
+ textarea {
+ width: 500px;
+ height: 300px;
+ box-shadow: inset 0 0 10px #000000;
+ }
@@ -47,7 +57,6 @@
-
diff --git a/src/js/generator.js b/src/js/generator.js
index a5f4572..eaad034 100644
--- a/src/js/generator.js
+++ b/src/js/generator.js
@@ -25,109 +25,111 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, {
ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
}
});
-// 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 ';
+
+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 += '';
}
- 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 = 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