index.html

   1
   2 <html>
   3     <head>
   4         <title>MaePadWeb</title>
   5         <script type="text/javascript" src="/jquery.js"></script>
   6         <script type="text/javascript">
   7
   8 var selectedChecklistItem = null;
   9 var selectedChecklistIndex = null;
  10 var activeChecklistNodeId = null;
  11
  12 function switchTo(selector) {
  13     var items = Array("#nodelist", "#checklist", "#sketch", "#richtext");
  14     for (i=0; i<items.length; i++) {
  15         if (items[i] != selector) {
  16             $(items[i]).hide();
  17         }
  18     }
  19     $(selector).fadeIn();
  20
  21     if (selector != "#nodelist") {
  22         $("#backlink").css('visibility', 'visible');
  23     } else {
  24         $("#backlink").css('visibility', 'hidden');
  25         $('#checklistToolbar').hide();
  26     }
  27 }
  28
  29 var nodeTypes = new Array("UNKNOWN", "Text", "Sketch", "Checklist");
  30 $(document).ready(function() {
  31     switchTo('#nodelist');
  32     $.getJSON('/nodelist.json', function(data) {
  33         var current = $('#nodelist_ul');
  34         current.html('');
  35         $.each(data, function() {
  36             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>');
  37         });
  38     });
  39 });
  40
  41 function openText(nodeid) {
  42     switchTo('#richtext');
  43     $.get('/richtext.html?id='+nodeid, function(data) {
  44         $('#richtext').html(data);
  45     });
  46 }
  47
  48 function openSketch(nodeid) {
  49     switchTo('#sketch');
  50     $('#sketch_img').attr('src', '/sketch.png?id='+nodeid);
  51 }
  52
  53 function trueComesBack(data) {
  54     if (!data) {
  55         alert('A request to the web server failed.');
  56     }
  57 }
  58
  59 function setNodeTitle(title) {
  60     $('#nodetitle').html(title);
  61 }
  62
  63 function editChecklistItem(index, item) {
  64     if (selectedChecklistItem != null) {
  65         $(selectedChecklistItem).removeClass('selectedChecklistItem');
  66     }
  67     selectedChecklistItem = item;
  68     selectedChecklistIndex = index;
  69     if (index != null && item != null) {
  70         updateChecklistToolbar();
  71         $(item).addClass('selectedChecklistItem');
  72     }
  73 }
  74
  75 function checklistAddNew() {
  76     var newItemText = prompt('Enter text for new item:', '');
  77     if (newItemText != null && newItemText != '') {
  78         $.getJSON('/checklist.addItem?id='+activeChecklistNodeId+'&text='+escape(newItemText), function(data) {
  79             if (data) {
  80                 /* Reload checklist */
  81                 openChecklist(activeChecklistNodeId);
  82             } else {
  83                 alert('Could not save checklist item');
  84             }
  85         });
  86     }
  87 }
  88
  89 function checklistDelete() {
  90     if (!confirm('Really delete this item?')) {
  91         return;
  92     }
  93     $.getJSON('/checklist.deleteItem?id='+selectedChecklistIndex, function(data) {
  94             if (data) {
  95                 /* Reload checklist */
  96                 openChecklist(activeChecklistNodeId);
  97             } else {
  98                 alert('Could not save checklist item');
  99             }
 100     });
 101 }
 102
 103 function checklistToggleBold() {
 104     var item = $(selectedChecklistItem);
 105     var span = item.find('span').first();
 106     var isBold = (span.css('font-weight') == 'bold');
 107     if (isBold) {
 108         span.css('font-weight', 'normal');
 109     } else {
 110         span.css('font-weight', 'bold');
 111     }
 112     $.getJSON('/checklist.setBold?id='+selectedChecklistIndex+'&bold='+(!isBold), trueComesBack);
 113     updateChecklistToolbar();
 114 }
 115
 116 function checklistToggleStrike() {
 117     var item = $(selectedChecklistItem);
 118     var span = item.find('span').first();
 119     var isStrike = (span.css('text-decoration') == 'line-through');
 120     if (isStrike) {
 121         span.css('text-decoration', 'none');
 122     } else {
 123         span.css('text-decoration', 'line-through');
 124     }
 125     $.getJSON('/checklist.setStrike?id='+selectedChecklistIndex+'&strike='+(!isStrike), trueComesBack);
 126     updateChecklistToolbar();
 127 }
 128
 129 function checklistToggleCheck() {
 130     var item = $(selectedChecklistItem);
 131     var checkbox = item.find('img').first();
 132     checkbox.toggleClass('checked');
 133     if (checkbox.hasClass('checked')) {
 134         checkbox.attr('src', '/icons/widgets_tickmark_list');
 135     } else {
 136         checkbox.attr('src', '/nix.gif');
 137     }
 138     $.getJSON('/checklist.setCheck?id='+selectedChecklistIndex+'&check='+checkbox.hasClass('checked'), trueComesBack);
 139     updateChecklistToolbar();
 140 }
 141
 142 function checklistEditText() {
 143     var item = $(selectedChecklistItem);
 144     var span = item.find('span').first();
 145     newValue = prompt('Edit this node:', span.html());
 146     if (newValue == null) {
 147         /* ignore */
 148     } else if (newValue == '') {
 149         /* ask for delete */
 150         checklistDelete();
 151     } else {
 152         span.html(newValue);
 153         $.getJSON('/checklist.setText?id='+selectedChecklistIndex+'&text='+escape(newValue), trueComesBack);
 154     }
 155 }
 156
 157 function updateChecklistToolbar()
 158 {
 159     var item = $(selectedChecklistItem);
 160     var span = item.find('span').first();
 161     var checkbox = item.find('img').first();
 162     var isBold = (span.css('font-weight') == 'bold');
 163     var isStrike = (span.css('text-decoration') == 'line-through');
 164     var isChecked = checkbox.hasClass('checked');
 165     if (isBold) {
 166         $('#checklistToolbar #boldButton').addClass('selected');
 167     } else {
 168         $('#checklistToolbar #boldButton').removeClass('selected');
 169     }
 170     if (isStrike) {
 171         $('#checklistToolbar #strikeButton').addClass('selected');
 172     } else {
 173         $('#checklistToolbar #strikeButton').removeClass('selected');
 174     }
 175     if (isChecked) {
 176         $('#checklistToolbar #checkButton').addClass('selected');
 177     } else {
 178         $('#checklistToolbar #checkButton').removeClass('selected');
 179     }
 180 }
 181
 182 function openChecklist(nodeid) {
 183     activeChecklistNodeId = nodeid;
 184     $('#checklistToolbar').fadeIn();
 185
 186     switchTo('#checklist');
 187     $('#checklist_ul').html('');
 188     $.getJSON('/checklist.json?id='+nodeid, function(data) {
 189         var current = $('#checklist_ul');
 190         $.each(data, function() {
 191             var index = this[0];
 192             var name = this[1];
 193             var style = this[2];
 194             var color = this[3];
 195             var spanStyle = '';
 196             if (color != '000000') {
 197                 spanStyle += 'color: #'+color+';';
 198             }
 199             if (style&(1<<2)) {
 200                 spanStyle += 'text-decoration:line-through;';
 201             }
 202             if (style&(1<<1)) {
 203                 spanStyle += 'font-weight:bold;';
 204             }
 205             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>');
 206         });
 207     });
 208 }
 209
 210         </script>
 211         <style type="text/css">
 212             body {
 213                 margin: 0px;
 214                 background-color: black;
 215                 font-size: smaller;
 216                 font-family: sans-serif;
 217             }
 218             h1 {
 219                 position: fixed;
 220                 top: 0px;
 221                 left: 0px;
 222                 right: 0px;
 223                 color: white;
 224                 font-size: 32px;
 225                 vertical-align: middle;
 226                 height: 56px;
 227                 background-image: url(/theme/title_bg);
 228                 padding: 0px;
 229                 margin: 0px;
 230                 border-bottom: 1px solid black;
 231             }
 232             a {
 233                 cursor: default;
 234             }
 235             #nodelist ul, #checklist ul {
 236                 list-style: none;
 237                 padding: 0px;
 238                 margin: 0px;
 239             }
 240             #nodelist li, #checklist li {
 241                 background-color: #000;
 242                 padding: 0px;
 243                 color: white;
 244             }
 245             #nodelist li:nth-child(2n+1), #checklist li:nth-child(2n+1) {
 246                 background-color: #080808;
 247             }
 248             #nodelist li a {
 249                 display: block;
 250                 padding: 15px;
 251                 color: lightgrey;
 252                 text-decoration: none;
 253                 text-shadow: 0px 0px 3px black;
 254             }
 255             #checklist li a {
 256                 display: block;
 257                 padding: 10px;
 258                 color: lightgrey;
 259                 text-decoration: none;
 260                 text-shadow: 0px 0px 3px black;
 261             }
 262             #checklist li a.selectedChecklistItem {
 263                 background-image: url(/theme/toolbar_hi);
 264                 background-color: #666; /* FIXME: take from theme */
 265             }
 266             #backlink a {
 267                 color: white;
 268                 font-weight: bold;
 269                 text-decoration: none;
 270                 display: block;
 271             }
 272
 273             div#checklist {
 274                 padding-bottom: 40px;
 275             }
 276
 277             .checklistBox {
 278                 vertical-align: middle;
 279                 width: 20px;
 280                 height: 20px;
 281                 padding: 5px;
 282                 margin: 5px;
 283             }
 284
 285             #checklistToolbar img {
 286                 width: 32px;
 287                 height: 32px;
 288             }
 289
 290             #checklistToolbar {
 291                 position: fixed;
 292                 left: 0px;
 293                 right: 0px;
 294                 bottom: 0px;
 295                 height: 70px;
 296                 background-image: url(/theme/toolbar_bg);
 297                 background-color: black;
 298             }
 299
 300             #checklistToolbar .selected {
 301                 background-image: url(/theme/toolbar_hi);
 302                 background-color: #666; /* FIXME: take from theme */
 303             }
 304
 305             #checklistToolbar a {
 306                 display: block;
 307                 float: left;
 308                 padding: 10px;
 309                 color: white;
 310                 font-weight: bold;
 311             }
 312         </style>
 313     </head>
 314     <body>
 315         <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>
 316         <span id="backlink" style="float: right;">
 317             <a onclick="setNodeTitle('');switchTo('#nodelist')"><img src="/theme/title_btn" alt="back" style="border-left: 1px solid black;"></a>
 318         </span>
 319         </h1><div style="padding-top: 56px; padding-bottom: 30px;">
 320         <div id="nodelist">
 321             <ul id="nodelist_ul"></ul>
 322         </div>
 323         <div id="checklist">
 324             <ul id="checklist_ul"></ul>
 325         </div>
 326         <div id="sketch">
 327             <img id="sketch_img" style="border: 1px solid black;">
 328         </div>
 329         <p id="richtext" style="border: 1px solid black; background-color: white;"></p>
 330         </div>
 331         <div id="checklistToolbar">
 332             <a id="checkButton" onclick="checklistToggleCheck();"><img src="/icons/widgets_tickmark_list" alt="CHECK" title=""></a>
 333             <a id="boldButton" onclick="checklistToggleBold();"><img src="/icons/general_bold" alt="BOLD" title=""></a>
 334             <a id="strikeButton" onclick="checklistToggleStrike();"><img src="/icons/strike" alt="STRIKE" title=""></a>
 335             <a id="colorButton" onclick="alert('Not yet implemented.');"><img src="/icons/palette" alt="COLOR" title=""></a>
 336             <a style="border-left: 1px solid white; margin: 10px; padding: 0px; height: 32px;"></a>
 337             <a id="addButton" onclick="checklistAddNew();"><img src="/icons/general_add" alt="ADD" title=""></a>
 338             <a id="editButton" onclick="checklistEditText();"><img src="/icons/sketch" alt="EDIT" title=""></a>
 339             <a id="deleteButton" onclick="checklistDelete();"><img src="/icons/general_delete" alt="DEL" title=""></a>
 340         </div>
 341     </body>
 342 </html>
 343