Add Icon/Button to show user's open tasks

This shows an icon with the number of open tasks assigned to the user.
If the user has open tasks and they click on the icon, they should see a
table with all their open tasks. Another click on the icon hides the
table.

Known Issues:
-------------
* If a task is check-off, the number next to the icon is not updated
dynamically.

SPR-962

action.php

@@ -48,7 +48,7 @@ class action_plugin_do extends DokuWiki_Action_Plugin {
      * @return bool
      */
     public function handle_ajax_call(&$event, $param) {
-        if($event->data == 'plugin_do') {
+        if($event->data == 'plugin_do') { // FIXME: refactor this into early return and switch
             // toggle status of a single task
             global $INPUT;
 
@@ -96,6 +96,27 @@ class action_plugin_do extends DokuWiki_Action_Plugin {
             header('Content-Type: application/json; charset=utf-8');
             $JSON = new JSON();
             echo $JSON->encode($status);
+        } elseif ($event->data === 'plugin_do_userTasksOverlay') {
+            $event->preventDefault();
+            $event->stopPropagation();
+
+            global $INPUT;
+
+            if (!$INPUT->server->has('REMOTE_USER')) {
+                http_status(401, 'login required');
+                return false;
+            }
+
+            $user = $INPUT->server->str('REMOTE_USER');
+
+            /** @var helper_plugin_do $hlp */
+            $hlp = plugin_load('helper', 'do');
+            $tasks = $hlp->loadTasks(array('status' => array('undone'),'user' => $user));
+            /** @var syntax_plugin_do_dolist $syntax */
+            $syntax = plugin_load('syntax', 'do_dolist');
+            $html = $syntax->buildTasklistHTML($tasks, true, false);
+            header('Content-Type: application/json; charset=utf-8');
+            echo json_encode(array('html' => $html));
         }
     }
 

helper.php

@@ -434,6 +434,36 @@ class helper_plugin_do extends DokuWiki_Plugin {
         echo $out;
     }
 
+    /**
+     * Get the html for an icon showing the user's open tasks
+     *
+     * If the user has open tasks, a js-overlay is shown on click.
+     *
+     * @return string the icon-html
+     */
+    public function tpl_getUserTasksIconHTML() {
+        global $INPUT;
+        if (!$INPUT->server->has('REMOTE_USER')) {
+            return '';
+        }
+        $user = $INPUT->server->str('REMOTE_USER');
+        $tasks = $this->loadTasks(array('status' => array('undone'),'user'   => $user));
+        $num = count($tasks);
+
+        $svg = inlineSVG(__DIR__ . '/pix/clipboard-text.svg');
+
+        $doInner = '<span class="a11y">' . $this->getLang('prefix_tasks_user') . " </span>$svg<span class=\"num\">".count($tasks). '</span>';
+        if ($user && $num > 0) {
+            $title = sprintf($this->getLang('tasks_user_intime'), $num);
+            $link = '<a class="plugin__do_usertasks" title="'.$title.'">'.$doInner.'</a>';
+        } else {
+            $title = $this->getLang('tasks_user_none');
+            $link = '<span class="plugin__do_usertasks noopentasks" title="'.$title.'">'.$doInner.'</span>';
+        }
+
+        return $link;
+    }
+
     /**
      * Get a pretty userlink
      *

lang/de/lang.php

@@ -16,6 +16,9 @@ $lang['js']['title4']  = 'Aufgabe ist nicht zugeordnet und hat kein Fälligkeits
 $lang['title_intime']  = '%1$d unerledigte Aufgabe(n).';
 $lang['title_late']    = '%1$d unerledigte Aufgebe(n) von denen %2$d Überfällig sind.';
 $lang['title_alldone'] = 'Alle Aufgaben erledigt.';
+$lang['tasks_user_none']            = 'Sie haben keine offenen Aufgaben.';
+$lang['tasks_user_intime']          = 'Sie haben %1$d offene Aufgaben.';
+$lang['prefix_tasks_user']          = 'Ihre offenen Aufgaben: ';
 
 $lang['js']['title_done']   = 'Alle Aufgaben erledigt.';
 $lang['js']['title_undone'] = '%1$d unerledigte Aufgabe(n).';

lang/en/lang.php

@@ -14,6 +14,9 @@ $lang['js']['title4']  = 'Unassigned task, no deadline.';
 $lang['title_intime']  = 'There are %1$d open tasks.';
 $lang['title_late']    = 'There are %1$d open tasks, %2$d are late.';
 $lang['title_alldone'] = 'All tasks done.';
+$lang['tasks_user_none']            = 'You have no open tasks.';
+$lang['tasks_user_intime']          = 'You have %1$d open tasks.';
+$lang['prefix_tasks_user']          = 'your open tasks: ';
 
 $lang['js']['title_done']   = 'All tasks done.';
 $lang['js']['title_undone']  = 'There are %1$d open tasks.';

pix/clipboard-text.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+    <path d="M17,9H7V7H17M17,13H7V11H17M14,17H7V15H14M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" />
+</svg>

script.js

@@ -1,3 +1,4 @@
 jQuery(function () {
     /* DOKUWIKI:include scripts/general.js */
+    /* DOKUWIKI:include scripts/userTasksOverlay.js */
 });

scripts/userTasksOverlay.js

@@ -0,0 +1,34 @@
+(function() {
+    'use strict';
+
+    var $userTasksButtons = jQuery('a.plugin__do_usertasks');
+    $userTasksButtons.click(function handleUserTasksButtonClick(event) {
+        var $this;
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (jQuery('.plugin__do_usertasks_list').length) {
+            jQuery('.plugin__do_usertasks_list').toggle();
+            return;
+        }
+
+        $this = jQuery(this);
+
+        jQuery.get(
+            DOKU_BASE + 'lib/exe/ajax.php',
+            {
+                call: 'plugin_do_userTasksOverlay',
+            },
+        ).done(function showUserTasksOverlay(data) {
+            var $wrapper = jQuery('<div class="plugin__do_usertasks_list"></div>');
+            $wrapper.css({'display': 'inline-block', 'position': 'absolute'});
+            $wrapper.append(jQuery(data.html));
+            $wrapper.appendTo('#dokuwiki__header');
+            $wrapper.position({
+                my: 'middle top',
+                at: 'right bottom',
+                of: $this,
+            });
+        });
+    });
+})();

style.less

@@ -93,3 +93,31 @@ div.plugin__do_pagetasks span {
 .plugin__do_pagetasks span.do_done   { background-image: url(pix/tasklist_green.png); }
 .plugin__do_pagetasks span.do_undone { background-image: url(pix/tasklist_yellow.png); }
 .plugin__do_pagetasks span.do_late   { background-image: url(pix/tasklist_red.png); }
+
+.plugin__do_usertasks {
+    svg {
+        width: 12px;
+        vertical-align: text-top;
+
+        path {
+            fill: @ini_link;
+        }
+    }
+    &:hover {
+        &:not(.noopentasks) {
+            border-bottom: 1px solid @ini_link;
+        }
+    }
+    cursor: pointer;
+
+    &.noopentasks {
+        cursor: inherit;
+    }
+}
+.plugin__do_usertasks_list {
+    background-color: @ini_background;
+
+    table {
+        margin: 0;
+    }
+}