| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
1 parent 7a55695 commit 34fb410
9 files changed
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -70,7 +70,7 @@ | |||
| 70 | 70 | }, | |
| 71 | 71 | "sandbox": { | |
| 72 | 72 | "list": { | |
| 73 | - "2DMatrix": "2D Matrix" | ||
| 73 | + "create_mode": "Create Mode" | ||
| 74 | 74 | }, | |
| 75 | 75 | "name": "Sandbox" | |
| 76 | 76 | }, | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,8 @@ | |||
| 1 | + { | ||
| 2 | + "create_mode": "Words have to go here", | ||
| 3 | + "References": [ | ||
| 4 | + ], | ||
| 5 | + "files": { | ||
| 6 | + "normal": "Create Mode" | ||
| 7 | + } | ||
| 8 | + } | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,122 @@ | |||
| 1 | + 'use strict'; | ||
| 2 | + | ||
| 3 | + const modules = require('../module'); | ||
| 4 | + const util = require('./util'); | ||
| 5 | + | ||
| 6 | + const getNumRows = () => { | ||
| 7 | + var row_field = document.getElementById('numRows'); | ||
| 8 | + return row_field.value; | ||
| 9 | + } | ||
| 10 | + | ||
| 11 | + const getNumColumns = () => { | ||
| 12 | + var column_field = document.getElementById('numColumns'); | ||
| 13 | + return column_field.value; | ||
| 14 | + } | ||
| 15 | + | ||
| 16 | + const fauxData = (r, c) => { | ||
| 17 | + var arr = new Array(r); | ||
| 18 | + for (var i = 0; i < c; i++) { | ||
| 19 | + arr[i] = new Array(c); | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + for (var i = 0; i < r; i++) { | ||
| 23 | + for(var j = 0; j < c; j++){ | ||
| 24 | + arr[i][j] = 0; | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + return arr; | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + const tableToInputFields = () => { | ||
| 31 | + var table = document.querySelector('.mtbl-table'); | ||
| 32 | + | ||
| 33 | + var numRows = table.childNodes.length; | ||
| 34 | + var numColumns = table.childNodes[0].childNodes.length; | ||
| 35 | + | ||
| 36 | + for(var i = 0; i < numRows; i++){ | ||
| 37 | + for(var j = 0; j < numColumns; j++){ | ||
| 38 | + var elem = document.createElement('input'); | ||
| 39 | + elem.type = 'Number'; | ||
| 40 | + elem.value = Math.floor(Math.random() * 10 + 1); | ||
| 41 | + elem.classList.add('mtbl-col','inputField'); | ||
| 42 | + table.childNodes[i].childNodes[j].innerHTML = ''; | ||
| 43 | + table.childNodes[i].childNodes[j].appendChild(elem); | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + const generateJS = (logger) => { | ||
| 49 | + logger.clear(); | ||
| 50 | + var table = document.querySelector('.mtbl-table'); | ||
| 51 | + | ||
| 52 | + var numRows = table.childNodes.length; | ||
| 53 | + var numColumns = table.childNodes[0].childNodes.length; | ||
| 54 | + | ||
| 55 | + logger.print('Copy and paste this code in your data.js file!'); | ||
| 56 | + logger.print(''); | ||
| 57 | + | ||
| 58 | + logger.print('let myTable = ['); | ||
| 59 | + | ||
| 60 | + var line = ''; | ||
| 61 | + var i; | ||
| 62 | + var j; | ||
| 63 | + var comma = ','; | ||
| 64 | + for(i = 0; i < numRows; i++){ | ||
| 65 | + line = '['; | ||
| 66 | + for(j = 0; j < numColumns-1; j++){ | ||
| 67 | + line += table.childNodes[i].childNodes[j].childNodes[0].value + ','; | ||
| 68 | + } | ||
| 69 | + if(i === numRows - 1){comma = '';} | ||
| 70 | + line += table.childNodes[i].childNodes[j++].childNodes[0].value + ']' + comma; | ||
| 71 | + logger.print(line); | ||
| 72 | + } | ||
| 73 | + logger.print(']'); | ||
| 74 | + | ||
| 75 | + | ||
| 76 | + logger.print("let myTableTracer = new Array2DTracer ('"+util.getTracerName()+"')"); | ||
| 77 | + logger.print('myTableTracer._setData (myTable)'); | ||
| 78 | + } | ||
| 79 | + | ||
| 80 | + const mousescroll = (e) =>{ | ||
| 81 | + var colmElem = document.querySelector('.mtbl-col'); | ||
| 82 | + var delta = (e.wheelDelta !== undefined && e.wheelDelta) || | ||
| 83 | + (e.detail !== undefined && -e.detail); | ||
| 84 | + | ||
| 85 | + var inputFields = document.getElementsByClassName("inputField"); | ||
| 86 | + for (var i = 0; i < inputFields.length; i++) { | ||
| 87 | + inputFields[i].style.width = (parseFloat(colmElem.style.fontSize) * 2.5) + "px"; | ||
| 88 | + } | ||
| 89 | + | ||
| 90 | + } | ||
| 91 | + | ||
| 92 | + const setup = () => { | ||
| 93 | + var button_2DMatrix = document.getElementById("button-2DMatrix"); | ||
| 94 | + var logger; | ||
| 95 | + var arr2DTracer; | ||
| 96 | + button_2DMatrix.addEventListener('click',function(){ | ||
| 97 | + util.clearModules(); | ||
| 98 | + arr2DTracer = new modules.Array2DTracer(); | ||
| 99 | + var arrElem = document.querySelector('.module_wrapper'); | ||
| 100 | + arrElem.addEventListener("mousewheel", mousescroll, false); | ||
| 101 | + arrElem.addEventListener("DOMMouseScroll", mousescroll, false); | ||
| 102 | + logger = new modules.LogTracer('Generated Javascript'); | ||
| 103 | + | ||
| 104 | + var numRows = getNumRows(); | ||
| 105 | + var numColumns = getNumColumns(); | ||
| 106 | + var data = fauxData(numRows, numColumns); | ||
| 107 | + | ||
| 108 | + arr2DTracer.setData(data); | ||
| 109 | + tableToInputFields(); | ||
| 110 | + util.positionModules(); | ||
| 111 | + arr2DTracer.refresh(); | ||
| 112 | + },false); | ||
| 113 | + var button_JS = document.getElementById('button-generateJS'); | ||
| 114 | + button_JS.addEventListener('click',function(){ | ||
| 115 | + generateJS(logger); | ||
| 116 | + util.enabledHightlighting(); | ||
| 117 | + },false); | ||
| 118 | + } | ||
| 119 | + | ||
| 120 | + module.exports = { | ||
| 121 | + setup | ||
| 122 | + }; | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,156 +1,13 @@ | |||
| 1 | 1 | 'use strict'; | |
| 2 | 2 | ||
| 3 | 3 | const modules = require('../module'); | |
| 4 | + const array2d = require('./array2d'); | ||
| 4 | 5 | ||
| 5 | - const getNumRows = () => { | ||
| 6 | - var row_field = document.getElementById("numRows"); | ||
| 7 | - return row_field.value; | ||
| 8 | - }; | ||
| 9 | - | ||
| 10 | - const getNumColumns = () => { | ||
| 11 | - var column_field = document.getElementById("numColumns"); | ||
| 12 | - return column_field.value; | ||
| 13 | - }; | ||
| 14 | - | ||
| 15 | - const getTracerName = () =>{ | ||
| 16 | - return document.getElementById("tracerName").value; | ||
| 17 | - } | ||
| 18 | - | ||
| 19 | - const fauxData = (r, c) => { | ||
| 20 | - var arr = new Array(r); | ||
| 21 | - for (var i = 0; i < c; i++) { | ||
| 22 | - arr[i] = new Array(c); | ||
| 23 | - } | ||
| 24 | - | ||
| 25 | - for (var i = 0; i < r; i++) { | ||
| 26 | - for(var j = 0; j < c; j++){ | ||
| 27 | - arr[i][j] = 0; | ||
| 28 | - } | ||
| 29 | - } | ||
| 30 | - return arr; | ||
| 31 | - }; | ||
| 32 | - | ||
| 33 | - const makeInputFields = () =>{ | ||
| 34 | - | ||
| 35 | - var table = document.querySelector('.mtbl-table'); | ||
| 36 | - | ||
| 37 | - var numRows = table.childNodes.length; | ||
| 38 | - var numColumns = table.childNodes[0].childNodes.length; | ||
| 39 | - | ||
| 40 | - for(var i = 0; i < numRows; i++){ | ||
| 41 | - for(var j = 0; j < numColumns; j++){ | ||
| 42 | - var elem = document.createElement('input'); | ||
| 43 | - elem.type = 'Number'; | ||
| 44 | - elem.value = 1; | ||
| 45 | - elem.classList.add('mtbl-col','inputField'); | ||
| 46 | - table.childNodes[i].childNodes[j].innerHTML = ''; | ||
| 47 | - table.childNodes[i].childNodes[j].appendChild(elem); | ||
| 48 | - } | ||
| 49 | - } | ||
| 50 | - | ||
| 51 | - }; | ||
| 52 | - | ||
| 53 | - const generateJS = (logger) =>{ | ||
| 54 | - logger.clear(); | ||
| 55 | - var table = document.querySelector('.mtbl-table'); | ||
| 56 | - | ||
| 57 | - var numRows = table.childNodes.length; | ||
| 58 | - var numColumns = table.childNodes[0].childNodes.length; | ||
| 59 | - | ||
| 60 | - logger.print('Copy and paste this code in your data.js file!'); | ||
| 61 | - logger.print(''); | ||
| 62 | - | ||
| 63 | - logger.print('let myTable = ['); | ||
| 64 | - | ||
| 65 | - var line = ''; | ||
| 66 | - var i; | ||
| 67 | - var j; | ||
| 68 | - var comma = ','; | ||
| 69 | - for(i = 0; i < numRows; i++){ | ||
| 70 | - line = '['; | ||
| 71 | - for(j = 0; j < numColumns-1; j++){ | ||
| 72 | - line += table.childNodes[i].childNodes[j].childNodes[0].value + ','; | ||
| 73 | - } | ||
| 74 | - if(i === numRows - 1){comma = '';} | ||
| 75 | - line += table.childNodes[i].childNodes[j++].childNodes[0].value + ']' + comma; | ||
| 76 | - logger.print(line); | ||
| 77 | - } | ||
| 78 | - logger.print(']'); | ||
| 79 | - | ||
| 80 | - | ||
| 81 | - logger.print("let myTableTracer = new Array2DTracer ('"+getTracerName()+"')"); | ||
| 82 | - logger.print('myTableTracer._setData (myTable)'); | ||
| 83 | - | ||
| 84 | - }; | ||
| 85 | - | ||
| 86 | - const positionModules = () =>{ | ||
| 87 | - var elems = document.getElementsByClassName('module_wrapper'); | ||
| 88 | - if(elems <= 0) return; | ||
| 89 | - | ||
| 90 | - var n = elems.length; | ||
| 91 | - var spacing = (100/n); | ||
| 92 | - | ||
| 93 | - for (var i = 0; i < n; i++) { | ||
| 94 | - if( i === 0){ | ||
| 95 | - elems[i].style.bottom = (spacing * (n-1)) + '%'; | ||
| 96 | - }else if(i === n - 1){ | ||
| 97 | - elems[i].style.top = (spacing * i) + '%'; | ||
| 98 | - }else{ | ||
| 99 | - elems[i].style.top = (spacing * i) + '%'; | ||
| 100 | - elems[i].style.bottom = (spacing * i) + '%'; | ||
| 101 | - } | ||
| 102 | - } | ||
| 103 | - } | ||
| 104 | - | ||
| 105 | - const clearModules = () =>{ | ||
| 106 | - var elems = document.getElementsByClassName('module_wrapper'); | ||
| 107 | - if(elems.length > 0){ | ||
| 108 | - var parent = elems[0].parentElement; | ||
| 109 | - var numChild = parent.childNodes.length; | ||
| 110 | - for(var i = 0; i < numChild; i++){ | ||
| 111 | - parent.removeChild(parent.firstChild); | ||
| 112 | - } | ||
| 113 | - } | ||
| 114 | - } | ||
| 115 | - | ||
| 116 | - const enabledHightlighting = () =>{ | ||
| 117 | - var elems = document.getElementsByClassName('module_wrapper'); | ||
| 118 | - var logger = elems[1]; | ||
| 119 | - var wrapper = logger.childNodes[1]; | ||
| 120 | - console.log(elems); | ||
| 121 | - console.log(wrapper); | ||
| 122 | - for (var i = 0; i < wrapper.childNodes.length; i++) { | ||
| 123 | - wrapper.childNodes[i].style["-webkit-user-select"] = "all"; | ||
| 124 | - } | ||
| 125 | - } | ||
| 126 | - | ||
| 127 | - const setupButtons = () => { | ||
| 128 | - | ||
| 129 | - var button_2DMatrix = document.getElementById("button-2DMatrix"); | ||
| 130 | - var logger; | ||
| 131 | - var arr2DTracer; | ||
| 132 | - button_2DMatrix.addEventListener('click',function(){ | ||
| 133 | - clearModules(); | ||
| 134 | - arr2DTracer = new modules.Array2DTracer(); | ||
| 135 | - logger = new modules.LogTracer('Generated Javascript'); | ||
| 136 | - | ||
| 137 | - var numRows = getNumRows(); | ||
| 138 | - var numColumns = getNumColumns(); | ||
| 139 | - var data = fauxData(numRows, numColumns); | ||
| 140 | - | ||
| 141 | - arr2DTracer.setData(data); | ||
| 142 | - makeInputFields(); | ||
| 143 | - positionModules(); | ||
| 144 | - arr2DTracer.refresh(); | ||
| 145 | - },false); | ||
| 146 | - var button_JS = document.getElementById('button-generateJS'); | ||
| 147 | - button_JS.addEventListener('click',function(){ | ||
| 148 | - generateJS(logger); | ||
| 149 | - enabledHightlighting(); | ||
| 150 | - },false); | ||
| 151 | 6 | ||
| 7 | + const init = () => { | ||
| 8 | + array2d.setup(); | ||
| 152 | 9 | }; | |
| 153 | 10 | ||
| 154 | 11 | module.exports = { | |
| 155 | - setupButtons | ||
| 12 | + init, | ||
| 156 | 13 | }; | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,52 @@ | |||
| 1 | + 'use strict'; | ||
| 2 | + | ||
| 3 | + | ||
| 4 | + const getTracerName = () =>{ | ||
| 5 | + return document.getElementById("tracerName").value; | ||
| 6 | + } | ||
| 7 | + | ||
| 8 | + const positionModules = () =>{ | ||
| 9 | + var elems = document.getElementsByClassName('module_wrapper'); | ||
| 10 | + if(elems <= 0) return; | ||
| 11 | + | ||
| 12 | + var n = elems.length; | ||
| 13 | + var spacing = (100/n); | ||
| 14 | + | ||
| 15 | + for (var i = 0; i < n; i++) { | ||
| 16 | + if( i === 0){ | ||
| 17 | + elems[i].style.bottom = (spacing * (n-1)) + '%'; | ||
| 18 | + }else if(i === n - 1){ | ||
| 19 | + elems[i].style.top = (spacing * i) + '%'; | ||
| 20 | + }else{ | ||
| 21 | + elems[i].style.top = (spacing * i) + '%'; | ||
| 22 | + elems[i].style.bottom = (spacing * i) + '%'; | ||
| 23 | + } | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + const clearModules = () =>{ | ||
| 28 | + var elems = document.getElementsByClassName('module_wrapper'); | ||
| 29 | + if(elems.length > 0){ | ||
| 30 | + var parent = elems[0].parentElement; | ||
| 31 | + var numChild = parent.childNodes.length; | ||
| 32 | + for(var i = 0; i < numChild; i++){ | ||
| 33 | + parent.removeChild(parent.firstChild); | ||
| 34 | + } | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + | ||
| 38 | + const enabledHightlighting = () =>{ | ||
| 39 | + var elems = document.getElementsByClassName('module_wrapper'); | ||
| 40 | + var logger = elems[1]; | ||
| 41 | + var wrapper = logger.childNodes[1]; | ||
| 42 | + for (var i = 0; i < wrapper.childNodes.length; i++) { | ||
| 43 | + wrapper.childNodes[i].style["-webkit-user-select"] = "all"; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + module.exports = { | ||
| 48 | + enabledHightlighting, | ||
| 49 | + positionModules, | ||
| 50 | + clearModules, | ||
| 51 | + getTracerName | ||
| 52 | + }; | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -73,7 +73,7 @@ $(() => { | |||
| 73 | 73 | DOM.showFirstAlgorithm(); | |
| 74 | 74 | } | |
| 75 | 75 | ||
| 76 | - Sandbox.setupButtons(); | ||
| 76 | + Sandbox.init(); | ||
| 77 | 77 | ||
| 78 | 78 | }); | |
| 79 | 79 | ||
| Back | FazBrowse Home | New Git URL |
0 commit comments