created new gallery page

- added filterizr to plugins
- created gallery demo

build/npm/Plugins.js

@@ -228,7 +228,11 @@ const Plugins = [
     from: 'node_modules/bootstrap4-duallistbox/dist',
     to: 'plugins/bootstrap4-duallistbox/'
   },
-
+  // filterizr
+  {
+    from: 'node_modules/filterizr/dist',
+    to: 'plugins/filterizr/'
+  },
 
   // AdminLTE Dist
   {

index.html

@@ -421,6 +421,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="pages/gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

index2.html

@@ -408,6 +408,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="pages/gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

index3.html

@@ -418,6 +418,14 @@ to get the desired effect
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="pages/gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

package-lock.json

@@ -5764,6 +5764,11 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
+    },
     "eve-raphael": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/eve-raphael/-/eve-raphael-0.5.0.tgz",
@@ -6290,6 +6295,11 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fast-memoize": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.1.tgz",
+      "integrity": "sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g=="
+    },
     "fastclick": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
@@ -6337,6 +6347,15 @@
         }
       }
     },
+    "filterizr": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/filterizr/-/filterizr-2.2.3.tgz",
+      "integrity": "sha512-1u3/TadXM12uNUlxHBRM31maMXY4DA2+sbeji4KSHk/m3LE4fMkTst+6W5YBlcBC1umICDiwplWsMqr6VzY5ZA==",
+      "requires": {
+        "fast-memoize": "^2.5.1",
+        "imagesloaded": "^4.1.4"
+      }
+    },
     "finalhandler": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
@@ -7494,6 +7513,14 @@
       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
       "dev": true
     },
+    "imagesloaded": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz",
+      "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==",
+      "requires": {
+        "ev-emitter": "^1.0.0"
+      }
+    },
     "immutable": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",

package.json

@@ -62,6 +62,7 @@
     "datatables.net-bs4": "^1.10.19",
     "daterangepicker": "^3.0.5",
     "fastclick": "^1.0.6",
+    "filterizr": "^2.2.3",
     "flag-icon-css": "^3.3.0",
     "flot": "^3.1.1",
     "icheck-bootstrap": "^3.0.1",

pages/UI/buttons.html

@@ -410,6 +410,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/general.html

@@ -456,6 +456,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/icons.html

@@ -410,6 +410,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/modals.html

@@ -414,6 +414,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/navbar.html

@@ -416,6 +416,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/ribbons.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/sliders.html

@@ -415,6 +415,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/UI/timeline.html

@@ -409,6 +409,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/calendar.html

@@ -416,6 +416,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/charts/chartjs.html

@@ -410,6 +410,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/charts/flot.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/charts/inline.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/404.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/500.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/blank.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/contacts.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/e_commerce.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/invoice.html

@@ -410,6 +410,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/language-menu.html

@@ -424,6 +424,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/legacy-user-menu.html

@@ -439,6 +439,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/profile.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/project_add.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/project_detail.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/project_edit.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/examples/projects.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/forms/advanced.html

@@ -424,6 +424,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/forms/editors.html

@@ -413,6 +413,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/forms/general.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/gallery.html

