added DirectChat & TodoList JS (+ TodoList CSS fixes)

build/js/AdminLTE.js

@@ -2,6 +2,8 @@ import ControlSidebar from './ControlSidebar'
 import Layout from './Layout'
 import PushMenu from './PushMenu'
 import Treeview from './Treeview'
+import DirectChat from './DirectChat'
+import TodoList from './TodoList'
 import Widget from './Widget'
 
 export {
@@ -9,5 +11,7 @@ export {
   Layout,
   PushMenu,
   Treeview,
+  DirectChat,
+  TodoList,
   Widget
 }

build/js/DirectChat.js

@@ -0,0 +1,88 @@
+/**
+ * --------------------------------------------
+ * AdminLTE DirectChat.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const DirectChat = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'DirectChat'
+  const DATA_KEY           = 'lte.directchat'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+  const DATA_API_KEY       = '.data-api'
+
+  const Selector = {
+    DATA_TOGGLE: '[data-widget="chat-pane-toggle"]',
+    DIRECT_CHAT: '.direct-chat'
+  };
+
+  const ClassName = {
+    DIRECT_CHAT_OPEN: 'direct-chat-contacts-open'
+  };
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class DirectChat {
+    constructor(element, config) {
+      this._element = element
+    }
+
+    toggle() {
+      $(this._element).parents(Selector.DIRECT_CHAT).first().toggleClass(ClassName.DIRECT_CHAT_OPEN);
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let data      = $(this).data(DATA_KEY)
+        const _config = $.extend({}, Default, $(this).data())
+
+        if (!data) {
+          data = new DirectChat($(this), _config)
+          $(this).data(DATA_KEY, data)
+        }
+
+        if (config === 'init') {
+          data[config]()
+        }
+      })
+    }
+  }
+
+  /**
+   *
+   * Data Api implementation
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+    if (event) event.preventDefault();
+    DirectChat._jQueryInterface.call($(this), 'toggle');
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = DirectChat._jQueryInterface
+  $.fn[NAME].Constructor = DirectChat
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return DirectChat._jQueryInterface
+  }
+
+  return DirectChat
+})(jQuery)
+
+export default DirectChat

build/js/TodoList.js

@@ -0,0 +1,122 @@
+/**
+ * --------------------------------------------
+ * AdminLTE TodoList.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const TodoList = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'TodoList'
+  const DATA_KEY           = 'lte.todolist'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Selector = {
+    DATA_TOGGLE: '[data-widget="todo-list"]'
+  }
+
+  const ClassName = {
+    TODO_LIST_DONE: 'done'
+  }
+
+  const Default = {
+    onCheck: function (item) {
+      return item;
+    },
+    onUnCheck: function (item) {
+      return item;
+    }
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class TodoList {
+    constructor(element, config) {
+      this._config  = config
+      this._element = element
+
+      this._init()
+    }
+
+    // Public
+
+    toggle(item) {
+      item.parents('li').toggleClass(ClassName.TODO_LIST_DONE);
+      if (! $(item).prop('checked')) {
+        this.unCheck($(item));
+        return;
+      }
+
+      this.check(item);
+    }
+
+    check (item) {
+      this._config.onCheck.call(item);
+    }
+
+    unCheck (item) {
+      this._config.onUnCheck.call(item);
+    }
+
+    // Private
+
+    _init() {
+      var that = this
+      $(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE)
+      $(Selector.DATA_TOGGLE).on('change', 'input:checkbox', (event) => {
+        that.toggle($(event.target))
+      })
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let data      = $(this).data(DATA_KEY)
+        const _config = $.extend({}, Default, $(this).data())
+
+        if (!data) {
+          data = new TodoList($(this), _config)
+          $(this).data(DATA_KEY, data)
+        }
+
+        if (config === 'init') {
+          data[config]()
+        }
+      })
+    }
+  }
+
+  /**
+   * Data API
+   * ====================================================
+   */
+
+  $(window).on('load', () => {
+    TodoList._jQueryInterface.call($(Selector.DATA_TOGGLE))
+  })
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = TodoList._jQueryInterface
+  $.fn[NAME].Constructor = TodoList
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return TodoList._jQueryInterface
+  }
+
+  return TodoList
+})(jQuery)
+
+export default TodoList

build/scss/_cards.scss

@@ -251,8 +251,8 @@ html.maximized-card {
     }
 
     // Time labels
