Token deletion with simple undo
[grauphel.git] / js / grauphel.js
1 /**
2  * Undo
3  *
4  * Single action:
5  * 1. User clicks "delete"
6  * 2. Notification appears for 5 seconds
7  * 3. Token row is faded out
8  * 4a User clicks on notification:
9  *    - Action is cancelled
10  *    - Token row is faded in
11  * 4b User does not click on notification:
12  *    - Action gets executed 5 seconds after the delete click
13  *    - Token row gets removed
14  *
15  *
16  * Multiple actions:
17  * 1. User clicks "delete"
18  * 2. Notification appears for 5 seconds
19  * 3. User clicks "delete"
20  * 4. Notification appears for 5 seconds
21  * 5a User clicks on notification: All pending actions are cancelled
22  * 5b User does not click on notification
23  *    - Action 1 gets executed 5 seconds after the first click
24  *    - Action 2 gets executed 5 seconds after the second click
25  */
26 OC.grauphel = {
27     simpleUndo: function(undoTask) {
28         var notifier = $('#notification');
29         var timeout = 5;
30         notifier.off('click');
31         notifier.text('Token has been deleted. Click to undo.');
32         notifier.fadeIn();
33
34         $('#' + undoTask.elementId).fadeOut();
35
36         OC.grauphel.startGuiTimer(timeout, notifier);
37         var timer = setTimeout(
38             function() {
39                 var dataid = timer.toString();
40                 OC.grauphel.executeTask(notifier.data(dataid), true);
41                 notifier.removeData(dataid);
42             },
43             timeout * 1000
44         );
45         var dataid = timer.toString();
46         notifier.data(dataid, undoTask);
47
48         notifier.on('click', function() {
49             for (var id in notifier.data()) {
50                 clearTimeout(parseInt(id));
51                 notifier.off('click');
52                 OC.grauphel.restore(notifier.data(id));
53                 notifier.removeData(id);
54             }
55         });
56     },
57
58     executeTask: function(task, async) {
59         //console.log("execute task: ", task);
60         jQuery.ajax({
61             url:   task.url,
62             type:  task.method,
63             async: async
64         });
65     },
66
67     restore: function(undoTask) {
68         $('#' + undoTask.elementId).fadeIn();
69
70         var notifier = $('#notification');
71         var timeout = 5;
72         notifier.off('click');
73         notifier.text('Token has been restored.');
74
75         OC.grauphel.startGuiTimer(timeout, notifier);
76         notifier.on('click', function() {
77             clearTimeout(OC.grauphel.guiTimer);
78             notifier.fadeOut();
79         });
80     },
81
82     executeAllTasks: function() {
83         var notifier = $('#notification');
84         for (var id in notifier.data()) {
85             clearTimeout(parseInt(id));
86             OC.grauphel.executeTask(notifier.data(id), false);
87             notifier.removeData(id);
88         }
89     },
90
91     guiTimer: null,
92
93     startGuiTimer: function(timeout, notifier) {
94         if (OC.grauphel.guiTimer !== null) {
95             clearTimeout(OC.grauphel.guiTimer);
96         }
97         OC.grauphel.guiTimer = setTimeout(
98             function() {
99                 notifier.fadeOut();
100                 notifier.off('click');
101             },
102             timeout * 1000
103         );
104     }
105 };
106
107 $(document).ready(function() {
108     $('#grauphel-tokens .delete').click(
109         function (event) {
110             event.preventDefault();
111
112             var undoTask = {
113                 'method': 'DELETE',
114                 'url': $(this).parent('form').attr('action'),
115                 'elementId': $(this).data('token')
116             };
117             OC.grauphel.simpleUndo(undoTask);
118             return false;
119         }
120     );
121
122     //in case a user deletes tokens and leaves the page within the 5 seconds
123     window.onbeforeunload = function(e) {
124         OC.grauphel.executeAllTasks();
125     };
126 });