@@ -0,0 +1,745 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>AdminLTE 3 | Gallery</title>
+  <!-- Tell the browser to be responsive to screen width -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
+  <!-- Ionicons -->
+  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- Theme style -->
+  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
+  <!-- Google Font: Source Sans Pro -->
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
+</head>
+<body class="hold-transition sidebar-mini">
+<div class="wrapper">
+  <!-- Navbar -->
+  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+    <!-- Left navbar links -->
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
+      </li>
+      <li class="nav-item d-none d-sm-inline-block">
+        <a href="../index3.html" class="nav-link">Home</a>
+      </li>
+      <li class="nav-item d-none d-sm-inline-block">
+        <a href="#" class="nav-link">Contact</a>
+      </li>
+    </ul>
+
+    <!-- SEARCH FORM -->
+    <form class="form-inline ml-3">
+      <div class="input-group input-group-sm">
+        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-navbar" type="submit">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+      </div>
+    </form>
+
+    <!-- Right navbar links -->
+    <ul class="navbar-nav ml-auto">
+      <!-- Messages Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-comments"></i>
+          <span class="badge badge-danger navbar-badge">3</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  Brad Diesel
+                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">Call me whenever you can...</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  John Pierce
+                  <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">I got your message bro</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  Nora Silvester
+                  <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">The subject goes here</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <!-- Notifications Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-bell"></i>
+          <span class="badge badge-warning navbar-badge">15</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-envelope mr-2"></i> 4 new messages
+            <span class="float-right text-muted text-sm">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-users mr-2"></i> 8 friend requests
+            <span class="float-right text-muted text-sm">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-file mr-2"></i> 3 new reports
+            <span class="float-right text-muted text-sm">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
+          <i class="fas fa-th-large"></i>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- /.navbar -->
+
+  <!-- Main Sidebar Container -->
+  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <!-- Brand Logo -->
+    <a href="../index3.html" class="brand-link">
+      <img src="../dist/img/AdminLTELogo.png"
+           alt="AdminLTE Logo"
+           class="brand-image img-circle elevation-3"
+           style="opacity: .8">
+      <span class="brand-text font-weight-light">AdminLTE 3</span>
+    </a>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar user panel (optional) -->
+      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+        <div class="image">
+          <img src="../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
+        </div>
+        <div class="info">
+          <a href="#" class="d-block">Alexander Pierce</a>
+        </div>
+      </div>
+
+      <!-- Sidebar Menu -->
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+          <!-- Add icons to the links using the .nav-icon class
+               with font-awesome or any other icon font library -->
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-tachometer-alt"></i>
+              <p>
+                Dashboard
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../index.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v1</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../index2.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v2</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../index3.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v3</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a href="widgets.html" class="nav-link">
+              <i class="nav-icon fas fa-th"></i>
+              <p>
+                Widgets
+                <span class="right badge badge-danger">New</span>
+              </p>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-copy"></i>
+              <p>
+                Layout Options
+                <i class="fas fa-angle-left right"></i>
+                <span class="badge badge-info right">6</span>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="layout/top-nav.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Top Navigation</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="layout/boxed.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Boxed</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="layout/fixed-sidebar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Sidebar</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="layout/fixed-topnav.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Navbar</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="layout/fixed-footer.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Footer</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="layout/collapsed-sidebar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Collapsed Sidebar</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-chart-pie"></i>
+              <p>
+                Charts
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="charts/chartjs.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>ChartJS</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="charts/flot.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Flot</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="charts/inline.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inline</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-tree"></i>
+              <p>
+                UI Elements
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="UI/general.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>General</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/icons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Icons</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/buttons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Buttons</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/sliders.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Sliders</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/modals.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Modals & Alerts</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/timeline.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Timeline</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="UI/ribbons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Ribbons</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-edit"></i>
+              <p>
+                Forms
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="forms/general.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>General Elements</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="forms/advanced.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Advanced Elements</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="forms/editors.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Editors</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-table"></i>
+              <p>
+                Tables
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="tables/simple.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Simple Tables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="tables/data.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">EXAMPLES</li>
+          <li class="nav-item">
+            <a href="calendar.html" class="nav-link">
+              <i class="nav-icon far fa-calendar-alt"></i>
+              <p>
+                Calendar
+                <span class="badge badge-info right">2</span>
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="gallery.html" class="nav-link active">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-envelope"></i>
+              <p>
+                Mailbox
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="mailbox/mailbox.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inbox</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="mailbox/compose.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Compose</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="mailbox/read-mail.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Read</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-book"></i>
+              <p>
+                Pages
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="examples/invoice.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Invoice</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/profile.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Profile</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/e_commerce.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>E-commerce</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/projects.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Projects</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/project_add.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Project Add</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/project_edit.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Project Edit</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/project_detail.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Project Detail</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/contacts.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Contacts</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-plus-square"></i>
+              <p>
+                Extras
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="examples/login.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Login</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/register.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Register</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/lockscreen.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Lockscreen</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/legacy-user-menu.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Legacy User Menu</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/language-menu.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Language Menu</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/404.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Error 404</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/500.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Error 500</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="examples/blank.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Blank Page</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../starter.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Starter Page</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">MISCELLANEOUS</li>
+          <li class="nav-item">
+            <a href="https://adminlte.io/docs/3.0" class="nav-link">
+              <i class="nav-icon fas fa-file"></i>
+              <p>Documentation</p>
+            </a>
+          </li>
+          <li class="nav-header">LABELS</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-danger"></i>
+              <p class="text">Important</p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-warning"></i>
+              <p>Warning</p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-info"></i>
+              <p>Informational</p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+    </div>
+    <!-- /.sidebar -->
+  </aside>
+
+  <!-- Content Wrapper. Contains page content -->
+  <div class="content-wrapper">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+      <div class="container-fluid">
+        <div class="row mb-2">
+          <div class="col-sm-6">
+            <h1>Gallery</h1>
+          </div>
+          <div class="col-sm-6">
+            <ol class="breadcrumb float-sm-right">
+              <li class="breadcrumb-item"><a href="#">Home</a></li>
+              <li class="breadcrumb-item active">Gallery</li>
+            </ol>
+          </div>
+        </div>
+      </div><!-- /.container-fluid -->
+    </section>
+
+    <!-- Main content -->
+    <section class="content">
+      <div class="container-fluid">
+        <div class="card card-primary">
+          <div class="card-header">
+            <div class="card-title">
+              FilterizR Gallery
+            </div>
+          </div>
+          <div class="card-body">
+            <div>
+              <div class="btn-group w-100 mb-2">
+                <a class="btn btn-info active" href="javascript:void(0)" data-filter="all"> All items </a>
+                <a class="btn btn-info" href="javascript:void(0)" data-filter="1"> Category 1 (WHITE) </a>
+                <a class="btn btn-info" href="javascript:void(0)" data-filter="2"> Category 2 (BLACK) </a>
+                <a class="btn btn-info" href="javascript:void(0)" data-filter="3"> Category 3 (COLORED) </a>
+              </div>
+              <div class="mb-2">
+                <a class="btn btn-secondary" href="javascript:void(0)" data-shuffle> Shuffle items </a>
+                <div class="float-right">
+                  <select class="custom-select" style="width: auto;" data-sortOrder>
+                    <option value="index"> Sort by Position </option>
+                    <option value="sortData"> Sort by Custom Data </option>
+                  </select>
+                  <div class="btn-group">
+                    <a class="btn btn-default" href="javascript:void(0)" data-sortAsc> Ascending </a>
+                    <a class="btn btn-default" href="javascript:void(0)" data-sortDesc> Descending </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="filter-container p-0">
+                <div class="filtr-item col-sm-2" data-category="1" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FFFFFF?text=1" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="2" data-sort="value">
+                  <img src="https://via.placeholder.com/300/000000?text=2" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="3" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="3" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="2" data-sort="value">
+                  <img src="https://via.placeholder.com/300/000000?text=5" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="1" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FFFFFF?text=6" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="1" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FFFFFF?text=7" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="2" data-sort="value">
+                  <img src="https://via.placeholder.com/300/000000?text=8" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="3" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="1" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FFFFFF?text=10" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="1" data-sort="value">
+                  <img src="https://via.placeholder.com/300/FFFFFF?text=11" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
+                </div>
+                <div class="filtr-item col-sm-2" data-category="2" data-sort="value">
+                  <img src="https://via.placeholder.com/300/000000?text=12" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div><!-- /.container-fluid -->
+    </section>
+    <!-- /.content -->
+  </div>
+  <!-- /.content-wrapper -->
+
+  <footer class="main-footer">
+    <div class="float-right d-none d-sm-block">
+      <b>Version</b> 3.0.0-beta.2
+    </div>
+    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
+    reserved.
+  </footer>
+
+  <!-- Control Sidebar -->
+  <aside class="control-sidebar control-sidebar-dark">
+    <!-- Control sidebar content goes here -->
+  </aside>
+  <!-- /.control-sidebar -->
+</div>
+<!-- ./wrapper -->
+
+<!-- jQuery -->
+<script src="../plugins/jquery/jquery.min.js"></script>
+<!-- Bootstrap -->
+<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- jQuery UI -->
+<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
+<!-- AdminLTE App -->
+<script src="../dist/js/adminlte.min.js"></script>
+<!-- AdminLTE for demo purposes -->
+<script src="../dist/js/demo.js"></script>
+<!-- Filterizr-->
+<script src="../plugins/filterizr/jquery.filterizr.min.js"></script>
+<!-- Page specific script -->
+<script>
+  $(function () {
+    $('.filter-container').filterizr({gutterPixels: 3});
+    $('.btn[data-filter]').on('click', function() {
+      $('.btn[data-filter]').removeClass('active');
+      $(this).addClass('active');
+    });
+  })
+</script>
+</body>
+</html>

