calendar widget implementation

src/public/javascripts/services/library_loader.js

@@ -51,6 +51,8 @@ const SORTABLE = {js: ["libraries/sortable.min.js"]};
 
 const KNOCKOUT = {js: ["libraries/knockout.min.js"]};
 
+const CALENDAR_WIDGET = {css: ["stylesheets/calendar.css"]};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => cssLoader.requireCss(cssUrl));
@@ -88,5 +90,6 @@ export default {
     LINK_MAP,
     PRINT_THIS,
     SORTABLE,
-    KNOCKOUT
+    KNOCKOUT,
+    CALENDAR_WIDGET
 }

src/public/javascripts/services/sidebar.js

@@ -60,6 +60,7 @@ class Sidebar {
             import("../widgets/what_links_here.js"),
             import("../widgets/similar_notes.js"),
             import("../widgets/edited_notes.js"),
+            import("../widgets/calendar.js")
         ])).map(m => m.default);
 
         const options = await optionsService.waitForOptions();

src/public/javascripts/widgets/calendar.js

@@ -1,27 +1,34 @@
 import StandardWidget from "./standard_widget.js";
+import libraryLoader from "../services/library_loader.js";
+import utils from "../services/utils.js";
+import dateNoteService from "../services/date_notes.js";
+import treeService from "../services/tree.js";
 
 const TPL = `
-<table class="note-info-table">
+<div class="calendar-widget">
-    <tr>
+  <div class="calendar-header">
-        <th>Note ID:</th>
+    <button class="calendar-btn" data-calendar-toggle="previous">
-        <td colspan="3" class="note-info-note-id"></td>
+      <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    </tr>
+        <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
-    <tr>
+      </svg>
-        <th>Created:</th>
+    </button>
-        <td colspan="3" class="note-info-date-created"></td>
+
-    </tr>
+    <div class="calendar-header__label" data-calendar-label="month">
-    <tr>
+      March 2017
-        <th>Modified:</th>
+    </div>
-        <td colspan="3" class="note-info-date-modified"></td>
+
-    </tr>
+    <button class="calendar-btn" data-calendar-toggle="next">
-    <tr>
+      <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-        <th>Type:</th>
+        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
-        <td class="note-info-type"></td>
+      </svg>
-        
+    </button>
-        <th>MIME:</th>
+  </div>
-        <td class="note-info-mime"></td>
+
-    </tr>
+  <div class="calendar-week">
-</table>
+    <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>
 `;
 
 class CalendarWidget extends StandardWidget {
@@ -33,21 +40,122 @@ class CalendarWidget extends StandardWidget {
     }
 
     async doRenderBody() {
+        await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
+
         this.$body.html(TPL);
 
-        const $noteId = this.$body.find(".note-info-note-id");
+        this.init(this.$body, await this.ctx.note.getLabelValue("dateNote"));
-        const $dateCreated = this.$body.find(".note-info-date-created");
+    }
-        const $dateModified = this.$body.find(".note-info-date-modified");
-        const $type = this.$body.find(".note-info-type");
-        const $mime = this.$body.find(".note-info-mime");
 
-        const note = this.ctx.note;
+    init($el, activeDate) {
+        this.date = new Date();
+        this.todaysDate = new Date();
+        this.activeDate = new Date(Date.parse(activeDate));
 
-        $noteId.text(note.noteId);
+        this.$month = $el.find('[data-calendar-area="month"]');
-        $dateCreated.text(note.dateCreated);
+        this.$next = $el.find('[data-calendar-toggle="next"]');
-        $dateModified.text(note.dateModified);
+        this.$previous = $el.find('[data-calendar-toggle="previous"]');
-        $type.text(note.type);
+
-        $mime.text(note.mime).attr("title", note.mime);
+        this.$next.click(() => {
+            this.clearCalendar();
+            this.date.setMonth(this.date.getMonth() + 1);
+            this.createMonth();
+        });
+
+        this.$previous.click(() => {
+            this.clearCalendar();
+            this.date.setMonth(this.date.getMonth() - 1);
+            this.createMonth();
+        });
+
+        this.$label = $el.find('[data-calendar-label="month"]');
+
+        this.date.setDate(1);
+        this.createMonth();
+
+        this.$body.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) {
+                treeService.activateNote(note.noteId);
+            }
+            else {
+                alert("Cannot find day note");
+            }
+        });
+    }
+
+    createDay(num, day) {
+        const $newDay = $('<div>')
+            .addClass("calendar-date")
+            .attr('data-calendar-date', utils.formatDateISO(this.date));
+        const $date = $('<span>').html(num);
+
+        // if it's the first day of the month
+        if (num === 1) {
+            if (day === 0) {
+                $newDay.css("marginLeft", (6 * 14.28) + '%');
+            } else {
+                $newDay.css("marginLeft", ((day - 1) * 14.28) + '%');
+            }
+        }
+
+        if (this.isEqual(this.date, this.activeDate)) {
+            $newDay.addClass('calendar-date-active');
+        }
+
+        if (this.isEqual(this.date, this.todaysDate)) {
+            $newDay.addClass('calendar-date-today');
+        }
+
+        $newDay.append($date);
+        this.$month.append($newDay);
+    }
+
+    isEqual(a, b) {
+        return a.getFullYear() === b.getFullYear()
+            && a.getMonth() === b.getMonth()
+            && a.getDate() === b.getDate();
+    }
+
+    createMonth() {
+        const currentMonth = this.date.getMonth();
+        while (this.date.getMonth() === currentMonth) {
+            this.createDay(
+                this.date.getDate(),
+                this.date.getDay(),
+                this.date.getFullYear()
+            );
+            this.date.setDate(this.date.getDate() + 1);
+        }
+        // while loop trips over and day is at 30/31, bring it back
+        this.date.setDate(1);
+        this.date.setMonth(this.date.getMonth() - 1);
+
+        this.$label.html(this.monthsAsString(this.date.getMonth()) + ' ' + this.date.getFullYear());
+    }
+
+    monthsAsString(monthIndex) {
+        return [
+            'January',
+            'Febuary',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December'
+        ][monthIndex];
+    }
+
+    clearCalendar() {
+        this.$month.html('');
     }
 }
 

