TodoList.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /**
  2. * --------------------------------------------
  3. * AdminLTE TodoList.js
  4. * License MIT
  5. * --------------------------------------------
  6. */
  7. const TodoList = (($) => {
  8. /**
  9. * Constants
  10. * ====================================================
  11. */
  12. const NAME = 'TodoList'
  13. const DATA_KEY = 'lte.todolist'
  14. const EVENT_KEY = `.${DATA_KEY}`
  15. const JQUERY_NO_CONFLICT = $.fn[NAME]
  16. const Selector = {
  17. DATA_TOGGLE: '[data-widget="todo-list"]'
  18. }
  19. const ClassName = {
  20. TODO_LIST_DONE: 'done'
  21. }
  22. const Default = {
  23. onCheck: function (item) {
  24. return item;
  25. },
  26. onUnCheck: function (item) {
  27. return item;
  28. }
  29. }
  30. /**
  31. * Class Definition
  32. * ====================================================
  33. */
  34. class TodoList {
  35. constructor(element, config) {
  36. this._config = config
  37. this._element = element
  38. this._init()
  39. }
  40. // Public
  41. toggle(item) {
  42. item.parents('li').toggleClass(ClassName.TODO_LIST_DONE);
  43. if (! $(item).prop('checked')) {
  44. this.unCheck($(item));
  45. return;
  46. }
  47. this.check(item);
  48. }
  49. check (item) {
  50. this._config.onCheck.call(item);
  51. }
  52. unCheck (item) {
  53. this._config.onUnCheck.call(item);
  54. }
  55. // Private
  56. _init() {
  57. var that = this
  58. $(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE)
  59. $(Selector.DATA_TOGGLE).on('change', 'input:checkbox', (event) => {
  60. that.toggle($(event.target))
  61. })
  62. }
  63. // Static
  64. static _jQueryInterface(config) {
  65. return this.each(function () {
  66. let data = $(this).data(DATA_KEY)
  67. const _options = $.extend({}, Default, $(this).data())
  68. if (!data) {
  69. data = new TodoList($(this), _options)
  70. $(this).data(DATA_KEY, data)
  71. }
  72. if (config === 'init') {
  73. data[config]()
  74. }
  75. })
  76. }
  77. }
  78. /**
  79. * Data API
  80. * ====================================================
  81. */
  82. $(window).on('load', () => {
  83. TodoList._jQueryInterface.call($(Selector.DATA_TOGGLE))
  84. })
  85. /**
  86. * jQuery API
  87. * ====================================================
  88. */
  89. $.fn[NAME] = TodoList._jQueryInterface
  90. $.fn[NAME].Constructor = TodoList
  91. $.fn[NAME].noConflict = function () {
  92. $.fn[NAME] = JQUERY_NO_CONFLICT
  93. return TodoList._jQueryInterface
  94. }
  95. return TodoList
  96. })(jQuery)
  97. export default TodoList