pages/layout/boxed.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/layout/collapsed-sidebar.html

@@ -412,6 +412,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/layout/fixed-footer.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/layout/fixed-sidebar.html

@@ -413,6 +413,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/layout/fixed-topnav.html

@@ -411,6 +411,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/tables/data.html

@@ -413,6 +413,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/tables/jsgrid.html

@@ -414,6 +414,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/tables/simple.html

@@ -410,6 +410,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="../gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

pages/widgets.html

@@ -410,6 +410,14 @@
               </p>
             </a>
           </li>
+          <li class="nav-item">
+            <a href="gallery.html" class="nav-link">
+              <i class="nav-icon far fa-image"></i>
+              <p>
+                Gallery
+              </p>
+            </a>
+          </li>
           <li class="nav-item has-treeview">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>

plugins/filterizr/ActiveFilter.d.ts

@@ -0,0 +1,15 @@
+import { Filter } from './types';
+/**
+ * ActiveFilter represents the currently active filter over
+ * the grid.
+ *
+ * It can be a plain string value or an array of strings.
+ */
+export default class ActiveFilter {
+    private filter;
+    constructor(filter: Filter);
+    get(): Filter;
+    set(targetFilter: Filter): void;
+    toggle(targetFilter: string): void;
+    private toggleFilter;
+}

plugins/filterizr/BrowserWindow.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A wrapper class around the window object to manage the
+ * resize event.
+ *
+ * When the user resizes the window, Filterizr needs to trigger
+ * a refiltering of the grid so that the grid items can assume
+ * their new positions.
+ */
+export default class BrowserWindow {
+    private resizeHandler?;
+    constructor();
+    private debounceEventHandler;
+    destroy(): void;
+    setResizeEventHandler(resizeHandler: EventListener): void;
+    private removeResizeHandler;
+}

plugins/filterizr/EventReceiver.d.ts

@@ -0,0 +1,12 @@
+import { Destructible } from './types/interfaces';
+declare type Receiver = NodeListOf<Element> | Element | Window;
+export default class EventReceiver implements Destructible {
+    private receiver;
+    private eventDictionary;
+    constructor(receiver: Receiver);
+    on(eventType: string, eventHandler: EventListener): void;
+    off(eventType: string): void;
+    destroy(): void;
+    private removeAllEvents;
+}
+export {};

plugins/filterizr/FilterContainer.d.ts

@@ -0,0 +1,36 @@
+import { RawOptionsCallbacks } from './FilterizrOptions/defaultOptions';
+import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
+import FilterItems from './FilterItems';
+/**
+ * Resembles the grid of items within Filterizr.
+ */
+export default class FilterContainer {
+    node: Element;
+    options: FilterizrOptions;
+    filterItems: FilterItems;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    private onTransitionEndHandler?;
+    constructor(node: Element, options: FilterizrOptions);
+    destroy(): void;
+    /**
+     * Turn the HTML elements in the grid to FilterItem
+     * instances and return a collection of them.
+     */
+    makeFilterItems(options: FilterizrOptions): FilterItems;
+    /**
+     * Inserts a new item into the grid.
+     * @param node - HTML node to instantiate as FilterItem and append to the grid
+     * @param options - Filterizr options
+     */
+    insertItem(node: Element, options: FilterizrOptions): void;
+    calculateColumns(): number;
+    updateDimensions(): void;
+    updateHeight(newHeight: number): void;
+    bindEvents(callbacks: RawOptionsCallbacks): void;
+    unbindEvents(callbacks: RawOptionsCallbacks): void;
+    trigger(eventType: string): void;
+    private updateWidth;
+}

plugins/filterizr/FilterContainer/FilterContainer.d.ts

@@ -0,0 +1,28 @@
+import { FilterizrState } from '../types';
+import FilterizrOptions from '../FilterizrOptions';
+import FilterItems from '../FilterItems';
+import FilterizrElement from '../FilterizrElement';
+import StyledFilterContainer from './StyledFilterContainer';
+/**
+ * Resembles the grid of items within Filterizr.
+ */
+export default class FilterContainer extends FilterizrElement {
+    filterItems: FilterItems;
+    protected styledNode: StyledFilterContainer;
+    private _filterizrState;
+    constructor(node: Element, options: FilterizrOptions);
+    readonly styles: StyledFilterContainer;
+    filterizrState: FilterizrState;
+    destroy(): void;
+    /**
+     * Turn the HTML elements in the grid to FilterItem
+     * instances and return a collection of them.
+     * @throws when no filter items are found in the grid.
+     */
+    makeFilterItems(options: FilterizrOptions): FilterItems;
+    insertItem(node: HTMLElement): void;
+    removeItem(node: HTMLElement): void;
+    setHeight(newHeight: number): void;
+    bindEvents(): void;
+    unbindEvents(): void;
+}

plugins/filterizr/FilterContainer/StyledFilterContainer.d.ts

