From d8fb954f00847ebdb2bea3d5b76cd2df1dc44a33 Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Tue, 21 Jul 2015 19:50:10 -0400 Subject: Add loading icon on board view --- assets/css/app.css | 6 ++++++ assets/css/src/base.css | 6 ++++++ assets/js/app.js | 38 +++++++++++++++++++------------------- assets/js/src/base.js | 8 ++++++++ assets/js/src/board.js | 7 ++++++- 5 files changed, 45 insertions(+), 20 deletions(-) (limited to 'assets') diff --git a/assets/css/app.css b/assets/css/app.css index f428587b..9c7e64c6 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -78,6 +78,12 @@ hr { #ui-datepicker-div { font-size: 0.8em; } + +#app-loading-icon { + position: fixed; + right: 3px; + bottom: 3px; +} /* links */ a { color: #3366CC; diff --git a/assets/css/src/base.css b/assets/css/src/base.css index 6576d3cc..0175b531 100644 --- a/assets/css/src/base.css +++ b/assets/css/src/base.css @@ -57,3 +57,9 @@ hr { #ui-datepicker-div { font-size: 0.8em; } + +#app-loading-icon { + position: fixed; + right: 3px; + bottom: 3px; +} diff --git a/assets/js/app.js b/assets/js/app.js index 8e1fed89..5c4c2c33 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -140,25 +140,25 @@ c,a,e),l[d.key][c?"unshift":"push"]({callback:b,modifiers:d.modifiers,action:d.a unbind:function(a,b){return m.bind(a,function(){},b)},trigger:function(a,b){if(q[a+":"+b])q[a+":"+b]({},a);return this},reset:function(){l={};q={};return this},stopCallback:function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable},handleKey:function(a,b,d){var c=C(a,b,d),e;b={};var f=0,g=!1;for(e=0;e
'+b+"
");$("#popover-container").click(function(){Kanboard.ClosePopover()}); -$("#popover-content").click(function(a){a.stopPropagation()});$(".close-popover").click(function(a){a.preventDefault();Kanboard.ClosePopover()});Mousetrap.bindGlobal("esc",function(){Kanboard.ClosePopover()});a&&a()})},ClosePopover:function(){$("#popover-container").remove();Kanboard.Screenshot.Destroy()},IsVisible:function(){var c="";"undefined"!==typeof document.hidden?c="visibilityState":"undefined"!==typeof document.mozHidden?c="mozVisibilityState":"undefined"!==typeof document.msHidden?c="msVisibilityState": -"undefined"!==typeof document.webkitHidden&&(c="webkitVisibilityState");return""!=c?"visible"==document[c]:!0},SetStorageItem:function(c,a){"undefined"!==typeof Storage&&localStorage.setItem(c,a)},GetStorageItem:function(c){return"undefined"!==typeof Storage?localStorage.getItem(c):""},MarkdownPreview:function(c){c.preventDefault();var a=$(this),b=$(this).closest("ul"),f=$(".write-area"),g=$(".preview-area"),h=$("textarea");$.ajax({url:"?controller=app&action=preview",contentType:"application/json", -type:"POST",processData:!1,dataType:"html",data:JSON.stringify({text:h.val()})}).done(function(c){b.find("li").removeClass("form-tab-selected");a.parent().addClass("form-tab-selected");g.find(".markdown").html(c);g.css("height",h.css("height"));g.css("width",h.css("width"));f.hide();g.show()})},MarkdownWriter:function(c){c.preventDefault();$(this).closest("ul").find("li").removeClass("form-tab-selected");$(this).parent().addClass("form-tab-selected");$(".write-area").show();$(".preview-area").hide()}, -CheckSession:function(){$(".form-login").length||$.ajax({cache:!1,url:$("body").data("status-url"),statusCode:{401:function(){window.location=$("body").data("login-url")}}})},Init:function(){$(".chosen-select").chosen({width:"200px",no_results_text:$(".chosen-select").data("notfound"),disable_search_threshold:10});$("#board-selector").chosen({width:180,no_results_text:$("#board-selector").data("notfound")});$("#board-selector").change(function(){window.location=$(this).attr("data-board-url").replace(/PROJECT_ID/g, -$(this).val())});window.setInterval(Kanboard.CheckSession,6E4);Mousetrap.bindGlobal("mod+enter",function(){$("form").submit()});Mousetrap.bind("b",function(a){a.preventDefault();$("#board-selector").trigger("chosen:open")});Mousetrap.bind("f",function(a){a.preventDefault();(a=document.getElementById("form-search"))&&a.focus()});Mousetrap.bind("v b",function(a){a=$(".view-board");a.length&&(window.location=a.attr("href"))});Mousetrap.bind("v c",function(a){a=$(".view-calendar");a.length&&(window.location= -a.attr("href"))});Mousetrap.bind("v l",function(a){a=$(".view-listing");a.length&&(window.location=a.attr("href"))});$(document).on("focus","#form-search",function(){$("#form-search")[0].setSelectionRange&&$("#form-search")[0].setSelectionRange($("#form-search").val().length,$("#form-search").val().length)});$(document).on("click",".filter-helper",function(a){a.preventDefault();$("#form-search").val($(this).data("filter"));$("form.search").submit()});$(document).on("click",".sidebar-collapse",function(a){a.preventDefault(); -$(".sidebar-container").addClass("sidebar-collapsed");$(".sidebar-expand").show();$(".sidebar h2").hide();$(".sidebar ul").hide();$(".sidebar-collapse").hide()});$(document).on("click",".sidebar-expand",function(a){a.preventDefault();$(".sidebar-container").removeClass("sidebar-collapsed");$(".sidebar-collapse").show();$(".sidebar h2").show();$(".sidebar ul").show();$(".sidebar-expand").hide()});var c=!1;$("select.task-reload-project-destination").change(function(){c||($(".loading-icon").show(),c= -!0,window.location=$(this).data("redirect").replace(/PROJECT_ID/g,$(this).val()))});$.datepicker.setDefaults($.datepicker.regional[$("body").data("js-lang")]);$(".alert-fade-out").delay(4E3).fadeOut(800,function(){$(this).remove()});Kanboard.InitAfterAjax()},InitAfterAjax:function(){$(document).on("click",".popover",Kanboard.Popover);$("[autofocus]").each(function(c,a){$(this).focus()});$(".form-date").datepicker({showOtherMonths:!0,selectOtherMonths:!0,dateFormat:"yy-mm-dd",constrainInput:!1});$(".form-datetime").datetimepicker({controlType:"select", -oneLine:!0,dateFormat:"yy-mm-dd",constrainInput:!1});$("#markdown-preview").click(Kanboard.MarkdownPreview);$("#markdown-write").click(Kanboard.MarkdownWriter);$(".auto-select").focus(function(){$(this).select()});$(".dropit-submenu").hide();$(".dropdown").not(".dropit").dropit({triggerParentEl:"span"});$(".task-autocomplete").length&&(""==$(".opposite_task_id").val()&&$(".task-autocomplete").parent().find("input[type=submit]").attr("disabled","disabled"),$(".task-autocomplete").autocomplete({source:$(".task-autocomplete").data("search-url"), -minLength:1,select:function(c,a){var b=$(".task-autocomplete").data("dst-field");$("input[name="+b+"]").val(a.item.id);$(".task-autocomplete").parent().find("input[type=submit]").removeAttr("disabled")}}));$(".tooltip").tooltip({content:function(){return'
'+$(this).attr("title")+"
"},position:{my:"left-20 top",at:"center bottom+9",using:function(c,a){$(this).css(c);var b=a.target.left+a.target.width/2-a.element.left-20;$("
").addClass("tooltip-arrow").addClass(a.vertical).addClass(1> -b?"align-left":"align-right").appendTo(this)}}});Kanboard.Exists("screenshot-zone")&&Kanboard.Screenshot.Init()}}}(); -(function(){function c(a){a.preventDefault();a.stopPropagation();Kanboard.Popover(a,Kanboard.InitAfterAjax)}function a(){Mousetrap.bind("n",function(){Kanboard.OpenPopover($("#board").data("task-creation-url"),Kanboard.InitAfterAjax)});Mousetrap.bind("s",function(){$.ajax({cache:!1,url:$('.filter-display-mode:not([style="display: none;"]) a').attr("href"),success:function(a){$("#board-container").remove();$("#main").append(a);Kanboard.InitAfterAjax();clearInterval(k);b();e();$(".filter-display-mode").toggle()}})}); -Mousetrap.bind("c",function(){d()})}function b(){$(".column").sortable({delay:300,distance:5,connectWith:".column",placeholder:"draggable-placeholder",items:".draggable-item",stop:function(a,b){f(b.item.attr("data-task-id"),b.item.parent().attr("data-column-id"),b.item.index()+1,b.item.parent().attr("data-swimlane-id"))}});$("#board").on("click",".task-board-popover",c);$("#board").on("click",".task-board",function(){window.location=$(this).data("task-url")});$(".task-board-tooltip").tooltip({track:!1, -position:{my:"left-20 top",at:"center bottom+9",using:function(a,b){$(this).css(a);var e=b.target.left+b.target.width/2-b.element.left-20;$("
").addClass("tooltip-arrow").addClass(b.vertical).addClass(1>e?"align-left":"align-right").appendTo(this)}},content:function(a){if(a=$(this).attr("data-href")){var b=this;$.get(a,function l(a){$(".ui-tooltip-content:visible").html(a);a=$(".ui-tooltip:visible");a.css({top:"",left:""});a.children(".tooltip-arrow").remove();var e=$(b).tooltip("option","position"); -e.of=$(b);a.position(e);$("#tooltip-subtasks a").not(".popover").click(function(a){a.preventDefault();a.stopPropagation();$(this).hasClass("popover-subtask-restriction")?(Kanboard.OpenPopover($(this).attr("href")),$(b).tooltip("close")):$.get($(this).attr("href"),l)})});return''}}}).on("mouseenter",function(){var a=this;$(this).tooltip("open");$(".ui-tooltip").on("mouseleave",function(){$(a).tooltip("close")})}).on("mouseleave focusout",function(a){a.stopImmediatePropagation(); -var b=this;setTimeout(function(){$(".ui-tooltip:hover").length||$(b).tooltip("close")},100)});var a=parseInt($("#board").attr("data-check-interval"));0 ')},HideLoadingIcon:function(){$("#app-loading-icon").remove()},Exists:function(c){return document.getElementById(c)?!0:!1},Popover:function(c,a){c.preventDefault();c.stopPropagation();var b=c.target.getAttribute("href");b||(b=c.target.getAttribute("data-href"));b&&Kanboard.OpenPopover(b,a)},OpenPopover:function(c, +a){$.get(c,function(b){$("body").append('
'+b+"
");$("#popover-container").click(function(){Kanboard.ClosePopover()});$("#popover-content").click(function(a){a.stopPropagation()});$(".close-popover").click(function(a){a.preventDefault();Kanboard.ClosePopover()});Mousetrap.bindGlobal("esc",function(){Kanboard.ClosePopover()});a&&a()})},ClosePopover:function(){$("#popover-container").remove();Kanboard.Screenshot.Destroy()},IsVisible:function(){var c= +"";"undefined"!==typeof document.hidden?c="visibilityState":"undefined"!==typeof document.mozHidden?c="mozVisibilityState":"undefined"!==typeof document.msHidden?c="msVisibilityState":"undefined"!==typeof document.webkitHidden&&(c="webkitVisibilityState");return""!=c?"visible"==document[c]:!0},SetStorageItem:function(c,a){"undefined"!==typeof Storage&&localStorage.setItem(c,a)},GetStorageItem:function(c){return"undefined"!==typeof Storage?localStorage.getItem(c):""},MarkdownPreview:function(c){c.preventDefault(); +var a=$(this),b=$(this).closest("ul"),f=$(".write-area"),g=$(".preview-area"),h=$("textarea");$.ajax({url:"?controller=app&action=preview",contentType:"application/json",type:"POST",processData:!1,dataType:"html",data:JSON.stringify({text:h.val()})}).done(function(c){b.find("li").removeClass("form-tab-selected");a.parent().addClass("form-tab-selected");g.find(".markdown").html(c);g.css("height",h.css("height"));g.css("width",h.css("width"));f.hide();g.show()})},MarkdownWriter:function(c){c.preventDefault(); +$(this).closest("ul").find("li").removeClass("form-tab-selected");$(this).parent().addClass("form-tab-selected");$(".write-area").show();$(".preview-area").hide()},CheckSession:function(){$(".form-login").length||$.ajax({cache:!1,url:$("body").data("status-url"),statusCode:{401:function(){window.location=$("body").data("login-url")}}})},Init:function(){$(".chosen-select").chosen({width:"200px",no_results_text:$(".chosen-select").data("notfound"),disable_search_threshold:10});$("#board-selector").chosen({width:180, +no_results_text:$("#board-selector").data("notfound")});$("#board-selector").change(function(){window.location=$(this).attr("data-board-url").replace(/PROJECT_ID/g,$(this).val())});window.setInterval(Kanboard.CheckSession,6E4);Mousetrap.bindGlobal("mod+enter",function(){$("form").submit()});Mousetrap.bind("b",function(a){a.preventDefault();$("#board-selector").trigger("chosen:open")});Mousetrap.bind("f",function(a){a.preventDefault();(a=document.getElementById("form-search"))&&a.focus()});Mousetrap.bind("v b", +function(a){a=$(".view-board");a.length&&(window.location=a.attr("href"))});Mousetrap.bind("v c",function(a){a=$(".view-calendar");a.length&&(window.location=a.attr("href"))});Mousetrap.bind("v l",function(a){a=$(".view-listing");a.length&&(window.location=a.attr("href"))});$(document).on("focus","#form-search",function(){$("#form-search")[0].setSelectionRange&&$("#form-search")[0].setSelectionRange($("#form-search").val().length,$("#form-search").val().length)});$(document).on("click",".filter-helper", +function(a){a.preventDefault();$("#form-search").val($(this).data("filter"));$("form.search").submit()});$(document).on("click",".sidebar-collapse",function(a){a.preventDefault();$(".sidebar-container").addClass("sidebar-collapsed");$(".sidebar-expand").show();$(".sidebar h2").hide();$(".sidebar ul").hide();$(".sidebar-collapse").hide()});$(document).on("click",".sidebar-expand",function(a){a.preventDefault();$(".sidebar-container").removeClass("sidebar-collapsed");$(".sidebar-collapse").show();$(".sidebar h2").show(); +$(".sidebar ul").show();$(".sidebar-expand").hide()});var c=!1;$("select.task-reload-project-destination").change(function(){c||($(".loading-icon").show(),c=!0,window.location=$(this).data("redirect").replace(/PROJECT_ID/g,$(this).val()))});$.datepicker.setDefaults($.datepicker.regional[$("body").data("js-lang")]);$(".alert-fade-out").delay(4E3).fadeOut(800,function(){$(this).remove()});Kanboard.InitAfterAjax()},InitAfterAjax:function(){$(document).on("click",".popover",Kanboard.Popover);$("[autofocus]").each(function(c, +a){$(this).focus()});$(".form-date").datepicker({showOtherMonths:!0,selectOtherMonths:!0,dateFormat:"yy-mm-dd",constrainInput:!1});$(".form-datetime").datetimepicker({controlType:"select",oneLine:!0,dateFormat:"yy-mm-dd",constrainInput:!1});$("#markdown-preview").click(Kanboard.MarkdownPreview);$("#markdown-write").click(Kanboard.MarkdownWriter);$(".auto-select").focus(function(){$(this).select()});$(".dropit-submenu").hide();$(".dropdown").not(".dropit").dropit({triggerParentEl:"span"});$(".task-autocomplete").length&& +(""==$(".opposite_task_id").val()&&$(".task-autocomplete").parent().find("input[type=submit]").attr("disabled","disabled"),$(".task-autocomplete").autocomplete({source:$(".task-autocomplete").data("search-url"),minLength:1,select:function(c,a){var b=$(".task-autocomplete").data("dst-field");$("input[name="+b+"]").val(a.item.id);$(".task-autocomplete").parent().find("input[type=submit]").removeAttr("disabled")}}));$(".tooltip").tooltip({content:function(){return'
'+$(this).attr("title")+ +"
"},position:{my:"left-20 top",at:"center bottom+9",using:function(c,a){$(this).css(c);var b=a.target.left+a.target.width/2-a.element.left-20;$("
").addClass("tooltip-arrow").addClass(a.vertical).addClass(1>b?"align-left":"align-right").appendTo(this)}}});Kanboard.Exists("screenshot-zone")&&Kanboard.Screenshot.Init()}}}(); +(function(){function c(a){a.preventDefault();a.stopPropagation();Kanboard.Popover(a,Kanboard.InitAfterAjax)}function a(){Mousetrap.bind("n",function(){Kanboard.OpenPopover($("#board").data("task-creation-url"),Kanboard.InitAfterAjax)});Mousetrap.bind("s",function(){Kanboard.ShowLoadingIcon();$.ajax({cache:!1,url:$('.filter-display-mode:not([style="display: none;"]) a').attr("href"),success:function(a){$("#board-container").remove();$("#main").append(a);Kanboard.InitAfterAjax();clearInterval(k);b(); +e();$(".filter-display-mode").toggle();Kanboard.HideLoadingIcon()}})});Mousetrap.bind("c",function(){d()})}function b(){$(".column").sortable({delay:300,distance:5,connectWith:".column",placeholder:"draggable-placeholder",items:".draggable-item",stop:function(a,b){f(b.item.attr("data-task-id"),b.item.parent().attr("data-column-id"),b.item.index()+1,b.item.parent().attr("data-swimlane-id"))}});$("#board").on("click",".task-board-popover",c);$("#board").on("click",".task-board",function(){window.location= +$(this).data("task-url")});$(".task-board-tooltip").tooltip({track:!1,position:{my:"left-20 top",at:"center bottom+9",using:function(a,b){$(this).css(a);var e=b.target.left+b.target.width/2-b.element.left-20;$("
").addClass("tooltip-arrow").addClass(b.vertical).addClass(1>e?"align-left":"align-right").appendTo(this)}},content:function(a){if(a=$(this).attr("data-href")){var b=this;$.get(a,function l(a){$(".ui-tooltip-content:visible").html(a);a=$(".ui-tooltip:visible");a.css({top:"",left:""}); +a.children(".tooltip-arrow").remove();var e=$(b).tooltip("option","position");e.of=$(b);a.position(e);$("#tooltip-subtasks a").not(".popover").click(function(a){a.preventDefault();a.stopPropagation();$(this).hasClass("popover-subtask-restriction")?(Kanboard.OpenPopover($(this).attr("href")),$(b).tooltip("close")):$.get($(this).attr("href"),l)})});return''}}}).on("mouseenter",function(){var a=this;$(this).tooltip("open");$(".ui-tooltip").on("mouseleave",function(){$(a).tooltip("close")})}).on("mouseleave focusout", +function(a){a.stopImmediatePropagation();var b=this;setTimeout(function(){$(".ui-tooltip:hover").length||$(b).tooltip("close")},100)});var a=parseInt($("#board").attr("data-check-interval"));0 '); + }, + + HideLoadingIcon: function() { + $("#app-loading-icon").remove(); + }, + // Return true if the element#id exists Exists: function(id) { if (document.getElementById(id)) { diff --git a/assets/js/src/board.js b/assets/js/src/board.js index 45dbd24a..291ef737 100644 --- a/assets/js/src/board.js +++ b/assets/js/src/board.js @@ -20,6 +20,8 @@ }); Mousetrap.bind("s", function() { + Kanboard.ShowLoadingIcon(); + $.ajax({ cache: false, url: $('.filter-display-mode:not([style="display: none;"]) a').attr('href'), @@ -31,6 +33,7 @@ board_load_events(); compactview_reload(); $('.filter-display-mode').toggle(); + Kanboard.HideLoadingIcon(); } }); }); @@ -128,7 +131,7 @@ }); }); - return ''; + return ''; } }).on("mouseenter", function() { @@ -169,6 +172,7 @@ function board_save(taskId, columnId, position, swimlaneId) { board_unload_events(); + Kanboard.ShowLoadingIcon(); $.ajax({ cache: false, @@ -188,6 +192,7 @@ Kanboard.InitAfterAjax(); board_load_events(); compactview_reload(); + Kanboard.HideLoadingIcon(); } }); } -- cgit v1.2.3