Skip to content

Commit

Permalink
demo docs. find opposite button in a different way to select button o…
Browse files Browse the repository at this point in the history 
…n hash changing
  • Loading branch information
@dtaipov
dtaipov committed Mar 26, 2019
1 parent 3f28409 commit 9eec247
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 52 deletions.
61 changes: 35 additions & 26 deletions docs/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@
border-style:solid;
border-width:1px;
width: 200px;
padding: 3px;
}
textarea {
border-radius: 2px;
Expand All @@ -208,7 +209,7 @@
</div>
<div class="header-center-bottom">
Test the WebSocket commands of KeyChain <span id="version"></span> <br>
Read more: <a href="https://avvrik.github.io/KeyChain/#keychain-documentation">KeyChain Documentation</a>
Read more: <a href="https://arrayio.github.io/KeyChain/">KeyChain Documentation</a>
</div>
</div>
<div></div>
Expand All @@ -221,13 +222,13 @@
</div>
<div class="middle">
<div class="menu">
<div><a href="#select_key" class="btn btn_command" id="btnSelectKey">Select key</a></div>
<div><a href="#unlock" class="btn btn_command" id="btnUnlock">Unlock</a></div>
<div><a href="#lock" class="btn btn_command" id="btnLock">Lock</a></div>
<div><a href="#sign_trx" class="btn btn_command" id="btnSignTrx">Sign transaction</a></div>
<div><a href="#sign_hash" class="btn btn_command" id="btnSignHash">Sign hash</a></div>
<div><a href="#about" class="btn btn_command" id="btnAbout">About</a></div>
<div><a href="#version" class="btn btn_command" id="btnVersion">Version</a></div>
<div><a href="#select_key" class="btn btn_command" data-hash="select_key" data-left="1">Select key</a></div>
<div><a href="#unlock" class="btn btn_command" data-hash="unlock" data-left="1">Unlock</a></div>
<div><a href="#lock" class="btn btn_command" data-hash="lock" data-left="1">Lock</a></div>
<div><a href="#sign_trx" class="btn btn_command" data-hash="sign_trx" data-left="1">Sign transaction</a></div>
<div><a href="#sign_hash" class="btn btn_command" data-hash="sign_hash" data-left="1">Sign hash</a></div>
<div><a href="#about" class="btn btn_command" data-hash="about" data-left="1">About</a></div>
<div><a href="#version" class="btn btn_command" data-hash="version" data-left="1">Version</a></div>
</div>
<div class="form">
<div class="page" id="page_select_key">
Expand Down Expand Up @@ -291,13 +292,13 @@
</div>
</div>
<div class="right_menu">
<div><a href="#select_key" class="btn btn_command" id="btnSelectKeyRight">&nbsp;</a></div>
<div><a href="#unlock" class="btn btn_command" id="btnUnlockRight">&nbsp;</a></div>
<div><a href="#lock" class="btn btn_command" id="btnLockRight">&nbsp;</a></div>
<div><a href="#sign_trx" class="btn btn_command" id="btnSignTrxRight">&nbsp;</a></div>
<div><a href="#sign_hash" class="btn btn_command" id="btnSignHashRight">&nbsp;</a></div>
<div><a href="#about" class="btn btn_command" id="btnAboutRight">&nbsp;</a></div>
<div><a href="#version" class="btn btn_command" id="btnVersionRight">&nbsp;</a></div>
<div><a href="#select_key" class="btn btn_command" data-hash="select_key" data-left="0">&nbsp;</a></div>
<div><a href="#unlock" class="btn btn_command" data-hash="unlock" data-left="0">&nbsp;</a></div>
<div><a href="#lock" class="btn btn_command" data-hash="lock" data-left="0">&nbsp;</a></div>
<div><a href="#sign_trx" class="btn btn_command" data-hash="sign_trx" data-left="0">&nbsp;</a></div>
<div><a href="#sign_hash" class="btn btn_command" data-hash="sign_hash" data-left="0">&nbsp;</a></div>
<div><a href="#about" class="btn btn_command" data-hash="about" data-left="0">&nbsp;</a></div>
<div><a href="#version" class="btn btn_command" data-hash="version" data-left="0">&nbsp;</a></div>
</div>
<div class="request">
<textarea style="width: 100%; height: 90%" id="request" placeholder="{}"></textarea>
Expand Down Expand Up @@ -330,6 +331,18 @@
document.getElementById('error').style.display = 'block';
};

