Home.vue

<template>
  <div class="home">
    <div id="grid">
      <div @mousedown="resizeVertical($event, rowIndex)" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
        v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
        @dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
        <span class="col-preview">
          <component :is="previewType"></component>
        </span>
        <div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" :id="rowIndex+','+colIndex" class="col" v-show="!isDragged(rowIndex, colIndex)"
          v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
          <component :is="colBlock.type" :row="rowIndex" :col="colIndex"></component>
          <button class="hidden-row-item pencil">
            <img v-svg-inline class="icon" src="@/assets/pencil.svg"/>
          </button>
        </div>
        <button class="hidden-row-item remove-block" @mouseover="slightlyBlurRow(rowIndex)" @mouseleave="unblurRow(rowIndex)" @click="mightRemoveRow(rowIndex)">
          <img v-svg-inline class="icon" src="@/assets/trashcan.svg"/>
        </button>
        <button class="hidden-row-item cancel-remove" @click="cancelRemoveRow(rowIndex)">
          <img v-svg-inline class="icon" src="@/assets/draw-cross.svg"/>
        </button>
        <button class="hidden-row-item confirm-remove" @click="removeRow(rowIndex)">
          <img v-svg-inline class="icon" src="@/assets/draw-tick.svg"/>
        </button>
      </div>
      <button class="add-block" @click="addBlock()">
        <img v-svg-inline class="icon" src="@/assets/collapse-plus.svg"/>
      </button>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import ActiveCourses from "@/components/blocks/ActiveCourses";
import Deadlines from "@/components/blocks/Deadlines";
import Feed from "@/components/blocks/Feed";
import Mail from "@/components/blocks/Mail";
import Calendar from "@/components/blocks/Calendar";

const sendServerRequest = (type, payload) => {
  const xhr = new XMLHttpRequest();
  const url = "/persistence";

  xhr.open("GET", url + "?type=" + type + "&" + payload);
  xhr.send();

  return xhr;
}

// Maximum number of blocks allowed in a row
const maxBlocks = 3;

