Merge pull request #119 from penge/tables

Tables, Print
penge · Jul 6, 2020 · 700f7f6 · 700f7f6
2 parents 5243cf9 + 7f038ad
commit 700f7f6
Show file tree

Hide file tree

Showing 13 changed files with 444 additions and 150 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
   "name": "My Notes",
-  "description": "Note-taking app with Google Drive Sync. Auto-saved. Auto-synced.",
-  "version": "3.3",
+  "description": "Simple Note-taking app. Auto-saved. Auto-synced.",
+  "version": "3.4",
   "homepage_url": "https://github.com/penge/my-notes",
   "icons": { "128": "images/icon128.png" },
   "options_page": "options.html",

diff --git a/notes.css b/notes.css
@@ -16,12 +16,6 @@ svg {
   fill: var(--svg-fill-color);
 }
 
-hr {
-  height: 0;
-  border: none;
-  border-bottom: 2px solid var(--hr-color);
-}
-
 .bold { font-weight: bold; }
 .underline { text-decoration: underline; }
 .italic { font-style: italic; }
@@ -78,23 +72,27 @@ hr {
 
 /* Bar (for #sidebar-buttons and #toolbar) */
 
+#toolbar, #sidebar-buttons {
+  font-size: .8em;
+}
+
 .bar {
   display: flex;
   flex-wrap: wrap;
   user-select: none;
   box-sizing: border-box;
-  font-size: .8em;
   border-top: 1px solid var(--bar-border-color);
 }
 
-.bar .button {
+.bar > .button {
   font-weight: bold;
   padding: .2em;
   margin: .2em;
 }
 
-.bar .button svg {
+.bar > .button > svg {
   height: .7em;
+  pointer-events: none;
 }
 
 /* Sidebar */
@@ -192,16 +190,33 @@ body.resizing-sidebar-locked-max { cursor: w-resize; }
 #content pre {
   overflow: auto;
   padding: .5em;
-  border: 1px solid var(--pre-border-color);
+  border: 1px solid var(--pre-border-color, red);
+}
+
+#content table {
+  border: var(--table-border, 3px solid red);
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+#content table td {
+  padding: .25em;
+  border: var(--table-td-border, 1px solid red);
+  min-width: 1em;
+}
+
+#content table td.heading {
+  background: var(--table-td-heading-background-color, silver);
+  font-weight: bold;
 }
 
 body.with-command #content a {
   cursor: pointer;
 }
 
 #content .my-notes-highlight {
-  background: var(--highlight-background-color);
-  color: var(--highlight-text-color);
+  background: var(--highlight-background-color, yellow);
+  color: var(--highlight-text-color, black);
 }
 
 /* Context menu */
@@ -236,11 +251,17 @@ body:not(.with-context-menu) #context-menu { display: none; }
   color: var(--toolbar-button-color);
 }
 
+#toolbar .button {
+  color: var(--svg-fill-color);
+}
+
+#toolbar .button.active,
 #toolbar .button:hover {
   background: var(--toolbar-button-hover-background-color);
   color: var(--toolbar-button-hover-color);
 }
 
+#toolbar .button.active > svg,
 #toolbar .button:hover > svg {
   fill: var(--toolbar-button-hover-color);
 }
@@ -249,22 +270,25 @@ body:not(.with-toolbar) #toolbar { display: none; }
 body.with-toolbar #toolbar { transform: translateY(0); }
 
 #toolbar .button { cursor: pointer; }
-#toolbar #S { margin-right: 2.5em; }
-
-#toolbar #H #headings { display: none; }
-#toolbar #H:hover #headings {
-  display: block;
-  position: absolute;
-  bottom: calc(100% - .2em);
-  padding: .2em;
-  margin-left: -.2em;
-  background: var(--toolbar-button-hover-background-color);
-}
+#toolbar .button.wide { margin-right: 1.5em; }
+#toolbar .button.rotate90 > svg { transform: rotate(90deg); }
 
 #H1 > span { font-size: 1em; }
 #H2 > span { font-size: .85em; }
 #H3 > span { font-size: .65em; }
 
