You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
3.1 KiB

  1. // when dom ready, init issue label events
  2. $(document).ready(function(){
  3. var labelColors = ["#e11d21","#EB6420","#FBCA04","#009800",
  4. "#006B75","#207DE5","#0052cc","#53E917",
  5. "#F6C6C7","#FAD8C7","#FEF2C0","#BFE5BF",
  6. "#BFDADC","#C7DEF8","#BFD4F2","#D4C5F9"];
  7. var colorDropHtml = "";
  8. labelColors.forEach(function(item){
  9. colorDropHtml += '<a class="color" style="background-color:'+item+'" data-color-hex="'+item+'"></a>';
  10. });
  11. // render label color input
  12. var color_input = $('#label-add-color');
  13. var color_label = $('#label-add-form .label-color-drop label');
  14. color_label.css("background-color",labelColors[0]);
  15. color_input.val(labelColors[0]);
  16. // render label color drop
  17. function render_color_drop($e){
  18. $e.find('.label-color-drop .drop-down')
  19. .html(colorDropHtml)
  20. .on("click","a",function(){
  21. var $form = $(this).parents(".form");
  22. var color_label = $form.find(".label-color-drop label");
  23. var color_input = $form.find("input[name=color]");
  24. var color = $(this).data("color-hex");
  25. color_label.css("background-color",color);
  26. color_input.val(color);
  27. });
  28. }
  29. // color drop visible
  30. var form = $('#label-add-form');
  31. render_color_drop(form);
  32. $('#label-new-btn').on("click",function(){
  33. if(form.hasClass("hidden")){
  34. form.removeClass("hidden");
  35. }
  36. });
  37. $('#label-cancel-btn').on("click",function(){
  38. form.addClass("hidden");
  39. });
  40. // label edit form render
  41. var $edit_form_tpl = $("#label-edit-form-tpl");
  42. $("#label-list").on("click","a.edit",function(){
  43. var $label_item = $(this).parents(".item");
  44. var $clone_form = $edit_form_tpl.clone();
  45. render_color_drop($clone_form);
  46. // add default color
  47. var color_label = $clone_form.find(".label-color-drop label");
  48. var color_input = $clone_form.find("input[name=color]");
  49. var color = $label_item.find(".label").data("color-hex");
  50. color_label.css("background-color",color);
  51. color_input.val(color);
  52. // add label name
  53. $clone_form.find("input[name=name]").val($label_item.find(".label").text());
  54. // add label id
  55. $clone_form.find("input[name=id]").val($label_item.attr("id").replace("label-",""));
  56. // append form
  57. $label_item.after($clone_form.show());
  58. // add cancel button event
  59. $('#label-edit-cancel-btn').on("click",function(){
  60. $clone_form.remove();
  61. });
  62. });
  63. // label delete form render
  64. var $del_form_tpl = $('#label-delete-form-tpl');
  65. $("#label-list").on("click","a.delete",function(){
  66. var $label_item = $(this).parents(".item");
  67. var $clone_form = $del_form_tpl.clone();
  68. // add label id
  69. $clone_form.find("input[name=id]").val($label_item.attr("id").replace("label-",""));
  70. // append form
  71. $label_item.after($clone_form.show());
  72. // add cancel button event
  73. $('#label-del-cancel-btn').on("click",function(){
  74. $clone_form.remove();
  75. });
  76. });
  77. });