From 271817894952c1eff96e103d7b2b621ce50f1298 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9gori=20Mignerot?= Date: Tue, 11 Jan 2022 11:41:44 +0100 Subject: [PATCH] Remove the dependency to jQuery in the examples, remove the need for a leading '#' in DOM id parameters --- README.md | 16 ++++++++-------- load-from-file.html | 8 ++++---- load-from-url.html | 2 +- src/flapjack-bytes.js | 16 ++++++++-------- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index af55ac8..19ac430 100644 --- a/README.md +++ b/README.md @@ -141,12 +141,12 @@ document.addEventListener("DOMContentLoaded", function(){ document.getElementById("submit").addEventListener("click", function(){ var renderer = GenotypeRenderer(); renderer.renderGenotypesFile({ - domParent: "#canvas-holder", + domParent: "canvas-holder", width: null, height: 600, - mapFileDom: "#mapfile", - genotypeFileDom: "#genofile", - phenotypeFileDom: "#phenofile", + mapFileDom: "mapfile", + genotypeFileDom: "genofile", + phenotypeFileDom: "phenofile", overviewWidth: null, overviewHeight: 200, minGenotypeAutoWidth: 600, @@ -214,12 +214,12 @@ document.addEventListener("DOMContentLoaded", function(){ document.getElementById("submit").addEventListener("click", function(){ var renderer = GenotypeRenderer(); renderer.renderGenotypesUrl({ - domParent: "#canvas-holder", + domParent: "canvas-holder", width: 800, height: 600, - mapFileURL: $('#mapfile').val(), - genotypeFileURL: $('#genofile').val(), - phenotypeFileURL: $('#phenotype').val(), + mapFileURL: document.getElementById('mapfile').value, + genotypeFileURL: document.getElementById('genofile').value, + phenotypeFileURL: document.getElementById('phenofile').value, overviewWidth: 800, overviewHeight: 200 dataSetId: "MyDataSet", diff --git a/load-from-file.html b/load-from-file.html index 4e53fc3..312937d 100644 --- a/load-from-file.html +++ b/load-from-file.html @@ -28,11 +28,11 @@ document.getElementById("submit").addEventListener("click", function(){ var renderer = GenotypeRenderer(); renderer.renderGenotypesFile({ - domParent: "#canvas-holder", + domParent: "canvas-holder", width: null, height: 600, - mapFileDom: "#mapfile", - genotypeFileDom: "#genofile", - phenotypeFileDom: "#phenofile", + mapFileDom: "mapfile", + genotypeFileDom: "genofile", + phenotypeFileDom: "phenofile", overviewWidth: null, overviewHeight: 200, minGenotypeAutoWidth: 600, minGenotypeAutoHeight: 600, }); diff --git a/load-from-url.html b/load-from-url.html index 9089459..62cb1fe 100644 --- a/load-from-url.html +++ b/load-from-url.html @@ -28,7 +28,7 @@ document.getElementById("submit").addEventListener("click", function(){ var renderer = GenotypeRenderer(); renderer.renderGenotypesUrl({ - domParent: "#canvas-holder", + domParent: "canvas-holder", width: 800, height: 600, mapFileURL: document.getElementById('mapfile').value, diff --git a/src/flapjack-bytes.js b/src/flapjack-bytes.js index a4701d7..df03346 100644 --- a/src/flapjack-bytes.js +++ b/src/flapjack-bytes.js @@ -35,7 +35,7 @@ export default function GenotypeRenderer() { function sendEvent(eventName, domParent) { // TODO: Invesitgate using older event emitting code for IE support - const canvasHolder = document.getElementById(domParent.slice(1)); + const canvasHolder = document.getElementById(domParent.replace('#', '')); // Create the event. const event = new Event(eventName); @@ -53,7 +53,7 @@ export default function GenotypeRenderer() { } function clearParent(domParent) { - const canvasHolder = document.getElementById(domParent.slice(1)); + const canvasHolder = document.getElementById(domParent.replace('#', '')); while (canvasHolder.firstChild){ canvasHolder.removeChild(canvasHolder.firstChild); } @@ -64,7 +64,7 @@ export default function GenotypeRenderer() { if (config.minGenotypeAutoWidth === undefined) config.minGenotypeAutoWidth = 0; if (config.minOverviewAutoWidth === undefined) config.minOverviewAutoWidth = 0; - const canvasHolder = document.getElementById(config.domParent.slice(1)); + const canvasHolder = document.getElementById(config.domParent.replace('#', '')); canvasHolder.style.fontFamily = 'system-ui'; canvasHolder.style.fontSize = '14px'; @@ -333,7 +333,7 @@ export default function GenotypeRenderer() { addRadioButton('selectedSort', 'alphabeticSort', 'Alphabetically', false, radioCol); addRadioButton('selectedSort', 'similaritySort', 'By similarity to line', false, radioCol, lineSelect); - if ((config.phenotypeFileDom !== undefined && document.getElementById(config.phenotypeFileDom.slice(1)).files[0] !== undefined) || config.phenotypeFileURL !== undefined){ + if ((config.phenotypeFileDom !== undefined && document.getElementById(config.phenotypeFileDom.replace('#', '')).files[0] !== undefined) || config.phenotypeFileURL !== undefined){ const traitSelect = document.createElement('select'); traitSelect.id = 'sortTraitSelect'; traitSelect.disabled = true; @@ -389,7 +389,7 @@ export default function GenotypeRenderer() { } function createDisplayTab(config){ - if ((config.phenotypeFileDom !== undefined && document.getElementById(config.phenotypeFileDom.slice(1)).files[0] !== undefined) || config.phenotypeFileURL !== undefined){ + if ((config.phenotypeFileDom !== undefined && document.getElementById(config.phenotypeFileDom.replace('#', '')).files[0] !== undefined) || config.phenotypeFileURL !== undefined){ const tab = document.createElement('div'); tab.classList.add('bytes-tab'); @@ -852,7 +852,7 @@ export default function GenotypeRenderer() { let loadingPromises = []; if (config.mapFileDom !== undefined){ - const mapFile = document.getElementById(config.mapFileDom.slice(1)).files[0]; + const mapFile = document.getElementById(config.mapFileDom.replace('#', '')).files[0]; let mapPromise = loadFromFile(mapFile); // Load map data @@ -868,7 +868,7 @@ export default function GenotypeRenderer() { } if (config.phenotypeFileDom !== undefined){ - const phenotypeFile = document.getElementById(config.phenotypeFileDom.slice(1)).files[0]; + const phenotypeFile = document.getElementById(config.phenotypeFileDom.replace('#', '')).files[0]; let phenotypePromise = loadFromFile(phenotypeFile); // Load phenotype data @@ -886,7 +886,7 @@ export default function GenotypeRenderer() { } // const qtlPromise = loadFromFile(qtlFileDom); - const genotypeFile = document.getElementById(config.genotypeFileDom.slice(1)).files[0]; + const genotypeFile = document.getElementById(config.genotypeFileDom.replace('#', '')).files[0]; let genotypePromise = loadFromFile(genotypeFile); loadingPromises.push(genotypePromise);