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 });