+#toolbar .button .menu {
+  position: absolute;
+  bottom: calc(100% + 1px);
+  background: var(--toolbar-submenu-background-color);
+  left: 0;
+  right: 0;
+}
+
+#toolbar .button:not(.active) .menu {
+  display: none;
+}
+
 /* Overlay */
 
 #overlay {
@@ -347,3 +371,24 @@ body.focus #toolbar {
 body.focus {
   left: 0 !important;
 }
+
+/* Print */
+
+@media print {
+  #sidebar, #toolbar {
+    display: none !important;
+  }
+
+  body {
+    position: static !important;
+    left: 0 !important;
+    font-size: 100% !important;
+    background: white;
+    color: black;
+  }
+
+  #content pre { border: 1px solid black; }
+  #content table { border: none; }
+  #content table td { border: 1px solid black; }
+  #content table td.heading { background: #dddddd; }
+}
diff --git a/notes.html b/notes.html
@@ -64,7 +64,7 @@
         <rect width="230" y="197" height="33"/>
       </svg>
     </div>
-    <div id="S" class="line-through button" title="Strike-through">
+    <div id="S" class="line-through button wide" title="Strike-through">
       <svg viewBox="0 0 230 230">
         <polygon points="230,99 136,99 136,57 183,57 183,25 47,25 47,57 94,57 94,99 0,99 0,132 94,132 94,205 136,205 136,132 230,132 "/>
       </svg>
@@ -74,11 +74,11 @@
         <path d="M136.922,51.991H89.297v148.332H47.253V51.991H0V19.745h136.922V51.991z"/>
         <path d="M220.068,98.245h-38.463v102.078h-38.236V98.245h-37.899V68.919h114.598V98.245z"/>
       </svg>
-      <span id="headings">
-        <span id="H1" title="Heading 1">H<span>1</span></span>
-        <span id="H2" title="Heading 2">H<span>2</span></span>
-        <span id="H3" title="Heading 3">H<span>3</span></span>
-      </span>
+      <div class="menu bar">
+        <div id="H1" class="button" title="Heading 1">H<span>1</span></div>
+        <div id="H2" class="button" title="Heading 2">H<span>2</span></div>
+        <div id="H3" class="button" title="Heading 3">H<span>3</span></div>
+      </div>
     </div>
     <div id="UL" class="button" title="Unordered List">
       <svg viewBox="0 0 394.971 394.971">
@@ -164,6 +164,78 @@
           c0.375,0.375,0.884,0.586,1.415,0.586c0.53,0,1.039-0.211,1.414-0.586l6.724-6.728c0.781-0.781,0.781-2.049,0-2.828L18.283,46.406z"/>
       </svg>
     </div>