-    .label {
-      font-size: 9px;
+    .badge {
+      font-size: .7rem;
       margin-left: 10px;
     }
 
@@ -286,7 +286,7 @@ html.maximized-card {
         text-decoration: line-through;
       }
 
-      .label {
+      .badge {
         background: $gray-500 !important;
       }
     }

dist/css/adminlte.css

@@ -14356,8 +14356,8 @@ html.maximized-card {
   margin-left: 5px;
 }
 
-.todo-list > li .label {
-  font-size: 9px;
+.todo-list > li .badge {
+  font-size: .7rem;
   margin-left: 10px;
 }
 
@@ -14390,7 +14390,7 @@ html.maximized-card {
   text-decoration: line-through;
 }
 
-.todo-list > li.done .label {
+.todo-list > li.done .badge {
   background: #adb5bd !important;
 }
 

dist/js/adminlte.js

@@ -678,6 +678,213 @@
     return Treeview;
   }(jQuery);
 
+  /**
+   * --------------------------------------------
+   * AdminLTE DirectChat.js
+   * License MIT
+   * --------------------------------------------
+   */
+  var DirectChat = function ($) {
+    /**
+     * Constants
+     * ====================================================
+     */
+    var NAME = 'DirectChat';
+    var DATA_KEY = 'lte.directchat';
+    var JQUERY_NO_CONFLICT = $.fn[NAME];
+    var Selector = {
+      DATA_TOGGLE: '[data-widget="chat-pane-toggle"]',
+      DIRECT_CHAT: '.direct-chat'
+    };
+    var ClassName = {
+      DIRECT_CHAT_OPEN: 'direct-chat-contacts-open'
+    };
+    /**
+     * Class Definition
+     * ====================================================
+     */
+
+    var DirectChat =
+    /*#__PURE__*/
+    function () {
+      function DirectChat(element, config) {
+        this._element = element;
+      }
+
+      var _proto = DirectChat.prototype;
+
+      _proto.toggle = function toggle() {
+        $(this._element).parents(Selector.DIRECT_CHAT).first().toggleClass(ClassName.DIRECT_CHAT_OPEN);
+      } // Static
+      ;
+
+      DirectChat._jQueryInterface = function _jQueryInterface(config) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          var _config = $.extend({}, Default, $(this).data());
+
+          if (!data) {
+            data = new DirectChat($(this), _config);
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (config === 'init') {
+            data[config]();
+          }
+        });
+      };
+
+      return DirectChat;
+    }();
+    /**
+     *
+     * Data Api implementation
+     * ====================================================
+     */
+
+
+    $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+      if (event) event.preventDefault();
+
+      DirectChat._jQueryInterface.call($(this), 'toggle');
+    });
+    /**
+     * jQuery API
+     * ====================================================
+     */
+
+    $.fn[NAME] = DirectChat._jQueryInterface;
+    $.fn[NAME].Constructor = DirectChat;
+
+    $.fn[NAME].noConflict = function () {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return DirectChat._jQueryInterface;
+    };
+
+    return DirectChat;
+  }(jQuery);
+
+  /**
+   * --------------------------------------------
+   * AdminLTE TodoList.js
+   * License MIT
+   * --------------------------------------------
+   */
+  var TodoList = function ($) {
+    /**
+     * Constants
+     * ====================================================
+     */
+    var NAME = 'TodoList';
+    var DATA_KEY = 'lte.todolist';
+    var JQUERY_NO_CONFLICT = $.fn[NAME];
+    var Selector = {
+      DATA_TOGGLE: '[data-widget="todo-list"]'
+    };
+    var ClassName = {
+      TODO_LIST_DONE: 'done'
+    };
+    var Default = {
+      onCheck: function onCheck(item) {
+        return item;
+      },
+      onUnCheck: function onUnCheck(item) {
+        return item;
+      }
+      /**
+       * Class Definition
+       * ====================================================
+       */
+
+    };
+
+    var TodoList =
+    /*#__PURE__*/
+    function () {
+      function TodoList(element, config) {
+        this._config = config;
+        this._element = element;
+
+        this._init();
+      } // Public
+
+
+      var _proto = TodoList.prototype;
+
+      _proto.toggle = function toggle(item) {
+        item.parents('li').toggleClass(ClassName.TODO_LIST_DONE);
+
+        if (!$(item).prop('checked')) {
+          this.unCheck($(item));
+          return;
+        }
+
+        this.check(item);
+      };
+
+      _proto.check = function check(item) {
+        this._config.onCheck.call(item);
+      };
+
+      _proto.unCheck = function unCheck(item) {
+        this._config.onUnCheck.call(item);
+      } // Private
+      ;
+
+      _proto._init = function _init() {
+        var that = this;
+        $(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE);
+        $(Selector.DATA_TOGGLE).on('change', 'input:checkbox', function (event) {
+          that.toggle($(event.target));
+        });
+      } // Static
+      ;
+
+      TodoList._jQueryInterface = function _jQueryInterface(config) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          var _config = $.extend({}, Default, $(this).data());
+
+          if (!data) {
+            data = new TodoList($(this), _config);
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (config === 'init') {
+            data[config]();
+          }
+        });
+      };
+
+      return TodoList;
+    }();
+    /**
+     * Data API
+     * ====================================================
+     */
+
+
+    $(window).on('load', function () {
+      TodoList._jQueryInterface.call($(Selector.DATA_TOGGLE));
+    });
+    /**
+     * jQuery API
+     * ====================================================
+     */
+
+    $.fn[NAME] = TodoList._jQueryInterface;
+    $.fn[NAME].Constructor = TodoList;
+
+    $.fn[NAME].noConflict = function () {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return TodoList._jQueryInterface;
+    };
+
+    return TodoList;
+  }(jQuery);
+
   /**
    * --------------------------------------------
    * AdminLTE Widget.js
@@ -902,8 +1109,10 @@
   }(jQuery);
 
   exports.ControlSidebar = ControlSidebar;
+  exports.DirectChat = DirectChat;
   exports.Layout = Layout;
   exports.PushMenu = PushMenu;
+  exports.TodoList = TodoList;
   exports.Treeview = Treeview;
   exports.Widget = Widget;
 

index.html

@@ -939,7 +939,7 @@
               </div>
               <!-- /.card-header -->
               <div class="card-body">
-                <ul class="todo-list">
+                <ul class="todo-list" data-widget="todo-list">
                   <li>
                     <!-- drag handle -->
                     <span class="handle">
@@ -967,7 +967,7 @@
                       <i class="fas fa-ellipsis-v"></i>
                     </span>
                     <div  class="icheck-primary d-inline ml-2">
-                      <input type="checkbox" value="" name="todo2" id="todoCheck2">
+                      <input type="checkbox" value="" name="todo2" id="todoCheck2" checked>
                       <label for="todoCheck2"></label>
                     </div>
                     <span class="text">Make the theme responsive</span>