function buttonEnter(button) {
button.classList.add('btn_transform');
const oppositeElement = getOppositeElementId(button);
oppositeElement.classList.add('btn_transform');
}

function buttonLeave(button) {
button.classList.remove('btn_transform');
const oppositeElement = getOppositeElementId(button);
oppositeElement.classList.remove('btn_transform');
}

function onHash(runRequestParam) {
if(!window.location.hash) {
return;
Expand All @@ -343,6 +356,8 @@
document.getElementsByClassName('page-active')[0].classList.remove('page-active');
}
el.classList.add('page-active');
// const button = document.querySelector('.btn-command[data-hash=' + hash + ']');
// buttonEnter(document.getElementById(hash));

const request = fieldsToJson();
document.getElementById('request').value = JSON.stringify(request, undefined, 2);
Expand Down Expand Up @@ -419,23 +434,17 @@
const buttons = document.getElementsByClassName('btn_command');
for (let i=0; i<buttons.length; i++) {
buttons[i].addEventListener('mouseenter', function () {
buttons[i].classList.add('btn_transform');
const oppositeElementId = getOppositeElementId(buttons[i].id);
document.getElementById(oppositeElementId).classList.add('btn_transform');
buttonEnter(buttons[i]);
});
buttons[i].addEventListener('mouseleave', function () {
buttons[i].classList.remove('btn_transform');
const oppositeElementId = getOppositeElementId(buttons[i].id);
document.getElementById(oppositeElementId).classList.remove('btn_transform');
buttonLeave(buttons[i]);
});
}
};

