From 7152c5e51d3543d4f1a39ad71366731973e9be75 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Wed, 6 Oct 2021 22:25:33 +0200
Subject: [PATCH] refactored separate RightDropdownButton from calendar widgets

---
 .../app/widgets/buttons/calendar_menu.js      | 100 ++++++++----------
 .../widgets/buttons/right_dropdown_button.js  |  50 +++++++++
 2 files changed, 93 insertions(+), 57 deletions(-)
 create mode 100644 src/public/app/widgets/buttons/right_dropdown_button.js

diff --git a/src/public/app/widgets/buttons/calendar_menu.js b/src/public/app/widgets/buttons/calendar_menu.js
index 5c2292aa0..10416f27e 100644
--- a/src/public/app/widgets/buttons/calendar_menu.js
+++ b/src/public/app/widgets/buttons/calendar_menu.js
@@ -3,56 +3,42 @@ import utils from "../../services/utils.js";
 import dateNoteService from "../../services/date_notes.js";
 import server from "../../services/server.js";
 import appContext from "../../services/app_context.js";
-import BasicWidget from "../basic_widget.js";
+import RightDropdownButtonWidget from "./right_dropdown_button.js";
 
-const TPL = `
-<div class="dropdown calendar-menu-widget dropright">
-    <style>
-    .calendar-menu-widget {
-        width: 53px;
-        height: 53px;
+const DROPDOWN_TPL = `
+<div class="calendar-menu">
+  <style>
+  .calendar-menu {
+      width: 350px;
+  }
+  </style>
+
+  <div class="calendar-header">
+    <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
+
+    <div class="calendar-header-label" data-calendar-label="month"></div>
+
+    <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
+  </div>
+
+  <div class="calendar-week">
+    <span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
+  </div>
+  <div class="calendar-body" data-calendar-area="month"></div>
+</div>`;
+
+export default class CalendarMenuWidget extends RightDropdownButtonWidget {
+    constructor() {
+        super("bx-calendar", "Calendar", DROPDOWN_TPL);
     }
-    
-    .calendar-menu {
-        width: 350px;
-    }
-    </style>
 
-    <button type="button" data-toggle="dropdown" data-placement="right"
-            aria-haspopup="true" aria-expanded="false" 
-            class="icon-action bx bx-calendar calendar-menu-button" title="Calendar"></button>
-    
-    <div class="dropdown-menu dropdown-menu-right">
-        <div class="calendar-menu">
-          <div class="calendar-header">
-            <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
-        
-            <div class="calendar-header-label" data-calendar-label="month"></div>
-        
-            <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
-          </div>
-        
-          <div class="calendar-week">
-            <span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
-          </div>
-          <div class="calendar-body" data-calendar-area="month"></div>
-        </div>
-    </div>
-</div>
-`;
-
-export default class CalendarMenuWidget extends BasicWidget {
     doRender() {
-        this.$widget = $(TPL);
+        super.doRender();
 
-        const $button = this.$widget.find(".calendar-menu-button");
-        $button.tooltip({ trigger: "hover" });
-        $button.on("click", () => $button.tooltip("hide"));
-
-        this.$month = this.$widget.find('[data-calendar-area="month"]');
-        this.$next = this.$widget.find('[data-calendar-toggle="next"]');
-        this.$previous = this.$widget.find('[data-calendar-toggle="previous"]');
-        this.$label = this.$widget.find('[data-calendar-label="month"]');
+        this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
+        this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
+        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
+        this.$label = this.$dropdownContent.find('[data-calendar-label="month"]');
 
         this.$next.on('click', () => {
             this.date.setMonth(this.date.getMonth() + 1);
@@ -64,32 +50,32 @@ export default class CalendarMenuWidget extends BasicWidget {
             this.createMonth();
         });
 
-        this.$widget.find('.calendar-header').on("click", e => e.stopPropagation());
+        this.$dropdownContent.find('.calendar-header').on("click", e => e.stopPropagation());
 
-        this.$widget.on('click', '.calendar-date', async ev => {
+        this.$dropdownContent.on('click', '.calendar-date', async ev => {
             const date = $(ev.target).closest('.calendar-date').attr('data-calendar-date');
 
             const note = await dateNoteService.getDateNote(date);
 
             if (note) {
                 appContext.tabManager.getActiveContext().setNote(note.noteId);
-                this.$widget.dropdown("hide");
+                this.hideDropdown();
             }
             else {
                 alert("Cannot find day note");
             }
         });
-
-        this.$widget.on('show.bs.dropdown', async () => {
-            await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
-
-            const activeNote = appContext.tabManager.getActiveContextNote();
-
-            this.init(this.$widget, activeNote?.getOwnedLabelValue("dateNote"));
-        });
     }
 
-    init($el, activeDate) {
+    async dropdown() {
+        await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
+
+        const activeNote = appContext.tabManager.getActiveContextNote();
+
+        this.init(activeNote?.getOwnedLabelValue("dateNote"));
+    }
+
+    init(activeDate) {
         // attaching time fixes local timezone handling
         this.activeDate = activeDate ? new Date(activeDate + "T12:00:00") : null;
         this.todaysDate = new Date();
diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.js
new file mode 100644
index 000000000..742e1f720
--- /dev/null
+++ b/src/public/app/widgets/buttons/right_dropdown_button.js
@@ -0,0 +1,50 @@
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="dropdown right-dropdown-widget dropright">
+    <style>
+    .right-dropdown-widget {
+        width: 53px;
+        height: 53px;
+    }
+    </style>
+
+    <button type="button" data-toggle="dropdown" data-placement="right"
+            aria-haspopup="true" aria-expanded="false" 
+            class="icon-action bx right-dropdown-button"></button>
+    
+    <div class="dropdown-menu dropdown-menu-right"></div>
+</div>
+`;
+
+export default class RightDropdownButtonWidget extends BasicWidget {
+    constructor(iconClass, title, dropdownTpl) {
+        super();
+
+        this.iconClass = iconClass;
+        this.title = title;
+        this.dropdownTpl = dropdownTpl;
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+
+        const $button = this.$widget.find(".right-dropdown-button")
+            .addClass(this.iconClass)
+            .attr("title", this.title)
+            .tooltip({ trigger: "hover" })
+            .on("click", () => $button.tooltip("hide"));
+
+        this.$widget.on('show.bs.dropdown', () => this.dropdown());
+
+        this.$dropdownContent = $(this.dropdownTpl);
+        this.$widget.find(".dropdown-menu").append(this.$dropdownContent);
+    }
+
+    // to be overriden
+    dropdown() {}
+
+    hideDropdown() {
+        this.$widget.dropdown("hide");
+    }
+}