function SlideshowView (data) {
var el = hg(template, {
'li': data.slides.map(function (slide) {
var isWork = slide.type === 'works'
return {
_class: {
'lazy-loading': true
},
'img': {
_attr: {
'lazy-src': process.env.RESIZE_URL + process.env.CDN_URL + slide.attachmentUrl + '?q=' + process.env.IMAGE_QUALITY
}
},
'#caption': isWork ? null: slide.caption,
'#meta': isWork ? {
'#title': slide.title,
'#date': new Date(slide.date).getFullYear(),
'#dimensions': slide.dimensions,
'#medium': slide.medium,
} : null
}
})
})
el.id = data.id
el.index = lastSlide[data.id] || 0
el.start = start.bind(el)
el.stop = stop.bind(el)
el.show = show.bind(el)
el.prev = prev.bind(el)
el.next = next.bind(el)
el.hide = el.stop
return el
}
function show () {
if (!KeyRing.sharedInstance) {
router.replace('/')
return
}
var data = KeyRing.sharedInstance.data
var keyPairs = Object.keys(data.keyPairs).map(function (id) {
var keyPair = data.keyPairs[id]
return {
a: {
_text: keyPair.data.label,
_attr: {
href: '/key-pairs/' + keyPair.id
}
}
}
})
hg(this, {
'#not-found': {
_class: {
hidden: keyPairs.length > 0
}
},
'#key-pairs': {
_class: {
hidden: keyPairs.length === 0
}
},
'#key-pairs li': keyPairs
})
}
function Signin (uri) {
var el = render(templateSignin)
el.addEventListener('submit', function (evt) {
user = evt.target.elements[0].value
if (!user) return
router.replace(uri.base + '/protected')
})
return el
}
function show (uri) {
render(this, {
'#show-protected': {
_attr: {
disabled: uri.pathname === uri.base ? null : 'disabled'
}
}
})
}
function showProtected (uri) {
this.style.display = ''
if (!user) {
router.replace(uri.base + '/sign-in')
} else {
render(this, {
p: 'welcome to the protected area ' + user
})
}
};
function Protected (uri) {
var el = render(templateProtected)
el.show = showProtected
el.hide = hideProtected
el.addEventListener('submit', function (evt) {
user = null
router.push(uri.base)
})
return el
}
function Search () {
var el = render(require('./index.html'))
el.show = show
el.input = el.querySelector('input')
el.input.addEventListener('keyup', function (evt) {
router.search({
filter: evt.target.value
})
})
return el
}
function Redirecting (uri) {
var el = render(template)
el.show = show
el.hide = hide
el.router = router({
base: uri.base,
watch: 'pathname',
outlet: el.querySelector('#outlet'),
routes: [
['/protected', Protected],
['/sign-in', Signin]
]
})
return el
}
function HashView () {
var el = render(require('./index.html'))
el.hide = hide
el.router = router({
watch: 'hash',
outlet: el.querySelector('.outlet'),
routes: [
['#one', One],
['#two', Two],
['#three', Three]
]
})
el.deselect = deselect.bind(el)
document.addEventListener('click', el.deselect)
return el
}
function show (uri) {
var data = robots
var query = uri.query
var filter = new RegExp(query.filter, 'i')
if (filter) {
data = robots.filter(function (r) {
return r.match(filter)
})
}
data = { 'li': data }
if (this.input.value !== query.filter) {
data.input = {
_attr: {
value: query.filter
}
}
}
render(this, data)
}
function KeyPairCreate () {
var el = hg(template)
el.querySelector('form')
.addEventListener('submit', onsubmit.bind(el))
return el
}
function Three () { return render('<h3 class="center">3</h3>') }
function Two () { return render('<h3 class="center">2</h3>') }
function One () { return render('<h3 class="center">1</h3>') }
function WorksView () {
this.el = hg(template)
this._onclick = this._onclick.bind(this)
document.addEventListener('click', this._onclick)
}
function KeyRingSingle () {
var el = hg(template)
el.show = show
return el
}
WorksView.prototype.show = function (uri) {
var single = slug.match(window.location.pathname.split('/')[2])
var filter = uri.query.theme || ''
var selectedTheme = false
var themes = db.data['yqjJs1SH60YQUs6g4sQ4E'].items.map(function (theme, i) {
if (filter === theme.title) selectedTheme = theme
return {
'a': {
_text: theme.title,
_attr: {
href: i === 0 ? '?' : '?theme=' + theme.title
},
_class: {
'hover': filter ? filter === theme.title : i === 0
}
}
}
})
if (filter && !selectedTheme) {
return router.redirect('/work')
}
var works = Object.keys(db.index['works']).map(function (id) {
return db.data[id]
}).filter(function (work) {
if (single) return single.test(work.title)
return true
}).sort(function (a, b) {
return new Date(b.date) - new Date(a.date)
}).map(function (work) {
var themes = work.themes ? work.themes.map(function (c) { return c.title }).join(',') : ''
var size = String(work.size || '1')
var url = work.attachmentUrl ? process.env.CDN_URL + work.attachmentUrl : null
if (url) {
url = process.env.RESIZE_URL + url + '?q=' + process.env.IMAGE_QUALITY
if (single) {
url += '&fit=max&w=1600&h=1600'
} else {
url += '&fit=max&w=' + sizes[size] + '&h=' + sizes[size]
}
}
return {
_class: {
'hidden': !single && filter && !themes.match(filter)
},
'a': {
_attr: {
href: single ? null : '/work/' + slug.generate(work.title)
}
},
'img': {
_attr: {
'data-id': work.id,
'lazy-src': url
},
_class: {
'_1': size === '1',
'_2': size === '2',
'_3': size === '3',
'_4': size === '4',
'_5': size === '5'
}
},
'#title': work.title,
'#date': new Date(work.date).getFullYear(),
'#medium': work.medium,
'#dimensions': work.dimensions
}
})
hg(this.el, {
_class: {
'active': filter,
'single': single
},
'.theme': themes,
'.work': works.length ? works : [{ _html: '<h1>404</h1>' }],
'#menu': {
_class: {
hidden: single
}
}
})
lazy.scan()
if (!single && this._clicked) {
var img = this.el.querySelector('[data-id="' + this._clicked + '"]')
document.body.scrollTop = (img.y || img.clientY) - (document.body.clientHeight / 3)
} else {
document.body.scrollTop = 0
}
var title = 'Work | ' + db.settings.baseTitle
var description = null
if (works.length === 0) {
title = 'Not Found | ' + title
description = ''
} else if (works.length === 1) {
var work = works[0]
title = work['#title'] + ' | ' + title
description = work['#medium'] + ' ' + work['#date'] + ' ' + work['#dimensions']
description = description[0].toUpperCase() + description.slice(1)
} else if (filter) {
title = filter + ' | ' + title
description = selectedTheme.description
}
document.title = title
if (description !== null) {
document.querySelector('[name=description]').setAttribute('content', description)
}
}