bookmark folder

src/public/app/widgets/buttons/bookmark_folder.js

@@ -0,0 +1,82 @@
+import RightDropdownButtonWidget from "./right_dropdown_button.js";
+import linkService from "../../services/link.js";
+
+const DROPDOWN_TPL = `
+<div class="bookmark-folder-widget">
+    <style>
+        .bookmark-folder-widget {
+            min-width: 200px;
+            max-height: 500px;
+            padding: 10px 20px 10px 20px;
+            font-size: 110%;
+            overflow: auto;
+        }
+        
+        .bookmark-folder-widget ul {
+            padding: 0;
+            list-style-type: none;
+        }
+        
+        .bookmark-folder-widget .note-link {
+            display: block;
+            padding: 5px 10px 5px 5px;
+        }
+        
+        .bookmark-folder-widget .note-link:hover {
+            background-color: var(--accented-background-color);
+            text-decoration: none;
+        }
+        
+        .dropdown-menu .bookmark-folder-widget a:hover {
+            text-decoration: none;
+            background: transparent !important;
+        }
+        
+        .bookmark-folder-widget li .note-link {
+            padding-left: 35px;
+        }
+    </style>
+    
+    <div class="parent-note"></div>
+    
+    <ul class="children-notes"></ul>
+</div>`;
+
+export default class BookmarkFolderWidget extends RightDropdownButtonWidget {
+    constructor(note) {
+        super(note.getIcon(), note.title, DROPDOWN_TPL);
+
+        this.note = note;
+    }
+
+    doRender() {
+        super.doRender();
+
+        this.$parentNote = this.$dropdownContent.find('.parent-note');
+        this.$childrenNotes = this.$dropdownContent.find('.children-notes');
+
+        // this.$dropdownContent.on("click", "a", () => this.hideDropdown());
+    }
+
+    async dropdownShown() {
+        this.$parentNote.empty();
+        this.$childrenNotes.empty();
+
+        this.$parentNote.append(
+            (await linkService.createNoteLink(this.note.noteId, {showTooltip: false}))
+                .addClass("note-link")
+        );
+
+        for (const childNote of await this.note.getChildNotes()) {
+            this.$childrenNotes.append(
+                $("<li>")
+                    .append(
+                        (await linkService.createNoteLink(childNote.noteId, {showTooltip: false}))
+                            .addClass("note-link")
+                    )
+            );
+        }
+    }
+
+    refreshIcon() {}
+}

src/public/app/widgets/buttons/calendar.js

@@ -6,9 +6,9 @@ import appContext from "../../services/app_context.js";
 import RightDropdownButtonWidget from "./right_dropdown_button.js";
 
 const DROPDOWN_TPL = `
-<div class="calendar-menu">
+<div class="calendar-dropdown-widget">
   <style>
-  .calendar-menu {
+  .calendar-dropdown-widget {
       width: 350px;
   }
   </style>
@@ -27,7 +27,7 @@ const DROPDOWN_TPL = `
   <div class="calendar-body" data-calendar-area="month"></div>
 </div>`;
 
-export default class CalendarMenuWidget extends RightDropdownButtonWidget {
+export default class CalendarWidget extends RightDropdownButtonWidget {
     constructor() {
         super("bx-calendar", "Calendar", DROPDOWN_TPL);
     }
@@ -67,7 +67,7 @@ export default class CalendarMenuWidget extends RightDropdownButtonWidget {
         });
     }
 
-    async dropdown() {
+    async dropdownShown() {
         await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
 
         const activeNote = appContext.tabManager.getActiveContextNote();

src/public/app/widgets/buttons/right_dropdown_button.js

@@ -28,6 +28,7 @@ export default class RightDropdownButtonWidget extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.$dropdownMenu = this.$widget.find(".dropdown-menu");
 
         const $button = this.$widget.find(".right-dropdown-button")
             .addClass(this.iconClass)
@@ -35,16 +36,26 @@ export default class RightDropdownButtonWidget extends BasicWidget {
             .tooltip({ trigger: "hover" })
             .on("click", () => $button.tooltip("hide"));
 
-        this.$widget.on('show.bs.dropdown', () => this.dropdown());
+        this.$widget.on('show.bs.dropdown', async () => {
+            await this.dropdownShown();
+
+            const rect = this.$dropdownMenu[0].getBoundingClientRect();
+            const pixelsToBottom = $(window).height() - rect.bottom;
+
+            if (pixelsToBottom < 0) {
+                this.$dropdownMenu.css("top", pixelsToBottom);
+            }
+        });
 
         this.$dropdownContent = $(this.dropdownTpl);
         this.$widget.find(".dropdown-menu").append(this.$dropdownContent);
     }
 
     // to be overriden
-    dropdown() {}
+    async dropdownShow() {}
 
     hideDropdown() {
         this.$widget.dropdown("hide");
+        this.$dropdownMenu.removeClass("show");
     }
 }