time_table 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53c43c1b433977261aea620158c5a41cec72fae94382a262a785c885278dd615
-  data.tar.gz: f0a8202bb60e949d9fcc9b3df342f2c6acce9a6f09ecff027e8361f3d9b1ca62
+  metadata.gz: a3097f33273401dcac75395ee2e5c7c6b4d40ed596e91319f7f3c90a3d63830e
+  data.tar.gz: 2213ac0acbaa38a91630123f51a2f76d3f4fa2299522dcf61c2541922dd5947b
 SHA512:
-  metadata.gz: 77475f095f8331be85088b3f799d40cb0564d13d073651182ee217d3dfe7ba071702d4f53462b81c0893de9175599752c19377cb68438d540141c5cb175275ec
-  data.tar.gz: d80865687adce695d6785b7b8f458b7dd39b51db648ae5f73cb08d7c48d0e55c122c34486e5beea952e2b617bfd39312c71d5db4d3865821650ee50e1b7392d3
+  metadata.gz: '095c1a63e9718f31d11edc1e9682fc68783a85fa17660762bfb6a168f51db480dc5a1838bb452a788f516d9c46b1edd6ca91dde35575bc1b4f1373ece86556b3'
+  data.tar.gz: 2750d32a23642329bb5b6211baa1db78cd547bc36e3fccd223b6e7ae959afcb3aad0a9cfd731c4a73816e3d1db00d613ffda8947e2e33d2e4ba3fa525a95c6e1

data/app/assets/javascript/time_table/controllers/time_table_controller.js

@@ -1,21 +1,29 @@
 import { Controller } from "@hotwired/stimulus"
+import ScrollFrame from "../helpers/scroll_frame.js"
+import TimeKeeper from "../helpers/time_keeper.js"
+import DragEventState from "../helpers/drag_event_state.js"
+import TimeTableRenderer from "../helpers/time_table_renderer.js"
 