export default {
  name: 'Home',
  deleting: false,

  data() {
    return {
      layout: [
        {
          height: 400,
          blocks: [{type: "Calendar", width: 75}, {type: "ActiveCourses", width: 25}]
        },
        {
          height: 250,
          blocks: [{type: "Deadlines", width: 100}]
        },
        {
          height: 300,
          blocks: [{type: "Feed", width: 50}, {type: "Mail", width: 25}, {type: "Mail", width: 25}]
        }
      ],
      mouseDragPos: {x: 0, y: 0},
      verticalResizeObject: {index: 0},
      horizontalResizeObject: {row: 0, col: 0},
      prevWinWidth: 1000,
      draggedBlock: null,
      activePreview: null,
      dragEnabled: true
    }
  },

  methods: {
    addBlock() {
      this.layout.push({
        height: 300,
        blocks: [{ type: "ActiveCourses", width: 30 },{ type: "Feed", width: 70 }]
      });
    },

    blurRow(rowIndex) {
      const cols = document.getElementById(rowIndex).getElementsByClassName("col");
      for (const col of cols) {
        col.className = "col animate-blur-grey-out-zoom";
      }
    },

    slightlyBlurRow(rowIndex) {
      if(!this.deleting) {
        const cols = document.getElementById(rowIndex).getElementsByClassName("col");
        for (const col of cols) {
          col.className = "col animate-slight-blur-grey-out";
        }
      }
    },

    unblurRow(rowIndex) {
      if(!this.deleting) {
        const cols = document.getElementById(rowIndex).getElementsByClassName("col");
        for (const col of cols) {
          col.className = "col";
        }
      }
    },

    mightRemoveRow(rowIndex) {
      if(this.deleting) {
        this.cancelRemoveRow(rowIndex);
        return;
      }

      this.deleting = true;
      this.blurRow(rowIndex);

      const row = document.getElementById(rowIndex);
      const cross = row.getElementsByClassName("cancel-remove")[0];
      const tick = row.getElementsByClassName("confirm-remove")[0];

      cross.className = "visible-row-item cancel-remove";
      tick.className = "visible-row-item confirm-remove";

      // toggle off pencil on hover for cols
      const pens = row.getElementsByClassName("pencil")
      for (const pen of pens) {
        pen.style.display = "none";
      }
    },

    removeRow(rowIndex) {
      this.cancelRemoveRow(rowIndex);
      this.layout.splice(rowIndex, 1);
    },

    cancelRemoveRow(rowIndex) {
      this.deleting = false;
      this.unblurRow(rowIndex);

      const row = document.getElementById(rowIndex);
      const cross = row.getElementsByClassName("cancel-remove")[0];
      const tick = row.getElementsByClassName("confirm-remove")[0];

      cross.className = "hidden-row-item cancel-remove";
      tick.className = "hidden-row-item confirm-remove";

      // toggle on pencil on hover for cols
      const pens = row.getElementsByClassName("pencil")
      for (const pen of pens) {
        pen.style.display = "block";
      }
    },

    resizeHorizontalMouseMove(event) {
      const deltaX = this.mouseDragPos.x - event.x;
      this.mouseDragPos.x = event.x;
      const row = this.horizontalResizeObject.row;
      const col = this.horizontalResizeObject.col;

      // Find index of select col in html document
      let colIndex = col;
      for (let i = 0; i < row; i++) {
        const element = this.layout[i];
        colIndex += element.blocks.length;
      }
      const leftCol = document.getElementsByClassName("col")[colIndex - 1];
      const rigthCol = document.getElementsByClassName("col")[colIndex];
      
      // Total flex allowed from layout
      const totalFlex = this.layout[row].blocks[col -1].width + this.layout[row].blocks[col].width;
      const contentWidth = leftCol.clientWidth + rigthCol.clientWidth + 40;
      
      // Resized size
      const newLeftWidth = leftCol.clientWidth - deltaX;
      const newRightWidth = rigthCol.clientWidth + deltaX;

      // Calculating new flexGrow value
      // This is not normalized to 100"%"
      let newFlexRight = contentWidth/newRightWidth;
      let newFlexLeft = (newLeftWidth * parseFloat(newFlexRight))/newRightWidth;

      // Normalizing flewGrow to 100"%"
      const preAdjustedTotalFlex = newFlexRight+newFlexLeft;
      newFlexRight = (newFlexRight/preAdjustedTotalFlex)*totalFlex;
      newFlexLeft = (newFlexLeft/preAdjustedTotalFlex)*totalFlex;
      
      // Storing new style.
      this.layout[row].blocks[col -1].width = newFlexLeft;
      this.layout[row].blocks[col].width = newFlexRight;
    },

    resizeVerticalMouseMove(event) {
      const deltaY = this.mouseDragPos.y - event.y;
      this.mouseDragPos.y = event.y;
      this.layout[this.verticalResizeObject.index].height -= deltaY
    },

    resizeHorizontal(event, row, col) {
      if(event.offsetX < 0){
        this.mouseDragPos.x = event.x;
        this.horizontalResizeObject.row = row;
        this.horizontalResizeObject.col = col;
        document.addEventListener("mousemove", this.resizeHorizontalMouseMove, false);
        document.addEventListener("mouseup", this.eventRemover, false);
        document.getElementsByTagName("html")[0].classList.add("no-select");
        this.dragEnabled = false;
      }
    },

    resizeVertical(event, index){
      if(index == 0 || this.deleting){
        return;
      }
      const clickTarget = event.target;
      if(clickTarget.className != "row"){
        return;
      }
      
      if(event.offsetY > this.layout[index].height){
        console.log(":After event")
      } else {
        index--;
      }
      this.mouseDragPos.y = event.y;
      this.verticalResizeObject.index = index; 
      document.addEventListener("mousemove", this.resizeVerticalMouseMove, false);
      document.addEventListener("mouseup", this.eventRemover, false);
      document.getElementsByTagName("html")[0].classList.add("no-select");
      this.dragEnabled = false;
    },

    eventRemover() {
      document.removeEventListener("mousemove", this.resizeHorizontalMouseMove, false);
      document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false);
      document.removeEventListener("mouseup", this.eventRemover, false);
      document.getElementsByTagName("html")[0].classList.remove("no-select");
      this.dragEnabled = true;
    },

    mobileLayoutResize(){
      const winWidth = window.innerWidth;
      if((this.prevWinWidth - 992) > 0 && (winWidth - 992) > 0){
        return;
      }
      if((this.prevWinWidth - 992) < 0 && (winWidth - 992) < 0){
        return;
      }

      const rows = document.getElementsByClassName("row");
      for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const cols = row.getElementsByClassName("col");
        for (let j = 0; j < cols.length; j++) {
          const col = cols[j];
          if(winWidth < 992){
            col.style.flexGrow = 0;
          }else{
            col.style.flexGrow = this.layout[i].blocks[j].width;
          }
        }
        if(winWidth < 992){
          row.style.height = 'auto';
        }else{
          row.style.height = this.layout[i].height + 'px';
        }
      }
      this.prevWinWidth = winWidth;      
    },

    startDrag(event, row, col) {
      event.dataTransfer.effectAllowed = 'move';

      const colElement = document.getElementById(row + ',' + col);
      event.dataTransfer.setDragImage(colElement, colElement.offsetWidth/2, 20);

      // Workaround for a bug in Chrome causing dragend
      // to be fired immediately if the timeout is not used
      setTimeout(() => {
        this.draggedBlock = { row, col };

        this.showDropPreview(row, col);
      }, 10);
    },

    stopDrag() {
      this.draggedBlock = null;
    },

    getDropPosition(event, row) {
      // Copy blocks
      const blocks = JSON.parse(JSON.stringify(this.layout[row].blocks));

      const origRow = this.draggedBlock.row;
      const origCol = this.draggedBlock.col;
      const origBlock = this.layout[origRow].blocks[origCol];

      // Don't take into account the block we are dragging when calculating the preview
      if (origRow === row) {
        const missingWidth = origBlock.width / (blocks.length - 1);
        blocks.splice(origCol, 1);

        for (const block of blocks)
          block.width += missingWidth;
      }

      // No drop position if row is full
      if (blocks.length === maxBlocks)
        return null;

      const targetRow = document.getElementById(row.toString());
      const rowWidth = targetRow.offsetWidth;
      const x = event.x - targetRow.offsetLeft;

      let position = blocks.length;
      let cutoff = 0;
      for (let i = 0; i < blocks.length; i++) {
        const block = blocks[i];
        cutoff += block.width / 2;

        if (x <= rowWidth * cutoff / 100) {
          position = i;
          break;
        }

        cutoff += block.width / 2;
      }

      return position;
    },

    // Shows a preview upon dragging a block over a row
    dragHover(event, row) {
      event.dataTransfer.dropEffect = 'move';

      let position = this.getDropPosition(event, row);

      // Don't show preview if row is full
      if (position === null)
        return;

      this.showDropPreview(row, position);
      
      event.preventDefault();
    },

    showDropPreview(row, position) {
      if (this.activePreview !== null)
        this.hidePreview();
      this.activePreview = row;

      const origRow = this.draggedBlock.row;
      const origCol = this.draggedBlock.col;
      const origBlock = this.layout[origRow].blocks[origCol];

      // Fix cases when dragging to own row
      if (origRow === row && position >= origCol) {
        position++;
      }

      const targetRow = document.getElementById(row.toString());
      const preview = targetRow.getElementsByClassName('col-preview')[0];
      preview.style.order = position;
      preview.style.flexGrow = origBlock.width;
      preview.style.display = 'block';
    },

    drop(event, row) {
      // If events get processed in an unfortunate order
      if (this.draggedBlock === null)
        return;

      this.hidePreview();

      const position = this.getDropPosition(event, row);

      // Do nothing if row full
      if (position == null)
        return;

      const origRow = this.draggedBlock.row;
      const origCol = this.draggedBlock.col;
      const origBlock = this.layout[origRow].blocks[origCol];

      // Delete at origin
      const origBlocks = this.layout[origRow].blocks;
      origBlocks.splice(origCol, 1);

      // Insert at destination
      const destBlocks = this.layout[row].blocks;
      destBlocks.splice(position, 0, origBlock);

      if (origBlocks.length == 0)
        this.layout.splice(origRow, 1);
      
      // Normalize rows to 100 total width
      if (origRow !== row) {
        const origTotalWidth = origBlocks.reduce((total, block) => total + block.width, 0);
        const origScaleFactor = 100 / origTotalWidth;
        for (const block of origBlocks) {
          block.width *= origScaleFactor;
        }

        const destTotalWidth = destBlocks.reduce((total, block) => total + block.width, 0);
        const destScaleFactor = 100 / destTotalWidth;
        for (const block of destBlocks) {
          block.width *= destScaleFactor;
        }
      }
      
      this.draggedBlock = null;
    },

    hidePreview() {
      if (this.activePreview === null)
        return;

      const targetRow = document.getElementById(this.activePreview.toString());
      const preview = targetRow.getElementsByClassName('col-preview')[0];
      preview.style.display = 'none';
      this.activePreview = null;
    },

    isDragged(row, col) {
      return row === this.draggedBlock?.row && col === this.draggedBlock?.col;
    },

    saveLayout(id) {
      const type = "save"
      const payload = "id=" + id + "&" + "data=" + JSON.stringify(this.$data);

      const request = sendServerRequest(type, payload);
      request.onload = () => {
        const response = request.response;
        console.log(response);
      }
    },

    loadLayout(id) {
      const type = "load"
      const payload = "id=" + id;

      const request = sendServerRequest(type, payload);
      request.onload = () => {
        const response = request.response;
        Object.assign(this.$data, JSON.parse(response));
      }
    },
  },

  mounted(){
    this.mobileLayoutResize();
    this.prevWinWidth = window.innerWidth;
    window.addEventListener('resize', this.mobileLayoutResize);
  },

  updated(){
    this.mobileLayoutResize();
  },

  computed: {
    previewType() {
      if (this.draggedBlock == null)
        return null;

      const origRow = this.draggedBlock.row;
      const origCol = this.draggedBlock.col;

      return this.layout[origRow].blocks[origCol].type;
    }
  },

  provide() {
    return {
      dragEnabled: computed(() => this.dragEnabled),
      startDrag: this.startDrag,
      stopDrag: this.stopDrag
    }
  },

  components: {
    ActiveCourses,
    Deadlines,
    Feed,
    Mail,
    Calendar
  }
}
</script>