@@ -0,0 +1,6 @@
+import StyledFilterizrElement from '../StyledFilterizrElement';
+export default class StyledFilterContainer extends StyledFilterizrElement {
+    initialize(): void;
+    updatePaddings(): void;
+    setHeight(newHeight: number): void;
+}

plugins/filterizr/FilterContainer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FilterContainer';

plugins/filterizr/FilterContainer/styles.d.ts

@@ -0,0 +1,4 @@
+import FilterizrOptions from '../FilterizrOptions';
+export declare const makePaddingStyles: (options: FilterizrOptions) => object;
+export declare const makeInitialStyles: (options: FilterizrOptions) => object;
+export declare const makeHeightStyles: (height: number) => object;

plugins/filterizr/FilterControls.d.ts

@@ -0,0 +1,19 @@
+import Filterizr from './Filterizr';
+import { Destructible } from './types/interfaces';
+export default class FilterControls implements Destructible {
+    private filterControls;
+    private filterizr;
+    private multiFilterControls;
+    private searchControls;
+    private selector;
+    private shuffleControls;
+    private sortAscControls;
+    private sortDescControls;
+    /**
+     * @param filterizr keep a ref to the Filterizr object to control actions
+     * @param selector selector of controls in case of multiple Filterizr instances
+     */
+    constructor(filterizr: Filterizr, selector?: string);
+    destroy(): void;
+    private initialize;
+}

plugins/filterizr/FilterItem.d.ts

@@ -0,0 +1,98 @@
+import { Dictionary } from './types/interfaces/Dictionary';
+import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
+export interface Position {
+    left: number;
+    top: number;
+}
+/**
+ * Resembles an item in the grid of Filterizr.
+ */
+export default class FilterItem {
+    node: Element;
+    options: FilterizrOptions;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    private data;
+    private sortData;
+    private index;
+    private filteredOut;
+    private lastPosition;
+    private onTransitionEndHandler;
+    constructor(node: Element, index: number, options: FilterizrOptions);
+    /**
+     * Destroys the FilterItem instance
+     */
+    destroy(): void;
+    /**
+     * Filters in a specific FilterItem out of the grid.
+     * @param targetPosition the position towards which the element should animate
+     * @param cssOptions for the animation
+     */
+    filterIn(targetPosition: Position, cssOptions: Dictionary): void;
+    /**
+     * Filters out a specific FilterItem out of the grid.
+     * @param cssOptions for the animation
+     */
+    filterOut(cssOptions: Dictionary): void;
+    /**
+     * Helper method to calculate the animation delay for a given grid item
+     * @param delay in ms
+     * @param delayMode can be 'alternate' or 'progressive'
+     */
+    getTransitionDelay(delay: number, delayMode: 'progressive' | 'alternate'): number;
+    /**
+     * Returns true if the text contents of the FilterItem match the search term
+     * @param searchTerm to look up
+     * @return if the innerText matches the term
+     */
+    contentsMatchSearch(searchTerm: string): boolean;
+    /**
+     * Recalculates the dimensions of the element and updates them in the state
+     */
+    updateDimensions(): void;
+    /**
+     * Returns all categories of the grid items data-category attribute
+     * with a regexp regarding all whitespace.
+     * @return {String[]} an array of the categories the item belongs to
+     */
+    getCategories(): string[];
+    /**
+     * Returns the value of the sort attribute
+     * @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
+     */
+    getSortAttribute(sortAttribute: string): string | number;
+    /**
+     * Helper method for the search method of Filterizr
+     * @return {String} innerText of the FilterItem in lowercase
+     */
+    private getContentsLowercase;
+    /**
+     * Sets up the events related to the FilterItem instance
+     */
+    private bindEvents;
+    /**
+     * Removes all events related to the FilterItem instance
+     */
+    private unbindEvents;
+    /**
+     * Calculates and returns the transition css property based on options.
+     */
+    private getTransitionStyle;
+    /**
+     * Sets the transition css property as an inline style on the FilterItem.
+     *
+     * The idea here is that during the very first render items should assume
+     * their positions directly.
+     *
+     * Following renders should actually trigger the transitions, which is why
+     * we need to delay setting the transition property.
+     *
+     * Unfortunately, JavaScript code executes on the same thread as the
+     * browser's rendering. Everything that needs to be drawn waits for
+     * JavaScript execution to complete. Thus, we need to use a setTimeout
+     * here to defer setting the transition style at the first rendering cycle.
+     */
+    private setTransitionStyle;
+}

plugins/filterizr/FilterItem/FilterItem.d.ts

@@ -0,0 +1,44 @@
+import { Position } from '../types/interfaces';
+import FilterizrOptions from '../FilterizrOptions';
+import FilterizrElement from '../FilterizrElement';
+import StyledFilterItem from './StyledFilterItem';
+/**
+ * Resembles an item in the grid of Filterizr.
+ */
+export default class FilterItem extends FilterizrElement {
+    protected styledNode: StyledFilterItem;
+    private filteredOut;
+    private lastPosition;
+    private sortData;
+    constructor(node: Element, index: number, options: FilterizrOptions);
+    readonly styles: StyledFilterItem;
+    /**
+     * Destroys the FilterItem instance
+     */
+    destroy(): void;
+    /**
+     * Filters in a specific FilterItem out of the grid.
+     */
+    filterIn(targetPosition: Position): void;
+    /**
+     * Filters out a specific FilterItem out of the grid.
+     */
+    filterOut(): void;
+    /**
+     * Returns true if the text contents of the FilterItem match the search term
+     * @param searchTerm to look up
+     */
+    contentsMatchSearch(searchTerm: string): boolean;
+    /**
+     * Returns all categories of the grid items data-category attribute
+     * with a regexp regarding all whitespace.
+     */
+    getCategories(): string[];
+    /**
+     * Returns the value of the sort attribute
+     * @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
+     */
+    getSortAttribute(sortAttribute: string): string | number;
+    protected bindEvents(): void;
+    protected unbindEvents(): void;
+}

