Skip to content

Commit

Permalink
Improve keyboard support
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmshkr
tmshkr committed Sep 8, 2018
1 parent 36c78db commit 2a19a55
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 27 deletions.
1 change: 1 addition & 0 deletions NoSleep.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions breathing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ main {
#sidebar-toggle {
color: white;
position: fixed;
outline: none;
right: 0;
margin: 0.5em;
height: 2em;
Expand Down
45 changes: 24 additions & 21 deletions breathing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ var text = document.getElementById("text")
var main = document.getElementById("main")
var mainView = document.getElementById("main-view")
var sidebarToggle = document.getElementById("sidebar-toggle")
var numbers = [4, 4, 4, 4]
var count = [4, 4, 4, 4]
var words = ["inhale", "hold", "exhale", "pause"]
var sidebarOpen = false
var textDisplay = true
Expand All @@ -12,28 +12,28 @@ var textDisplay = true
function breathe() {

text.textContent = words[0]
circle.style.transition = `all ${numbers[0]}s ease-in-out`
circle.style.webkitTransition = `all ${numbers[0]}s ease-in-out`
circle.style.transition = `all ${count[0]}s ease-in-out`
circle.style.webkitTransition = `all ${count[0]}s ease-in-out`
circle.style.transform = "scale(1)"

window.setTimeout(function() {
if (numbers[1] > 0)
if (count[1] > 0)
text.textContent = words[1]

window.setTimeout(function() {
text.textContent = words[2]
circle.style.transition = `all ${numbers[2]}s ease-in-out`
circle.style.webkitTransition = `all ${numbers[2]}s ease-in-out`
circle.style.transition = `all ${count[2]}s ease-in-out`
circle.style.webkitTransition = `all ${count[2]}s ease-in-out`
circle.style.transform = "scale(0.25)"

window.setTimeout(function() {
if (numbers[3] > 0)
if (count[3] > 0)
text.textContent = words[3]

window.setTimeout(breathe, numbers[3] * 1000)
}, numbers[2] * 1000)
}, numbers[1] * 1000)
}, numbers[0] * 1000)
window.setTimeout(breathe, count[3] * 1000)
}, count[2] * 1000)
}, count[1] * 1000)
}, count[0] * 1000)
}

function toggleText(event) {
Expand Down Expand Up @@ -67,16 +67,19 @@ function toggleSidebar() {
(sidebarOpen) ? closeSidebar() : openSidebar()
}

function handleKeydown(e){
function handleKeypress(e){
var key = e.keyCode || e.which
if (key == 13){
if (["time", "word"].indexOf(e.target.name) > -1)
if (["count", "word", "save"].indexOf(e.target.name) > -1)
saveSettings()
else if (!sidebarOpen && e.target.id != "sidebar-toggle")
openSidebar()
else if (e.target.name == "reset")
resetSettings()
else if (e.target.id == "noSleepToggle")
toggleNoSleep()
else
toggleSidebar()
}
else if (key == 27 && sidebarOpen)
closeSidebar()
sidebarToggle.focus()
}

function saveSettings() {
Expand All @@ -97,26 +100,26 @@ function saveSettings() {

for (let i = 0; i < 4; i++) {
words[i] = textNodes[i].value
numbers[i] = numberNodes[i].value
count[i] = numberNodes[i].value
}
toggleSidebar()
}

function resetSettings() {
numbers = [4, 4, 4, 4]
count = [4, 4, 4, 4]
words = ["inhale", "hold", "exhale", "pause"]

let textNodes = document.querySelectorAll("input[type='text']")
let numberNodes = document.querySelectorAll("input[type='number']")

for (let i = 0; i < 4; i++) {
textNodes[i].value = words[i]
numberNodes[i].value = numbers[i]
numberNodes[i].value = count[i]
}
toggleSidebar()
}

document.onkeydown = handleKeydown
document.onkeypress = handleKeypress
text.onclick = toggleText
sidebarToggle.onclick = toggleSidebar
mainView.ontouchmove = function(e) { e.preventDefault() } //prevent mobile scroll
Expand Down
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</head>

<body>
<a id="sidebar-toggle" href="javascript:void(0);"><span></span></a>
<a id="sidebar-toggle" tabindex="0"><span></span></a>
<main id="main">
<div id="sidebar">
<div></div>
Expand All @@ -29,27 +29,27 @@
<table>
<tr>
<td><input type="text" name="word" value="inhale"/></td>
<td><input type="number" name="time" min="2" max="10" value="4"></td>
<td><input type="number" name="count" min="2" max="10" value="4"></td>
</tr>
<tr>
<td><input type="text" name="word" value="hold"/></td>
<td><input type="number" name="time" min="0" max="10" value="4"></td>
<td><input type="number" name="count" min="0" max="10" value="4"></td>
</tr>
<tr>
<td><input type="text" name="word" value="exhale"/></td>
<td><input type="number" name="time" min="2" max="10" value="4"></td>
<td><input type="number" name="count" min="2" max="10" value="4"></td>
</tr>
<tr>
<td><input type="text" name="word" value="pause"/></td>
<td><input type="number" name="time" min="0" max="10" value="4"></td>
<td><input type="number" name="count" min="0" max="10" value="4"></td>
</tr>
<tr>
<td><input type="button" value="reset" name="reset" onclick="resetSettings()"/></td>
<td><input type="button" value="save" name="save" onclick="saveSettings()"/></td>
</tr>
</table>
</li>
<li id="noSleepToggle"><a href="javascript:void(0);">Prevent Display Sleep</a></li>
<li><a id="noSleepToggle" tabindex="0">Prevent Display Sleep</a></li>
<li><a href="https://github.com/tmshkr/breathing/" target="_blank">GitHub Repository</a></li>
<li><a href="https://github.com/tmshkr/breathing/blob/master/LICENSE" target="_blank">License</a></li>
</ul>
Expand Down

0 comments on commit 2a19a55

Please sign in to comment.