hippoz/homepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add button selected effect

Browse source
This commit is contained in:
hippoz 2020-10-04 23:56:12 +03:00
parent ee76fee23e
commit 583b451d37
4 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -15,7 +15,7 @@
<body> <body>
<div class="card navigation-card"> <div class="card navigation-card">
<div class="navigation-buttons"> <div class="navigation-buttons">
<button id='button-home' class="button-default">home</button> <button id='button-home' class="button-default button-selected">home</button>
<button id='button-file-server' class="button-default">file server</button> <button id='button-file-server' class="button-default">file server</button>
<button id='button-git-server' class="button-default">git server</button> <button id='button-git-server' class="button-default">git server</button>
<button id='button-about-me' class="button-default">about me</button> <button id='button-about-me' class="button-default">about me</button>

14
res/index.js
View file

@ -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) => { const onButtonClick = (buttonId) => {
changeSelected(buttonId);
switch (buttonId) { switch (buttonId) {
case 'button-home': { case 'button-home': {
A('#content-container').load('/pages/home.html'); A('#content-container').load('/pages/home.html');
@ -20,6 +30,10 @@ const onButtonClick = (buttonId) => {
A('#content-container').load('/pages/contact.html'); A('#content-container').load('/pages/contact.html');
break; break;
} }
default: {
console.error('Invalid button id');
return;
}
} }
}; };

17
res/lib/A.js
View file

@ -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 () { A._Collection.prototype.hide = function () {
return this._forCollection((el, _) => { return this._forCollection((el, _) => {
el.style.display = 'none'; el.style.display = 'none';

7
res/style.css
View file

@ -42,14 +42,15 @@ body {
margin-bottom: 2px; margin-bottom: 2px;
color: #606060; color: #606060;
cursor: pointer; cursor: pointer;
outline: none;
} }
.button-default:hover { .button-default:hover:not(.button-selected) {
color: #d1d1d1; color: #d1d1d1;
background-color:#2E2E2E; background-color:#555555;
} }
.button-default .selected { .button-selected {
color: #d1d1d1; color: #d1d1d1;
background-color:#2E2E2E; background-color:#2E2E2E;
} }