+    <div id="TABLE" class="button" title="Table">
+      <svg viewBox="0 0 384 384">
+        <path d="M0,0v384h384V0H0z M170.667,341.333h-128v-128h128V341.333z M170.667,170.667h-128v-128h128V170.667z M341.333,341.333
+          h-128v-128h128V341.333z M341.333,170.667h-128v-128h128V170.667z"/>
+      </svg>
+      <div class="menu bar">
+        <div id="TABLE_INSERT" class="button wide" title="Insert table">
+          <svg viewBox="0 0 384 384">
+            <path d="M0,0v384h384V0H0z M170.667,341.333h-128v-128h128V341.333z M170.667,170.667h-128v-128h128V170.667z M341.333,341.333
+              h-128v-128h128V341.333z M341.333,170.667h-128v-128h128V170.667z"/>
+          </svg>
+        </div>
+        <div id="TABLE_ROW_ABOVE" class="button" title="Insert row above">
+          <svg viewBox="0 -21 512 512">
+            <path d="m102.355469 170.410156-74.664063-80c-4.480468-4.820312-11.414062-6.421875-17.558594-3.96875-6.121093 2.410156-10.132812 8.320313-10.132812 14.890625v160c0 6.570313 4.011719 12.480469 10.132812 14.871094 1.898438.765625 3.882813 1.128906 5.867188 1.128906 4.351562 0 8.597656-1.769531 11.691406-5.074219l74.664063-80c5.742187-6.144531 5.742187-15.703124 0-21.847656zm0 0"/>
+            <path d="m469.332031 0h-320c-23.53125 0-42.664062 19.136719-42.664062 42.667969v42.664062c0 23.53125 19.132812 42.667969 42.664062 42.667969h320c23.53125 0 42.667969-19.136719 42.667969-42.667969v-42.664062c0-23.53125-19.136719-42.667969-42.667969-42.667969zm-320 42.667969h138.667969v42.664062h-138.667969zm181.335938 42.664062v-42.664062h138.664062l.023438 42.664062zm0 0"/>
+            <path d="m469.332031 234.667969h-320c-23.53125 0-42.664062 19.132812-42.664062 42.664062v149.335938c0 23.53125 19.132812 42.664062 42.664062 42.664062h320c23.53125 0 42.667969-19.132812 42.667969-42.664062v-149.335938c0-23.53125-19.136719-42.664062-42.667969-42.664062zm0 96h-138.664062v-53.335938h138.664062zm-181.332031-53.335938v53.335938h-138.667969v-53.335938zm-138.667969 96h138.667969v53.335938h-138.667969zm181.335938 53.335938v-53.335938h138.6875v53.335938zm0 0"/>
+          </svg>
+        </div>
+        <div id="TABLE_ROW_BELOW" class="button" title="Insert row below">
+          <svg viewBox="0 -21 512 512">
+            <path d="m102.355469 277.078125-74.664063-80c-4.480468-4.820313-11.414062-6.421875-17.558594-3.96875-6.121093 2.410156-10.132812 8.320313-10.132812 14.890625v160c0 6.570312 4.011719 12.480469 10.132812 14.871094 1.898438.765625 3.882813 1.128906 5.867188 1.128906 4.351562 0 8.597656-1.769531 11.691406-5.078125l74.664063-80c5.742187-6.144531 5.742187-15.699219 0-21.84375zm0 0"/>
+            <path d="m469.332031 341.332031h-320c-23.53125 0-42.664062 19.136719-42.664062 42.667969v42.667969c0 23.53125 19.132812 42.664062 42.664062 42.664062h320c23.53125 0 42.667969-19.132812 42.667969-42.664062v-42.667969c0-23.53125-19.136719-42.667969-42.667969-42.667969zm-320.019531 42.667969h138.6875v42.667969h-138.667969zm320.019531 42.667969h-138.664062v-42.667969h138.664062zm0 0"/>
+            <path d="m469.332031 0h-320c-23.53125 0-42.664062 19.136719-42.664062 42.667969v149.332031c0 23.53125 19.132812 42.667969 42.664062 42.667969h320c23.53125 0 42.667969-19.136719 42.667969-42.667969v-149.332031c0-23.53125-19.136719-42.667969-42.667969-42.667969zm0 96h-138.664062v-53.332031h138.664062zm-320-53.332031h138.667969v53.332031h-138.6875zm0 96h138.667969v53.332031h-138.667969zm181.335938 53.332031v-53.332031h138.664062v53.332031zm0 0"/>
+          </svg>
+        </div>
+        <div id="TABLE_COLUMN_LEFT" class="button" title="Insert column left">
+          <svg viewBox="-21 0 512 512">
+            <path d="m276.203125 10.132812c-2.390625-6.121093-8.300781-10.132812-14.871094-10.132812h-160c-6.570312 0-12.480469 4.011719-14.867187 10.132812-2.410156 6.125-.855469 13.078126 3.96875 17.558594l80 74.664063c3.070312 2.882812 6.972656 4.3125 10.898437 4.3125s7.832031-1.429688 10.925781-4.3125l80-74.664063c4.796876-4.480468 6.375-11.433594 3.945313-17.558594zm0 0"/>
+            <path d="m85.332031 106.667969h-42.664062c-23.53125 0-42.667969 19.132812-42.667969 42.664062v320c0 23.53125 19.136719 42.667969 42.667969 42.667969h42.664062c23.53125 0 42.667969-19.136719 42.667969-42.667969v-320c0-23.53125-19.136719-42.664062-42.667969-42.664062zm0 42.644531v138.6875h-42.664062v-138.667969zm-42.664062 320.019531v-138.664062h42.664062v138.664062zm0 0"/>
+            <path d="m426.667969 106.667969h-149.335938c-23.53125 0-42.664062 19.132812-42.664062 42.664062v320c0 23.53125 19.132812 42.667969 42.664062 42.667969h149.335938c23.53125 0 42.664062-19.136719 42.664062-42.667969v-320c0-23.53125-19.132812-42.664062-42.664062-42.664062zm0 181.332031h-53.335938v-138.6875h53.335938zm-96-138.6875v138.6875h-53.335938v-138.667969zm-53.335938 181.355469h53.335938v138.664062h-53.335938zm96 138.664062v-138.664062h53.335938v138.664062zm0 0"/>
+          </svg>
+        </div>
+        <div id="TABLE_COLUMN_RIGHT" class="button wide" title="Insert column right">
+          <svg viewBox="-21 0 512 512">
+            <path d="m382.890625 10.132812c-2.410156-6.121093-8.320313-10.132812-14.890625-10.132812h-160c-6.570312 0-12.480469 4.011719-14.890625 10.132812-2.410156 6.125-.832031 13.078126 3.96875 17.558594l80 74.664063c3.070313 2.882812 6.996094 4.3125 10.921875 4.3125s7.851562-1.429688 10.921875-4.3125l80-74.664063c4.800781-4.480468 6.378906-11.433594 3.96875-17.558594zm0 0"/>
+            <path d="m426.667969 106.667969h-42.667969c-23.53125 0-42.667969 19.132812-42.667969 42.664062v320c0 23.53125 19.136719 42.667969 42.667969 42.667969h42.667969c23.53125 0 42.664062-19.136719 42.664062-42.667969v-320c0-23.53125-19.132812-42.664062-42.664062-42.664062zm0 42.664062v138.667969h-42.667969v-138.667969zm-42.667969 320.023438v-138.6875h42.667969v138.664062zm0 0"/>
+            <path d="m192 106.667969h-149.332031c-23.53125 0-42.667969 19.132812-42.667969 42.664062v320c0 23.53125 19.136719 42.667969 42.667969 42.667969h149.332031c23.53125 0 42.667969-19.136719 42.667969-42.667969v-320c0-23.53125-19.136719-42.664062-42.667969-42.664062zm0 181.332031h-53.332031v-138.667969h53.332031zm-96-138.667969v138.667969h-53.332031v-138.667969zm-53.332031 181.335938h53.332031v138.6875h-53.332031zm96 138.664062v-138.664062h53.332031v138.664062zm0 0"/>
+          </svg>
+        </div>
+        <div id="TABLE_HEADING_ROW" class="button" title="Toggle heading row">
+          <svg viewBox="0 0 485.064 485.064">
+            <path d="M458.736,181.097H26.334C11.793,181.097,0,192.884,0,207.425v70.215c0,14.541,11.787,26.328,26.334,26.328h432.402
+              c14.541,0,26.328-11.787,26.328-26.328v-70.215C485.07,192.884,473.283,181.097,458.736,181.097z"/>
+          </svg>
+        </div>
+        <div id="TABLE_HEADING_COLUMN" class="button wide rotate90" title="Toggle heading column">
+          <svg viewBox="0 0 485.064 485.064">
+            <path d="M458.736,181.097H26.334C11.793,181.097,0,192.884,0,207.425v70.215c0,14.541,11.787,26.328,26.334,26.328h432.402
+              c14.541,0,26.328-11.787,26.328-26.328v-70.215C485.07,192.884,473.283,181.097,458.736,181.097z"/>
+          </svg>
+        </div>
+        <div id="TABLE_DELETE_ROW" class="button" title="Delete row">
+          <svg viewBox="0 0 15.381 15.381">
+            <path d="M0,1.732v7.732h6.053c0-0.035-0.004-0.07-0.004-0.104c0-0.434,0.061-0.854,0.165-1.255H1.36V3.092
+              h12.662v2.192c0.546,0.396,1.01,0.897,1.359,1.477V1.732H0z"/>
+            <path d="M11.196,5.28c-2.307,0-4.183,1.877-4.183,4.184c0,2.308,1.876,4.185,4.183,4.185
+              c2.309,0,4.185-1.877,4.185-4.185C15.381,7.157,13.505,5.28,11.196,5.28z M11.196,12.513c-1.679,0-3.047-1.367-3.047-3.049
+              c0-1.68,1.368-3.049,3.047-3.049c1.684,0,3.05,1.369,3.05,3.049C14.246,11.146,12.88,12.513,11.196,12.513z"/>
+            <rect x="9.312" y="8.759" width="3.844" height="1.104"/>
+          </svg>
+        </div>
+        <div id="TABLE_DELETE_COLUMN" class="button" title="Delete column">
+          <svg viewBox="0 0 26 26">
+            <path d="M13.594,20.85V24h-10V2h10v3.15c0.633-0.323,1.304-0.565,2-0.727V1c0-0.551-0.448-1-1-1h-12
+              c-0.55,0-1,0.449-1,1v24c0,0.551,0.449,1,1,1h12c0.552,0,1-0.449,1-1v-3.424C14.898,21.415,14.227,21.173,13.594,20.85z"/>
+            <path d="M17.594,6.188c-3.762,0-6.813,3.051-6.812,6.813c-0.001,3.761,3.05,6.812,6.812,6.812
+              s6.813-3.051,6.813-6.813S21.355,6.188,17.594,6.188z M21.226,13.99l-7.267,0.001v-1.982h7.268L21.226,13.99z"/>
+          </svg>
+        </div>
+      </div>
+    </div>
     <div id="HIGH" class="button" title="Highlight">
       <svg viewBox="0 0 512 512">
         <polygon points="338.231,77.679 153.163,232.022 299.779,378.637 454.122,193.57"/>