-// Connects to data-controller="dropdown"
 export default class extends Controller {
-  static targets = ["canvas", "eventsList", "event", "eventName", "eventTime"]
+  static targets = ["canvas", "eventsList", "event", "eventName", "eventTime", "timestamp"]
 
   connect() {
-    this.startTime = new Date(this.element.dataset.timetableStartTime);
-    this.endTime = new Date(this.element.dataset.timetableEndTime);
-    this.duration = (this.endTime - this.startTime) / 1000;
-    this.canvasArea = this.element.getBoundingClientRect();
-    this.clipSize = this.element.dataset.timetableClipSize;
-    this.scrollHeight = this.element.scrollHeight - 20; // -20 because of the padding
-    this.dragging = false;
-    this.dragEvent = {}
+    this.timeKeeper = new TimeKeeper({
+      start: new Date(this.element.dataset.timetableStartTime),
+      end: new Date(this.element.dataset.timetableEndTime),
+      scope: this.element.dataset.timetableScope,
+      scale: this.element.dataset.timetableScale,
+      clip: this.element.dataset.timetableClipSize
+    });
+
+    let topPadding = parseInt(window.getComputedStyle(this.element).paddingTop, 10);
+
+    this.scrollFrame = new ScrollFrame(this.element, { origin: topPadding });
+
+    this.dragEvent = null;
 
     this.eventTargets.forEach((event) => {
-      this.#setSpecialClasses(event);
+      TimeTableRenderer.setSpecialClasses(event);
     });
   }
 
@@ -23,180 +31,141 @@ export default class extends Controller {
     event.preventDefault();
     event.stopPropagation();
 
-    this.dragging = true;
+    this.dragEvent = new DragEventState({
+      type: event.params.dragEvent,
+      scrollFrame: this.scrollFrame,
+      timeKeeper: this.timeKeeper,
+      target: event.currentTarget.closest(".event")
+    });
 
-    this.dragEvent.type = event.params.dragEvent;
-    this.dragEvent.originY = this.dragEvent.originY = this.#relativeCursorPosition(event).y;
-    this.dragEvent.originYTime = this.#timeAtPosition(this.dragEvent.originY);
-    this.dragEvent.currentY = this.dragEvent.originY;
-    this.dragEvent.currentYTime = this.dragEvent.originYTime;
+    this.dragEvent.captureOriginSnapshot(event);
 
-    this.#setDragEventTarget(event.currentTarget.closest(".event"));
     this.#setDragEventListeners();
   }
 
-  stopDragEvent(event) {
-    event.preventDefault();
-    event.stopPropagation();
+  drag(event) {
+    if(this.dragEvent) {
 
-    this.dragging = false;
-    this.dragEvent = {};
+      this.dragEvent.captureSnapshot(event);
 
-    this.#removeDragEventListeners();
+      // Calls dragResize, dragMove, dragCreate, etc.
+      this.#invokeDragMethodFor(this.dragEvent.type); 
+
+      if(this.dragEvent.type != undefined && this.dragEvent.type != "rescale") {
+        this.scrollFrame.checkForScroll(this.dragEvent.current.position, this.handleScroll.bind(this));
+      }
+    }
   }
 
-  drag(event) {
-    if(this.dragging) {
-      this.dragEvent.currentY = this.#relativeCursorPosition(event).y; 
-      this.dragEvent.currentYTime = this.#timeAtPosition(this.dragEvent.currentY);
+  stopDragEvent(event) {
+    event.preventDefault();
 
-      this.#invokeDragMethodFor(this.dragEvent.type); // calls dragCreate, dragMove or dragResize
+    this.dragEvent = null;
 
-      if(event.clientY > this.element.getBoundingClientRect().bottom && this.element.scrollTop < this.scrollHeight) {
-        this.element.scrollTop += 10;
-      }
-      if(event.clientY < this.element.getBoundingClientRect().top && this.element.scrollTop > 0) {
-        this.element.scrollTop -= 10;
-      }
-    }
+    this.scrollFrame.stopScrolling();
+    this.#removeDragEventListeners();
   }
 
+
   //////////////////
   // Drag Methods //
   //////////////////
 
-
   dragCreate(event) {
-    let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentYTime.clipped, this.dragEvent.originYTime.clipped);
-    let eventDiv = this.#createEventDiv(timeBoundaries.start, timeBoundaries.end);
-    this.#setDragEventTarget(eventDiv);
-    this.dragEvent.type = "resize";
+    let timeBoundaries = this.timeKeeper.timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.time.clipped);
+    let eventElement = TimeTableRenderer.createEventElement(timeBoundaries);
+
+    this.eventsListTarget.appendChild(eventElement);
+
+    this.dragEvent.shift({ type: "resize", target: eventElement });
+    this.handleOverlap(eventElement);
   }
 
   dragResize(event) {
-    let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentYTime.clipped, this.dragEvent.originEventStartTime.real);
-    this.#updateEventDiv(this.dragEvent.target, timeBoundaries.start, timeBoundaries.end);
-  }
+    let timeBoundaries = this.timeKeeper.timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.target.startTime.real);
+    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.handleOverlap(this.dragEvent.target);
+  } 
 
   dragMove(event) {
-    let timeChange = (this.dragEvent.currentYTime.clipped - this.dragEvent.originYTime.clipped);
-
-    let startTime = new Date(this.dragEvent.originEventStartTime.real.getTime() + timeChange);
-    let endTime = new Date(this.dragEvent.originEventEndTime.real.getTime() + timeChange);
+    let timeChange = (this.dragEvent.current.time.clipped - this.dragEvent.origin.time.clipped);
+    let updatedStartTime = new Date(this.dragEvent.origin.target.startTime.real.getTime() + timeChange)
+    let updatedEndTime = new Date(this.dragEvent.origin.target.endTime.real.getTime() + timeChange);
 
-    this.#updateEventDiv(this.dragEvent.target, startTime, endTime);
-  }
-
-  /////////////////////
-  // Time & Position //
-  /////////////////////
-
-  #relativeCursorPosition(event) {
-    let canvasArea = this.element.getBoundingClientRect();
-    return { 
-      x: event.clientX - canvasArea.left,
-      y: (event.clientY - canvasArea.top - 20) + this.element.scrollTop 
-    };
-  }
+    let timeBoundaries = this.timeKeeper.timeBoundaries(updatedStartTime, updatedEndTime);
 
