Improve javascript code and remove CSP errors

app/Controller/Base.php

@@ -107,7 +107,7 @@ abstract class Base
         $this->session->open(BASE_URL_DIRECTORY, SESSION_SAVE_PATH);
 
         // HTTP secure headers
-        $this->response->csp();
+        $this->response->csp(array('style-src' => "'self' 'unsafe-inline'"));
         $this->response->nosniff();
         $this->response->xss();
         $this->response->hsts();

app/Templates/board_index.php

@@ -29,5 +29,3 @@
     <?php endif ?>
 
 </section>
-
-<?= Helper\js('assets/js/board.js') ?>

app/Templates/board_task.php

@@ -20,13 +20,13 @@
 
 <?php else: ?>
 
-    <a class="task-board-popover" href="?controller=task&amp;action=edit&amp;task_id=<?= $task['id'] ?>" title="<?= t('Edit this task') ?>">#<?= $task['id'] ?></a> -
+    <a class="task-edit-popover" href="?controller=task&amp;action=edit&amp;task_id=<?= $task['id'] ?>" title="<?= t('Edit this task') ?>">#<?= $task['id'] ?></a> -
 
     <span class="task-board-user">
     <?php if (! empty($task['owner_id'])): ?>
-        <a class="task-board-popover" href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>"><?= t('Assigned to %s', $task['username']) ?></a>
+        <a class="assignee-popover" href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>"><?= t('Assigned to %s', $task['username']) ?></a>
     <?php else: ?>
-        <a class="task-board-popover" href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>" class="task-board-nobody"><?= t('Nobody assigned') ?></a>
+        <a class="assignee-popover" href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>" class="task-board-nobody"><?= t('Nobody assigned') ?></a>
     <?php endif ?>
     </span>
 

app/Templates/file_show.php

@@ -8,7 +8,7 @@
         <a href="?controller=file&amp;action=download&amp;file_id=<?= $file['id'] ?>&amp;task_id=<?= $task['id'] ?>"><?= Helper\escape($file['name']) ?></a>
         <span class="task-show-file-actions">
             <?php if ($file['is_image']): ?>
-                <a href="?controller=file&amp;action=open&amp;file_id=<?= $file['id'] ?>&amp;task_id=<?= $task['id'] ?>" class="popover"><?= t('open') ?></a>,
+                <a href="?controller=file&amp;action=open&amp;file_id=<?= $file['id'] ?>&amp;task_id=<?= $task['id'] ?>" class="file-popover"><?= t('open') ?></a>,
             <?php endif ?>
             <a href="?controller=file&amp;action=confirm&amp;file_id=<?= $file['id'] ?>&amp;task_id=<?= $task['id'] ?>"><?= t('remove') ?></a>
         </span>

app/Templates/layout.php

@@ -10,6 +10,7 @@
         <?= Helper\js('assets/js/jquery-ui-1.10.4.custom.min.js') ?>
         <?= Helper\js('assets/js/jquery.ui.touch-punch.min.js') ?>
         <?= Helper\js('assets/js/chosen.jquery.min.js') ?>
+        <?= Helper\js('assets/js/app.js') ?>
 
         <?= Helper\css('assets/css/app.css') ?>
         <?= Helper\css('assets/css/font-awesome.min.css') ?>

app/Templates/task_edit.php

@@ -1,11 +1,11 @@
 <section id="main">
     <div class="page-header">
         <h2><?= t('Edit a task') ?></h2>
-<?php if (!$ajax): ?>
+        <?php if (! $ajax): ?>
         <ul>
             <li><a href="?controller=board&amp;action=show&amp;project_id=<?= $task['project_id'] ?>"><?= t('Back to the board') ?></a></li>
         </ul>
-<?php endif ?>
+        <?php endif ?>
     </div>
     <section>
     <form method="post" action="?controller=task&amp;action=update&amp;task_id=<?= $task['id'] ?>&amp;ajax=<?= $ajax ?>" autocomplete="off">
