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
|
/**
* Undo
*
* Single action:
* 1. User clicks "delete"
* 2. Notification appears for 5 seconds
* 3. Token row is faded out
* 4a User clicks on notification:
* - Action is cancelled
* - Token row is faded in
* 4b User does not click on notification:
* - Action gets executed 5 seconds after the delete click
* - Token row gets removed
*
*
* Multiple actions:
* 1. User clicks "delete"
* 2. Notification appears for 5 seconds
* 3. User clicks "delete"
* 4. Notification appears for 5 seconds
* 5a User clicks on notification: All pending actions are cancelled
* 5b User does not click on notification
* - Action 1 gets executed 5 seconds after the first click
* - Action 2 gets executed 5 seconds after the second click
*/
OC.grauphel = {
simpleUndo: function(undoTask) {
var notifier = $('#notification');
var timeout = 5;
notifier.off('click');
notifier.text('Token has been deleted. Click to undo.');
notifier.fadeIn();
$('#' + undoTask.elementId).fadeOut();
OC.grauphel.startGuiTimer(timeout, notifier);
var timer = setTimeout(
function() {
var dataid = timer.toString();
OC.grauphel.executeTask(notifier.data(dataid), true);
notifier.removeData(dataid);
},
timeout * 1000
);
var dataid = timer.toString();
notifier.data(dataid, undoTask);
notifier.on('click', function() {
for (var id in notifier.data()) {
clearTimeout(parseInt(id));
notifier.off('click');
OC.grauphel.restore(notifier.data(id));
notifier.removeData(id);
}
});
},
executeTask: function(task, async) {
//console.log("execute task: ", task);
jQuery.ajax({
url: task.url,
type: task.method,
async: async
});
},
restore: function(undoTask) {
$('#' + undoTask.elementId).fadeIn();
var notifier = $('#notification');
var timeout = 5;
notifier.off('click');
notifier.text('Token has been restored.');
OC.grauphel.startGuiTimer(timeout, notifier);
notifier.on('click', function() {
clearTimeout(OC.grauphel.guiTimer);
notifier.fadeOut();
});
},
executeAllTasks: function() {
var notifier = $('#notification');
for (var id in notifier.data()) {
clearTimeout(parseInt(id));
OC.grauphel.executeTask(notifier.data(id), false);
notifier.removeData(id);
}
},
guiTimer: null,
startGuiTimer: function(timeout, notifier) {
if (OC.grauphel.guiTimer !== null) {
clearTimeout(OC.grauphel.guiTimer);
}
OC.grauphel.guiTimer = setTimeout(
function() {
notifier.fadeOut();
notifier.off('click');
},
timeout * 1000
);
}
};
$(document).ready(function() {
$('#grauphel-tokens .delete').click(
function (event) {
event.preventDefault();
var undoTask = {
'method': 'DELETE',
'url': $(this).parent('form').attr('action'),
'elementId': $(this).data('token')
};
OC.grauphel.simpleUndo(undoTask);
return false;
}
);
//in case a user deletes tokens and leaves the page within the 5 seconds
window.onbeforeunload = function(e) {
OC.grauphel.executeAllTasks();
};
});
|
