vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

simplify other examples

Browse source
This commit is contained in:
Leo Horie 2016-10-27 20:37:14 -04:00
parent 74404e61ed
commit 86fdcdafaa
7 changed files with 21 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

34
examples/editor-bundle/index.html
View file

@ -1,34 +0,0 @@
<!doctype html>
<html>
<head>
<title>Markdown Editor</title>
<style>
html,body {height:100%;margin:0;}
h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
#editor {display:flex;height:100%;}
.editor-input,.editor-preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;}
.editor-input {border:0;border-right:1px solid #ccc;outline:none;resize:none;}
</style>
</head>
<body>
<div id="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../../module/module.js"></script>
<script src="../../mithril.js"></script>
<script>
var m = require("../../mithril")
var Editor = {
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
view: function(vnode) {
return [
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),
m(".editor-preview", m.trust(marked(vnode.state.data))),
]
}
}
m.mount(document.getElementById("editor"), Editor)
</script>
</body>
</html>

21
examples/editor/index.html
View file

@ -13,31 +13,20 @@ h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
<body> <body>
<div id="editor"></div> <div id="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../../module/module.js"></script> <script src="../../mithril.js"></script>
<script src="../../render/vnode.js"></script>
<script src="../../render/hyperscript.js"></script>
<script src="../../render/render.js"></script>
<script src="../../render/trust.js"></script>
<script> <script>
var m = require("../../render/hyperscript") var data = {text: "# Markdown Editor\n\nType on the left panel and see the result on the right panel"}
var renderer = require("../../render/render")(window)
renderer.setEventCallback(run)
var trust = require("../../render/trust")
var Editor = { var Editor = {
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
view: function(vnode) { view: function(vnode) {
return [ return [
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data), m("textarea.editor-input", {oninput: function(e) {data.text = e.target.value}}, data.text),
m(".editor-preview", trust(marked(vnode.state.data))), m(".editor-preview", m.trust(marked(data.text))),
] ]
} }
} }
function run() { m.mount(document.getElementById("editor"), Editor)
renderer.render(document.getElementById("editor"), m(Editor))
}
run()
</script> </script>
</body> </body>
</html> </html>

177
examples/threaditjs-bundle/app.js
View file

@ -1,177 +0,0 @@
T.time("Setup");
var m = require("../../mithril")
var request = m.request
//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}).map(T.transformResponse)
},
newThread : function(text) {
return request({method: "POST", url: T.apiUrl + "/threads/create",data: {text: text}})
},
newComment : function(text, id) {
return request({method: "POST", url: T.apiUrl + "/comments/create", data: {text: text, parent: id}});
}
};
var threads = [], current = null, loaded = false, error = false, notFound = false
function loadThreads() {
loaded = false
api.home().map(function(response) {
document.title = "ThreaditJS: Mithril | Home"
threads = response.data
loaded = true
}, function() {
loaded = error = true
})
}
function loadThread(id) {
loaded = false
notFound = false
api.thread(id).map(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
})
}
function unloadThread() {
current = null
}
function createThread() {
var threadText = document.getElementById("threadText")
api.newThread(threadText.value).map(function(response) {
threadText.value = "";
threads.push(response.data);
})
return false
}
function showReplying(vnode) {
vnode.state.replying = true
vnode.state.newComment = ""
return false
}
function submitComment(vnode) {
api.newComment(vnode.state.newComment, vnode.attrs.node.id).map(function(response) {
vnode.state.newComment = ""
vnode.state.replying = false
vnode.attrs.node.children.push(response.data)
})
return false
}
//shared
var Header = {
view: function() {
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='/']", {oncreate: m.route.link}, "ThreaditJS: Mithril"),
]),
]
}
}
//home
var Home = {
oninit: loadThreads,
view: function() {
return [
m(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(function(thread) {
return [
m("p", [
m("a", {href: "/thread/" + thread.id, oncreate: m.route.link}, m.trust(T.trimTitle(thread.text))),
]),
m("p.comment_count", thread.comment_count + " comment(s)"),
m("hr"),
]
}),
m(NewThread),
]
])
]
}
}
var NewThread = {
view: function() {
return m("form", {onsubmit: createThread}, [
m("textarea#threadText"),
m("input", {type:"submit", value: "Post!"}),
])
}
}
//thread
var Thread = {
oninit: function(vnode) {
loadThread(vnode.attrs.id)
},
onremove: unloadThread,
view: function() {
if (current) T.time("Thread render")
return [
m(Header),
current ? m(".main", {oncreate: function() {T.timeEnd("Thread render")}}, [
m(ThreadNode, {node: current.root})
]) : null
]
}
}
var ThreadNode = {
view: function(vnode) {
return m(".comment", [
m("p", m.trust(vnode.attrs.node.text)),
m(".reply", m(Reply, vnode.attrs)),
m(".children", [
vnode.attrs.node.children.map(function(child) {
return m(ThreadNode, {node: child})
})
])
])
}
}
var Reply = {
view: function(vnode) {
return vnode.state.replying
? m("form", {onsubmit: function() {return submitComment(vnode)}}, [
m("textarea", {
value: vnode.state.newComment,
oninput: function(e) {
vnode.state.newComment = e.target.value
},
}),
m("input", {type:"submit", value: "Reply!"}),
m(".preview", m.trust(T.previewComment(vnode.state.newComment))),
])
: m("a", {onclick: function() {return showReplying(vnode)}}, "Reply!")
}
}
//router
m.route(document.getElementById("app"), "/", {
"/thread/:id" : Thread,
"/" : Home,
})

