From ffb392617895095b824a35150e620a68920f9260 Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Sun, 11 Dec 2016 15:46:54 -0500 Subject: Replace Chosen jQuery plugin by custom UI component --- ChangeLog | 3 +- app/Template/group/associate.php | 6 +- app/Template/header/board_selector.php | 26 +- app/Template/project_user_overview/sidebar.php | 21 +- assets/css/app.min.css | 2 +- assets/css/chosen-sprite.png | Bin 538 -> 0 bytes assets/css/chosen-sprite@2x.png | Bin 738 -> 0 bytes assets/css/vendor.min.css | 452 +------ assets/js/app.min.js | 4 +- assets/js/components/keyboard-shortcuts.js | 4 + .../js/components/select-dropdown-autocomplete.js | 240 ++++ assets/js/core/base.js | 25 + assets/js/core/dom.js | 6 +- assets/js/src/App.js | 28 - assets/js/vendor.min.js | 1283 +------------------- assets/sass/_header.sass | 10 +- assets/sass/_input_addon.sass | 18 +- assets/sass/_select_dropdown.sass | 45 + assets/sass/app.sass | 1 + bower.json | 1 - gulpfile.js | 5 - 21 files changed, 385 insertions(+), 1795 deletions(-) delete mode 100644 assets/css/chosen-sprite.png delete mode 100644 assets/css/chosen-sprite@2x.png create mode 100644 assets/js/components/keyboard-shortcuts.js create mode 100644 assets/js/components/select-dropdown-autocomplete.js create mode 100644 assets/sass/_select_dropdown.sass diff --git a/ChangeLog b/ChangeLog index 0e085773..c486677e 100644 --- a/ChangeLog +++ b/ChangeLog @@ -5,7 +5,8 @@ New features: Improvements: -* Rewrite ui component that change user/group roles +* Replace Chosen jQuery plugin by custom UI component +* Rewrite UI component that change user/group roles Bug fixes: diff --git a/app/Template/group/associate.php b/app/Template/group/associate.php index 87787568..24edd133 100644 --- a/app/Template/group/associate.php +++ b/app/Template/group/associate.php @@ -9,7 +9,11 @@ form->hidden('group_id', $values) ?> form->label(t('User'), 'user_id') ?> - form->select('user_id', $users, $values, $errors, array('required'), 'chosen-select') ?> + app->component('select-dropdown-autocomplete', array( + 'name' => 'user_id', + 'items' => $users, + 'defaultValue' => isset($values['user_id']) ? $values['user_id'] : null, + )) ?>
diff --git a/app/Template/header/board_selector.php b/app/Template/header/board_selector.php index b42d47f9..6f87b0d1 100644 --- a/app/Template/header/board_selector.php +++ b/app/Template/header/board_selector.php @@ -1,13 +1,13 @@ - +app->component('select-dropdown-autocomplete', array( + 'name' => 'boardId', + 'placeholder' => t('Display another project'), + 'items' => $board_selector, + 'redirect' => array( + 'regex' => 'PROJECT_ID', + 'url' => $this->url->to('BoardViewController', 'show', array('project_id' => 'PROJECT_ID')), + ), + 'onFocus' => array( + 'board.selector.open', + ) +)) ?> + diff --git a/app/Template/project_user_overview/sidebar.php b/app/Template/project_user_overview/sidebar.php index ccbf9cab..493f4cbf 100644 --- a/app/Template/project_user_overview/sidebar.php +++ b/app/Template/project_user_overview/sidebar.php @@ -1,14 +1,17 @@ ")}})}}),KB.onChange(".js-project-creation-select-options",function(t){var e=t.value;"0"===e?KB.find(".js-project-creation-options").hide():KB.find(".js-project-creation-options").show()}),KB.component("project-select-role",function(t,e){function o(t){s=!0,e.role=t.value,a(),n()}function n(){KB.http.postJson(e.url,{id:e.id,role:e.role}).success(function(){s=!1,d=!0,a()}).error(function(){s=!1,d=!1,l=!0,a()})}function a(){KB.dom(r).remove(),r=i(),t.appendChild(r)}function i(){var t=[],n=KB.dom("div");for(var a in e.roles)if(e.roles.hasOwnProperty(a)){var i={value:a,text:e.roles[a]};e.role===a&&(i.selected="selected"),t.push(i)}return n.add(KB.dom("select").change(o)["for"]("option",t).build()),s?(n.text(" "),n.add(KB.dom("i").attr("class","fa fa-spinner fa-pulse fa-fw").build())):d?(n.text(" "),n.add(KB.dom("i").attr("class","fa fa-check fa-fw icon-fade-out icon-success").build())):l&&(n.text(" "),n.add(KB.dom("i").attr("class","fa fa-check fa-fw icon-fade-out icon-error").build())),n.build()}var r,s=!1,d=!1,l=!1;this.render=function(){r=i(),t.appendChild(r)}}),KB.interval(60,function(){var t=KB.find("body").data("statusUrl"),e=KB.find("body").data("loginUrl");null===KB.find(".form-login")&&KB.http.get(t).error(function(){window.location=e})}),KB.component("submit-cancel",function(t,e){function o(){r=!0,KB.find("#modal-submit-button").replace(i()),KB.trigger("modal.submit")}function n(){KB.trigger("modal.cancel"),_KB.get("Popover").close()}function a(){r=!1,KB.find("#modal-submit-button").replace(i())}function i(){var t=KB.dom("button").click(o).attr("id","modal-submit-button").attr("type","submit").attr("class","btn btn-blue");return r&&t.disable().add(KB.dom("i").attr("class","fa fa-spinner fa-pulse").build()).text(" "),t.text(e.submitLabel).build()}var r=!1;this.render=function(){KB.on("modal.stop",a);var o=KB.dom("div").attr("class","form-actions").add(i()).text(" "+e.orLabel+" ").add(KB.dom("a").attr("href","#").click(n).text(e.cancelLabel).build()).build();t.appendChild(o)}}),KB.component("suggest-menu",function(t,e){function o(t){switch(t.keyCode){case 27:p();break;case 38:t.preventDefault(),t.stopImmediatePropagation(),l();break;case 40:t.preventDefault(),t.stopImmediatePropagation(),c();break;case 13:t.preventDefault(),t.stopImmediatePropagation(),i()}}function n(){i()}function a(t){KB.dom(t).hasClass("suggest-menu-item")&&(KB.find(".suggest-menu-item.active").removeClass("active"),KB.dom(t).addClass("active"))}function i(){t.focus();var e=KB.find(".suggest-menu-item.active"),o=e.data("value"),n=e.data("trigger"),a=t.value,i=r(t),s=n+o+" ",d=KB.utils.getSelectionPosition(t),l=a.substring(0,d.selectionStart-i.length),c=a.substring(d.selectionEnd),u=l.length+s.length;t.value=l+s+c,t.setSelectionRange(u,u),p()}function r(t){var e=t.value.substring(0,t.selectionEnd).split("\n"),o=e[e.length-1],n=o.split(" ");return n[n.length-1]}function s(){for(var t=[".popover-form","#popover-content","body"],e=0;e0&&(t.index=t.index-1),KB.dom(t.items[t.index]).addClass("active")}function c(){var t=d();t.index0&&b(g(t,o))}function v(t,e){var o=[];if(0===t.length)return e;for(var n=0;n0&&r.add(KB.html.label(e.positionLabel,"form-position")).add(KB.dom("select").attr("id","form-position")["for"]("option",t).build()).add(KB.html.radio(e.beforeLabel,"positionChoice","before")).add(KB.html.radio(e.afterLabel,"positionChoice","after")),r.build()}this.render=function(){KB.on("modal.submit",c);var o=KB.dom("div").on("submit",c).add(KB.dom("div").attr("id","message-container").build()).add(KB.html.label(e.swimlaneLabel,"form-swimlanes")).add(p()).add(KB.html.label(e.columnLabel,"form-columns")).add(u()).add(h()).build();t.appendChild(o)}}),KB.component("text-editor",function(t,e){function o(){var t=KB.dom("div").attr("class","text-editor-toolbar")["for"]("a",[{href:"#",html:' '+e.labelWrite,click:function(){a()}}]).build();return m=KB.dom("div").attr("class","text-editor-preview-area markdown").build(),KB.dom("div").attr("class","text-editor-view-mode").add(t).add(m).hide().build()}function n(){var t=KB.dom("div").attr("class","text-editor-toolbar")["for"]("a",[{href:"#",html:' '+e.labelPreview,click:function(){a()}},{href:"#",html:'',click:function(){s("**")}},{href:"#",html:'',click:function(){s("_")}},{href:"#",html:'',click:function(){s("~~")}},{href:"#",html:'',click:function(){l("> ")}},{href:"#",html:'',click:function(){l("* ")}},{href:"#",html:'',click:function(){d("```")}}]).build(),o=KB.dom("textarea");return o.attr("name",e.name),e.tabindex&&o.attr("tabindex",e.tabindex),e.required&&o.attr("required","required"),o.text(e.text),e.placeholder&&o.attr("placeholder",e.placeholder),u=o.build(),e.suggestOptions&&KB.getComponent("suggest-menu",u,e.suggestOptions).render(),KB.dom("div").attr("class","text-editor-write-mode").add(t).add(u).build()}function a(){KB.dom(m).html(marked(u.value,{sanitize:!0})),KB.dom(h).toggle(),KB.dom(f).toggle()}function i(){return u.value.substring(u.selectionStart,u.selectionEnd)}function r(t,e,o,n){return t.substring(0,e)+n+t.substring(o)}function s(t){var e=i();c(t+e+t),p(t)}function d(t){var e=i();c("\n"+t+"\n"+e+"\n"+t),p(t,2)}function l(t){var e=i();if(e.indexOf("\n")===-1)c("\n"+t+e);else{for(var o=e.split("\n"),n=0;n1&&("INPUT"===document.activeElement.tagName||"TEXTAREA"===document.activeElement.tagName?$(document.activeElement).parents("form").submit():t.get("Popover").isOpen()&&$("#popover-container form").submit())}),Mousetrap.bind("b",function(t){t.preventDefault(),$("#board-selector").trigger("chosen:open")}),Mousetrap.bindGlobal("esc",function(){document.getElementById("suggest-menu")||(t.get("Popover").close(),t.get("Dropdown").close())}),Mousetrap.bind("?",function(){t.get("Popover").open($("body").data("keyboard-shortcut-url"))})},Kanboard.App.prototype.focus=function(){$(document).on("focus",".auto-select",function(){$(this).select()}),$(document).on("mouseup",".auto-select",function(t){t.preventDefault()})},Kanboard.App.prototype.chosen=function(){$(".chosen-select").each(function(){var t=$(this).data("search-threshold");void 0===t&&(t=10),$(this).chosen({width:"180px",no_results_text:$(this).data("notfound"),disable_search_threshold:t})}),$(".select-auto-redirect").change(function(){var t=new RegExp($(this).data("redirect-regex"),"g");window.location=$(this).data("redirect-url").replace(t,$(this).val())})},Kanboard.App.prototype.datePicker=function(){var t=$("body"),e=t.data("js-date-format"),o=t.data("js-time-format"),n=t.data("js-lang");$.datepicker.setDefaults($.datepicker.regional[n]),$.timepicker.setDefaults($.timepicker.regional[n]),$(".form-date").datepicker({showOtherMonths:!0,selectOtherMonths:!0,dateFormat:e,constrainInput:!1}),$(".form-datetime").datetimepicker({dateFormat:e,timeFormat:o,constrainInput:!1})},Kanboard.App.prototype.tagAutoComplete=function(){$(".tag-autocomplete").select2({tags:!0})},Kanboard.App.prototype.autoComplete=function(){$(".autocomplete").each(function(){var t=$(this),e=t.data("dst-field"),o=t.data("dst-extra-field");""===$("#form-"+e).val()&&t.parent().find("button[type=submit]").attr("disabled","disabled"),t.autocomplete({source:t.data("search-url"),minLength:1,select:function(n,a){$("input[name="+e+"]").val(a.item.id),o&&$("input[name="+o+"]").val(a.item[o]),t.parent().find("button[type=submit]").removeAttr("disabled")}})})},Kanboard.App.prototype.hasId=function(t){return!!document.getElementById(t)},Kanboard.App.prototype.showLoadingIcon=function(){$("body").append(' ')},Kanboard.App.prototype.hideLoadingIcon=function(){$("#app-loading-icon").remove()},Kanboard.App.prototype.isVisible=function(){var t="";return"undefined"!=typeof document.hidden?t="visibilityState":"undefined"!=typeof document.mozHidden?t="mozVisibilityState":"undefined"!=typeof document.msHidden?t="msVisibilityState":"undefined"!=typeof document.webkitHidden&&(t="webkitVisibilityState"),""===t||"visible"==document[t]},Kanboard.BoardCollapsedMode=function(t){this.app=t},Kanboard.BoardCollapsedMode.prototype.keyboardShortcuts=function(){var t=this;t.app.hasId("board")&&Mousetrap.bind("s",function(){t.toggle()})},Kanboard.BoardCollapsedMode.prototype.toggle=function(){var t=this;this.app.showLoadingIcon(),$.ajax({cache:!1,url:$('.filter-display-mode:not([style="display: none;"]) a').attr("href"),success:function(e){$(".filter-display-mode").toggle(),t.app.get("BoardDragAndDrop").refresh(e)}})},Kanboard.BoardColumnView=function(t){this.app=t},Kanboard.BoardColumnView.prototype.execute=function(){this.app.hasId("board")&&this.render()},Kanboard.BoardColumnView.prototype.listen=function(){var t=this;$(document).on("click",".board-toggle-column-view",function(){t.toggle($(this).data("column-id"))})},Kanboard.BoardColumnView.prototype.onBoardRendered=function(){this.render()},Kanboard.BoardColumnView.prototype.render=function(){var t=this;$(".board-column-header").each(function(){var e=$(this).data("column-id");localStorage.getItem("hidden_column_"+e)&&t.hideColumn(e)})},Kanboard.BoardColumnView.prototype.toggle=function(t){localStorage.getItem("hidden_column_"+t)?this.showColumn(t):this.hideColumn(t)},Kanboard.BoardColumnView.prototype.hideColumn=function(t){$(".board-column-"+t+" .board-column-expanded").hide(),$(".board-column-"+t+" .board-column-collapsed").show(),$(".board-column-header-"+t+" .board-column-expanded").hide(),$(".board-column-header-"+t+" .board-column-collapsed").show(),$(".board-column-header-"+t).each(function(){$(this).removeClass("board-column-compact"),$(this).addClass("board-column-header-collapsed")}),$(".board-column-"+t).each(function(){$(this).addClass("board-column-task-collapsed")}),$(".board-column-"+t+" .board-rotation").each(function(){$(this).css("width",$(".board-column-"+t).height())}),localStorage.setItem("hidden_column_"+t,1)},Kanboard.BoardColumnView.prototype.showColumn=function(t){$(".board-column-"+t+" .board-column-expanded").show(),$(".board-column-"+t+" .board-column-collapsed").hide(),$(".board-column-header-"+t+" .board-column-expanded").show(),$(".board-column-header-"+t+" .board-column-collapsed").hide(),$(".board-column-header-"+t).removeClass("board-column-header-collapsed"),$(".board-column-"+t).removeClass("board-column-task-collapsed"),0==localStorage.getItem("horizontal_scroll")&&$(".board-column-header-"+t).addClass("board-column-compact"),localStorage.removeItem("hidden_column_"+t)},Kanboard.BoardHorizontalScrolling=function(t){this.app=t},Kanboard.BoardHorizontalScrolling.prototype.execute=function(){this.app.hasId("board")&&this.render()},Kanboard.BoardHorizontalScrolling.prototype.listen=function(){var t=this;$(document).on("click",".filter-toggle-scrolling",function(e){e.preventDefault(),t.toggle()})},Kanboard.BoardHorizontalScrolling.prototype.keyboardShortcuts=function(){var t=this;t.app.hasId("board")&&Mousetrap.bind("c",function(){t.toggle()})},Kanboard.BoardHorizontalScrolling.prototype.onBoardRendered=function(){this.render()},Kanboard.BoardHorizontalScrolling.prototype.toggle=function(){var t=localStorage.getItem("horizontal_scroll")||1;localStorage.setItem("horizontal_scroll",0==t?1:0),this.render()},Kanboard.BoardHorizontalScrolling.prototype.render=function(){0==localStorage.getItem("horizontal_scroll")?($(".filter-wide").show(),$(".filter-compact").hide(),$("#board-container").addClass("board-container-compact"),$("#board th:not(.board-column-header-collapsed)").addClass("board-column-compact")):($(".filter-wide").hide(),$(".filter-compact").show(),$("#board-container").removeClass("board-container-compact"),$("#board th").removeClass("board-column-compact"))},Kanboard.BoardPolling=function(t){this.app=t},Kanboard.BoardPolling.prototype.execute=function(){if(this.app.hasId("board")){var t=parseInt($("#board").attr("data-check-interval"));t>0&&window.setInterval(this.check.bind(this),1e3*t)}},Kanboard.BoardPolling.prototype.check=function(){if(this.app.isVisible()&&!this.app.get("BoardDragAndDrop").savingInProgress){var t=this;this.app.showLoadingIcon(),$.ajax({cache:!1,url:$("#board").data("check-url"),statusCode:{200:function(e){t.app.get("BoardDragAndDrop").refresh(e)},304:function(){t.app.hideLoadingIcon()}}})}},Kanboard.BoardTask=function(t){this.app=t},Kanboard.BoardTask.prototype.listen=function(){var t=this;$(document).on("click",".task-board-change-assignee",function(e){e.preventDefault(),e.stopPropagation(),t.app.get("Popover").open($(this).data("url"))}),$(document).on("click",".task-board",function(t){"A"!=t.target.tagName&&"IMG"!=t.target.tagName&&(window.location=$(this).data("task-url"))})},Kanboard.BoardTask.prototype.keyboardShortcuts=function(){var t=this;t.app.hasId("board")&&Mousetrap.bind("n",function(){t.app.get("Popover").open($("#board").data("task-creation-url"))})},Kanboard.Column=function(t){this.app=t},Kanboard.Column.prototype.listen=function(){this.dragAndDrop()},Kanboard.Column.prototype.dragAndDrop=function(){var t=this;$(".draggable-row-handle").mouseenter(function(){$(this).parent().parent().addClass("draggable-item-hover")}).mouseleave(function(){$(this).parent().parent().removeClass("draggable-item-hover")}),$(".columns-table tbody").sortable({forcePlaceholderSize:!0,handle:"td:first i",helper:function(t,e){return e.children().each(function(){$(this).width($(this).width())}),e},stop:function(e,o){var n=o.item;n.removeClass("draggable-item-selected"),t.savePosition(n.data("column-id"),n.index()+1)},start:function(t,e){e.item.addClass("draggable-item-selected")}}).disableSelection()},Kanboard.Column.prototype.savePosition=function(t,e){var o=$(".columns-table").data("save-position-url"),n=this;this.app.showLoadingIcon(),$.ajax({cache:!1,url:o,contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({column_id:t,position:e}),complete:function(){n.app.hideLoadingIcon()}})},Kanboard.Dropdown=function(t){this.app=t},Kanboard.Dropdown.prototype.listen=function(){var t=this;$(document).on("click",function(){t.close()}),$(document).on("click","#popover-content",function(){t.close()}),$(document).on("click",".dropdown-menu",function(e){e.preventDefault(),e.stopImmediatePropagation(),t.close();var o=$(this).next("ul"),n=$(this).offset();$("body").append(jQuery("
",{id:"dropdown"})),o.clone().appendTo("#dropdown");var a=$("#dropdown ul");a.addClass("dropdown-submenu-open");var i=a.outerHeight(),r=a.outerWidth();n.top+i-$(window).scrollTop()<$(window).height()||$(window).scrollTop()+n.top$(window).width()?a.css("left",n.left-r+$(this).outerWidth()):a.css("left",n.left)}),$(document).on("click",".dropdown-submenu-open li",function(t){$(t.target).is("li")&&$(this).find("a:visible")[0].click()})},Kanboard.Dropdown.prototype.close=function(){$("#dropdown").remove()},Kanboard.Dropdown.prototype.onPopoverOpened=function(){this.close()},Kanboard.FileUpload=function(t){this.app=t,this.files=[],this.currentFile=0},Kanboard.FileUpload.prototype.onPopoverOpened=function(){var t=document.getElementById("file-dropzone"),e=this;t&&(t.ondragover=t.ondragenter=function(t){t.stopPropagation(),t.preventDefault()},t.ondrop=function(t){t.stopPropagation(),t.preventDefault(),e.files=t.dataTransfer.files,e.show(),$("#file-error-max-size").hide()},$(document).on("click","#file-browser",function(t){t.preventDefault(),$("#file-form-element").get(0).click()}),$(document).on("click","#file-upload-button",function(t){t.preventDefault(),e.currentFile=0,e.checkFiles()}),$("#file-form-element").change(function(){ -e.files=document.getElementById("file-form-element").files,e.show(),$("#file-error-max-size").hide()}))},Kanboard.FileUpload.prototype.show=function(){if($("#file-list").remove(),this.files.length>0){$("#file-upload-button").prop("disabled",!1),$("#file-dropzone-inner").hide();for(var t=jQuery("