initial commit (work in progress)

examples/threaditjs/app.js

@@ -0,0 +1,195 @@
+T.time("Setup");
+
+var request = require("../../request/request")(window, Promise, run).ajax
+var m = require("../../render/hyperscript")
+var trust = require("../../render/trust")
+var render = require("../../render/render")(window, run).render
+var router = require("../../router/router")(window, "#")
+
+//API calls
+var api = {
+	home : function() {
+		T.timeEnd("Setup")
+		return request({
+			method: "GET",
+			url: T.apiUrl + "/threads/",
+		})
+	}, 
+	thread : function(id) {
+		T.timeEnd("Setup")
+		return request({
+			method: "GET",
+			url: T.apiUrl + "/comments/" + id,
+		}).then(T.transformResponse)
+	},
+	newThread : function(text) {
+		return request({
+			method: "POST", 
+			url: T.apiUrl + "/threads/create",
+			data: {text: text},
+		});
+	},
+	newComment : function(text, id) {
+		return request({
+			url: T.apiUrl + "/comments/create", 
+			method: "POST",
+			data: {
+				text: text,
+				parent: id,
+			}
+		});
+	}
+};
+
+var threads = [], current = null, loaded = false, error = false, notFound = false
+function loadThreads() {
+	loaded = false
+	api.home().then(function(response) {
+		document.title = "ThreaditJS: Mithril | Home"
+		threads = response.data
+		loaded = true
+	}, function() {
+		loaded = error = true
+	})
+	.then(run)
+}
+
+function loadThread(id) {
+	loaded = false
+	notFound = false
+	api.thread(id).then(function(response) {
+		document.title = "ThreaditJS: Mithril | " + T.trimTitle(response.root.text);
+		loaded = true
+		current = response
+	}, function(response) {
+		loaded = true
+		if (response.status === 404) notFound = true
+		else error = true
+	})
+	.then(run)
+}
+function unloadThread() {
+	current = null
+}
+
+function createThread() {
+	var threadText = document.getElementById("threadText")
+	api.newThread(threadText.value).then(function(response) {
+		threadText.value = "";
+		threads.push(response.data);
+	})
+	.then(run)
+	return false
+}
+
+function showReplying(node) {
+	node.replying = true
+	node.newComment = ""
+	return false
+}
+
+function submitComment(node) {
+	api.newComment(node.newComment, node.id).then(function(response) {
+		node.newComment = ""
+		node.replying = false
+		node.children.push(response.data)
+	})
+	.then(run)
+	return false
+}
+
+//shared
+function header() {
+	return [
+		m("p.head_links", [
+			m("a[href='https://github.com/koglerjs/threaditjs/tree/master/examples/mithril']", "Source"),
+			" | ", 
+			m("a[href='http://threaditjs.com']", "ThreaditJS Home"),
+		]),
+		m("h2", [
+			m("a[href='#/']", "ThreaditJS: Mithril"),
+		]),
+	]
+}
+
+//home
+function home() {
+	return {tag: "[", key: "home", attrs: {oncreate: loadThreads}, children: [
+		header(),
+		m(".main", [
+			loaded === false ? m("h2", "Loading") :
+			error ? m("h2", "Error! Try refreshing.") :
+			notFound ? m("h2", "Not found! Don't try refreshing!") :
+			[
+				threads.map(threadListItem),
+				newThread(),
+			]
+		])
+	]}
+}
+function newThread() {
+	return m("form", {onsubmit: createThread}, [
+		m("textarea#threadText"),
+		m("input", {type:"submit", value: "Post!"}),
+	])
+}
+
+function threadListItem(thread) {
+	return [
+		m("p", [
+			m("a", {href: "#/thread/" + thread.id}, trust(T.trimTitle(thread.text))),
+		]),
+		m("p.comment_count", thread.comment_count + " comment(s)"),
+		m("hr"),
+	]
+}
+
+//thread
+function thread(args) {
+	if (current) T.time("Thread render")
+	return {tag: "[", key: args.id, attrs: {oncreate: function() {loadThread(args.id)}, onremove: unloadThread}, children: [
+		header(), 
+		current ? m(".main", {oncreate: function() {T.timeEnd("Thread render")}}, [
+			threadNode({node: current.root})
+		]) : null
+	]}
+}
+function threadNode(args) {
+	return m(".comment", [		
+		m("p", trust(args.node.text)),
+		m(".reply", reply(args)),
+		m(".children", [
+			args.node.children.map(function(child) {
+				return threadNode({node: child})
+			})
+		])
+	])
+}
+function reply(args) {
+	return args.node.replying
+		? m("form", {onsubmit: function() {return submitComment(args.node)}}, [
+			m("textarea", {
+				value: args.node.newComment, //FIXME decouple UI state from data
+				oninput: function(e) {
+					args.node.newComment = e.target.value
+				},
+			}),
+			m("input", {type:"submit", value: "Reply!"}),
+			m(".preview", trust(T.previewComment(args.node.newComment))),
+		])
+		: m("a", {onclick: function() {return showReplying(args.node)}}, "Reply!")
+}
+
+//router
+function run() {
+	replayRoute()
+}
+
+var replayRoute = router.defineRoutes({
+	"/thread/:id" : thread,
+	"/" : home
+}, function(view, args) {
+	render(document.body, [view(args)])
+}, function() {
+	router.setPath("/")
+})

examples/threaditjs/colors.css

@@ -0,0 +1,6 @@
+html {background-color:#f5f5f5;}
+
+a {color:#161;text-decoration:none;}
+a:hover {text-decoration:underline;}
+
+input[type=submit] {background-color:#5A5;color:#fff;border:0;font-weight:bold;}

examples/threaditjs/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Mithril • ThreadIt.js</title>
+		<link rel="stylesheet" href="http://threaditjs.com/reset.css"/>
+		<link rel="stylesheet" href="http://threaditjs.com/shared.css"/>
+		<link rel="stylesheet" href="colors.css"/>
+	</head>
+	<body>
+		<script src="http://threaditjs.com/shared.js"></script>
+		<script src="../../module/module.js"></script>
+		<script src="../../render/normalizeChildren.js"></script>
+		<script src="../../render/hyperscript.js"></script>
+		<script src="../../render/trust.js"></script>
+		<script src="../../render/render.js"></script>
+		<script src="../../querystring/build.js"></script>
+		<script src="../../querystring/parse.js"></script>
+		<script src="../../router/router.js"></script>
+		<script src="../../request/request.js"></script>
+		<script src="app.js"></script>
+	</body>
+</html>