6
examples/threaditjs-bundle/colors.css
View file

@ -1,6 +0,0 @@
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;}

17
examples/threaditjs-bundle/index.html
View file

@ -1,17 +0,0 @@
<!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>
<div id="app"></div>
<script src="http://threaditjs.com/shared.js"></script>
<script src="../../module/module.js"></script>
<script src="../../mithril.js"></script>
<script src="app.js"></script>
</body>
</html>

48
examples/threaditjs/app.js
View file

@ -1,14 +1,7 @@
T.time("Setup"); T.time("Setup");
var Stream = require("../../util/stream") var m = require("../../mithril")
var requestService = require("../../request/request")(window) var request = m.request
var request = requestService.xhr
var m = require("../../render/hyperscript")
var trust = require("../../render/trust")
var renderer = require("../../render/render")(window)
var router = require("../../router/router")(window)
requestService.setCompletionCallback(run)
//API calls //API calls
var api = { var api = {
@ -18,7 +11,7 @@ var api = {
}, },
thread : function(id) { thread : function(id) {
T.timeEnd("Setup") T.timeEnd("Setup")
return request({method: "GET", url: T.apiUrl + "/comments/" + id}).map(T.transformResponse) return request({method: "GET", url: T.apiUrl + "/comments/" + id}).run(T.transformResponse)
}, },
newThread : function(text) { newThread : function(text) {
return request({method: "POST", url: T.apiUrl + "/threads/create",data: {text: text}}) return request({method: "POST", url: T.apiUrl + "/threads/create",data: {text: text}})
@ -31,11 +24,11 @@ var api = {
var threads = [], current = null, loaded = false, error = false, notFound = false var threads = [], current = null, loaded = false, error = false, notFound = false
function loadThreads() { function loadThreads() {
loaded = false loaded = false
api.home().map(function(response) { api.home().run(function(response) {
document.title = "ThreaditJS: Mithril | Home" document.title = "ThreaditJS: Mithril | Home"
threads = response.data threads = response.data
loaded = true loaded = true
}).catch(function() { }, function() {
loaded = error = true loaded = error = true
}) })
} }
@ -43,11 +36,11 @@ function loadThreads() {
function loadThread(id) { function loadThread(id) {
loaded = false loaded = false
notFound = false notFound = false
api.thread(id).map(function(response) { api.thread(id).run(function(response) {
document.title = "ThreaditJS: Mithril | " + T.trimTitle(response.root.text); document.title = "ThreaditJS: Mithril | " + T.trimTitle(response.root.text);
loaded = true loaded = true
current = response current = response
}).catch(function(response) { }, function(response) {
loaded = true loaded = true
if (response.status === 404) notFound = true if (response.status === 404) notFound = true
else error = true else error = true
@ -59,7 +52,7 @@ function unloadThread() {
function createThread() { function createThread() {
var threadText = document.getElementById("threadText") var threadText = document.getElementById("threadText")
api.newThread(threadText.value).map(function(response) { api.newThread(threadText.value).run(function(response) {
threadText.value = ""; threadText.value = "";
threads.push(response.data); threads.push(response.data);
}) })
@ -73,7 +66,7 @@ function showReplying(vnode) {
} }
function submitComment(vnode) { function submitComment(vnode) {
api.newComment(vnode.state.newComment, vnode.attrs.node.id).map(function(response) { api.newComment(vnode.state.newComment, vnode.attrs.node.id).run(function(response) {
vnode.state.newComment = "" vnode.state.newComment = ""
vnode.state.replying = false vnode.state.replying = false
vnode.attrs.node.children.push(response.data) vnode.attrs.node.children.push(response.data)
@ -91,7 +84,7 @@ var Header = {
m("a[href='http://threaditjs.com']", "ThreaditJS Home"), m("a[href='http://threaditjs.com']", "ThreaditJS Home"),
]), ]),
m("h2", [ m("h2", [
m("a[href='#/']", "ThreaditJS: Mithril"), m("a[href='/']", {oncreate: m.route.link}, "ThreaditJS: Mithril"),
]), ]),
] ]
} }
@ -110,7 +103,7 @@ var Home = {
threads.map(function(thread) { threads.map(function(thread) {
return [ return [
m("p", [ m("p", [
m("a", {href: "#/thread/" + thread.id}, trust(T.trimTitle(thread.text))), m("a", {href: "/thread/" + thread.id, oncreate: m.route.link}, m.trust(T.trimTitle(thread.text))),
]), ]),
m("p.comment_count", thread.comment_count + " comment(s)"), m("p.comment_count", thread.comment_count + " comment(s)"),
m("hr"), m("hr"),
@ -150,7 +143,7 @@ var Thread = {
var ThreadNode = { var ThreadNode = {
view: function(vnode) { view: function(vnode) {
return m(".comment", [ return m(".comment", [
m("p", trust(vnode.attrs.node.text)), m("p", m.trust(vnode.attrs.node.text)),
m(".reply", m(Reply, vnode.attrs)), m(".reply", m(Reply, vnode.attrs)),
m(".children", [ m(".children", [
vnode.attrs.node.children.map(function(child) { vnode.attrs.node.children.map(function(child) {
@ -171,25 +164,14 @@ var Reply = {
}, },
}), }),
m("input", {type:"submit", value: "Reply!"}), m("input", {type:"submit", value: "Reply!"}),
m(".preview", trust(T.previewComment(vnode.state.newComment))), m(".preview", m.trust(T.previewComment(vnode.state.newComment))),
]) ])
: m("a", {onclick: function() {return showReplying(vnode)}}, "Reply!") : m("a", {onclick: function() {return showReplying(vnode)}}, "Reply!")
} }
} }
//router //router
renderer.setEventCallback(run) m.route(document.getElementById("app"), "/", {
function run() {
replayRoute()
}
var root = document.getElementById("app")
router.setPrefix("#")
var replayRoute = router.defineRoutes({
"/thread/:id" : Thread, "/thread/:id" : Thread,
"/" : Home "/" : Home,
}, function(view, args) {
renderer.render(root, [m(view, args)])
}, function() {
router.setPath("/")
}) })

10
examples/threaditjs/index.html
View file

@ -11,15 +11,7 @@
<div id="app"></div> <div id="app"></div>
<script src="http://threaditjs.com/shared.js"></script> <script src="http://threaditjs.com/shared.js"></script>
<script src="../../module/module.js"></script> <script src="../../module/module.js"></script>
<script src="../../render/vnode.js"></script> <script src="../../mithril.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="../../util/stream.js"></script>
<script src="../../request/request.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>