-  #relativeElementPosition(element) {
-    let canvasArea = this.element.getBoundingClientRect();
-    let rect = element.getBoundingClientRect();
-    return { 
-      x: rect.left - canvasArea.left,
-      y: (rect.top - canvasArea.top - 20) + this.element.scrollTop 
-    };
+    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.handleOverlap(this.dragEvent.target);
   }
 
-  #timeBoundaries(timeA, timeB) {
-    let startTime = new Date(Math.min(timeA, timeB));
-    let endTime = new Date(Math.max(timeA, timeB));
+  dragRescale(event) {
+    let delta = this.dragEvent.previous.position.scroll.y - this.dragEvent.current.position.scroll.y;
+    let newScale = Math.max(30, Math.min(300, this.timeKeeper.scale - (delta)));
+    this.element.style.setProperty("--hour-scale", newScale);
+    let scaleChange = newScale / this.timeKeeper.scale;
 
-    if (endTime - startTime < this.clipSize * 60 * 1000) {
-      endTime = new Date(startTime.getTime() + (this.clipSize * 60 * 1000));
-    }
-
-    return { start: startTime, end: endTime };
-  }
+    this.timeKeeper.rescale(newScale);
 
-  #timeAtPosition(y, roundUp = false) {
-    let realSecond = ((y / this.scrollHeight) * this.duration) + 1;
-    let clippedSecond = (Math.floor((realSecond / 60).toFixed(0) / this.clipSize) * this.clipSize) * 60;
-
-    // No need for seconds and minutes, should convert to one unit only, probably seconds or milliseconds
-    return {
-      real: new Date(this.startTime.getTime() + (realSecond * 1000)), // For some reason 1 second is added to real each time you change it.
-      clipped: new Date(this.startTime.getTime() + (clippedSecond * 1000)),
-    }
-  }
-  
-  #positionOfTime(time) {
-    let positionInDuration = (time - this.startTime) / (this.endTime - this.startTime + 1000);
-    // console.log(positionInDuration);
-    // console.log(positionInDuration * 1440)
-    return positionInDuration * 1440;
+    this.eventTargets.forEach((event) => {
+      event.style.setProperty("height", `${event.offsetHeight * (scaleChange)}px`);
+      event.style.setProperty("top", `${event.offsetTop * (scaleChange)}px`);
+      TimeTableRenderer.setSpecialClasses(event);
+    });
   }
 
-  /////////////////////////////////////////
-  // Event Methods                       //
-  // (eventually switch to use template) //
-  /////////////////////////////////////////
-
-  #createEventDiv(startTime, endTime){
-    const eventDiv = document.createElement("div");
+  handleOverlap(element) {
+    let eventTop = element.offsetTop;
+    let eventBottom = eventTop + element.offsetHeight;
 
-    eventDiv.classList.add("event");
-    eventDiv.setAttribute("data-timetable-target", "event");
-    eventDiv.setAttribute("data-action", "mousedown->time-table#startDragEvent");
-    eventDiv.setAttribute("data-time-table-drag-event-param", "move");
-
-    eventDiv.innerHTML = `
-      <div class="event-name"><span style="font-weight: 400; color: gray;">(No Title)</span></div>
-      <div class="event-time" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="resize">
-        ${ this.#durationString(startTime, endTime) }
-      </div>
-    `;
-
-    this.#updateEventDiv(eventDiv, startTime, endTime);
-    this.eventsListTarget.appendChild(eventDiv);
-
-    return eventDiv;
+    this.eventTargets.forEach((event) => {
+      if(event != element) {
+        let top = event.offsetTop;
+        let bottom = top + event.offsetHeight;
+
+        if(eventTop >= top && eventBottom <= bottom) {
+          element.style.setProperty("left", "50px");
+          event.style.setProperty("right", "20px");
+        } else if(eventTop < bottom && eventBottom > top) {
+          element.style.setProperty("left", "50%");
+          event.style.setProperty("right", "50%");
+        } else {
+          element.style.setProperty("left", "50px");
+          event.style.setProperty("right", "20px");
+        }
+      }
+    });
   }
 
