[FEAT] Add context menu to ribbon (#36)

* Add context menu to ribbon * Bump version
liamcain · Apr 1, 2021 · 83573e2 · 83573e2
1 parent d67c884
commit 83573e2
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 30 deletions.
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "id": "periodic-notes",
   "name": "Periodic Notes",
   "description": "Create/manage your daily, weekly, and monthly notes",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "author": "Liam Cain",
   "authorUrl": "https://github.com/liamcain/",
   "isDesktopOnly": false,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "obsidian-periodic-notes",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Create/manage daily, weekly, and monthly notes",
   "author": "liamcain",
   "main": "main.js",
@@ -14,7 +14,7 @@
   "dependencies": {
     "@popperjs/core": "2.9.1",
     "obsidian": "obsidianmd/obsidian-api#master",
-    "obsidian-daily-notes-interface": "0.8.4",
+    "obsidian-daily-notes-interface": "0.9.0",
     "svelte": "3.35.0",
     "tslib": "2.1.0"
   },

diff --git a/src/icons.ts b/src/icons.ts
@@ -0,0 +1,21 @@
+export const calendarDayIcon = `
+<g>
+<path d="M24.78 3C22.646 3 20.9 4.746 20.9 6.88V10.76H9.26C7.223 10.76 5.38 12.312 5.38 14.543V92.628C5.38 93.695 6.059 94.859 6.835 95.344C7.611 95.926 8.387 96.12 9.26 96.12H90.74C91.613 96.12 92.389 95.926 93.165 95.344C93.941 94.762 94.62 93.695 94.62 92.628V14.543C94.62 12.506 92.971 10.76 90.934 10.76H79.1V6.88C79.1 4.746 77.354 3 75.22 3H71.34C69.206 3 67.46 4.746 67.46 6.88V10.76H32.54V6.88C32.54 4.746 30.794 3 28.66 3H24.78ZM24.78 6.88H28.66V18.52H24.78V6.88ZM71.34 6.88H75.22V18.52H71.34V6.88ZM9.26 14.64H20.9V18.52C20.9 20.654 22.646 22.4 24.78 22.4H28.66C30.794 22.4 32.54 20.654 32.54 18.52V14.64H67.46V18.52C67.46 20.654 69.206 22.4 71.34 22.4H75.22C77.354 22.4 79.1 20.654 79.1 18.52V14.64H90.74V28.22H9.26V14.64ZM9.26 32.1H90.74V92.24H9.26V32.1Z" fill="currentColor" stroke-width="1" stroke="currentColor"/>
+<path d="M55.2539 79.0024H49.3613V55.3319C49.3613 52.5068 49.4282 50.2668 49.5619 48.6119C49.1775 49.0131 48.701 49.4561 48.1327 49.9408C47.581 50.4256 45.7088 51.9635 42.516 54.5546L39.5571 50.8185L50.3393 42.3432H55.2539V79.0024Z" fill="currentColor"/>
+</g>
+`;
+
+export const calendarWeekIcon = `
+<g>
+<path d="M24.78 3C22.646 3 20.9 4.746 20.9 6.88V10.76H9.26C7.223 10.76 5.38 12.312 5.38 14.543V92.628C5.38 93.695 6.059 94.859 6.835 95.344C7.611 95.926 8.387 96.12 9.26 96.12H90.74C91.613 96.12 92.389 95.926 93.165 95.344C93.941 94.762 94.62 93.695 94.62 92.628V14.543C94.62 12.506 92.971 10.76 90.934 10.76H79.1V6.88C79.1 4.746 77.354 3 75.22 3H71.34C69.206 3 67.46 4.746 67.46 6.88V10.76H32.54V6.88C32.54 4.746 30.794 3 28.66 3H24.78ZM24.78 6.88H28.66V18.52H24.78V6.88ZM71.34 6.88H75.22V18.52H71.34V6.88ZM9.26 14.64H20.9V18.52C20.9 20.654 22.646 22.4 24.78 22.4H28.66C30.794 22.4 32.54 20.654 32.54 18.52V14.64H67.46V18.52C67.46 20.654 69.206 22.4 71.34 22.4H75.22C77.354 22.4 79.1 20.654 79.1 18.52V14.64H90.74V28.22H9.26V14.64ZM9.26 32.1H90.74V92.24H9.26V32.1Z" fill="currentColor" stroke-width="1" stroke="currentColor"/>
+<path d="M42.8799 78.3604L56.5679 48.6873H38.5698V43.7852H62.512V47.669L48.895 78.3604H42.8799Z" fill="currentColor"/>
+</g>
+`;
+
+export const calendarMonthIcon = `
+<g>
+<path d="M24.78 3C22.646 3 20.9 4.746 20.9 6.88V10.76H9.26C7.223 10.76 5.38 12.312 5.38 14.543V92.628C5.38 93.695 6.059 94.859 6.835 95.344C7.611 95.926 8.387 96.12 9.26 96.12H90.74C91.613 96.12 92.389 95.926 93.165 95.344C93.941 94.762 94.62 93.695 94.62 92.628V14.543C94.62 12.506 92.971 10.76 90.934 10.76H79.1V6.88C79.1 4.746 77.354 3 75.22 3H71.34C69.206 3 67.46 4.746 67.46 6.88V10.76H32.54V6.88C32.54 4.746 30.794 3 28.66 3H24.78ZM24.78 6.88H28.66V18.52H24.78V6.88ZM71.34 6.88H75.22V18.52H71.34V6.88ZM9.26 14.64H20.9V18.52C20.9 20.654 22.646 22.4 24.78 22.4H28.66C30.794 22.4 32.54 20.654 32.54 18.52V14.64H67.46V18.52C67.46 20.654 69.206 22.4 71.34 22.4H75.22C77.354 22.4 79.1 20.654 79.1 18.52V14.64H90.74V28.22H9.26V14.64ZM9.26 32.1H90.74V92.24H9.26V32.1Z" fill="currentColor" stroke-width="1" stroke="currentColor"/>
+<path d="M51.3075 52.8546C51.3075 54.9201 50.7057 56.6437 49.5022 58.0256C48.2986 59.3926 46.6046 60.3139 44.4204 60.7894V60.9677C47.0356 61.2946 48.9969 62.1118 50.3045 63.4194C51.6121 64.7122 52.2659 66.4358 52.2659 68.5904C52.2659 71.7257 51.1589 74.1477 48.9449 75.8565C46.7309 77.5504 43.5808 78.3974 39.4946 78.3974C35.8838 78.3974 32.8377 77.8105 30.3562 76.6366V71.9783C31.7381 72.6618 33.2018 73.1893 34.7471 73.5608C36.2924 73.9322 37.7784 74.118 39.2048 74.118C41.7309 74.118 43.618 73.6499 44.8661 72.7138C46.1143 71.7777 46.7384 70.3289 46.7384 68.3675C46.7384 66.629 46.0474 65.3511 44.6655 64.5339C43.2836 63.7166 41.1142 63.308 38.1573 63.308H35.3266V59.0509H38.2018C43.4025 59.0509 46.0028 57.2529 46.0028 53.657C46.0028 52.2603 45.5496 51.183 44.6432 50.4252C43.7368 49.6674 42.3995 49.2885 40.6313 49.2885C39.398 49.2885 38.2093 49.4668 37.0651 49.8234C35.921 50.1652 34.5688 50.8412 33.0086 51.8517L30.4454 48.1963C33.4321 45.9972 36.9017 44.8976 40.8542 44.8976C44.138 44.8976 46.7012 45.6034 48.5437 47.015C50.3863 48.4266 51.3075 50.3732 51.3075 52.8546Z" fill="currentColor"/>
+<path d="M69.6199 77.9516H64.382V56.9112C64.382 54.4 64.4415 52.4089 64.5603 50.9378C64.2186 51.2944 63.7951 51.6882 63.2899 52.1191C62.7995 52.55 61.1353 53.9171 58.2972 56.2202L55.6672 52.8992L65.2513 45.3657H69.6199V77.9516Z" fill="currentColor"/>
+</g>
+`;
diff --git a/src/index.ts b/src/index.ts
@@ -1,9 +1,10 @@
 import type moment from "moment";
-import { App, Plugin } from "obsidian";
+import { addIcon, App, Plugin } from "obsidian";
 
 import { getCommands, openPeriodicNote, periodConfigs } from "./commands";
 import { SETTINGS_UPDATED } from "./events";
-import { PeriodicNoteCreateModal } from "./modal";
+import { calendarDayIcon, calendarMonthIcon, calendarWeekIcon } from "./icons";
+import { showFileMenu } from "./modal";
 import {
   DEFAULT_SETTINGS,
   IPeriodicity,
@@ -26,17 +27,21 @@ export default class PeriodicNotesPlugin extends Plugin {
   public settings: ISettings;
   public isInitialLoad: boolean;
 
-  private ribbonEls: HTMLElement[];
+  private ribbonEl: HTMLElement;
 
   async onload(): Promise<void> {
-    this.ribbonEls = [];
+    this.ribbonEl = null;
 
     this.updateSettings = this.updateSettings.bind(this);
 
     await this.loadSettings();
     this.addSettingTab(new PeriodicNotesSettingsTab(this.app, this));
 
     this.app.workspace.onLayoutReady(this.onLayoutReady.bind(this));
+
+    addIcon("calendar-day", calendarDayIcon);
+    addIcon("calendar-week", calendarWeekIcon);
+    addIcon("calendar-month", calendarMonthIcon);
   }
 
   onLayoutReady(): void {
@@ -63,33 +68,27 @@ export default class PeriodicNotesPlugin extends Plugin {
   }
 
   private configureRibbonIcons() {
-    for (const ribbonEl of this.ribbonEls) {
-      ribbonEl.detach();
-    }
+    this.ribbonEl?.detach();
 
     const configuredPeriodicities = ["daily", "weekly", "monthly"].filter(
       (periodicity) => this.settings[periodicity].enabled
     );
 
-    if (configuredPeriodicities.length > 1) {
-      this.ribbonEls.push(
-        this.addRibbonIcon(
-          "calendar-with-checkmark",
-          "Open periodic note",
-          () => new PeriodicNoteCreateModal(this.app, this.settings).open()
-        )
-      );
-    } else if (configuredPeriodicities.length === 1) {
+    if (configuredPeriodicities.length) {
       const periodicity = configuredPeriodicities[0] as IPeriodicity;
       const config = periodConfigs[periodicity];
 
-      this.ribbonEls.push(
-        this.addRibbonIcon(
-          "calendar-with-checkmark",
-          `Open ${config.relativeUnit}'s note`,
-          () => openPeriodicNote(periodicity, window.moment(), false)
-        )
+      this.ribbonEl = this.addRibbonIcon(
+        `calendar-${config.unitOfTime}`,
+        `Open ${config.relativeUnit}`,
+        () => openPeriodicNote(periodicity, window.moment(), false)
       );
+      this.ribbonEl.addEventListener("contextmenu", (ev: MouseEvent) => {
+        showFileMenu(this.app, this.settings, {
+          x: ev.pageX,
+          y: ev.pageY,
+        });
+      });
     }
   }
 

diff --git a/src/modal.ts b/src/modal.ts
@@ -1,8 +1,31 @@
-import { App, Modal } from "obsidian";
+import { App, Menu, Modal, Point } from "obsidian";
 
 import { openPeriodicNote, periodConfigs } from "./commands";
 import type { IPeriodicity, ISettings } from "./settings";
 
+export function showFileMenu(
+  app: App,
+  settings: ISettings,
+  position: Point
+): void {
+  const contextMenu = new Menu(app);
+
+  ["daily", "weekly", "monthly"]
+    .filter((periodicity) => settings[periodicity].enabled)
+    .forEach((periodicity: IPeriodicity) => {
+      const config = periodConfigs[periodicity];
+      contextMenu.addItem((item) =>
+        item
+          .setTitle(`Open ${config.relativeUnit}`)
+          .setIcon(`calendar-${config.unitOfTime}`)
+          .onClick(() => {
+            openPeriodicNote(periodicity, window.moment(), false);
+          })
+      );
+    });
+
+  contextMenu.showAtPosition(position);
+}
 export class PeriodicNoteCreateModal extends Modal {
   constructor(app: App, settings: ISettings) {
     super(app);

diff --git a/yarn.lock b/yarn.lock
@@ -3272,10 +3272,10 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-obsidian-daily-notes-interface@0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/obsidian-daily-notes-interface/-/obsidian-daily-notes-interface-0.8.4.tgz#530cec611878c2d2ae94ba868490df5bf17c8ccf"
-  integrity sha512-REKQtAuIOKDbvNH/th1C1gWmJWCP5tRn9T/mfZGZt4Zncgko7McXK0aSKFtEInipvgbZJ2nScivvyLdiWluSMw==
+obsidian-daily-notes-interface@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/obsidian-daily-notes-interface/-/obsidian-daily-notes-interface-0.9.0.tgz#6a8996917899097c99ed62264a28e231a297d3c6"
+  integrity sha512-vzqOLgjTJi+jeT654eRgyEA2PfqeNI23Fe955VwqnRpAjkarr6qcllpC9cs1XBgpjmRm/XRIqXFdLsO+1z1RGg==
   dependencies:
     obsidian obsidianmd/obsidian-api#master
     tslib "2.1.0"