Add confirmation directive

src/components/Confirmation.vue

@@ -0,0 +1,90 @@
+<!--
+Nextcloud - Tasks
+
+@author Raimund Schlüßler
+@copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+License as published by the Free Software Foundation; either
+version 3 of the License, or any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+
+You should have received a copy of the GNU Affero General Public
+License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+
+-->
+
+<template>
+	<li v-click-outside="reset" :class="{confirmed: activated, active: armed}">
+		<a class="confirmation-default" @click="activate($event)">
+			<span class="icon-delete" />
+			<span>{{ t('tasks', 'Delete') }}</span>
+		</a>
+		<a :title="t('tasks', 'Cancel')" class="confirmation-abort icon-close" @click="reset">
+			<span />
+		</a>
+		<a class="confirmation-confirm icon-delete-white no-permission" @click="deleteCalendar($event)">
+			<span class="countdown">{{ remaining }}</span>
+		</a>
+	</li>
+</template>
+
+<script>
+import clickOutside from 'vue-click-outside'
+
+export default {
+	name: 'PopoverMenu',
+	components: {
+		clickOutside
+	},
+	directives: {
+		clickOutside
+	},
+	props: {
+		message: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			remaining: 3,
+			activated: false,
+			armed: false
+		}
+	},
+	methods: {
+		reset: function() {
+			this.activated = false
+			this.armed = false
+			this.remaining = 3
+		},
+		activate: function(e) {
+			$('.confirmation-confirm').tooltip({ title: this.message, container: 'body', placement: 'right' })
+			this.activated = true
+			this.countdown()
+			e.stopPropagation()
+		},
+		countdown: function() {
+			this.remaining--
+			if (this.remaining > 0) {
+				setTimeout(this.countdown, 1000)
+			} else {
+				this.armed = true
+			}
+		},
+		deleteCalendar: function(e) {
+			if (this.armed) {
+				this.$emit('delete-calendar')
+			} else {
+				e.stopPropagation()
+			}
+		}
+	}
+}
+</script>

src/components/TheList.vue

@@ -84,7 +84,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 									<span>{{ t('tasks', 'Download') }}</span>
 								</a>
 							</li>
-							<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)" />
+							<confirmation :message="deleteMessage(calendar.displayname)" @delete-calendar="deleteCalendar(calendar, ...arguments)" />
 						</ul>
 					</popover>
 				</ul>
@@ -159,6 +159,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 import { mapState, mapGetters } from 'vuex'
 import Colorpicker from './Colorpicker'
 import PopoverMenu from './PopoverMenu'
+import Confirmation from './Confirmation'
 
 import clickOutside from 'vue-click-outside'
 
@@ -166,6 +167,7 @@ export default {
 	components: {
 		'colorpicker': Colorpicker,
 		'popover': PopoverMenu,
+		'confirmation': Confirmation,
 		clickOutside
 	},
 	directives: {
@@ -302,6 +304,12 @@ export default {
 				check.allowed = true
 			}
 			return check
+		},
+		deleteMessage: function(name) {
+			return t('tasks', 'This will delete the Calendar "%s" and all of its entries.').replace('%s', name)
+		},
+		deleteCalendar: function(calendar) {
+			console.log('Delete calendar ' + calendar.uri)
 		}
 	}
 }