MaePadWeb 2.1 "Secession" released
[maepadweb.git] / index.html
blob48ff2f7a6cc6f8b22b1e58f3342d54f56238ce83
1 <html>
3 <!--
6 # This file is part of MaePadWeb
7 # Copyright (c) 2010 Thomas Perl <thp.io/about>
8 # http://thp.io/2010/maepad/
10 # This program is free software: you can redistribute it and/or modify
11 # it under the terms of the GNU General Public License as published by
12 # the Free Software Foundation, either version 3 of the License, or
13 # (at your option) any later version.
15 # This program is distributed in the hope that it will be useful,
16 # but WITHOUT ANY WARRANTY; without even the implied warranty of
17 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
18 # GNU General Public License for more details.
20 # You should have received a copy of the GNU General Public License
21 # along with this program. If not, see <http://www.gnu.org/licenses/>.
24 -->
26 <head>
27 <title>MaePadWeb</title>
28 <script type="text/javascript" src="/jquery.js"></script>
29 <script type="text/javascript">
31 var selectedChecklistItem = null;
32 var selectedChecklistIndex = null;
33 var activeChecklistNodeId = null;
35 function switchTo(selector) {
36 var items = Array("#nodelist", "#checklist", "#sketch", "#richtext");
37 for (i=0; i<items.length; i++) {
38 if (items[i] != selector) {
39 $(items[i]).hide();
42 $(selector).fadeIn();
44 if (selector != "#nodelist") {
45 $("#backlink").css('visibility', 'visible');
46 } else {
47 $("#backlink").css('visibility', 'hidden');
48 $('#checklistToolbar').hide();
52 var nodeTypes = new Array("UNKNOWN", "Text", "Sketch", "Checklist");
53 $(document).ready(function() {
54 switchTo('#nodelist');
55 $.getJSON('/nodelist.json', function(data) {
56 var current = $('#nodelist_ul');
57 current.html('');
58 $.each(data, function() {
59 current.append('<li><a onclick="setNodeTitle(\''+this[1]+'\');open'+nodeTypes[this[2]]+'('+this[0]+')"><span style="font-weight: bold;">'+this[1]+'</span><small style="color: #aaa;"><br>'+nodeTypes[this[2]]+'</small></a></li>');
60 });
61 });
62 });
64 function openText(nodeid) {
65 switchTo('#richtext');
66 $.get('/richtext.html?id='+nodeid, function(data) {
67 $('#richtext').html(data);
68 });
71 function openSketch(nodeid) {
72 switchTo('#sketch');
73 $('#sketch_img').attr('src', '/sketch.png?id='+nodeid);
76 function trueComesBack(data) {
77 if (!data) {
78 alert('A request to the web server failed.');
82 function setNodeTitle(title) {
83 $('#nodetitle').html(title);
86 function editChecklistItem(index, item) {
87 if (selectedChecklistItem != null) {
88 $(selectedChecklistItem).removeClass('selectedChecklistItem');
90 selectedChecklistItem = item;
91 selectedChecklistIndex = index;
92 if (index != null && item != null) {
93 updateChecklistToolbar();
94 $(item).addClass('selectedChecklistItem');
98 function checklistAddNew() {
99 var newItemText = prompt('Enter text for new item:', '');
100 if (newItemText != null && newItemText != '') {
101 $.getJSON('/checklist.addItem?id='+activeChecklistNodeId+'&text='+escape(newItemText), function(data) {
102 if (data) {
103 /* Reload checklist */
104 openChecklist(activeChecklistNodeId);
105 } else {
106 alert('Could not save checklist item');
112 function checklistDelete() {
113 if (!confirm('Really delete this item?')) {
114 return;
116 $.getJSON('/checklist.deleteItem?id='+selectedChecklistIndex, function(data) {
117 if (data) {
118 /* Reload checklist */
119 openChecklist(activeChecklistNodeId);
120 } else {
121 alert('Could not save checklist item');
126 function checklistToggleBold() {
127 var item = $(selectedChecklistItem);
128 var span = item.find('span').first();
129 var isBold = (span.css('font-weight') == 'bold');
130 if (isBold) {
131 span.css('font-weight', 'normal');
132 } else {
133 span.css('font-weight', 'bold');
135 $.getJSON('/checklist.setBold?id='+selectedChecklistIndex+'&bold='+(!isBold), trueComesBack);
136 updateChecklistToolbar();
139 function checklistToggleStrike() {
140 var item = $(selectedChecklistItem);
141 var span = item.find('span').first();
142 var isStrike = (span.css('text-decoration') == 'line-through');
143 if (isStrike) {
144 span.css('text-decoration', 'none');
145 } else {
146 span.css('text-decoration', 'line-through');
148 $.getJSON('/checklist.setStrike?id='+selectedChecklistIndex+'&strike='+(!isStrike), trueComesBack);
149 updateChecklistToolbar();
152 function checklistToggleCheck() {
153 var item = $(selectedChecklistItem);
154 var checkbox = item.find('img').first();
155 checkbox.toggleClass('checked');
156 if (checkbox.hasClass('checked')) {
157 checkbox.attr('src', '/icons/widgets_tickmark_list');
158 } else {
159 checkbox.attr('src', '/nix.gif');
161 $.getJSON('/checklist.setCheck?id='+selectedChecklistIndex+'&check='+checkbox.hasClass('checked'), trueComesBack);
162 updateChecklistToolbar();
165 function checklistEditText() {
166 var item = $(selectedChecklistItem);
167 var span = item.find('span').first();
168 newValue = prompt('Edit this node:', span.html());
169 if (newValue == null) {
170 /* ignore */
171 } else if (newValue == '') {
172 /* ask for delete */
173 checklistDelete();
174 } else {
175 span.html(newValue);
176 $.getJSON('/checklist.setText?id='+selectedChecklistIndex+'&text='+escape(newValue), trueComesBack);
180 function updateChecklistToolbar()
182 var item = $(selectedChecklistItem);
183 var span = item.find('span').first();
184 var checkbox = item.find('img').first();
185 var isBold = (span.css('font-weight') == 'bold');
186 var isStrike = (span.css('text-decoration') == 'line-through');
187 var isChecked = checkbox.hasClass('checked');
188 if (isBold) {
189 $('#checklistToolbar #boldButton').addClass('selected');
190 } else {
191 $('#checklistToolbar #boldButton').removeClass('selected');
193 if (isStrike) {
194 $('#checklistToolbar #strikeButton').addClass('selected');
195 } else {
196 $('#checklistToolbar #strikeButton').removeClass('selected');
198 if (isChecked) {
199 $('#checklistToolbar #checkButton').addClass('selected');
200 } else {
201 $('#checklistToolbar #checkButton').removeClass('selected');
205 function openChecklist(nodeid) {
206 activeChecklistNodeId = nodeid;
207 $('#checklistToolbar').fadeIn();
209 switchTo('#checklist');
210 $('#checklist_ul').html('');
211 $.getJSON('/checklist.json?id='+nodeid, function(data) {
212 var current = $('#checklist_ul');
213 $.each(data, function() {
214 var index = this[0];
215 var name = this[1];
216 var style = this[2];
217 var color = this[3];
218 var spanStyle = '';
219 if (color != '000000') {
220 spanStyle += 'color: #'+color+';';
222 if (style&(1<<2)) {
223 spanStyle += 'text-decoration:line-through;';
225 if (style&(1<<1)) {
226 spanStyle += 'font-weight:bold;';
228 current.append('<li><a ondblclick="checklistEditText();" onclick="editChecklistItem('+index+', this)"><img class="checklistBox '+((style&(1<<0))?"checked":"")+'" src="'+((style&(1<<0))?"/icons/widgets_tickmark_list":"/nix.gif")+'" onclick="editChecklistItem('+index+', $(this).parent());checklistToggleCheck();"><span style="'+spanStyle+'">'+name+'</span></a></li>');
233 </script>
234 <style type="text/css">
235 body {
236 margin: 0px;
237 background-color: black;
238 font-size: smaller;
239 font-family: sans-serif;
241 h1 {
242 position: fixed;
243 top: 0px;
244 left: 0px;
245 right: 0px;
246 color: white;
247 font-size: 32px;
248 vertical-align: middle;
249 height: 56px;
250 background-image: url(/theme/title_bg);
251 padding: 0px;
252 margin: 0px;
253 border-bottom: 1px solid black;
256 cursor: default;
258 #nodelist ul, #checklist ul {
259 list-style: none;
260 padding: 0px;
261 margin: 0px;
263 #nodelist li, #checklist li {
264 background-color: #000;
265 padding: 0px;
266 color: white;
268 #nodelist li:nth-child(2n+1), #checklist li:nth-child(2n+1) {
269 background-color: #080808;
271 #nodelist li a {
272 display: block;
273 padding: 15px;
274 color: lightgrey;
275 text-decoration: none;
276 text-shadow: 0px 0px 3px black;
278 #checklist li a {
279 display: block;
280 padding: 10px;
281 color: lightgrey;
282 text-decoration: none;
283 text-shadow: 0px 0px 3px black;
285 #checklist li a.selectedChecklistItem {
286 background-image: url(/theme/toolbar_hi);
287 background-color: #666; /* FIXME: take from theme */
289 #backlink a {
290 color: white;
291 font-weight: bold;
292 text-decoration: none;
293 display: block;
296 div#checklist {
297 padding-bottom: 40px;
300 .checklistBox {
301 vertical-align: middle;
302 width: 20px;
303 height: 20px;
304 padding: 5px;
305 margin: 5px;
308 #checklistToolbar img {
309 width: 32px;
310 height: 32px;
313 #checklistToolbar {
314 position: fixed;
315 left: 0px;
316 right: 0px;
317 bottom: 0px;
318 height: 70px;
319 background-image: url(/theme/toolbar_bg);
320 background-color: black;
323 #checklistToolbar .selected {
324 background-image: url(/theme/toolbar_hi);
325 background-color: #666; /* FIXME: take from theme */
328 #checklistToolbar a {
329 display: block;
330 float: left;
331 padding: 10px;
332 color: white;
333 font-weight: bold;
335 </style>
336 </head>
337 <body>
338 <h1 id="x"><img src="/logo.png" style="vertical-align: middle; border-right: 1px solid black; padding: 14px;" alt="MaePadWeb"> <span style="font-weight: normal; padding: 4px; font-size: 20px;" id="nodetitle"></span>
339 <span id="backlink" style="float: right;">
340 <a onclick="setNodeTitle('');switchTo('#nodelist')"><img src="/theme/title_btn" alt="back" style="border-left: 1px solid black;"></a>
341 </span>
342 </h1><div style="padding-top: 56px; padding-bottom: 30px;">
343 <div id="nodelist">
344 <ul id="nodelist_ul"></ul>
345 </div>
346 <div id="checklist">
347 <ul id="checklist_ul"></ul>
348 </div>
349 <div id="sketch">
350 <img id="sketch_img" style="border: 1px solid black;">
351 </div>
352 <p id="richtext" style="border: 1px solid black; background-color: white;"></p>
353 </div>
354 <div id="checklistToolbar">
355 <a id="checkButton" onclick="checklistToggleCheck();"><img src="/icons/widgets_tickmark_list" alt="CHECK" title=""></a>
356 <a id="boldButton" onclick="checklistToggleBold();"><img src="/icons/general_bold" alt="BOLD" title=""></a>
357 <a id="strikeButton" onclick="checklistToggleStrike();"><img src="/icons/strike" alt="STRIKE" title=""></a>
358 <a id="colorButton" onclick="alert('Not yet implemented.');"><img src="/icons/palette" alt="COLOR" title=""></a>
359 <a style="border-left: 1px solid white; margin: 10px; padding: 0px; height: 32px;"></a>
360 <a id="addButton" onclick="checklistAddNew();"><img src="/icons/general_add" alt="ADD" title=""></a>
361 <a id="editButton" onclick="checklistEditText();"><img src="/icons/sketch" alt="EDIT" title=""></a>
362 <a id="deleteButton" onclick="checklistDelete();"><img src="/icons/general_delete" alt="DEL" title=""></a>
363 </div>
365 <!-- image preloading -->
366 <img src="/theme/toolbar_hi" style="display: none;">
367 <img src="/nix.gif" style="display: none;">
369 </body>
370 </html>