From 583b451d371406c7999cec885168b474568148a8 Mon Sep 17 00:00:00 2001 From: hippoz Date: Sun, 4 Oct 2020 23:56:12 +0300 Subject: [PATCH] add button selected effect --- index.html | 2 +- res/index.js | 14 ++++++++++++++ res/lib/A.js | 17 +++++++++++++++++ res/style.css | 7 ++++--- 4 files changed, 36 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 5757f97..e887e99 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
- + diff --git a/res/index.js b/res/index.js index dfea2a5..ec6b0d5 100644 --- a/res/index.js +++ b/res/index.js @@ -1,4 +1,14 @@ +let selected = 'button-home'; + +const changeSelected = (buttonId) => { + console.log(buttonId); + A(`#${selected}`).removeClass('button-selected'); + A(`#${buttonId}`).addClass('button-selected'); + selected = buttonId; +}; + const onButtonClick = (buttonId) => { + changeSelected(buttonId); switch (buttonId) { case 'button-home': { A('#content-container').load('/pages/home.html'); @@ -20,6 +30,10 @@ const onButtonClick = (buttonId) => { A('#content-container').load('/pages/contact.html'); break; } + default: { + console.error('Invalid button id'); + return; + } } }; diff --git a/res/lib/A.js b/res/lib/A.js index 02ea200..c3c6775 100644 --- a/res/lib/A.js +++ b/res/lib/A.js @@ -70,6 +70,23 @@ A._Collection.prototype.each = function (handler) { }); }; +A._Collection.prototype.attr = function (attr, val) { + return this._forCollection((el, i) => { + el.setAttribute(attr, val); + }); +}; + +A._Collection.prototype.addClass = function (classname) { + return this._forCollection((el, i) => { + el.classList.add(classname); + }); +}; +A._Collection.prototype.removeClass = function (classname) { + return this._forCollection((el, i) => { + el.classList.remove(classname); + }); +}; + A._Collection.prototype.hide = function () { return this._forCollection((el, _) => { el.style.display = 'none'; diff --git a/res/style.css b/res/style.css index b16d72d..5a00cea 100644 --- a/res/style.css +++ b/res/style.css @@ -42,14 +42,15 @@ body { margin-bottom: 2px; color: #606060; cursor: pointer; + outline: none; } -.button-default:hover { +.button-default:hover:not(.button-selected) { color: #d1d1d1; - background-color:#2E2E2E; + background-color:#555555; } -.button-default .selected { +.button-selected { color: #d1d1d1; background-color:#2E2E2E; }