forked from jmhobbs/jsTodoTxt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
106 lines (85 loc) · 2.47 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<title>jsTodoTxt Example</title>
<script src="jsTodoTxt.js"></script>
<style>
#content, #render { width: 600px; height: 300px; }
.priority, .context, .project {
padding: 0 3px;
margin: 0 5px;
border-radius: 5px;
}
.priority {
background: #777;
color: #FFF;
}
.project {
background: #00A;
color: #FFF;
}
.context {
background: #550;
color: #FFF;
}
</style>
</head>
<body>
<textarea id="content">x 2011-06-12 (A) Bills and mail @Home
(B) Fix bedroom Screen @Home
Paint coop @Home +Chickens</textarea>
<p><button onclick="parse();">Parse</button></p>
<h2>Incomplete</h2>
<ul id="incomplete"></ul>
<h2>Complete</h2>
<ul id="complete"></ul>
<p><button onclick="render();">Render</button></p>
<textarea id="render"></textarea>
<script>
var items = [];
function parse () {
var contents = document.getElementById( 'content' ).value;
items = TodoTxt.parse( contents );
var $complete = document.getElementById( 'complete' );
var $incomplete = document.getElementById( 'incomplete' );
while ( $complete.childNodes.length >= 1 ) { $complete.removeChild( $complete.firstChild ); }
while ( $incomplete.childNodes.length >= 1 ) { $incomplete.removeChild( $incomplete.firstChild ); }
for( i in items ) {
var item = items[i];
var li = document.createElement( 'li' );
li.appendChild( document.createTextNode( item.text ) );
if( null != item.priority ) {
var p = document.createElement( 'span' );
p.setAttribute( 'class', 'priority' );
p.appendChild( document.createTextNode( item.priority ) );
li.appendChild( p );
}
if( null != item.projects ) {
for( i in item.projects ) {
var p = document.createElement( 'span' );
p.setAttribute( 'class', 'project' );
p.appendChild( document.createTextNode( item.projects[i] ) );
li.appendChild( p );
}
}
if( null != item.contexts ) {
for( i in item.contexts ) {
var p = document.createElement( 'span' );
p.setAttribute( 'class', 'context' );
p.appendChild( document.createTextNode( item.contexts[i] ) );
li.appendChild( p );
}
}
if( item.complete ) {
$complete.appendChild( li );
}
else {
$incomplete.appendChild( li );
}
}
}
function render () {
document.getElementById( 'render' ).value = TodoTxt.render( items );
}
</script>
</body>
</html>