@@ -50,14 +50,12 @@
         <div class="form-actions">
             <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>
             <?= t('or') ?>
-<?php if ($ajax): ?>
+            <?php if ($ajax): ?>
-            <a href="?controller=board&amp;action=show&amp;project_id=<?= $task['project_id'] ?>"><?= t('cancel') ?></a>
+                <a href="?controller=board&amp;action=show&amp;project_id=<?= $task['project_id'] ?>"><?= t('cancel') ?></a>
-<?php else: ?>
+            <?php else: ?>
-            <a href="?controller=task&amp;action=show&amp;task_id=<?= $task['id'] ?>"><?= t('cancel') ?></a>
+                <a href="?controller=task&amp;action=show&amp;task_id=<?= $task['id'] ?>"><?= t('cancel') ?></a>
-<?php endif ?>
+            <?php endif ?>
         </div>
     </form>
     </section>
 </section>
-
-<?= Helper\js('assets/js/task.js'); ?>

app/Templates/task_layout.php

@@ -13,6 +13,4 @@
             <?= $task_content_for_layout ?>
         </div>
     </section>
-</section>
+</section>
-
-<?= Helper\js('assets/js/task.js') ?>

app/Templates/task_new.php

@@ -49,6 +49,4 @@
         </div>
     </form>
     </section>
-</section>
+</section>
-
-<?= Helper\js('assets/js/task.js'); ?>

assets/js/app.js

@@ -1,4 +1,60 @@
-(function () {
+
+// Common functions
+var Kanboard = (function() {
+
+    return {
+
+        // Display a popup
+        Popover: function(e, callback) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            $.get(e.target.getAttribute("href"), function(content) {
+
+                $("body").append('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');
+
+                $("#popover-container").click(function() {
+                    $(this).remove();
+                });
+
+                $("#popover-content").click(function(e) {
+                    e.stopPropagation();
+                });
+
+                if (callback) {
+                    callback();
+                }
+            });
+        },
+
+        // Return true if the page is visible
+        IsVisible: function()
+        {
+            var property = "";
+
+            if (typeof document.hidden !== "undefined") {
+                property = "visibilityState";
+            } else if (typeof document.mozHidden !== "undefined") {
+                property = "mozVisibilityState";
+            } else if (typeof document.msHidden !== "undefined") {
+                property = "msVisibilityState";
+            } else if (typeof document.webkitHidden !== "undefined") {
+                property = "webkitVisibilityState";
+            }
+
+            if (property != "") {
+                return document[property] == "visible";
+            }
+
+            return true;
+        }
+    };
+
+})();
+
+
+// Board related functions
+Kanboard.Board = (function() {
 
     var checkInterval = null;
 
@@ -14,17 +70,12 @@
             }
         });
 