plugins/filterizr/FilterItem/StyledFilterItem.d.ts

@@ -0,0 +1,30 @@
+import { Position } from './../types/interfaces';
+import StyledFilterizrElement from '../StyledFilterizrElement';
+import FilterizrOptions from '../FilterizrOptions';
+export default class StyledFilterItem extends StyledFilterizrElement {
+    private _index;
+    constructor(node: HTMLElement, index: number, options: FilterizrOptions);
+    initialize(): void;
+    setFilteredStyles(position: Position, cssOptions: object): void;
+    updateTransitionStyle(): void;
+    updateWidth(): void;
+    /**
+     * Sets the transition css property as an inline style on the FilterItem.
+     *
+     * The idea here is that during the very first render items should assume
+     * their positions directly.
+     *
+     * Following renders should actually trigger the transitions, which is why
+     * we need to delay setting the transition property.
+     *
+     * Unfortunately, JavaScript code executes on the same thread as the
+     * browser's rendering. Everything that needs to be drawn waits for
+     * JavaScript execution to complete. Thus, we need to use a setTimeout
+     * here to defer setting the transition style at the first rendering cycle.
+     */
+    enableTransitions(): Promise<void>;
+    disableTransitions(): void;
+    setZIndex(zIndex: number): void;
+    removeZIndex(): void;
+    removeWidth(): void;
+}

plugins/filterizr/FilterItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FilterItem';

plugins/filterizr/FilterItem/styles.d.ts

@@ -0,0 +1,5 @@
+import FilterizrOptions from '../FilterizrOptions';
+import { Dictionary, Position } from '../types/interfaces';
+export declare const makeInitialStyles: (options: FilterizrOptions) => object;
+export declare const makeFilteringStyles: (targetPosition: Position, cssOptions: Dictionary) => object;
+export declare const makeTransitionStyles: (index: number, options: FilterizrOptions) => object;

plugins/filterizr/FilterItems.d.ts

@@ -0,0 +1,22 @@
+import { Filter } from './ActiveFilter';
+import FilterItem from './FilterItem';
+import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
+export default class FilterItems {
+    private filterItems;
+    private options;
+    constructor(filterItems: FilterItem[], options: FilterizrOptions);
+    readonly length: number;
+    get(): FilterItem[];
+    getItem(index: number): FilterItem;
+    set(filterItems: FilterItem[]): void;
+    destroy(): void;
+    updateTransitionStyle(): void;
+    updateDimensions(): void;
+    push(filterItem: FilterItem): number;
+    getFiltered(filter: Filter): FilterItem[];
+    getFilteredOut(filter: Filter): FilterItem[];
+    getSorted(sortAttr?: string, sortOrder?: 'asc' | 'desc'): FilterItem[];
+    getSearched(searchTerm: string): FilterItem[];
+    getShuffled(): FilterItem[];
+    private shouldBeFiltered;
+}

plugins/filterizr/FilterItems/FilterItems.d.ts

@@ -0,0 +1,23 @@
+import StyledFilterItems from './StyledFilterItems';
+import { Filter } from '../types';
+import FilterItem from '../FilterItem';
+import FilterizrOptions from '../FilterizrOptions/FilterizrOptions';
+import { Destructible, Styleable } from '../types/interfaces';
+export default class FilterItems implements Destructible, Styleable {
+    private filterItems;
+    private styledFilterItems;
+    private options;
+    constructor(filterItems: FilterItem[], options: FilterizrOptions);
+    readonly styles: StyledFilterItems;
+    readonly length: number;
+    getItem(index: number): FilterItem;
+    destroy(): void;
+    push(filterItem: FilterItem): number;
+    remove(node: HTMLElement): void;
+    getFiltered(filter: Filter): FilterItem[];
+    getFilteredOut(filter: Filter): FilterItem[];
+    sort(sortAttr?: string, sortOrder?: 'asc' | 'desc'): void;
+    shuffle(): void;
+    private search;
+    private shouldBeFiltered;
+}

plugins/filterizr/FilterItems/StyledFilterItems.d.ts

@@ -0,0 +1,12 @@
+import StyledFilterizrElements from '../StyledFilterizrElements';
+import FilterItem from '../FilterItem/FilterItem';
+export default class StyledFilterItems extends StyledFilterizrElements {
+    private _filterItems;
+    constructor(elements: FilterItem[]);
+    removeWidth(): void;
+    updateWidth(): void;
+    updateTransitionStyle(): void;
+    disableTransitions(): void;
+    enableTransitions(): Promise<void>;
+    updateWidthWithTransitionsDisabled(): void;
+}

plugins/filterizr/FilterItems/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FilterItems';

plugins/filterizr/Filterizr.d.ts

