` in your HTML like so:
12 |
13 |
14 |
15 | and then you invoke the Javascript lib as follows:
16 |
17 |
22 |
23 | That's pretty much it. Style to your heart's content using the stylesheet in [src/css/taskpaper.css](https://github.com/dhilowitz/jsTaskPaper/blob/master/src/css/taskpaper.css "taskpaper.css").
24 |
25 | Each tag gets its own CSS style. For example, the tag `@home` would be styled as `li.tptag-home {color: rgb(64,128,183);}`.
26 |
--------------------------------------------------------------------------------
/src/css/taskpaper.css:
--------------------------------------------------------------------------------
1 | /***
2 | * taskpaper.css - Styles for TaskPaper formatting
3 | *
4 | * @author David Hilowitz
5 | **/
6 |
7 | body {
8 | background-color: rgb(33,33,33);
9 | color: #F8F8F2;
10 | font-weight: 300;
11 | }
12 |
13 | h1 {
14 | font-family: 'Helvetica Neue', Sans-serif;
15 | font-weight: 100;
16 | font-size: 1.7em;
17 | }
18 |
19 |
20 | div.taskDiv {
21 | overflow:auto;
22 | }
23 |
24 | ul.tptop {
25 | }
26 |
27 | li.tptask {
28 | list-style-type: square;
29 | opacity: 0.5;
30 | }
31 |
32 | li.tpnote {
33 | list-style: none;
34 | color: rgb(127, 127, 127);
35 | }
36 |
37 | li.tpproject {
38 | list-style: none;
39 | font-family: 'Helvetica Neue';
40 | list-style: none;
41 | font-weight: 100;
42 | }
43 |
44 | ul li.tpproject{
45 | font-size: 1.6em;
46 | margin-left: -40px;
47 | }
48 |
49 | ul ul li.tpproject{
50 | font-size: 1.5em;
51 | }
52 |
53 | ul ul ul li.tpproject{
54 | font-size: 1.3em;
55 | }
56 |
57 | ul ul ul ul li.tpproject{
58 | font-size: 1.2em;
59 | }
60 |
61 | ul ul ul ul ul li.tpproject{
62 | font-size: 1.1em;
63 | }
64 |
65 | span.tptag {
66 | color:rgb(173,173,173);
67 | opacity: 1.0;
68 | }
69 |
70 | /* Tags */
71 | li.tptag-personal, li.tptag-home, li.tptag-blue {
72 | color: rgb(64,128,183);
73 | }
74 |
75 | li.tptag-p-1 {
76 | color: rgb(255,128,128);
77 | }
78 |
79 | li.tptag-p-2 {
80 | color: rgb(255,183,128);
81 | }
82 |
83 | li.tptag-p-3 {
84 | color: rgb(255,255,128);
85 | }
86 |
87 | li.tptag-p-4 {
88 | color: rgb(255,190,128);
89 | }
90 |
91 | li.tptag-p-5 {
92 | color: rgb(183,128,255);
93 | }
94 |
95 | li.tptag-today {
96 | opacity: 1.0;
97 | }
98 |
99 | li.tptag-done {
100 | text-decoration: line-through;
101 | opacity: 0.5;
102 | color: #F8F8F2;
103 | }
--------------------------------------------------------------------------------
/src/js/taskpaper.js:
--------------------------------------------------------------------------------
1 | /***
2 | * taskpaper.js - Convert TaskPaper text file to HTML
3 | * Based heavily on tp_to_html.pl by Jim Kang
4 | * http://death-mountain.com/2010/05/taskpaper-to-html-conversion-script/
5 | *
6 | * @author David Hilowitz , Jim Kang
7 | **/
8 |
9 | function TaskPaperPanel (taskDivSelector, taskPaperUrl, updateFrequency)
10 | {
11 | if($(taskDivSelector).length == 0) {
12 | console.log("The div selector supplied didn't turn up any divs in the document.");
13 | return;
14 | }
15 |
16 | this.taskDiv = taskDivSelector;
17 | this.taskPaperUrl = taskPaperUrl;
18 |
19 | this.g_indentLevel = 0;
20 | this.kIndentTag = "\n";
21 | this.kOutdentTag = "
\n";
22 | this.kNoteClass = "tpnote";
23 | this.kItemTagName = "li";
24 | this.kTaskClass = "tptask";
25 | this.kTagClassPrefix = "tptag-";
26 | this.kTagClass = "tptag"
27 | this.kProjectClass = "tpproject";
28 |
29 | this.updateTasks();
30 |
31 | if(updateFrequency > 0) {
32 | this.intervalID = setInterval(
33 | (function(self) { //Self-executing func which takes 'this' as self
34 | return function() { //Return a function in the context of 'self'
35 | self.updateTasks(); //Thing you wanted to run as non-window 'this'
36 | }
37 | })(this),
38 | updateFrequency
39 | );
40 | }
41 | }
42 |
43 | TaskPaperPanel.prototype.updateTasks = function updateTasks() {
44 | if($(this.taskDiv).html().length == 0)
45 | $(this.taskDiv).html("Loading...");
46 |
47 | $.ajax({
48 | // url: "https://dl.dropboxusercontent.com/s/93l33tqgh93exw8/todo.taskpaper?token_hash=AAEb8tngfY8WM_1KcbusQOpIO_jKIp48OTT54AGbVFU7ig",
49 | url: this.taskPaperUrl,
50 | context: this,
51 | cache: false,
52 | success: function(html) {
53 | $(this.taskDiv).html(this.convertTaskpaperToHtml(html));
54 | }
55 | });
56 | }
57 |
58 |
59 |
60 | TaskPaperPanel.prototype.convertTaskpaperToHtml = function convertTaskpaperToHtml(taskPaperText) {
61 | outputHtml = "";
62 |
63 | var tppObject = this;
64 | $.each(taskPaperText.split('\n'), function(index) {
65 | var outputLine = this + '\n';
66 | outputLine = tppObject.tagLine(outputLine)
67 | outputLine = tppObject.indentLine(outputLine);
68 | outputHtml = outputHtml + outputLine;
69 | });
70 |
71 | // At the end of the file, close any open indentation tags.
72 | for (j = 0; j < this.g_indentLevel; j++)
73 | {
74 | outputHtml = outputHtml + this.kOutdentTag;
75 | }
76 | return "";
77 | }
78 |
79 | // Adds the necessary tags to indent the line as needed and returns the indented line.
80 | // Updates the global $g_indentLevel variable.
81 | TaskPaperPanel.prototype.indentLine = function indentLine(line)
82 | {
83 | // Count the tabs.
84 | var tabCount = this.numberOfTabs(line);
85 |
86 | if (this.g_indentLevel != tabCount)
87 | {
88 | var tag = this.kOutdentTag;
89 | if (this.g_indentLevel < tabCount)
90 | {
91 | tag = this.kIndentTag;
92 | }
93 |
94 | for (i = 0; i < Math.abs(this.g_indentLevel - tabCount); ++i)
95 | {
96 | // Set up the right number of tabs. (Need the tabs to make the html source readable.)
97 | var tabsForThisLine = "";
98 | var numberOfOutputTabs = i;
99 | if(this.g_indentLevel < tabCount)
100 | {
101 | numberOfOutputTabs = this.g_indentLevel - i;
102 | }
103 |
104 | for (var j = 0; j < numberOfOutputTabs; ++j)
105 | {
106 | tabsForThisLine = tabsForThisLine + "\t";
107 | }
108 |
109 | // Add the tabs and indent tag.
110 | line = tabsForThisLine + tag + line;
111 | }
112 |
113 | this.g_indentLevel = tabCount;
114 | }
115 |
116 | return line;
117 | }
118 |
119 | // // Returns the line with the appropriate tags added.
120 | TaskPaperPanel.prototype.tagLine = function tagLine(line) {
121 |
122 | var itemClass = this.kNoteClass;
123 |
124 | // If it starts with "- ", it's a task.
125 | if (line.match(/^(\s*)\- /))
126 | {
127 | itemClass = this.kTaskClass;
128 | line = line.replace(/^(\s*)\- /, "$1");
129 |
130 | tags = line.match(/@[^\s]+/g);
131 |
132 | if(tags != undefined) {
133 | for(var i = 0; i < tags.length; i++) {
134 | var originalTag = tags[i];
135 | line = line.replace(originalTag, "" + originalTag + "");
136 | originalTag = originalTag.replace("@","");
137 |
138 | // Remove parameterized stuff
139 | currentTag = originalTag.replace(/([^\s\(\)]+)\s*\(.*\)/,"$1");
140 | itemClass = itemClass + " " + this.kTagClassPrefix + currentTag;
141 |
142 | // Add parameterized stuff
143 | if(originalTag.match(/(.+)\((.*)\)/)) {
144 | parameterTag = originalTag.replace(/(.+)\((.*)\)/,"$1-$2");
145 | if(parameterTag.length > 0)
146 | itemClass = itemClass + " " + this.kTagClassPrefix + parameterTag;
147 | }
148 | }
149 | }
150 |
151 | }
152 | else
153 | {
154 | // If it ends with ":", it's a project.
155 | if (line.match(/:\s*$/))
156 | {
157 | itemClass = this.kProjectClass;
158 | line = line.replace(/:\s*$/, "\n"); // Get rid of the ":".
159 | }
160 | }
161 |
162 | openTag = "<" + this.kItemTagName + " class=\"" + itemClass + "\">";
163 | closeTag = "";
164 |
165 | // Squeeze the opening and closing tags in after the whitespace at the beginning
166 | // of the line and at the end of the line, respectively.
167 | line = line.replace(/^(\s*)(.*)/, "$1" + openTag + "$2" + closeTag + "\n");
168 | return line;
169 |
170 | }
171 |
172 | // Returns the number of tabs at the start of the screen
173 | TaskPaperPanel.prototype.numberOfTabs = function numberOfTabs(text) {
174 | var count = 0;
175 | var index = 0;
176 | while (text.charAt(index++) === "\t") {
177 | count++;
178 | }
179 | return count;
180 | }
181 |
182 |
--------------------------------------------------------------------------------
/todo.txt:
--------------------------------------------------------------------------------
1 | Project 1:
2 | - Task 1 @tag1 @tag2 @home @today
3 | - Task 2 @p(2) @today
4 | - Task 3 @p(3)
5 | Project 2:
6 | - Task 4 @p(4)
7 |
--------------------------------------------------------------------------------