-        // Open assignee popover
+        // Assignee change
-        $(".task-board-popover").click(function(e) {
+        $(".assignee-popover").click(Kanboard.Popover);
 
-            e.preventDefault();
+        // Task edit popover
-            e.stopPropagation();
+        $(".task-edit-popover").click(function(e) {
-
+            Kanboard.Popover(e, Kanboard.Task.Init);
-            var href = $(this).attr('href');
-
-            $.get(href, function(data) {
-                popover_show(data);
-            });
         });
 
         // Redirect to the task details page
@@ -53,8 +104,8 @@
     function board_save()
     {
         var data = [];
-        var $boardSelector = $("#board");
+        var boardSelector = $("#board");
-        var projectId = $boardSelector.attr("data-project-id");
+        var projectId = boardSelector.attr("data-project-id");
 
         board_unload_events();
 
@@ -73,7 +124,7 @@
         $.ajax({
             cache: false,
             url: "?controller=board&action=save&project_id=" + projectId,
-            data: {"positions": data, "csrf_token": $boardSelector.attr("data-csrf-token")},
+            data: {"positions": data, "csrf_token": boardSelector.attr("data-csrf-token")},
             type: "POST",
             success: function(data) {
                 $("#board").remove();
@@ -87,17 +138,17 @@
     // Check if a board have been changed by someone else
     function board_check()
     {
-        var $boardSelector = $("#board");
+        var boardSelector = $("#board");
-        var projectId = $boardSelector.attr("data-project-id");
+        var projectId = boardSelector.attr("data-project-id");
-        var timestamp = $boardSelector.attr("data-time");
+        var timestamp = boardSelector.attr("data-time");
 
-        if (is_visible() && projectId != undefined && timestamp != undefined) {
+        if (Kanboard.IsVisible() && projectId != undefined && timestamp != undefined) {
             $.ajax({
                 cache: false,
                 url: "?controller=board&action=check&project_id=" + projectId + "&timestamp=" + timestamp,
                 statusCode: {
                     200: function(data) {
-                        $boardSelector.remove();
+                        boardSelector.remove();
                         $("#main").append(data);
                         board_unload_events();
                         board_load_events();
@@ -152,52 +203,53 @@
         });
     }
 
-    // Show popup
+    return {
-    function popover_show(content)
+        Init: function() {
-    {
+            board_load_events();
-        $("body").append('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');
+            filter_load_events();
 
-        $("#popover-container").click(function() {
+            // Project select box
-            $(this).remove();
+            $("#board-selector").chosen({
-        });
+                width: 180
+            });
 
-        $("#popover-content").click(function(e) {
+            $("#board-selector").change(function() {
-            e.stopPropagation();
+                window.location = "?controller=board&action=show&project_id=" + $(this).val();
-        });
+            });
-    }
-
-    // Return true if the page is visible
-    function is_visible()
-    {
-        var property = "";
-
-        if (typeof document.hidden !== "undefined") {
-            property = "visibilityState";
-        } else if (typeof document.mozHidden !== "undefined") {
-            property = "mozVisibilityState";
-        } else if (typeof document.msHidden !== "undefined") {
-            property = "msVisibilityState";
-        } else if (typeof document.webkitHidden !== "undefined") {
-            property = "webkitVisibilityState";
         }
+    };
 
-        if (property != "") {
+})();
-            return document[property] == "visible";
+
+
+// Task related functions
+Kanboard.Task = (function() {
+
+    return {
+        Init: function() {
+
+            // Datepicker for the due date
+            $("#form-date_due").datepicker({
+                showOtherMonths: true,
+                selectOtherMonths: true,
+                dateFormat: 'yy-mm-dd'
+            });
+
+            // Image preview for attachments
+            $(".file-popover").click(Kanboard.Popover);
         }
+    };
 
-        return true;
+})();
+
+
+// Initialization
+$(function() {
+
+    if ($("#board").length) {
+        Kanboard.Board.Init();
     }
-
+    else {
-    // Initialization
+        Kanboard.Task.Init();
-    $(function() {
+    }
-        board_load_events();
+});
-        filter_load_events();
-
-        $("#board-selector").chosen();
-
-        $("#board-selector").change(function() {
-            window.location = "?controller=board&action=show&project_id=" + $(this).val();
-        });
-    });
-
-}());

assets/js/task.js

@@ -1,33 +0,0 @@
-(function () {
-
-    // Show popup
-    function popover_show(content)
-    {
-        $("body").append('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');
-
-        $("#popover-container").click(function() {
-            $(this).remove();
-        });
-
-        $("#popover-content").click(function(e) {
-            e.stopPropagation();
-        });
-    }
-
-    $(".popover").click(function(e) {
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        $.get($(this).attr("href"), function(data) {
-            popover_show(data);
-        });
-    });
-
-    $("#form-date_due").datepicker({
-        showOtherMonths: true,
-        selectOtherMonths: true,
-        dateFormat: 'yy-mm-dd'
-    });
-
-}());