spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
195 lines (194 loc) • 8.19 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,900" rel="stylesheet">
<title>Spnav Calendar</title>
</head>
<script type="text/javascript">
function changeRule() {
const ruleType = document.getElementById("ruleType").value;
const wrapperElement = document.getElementById("wrapper");
wrapperElement.style.setProperty('--spatial-navigation-function', ruleType);
}
</script>
<body>
<div id="optionField">
<form>
<fieldset>
<legend>spatial-navigation-function</legend>
<div>
<span>Navigation function: </span>
<select id="ruleType" onchange="changeRule()" name=rule>
<option value="normal" selected="selected">normal</option>
<option value="grid">grid</option>
</select>
</div>
</fieldset>
</form>
</div>
<div class="wrapper" id="wrapper">
<div class="header"><span>2019</span><p class="month">June</p></div>
<div class="sidebar">
<div class="date"></div>
<div class="time">note</div>
<div class="time">7 am</div>
<div class="time">8 am</div>
<div class="time">9 am</div>
<div class="time">10 am</div>
<div class="time">11 am</div>
<div class="time">12 pm</div>
<div class="time">1 pm</div>
<div class="time">2 pm</div>
<div class="time">3 pm</div>
<div class="time">4 pm</div>
<div class="time">5 pm</div>
<div class="time">6 pm</div>
<div class="time">7 pm</div>
<div class="time">8 pm</div>
<div class="time">9 pm</div>
<div class="date extra"></div>
<div class="time extra">note</div>
<div class="time extra">7 am</div>
<div class="time extra">8 am</div>
<div class="time extra">9 am</div>
<div class="time extra">10 am</div>
<div class="time extra">11 am</div>
<div class="time extra">12 pm</div>
<div class="time extra">1 pm</div>
<div class="time extra">2 pm</div>
<div class="time extra">3 pm</div>
<div class="time extra">4 pm</div>
<div class="time extra">5 pm</div>
<div class="time extra">6 pm</div>
<div class="time extra">7 pm</div>
<div class="time extra">8 pm</div>
<div class="time extra">9 pm</div>
<div class="date extra"></div>
<div class="time extra">note</div>
<div class="time extra">7 am</div>
<div class="time extra">8 am</div>
<div class="time extra">9 am</div>
<div class="time extra">10 am</div>
<div class="time extra">11 am</div>
<div class="time extra">12 pm</div>
<div class="time extra">1 pm</div>
<div class="time extra">2 pm</div>
<div class="time extra">3 pm</div>
<div class="time extra">4 pm</div>
<div class="time extra">5 pm</div>
<div class="time extra">6 pm</div>
<div class="time extra">7 pm</div>
<div class="time extra">8 pm</div>
<div class="time extra">9 pm</div>
<div class="date extra"></div>
<div class="time extra">note</div>
<div class="time extra">7 am</div>
<div class="time extra">8 am</div>
<div class="time extra">9 am</div>
<div class="time extra">10 am</div>
<div class="time extra">11 am</div>
<div class="time extra">12 pm</div>
<div class="time extra">1 pm</div>
<div class="time extra">2 pm</div>
<div class="time extra">3 pm</div>
<div class="time extra">4 pm</div>
<div class="time extra">5 pm</div>
<div class="time extra">6 pm</div>
<div class="time extra">7 pm</div>
<div class="time extra">8 pm</div>
<div class="time extra">9 pm</div>
<div class="date extra"></div>
<div class="time extra">note</div>
<div class="time extra">7 am</div>
<div class="time extra">8 am</div>
<div class="time extra">9 am</div>
<div class="time extra">10 am</div>
<div class="time extra">11 am</div>
<div class="time extra">12 pm</div>
<div class="time extra">1 pm</div>
<div class="time extra">2 pm</div>
<div class="time extra">3 pm</div>
<div class="time extra">4 pm</div>
<div class="time extra">5 pm</div>
<div class="time extra">6 pm</div>
<div class="time extra">7 pm</div>
<div class="time extra">8 pm</div>
<div class="time extra">9 pm</div>
<div class="date extra"></div>
<div class="time extra">note</div>
<div class="time extra">7 am</div>
<div class="time extra">8 am</div>
<div class="time extra">9 am</div>
<div class="time extra">10 am</div>
<div class="time extra">11 am</div>
<div class="time extra">12 pm</div>
<div class="time extra">1 pm</div>
<div class="time extra">2 pm</div>
<div class="time extra">3 pm</div>
<div class="time extra">4 pm</div>
<div class="time extra">5 pm</div>
<div class="time extra">6 pm</div>
<div class="time extra">7 pm</div>
<div class="time extra">8 pm</div>
<div class="time extra">9 pm</div>
<div class="date extra"></div>
<div class="time extra">note</div>
<div class="time extra">7 am</div>
<div class="time extra">8 am</div>
<div class="time extra">9 am</div>
<div class="time extra">10 am</div>
<div class="time extra">11 am</div>
<div class="time extra">12 pm</div>
<div class="time extra">1 pm</div>
<div class="time extra">2 pm</div>
<div class="time extra">3 pm</div>
<div class="time extra">4 pm</div>
<div class="time extra">5 pm</div>
<div class="time extra">6 pm</div>
<div class="time extra">7 pm</div>
<div class="time extra">8 pm</div>
<div class="time extra">9 pm</div>
</div>
<div class="weekly sun">
<div class="date">Sun 2</div>
<div class="schedule private" id="s1" tabindex="1">Pinic</div>
<div class="schedule private" id="s2" tabindex="1">Dinner</div>
</div>
<div class="content"></div>
<div class="weekly mon">
<div class="date">Mon 3</div>
<div class="schedule" id="s13" tabindex="1">Arrival to Toronto</div>
<div class="schedule todo" id="s8" tabindex="1">Visit the dentist</div>
<div class="schedule private" id="s2" tabindex="1">Dinner</div>
</div>
<div class="weekly tue">
<div class="date">Tue 4</div>
<div class="schedule work" id="s3" tabindex="1">Meeting</div>
</div>
<div class="weekly wed">
<div class="date">Wed 5</div>
<div class="schedule work" id="s3" tabindex="1">Meeting</div>
</div>
<div class="weekly thu">
<div class="date">Thu 6</div>
<div class="schedule work" id="s3" tabindex="1">Meeting</div>
<div class="schedule work" id="s4" tabindex="1">Review Follow Up</div>
</div>
<div class="weekly fri">
<div class="date">Fri 7</div>
<div class="schedule private" id="s5" tabindex="1">Run</div>
</div>
<div class="weekly sat">
<div class="date">Sat 8</div>
<div class="schedule todo" id="s17" tabindex="1">Pack for Trip</div>
<div class="schedule todo" id="s18" tabindex="1">Call to Nicole</div>
<div class="schedule private" id="s6" tabindex="1">Lunch with Daniel</div>
<div class="schedule" id="s7" tabindex="1">Departure from Toronto</div>
</div>
</div>
</body>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</html>