From: xangelo <git@xangelo.ca>
Date: Wed, 25 Jan 2023 15:21:08 +0000 (-0500)
Subject: shortcut: shift + x = toggle strikethrough and fade text
X-Git-Url: https://git.xangelo.ca/?p=apps%2Foutliner%2F.git;a=commitdiff_plain;h=9eb1716321734b6fe93845454dbd9847001fadd7

shortcut: shift + x = toggle strikethrough and fade text
---

diff --git a/public/assets/style.css b/public/assets/style.css
index 4493c65..847e6c1 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -70,6 +70,10 @@ body {
   color: #000;
   background-color: #fff;
 }
+.strikethrough, .strikethrough .node {
+  text-decoration: line-through;
+  color: #808080;
+}
 
 
 footer {
diff --git a/src/client.ts b/src/client.ts
index c02d2b7..9b4c5b4 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -192,6 +192,14 @@ keyboardJS.withContext('navigation', () => {
     keyboardJS.setContext('editing');
   });
 
+  keyboardJS.bind('shift + x', e => {
+    e.preventDefault();
+    // toggle "strikethrough" of node
+    cursor.get().classList.toggle('strikethrough');
+    outline.data.contentNodes[cursor.getIdOfNode()].strikethrough = cursor.get().classList.contains('strikethrough');
+    save();
+  });
+
   keyboardJS.bind('tab', e => {
     e.preventDefault();
 
diff --git a/src/outline.ts b/src/outline.ts
index 9a2d2c0..ea22d23 100644
--- a/src/outline.ts
+++ b/src/outline.ts
@@ -21,6 +21,7 @@ export interface OutlineNode {
   created: number;
   type: 'text',
   content: string,
+  strikethrough: boolean;
 };
 
 export class Outline {
@@ -179,7 +180,8 @@ export class Outline {
       id: uuid(),
       created: Date.now(),
       type: 'text',
-      content: '---'
+      content: '---',
+      strikethrough: false
     };
 
     this.data.contentNodes[outlineNode.id] = outlineNode;
@@ -209,7 +211,8 @@ export class Outline {
       id: uuid(),
       created: Date.now(),
       type: 'text',
-      content: '---'
+      content: '---',
+      strikethrough: false
     };
 
     if(!nodeId) {
@@ -288,10 +291,13 @@ export class Outline {
       id: node.id,
       created: Date.now(),
       type: 'text',
-      content: ''
+      content: '',
+      strikethrough: false
     };
 
-    let html = `<div class="node ${collapse}" data-id="${node.id}" id="id-${node.id}">
+    const strikethrough = content.strikethrough ? 'strikethrough' : '';
+
+    let html = `<div class="node ${collapse} ${strikethrough}" data-id="${node.id}" id="id-${node.id}">
     <div class="nodeContent" data-type="${content.type}">
       ${this.renderContent(node.id)}
     </div>