1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<template>
<a v-if="isWebLink"
class="button action-button pull-right"
:class="{ primary: primary, 'button--tabbed': tabbed }"
:href="link"
@keydown.enter="makeActive"
@keyup.enter="makeInactive"
@click="handleClick"
@blur="handleBlur"
@keyup.tab.exact="handleTabUp"
@keyup.shift.tab="handleTabUp">
{{ label }}
</a>
<Button v-else-if="!isWebLink"
:type="buttonType"
class="action-button pull-right"
@click="onClickActionButton">
{{ label }}
</Button>
</template>
<script>
import axios from '@nextcloud/axios'
import { showError } from '@nextcloud/dialogs'
import Button from '@nextcloud/vue/dist/Components/Button'
export default {
name: 'Action',
components: {
Button,
},
props: {
label: {
type: String,
default: '',
required: true,
},
link: {
type: String,
default: '',
required: true,
},
type: {
type: String,
default: '',
required: true,
},
primary: {
type: Boolean,
default: false,
required: true,
},
},
data() {
return {
tabbed: false,
}
},
computed: {
isWebLink() {
return this.typeWithDefault === 'WEB'
},
typeWithDefault() {
return this.type || 'GET'
},
buttonType() {
return this.primary ? 'primary' : 'secondary'
},
},
methods: {
async onClickActionButton() {
try {
// execute action
await axios({
method: this.typeWithDefault,
url: this.link,
})
// emit event to current app
this.$parent._$el.fadeOut(OC.menuSpeed)
this.$parent.$emit('remove')
try {
$('body').trigger(new $.Event('OCA.Notification.Action', {
notification: this.$parent,
action: {
url: this.link,
type: this.typeWithDefault,
},
}))
// do not do anything but log, the action went fine
// only the event bus listener failed, this is not our problem
} catch (error) {
console.error(error)
}
} catch (error) {
console.error('Failed to perform action', error)
showError(t('notifications', 'Failed to perform action'))
}
},
/**
* Removes the tabbed state of the button.
*/
handleClick() {
this.tabbed = false
},
/**
* When the tab key is lifted, the button has been "tabbed in",
* see comments on the `tabbed` variable declared in the data.
*/
handleTabUp() {
this.tabbed = true
},
/**
* Everytime the button is blurred, we remove the tabbed state.
*/
handleBlur() {
this.tabbed = false
},
/**
* When the button is reached via keyboard navigation and pressed using
* the enter key, we slightly change the styles to provide an "active-like"
* feedback. When using the mouse this is achieved with the ripple effect.
*/
makeActive() {
this.tabbed = false
},
makeInactive() {
this.tabbed = true
},
},
}
</script>
|
