Implement drag scrolling the board

Signed-off-by: Julius Härtl <jus@bitgrid.net>

package-lock.json

@@ -628,103 +628,6 @@
 				}
 			}
 		},
-		"@babel/helper-module-imports": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
-			"integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
-			"requires": {
-				"@babel/types": "^7.10.4"
-			},
-			"dependencies": {
-				"@babel/helper-validator-identifier": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-					"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
-				},
-				"@babel/types": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-					"integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.10.4",
-						"lodash": "^4.17.19",
-						"to-fast-properties": "^2.0.0"
-					}
-				}
-			}
-		},
-		"@babel/helper-module-transforms": {
-			"version": "7.11.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz",
-			"integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==",
-			"requires": {
-				"@babel/helper-module-imports": "^7.10.4",
-				"@babel/helper-replace-supers": "^7.10.4",
-				"@babel/helper-simple-access": "^7.10.4",
-				"@babel/helper-split-export-declaration": "^7.11.0",
-				"@babel/template": "^7.10.4",
-				"@babel/types": "^7.11.0",
-				"lodash": "^4.17.19"
-			},
-			"dependencies": {
-				"@babel/code-frame": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-					"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-					"requires": {
-						"@babel/highlight": "^7.10.4"
-					}
-				},
-				"@babel/helper-split-export-declaration": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
-					"integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
-					"requires": {
-						"@babel/types": "^7.11.0"
-					}
-				},
-				"@babel/helper-validator-identifier": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-					"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
-				},
-				"@babel/highlight": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-					"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.10.4",
-						"chalk": "^2.0.0",
-						"js-tokens": "^4.0.0"
-					}
-				},
-				"@babel/parser": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.0.tgz",
-					"integrity": "sha512-qvRvi4oI8xii8NllyEc4MDJjuZiNaRzyb7Y7lup1NqJV8TZHF4O27CcP+72WPn/k1zkgJ6WJfnIbk4jTsVAZHw=="
-				},
-				"@babel/template": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-					"integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
-					"requires": {
-						"@babel/code-frame": "^7.10.4",
-						"@babel/parser": "^7.10.4",
-						"@babel/types": "^7.10.4"
-					}
-				},
-				"@babel/types": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-					"integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.10.4",
-						"lodash": "^4.17.19",
-						"to-fast-properties": "^2.0.0"
-					}
-				}
-			}
-		},
 		"@babel/helper-optimise-call-expression": {
 			"version": "7.10.4",
 			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
@@ -916,65 +819,6 @@
 				}
 			}
 		},
-		"@babel/helper-simple-access": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
-			"integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
-			"requires": {
-				"@babel/template": "^7.10.4",
-				"@babel/types": "^7.10.4"
-			},
-			"dependencies": {
-				"@babel/code-frame": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-					"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-					"requires": {
-						"@babel/highlight": "^7.10.4"
-					}
-				},
-				"@babel/helper-validator-identifier": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-					"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
-				},
-				"@babel/highlight": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-					"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.10.4",
-						"chalk": "^2.0.0",
-						"js-tokens": "^4.0.0"
-					}
-				},
-				"@babel/parser": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.0.tgz",
-					"integrity": "sha512-qvRvi4oI8xii8NllyEc4MDJjuZiNaRzyb7Y7lup1NqJV8TZHF4O27CcP+72WPn/k1zkgJ6WJfnIbk4jTsVAZHw=="
-				},
-				"@babel/template": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-					"integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
-					"requires": {
-						"@babel/code-frame": "^7.10.4",
-						"@babel/parser": "^7.10.4",
-						"@babel/types": "^7.10.4"
-					}
-				},
-				"@babel/types": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-					"integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.10.4",
-						"lodash": "^4.17.19",
-						"to-fast-properties": "^2.0.0"
-					}
-				}
-			}
-		},
 		"@babel/helper-skip-transparent-expression-wrappers": {
 			"version": "7.12.1",
 			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
@@ -20478,6 +20322,11 @@
 				"tinycolor2": "^1.1.2"
 			}
 		},
+		"vue-dragscroll": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/vue-dragscroll/-/vue-dragscroll-2.1.0.tgz",
+			"integrity": "sha512-ZNcvOdrnq9w4US2RqZOfp2cCJzEz1p4xZ1w4I+xKSAFlEOrXbryLe/iclspHH57dco5QT3Azd8/KD930WzadiQ=="
+		},
 		"vue-easymde": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/vue-easymde/-/vue-easymde-1.3.0.tgz",

package.json

@@ -54,6 +54,7 @@
 		"vue": "^2.6.12",
 		"vue-at": "^2.5.0-beta.2",
 		"vue-click-outside": "^1.1.0",
+		"vue-dragscroll": "^2.1.0",
 		"vue-easymde": "^1.3.0",
 		"vue-infinite-loading": "^2.4.5",
 		"vue-router": "^3.4.8",

src/components/board/Board.vue

@@ -49,13 +49,13 @@
 					</form>
 				</template>
 			</EmptyContent>
-			<div v-else-if="!isEmpty && !loading" key="board" class="board">
+			<div v-else-if="!isEmpty && !loading" key="board" class="board" v-dragscroll:nochilddrag>
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
 					@drop="onDropStack">
 					<Draggable v-for="stack in stacksByBoard" :key="stack.id">
-						<Stack :stack="stack" />
+						<Stack :stack="stack" data-dragscroll />
 					</Draggable>
 				</Container>
 			</div>
@@ -75,7 +75,7 @@ import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls'
 import Stack from './Stack'
 import { EmptyContent } from '@nextcloud/vue'
-
+import { dragscroll } from 'vue-dragscroll'
 export default {
 	name: 'Board',
 	components: {
@@ -88,6 +88,9 @@ export default {
 	inject: [
 		'boardApi',
 	],
+	directives: {
+		dragscroll,
+	},
 	props: {
 		id: {
 			type: Number,
@@ -112,7 +115,7 @@ export default {
 			return this.$store.getters.stacksByBoard(this.board.id)
 		},
 		dragHandleSelector() {
-			return this.canEdit ? null : '.no-drag'
+			return this.canEdit ? '.stack--header' : '.no-drag'
 		},
 		isEmpty() {
 			return this.stacksByBoard.length === 0