diff --git a/notes.js b/notes.js
@@ -5,7 +5,7 @@ import state from "./notes/state/index.js";
 
 import { newNote, openOptions, content, syncNow } from "./notes/view/elements.js";
 import typing from "./notes/typing.js";
-import toolbar from "./notes/toolbar.js";
+import toolbar from "./notes/toolbar/index.js";
 import { saveNotes, syncNotes } from "./notes/saving.js";
 import hotkeys from "./notes/hotkeys.js";
 import sidebar from "./notes/sidebar.js";

diff --git a/notes/content.js b/notes/content.js
@@ -2,16 +2,6 @@
 
 const CONTENT_ID = "content";
 
-export const getRange = () => {
-  const selection = document.getSelection();
-  if (selection.rangeCount === 0) {
-    return null;
-  }
-
-  const range = selection.getRangeAt(0);
-  return range;
-};
-
 const createIterator = (range) => {
   const root = range.commonAncestorContainer;
   const whatToShow = NodeFilter.SHOW_TEXT;
@@ -27,6 +17,10 @@ const createIterator = (range) => {
 };
 
 export const getNodes = (range) => {
+  if (!range) {
+    return [];
+  }
+
   const iterator = createIterator(range);
   const nodes = [];
 

diff --git a/notes/range.js b/notes/range.js
@@ -5,9 +5,13 @@ let range;
 
 const save = () => {
   selection = document.getSelection();
-  if (selection.rangeCount > 0) {
+  if (selection && selection.rangeCount > 0) {
     range = selection.getRangeAt(0);
+  } else {
+    range = undefined; // reset previous range
   }
+
+  return range;
 };
 
 const restore = () => {
@@ -17,6 +21,15 @@ const restore = () => {
   }
 };
 
+export const withRange = (fn) => {
+  const range = save();
+  if (!range) {
+    return;
+  }
+
+  fn(range);
+};
+
 export default {
   save,
   restore,