src/public/stylesheets/calendar.css

@@ -0,0 +1,88 @@
+.calendar-widget *, .calendar-widget *:before, .calendar-widget *:after {
+  box-sizing: border-box;
+}
+
+.calendar-widget {
+  margin: 0 auto;
+  overflow: hidden;
+  width: 100%;
+}
+
+.calendar-widget .calendar-btn {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-appearance: button;
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  line-height: normal;
+  min-width: 27px;
+  outline: none;
+  overflow: visible;
+  padding: 0;
+  text-align: center;
+}
+
+.calendar-widget .calendar-header {
+  align-items: center;
+  display: flex;
+  padding: 0 0.5rem 0.5rem 0.5rem;
+}
+
+.calendar-widget .calendar-header__label {
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+}
+
+.calendar-widget .calendar-week {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.calendar-widget .calendar-week span {
+  flex-direction: column;
+  flex: 0 0 14.28%;
+  font-size: 1rem;
+  font-weight: bold;
+  max-width: 14.28%;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.calendar-widget .calendar-body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.calendar-widget .calendar-date {
+  align-items: center;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 14.28%;
+  max-width: 14.28%;
+  padding: 0.6rem 0;
+}
+
+.calendar-widget .calendar-date:hover {
+  color: var(--hover-item-text-color);
+  background-color: var(--hover-item-background-color);
+}
+
+.calendar-widget .calendar-date-active {
+  background-color: var(--active-item-background-color);
+  color: var(--active-item-text-color);
+}
+
+.calendar-widget .calendar-date-today {
+  font-weight: bold;
+}
+
+.calendar-widget .calendar-date:not(.calendar-date-active) {
+  cursor: pointer;
+}