@@ -0,0 +1,76 @@
+import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
+import FilterContainer from './FilterContainer';
+import FilterItem from './FilterItem';
+import { Filter } from './ActiveFilter';
+import { RawOptions } from './FilterizrOptions/defaultOptions';
+export default class Filterizr {
+    /**
+     * Main Filterizr classes exported as static members
+     */
+    static FilterContainer: typeof FilterContainer;
+    static FilterItem: typeof FilterItem;
+    static defaultOptions: RawOptions;
+    /**
+     * Static method that receives the jQuery object and extends
+     * its prototype with a .filterizr method.
+     */
+    static installAsJQueryPlugin: Function;
+    options: FilterizrOptions;
+    private browserWindow;
+    private filterContainer;
+    private filterControls?;
+    private filterizrState;
+    constructor(selectorOrNode?: string | HTMLElement, userOptions?: RawOptions);
+    private readonly filterItems;
+    /**
+     * Filters the items in the grid by a category
+     * @param category by which to filter
+     */
+    filter(category: Filter): void;
+    destroy(): void;
+    /**
+     * Inserts a new FilterItem in the Filterizr grid
+     * @param node DOM node to append
+     */
+    insertItem(node: HTMLElement): void;
+    /**
+     * Sorts the FilterItems in the grid
+     * @param sortAttr the attribute by which to perform the sort
+     * @param sortOrder ascending or descending
+     */
+    sort(sortAttr?: string, sortOrder?: 'asc' | 'desc'): void;
+    /**
+     * Searches through the FilterItems for a given string and adds an additional filter layer.
+     * @param searchTerm the term for which to search
+     */
+    search(searchTerm?: string): void;
+    /**
+     * Shuffles the FilterItems in the grid, making sure their positions have changed.
+     */
+    shuffle(): void;
+    /**
+     * Updates the perferences of the users for rendering the Filterizr grid,
+     * additionally performs error checking on the new options passed.
+     * @param newOptions to override the defaults.
+     */
+    setOptions(newOptions: RawOptions): void;
+    /**
+     * Performs multifiltering with AND/OR logic.
+     * @param toggledFilter the filter to toggle
+     */
+    toggleFilter(toggledFilter: string): void;
+    private render;
+    private onTransitionEndCallback;
+    private rebindFilterContainerEvents;
+    private bindEvents;
+    /**
+     * If it contains images it makes use of the imagesloaded npm package
+     * to trigger the first render after the images have finished loading
+     * in the DOM. Otherwise, overlapping can occur if the images do not
+     * have the height attribute explicitly set on them.
+     *
+     * In case the grid contains no images, then a simple render is performed.
+     */
+    private renderWithImagesLoaded;
+    private updateDimensionsAndRerender;
+}

plugins/filterizr/Filterizr/Filterizr.d.ts

@@ -0,0 +1,75 @@
+import { Filter } from '../types';
+import { RawOptions, Destructible } from '../types/interfaces';
+import FilterizrOptions from '../FilterizrOptions';
+import FilterContainer from '../FilterContainer';
+import FilterItem from '../FilterItem';
+export default class Filterizr implements Destructible {
+    /**
+     * Main Filterizr classes exported as static members
+     */
+    static FilterContainer: typeof FilterContainer;
+    static FilterItem: typeof FilterItem;
+    static defaultOptions: RawOptions;
+    /**
+     * Static method that receives the jQuery object and extends
+     * its prototype with a .filterizr method.
+     */
+    static installAsJQueryPlugin: Function;
+    options: FilterizrOptions;
+    private windowEventReceiver;
+    private filterContainer;
+    private filterControls?;
+    private imagesHaveLoaded;
+    private spinner?;
+    constructor(selectorOrNode?: string | HTMLElement, userOptions?: RawOptions);
+    private readonly filterItems;
+    /**
+     * Filters the items in the grid by a category
+     * @param category by which to filter
+     */
+    filter(category: Filter): void;
+    destroy(): void;
+    /**
+     * Inserts a new FilterItem into the grid
+     */
+    insertItem(node: HTMLElement): Promise<void>;
+    /**
+     * Removes a FilterItem from the grid
+     */
+    removeItem(node: HTMLElement): void;
+    /**
+     * Sorts the FilterItems in the grid
+     * @param sortAttr the attribute by which to perform the sort
+     * @param sortOrder ascending or descending
+     */
+    sort(sortAttr?: string, sortOrder?: 'asc' | 'desc'): void;
+    /**
+     * Searches through the FilterItems for a given string and adds an additional filter layer.
+     */
+    search(searchTerm?: string): void;
+    /**
+     * Shuffles the FilterItems in the grid, making sure their positions have changed.
+     */
+    shuffle(): void;
+    /**
+     * Updates the perferences of the users for rendering the Filterizr grid,
+     * additionally performs error checking on the new options passed.
+     * @param newOptions to override the defaults.
+     */
+    setOptions(newOptions: RawOptions): void;
+    /**
+     * Performs multifiltering with AND/OR logic.
+     * @param toggledFilter the filter to toggle
+     */
+    toggleFilter(toggledFilter: string): void;
+    private render;
+    /**
+     * Initialization sequence of Filterizr when the grid is first loaded
+     */
+    private initialize;
+    private bindEvents;
+    /**
+     * Resolves when the images of the grid have finished loading into the DOM
+     */
+    private waitForImagesToLoad;
+}

plugins/filterizr/Filterizr/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Filterizr';

plugins/filterizr/Filterizr/installAsJQueryPlugin.d.ts

@@ -0,0 +1 @@
+export default function installAsJQueryPlugin($: any): void;

plugins/filterizr/FilterizrElement.d.ts

@@ -0,0 +1,16 @@
+import { Destructible, Dimensions, Resizable, Styleable } from './types/interfaces';
+import FilterizrOptions from './FilterizrOptions';
+import EventReceiver from './EventReceiver';
+import StyledFilterizrElement from './StyledFilterizrElement';
+export default abstract class FilterizrElement implements Destructible, Resizable, Styleable {
+    node: Element;
+    options: FilterizrOptions;
+    protected eventReceiver: EventReceiver;
+    constructor(node: Element, options: FilterizrOptions);
+    readonly dimensions: Dimensions;
+    destroy(): void | Promise<void>;
+    trigger(eventType: string): void;
+    abstract readonly styles: StyledFilterizrElement;
+    protected abstract bindEvents(): void;
+    protected abstract unbindEvents(): void;
+}

plugins/filterizr/FilterizrOptions/FilterizrOptions.d.ts

@@ -0,0 +1,22 @@
+import { BaseOptions, RawOptions } from './../types/interfaces';
+import ActiveFilter from '../ActiveFilter';
+import { Filter } from '../types';
+export interface Options extends BaseOptions {
+    filter: ActiveFilter;
+}
+export default class FilterizrOptions {
+    private options;
+    constructor(userOptions: RawOptions);
+    readonly isSpinnerEnabled: boolean;
+    readonly areControlsEnabled: boolean;
+    readonly controlsSelector: string;
+    filter: Filter;
+    toggleFilter(filter: string): void;
+    searchTerm: string;
+    get(): Options;
+    getRaw(): RawOptions;
+    set(newUserOptions: RawOptions): void;
+    private convertToFilterizrOptions;
+    private convertToOptions;
+    private validate;
+}

