Browse Source

Init

master
Adrian Heine 1 year ago
commit
164556764a
  1. 2
      diffDOM.js
  2. 4
      index.html
  3. 45
      src/display.js
  4. 38
      src/index.js
  5. 55
      style.css

2
diffDOM.js
File diff suppressed because it is too large
View File

4
index.html

@ -0,0 +1,4 @@
<meta charset=utf8>
<link rel="stylesheet" href="style.css">
<script src=diffDOM.js></script>
<script src=src/index.js type=module></script>

45
src/display.js

@ -0,0 +1,45 @@
export class Display {
constructor(baseUrl, dispatch, target) {
this.baseUrl = baseUrl
this.target = target
target.addEventListener('click', e => {
let target = e.target
while (target.nodeName !== 'A') {
target = target.parentNode
if (!target) return
}
window.history.pushState(null, "", target.href)
dispatch(target.getAttribute('href'))
e.preventDefault()
})
}
render(state) {
const target = document.createElement('div')
target.className = 'wrapper'
const field = document.createElement('ul')
field.className = 'items'
for (const item of state.items) {
const dom = document.createElement('li')
const a = document.createElement('a')
const action = item.state == 'face-down' ? 'flip' : 'show'
a.href = `/${item.id}/${action}`
dom.className = item.state
dom.appendChild(a)
field.appendChild(dom)
}
target.appendChild(field)
if (state.show !== null) {
const wrapper = document.createElement('a')
wrapper.href = '/'
const fullview = document.createElement('div')
wrapper.className = 'fullview'
wrapper.appendChild(fullview)
target.appendChild(wrapper)
}
const dd = new diffDOM.DiffDOM()
const diff = dd.diff(this.target, target)
dd.apply(this.target, diff)
}
}

38
src/index.js

@ -0,0 +1,38 @@
import {Display} from './display.js'
const target = document.createElement('div')
const state = {items: [], show: null }
for (let i = 0; i < 16; ++i) {
state.items.push({id: i, state: 'face-down'})
}
class Actions {
flip(id) {
state.items[id].state = 'face-up'
}
show(id) {
state.show = id
}
reset() {
state.show = null
}
}
const actions = new Actions
let display
const dispatch = target => {
const match = target.match(/\/([^/]+)\/([^/]+)/)
if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) {
actions[match[2]](match[1])
} else actions.reset()
display.render(state)
}
window.onpopstate = e => {
dispatch(document.location.search)
}
display = new Display('', dispatch, target)
dispatch(document.location.search)
document.body.appendChild(target)

55
style.css

@ -0,0 +1,55 @@
body {
background-color: #e2eff3;
margin: 0;
}
.wrapper {
max-width: 70em;
margin: 0 auto;
background-color: #FFC63F;
}
.items {
list-style: none;
margin: 0;
}
.items > li {
display: inline-block;
}
.items > li a {
width: 8em;
height: 8em;
background: #D66C00;
margin: 2em;
border-radius: 4em;
display: block;
}
.items > li a:hover {
background: #f39a3f;
}
.items > li.face-up a {
background-color: #ed8112;
}
.fullview {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: #858c8f90;
padding: 1em;
box-sizing: border-box;
cursor: default;
}
.fullview > div {
background-color: #858c8f;
width: 20em;
margin: 5em auto;
position: relative;
height: 30em;
}
Loading…
Cancel
Save