-  #updateEventDiv(target, startTime, endTime) {
-    let startLocation = this.#positionOfTime(startTime);
-    let endLocation = this.#positionOfTime(endTime);
 
-    target.style.setProperty("top", `${startLocation}px`); 
-    target.style.setProperty("height", `${endLocation - startLocation}px`);
 
-    this.#setSpecialClasses(target);
+  ////////////////////
+  // Scroll Methods //
+  ////////////////////
 
-    target.querySelector(".event-time").innerHTML = this.#durationString(startTime, endTime);
-  }
+  handleScroll(status) {
+    if(status == "ABOVE") {
+      console.log("ABOVE");
+      this.insertTimestampAbove();
+    } else if (status == "BELOW") {
+      console.log("BELOW");
+      this.insertTimestampBelow();
+    }
 
-  #setSpecialClasses(eventDiv) {
-    eventDiv.classList.toggle("tiny", eventDiv.offsetHeight < 15);
-    eventDiv.classList.toggle("small", eventDiv.offsetHeight < 45);
+    this.drag(this.dragEvent.current.event);
   }
 
-  /////////////////////
-  // Time Formatters //
-  /////////////////////
-
-  #timeString(date) {
-    let hours = date.getUTCHours();
-    let minutes = date.getUTCMinutes();
-    let ampm = hours >= 12 ? 'PM' : 'AM';
-    hours = hours % 12;
-    hours = hours ? hours : 12; // the hour '0' should be '12'
 
-    minutes = minutes < 10 ? '0' + minutes : minutes;
-    return hours + ':' + minutes + ' ' + ampm;
+  insertTimestampAbove() {
   }
 
-  #durationString(startTime, endTime) {  
-    return `${this.#timeString(startTime)} - ${this.#timeString(endTime)}`;
+  insertTimestampBelow() {
+    // this.dragEvent.inserting = true;
+    // Add 1 hour
+    let time = new Date(this.timeKeeper.endTime.getTime());
+    time.setHours(time.getHours() + 1);
+    this.timeKeeper.endTime = time;
+    let timestampDiv = TimeTableRenderer.timestamp(time);
+    this.element.querySelector(".timestamps").appendChild(timestampDiv);
   }
 
   ////////////////
@@ -204,6 +173,10 @@ export default class extends Controller {
   ////////////////
 
   #invokeDragMethodFor(type) {
+    if(!type) {
+      console.error("No drag type provided");
+      return;
+    }
     let capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
 
     if (this[`drag${capitalizedType}`]) {
@@ -217,15 +190,6 @@ export default class extends Controller {
   // Helpers //
   /////////////
 
-  #setDragEventTarget(target) {
-    if(target) {
-      this.dragEvent.target = target;
-      this.dragEvent.originEventPosition = this.#relativeElementPosition(target);
-      this.dragEvent.originEventStartTime = this.#timeAtPosition(this.dragEvent.originEventPosition.y);
-      this.dragEvent.originEventEndTime = this.#timeAtPosition(this.dragEvent.originEventPosition.y + target.offsetHeight);
-    }
-  }
-
   #setDragEventListeners() {
     document.addEventListener("mousemove", this.drag.bind(this));
     document.addEventListener("mouseup", this.stopDragEvent.bind(this));