Added initial logic, styling of settings.
This commit is contained in:
Jonathan Bernard
parent
8524abc26e
commit
f795511daa
178
flashcards.html
178
flashcards.html
@ -28,6 +28,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#settings label {
|
||||
@ -45,11 +46,11 @@ body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.adv-settings label {
|
||||
#adv-settings label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adv-settings label span {
|
||||
#adv-settings label span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -74,7 +75,7 @@ button {
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
|
||||
#settings .adv-settings {
|
||||
#settings #adv-settings {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height linear 0.3s;
|
||||
@ -84,14 +85,36 @@ button {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
#settings.adv-settings-visible .adv-settings {
|
||||
max-height: 8em;
|
||||
}
|
||||
|
||||
.toggle-adv-settings {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Settings Visible */
|
||||
#settings {
|
||||
transition: opacity 0.2s linear;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.settings-visible #settings {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Card View Visible */
|
||||
#cards {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s linear;
|
||||
transition-delay: 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.settings-visible #cards {
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Mobile View */
|
||||
@media ( max-width: 600px ) {
|
||||
body {
|
||||
@ -110,10 +133,30 @@ button {
|
||||
margin: 1em auto;
|
||||
padding: 0.5em 3em;
|
||||
}
|
||||
|
||||
#settings.adv-settings-visible #adv-settings {
|
||||
max-height: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet View */
|
||||
@media (max-width: 1279px and min-width: 601px) {
|
||||
@media (max-width: 1279px) and (min-width: 601px) {
|
||||
body {
|
||||
font-size: 125%;
|
||||
margin: 1em;
|
||||
height: calc(100vh - 2em);
|
||||
width: calc(100vw - 2em);
|
||||
}
|
||||
|
||||
#settings > button {
|
||||
font-size: 125%;
|
||||
margin: 1em auto;
|
||||
padding: 0.5em 3em;
|
||||
}
|
||||
|
||||
#settings.adv-settings-visible #adv-settings {
|
||||
max-height: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop View */
|
||||
@ -128,49 +171,138 @@ button {
|
||||
#settings button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
#settings.adv-settings-visible #adv-settings {
|
||||
max-height: 8em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var FC = {};
|
||||
function toggleAdvSettings(e) {
|
||||
FC.settings.classList.toggle('adv-settings-visible');
|
||||
const FC = {
|
||||
items: [],
|
||||
slidePeriod: 3,
|
||||
nextCardIdx: 0,
|
||||
cardOrder: []
|
||||
};
|
||||
|
||||
// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
|
||||
// modified to be a pure function, not mutating it's input
|
||||
FC.shuffle = function(inArray) {
|
||||
var currentIndex = inArray.length
|
||||
, temporaryValue
|
||||
, randomIndex
|
||||
;
|
||||
|
||||
var outArray = inArray.slice(0);
|
||||
|
||||
// While there remain elements to shuffle...
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
// Pick a remaining element...
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
// And swap it with the current element.
|
||||
temporaryValue = outArray[currentIndex];
|
||||
outArray[currentIndex] = outArray[randomIndex];
|
||||
outArray[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return outArray;
|
||||
}
|
||||
|
||||
FC.isRunning = function() {
|
||||
return !FC.bodyEl.classList.contains('settings-visible');
|
||||
}
|
||||
|
||||
FC.toggleAdvSettings = function() {
|
||||
FC.settingsEl.classList.toggle('adv-settings-visible');
|
||||
}
|
||||
|
||||
FC.startCards = function() {
|
||||
FC.items = FC.itemsEl.value.split('\n');
|
||||
FC.slidePeriod =
|
||||
parseInt(FC.settingsEl.querySelector('input[name=slidePeriod]').value);
|
||||
|
||||
FC.nextCardIdx = 0;
|
||||
|
||||
const orderedIndices = [...Array(FC.items.length).keys()];
|
||||
switch (document.querySelector('select[name=cardOrder]').value) {
|
||||
default:
|
||||
case 'in-order':
|
||||
FC.cardOrder = orderedIndices;
|
||||
break;
|
||||
case 'reverse':
|
||||
FC.cardOrder = orderedIndices.reverse();
|
||||
break;
|
||||
case 'random':
|
||||
FC.cardOrder = FC.shuffle(orderedIndices);
|
||||
}
|
||||
|
||||
FC.showNextCard();
|
||||
FC.runningInterval = setInterval(FC.showNextCard, FC.slidePeriod * 1000);
|
||||
FC.bodyEl.classList.remove('settings-visible');
|
||||
}
|
||||
|
||||
FC.stopCards = function() {
|
||||
clearInterval(FC.runningInterval);
|
||||
FC.bodyEl.classList.add('settings-visible');
|
||||
}
|
||||
|
||||
FC.showNextCard = function() {
|
||||
const curItem = FC.items[FC.cardOrder[FC.nextCardIdx]];
|
||||
FC.cardContentEl.innerHTML = curItem;
|
||||
FC.nextCardIdx = (FC.nextCardIdx + 1) % FC.items.length;
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
FC.settings = document.querySelector('#settings');
|
||||
FC.settingsEl = document.querySelector('#settings');
|
||||
FC.itemsEl = document.querySelector('#items-input');
|
||||
FC.bodyEl = document.querySelector('body');
|
||||
FC.cardsEl = document.querySelector('#cards');
|
||||
FC.cardContentEl = document.querySelector('#card-content');
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body class=settings-visible>
|
||||
<h1 class=title>Simple Flashcards</h1>
|
||||
<form id=settings>
|
||||
<form id=settings action=#>
|
||||
<label>Items</label>
|
||||
<textarea></textarea>
|
||||
<label class=toggle-adv-settings onclick=toggleAdvSettings()>Advanced Settings <span class=visibility-indicator>➤</span></label>
|
||||
<div class=adv-settings>
|
||||
<textarea id=items-input></textarea>
|
||||
<label class=toggle-adv-settings onclick=FC.toggleAdvSettings()>Advanced Settings <span class=visibility-indicator>➤</span></label>
|
||||
<div id=adv-settings>
|
||||
<label>
|
||||
<span>Seconds per slide:</span>
|
||||
<input type=number name=slidePeriod value=3>
|
||||
</label>
|
||||
<label>
|
||||
<span>Show cards </span>
|
||||
<select name=cardOrder>
|
||||
<option value=in-order>in order.</option>
|
||||
<option value=reverse>in reverse order.</option>
|
||||
<option value=random>in random order.</option>
|
||||
</select>
|
||||
<label>
|
||||
<span>Saved sets:</span>
|
||||
<select>
|
||||
<select name=loadSetName disabled>
|
||||
<option>choose a set to load</option>
|
||||
</select>
|
||||
<button>Load</button>
|
||||
<button disabled>Load</button>
|
||||
</label>
|
||||
<label>
|
||||
<span>Save this set as:</span>
|
||||
<input type=text name=setName>
|
||||
<button>Save</button>
|
||||
<input type=text name=saveSetname disabled>
|
||||
<button disabled>Save</button>
|
||||
</label>
|
||||
</div>
|
||||
<button class=btn-primary>Go!</button>
|
||||
<button class=btn-primary onclick=FC.startCards()>Go!</button>
|
||||
</form>
|
||||
<div class=cards>
|
||||
<div id=cards>
|
||||
<div id=card-content>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user