Merge pull request #13 from rudotriton/large-widget

Author: rudotriton

README.md

@@ -1,14 +1,12 @@
-# Scriptable Calendar Widget
-
 <p align="center" >
-    <img width="500" alt="scriptable calendar" src ="./assets/widget.png">
+    <img alt="scriptable calendar" src ="./assets/scriptable-calendar-widget.jpg">
 </p>
 
-- [Scriptable Calendar Widget](#scriptable-calendar-widget)
-  - [Setting Up](#setting-up)
-  - [Settings](#settings)
-  - [Small widgets](#small-widgets)
-  - [Development](#development)
+- [Setting Up](#setting-up)
+- [Customization](#customization)
+- [Small Widgets](#small-widgets)
+- [Large Widgets](#large-widgets)
+- [Development](#development)
 
 ## Setting Up
 
@@ -21,7 +19,7 @@
 - Set the `Script` to be the script you just created and `When Interacting` to `Run Script` which will then launch Calendar app when you tap on the widget.
 - Return to your home screen which should now hopefully show the Scriptable calendar widget.
 
-## Settings
+## Customization
 
 - `debug` - set to `true` to show the widget in Scriptable, `false` to open a
   calendar app.
@@ -40,8 +38,7 @@
 - `locale` - a Unicode locale identifier string, this would change the weekday letters to the specified language.
 - `textColor` - color of all the other text
 - `eventDateTimeOpacity` - opacity value for event times
-- `showEventsView` - to show the events view or not, this would be set through widget parameters in order to set it per widget basis. (check: [Small widgets](#small-widgets))
-- `showCalendarView` - to show the calendar view or not, also set through widget parameters.
+- `widgetType` - for small widgets it determines which side to show. This would be set through widget parameters in order to set it per widget basis, rather than setting here and having all small widgets be the same type. (check: [Small widgets](#small-widgets))
 - `showAllDayEvents` - would either show or hide all day events.
 - `showCalendarBullet` - would show a `●` in front of the event name which matches the calendar color from which the event originates.
 - `startWeekOnSunday` - would start the week either on a Sunday or a Monday.
@@ -51,19 +48,19 @@
 - `showPrevMonth` - would show days from the previous month if they fit into the calendar view.
 - `showNextMonth` - would show days from the next month if they fit into the calendar view.
 
-## Small widgets
-
-<p align="center" >
-    <img width="350" alt="scriptable calendar" src ="./assets/small-widgets.png">
-</p>
+## Small Widgets
 
-The script also supports small widgets or a medium widget with just one part. In this case the widget parameter (long press on the widget -> edit widget -> parameter) should be set to something like:
+The script also supports small widgets in which case the widget parameter (long press on the widget -> edit widget -> parameter) should be set to something like:
 
 - `{ "bg": "top-left.jpg", "view": "events" }`
 - `{ "bg": "top-right.jpg", "view": "cal" }`
 
 Where `"events"` specifies the events view and `"cal"` the calendar view. (Setting the background is not necessary).
 
+## Large Widgets
+
+The script should detect on its own that it is running in a large widget and will adjust accordingly.
+
 ## Development
 
 - `npm install` - install dev dependencies

assets/scriptable-calendar-widget.jpg

@@ -1,9 +1,9 @@
 // src/settings.ts
-var params = JSON.parse(args.widgetParameter) || { bg: "transparent.jpg" };
+var params = JSON.parse(args.widgetParameter) || {};
 var settings = {
   debug: false,
   calendarApp: "calshow",
-  backgroundImage: params.bg,
+  backgroundImage: params.bg ? params.bg : "transparent.jpg",
   widgetBackgroundColor: "#000000",
   todayTextColor: "#000000",
   markToday: true,
@@ -17,8 +17,7 @@ var settings = {
   locale: "en-US",
   textColor: "#ffffff",
   eventDateTimeOpacity: 0.7,
-  showEventsView: params.view ? params.view === "events" : true,
-  showCalendarView: params.view ? params.view === "cal" : true,
+  widgetType: params.view ? params.view : "cal",
   showAllDayEvents: true,
   showCalendarBullet: true,
   startWeekOnSunday: false,
@@ -430,7 +429,7 @@ var getSuffix_default = getSuffix;
 function formatEvent(
   stack,
   event,
-  { opacity, textColor, showCalendarBullet, showCompleteTitle }
+  { eventDateTimeOpacity, textColor, showCalendarBullet, showCompleteTitle }
 ) {
   const eventLine = stack.addStack();
   if (showCalendarBullet) {
@@ -460,18 +459,56 @@ function formatEvent(
   }
   addWidgetTextLine_default(time, stack, {
     textColor,
-    opacity,
+    opacity: eventDateTimeOpacity,
     font: Font.regularSystemFont(14),
   });
 }
 var formatEvent_default = formatEvent;
 
 // src/buildEventsView.ts
-async function buildEventsView(date, stack, settings2) {
+async function buildEventsView(
+  events,
+  stack,
+  settings2,
+  {
+    horizontalAlign = "left",
+    verticalAlign = "center",
+    eventLimit = 3,
+    eventSpacer = 8,
+    showMsg = true,
+  } = {}
+) {
   const leftStack = stack.addStack();
-  stack.addSpacer();
+  if (horizontalAlign === "left") {
+    stack.addSpacer();
+  }
   leftStack.layoutVertically();
-  leftStack.addSpacer();
+  if (verticalAlign === "bottom" || verticalAlign === "center") {
+    leftStack.addSpacer();
+  }
+  if (events.length !== 0) {
+    const numEvents = events.length > eventLimit ? eventLimit : events.length;
+    for (let i = 0; i < numEvents; i += 1) {
+      formatEvent_default(leftStack, events[i], settings2);
+      if (i < numEvents - 1) {
+        leftStack.addSpacer(eventSpacer);
+      }
+    }
+  } else if (showMsg) {
+    addWidgetTextLine_default(`No more events.`, leftStack, {
+      textColor: settings2.textColor,
+      opacity: settings2.eventDateTimeOpacity,
+      font: Font.regularSystemFont(15),
+    });
+  }
+  if (verticalAlign === "top" || verticalAlign === "center") {
+    leftStack.addSpacer();
+  }
+}
+var buildEventsView_default = buildEventsView;
+
+// src/getEvents.ts
+async function getEvents(date, settings2) {
   let events = [];
   if (settings2.showEventsOnlyForToday) {
     events = await CalendarEvent.today([]);
@@ -493,34 +530,74 @@ async function buildEventsView(date, stack, settings2) {
       futureEvents.push(event);
     }
   }
-  if (futureEvents.length !== 0) {
-    const numEvents = futureEvents.length > 3 ? 3 : futureEvents.length;
-    for (let i = 0; i < numEvents; i += 1) {
-      formatEvent_default(leftStack, futureEvents[i], settings2);
-      if (i < numEvents - 1) {
-        leftStack.addSpacer(8);
+  return futureEvents;
+}
+var getEvents_default = getEvents;
+
+// src/buildLargeWidget.ts
+async function buildLargeWidget(date, events, stack, settings2) {
+  const leftSide = stack.addStack();
+  stack.addSpacer();
+  const rightSide = stack.addStack();
+  leftSide.layoutVertically();
+  rightSide.layoutVertically();
+  rightSide.addSpacer();
+  rightSide.centerAlignContent();
+  const leftSideEvents = events.slice(0, 8);
+  const rightSideEvents = events.slice(8, 12);
+  await buildEventsView_default(leftSideEvents, leftSide, settings2, {
+    eventLimit: 8,
+    eventSpacer: 6,
+  });
+  await buildCalendarView_default(date, rightSide, settings2);
+  rightSide.addSpacer();
+  await buildEventsView_default(rightSideEvents, rightSide, settings2, {
+    eventLimit: 4,
+    eventSpacer: 6,
+    verticalAlign: "top",
+    showMsg: false,
+  });
+}
+var buildLargeWidget_default = buildLargeWidget;
+
+// src/buildWidget.ts
+async function buildWidget(settings2) {
+  const widget = new ListWidget();
+  widget.backgroundColor = new Color(settings2.widgetBackgroundColor, 1);
+  setWidgetBackground_default(widget, settings2.backgroundImage);
+  widget.setPadding(16, 16, 16, 16);
+  const today = new Date();
+  const globalStack = widget.addStack();
+  const events = await getEvents_default(today, settings2);
+  switch (config.widgetFamily) {
+    case "small":
+      if (settings2.widgetType === "events") {
+        await buildEventsView_default(events, globalStack, settings2);
+      } else {
+        await buildCalendarView_default(today, globalStack, settings2);
       }
-    }
-  } else {
-    addWidgetTextLine_default(`No more events.`, leftStack, {
-      textColor: settings2.textColor,
-      opacity: settings2.eventDateTimeOpacity,
-      font: Font.regularSystemFont(15),
-    });
+      break;
+    case "large":
+      await buildLargeWidget_default(today, events, globalStack, settings2);
+      break;
+    default:
+      await buildEventsView_default(events, globalStack, settings2);
+      await buildCalendarView_default(today, globalStack, settings2);
+      break;
   }
-  leftStack.addSpacer();
+  return widget;
 }
-var buildEventsView_default = buildEventsView;
+var buildWidget_default = buildWidget;
 
 // src/index.ts
 async function main() {
   if (config.runsInWidget) {
-    const widget = await createWidget();
+    const widget = await buildWidget_default(settings_default);
     Script.setWidget(widget);
     Script.complete();
   } else if (settings_default.debug) {
     Script.complete();
-    const widget = await createWidget();
+    const widget = await buildWidget_default(settings_default);
     await widget.presentMedium();
   } else {
     const appleDate = new Date("2001/01/01");
@@ -532,20 +609,5 @@ async function main() {
     Script.complete();
   }
 }
-async function createWidget() {
-  const widget = new ListWidget();
-  widget.backgroundColor = new Color(settings_default.widgetBackgroundColor, 1);
-  setWidgetBackground_default(widget, settings_default.backgroundImage);
-  widget.setPadding(16, 16, 16, 16);
-  const today = new Date();
-  const globalStack = widget.addStack();
-  if (settings_default.showEventsView) {
-    await buildEventsView_default(today, globalStack, settings_default);
-  }
-  if (settings_default.showCalendarView) {
-    await buildCalendarView_default(today, globalStack, settings_default);
-  }
-  return widget;
-}
 
 await main();

assets/small-widgets.png

@@ -8,65 +8,57 @@ import { Settings } from "./settings";
  * @param  {WidgetStack} stack - onto which the events view is built
  */
 async function buildEventsView(
-  date: Date,
+  events: CalendarEvent[],
   stack: WidgetStack,
-  settings: Settings
+  settings: Settings,
+  {
+    horizontalAlign = "left",
+    verticalAlign = "center",
+    eventLimit = 3,
+    eventSpacer = 8,
+    showMsg = true,
+  }: {
+    horizontalAlign?: string;
+    verticalAlign?: string;
+    eventLimit?: number;
+    eventSpacer?: number;
+    showMsg?: boolean;
+  } = {}
 ): Promise<void> {
   const leftStack = stack.addStack();
-  // push event view to the left
-  stack.addSpacer();
+  // add, spacer to the right side, this pushes event view to the left
+  if (horizontalAlign === "left") {
+    stack.addSpacer();
+  }
 
   leftStack.layoutVertically();
   // center the whole left part of the widget
-  leftStack.addSpacer();
-
-  let events: CalendarEvent[] = [];
-  if (settings.showEventsOnlyForToday) {
-    events = await CalendarEvent.today([]);
-  } else {
-    const dateLimit = new Date();
-    dateLimit.setDate(dateLimit.getDate() + settings.nextNumOfDays);
-    events = await CalendarEvent.between(date, dateLimit);
-  }
-
-  const futureEvents: CalendarEvent[] = [];
-  // if we show events for the whole week, then we need to filter allDay events
-  // to not show past allDay events
-  // if allDayEvent's start date is later than a day ago from now then show it
-  // TODO clear up this logic
-  for (const event of events) {
-    if (
-      (settings.showAllDayEvents &&
-        event.isAllDay &&
-        event.startDate.getTime() >
-          new Date(new Date().setDate(new Date().getDate() - 1)).getTime()) ||
-      (event.endDate.getTime() > date.getTime() &&
-        !event.title.startsWith("Canceled:"))
-    ) {
-      futureEvents.push(event);
-    }
+  if (verticalAlign === "bottom" || verticalAlign === "center") {
+    leftStack.addSpacer();
   }
 
   // if we have events today; else if we don't
-  if (futureEvents.length !== 0) {
+  if (events.length !== 0) {
     // show the next 3 events at most
-    const numEvents = futureEvents.length > 3 ? 3 : futureEvents.length;
+    const numEvents = events.length > eventLimit ? eventLimit : events.length;
     for (let i = 0; i < numEvents; i += 1) {
-      formatEvent(leftStack, futureEvents[i], settings);
+      formatEvent(leftStack, events[i], settings);
       // don't add a spacer after the last event
       if (i < numEvents - 1) {
-        leftStack.addSpacer(8);
+        leftStack.addSpacer(eventSpacer);
       }
     }
-  } else {
+  } else if (showMsg) {
     addWidgetTextLine(`No more events.`, leftStack, {
       textColor: settings.textColor,
       opacity: settings.eventDateTimeOpacity,
       font: Font.regularSystemFont(15),
     });
   }
-  // for centering
-  leftStack.addSpacer();
+  // for centering, pushes up from the bottom
+  if (verticalAlign === "top" || verticalAlign === "center") {
+    leftStack.addSpacer();
+  }
 }
 
 export default buildEventsView;