<style lang="scss">
  $gap: $default-margin;

  #grid {
    width: 100%;
    padding: 0 $gap / 2 $gap;
  }

  .row {
    display: flex;
    padding-top: $gap / 2;
    flex-direction: column;
    position: relative;
    min-height: 150px;

    &.drag * {
      pointer-events: none;
    }
  }

  // Must be outside ".row" or else after affect children
  .row:not(:first-of-type){
    &::before{
      content: " ";
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
      top: 0;
      width: 100%;
      height: $gap;
      cursor: n-resize;
    }
  }

  .row:last-of-type{
    &::after{
      content: " ";
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
      bottom: -$gap;
      width: 100%;
      height: $gap;
      cursor: n-resize;
    }
  }
    
  .col, .col-preview {
    flex-basis: 0; // a basis of 0px. very important!
    background-color: $light-green-theme-color;
    border-radius: 4px;
    border: 2px solid $theme-color;
    margin: 0 $gap / 2;
  }

  .col {
    position: relative;

    &:not(:last-of-type) {
      margin-bottom: $gap / 2;
    }

    &:not(:first-of-type)::before{
      content: " ";
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
      left: - $gap - 2px;
      width: $gap;
      height: 100%;
      cursor: w-resize;
    }
  }

  .col-preview {
    display: none;
    opacity: 0.5;
  }

  .add-block {
    width: 50px;
    height: 50px;
    border: none;
    background: none;
    padding: 0;
    display: none;
    margin-top: $gap;

    svg {
      fill: #777f80;
    }

    &:hover, &:focus {
      cursor: pointer;

      svg {
        fill: $darker-theme-color;
      }
    }
  }

  .remove-block {
    right: $gap - 5px + $gap / 2;
    order: 1000;
  }

  .cancel-remove {
    right: 2 * $gap - 5px + $gap / 2;
    order: 1000;

    svg {
      color: $red-theme-color;
    }
  }

  .confirm-remove {
    right: 3 * $gap - 10px + $gap / 2;
    order: 1000;

    svg {
      color: $green-theme-color;
    }
  }

  .hidden-row-item {
    display: none;

    height: 30px;
    top: -$gap + 5px;

    border: none;
    background: none;
    
    padding: 0;

    svg {
      width: 0px;
      height: 0px;
    }
  }

  .visible-row-item {
    display: flex;
    position: relative;
    flex-direction: column;

    width: 0px;
    height: 30px;
    top: -$gap + 5px;
    
    border: none;
    background: none;

    padding: 0;

    animation: slide-from-bot 0.4s;

    svg {
      width: 28px;
      height: 28px;
    }

    &:hover, &:focus {
      cursor: pointer;

      svg {
        color: $darker-theme-color;
      }
    }
  }

  .animate-blur-grey-out-zoom {
    animation: blur-grey-out-zoom 0.6s;

    filter: blur(2px) grayscale(0.5); 
    transform: scale(0.97);
    opacity: 0.3;

    pointer-events: none !important;
    @include no-select;

    * {
      pointer-events: none !important;
    }
  }

  .animate-slight-blur-grey-out {
    animation: slight-blur-grey-out 0.6s;

    filter: blur(1px) grayscale(0.5); 
    opacity: 0.7;
  }

  @keyframes slide-from-bot {
    0% { 
      top: 10.5px;
      z-index: -1; 
    }
    99% { 
      top: -$gap + 5px; 
      z-index: -1; 
    }
    100% { z-index: inherit; }
  }

  @keyframes blur-grey-out-zoom {
    from { 
      filter: blur(1px) grayscale(0.5); 
      transform: scale(1.0);
      opacity: 0.7;
    }
    to { 
      filter: blur(2px) grayscale(0.5); 
      transform: scale(0.97);
      opacity: 0.3;
    }
  }

  @keyframes slight-blur-grey-out {
    from { 
      filter: blur(0px) grayscale(0); 
      transform: scale(1.0);
      opacity: 1;
    }
    to { 
      filter: blur(1px) grayscale(0.5); 
      opacity: 0.7;
    }
  }

  @media only screen and (min-width: $mobile-width-cutoff) {
    .row{
      flex-direction: row;
      padding-top: $gap;

      &:hover {
        .remove-block {
          width: 0;

          display: block;
          position: relative;

          animation: slide-from-bot 0.4s;

          svg {
            color: $theme-color;

            width: 28px;
            height: 28px;
          }

          &:hover, &:focus {
            cursor: pointer;

            svg {
              color: $darker-theme-color;
            }
          }
        }
      }
    }

    .col{
      flex-grow: 0;

       &:not(:first-of-type) {
        margin-left: $gap / 2;
        
        &::before{
          content: " ";
          background-color: rgba(0, 0, 0, 0);
          position: absolute;
          left: - $gap - 2px;
          width: $gap;
          height: 100%;
          cursor: w-resize;
        }
      }

      &:not(:last-child) {
        margin-right: $gap / 2;
        margin-bottom: 0;
      }
    
      &:hover {
        .pencil {
          display: block;
          position: relative;
          float: right;

          width: 30px;
          height: 30px;
          right: 10px;
          top: -100%; 

          padding-top: 10px;

          z-index: inherit;

          svg {
            fill: $lighter-theme-color;

            width: 28px;
            height: 28px;
          }

          &:hover, &:focus {
            cursor: pointer;

            svg {
              fill: $light-theme-color;
            }
          }
        }
      }
    }

    .add-block{
      display: initial;
    }

    // Must be outside ".row" or else after affect children
    .row::after{
      content: " ";
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
      bottom: - $gap;
      width: 100%;
      height: $gap;
      cursor: n-resize;
    }
  }
</style>