plugins/filterizr/FilterizrOptions/defaultOptions.d.ts

@@ -0,0 +1,3 @@
+import { RawOptions } from '../types/interfaces';
+declare const defaultOptions: RawOptions;
+export default defaultOptions;

plugins/filterizr/FilterizrOptions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as defaultOptions } from './defaultOptions';
+export { default } from './FilterizrOptions';

plugins/filterizr/Spinner/Spinner.d.ts

@@ -0,0 +1,13 @@
+import { Destructible, Styleable } from '../types/interfaces';
+import FilterizrOptions from '../FilterizrOptions';
+import FilterContainer from '../FilterContainer';
+import StyledSpinner from './StyledSpinner';
+export default class Spinner implements Destructible, Styleable {
+    private node;
+    private styledNode;
+    private filterContainer;
+    constructor(filterContainer: FilterContainer, options: FilterizrOptions);
+    readonly styles: StyledSpinner;
+    destroy(): Promise<void>;
+    private initialize;
+}

plugins/filterizr/Spinner/StyledSpinner.d.ts

@@ -0,0 +1,5 @@
+import StyledFilterizrElement from '../StyledFilterizrElement';
+export default class StyledSpinner extends StyledFilterizrElement {
+    initialize(): void;
+    fadeOut(): Promise<void>;
+}

plugins/filterizr/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Spinner';

plugins/filterizr/Spinner/makeSpinner.d.ts

@@ -0,0 +1,2 @@
+import { SpinnerOptions } from '../types/interfaces';
+export declare function makeSpinner({ fillColor }: SpinnerOptions): HTMLElement;

plugins/filterizr/StyledFilterizrElement.d.ts

@@ -0,0 +1,12 @@
+import { Destructible } from './types/interfaces/Destructible';
+import FilterizrOptions from './FilterizrOptions';
+export default abstract class StyledFilterizrElement implements Destructible {
+    protected options: FilterizrOptions;
+    protected node: HTMLElement;
+    constructor(node: HTMLElement, options: FilterizrOptions);
+    destroy(): void;
+    protected animate(targetStyles: object): Promise<void>;
+    protected set(targetStyles: object): void;
+    protected remove(propertyName: string): void;
+    abstract initialize(): void | Promise<void>;
+}

plugins/filterizr/StyledFilterizrElements.d.ts

@@ -0,0 +1,2 @@
+export default abstract class StyledFilterizrElements {
+}

plugins/filterizr/animate.d.ts

@@ -0,0 +1,6 @@
+declare class Animator {
+    static animate(node: HTMLElement, targetStyles: object): Promise<void>;
+    private static process;
+}
+declare const _default: typeof Animator.animate;
+export default _default;

plugins/filterizr/config/cssEasingValuesRegexp.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A Regexp to validate potential values for the CSS easing property of transitions.
+ */
+export declare const cssEasingValuesRegexp: RegExp;

plugins/filterizr/config/filterizrState.d.ts

@@ -0,0 +1,11 @@
+interface FilterizrState {
+    IDLE: 'IDLE';
+    FILTERING: 'FILTERING';
+    SORTING: 'SORTING';
+    SHUFFLING: 'SHUFFLING';
+}
+/**
+ * Possible animation states for Filterizr
+ */
+export declare const FILTERIZR_STATE: FilterizrState;
+export {};

plugins/filterizr/config/index.d.ts

@@ -0,0 +1,3 @@
+export { FILTERIZR_STATE } from './filterizrState';
+export { LAYOUT } from './layout';
+export { cssEasingValuesRegexp } from './cssEasingValuesRegexp';

plugins/filterizr/config/layout.d.ts

@@ -0,0 +1,13 @@
+interface Layout {
+    SAME_SIZE: 'sameSize';
+    SAME_HEIGHT: 'sameHeight';
+    SAME_WIDTH: 'sameWidth';
+    PACKED: 'packed';
+    HORIZONTAL: 'horizontal';
+    VERTICAL: 'vertical';
+}
+/**
+ * Possible grid layout modes
+ */
+export declare const LAYOUT: Layout;
+export {};

plugins/filterizr/getLayoutPositions.d.ts

@@ -0,0 +1,10 @@
+import { Position } from './FilterItem';
+import FilterContainer from './FilterContainer';
+/**
+ * Calculates and returns an array of objects representing
+ * the next positions the FilterItems are supposed to assume.
+ * @param layout name of helper method to be used
+ * @param filterizr instance
+ */
+declare const getLayoutPositions: (layout: string, filterContainer: FilterContainer) => Position[];
+export default getLayoutPositions;

