pWiki/index.html

<!DOCTYPE html>
<html manifest="pwiki.appcache">
<head>
<title>pWiki</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<link rel="manifest" href="manifest.json">

<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Bold.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-BoldItalic.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-ExtraBold.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Italic.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Light.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-LightItalic.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Regular.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-Semibold.ttf">
<link rel="prefetch" href="css/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf">

<link rel="stylesheet" href="css/fonts.css">

</head>
<style>
</style>

<script src="ext-lib/jquery.js"></script>
<script src="ext-lib/jquery-ui.min.js"></script>
<script src="ext-lib/jquery.ui.touch.js"></script>
<script src="ext-lib/showdown.min.js"></script>

<script src="ext-lib/FileSaver.js"></script>
<script src="ext-lib/jszip.min.js"></script>

<script src="ext-lib/pouchdb.min.js"></script>
<script src="ext-lib/peer.min.js"></script>

<!--script data-main="ui" src="ext-lib/require.js"></script-->

<script src="bootstrap.js"></script>
<script src="wiki.js"></script>

<script>

// XXX experiment: save individual pages in localStorage...

// clear the localStorage...
var clearStorage = function(){
	delete localStorage['store-persistently']
	delete localStorage['wiki-data']
	delete localStorage['wiki-location'] }

var getStorage = function(){
	return localStorage['store-persistently'] ? 
			localStorage 
			: sessionStorage }

var save = () => {
	var storage = getStorage() 

	// XXX save...
	storage['wiki-data'] = JSON.stringify(Wiki.__wiki_data)
	storage['wiki-location'] = Wiki.location }

var reload = () => {
	// load the page...
	$('.wiki')
		.html(Wiki.title[0] == '_' ? 
				Wiki.text 
				: Wiki.get('./_view').text)
		.ready(update_editor)

	save()

	// checkbox state...
	// XXX move this to post-filters...
	$('input[type="checkbox"].state')
		// initial state...
		.each(function(){
			var path = $(this).attr('saveto')
			var value = !!Wiki.get(path).attr('checked')

			$(this)
				.prop('checked', value)
				.parents('.item').first()
					[value ? 
							'addClass' 
							: 'removeClass']('checked') })
		// handle clicks...
		.click(function(){
			var path = $(this).attr('saveto')
			var value = $(this).prop('checked')

			Wiki.get(path).attr('checked', value)

			$(this)
				.parents('.item').first()
					[value ? 
							'addClass' 
							: 'removeClass']('checked')

			// XXX
			save() }) }

