351 lines
13 KiB
JavaScript
351 lines
13 KiB
JavaScript
// Kopher UI logic
|
|
|
|
function saveBlob(blob, fname, successCb, errorCb) {
|
|
var storage = navigator.getDeviceStorage(blob.type.startsWith('image/') ? 'pictures' : 'sdcard'),
|
|
freeSpaceReq = storage.freeSpace()
|
|
freeSpaceReq.onsuccess = function() {
|
|
var freeSize = freeSpaceReq.result
|
|
if(freeSize > blob.size) {
|
|
var req = storage.addNamed(blob, fname)
|
|
req.onsuccess = successCb
|
|
req.onerror = errorCb
|
|
}
|
|
else errorCb(new Error('No free space available'))
|
|
}
|
|
freeSpaceReq.onerror = errorCb
|
|
}
|
|
|
|
function hi2gopher(hiurl) {
|
|
if(!hiurl.startsWith('hi:')) return hiurl
|
|
var parts = hiurl.split(':')[1].split('|')
|
|
return 'gopher://'+parts[2]+':'+parts[3]+'/'+parts[0]+parts[1]
|
|
}
|
|
|
|
function openURL(url, successCb, errorCb) {
|
|
if(url.startsWith('about:')) { // handle about: pages first
|
|
var pageName = url.split(':')[1], allowedPageNames = ['kopher', 'blank', 'help']
|
|
if(allowedPageNames.indexOf(pageName) > -1) {
|
|
if(pageName === 'blank')
|
|
successCb({content: '', serviceMsg: ''})
|
|
else {
|
|
var req = new XMLHttpRequest()
|
|
req.addEventListener('load', function() {
|
|
successCb({content: Hi01379.render(req.responseText), serviceMsg: ''})
|
|
})
|
|
req.open('GET', '/pages/' + pageName + '.txt')
|
|
req.send()
|
|
}
|
|
}
|
|
return
|
|
} // then handle everything else
|
|
if(url.startsWith('gopher://')) { // convert the external URL format to the internal one
|
|
var parts = new URL(url.replace('gopher://', 'http://'))
|
|
var type = parts.pathname[2] || '1', sel = parts.pathname.substr(2)
|
|
url = 'hi:' + [type, sel, parts.hostname, (parts.port|0) || 70].join('|')
|
|
}
|
|
if(url.startsWith('hi:')) { // Internal Gopher URL format
|
|
var resource = url.split(':').slice(1).join(':').split('|'), input = null
|
|
if(resource.length > 4) input = resource[4]
|
|
Hi01379.load(resource, input, function(res) {
|
|
if(res.content && res.content instanceof Blob) { // handle the download here
|
|
if(res.contentType.startsWith('image/') && confirm('View the image? (press Cancel to save it)')) { // try to open it in an external image viewer
|
|
window.open(URL.createObjectURL(res.content))
|
|
successCb({content: null, serviceMsg: 'Viewed ' + res.contentName, updateAddr: false})
|
|
} else // proceed with storing the file
|
|
saveBlob(res.content, res.contentName, function() {
|
|
successCb({content: null, serviceMsg: 'Saved ' + res.contentName, updateAddr: false})
|
|
navigator.mozNotification.createNotification('File saved', res.contentName).show()
|
|
}, errorCb)
|
|
}
|
|
else successCb(res) // proceed to UI with non-downloads
|
|
}, errorCb)
|
|
}
|
|
else { // handle non-Gopher URLs with the Web Activities
|
|
var opener = new MozActivity({name: 'view', data: {type: 'url', url: url}})
|
|
successCb({content: null, serviceMsg: 'Opening an external resource ' + url, updateAddr: false})
|
|
}
|
|
}
|
|
|
|
// App entry point
|
|
addEventListener('DOMContentLoaded', function() {
|
|
var keycmd = '', currentUrl = '',
|
|
addrBar = document.querySelector('header div.addr'),
|
|
logoStatus = document.querySelector('div.logo'),
|
|
logoDefaultChar = '\u{1f310}',
|
|
logoLoadingChar = '\u23f3',
|
|
contentZone = document.querySelector('main div.content'),
|
|
statusBar = document.querySelector('footer div.status'),
|
|
themeKey = 'uitheme', bookmarkKey = 'bookmarks', bkNumber,
|
|
history = [], historyIndex = 0, linkIndex = 0,
|
|
verticalScrollStep = 40, horizontalScrollStep = 20,
|
|
buf = '', emptyBk = '["","","","","","","","","","",""]'
|
|
|
|
function getTheme() {
|
|
return (localStorage.getItem(themeKey) == 'dark') ? 'dark' : 'light'
|
|
}
|
|
|
|
function updateTheme() {
|
|
document.body.dataset.theme = getTheme()
|
|
}
|
|
|
|
function toggleTheme() {
|
|
var theme = getTheme()
|
|
localStorage.setItem(themeKey, (theme == 'dark') ? 'light' : 'dark')
|
|
updateTheme()
|
|
}
|
|
|
|
function setBookmark(index, url) { // update a bookmark or a homepage (which is just bookmark #0)
|
|
var bmArray = JSON.parse(localStorage.getItem(bookmarkKey) || emptyBk)
|
|
bmArray[index] = url
|
|
localStorage.setItem(bookmarkKey, JSON.stringify(bmArray))
|
|
}
|
|
|
|
function getBookmark(index) { //retrieve a bookmark or a homepage
|
|
var bmArray = JSON.parse(localStorage.getItem(bookmarkKey) || emptyBk)
|
|
return bmArray[index]
|
|
}
|
|
|
|
var activeContent={'prop': 'textContent', 'nowrap': '', 'wrap': ''} // placeholder to hold the wrapped and non-wrapped content
|
|
|
|
function loadURL(url, noNavUpdate) { // wrapper to openURL that actually updates all the UI and history
|
|
logoStatus.textContent = logoLoadingChar
|
|
statusBar.textContent = 'Loading ' + hi2gopher(url)
|
|
openURL(url, function(res) { // success callback
|
|
logoStatus.textContent = logoDefaultChar
|
|
statusBar.textContent = ''
|
|
var updateHistory = !('updateAddr' in res && res.updateAddr === false), // true by default
|
|
updateContent = !(res.content === null) // true by default
|
|
if(updateContent) { // update the content zone
|
|
activeContent.nowrap = res.content
|
|
activeContent.wrap = res.contentWf || res.content
|
|
contentZone.innerHTML = ''
|
|
contentZone.textContent = ''
|
|
contentZone.dataset.wrap = 0 // reset line wrapping
|
|
if(res.contentType === 'text/plain') {
|
|
activeContent.prop = 'textContent'
|
|
contentZone.dataset.format='plain'
|
|
contentZone.textContent = activeContent.nowrap
|
|
} else {
|
|
contentZone.dataset.format='native'
|
|
activeContent.prop='innerHTML'
|
|
contentZone.innerHTML = res.content
|
|
var contentLinks = contentZone.querySelectorAll('a'), l = contentLinks.length, i
|
|
for(i=0;i<l;i++) { // dynamically index all the links in the rendered content
|
|
contentLinks[i].dataset.index = i
|
|
contentLinks[i].dataset.focused = (i === 0) ? 1 : 0 // automatically focus the first link
|
|
}
|
|
}
|
|
contentZone.scrollTop = 0 // reset vert. scrolling
|
|
contentZone.scrollLeft = 0 // reset horiz. scrolling
|
|
}
|
|
if(updateHistory && !noNavUpdate) { // first, trim the history to the current history index, then push the new URL
|
|
history = history.slice(0, historyIndex+1)
|
|
history.push(url)
|
|
historyIndex = history.length - 1
|
|
currentUrl = url
|
|
}
|
|
if(url.startsWith('about:'))
|
|
addrBar.textContent = url
|
|
else
|
|
addrBar.textContent = url.startsWith('hi:') ? url.split(':')[1].split('|')[2] : url.split('/')[2] // display the hostname
|
|
statusBar.textContent = res.serviceMsg // update statusbar
|
|
}, function(errObj) { // error callback
|
|
logoStatus.textContent = logoDefaultChar
|
|
statusBar.textContent = 'Error: ' + errObj.message
|
|
alert('Error: ' + errObj.message)
|
|
})
|
|
}
|
|
|
|
function focusLink(linkDelta) {
|
|
var contentLinks = contentZone.querySelectorAll('a'), l = contentLinks.length
|
|
if(l) { // ignore the logic if there are no links
|
|
var curLink = contentZone.querySelector('a[data-focused="1"]'),
|
|
curIndex = curLink.dataset.index|0,
|
|
nextIndex = curIndex + linkDelta
|
|
if(nextIndex < 0) nextIndex = l - 1
|
|
else if(nextIndex >= l) nextIndex = 0
|
|
var nextLink = contentLinks[nextIndex]
|
|
curLink.dataset.focused = 0
|
|
nextLink.dataset.focused = 1
|
|
// try to center the link
|
|
contentZone.scrollTop = nextLink.offsetTop - (contentZone.offsetHeight >> 1) + (nextLink.offsetHeight >> 1)
|
|
}
|
|
}
|
|
|
|
function clickSelectedLink() {
|
|
var curLink = contentZone.querySelector('a[data-focused="1"]')
|
|
if(curLink) {
|
|
var input = null, href = decodeURI(curLink.href)
|
|
if(href.startsWith('hi:7')) { // internal format
|
|
href = href.split(':')[1].split('|') // type|sel|host|port
|
|
input = encodeURIComponent(prompt('Input data for ' + href[2]))
|
|
href.push(input)
|
|
href = 'hi:'+href.join('|')
|
|
}
|
|
loadURL(href)
|
|
}
|
|
}
|
|
|
|
function execKeyCmd(cmd) { //cmd can be a digit, digit combo, or key symbolic name
|
|
switch(cmd) {
|
|
case 'ArrowUp': // scroll up
|
|
contentZone.scrollTop -= verticalScrollStep
|
|
break
|
|
case 'ArrowDown': // scroll down
|
|
contentZone.scrollTop += verticalScrollStep
|
|
break
|
|
case 'ArrowLeft': // scroll left
|
|
contentZone.scrollLeft -= horizontalScrollStep
|
|
break
|
|
case 'ArrowRight': // scroll right
|
|
contentZone.scrollLeft += horizontalScrollStep
|
|
break
|
|
case 'SoftLeft': // go to the address (no relative URLs in this case)
|
|
buf = prompt('Enter address').trim()
|
|
if(buf) { // only proceed if the address was entered
|
|
if(buf.indexOf('://') == -1) buf = 'gopher://' + buf
|
|
loadURL(buf)
|
|
}
|
|
break
|
|
case 'Enter': // click on the current link
|
|
clickSelectedLink()
|
|
break
|
|
case '4': // toggle the UI theme
|
|
toggleTheme()
|
|
break
|
|
case '6': // toggle line wrapping
|
|
contentZone.dataset.wrap = 1 - parseInt(contentZone.dataset.wrap)
|
|
if(activeContent.wrap != activeContent.nowrap) // only update contentZone if they differ
|
|
contentZone[activeContent.prop] = activeContent[parseInt(contentZone.dataset.wrap) ? 'wrap' : 'nowrap']
|
|
break
|
|
case 'Call': // refresh
|
|
loadURL(currentUrl, true)
|
|
break
|
|
case '1': // back
|
|
case 'SoftRight':
|
|
historyIndex--
|
|
if(historyIndex < 0) //we're already at the beginning, do nothing
|
|
historyIndex = 0
|
|
else
|
|
loadURL(history[historyIndex], true)
|
|
break
|
|
case '3': // forward
|
|
historyIndex++
|
|
if(historyIndex >= history.length) //we're already at the end, do nothing
|
|
historyIndex = history.length - 1
|
|
else
|
|
loadURL(history[historyIndex], true)
|
|
break
|
|
case '2': // jump to previous link
|
|
focusLink(-1)
|
|
break
|
|
case '5': // jump to next link
|
|
focusLink(1)
|
|
break
|
|
case '7': // hor.scroll to the start
|
|
contentZone.scrollLeft = 0
|
|
break
|
|
case '8': // vert.scroll to the start
|
|
contentZone.scrollTop = 0
|
|
break
|
|
case '9': // hor.scroll to the end
|
|
contentZone.scrollLeft = contentZone.scrollLeftMax // FF only
|
|
break
|
|
case '0': // vert.scroll to the end
|
|
contentZone.scrollTop = contentZone.scrollTopMax // FF only
|
|
break
|
|
case '*1': // save bookmarks
|
|
case '*2':
|
|
case '*3':
|
|
case '*4':
|
|
case '*5':
|
|
case '*6':
|
|
case '*7':
|
|
case '*8':
|
|
case '*9':
|
|
case '*0':
|
|
bkNumber = cmd[1]|0
|
|
if(!bkNumber) bkNumber = 10
|
|
if(currentUrl && confirm('Save current URL to the bookmark #'+bkNumber+'?'))
|
|
setBookmark(bkNumber, currentUrl)
|
|
break
|
|
case '**': // save homepage
|
|
if(currentUrl && confirm('Save current URL as the homepage?'))
|
|
setBookmark(0, currentUrl)
|
|
break
|
|
case '*Call': // share current URL as text in messages/email or via Bluetooth in vCard format
|
|
var hgoph = hi2gopher(currentUrl), htype = 'text/vcard',
|
|
btext = 'BEGIN:VCARD\r\nVERSION:2.1\r\nN:'+hgoph+'\r\nURL:'+hgoph+'\r\nEND:VCARD',
|
|
hblob = new Blob([btext], {type: htype}),
|
|
hname = hgoph.replace(/[\/:]+/g, '_') + '.vcf'
|
|
hblob.name = hname
|
|
new MozActivity({
|
|
name: 'share',
|
|
data: {
|
|
type: 'url',
|
|
number: 1,
|
|
url: hgoph,
|
|
blobs: [hblob],
|
|
filenames: [hname]
|
|
}
|
|
})
|
|
break
|
|
case '#1': // load bookmark
|
|
case '#2':
|
|
case '#3':
|
|
case '#4':
|
|
case '#5':
|
|
case '#6':
|
|
case '#7':
|
|
case '#8':
|
|
case '#9':
|
|
case '#0':
|
|
bkNumber = cmd[1]|0
|
|
if(!bkNumber) bkNumber = 10
|
|
buf = getBookmark(bkNumber)
|
|
if(buf) loadURL(buf)
|
|
else alert('No bookmark available at #'+bkNumber)
|
|
break
|
|
case '#*': // load homepage
|
|
buf = getBookmark(0)
|
|
if(buf) loadURL(buf)
|
|
else loadURL('about:kopher')
|
|
break
|
|
case '##': // version info
|
|
navigator.mozApps.getSelf().then(function(app) {
|
|
var mfst = app.manifest
|
|
var aboutText = mfst.name + ' v' + mfst.version + ' by ' + mfst.developer.name
|
|
aboutText += '\nPage: ' + hi2gopher(currentUrl)
|
|
alert(aboutText)
|
|
})
|
|
break
|
|
}
|
|
}
|
|
|
|
// setup the input
|
|
addEventListener('keydown', function(e) {
|
|
var k = e.key
|
|
if(keycmd.length > 0) { // command is already buffering
|
|
execKeyCmd(keycmd+k)
|
|
keycmd = ''
|
|
}
|
|
else if(k === '*' || k === '#') // start buffering
|
|
keycmd = k
|
|
else // single-key command
|
|
execKeyCmd(k)
|
|
}, false)
|
|
|
|
//setup the theme
|
|
updateTheme()
|
|
|
|
// load the default homepage
|
|
var hp = getBookmark(0)
|
|
loadURL(hp || 'about:kopher')
|
|
|
|
navigator.mozSetMessageHandler('activity', function(req) {
|
|
var act = req.source
|
|
if(act.name === 'view' && act.data.type === 'url' && act.data.url)
|
|
loadURL((''+act.data.url) || 'about:kopher')
|
|
})
|
|
}, false)
|