index.html

   1 <html>
   2
   3 <!--
   4
   5 #
   6 # This file is part of MaePadWeb
   7 # Copyright (c) 2010 Thomas Perl <thp.io/about>
   8 # http://thp.io/2010/maepad/
   9 #
  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.
  14 #
  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.
  19 #
  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/>.
  22 #
  23
  24 -->
  25
  26     <head>
  27         <title>MaePadWeb</title>
  28         <script type="text/javascript" src="/jquery.js"></script>
  29         <script type="text/javascript">
  30
  31 var selectedChecklistItem = null;
  32 var selectedChecklistIndex = null;
  33 var activeChecklistNodeId = null;
  34
  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();
  40         }
  41     }
  42     $(selector).fadeIn();
  43
  44     if (selector != "#nodelist") {
  45         $("#backlink").css('visibility', 'visible');
  46     } else {
  47         $("#backlink").css('visibility', 'hidden');
  48         $('#checklistToolbar').hide();
  49     }
  50 }
  51
  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 });
  63
  64 function openText(nodeid) {
  65     switchTo('#richtext');
  66     $.get('/richtext.html?id='+nodeid, function(data) {
  67         $('#richtext').html(data);
  68     });
  69 }
  70
  71 function openSketch(nodeid) {
  72     switchTo('#sketch');
  73     $('#sketch_img').attr('src', '/sketch.png?id='+nodeid);
  74 }
  75
  76 function trueComesBack(data) {
  77     if (!data) {
  78         alert('A request to the web server failed.');
  79     }
  80 }
  81
  82 function setNodeTitle(title) {
  83     $('#nodetitle').html(title);
  84 }
  85
  86 function editChecklistItem(index, item) {
  87     if (selectedChecklistItem != null) {
  88         $(selectedChecklistItem).removeClass('selectedChecklistItem');
  89     }
  90     selectedChecklistItem = item;
  91     selectedChecklistIndex = index;
  92     if (index != null && item != null) {
  93         updateChecklistToolbar();
  94         $(item).addClass('selectedChecklistItem');
  95     }
  96 }
  97
  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');
 107             }
 108         });
 109     }
 110 }
 111
 112 function checklistDelete() {
 113     if (!confirm('Really delete this item?')) {
 114         return;
 115     }
 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');
 122             }
 123     });
 124 }
 125
 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');
 134     }
 135     $.getJSON('/checklist.setBold?id='+selectedChecklistIndex+'&bold='+(!isBold), trueComesBack);
 136     updateChecklistToolbar();
 137 }
 138
 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');
 147     }
 148     $.getJSON('/checklist.setStrike?id='+selectedChecklistIndex+'&strike='+(!isStrike), trueComesBack);
 149     updateChecklistToolbar();
 150 }
 151
 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');
 160     }
 161     $.getJSON('/checklist.setCheck?id='+selectedChecklistIndex+'&check='+checkbox.hasClass('checked'), trueComesBack);
 162     updateChecklistToolbar();
 163 }
 164
 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);
 177     }
 178 }
 179
 180 function updateChecklistToolbar()
 181 {
 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');
 192     }
 193     if (isStrike) {
 194         $('#checklistToolbar #strikeButton').addClass('selected');
 195     } else {
 196         $('#checklistToolbar #strikeButton').removeClass('selected');
 197     }
 198     if (isChecked) {
 199         $('#checklistToolbar #checkButton').addClass('selected');
 200     } else {
 201         $('#checklistToolbar #checkButton').removeClass('selected');
 202     }
 203 }
 204
 205 function openChecklist(nodeid) {
 206     activeChecklistNodeId = nodeid;
 207     $('#checklistToolbar').fadeIn();
 208
 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+';';
 221             }
 222             if (style&(1<<2)) {
 223                 spanStyle += 'text-decoration:line-through;';
 224             }
 225             if (style&(1<<1)) {
 226                 spanStyle += 'font-weight:bold;';
 227             }
 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>');
 229         });
 230     });
 231 }
 232
 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;
 240             }
 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;
 254             }
 255             a {
 256                 cursor: default;
 257             }
 258             #nodelist ul, #checklist ul {
 259                 list-style: none;
 260                 padding: 0px;
 261                 margin: 0px;
 262             }
 263             #nodelist li, #checklist li {
 264                 background-color: #000;
 265                 padding: 0px;
 266                 color: white;
 267             }
 268             #nodelist li:nth-child(2n+1), #checklist li:nth-child(2n+1) {
 269                 background-color: #080808;
 270             }
 271             #nodelist li a {
 272                 display: block;
 273                 padding: 15px;
 274                 color: lightgrey;
 275                 text-decoration: none;
 276                 text-shadow: 0px 0px 3px black;
 277             }
 278             #checklist li a {
 279                 display: block;
 280                 padding: 10px;
 281                 color: lightgrey;
 282                 text-decoration: none;
 283                 text-shadow: 0px 0px 3px black;
 284             }
 285             #checklist li a.selectedChecklistItem {
 286                 background-image: url(/theme/toolbar_hi);
 287                 background-color: #666; /* FIXME: take from theme */
 288             }
 289             #backlink a {
 290                 color: white;
 291                 font-weight: bold;
 292                 text-decoration: none;
 293                 display: block;
 294             }
 295
 296             div#checklist {
 297                 padding-bottom: 40px;
 298             }
 299
 300             .checklistBox {
 301                 vertical-align: middle;
 302                 width: 20px;
 303                 height: 20px;
 304                 padding: 5px;
 305                 margin: 5px;
 306             }
 307
 308             #checklistToolbar img {
 309                 width: 32px;
 310                 height: 32px;
 311             }
 312
 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;
 321             }
 322
 323             #checklistToolbar .selected {
 324                 background-image: url(/theme/toolbar_hi);
 325                 background-color: #666; /* FIXME: take from theme */
 326             }
 327
 328             #checklistToolbar a {
 329                 display: block;
 330                 float: left;
 331                 padding: 10px;
 332                 color: white;
 333                 font-weight: bold;
 334             }
 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>
 364
 365         <!-- image preloading -->
 366         <img src="/theme/toolbar_hi" style="display: none;">
 367         <img src="/nix.gif" style="display: none;">
 368
 369     </body>
 370 </html>
 371