Initial move off of click listeners on every time block. Now one list…

dev-app/app.html

@@ -24,7 +24,7 @@
                         state="${link.isActive ? 'active' : ''}"
                     >
                     </c-nav-horizontal-item>
-                    <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.21"></c-nav-horizontal-item>
+                    <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.22"></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>
         </l-sidebar>

dev-app/routes/components/timeline/properties/index.ts

@@ -121,10 +121,10 @@ export class TimelineProperties {
             type: 'boolean',
         },
         {
-            default: '() => false',
-            description: 'Callback to determine if a click on the timeline should prevent adding a new entry.',
+            default: 'null',
+            description: 'Callback to determine if a click on the timeline should prevent adding a new entry. Alternatively can just be a boolean.',
             name: 'preventCreate',
-            type: '(isoString: string) => boolean',
+            type: '(isoString: string) => boolean || boolean',
         },
         {
             default: 'null',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"

src/components/timeline/c-time-entry/c-time-entry.ts

@@ -23,6 +23,11 @@ export class CTimeEntry {
     constructor(public element: Element, private vPopoverService: CPopoverService) {}
 
     public openPopover($event) {
+        if ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+        }
+
         if (!this.item) {
             return;
         }

src/components/timeline/c-timeline-block/c-timeline-block.html

@@ -6,10 +6,8 @@
 <template>
 	<require from="./c-timeline-block.css"></require>
 
-    <div class="${styles.timeBlock}" click.trigger="togglePopoverFunction($event)">
+    <div class="${styles.timeBlock}">
         <span if.bind="time" class="${styles.time}">${time}</span>
         <slot></slot>
-
-        <c-time-entry if.bind="newItem" item.bind="newItem" view-model.ref="placeholderEntry"></c-time-entry>
     </div>
 </template>

src/components/timeline/c-timeline-block/c-timeline-block.ts

@@ -4,66 +4,12 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 */
 
 import {bindable} from 'aurelia-framework';
-import * as moment from 'moment';
 
-import {authState} from '../../../decorators/auth-state';
 import * as styles from './c-timeline-block.css.json';
 
-@authState
 export class CTimelineBlock {
     @bindable
     public time: string;
-    @bindable
-    public isoTime: string;
-    @bindable
-    public addEntryOffset: ({isoTime, mouseOffset}: {isoTime: string; mouseOffset: number}) => [string, number];
-    @bindable
-    public newEntryViewModel: string;
 
     public styles = styles;
-
-    private newItem: any = null;
-    private placeholderEntry;
-    @bindable
-    public preventCreate: ({isoTime}?: {isoTime: string}) => boolean = _isoTime => false
-
-    public togglePopoverFunction($event) {
-        if (!this.isoTime || this.preventCreate({isoTime: this.isoTime}) || !_.isFunction(this.addEntryOffset)) {
-            return;
-        }
-
-        if (!this.newItem) {
-            const mouseOffset = $event && $event.layerY ? $event.layerY : 0;
-            let top;
-            let isoTime;
-
-            [isoTime, top] = this.addEntryOffset({isoTime: this.isoTime, mouseOffset});
-
-            if (!_.isNumber(top)) {
-                top = mouseOffset;
-            }
-
-            if (!moment(isoTime).isValid()) {
-                isoTime = this.isoTime;
-            }
-
-            this.newItem = {
-                isoTime,
-                top,
-                blockIsoTime: this.isoTime,
-                color: 'secondary',
-                height: 50,
-                placeholder: true,
-                title: `${moment(isoTime).format('HH:mm')} (New Item)`,
-            };
-
-            if (this.newEntryViewModel) {
-                this.newItem.contentViewModel = this.newEntryViewModel;
-            }
-        }
-
-        _.defer(() => {
-            this.placeholderEntry.openPopover();
-        });
-    }
 }

src/components/timeline/c-timeline-container/c-timeline-container.ts

@@ -3,13 +3,12 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 
 import {generateRandom} from '../../../helpers/generate-random';
 
 import * as styles from './c-timeline-container.css.json';
 
-@containerless
 export class CTimelineContainer {
     @bindable
     public currentTimeTop = -1;

src/components/timeline/c-timeline/c-timeline-interfaces.ts

@@ -27,6 +27,8 @@ export interface ITimeEntry extends ITimeEntryBasic {
     contentViewModel?: string;
     endTime: string;
     height: number;
+    isoTime?: string;
+    placeholder?: boolean;
     rightCalc?: number;
     shiftIcons?: boolean;
     startTime: string;
@@ -35,18 +37,18 @@ export interface ITimeEntry extends ITimeEntryBasic {
 }
 
 export interface ITimeBlock {
-    addNewMiddle?: boolean;
-    addNewTop?: boolean;
     isoTime?: string;
-    showTime?: boolean;
     time: string;
+    newItem?: any;
 }
 
 export interface ITimeDay {
     currentTimeLine?: number;
     blocks: ITimeBlock[];
     date: string;
     entries: ITimeEntry[];
+    newItem?: any;
     parsedDate?: string;
+    placeholderEntry?: any;
     today?: boolean;
 }

src/components/timeline/c-timeline/c-timeline.html

@@ -13,14 +13,11 @@
                 current-time-top.bind="currentTimeLine"
                 loading-top.bind="isLoadingTop"
                 loading-bottom.bind="isLoadingBottom"
+                click.trigger="togglePopover($event)"
             >
                 <c-timeline-block
                     repeat.for="block of blocks"
                     time.bind="block.time"
-                    iso-time.bind="block.isoTime"
-                    add-entry-offset.call="calculatePlaceholder(isoTime, mouseOffset)"
-                    prevent-create.call="checkPreventAdd(isoTime)"
-                    new-entry-view-model.bind="newEntryViewModel"
                 >
                 </c-timeline-block>
                 <c-time-entry
@@ -29,27 +26,37 @@
                     class="timeline-day"
                 >
                 </c-time-entry>
+                <c-time-entry
+                    if.bind="newItem"
+                    item.bind="newItem"
+                    view-model.ref="placeholderEntry"
+                >
+                </c-time-entry>
             </c-timeline-container>
             <c-timeline-week-container if.bind="timeView === 'week' || timeView === 'three-day'" days.bind="displayDays" day-click.call="dayClick(date)">
                 <div slot="hours">
                     <c-timeline-container>
-                        <c-timeline-block repeat.for="block of blocks" time.one-time="block.time">
+                        <c-timeline-block repeat.for="block of blocks" time.one-time="block.time"></c-timeline-block>
                     </c-timeline-container>
                 </div>
-                <c-timeline-container repeat.for="day of displayDays" current-time-top.bind="day.currentTimeLine">
-                    <c-timeline-block
-                        repeat.for="block of day.blocks & oneTime"
-                        iso-time.bind="block.isoTime"
-                        add-entry-offset.call="calculatePlaceholder(isoTime, mouseOffset)"
-                        prevent-create.call="checkPreventAdd(isoTime)"
-                        new-entry-view-model.bind="newEntryViewModel"
-                    >
-                    </c-timeline-block>
+                <c-timeline-container
+                    repeat.for="day of displayDays"
+                    current-time-top.bind="day.currentTimeLine"
+                    click.delegate="togglePopover($event, day)"
+                >
+                    <c-timeline-block repeat.for="block of day.blocks & oneTime"></c-timeline-block>
                     <c-time-entry
                         repeat.for="entry of day.entries"
                         item.bind="entry"
                         class="timeline-week"
                     >
+                    </c-time-entry>
+                    <c-time-entry
+                        if.bind="day.newItem"
+                        item.bind="day.newItem"
+                        view-model.ref="day.placeholderEntry"
+                    >
+                    </c-time-entry>
                 </c-timeline-container>
             </c-timeline-week-container>
             <div if.bind="timeView === 'month'">