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