From 38db2702f5e5c86a287d5b55cf38c41927bde1f5 Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Tue, 29 Jan 2019 22:41:04 -0500 Subject: [PATCH 1/8] Update dependencies --- Gemfile.lock | 12 +++++----- yarn.lock | 62 ++++++++++++++++++++++++++-------------------------- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 4413998..1ebec88 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,18 +1,18 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.5.2) + addressable (2.6.0) public_suffix (>= 2.0.2, < 4.0) autoprefixer-rails (6.3.7) execjs colorator (1.1.0) - concurrent-ruby (1.1.3) + concurrent-ruby (1.1.4) em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) eventmachine (1.2.7) execjs (2.7.0) - ffi (1.9.25) + ffi (1.10.0) forwardable-extended (2.6.0) http_parser.rb (0.6.0) i18n (0.9.5) @@ -50,12 +50,12 @@ GEM forwardable-extended (~> 2.6) public_suffix (3.0.3) rb-fsevent (0.10.3) - rb-inotify (0.9.10) - ffi (>= 0.5.0, < 2) + rb-inotify (0.10.0) + ffi (~> 1.0) rouge (3.3.0) ruby_dep (1.5.0) safe_yaml (1.0.4) - sass (3.7.2) + sass (3.7.3) sass-listen (~> 4.0.0) sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) diff --git a/yarn.lock b/yarn.lock index 8c34c01..1d20012 100644 --- a/yarn.lock +++ b/yarn.lock @@ -35,9 +35,9 @@ ajv@^5.2.3, ajv@^5.3.0: json-schema-traverse "^0.3.0" ansi-escapes@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30" - integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw== + version "3.2.0" + resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b" + integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ== ansi-regex@^2.0.0: version "2.1.1" @@ -83,9 +83,9 @@ balanced-match@^1.0.0: integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= bootstrap@^4.1.3: - version "4.1.3" - resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be" - integrity sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w== + version "4.2.1" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.2.1.tgz#8f8bdca024dbf0e8644da32e918c8a03a90a5757" + integrity sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q== brace-expansion@^1.1.7: version "1.1.11" @@ -124,9 +124,9 @@ chalk@^1.1.3: supports-color "^2.0.0" chalk@^2.0.0, chalk@^2.1.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" - integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ== + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== dependencies: ansi-styles "^3.2.1" escape-string-regexp "^1.0.5" @@ -409,7 +409,7 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= -glob@^7.0.5, glob@^7.1.2: +glob@^7.1.2, glob@^7.1.3: version "7.1.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1" integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ== @@ -422,9 +422,9 @@ glob@^7.0.5, glob@^7.1.2: path-is-absolute "^1.0.0" globals@^11.0.1: - version "11.9.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.9.0.tgz#bde236808e987f290768a93d065060d78e6ab249" - integrity sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg== + version "11.10.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50" + integrity sha512-0GZF1RiPKU97IHUO5TORo9w1PwrH/NBPl+fS7oMLdaTRiYmYbwK4NWoZWrAdd0/abG9R2BU+OiwyQpTpE6pdfQ== graceful-fs@^4.1.2: version "4.1.15" @@ -529,9 +529,9 @@ js-tokens@^3.0.2: integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= js-yaml@^3.9.1: - version "3.12.0" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1" - integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A== + version "3.12.1" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600" + integrity sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA== dependencies: argparse "^1.0.7" esprima "^4.0.0" @@ -560,12 +560,12 @@ lodash@^4.17.4, lodash@^4.3.0: integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== lru-cache@^4.0.1: - version "4.1.4" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.4.tgz#51cc46e8e6d9530771c857e24ccc720ecdbcc031" - integrity sha512-EPstzZ23znHUVLKj+lcXO1KvZkrlw+ZirdwvOmnAnA/1PB4ggyXJ77LRkCqkff+ShQ+cqoxCxLQOh4cKITO5iA== + version "4.1.5" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" + integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== dependencies: pseudomap "^1.0.2" - yallist "^3.0.2" + yallist "^2.1.2" mimic-fn@^1.0.0: version "1.2.0" @@ -673,9 +673,9 @@ process-nextick-args@~2.0.0: integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw== progress@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.1.tgz#c9242169342b1c29d275889c95734621b1952e31" - integrity sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg== + version "2.0.3" + resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" + integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA== pseudomap@^1.0.2: version "1.0.2" @@ -722,11 +722,11 @@ restore-cursor@^2.0.0: signal-exit "^3.0.2" rimraf@~2.6.2: - version "2.6.2" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36" - integrity sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w== + version "2.6.3" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab" + integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== dependencies: - glob "^7.0.5" + glob "^7.1.3" run-async@^2.2.0: version "2.3.0" @@ -907,7 +907,7 @@ write@^0.2.1: dependencies: mkdirp "^0.5.1" -yallist@^3.0.2: - version "3.0.3" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9" - integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A== +yallist@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" + integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI= From 0a15fe702dfc01d75db5b657a9aaecadce1fe1a1 Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Tue, 29 Jan 2019 22:44:00 -0500 Subject: [PATCH 2/8] Highlight shot on hover --- _assets/main.js | 24 +++++++++++++++++++----- _assets/main.scss | 1 + _sass/_svg.scss | 3 +++ 3 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 _sass/_svg.scss diff --git a/_assets/main.js b/_assets/main.js index 8978dc5..920c5e6 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -18,11 +18,25 @@ function drawCircle(elem, id, shotLocation) { const ns = "http://www.w3.org/2000/svg"; const circle = document.createElementNS(ns, "circle"); - circle.setAttributeNS(null, "id", id); - circle.setAttributeNS(null, "cx", shotLocation.x); - circle.setAttributeNS(null, "cy", shotLocation.y); - circle.setAttributeNS(null, "r", 25); - circle.setAttributeNS(null, "fill", shotColor); + circle.setAttribute("id", id); + circle.classList.add("shot"); + circle.setAttribute("cx", shotLocation.x); + circle.setAttribute("cy", shotLocation.y); + circle.setAttribute("r", 45); + circle.setAttribute("fill", shotColor); + circle.addEventListener("mouseover", function(evt) { + this.setAttribute("r", 45); + this.parentElement.querySelectorAll(".shot").forEach((item) => { + item.classList.add("faded"); + }); + this.classList.remove("faded"); + }); + circle.addEventListener("mouseout", function(evt) { + this.setAttributeNS(null, "r", 25); + this.parentElement.querySelectorAll(".shot").forEach((item) => { + item.classList.remove("faded"); + }); + }); elem.appendChild(circle); } diff --git a/_assets/main.scss b/_assets/main.scss index e4140ee..a33e07b 100644 --- a/_assets/main.scss +++ b/_assets/main.scss @@ -5,6 +5,7 @@ @import "type"; @import "nav"; @import "cards"; +@import "svg"; // @import "bootstrap/scss/alert"; // @import "bootstrap/scss/badge"; // @import "bootstrap/scss/breadcrumb"; diff --git a/_sass/_svg.scss b/_sass/_svg.scss new file mode 100644 index 0000000..69faee7 --- /dev/null +++ b/_sass/_svg.scss @@ -0,0 +1,3 @@ +.faded { + opacity: 0.5; +} From d8597f3cab3e874758209846fa2e438aa99c8f30 Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Tue, 29 Jan 2019 22:44:36 -0500 Subject: [PATCH 3/8] Hide alt text on hover --- _assets/main.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/_assets/main.js b/_assets/main.js index 920c5e6..d0f8377 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -102,6 +102,16 @@ buildTable(); }); + rink.addEventListener("mouseover", function(evt) { + this.setAttribute("data-title", this.getElementsByTagName("title")[0].innerHTML); + this.getElementsByTagName("title")[0].innerHTML = ""; + }); + + rink.addEventListener("mouseout", function(evt) { + this.getElementsByTagName("title")[0].innerHTML = this.getAttribute("data-title"); + this.removeAttribute("data-title"); + }); + rink.addEventListener( "mousedown", evt => { From 49653afdbddffd88f1608dd6df2d5cbf5c20a4e9 Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Wed, 30 Jan 2019 21:05:43 -0500 Subject: [PATCH 4/8] Highlight shot on table row mouseover --- _assets/main.js | 42 ++++++++++++++++++++++++++++++------------ _sass/_svg.scss | 4 ++++ 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/_assets/main.js b/_assets/main.js index d0f8377..58223fa 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -15,27 +15,35 @@ return pt.matrixTransform(rink.getScreenCTM().inverse()); } + function emphasizeShot(shot) { + shot.setAttribute("r", 45); + shot.parentElement.querySelectorAll(".shot").forEach((item) => { + item.classList.add("faded"); + }); + shot.classList.remove("faded"); + } + + function deemphasizeShot(shot) { + shot.setAttribute("r", 25); + shot.parentElement.querySelectorAll(".shot").forEach((item) => { + item.classList.remove("faded"); + }); + } + function drawCircle(elem, id, shotLocation) { const ns = "http://www.w3.org/2000/svg"; const circle = document.createElementNS(ns, "circle"); - circle.setAttribute("id", id); + circle.setAttribute("id", `shot-${id}`); circle.classList.add("shot"); circle.setAttribute("cx", shotLocation.x); circle.setAttribute("cy", shotLocation.y); circle.setAttribute("r", 45); circle.setAttribute("fill", shotColor); - circle.addEventListener("mouseover", function(evt) { - this.setAttribute("r", 45); - this.parentElement.querySelectorAll(".shot").forEach((item) => { - item.classList.add("faded"); - }); - this.classList.remove("faded"); + circle.addEventListener("mouseover", (event) => { + emphasizeShot(event.currentTarget); }); - circle.addEventListener("mouseout", function(evt) { - this.setAttributeNS(null, "r", 25); - this.parentElement.querySelectorAll(".shot").forEach((item) => { - item.classList.remove("faded"); - }); + circle.addEventListener("mouseout", (event) => { + deemphasizeShot(event.currentTarget); }); elem.appendChild(circle); } @@ -96,6 +104,16 @@ ], pagingType: "simple" }); + + const rows = table[0].querySelectorAll("tbody tr"); + for (let i = 0; i < rows.length; i++) { + rows[i].addEventListener("mouseover", (event) => { + emphasizeShot(document.getElementById(`shot-${rows[i].children[0].innerHTML}`)); + }); + rows[i].addEventListener("mouseout", (event) => { + deemphasizeShot(document.getElementById(`shot-${rows[i].children[0].innerHTML}`)); + }) + } } unitSelector.addEventListener("change", () => { diff --git a/_sass/_svg.scss b/_sass/_svg.scss index 69faee7..6b0f69f 100644 --- a/_sass/_svg.scss +++ b/_sass/_svg.scss @@ -1,3 +1,7 @@ +.shot { + transition: opacity 0.2s ease-in; +} + .faded { opacity: 0.5; } From 40aa9cbc9ca6644252860afe0dddf4103bc34fdf Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Wed, 30 Jan 2019 21:20:05 -0500 Subject: [PATCH 5/8] Refactor for consistency and clarity https://twitter.com/Una/status/1090728937632813062 --- _assets/main.js | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/_assets/main.js b/_assets/main.js index 58223fa..7cc2f14 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -9,9 +9,9 @@ let tableData = []; let shotCounter = 0; - function cursorPoint(evt) { - pt.x = evt.clientX; - pt.y = evt.clientY; + function cursorPoint(event) { + pt.x = event.clientX; + pt.y = event.clientY; return pt.matrixTransform(rink.getScreenCTM().inverse()); } @@ -49,23 +49,21 @@ } function generateX(num, unitType) { - if (unitType === "cm") { - return Math.round((num - xOffset.NA) * 2.54, 1); - } else if (unitType === "in") { - return Math.round(num - xOffset.NA, 1); - } else if (unitType === "ft") { - return Math.round((num - xOffset.NA) / 12, 1); - } + const formulas = { + "cm": Math.round((num - xOffset.NA) * 2.54, 1), + "in": Math.round(num - xOffset.NA, 1), + "ft": Math.round((num - xOffset.NA) / 12, 1) + }; + return formulas[unitType]; } function generateY(num, unitType) { - if (unitType === "cm") { - return Math.round(-(num - yOffset.NA) * 2.54, 1); - } else if (unitType === "in") { - return Math.round(-(num - yOffset.NA), 1); - } else if (unitType === "ft") { - return Math.round(-(num - yOffset.NA) / 12, 1); + const formulas = { + "cm": Math.round(-(num - yOffset.NA) * 2.54, 1), + "in": Math.round(-(num - yOffset.NA), 1), + "ft": Math.round(-(num - yOffset.NA) / 12, 1) } + return formulas[unitType]; } function convertUnits(coordinates) { @@ -120,21 +118,21 @@ buildTable(); }); - rink.addEventListener("mouseover", function(evt) { + rink.addEventListener("mouseover", function(event) { this.setAttribute("data-title", this.getElementsByTagName("title")[0].innerHTML); this.getElementsByTagName("title")[0].innerHTML = ""; }); - rink.addEventListener("mouseout", function(evt) { + rink.addEventListener("mouseout", function(event) { this.getElementsByTagName("title")[0].innerHTML = this.getAttribute("data-title"); this.removeAttribute("data-title"); }); rink.addEventListener( "mousedown", - evt => { + event => { const shotID = ++shotCounter; - const shotLocation = cursorPoint(evt); + const shotLocation = cursorPoint(event); let coordinates = { x: shotLocation.x, y: shotLocation.y, From a59e4d8b4b82c26fb5616569cbfd8be6cb358193 Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Wed, 30 Jan 2019 23:17:43 -0500 Subject: [PATCH 6/8] Highlight row when hovering over shot --- _assets/main.js | 105 ++++++++++++++++++++++++++------------------- _sass/_tables.scss | 5 +++ 2 files changed, 67 insertions(+), 43 deletions(-) diff --git a/_assets/main.js b/_assets/main.js index 7cc2f14..9b4eb00 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -1,4 +1,4 @@ -(() => { +document.addEventListener("DOMContentLoaded", (event) => { const rink = document.getElementById("rink"); const unitSelector = document.getElementById("unit-selector"); const pt = rink.createSVGPoint(); @@ -30,6 +30,14 @@ }); } + function emphasizeRow(row) { + row.classList.add("emphasized-row"); + } + + function deemphasizeRow(row) { + row.classList.remove("emphasized-row"); + } + function drawCircle(elem, id, shotLocation) { const ns = "http://www.w3.org/2000/svg"; const circle = document.createElementNS(ns, "circle"); @@ -41,9 +49,21 @@ circle.setAttribute("fill", shotColor); circle.addEventListener("mouseover", (event) => { emphasizeShot(event.currentTarget); + try { + emphasizeRow(document.getElementById(`row-${id}`)); + } + catch(error) { + console.error("Row cannot be highlighted because shot is not listed in current table view."); + } }); circle.addEventListener("mouseout", (event) => { deemphasizeShot(event.currentTarget); + try { + deemphasizeRow(document.getElementById(`row-${id}`)); + } + catch(error) { + console.error("Row cannot be highlighted because shot is not listed in current table view."); + } }); elem.appendChild(circle); } @@ -94,6 +114,17 @@ { title: "X", data: "x" }, { title: "Y", data: "y" }, ], + rowId: (convertedData) => { return `row-${convertedData.id}`}, + createdRow: function(row, data, dataIndex) { + row.addEventListener("mouseover", (event) => { + emphasizeShot(document.getElementById(`shot-${row.children[0].innerHTML}`)); + emphasizeRow(row); + }); + row.addEventListener("mouseout", (event) => { + deemphasizeShot(document.getElementById(`shot-${row.children[0].innerHTML}`)); + deemphasizeRow(row); + }); + }, buttons: [ { extend: "csvHtml5", @@ -102,52 +133,40 @@ ], pagingType: "simple" }); - - const rows = table[0].querySelectorAll("tbody tr"); - for (let i = 0; i < rows.length; i++) { - rows[i].addEventListener("mouseover", (event) => { - emphasizeShot(document.getElementById(`shot-${rows[i].children[0].innerHTML}`)); - }); - rows[i].addEventListener("mouseout", (event) => { - deemphasizeShot(document.getElementById(`shot-${rows[i].children[0].innerHTML}`)); - }) - } } - unitSelector.addEventListener("change", () => { - buildTable(); - }); + unitSelector.addEventListener("change", buildTable); - rink.addEventListener("mouseover", function(event) { - this.setAttribute("data-title", this.getElementsByTagName("title")[0].innerHTML); - this.getElementsByTagName("title")[0].innerHTML = ""; + // Hide svg title so browser tooltip is not shown on hover + rink.addEventListener("mouseover", (event) => { + const svg = event.currentTarget; + svg.setAttribute("data-title", svg.getElementsByTagName("title")[0].innerHTML); + svg.getElementsByTagName("title")[0].innerHTML = ""; }); - rink.addEventListener("mouseout", function(event) { - this.getElementsByTagName("title")[0].innerHTML = this.getAttribute("data-title"); - this.removeAttribute("data-title"); + // Replace svg title + rink.addEventListener("mouseout", (event) => { + const svg = event.currentTarget; + svg.getElementsByTagName("title")[0].innerHTML = svg.getAttribute("data-title"); + svg.removeAttribute("data-title"); }); - rink.addEventListener( - "mousedown", - event => { - const shotID = ++shotCounter; - const shotLocation = cursorPoint(event); - let coordinates = { - x: shotLocation.x, - y: shotLocation.y, - id: shotID - }; - - // add coordinates to table - tableData.unshift(coordinates); - - // build table - buildTable(); - - // draw a circle on the rink at shot location - drawCircle(rink, shotID, shotLocation); - }, - false - ); -})(); + rink.addEventListener("mousedown", (event) => { + const shotID = ++shotCounter; + const shotLocation = cursorPoint(event); + let coordinates = { + x: shotLocation.x, + y: shotLocation.y, + id: shotID + }; + + // add coordinates to table + tableData.unshift(coordinates); + + // build table + buildTable(); + + // draw a circle on the rink at shot location + drawCircle(rink, shotID, shotLocation); + }, false); +}); diff --git a/_sass/_tables.scss b/_sass/_tables.scss index 88cb133..968b7d8 100644 --- a/_sass/_tables.scss +++ b/_sass/_tables.scss @@ -5,3 +5,8 @@ table.dataTable { #coord-table_wrapper { padding: 0; } + +.emphasized-row { + background-color: lighten(#D59E0D, 40%); + transition: background-color 0.2s ease-in; +} From a893501595108a958eb89a7d11716bc9a40540dc Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Wed, 30 Jan 2019 23:22:19 -0500 Subject: [PATCH 7/8] Fix spacing issue under unit selector --- _assets/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_assets/main.js b/_assets/main.js index 9b4eb00..626bdf0 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -103,6 +103,7 @@ document.addEventListener("DOMContentLoaded", (event) => { const table = $("#coord-table"); table.removeClass("d-none"); + document.getElementById("unit-selector").classList.add("mb-3"); table.DataTable({ dom: "rt<'mb-3' i><'row'<'col-6' B><'col-6' p>>", destroy: true, From b276167750c3ccb51fca5f25f0dea9cfbfb79379 Mon Sep 17 00:00:00 2001 From: Andrew Pucci Date: Wed, 30 Jan 2019 23:34:38 -0500 Subject: [PATCH 8/8] Use datatables api to get id --- _assets/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_assets/main.js b/_assets/main.js index 626bdf0..8313308 100755 --- a/_assets/main.js +++ b/_assets/main.js @@ -118,11 +118,11 @@ document.addEventListener("DOMContentLoaded", (event) => { rowId: (convertedData) => { return `row-${convertedData.id}`}, createdRow: function(row, data, dataIndex) { row.addEventListener("mouseover", (event) => { - emphasizeShot(document.getElementById(`shot-${row.children[0].innerHTML}`)); + emphasizeShot(document.getElementById(`shot-${data.id}`)); emphasizeRow(row); }); row.addEventListener("mouseout", (event) => { - deemphasizeShot(document.getElementById(`shot-${row.children[0].innerHTML}`)); + deemphasizeShot(document.getElementById(`shot-${data.id}`)); deemphasizeRow(row); }); },