Shade list items

README.md

@@ -64,8 +64,8 @@ notebooks:
       - jane@aol.com
       - john@hotmail.com: read
 
-  Groceries:
-    repo: /home/stick/notes/groceries
+  Shared notes:
+    repo: /home/stick/notes/shared
     serve:
       - john@hotmail.com
       - jane@aol.com
@@ -96,16 +96,20 @@ The following options are available:
 
 #### Pin
 
-Pinned notes will appear in another notebook (labeled Pinned)
+Pinned notes will appear in another notebook labeled "Pinned"
 
 #### List
 
-Emphasize list items
+Emphasize and remove duplicate list items
 
 #### Sort
 
 Sort list items alphabetically
 
+#### Dismissed
+
+Show dismissed list items
+
 ## Support
 
 Please share suggestions/issues [here](https://todo.sr.ht/~tslocum/stick).

web/assets/stick.css

@@ -90,14 +90,19 @@ label {
     padding-left: 0;
 }
 
+.noteList li:nth-of-type(odd) {
+    background-color: #F8F8F8;
+}
+
 .noteList input[type=checkbox] {
     /* Double-sized Checkboxes */
     -ms-transform: scale(1.5); /* IE */
     -moz-transform: scale(1.5); /* FF */
     -webkit-transform: scale(1.5); /* Safari and Chrome */
     transform: scale(1.5); /* Opera */
+    margin-left: 12px;
     margin-bottom: 5px;
-    margin-right: 7px;
+    margin-right: 12px;
 }
 
 #editNoteTitle {

web/assets/stick.js

@@ -1,5 +1,5 @@
-var allNoteOptions = ["pin", "list", "sort"];
-var allNoteOptionsLabels = ["Pin note", "Emphasize list items", "Sort list items alphabetically"];
+var allNoteOptions = ["pin", "list", "sort", "dismissed"];
+var allNoteOptionsLabels = ["<small>&#x1F4CC;</small> Pin", "<small>&#x1F4CB;</small> Emphasize and remove duplicate list items", "<small>&#x1F524;</small> Sort list items alphabetically", "<small>&#x2611;</small> Show dismissed list items"];
 
 var socket = null;
 var PauseTimeout = null;
@@ -22,9 +22,10 @@ var NoteBody = "";
 var NoteBodyDraft = "";
 var NoteCheckbox = 0;
 var NoteCheckingItem = false;
-var NoteHideChecked = true;
+var NoteHideDismissed = true;
 
 var reconnectTimeout;
+var connected = false;
 
 var db;
 var regexpListItem = /^([\s]+)?[\-*#](?![^\S\r\n]+[\-*#])(([^\S\r\n]+\[[ xX]])|[^\S\r\n])/g;
@@ -165,6 +166,7 @@ function ConnectStick() {
         }
 
         var incomingmsg = e.data;
+        var nowconnected = false;
         try {
             var data = jQuery.parseJSON(incomingmsg);
             if (data.hasOwnProperty("status") && data.status === "fail") {
@@ -193,6 +195,7 @@ function ConnectStick() {
             }
             if (data.hasOwnProperty("notebooks")) {
                 var mustRender = false;
+                nowconnected = true;
 
                 if (data.hasOwnProperty("delta")) {
                     for (var nbid in data.notebooks) {
@@ -247,6 +250,10 @@ function ConnectStick() {
                 if (mustRender) {
                     render();
                 }
+                
+                if (nowconnected) {
+                    connected = true;
+                }
 
                 if (mustNavigate) {
                     if (ViewNote === "") {
@@ -269,6 +276,7 @@ function ConnectStick() {
         NoteCheckingItem = false;
     };
     socket.onclose = function (e) {
+        connected = false;
         if (ReconnectDelay < 0 || reconnectTimeout != null) {
             return;
         }
@@ -289,6 +297,8 @@ function viewNote(notebook, note) {
     ViewNotebook = notebook;
     ViewNote = note;
 
+    NoteHideDismissed = !noteHasOption('dismissed');
+
     render();
 }
 
@@ -370,8 +380,8 @@ function finishCheckItem(item, m) {
     socket.send(JSON.stringify(payload));
 }
 
-function toggleHideCheckboxes() {
-    NoteHideChecked = !NoteHideChecked;
+function toggleHideDismissed() {
+    NoteHideDismissed = !NoteHideDismissed;
     render();
 }
 
@@ -420,7 +430,7 @@ function hasOptionsDirective(body) {
 }
 
 function noteHasOption(opt) {
-    return $.inArray(opt, noteOptions())
+    return $.inArray(opt, noteOptions()) != -1;
 }
 
 function editNoteOptions() {
@@ -540,11 +550,11 @@ function render() {
 
         if (NoteMode === "view") {
             if (Object.keys(note).length > 0) {
-                toggleHideChecked = 'Show';
-                if (!NoteHideChecked) {
-                    toggleHideChecked = 'Hide';
+                toggleHideDismissedLabel = 'Show';
+                if (!NoteHideDismissed) {
+                    toggleHideDismissedLabel = 'Hide';
                 }
-                NoteBody += '<button onclick="toggleHideCheckboxes()">' + toggleHideChecked + ' &#x2611;</button> &nbsp; ';
+                NoteBody += '<button onclick="toggleHideDismissed()">' + toggleHideDismissedLabel + ' &#x2611;</button> &nbsp; ';
             }
             NoteBody += '<button onclick="editNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\')">Edit</button>';
         } else {
@@ -620,7 +630,7 @@ function render() {
 
     $("#note-body").html(NoteBody);
     if (NoteMode === "view") {
-        if (ViewNote !== "" && NoteHideChecked) {
+        if (ViewNote !== "" && NoteHideDismissed) {
             var foundChecked = false;
             $('#noteContent').append('<div id="checkedDivider" style="display: none;"><ul id="hiddenItems"></ul></div>').find('input[type=checkbox]:checked').each(function () {
                 var closestLi = $(this).closest('li');
@@ -633,7 +643,7 @@ function render() {
                 }
 
                 foundChecked = true;
-                closestLi.appendTo("#hiddenItems");
+                closestLi.detach().appendTo("#hiddenItems");
             });
             if (foundChecked) {
                 $('#checkedDivider').show();
@@ -734,7 +744,7 @@ function setAuthKey(newAuthKey) {
 }
 
 function processHash() {
-    if (window.location.hash.substring(0, 7) !== '#login/' && !webSocketReady()) {
+    if (window.location.hash.substring(0, 7) !== '#login/' && !haveNoteData()) {
         waitForSocketConnection(socket, function () {
             processHash();
         });
@@ -785,9 +795,13 @@ function webSocketReady() {
     return (socket !== null && socket.readyState === 1);
 }
 
+function haveNoteData() {
+    return webSocketReady && connected == true;
+}
+
 function waitForSocketConnection(socket, callback) {
     setTimeout(function () {
-        if (socket !== null && socket.readyState === 1) {
+        if (webSocketReady()) {
             if (callback != null) {
                 callback();
             }