plugins/filterizr/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Filterizr is a JavaScript library that sorts, shuffles and applies stunning
+ * filters over responsive galleries using CSS3 transitions and
+ * custom CSS effects.
+ * @author Yiotis Kaltsikis
+ * @see {@link http://yiotis.net/filterizr}
+ * @license MIT
+ */
+export { default } from './Filterizr';

plugins/filterizr/index.jquery.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Filterizr is a JavaScript library that sorts, shuffles and applies stunning filters over
+ * responsive galleries using CSS3 transitions and custom CSS effects.
+ *
+ * @author Yiotis Kaltsikis
+ * @see {@link http://yiotis.net/filterizr}
+ * @license MIT
+ */
+import Filterizr from './Filterizr';
+export default Filterizr;

plugins/filterizr/installAsJQueryPlugin.d.ts

@@ -0,0 +1 @@
+export default function installAsJQueryPlugin($: any): void;

plugins/filterizr/layouts/Packer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Modified version of Jake Gordon's Bin Packing algorithm used for Filterizr's 'packed' layout
+ * @see {@link https://github.com/jakesgordon/bin-packing}
+ */
+interface PackerRoot {
+    x: number;
+    y: number;
+    w: number;
+    h?: number;
+    used?: boolean;
+    down?: PackerRoot;
+    right?: PackerRoot;
+}
+interface PackerBlock {
+    x?: number;
+    y?: number;
+    w?: number;
+    h?: number;
+    fit?: PackerRoot | void;
+}
+export default class Packer {
+    root: PackerRoot;
+    constructor(w: number);
+    init(w: number): void;
+    fit(blocks: PackerBlock[]): void;
+    findNode(root: PackerRoot, w: number, h: number): PackerRoot | void;
+    splitNode(node: PackerRoot, w: number, h: number): PackerRoot;
+    growDown(w: number, h: number): PackerRoot | void;
+}
+export {};

plugins/filterizr/layouts/getHorizontalLayoutPositions.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../FilterItem';
+import FilterContainer from '../FilterContainer';
+/**
+ * Horizontal layout algorithm that arranges all FilterItems in one row. Their width may vary.
+ * @param filterContainer instance.
+ */
+declare const getHorizontalLayoutPositions: (filterContainer: FilterContainer) => Position[];
+export default getHorizontalLayoutPositions;

plugins/filterizr/layouts/getPackedLayoutPositions.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../FilterItem';
+import FilterContainer from '../FilterContainer';
+/**
+ * Packed layout for items that can have varying width as well as varying height.
+ * @param filterContainer instance.
+ */
+declare const getPackedLayoutPositions: (filterContainer: FilterContainer) => Position[];
+export default getPackedLayoutPositions;

plugins/filterizr/layouts/getSameHeightLayoutPositions.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../FilterItem';
+import FilterContainer from '../FilterContainer';
+/**
+ * Same height layout for items that have the same height, but can have varying width
+ * @param filterContainer instance.
+ */
+declare const getSameHeightLayoutPositions: (filterContainer: FilterContainer) => Position[];
+export default getSameHeightLayoutPositions;

plugins/filterizr/layouts/getSameSizeLayoutPosition.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../FilterItem';
+import FilterContainer from '../FilterContainer';
+/**
+ * Same size layout for items that have the same width/height
+ * @param filterContainer instance.
+ */
+declare const getSameSizeLayoutPosition: (filterContainer: FilterContainer) => Position[];
+export default getSameSizeLayoutPosition;

plugins/filterizr/layouts/getSameWidthLayoutPositions.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../FilterItem';
+import FilterContainer from '../FilterContainer';
+/**
+ * Same width layout for items that have the same width, but can have varying height
+ * @param filterContainer instance.
+ */
+declare const getSameWidthLayoutPositions: (filterContainer: FilterContainer) => Position[];
+export default getSameWidthLayoutPositions;

plugins/filterizr/layouts/getVerticalLayoutPositions.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../FilterItem';
+import FilterContainer from '../FilterContainer';
+/**
+ * Vertical layout algorithm that arranges all FilterItems in one column. Their height may vary.
+ * @param filterizr instance.
+ */
+declare const getVerticalLayoutPositions: (filterContainer: FilterContainer) => Position[];
+export default getVerticalLayoutPositions;

plugins/filterizr/makeLayoutPositions/Packer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Modified version of Jake Gordon's Bin Packing algorithm used for Filterizr's 'packed' layout
+ * @see {@link https://github.com/jakesgordon/bin-packing}
+ */
+interface PackerRoot {
+    x: number;
+    y: number;
+    w: number;
+    h?: number;
+    used?: boolean;
+    down?: PackerRoot;
+    right?: PackerRoot;
+}
+interface PackerBlock {
+    x?: number;
+    y?: number;
+    w?: number;
+    h?: number;
+    fit?: PackerRoot | void;
+}
+export default class Packer {
+    root: PackerRoot;
+    constructor(w: number);
+    init(w: number): void;
+    fit(blocks: PackerBlock[]): void;
+    findNode(root: PackerRoot, w: number, h: number): PackerRoot | void;
+    splitNode(node: PackerRoot, w: number, h: number): PackerRoot;
+    growDown(w: number, h: number): PackerRoot | void;
+}
+export {};

plugins/filterizr/makeLayoutPositions/index.d.ts

@@ -0,0 +1 @@
+export { default } from './makeLayoutPositions';

plugins/filterizr/makeLayoutPositions/makeHorizontalLayoutPositions.d.ts

@@ -0,0 +1,6 @@
+import { ContainerLayout, Dimensions } from '../types/interfaces';
+declare const _default: (itemsDimensions: Dimensions[], gutterPixels: number) => ContainerLayout;
+/**
+ * Horizontal layout algorithm that arranges all FilterItems in one row. Their width may vary.
+ */
+export default _default;

plugins/filterizr/makeLayoutPositions/makeLayoutPositions.d.ts

@@ -0,0 +1,7 @@
+import { ContainerLayout, Dimensions, Options } from '../types/interfaces';
+declare const _default: (containerWidth: number, itemsDimensions: Dimensions[], { gutterPixels, layout }: Options) => ContainerLayout;
+/**
+ * Creates the specifications of the dimensions of the
+ * container and items for the next render of Filterizr.
+ */
+export default _default;

plugins/filterizr/makeLayoutPositions/makePackedLayoutPositions.d.ts

@@ -0,0 +1,6 @@
+import { ContainerLayout, Dimensions } from '../types/interfaces';
+declare const _default: (containerWidth: number, itemsDimensions: Dimensions[], gutterPixels: number) => ContainerLayout;
+/**
+ * Packed layout for items that can have varying width as well as varying height.
+ */
+export default _default;

plugins/filterizr/makeLayoutPositions/makeSameHeightLayoutPositions.d.ts

@@ -0,0 +1,6 @@
+import { ContainerLayout, Dimensions } from '../types/interfaces';
+declare const _default: (containerWidth: number, itemsDimensions: Dimensions[], gutterPixels: number) => ContainerLayout;
+/**
+ * Same height layout for items that have the same height, but can have varying width
+ */
+export default _default;