var update_editor = function(){
	// XXX move this to post-filters...
	$('.sortable')
		.sortable({
			handle: ".sort-handle",
			placeholder: "sort-placeholder",
			forcePlaceholderSize: true,
			axis: 'y',
		})
		.addTouch()

	// XXX make this update on enter...
	// XXX account for title of edited page...
	// XXX move this to post-filters...
	$('.title')
		.focus(function(){
			var to = $(this).attr('saveto') || '.'
			$(this).text(Wiki.get(to).title) })
		.blur(function(){ 
			var to = $(this).attr('saveto') || '.'
			var text = $(this).text().trim()
			var page = Wiki.get(to)

			if(text[0] == '/'){
				page.path = text

			} else {
				page.title = text }

			// XXX need to account for changed path sufixes...
			Wiki.path = page.path
			reload() })

	/*
	// live update text...
	// XXX is this the right way to go for large documents???
	// XXX move this to post-filters...
	var text = $('.text')
		.focus(function(){
			console.log('EDITING:', Wiki.path)

			$(this)
				.prop('contenteditable', 'true')
				.html(Wiki.raw.replace(/\n/gm, '<br class="tmp-br"/>\n'))

			//reload()
		})
		.on('keyup', function(){ 
			if($(this).prop('contenteditable') == 'true'){
				var to = $(this).attr('saveto') || '.'
				console.log('SAVING:', Wiki.get(to).path)

				//Wiki.get(to).raw = clearWikiWords(
				//	$('.text').clone())
				//	.html() 
				// show \n in the inline editor...
				//Wiki.get(to).raw = clearWikiWords(
				//	$('.text').clone()
				//		.find('.tmp-br')
				//			.remove()
				//			.end())
				//	.html() 
			} })
		// XXX do this live, but on a timeout after user input...
		// XXX need to place the cursor in the same position...
		.blur(() => { 
			$(this)
				.removeAttr('contenteditable')
			reload() })
	//*/

	//text.html(Wiki.get(text.attr('saveto')).text)


	// XXX move this to post-filters...
	var raw = $('.raw')
		.focus(function(){
			var to = $(this).attr('saveto') || '.'
			console.log('EDITING:', Wiki.get(to).path) })
		.on('keyup', function(){ 
			var to = Wiki.get($(this).attr('saveto') || '.').path
			console.log('SAVING:', to)
			//Wiki.get(to).raw = $(this).text()
			Wiki.get(to).raw = $(this)[0].innerText })
		// XXX do this live, but on a timeout after user input...
		// XXX need to place the cursor in the same position...
		.blur(() => { 
			reload() })
		//.text($('.raw').html())
	
	//raw.text(Wiki.get(raw.attr('saveto')).raw)

	/*
	$('include')
		.attr('tabindex', 0)
		.click(function(){
			event.stopPropagation() })
		.focus(function(){
			var to = $(this).attr('src') || '.'
			var page = Wiki.get(to)
			console.log('EDITING:', page.path)

			// XXX select editor based on filters...
			$(this)
				//.html(page.text)
				.html($('<pre>')
					.text(page.raw)) })
		.on('keyup', function(){ 
			var to = Wiki.get($(this).attr('src') || '.').path
			console.log('SAVING:', to)
			//Wiki.get(to).raw = $(this).text()
			//Wiki.get(to).raw = $(this)[0].innerText
		})
		// XXX do this live, but on a timeout after user input...
		// XXX need to place the cursor in the same position...
		.blur(() => { 
			reload() })
	//*/
}

var go = (path) => {
	console.log('GO:', path)

	path = path.trim()
	path = path[0] == '[' ? path.slice(1, -1) : path

	// history stuff...
	if(path == 'History/back'){
		return history.back()

	} else if(path == 'History/forward'){
		return history.forward() }

	Wiki.location = path

	history.pushState({
			wikipath: Wiki.location
		}, 
		Wiki.title, 
		window.location)

	reload() }

var exportZip = function(){
	var zip = new JSZip()

	var pwiki = zip.folder("pWiki")
	pwiki.file("data.json", JSON.stringify(Wiki.__wiki_data))

	zip.generateAsync({type:"blob"})
		.then(function(content) {
			// see FileSaver.js
			saveAs(content, "pWiki.zip") }) }

$(() => {
	$(window).on('popstate', function(evt){
		event.state 
			&& event.state.wikipath 
			&& go(event.state.wikipath) })

	// load bootstrap data...
	if(window.Bootstrap){
		Bootstrap.__proto__ = BaseData
		data = Wiki.__wiki_data = Bootstrap }

	var storage = getStorage() 

	// load stored data...
	Wiki.__wiki_data = storage['wiki-data'] ?
		JSON.parse(storage['wiki-data']) 
		: data
	if(Wiki.__wiki_data !== data){
		Wiki.__wiki_data.__proto__ = data }

	Wiki.location = storage['wiki-location'] || Wiki.location


	reload()

	//update_editor()

	// XXX need to resolve relative hashes...
	$(window).on('hashchange', function(evt){
		evt.preventDefault()

		var path = location.hash.slice(1)
		var hash = path.split('#')
		path = hash.shift()
		hash = hash.pop() || ''

		// expand the path...
		if(Wiki.get(path).path != path){
			location.hash = Wiki.get(path).path

		// open page...
		} else {
			go(path)

			if(hash.length > 0){
				// XXX focus anchor...
			} } }) })

</script>

<body>

<div class="wiki" />

</body>
</html>

<!-- vim:set sw=4 ts=4 : -->