From 921015d0a5a6a76c1bf4dc7e68d0f0d72df272b2 Mon Sep 17 00:00:00 2001 From: Shikiryu Date: Sat, 21 Feb 2015 14:33:58 +0100 Subject: [PATCH] Seems good and functionnal. Need small bugs correction & design --- src/generator.html | 17 ++- src/js/generator.js | 274 +++++++++++++++++++++++++++----------------- 2 files changed, 182 insertions(+), 109 deletions(-) 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