function getOppositeElementId(buttonId) {
if (buttonId.indexOf('Right') !== -1) {
return buttonId.slice(0, -'Right'.length);
}
return buttonId + 'Right';
function getOppositeElementId(button) {
const oppositeDataLeft = +button.dataset.left^1;
return document.querySelector('[data-left="' + oppositeDataLeft + '"][data-hash="' + button.dataset.hash + '"]');
}

function getRequest() {
Expand Down
61 changes: 35 additions & 26 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@
border-style:solid;
border-width:1px;
width: 200px;
padding: 3px;
}
textarea {
border-radius: 2px;
Expand All @@ -208,7 +209,7 @@
</div>
<div class="header-center-bottom">
Test the WebSocket commands of KeyChain <span id="version"></span> <br>
Read more: <a href="https://avvrik.github.io/KeyChain/#keychain-documentation">KeyChain Documentation</a>
Read more: <a href="https://arrayio.github.io/KeyChain/">KeyChain Documentation</a>
</div>
</div>
<div></div>
Expand All @@ -221,13 +222,13 @@
</div>
<div class="middle">
<div class="menu">
<div><a href="#select_key" class="btn btn_command" id="btnSelectKey">Select key</a></div>
<div><a href="#unlock" class="btn btn_command" id="btnUnlock">Unlock</a></div>
<div><a href="#lock" class="btn btn_command" id="btnLock">Lock</a></div>
<div><a href="#sign_trx" class="btn btn_command" id="btnSignTrx">Sign transaction</a></div>
<div><a href="#sign_hash" class="btn btn_command" id="btnSignHash">Sign hash</a></div>
<div><a href="#about" class="btn btn_command" id="btnAbout">About</a></div>
<div><a href="#version" class="btn btn_command" id="btnVersion">Version</a></div>
<div><a href="#select_key" class="btn btn_command" data-hash="select_key" data-left="1">Select key</a></div>
<div><a href="#unlock" class="btn btn_command" data-hash="unlock" data-left="1">Unlock</a></div>
<div><a href="#lock" class="btn btn_command" data-hash="lock" data-left="1">Lock</a></div>
<div><a href="#sign_trx" class="btn btn_command" data-hash="sign_trx" data-left="1">Sign transaction</a></div>
<div><a href="#sign_hash" class="btn btn_command" data-hash="sign_hash" data-left="1">Sign hash</a></div>
<div><a href="#about" class="btn btn_command" data-hash="about" data-left="1">About</a></div>
<div><a href="#version" class="btn btn_command" data-hash="version" data-left="1">Version</a></div>
</div>
<div class="form">
<div class="page" id="page_select_key">
Expand Down Expand Up @@ -291,13 +292,13 @@
</div>
</div>
<div class="right_menu">
<div><a href="#select_key" class="btn btn_command" id="btnSelectKeyRight">&nbsp;</a></div>
<div><a href="#unlock" class="btn btn_command" id="btnUnlockRight">&nbsp;</a></div>
<div><a href="#lock" class="btn btn_command" id="btnLockRight">&nbsp;</a></div>
<div><a href="#sign_trx" class="btn btn_command" id="btnSignTrxRight">&nbsp;</a></div>
<div><a href="#sign_hash" class="btn btn_command" id="btnSignHashRight">&nbsp;</a></div>
<div><a href="#about" class="btn btn_command" id="btnAboutRight">&nbsp;</a></div>
<div><a href="#version" class="btn btn_command" id="btnVersionRight">&nbsp;</a></div>
<div><a href="#select_key" class="btn btn_command" data-hash="select_key" data-left="0">&nbsp;</a></div>
<div><a href="#unlock" class="btn btn_command" data-hash="unlock" data-left="0">&nbsp;</a></div>
<div><a href="#lock" class="btn btn_command" data-hash="lock" data-left="0">&nbsp;</a></div>
<div><a href="#sign_trx" class="btn btn_command" data-hash="sign_trx" data-left="0">&nbsp;</a></div>
<div><a href="#sign_hash" class="btn btn_command" data-hash="sign_hash" data-left="0">&nbsp;</a></div>
<div><a href="#about" class="btn btn_command" data-hash="about" data-left="0">&nbsp;</a></div>
<div><a href="#version" class="btn btn_command" data-hash="version" data-left="0">&nbsp;</a></div>
</div>
<div class="request">
<textarea style="width: 100%; height: 90%" id="request" placeholder="{}"></textarea>
Expand Down Expand Up @@ -330,6 +331,18 @@
document.getElementById('error').style.display = 'block';
};

function buttonEnter(button) {
button.classList.add('btn_transform');
const oppositeElement = getOppositeElementId(button);
oppositeElement.classList.add('btn_transform');
}

function buttonLeave(button) {
button.classList.remove('btn_transform');
const oppositeElement = getOppositeElementId(button);
oppositeElement.classList.remove('btn_transform');
}

function onHash(runRequestParam) {
if(!window.location.hash) {
return;
Expand All @@ -343,6 +356,8 @@
document.getElementsByClassName('page-active')[0].classList.remove('page-active');
}
el.classList.add('page-active');
// const button = document.querySelector('.btn-command[data-hash=' + hash + ']');
// buttonEnter(document.getElementById(hash));

const request = fieldsToJson();
document.getElementById('request').value = JSON.stringify(request, undefined, 2);
Expand Down Expand Up @@ -419,23 +434,17 @@
const buttons = document.getElementsByClassName('btn_command');
for (let i=0; i<buttons.length; i++) {
buttons[i].addEventListener('mouseenter', function () {
buttons[i].classList.add('btn_transform');
const oppositeElementId = getOppositeElementId(buttons[i].id);
document.getElementById(oppositeElementId).classList.add('btn_transform');
buttonEnter(buttons[i]);
});
buttons[i].addEventListener('mouseleave', function () {
buttons[i].classList.remove('btn_transform');
const oppositeElementId = getOppositeElementId(buttons[i].id);
document.getElementById(oppositeElementId).classList.remove('btn_transform');
buttonLeave(buttons[i]);
});
}
};

function getOppositeElementId(buttonId) {
if (buttonId.indexOf('Right') !== -1) {
return buttonId.slice(0, -'Right'.length);
}
return buttonId + 'Right';
function getOppositeElementId(button) {
const oppositeDataLeft = +button.dataset.left^1;
return document.querySelector('[data-left="' + oppositeDataLeft + '"][data-hash="' + button.dataset.hash + '"]');
}

function getRequest() {
Expand Down

0 comments on commit 9eec247

Please sign in to comment.