Commit b996514c authored by Lasse Overgaard Møldrup's avatar Lasse Overgaard Møldrup
Browse files

Blocks can only be dragged with header + fixed ugly console error

parent 60edb6af
Pipeline #52271 passed with stage
in 41 seconds
<template>
<BlockTemplate heading="Aktive kurser">
<BlockTemplate heading="Aktive kurser" :row="row" :col="col">
<ul>
<li v-for="(course, index) in courses" :key="index"><a href="/about">{{ course }}</a></li>
</ul>
......@@ -9,6 +9,9 @@
<script>
export default {
name: 'ActiveCourses',
props: ['row', 'col'],
data() {
return {
courses: ['Calculus Beta', 'Databaser', 'etc.']
......
<template>
<div class="block">
<div class="heading">
<div class="heading" :draggable="dragEnabled.value" @dragstart="startDrag($event, row, col)" @dragend.prevent="stopDrag()">
<h2>{{ heading }}</h2>
</div>
<div class="content">
......@@ -11,7 +11,9 @@
<script>
export default {
props: [ 'heading' ]
props: [ 'heading', 'row', 'col' ],
inject: [ 'dragEnabled', 'startDrag', 'stopDrag' ]
}
</script>
......@@ -30,6 +32,7 @@ export default {
.heading {
color: $lightest-theme-color;
background-color: $theme-color;
cursor: move;
h2 {
padding: 10px $padding;
......
<template>
<div id="calendar">
<table>
<thead>
<thead :draggable="dragEnabled.value" @dragstart="startDrag($event, row, col)" @dragend.prevent="stopDrag()">
<!-- Generating first header of schema -->
<tr>
<th>
......@@ -52,6 +52,11 @@
<script>
export default {
name: 'Cal',
props: ['row', 'col'],
inject: [ 'dragEnabled', 'startDrag', 'stopDrag' ],
data() {
return {
// Currently showing schema data
......@@ -185,6 +190,7 @@ export default {
border: 0;
padding: 0;
height: 100%;
cursor: move;
tr{
height: 37px;
......
<template>
<BlockTemplate heading="Deadlines">
<BlockTemplate heading="Deadlines" :row="row" :col="col">
<ul>
<li v-for="(deadline, index) in deadlines" :key="index">
<span class="course-name">{{ deadline.course }}</span>
......@@ -29,6 +29,9 @@ Date.prototype.toMidnight = function() {
export default {
name: 'Deadlines',
props: ['row', 'col'],
data() {
return {
deadlines: [{ course: "Calculus Beta", name: "Aflevering 1", date: new Date() },
......
<template>
<BlockTemplate heading="Feed">
<BlockTemplate heading="Feed" :row="row" :col="col">
<ul>
<li v-for="(message, index) in messages" :key="index" @click="$router.push('/about')" @keypress.enter="$router.push('/about')" tabindex=0>
<a href="/about">{{ message.course }}</a>
......@@ -13,6 +13,9 @@
<script>
export default {
name: 'Feed',
props: ['row', 'col'],
data() {
return {
messages: [
......
<template>
<BlockTemplate heading="Post">
<BlockTemplate heading="Post" :row="row" :col="col">
<ul>
<li v-for="(mail, index) in mails" :key="index">
<span style="width: 50%;">{{ mail.sender }}</span>
......@@ -15,6 +15,9 @@
<script>
export default {
name: 'Mail',
props: ['row', 'col'],
data() {
return {
mails: [
......
......@@ -7,10 +7,9 @@
<span class="col-preview">
<component :is="previewType"></component>
</span>
<div @mousedown="resizeHorizontal($event, 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 }"
:draggable="dragEnabled" @dragstart="startDrag($event, rowIndex, colIndex)" @dragend.prevent="stopDrag()">
<component :is="colBlock.type"></component>
<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>
</div>
</div>
<button class="add-block" @click="addBlock()">
......@@ -21,6 +20,7 @@
</template>
<script>
import { computed } from 'vue';
import ActiveCourses from "@/components/blocks/ActiveCourses";
import Deadlines from "@/components/blocks/Deadlines";
import Feed from "@/components/blocks/Feed";
......@@ -160,6 +160,9 @@ export default {
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(() => {
......@@ -252,6 +255,10 @@ export default {
},
drop(event, row) {
// If events get processed in an unfortunate order
if (this.draggedBlock === null)
return;
this.hidePreview();
const position = this.getDropPosition(event, row);
......@@ -342,6 +349,14 @@ export default {
}
},
provide() {
return {
dragEnabled: computed(() => this.dragEnabled),
startDrag: this.startDrag,
stopDrag: this.stopDrag
}
},
components: {
ActiveCourses,
Deadlines,
......@@ -392,7 +407,6 @@ export default {
.col {
position: relative;
cursor: move;
&:not(:first-of-type)::before{
content: " ";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment