mirror of https://github.com/ColorlibHQ/AdminLTE
created new gallery page
- added filterizr to plugins - created gallery demopull/2220/head
REJack
parent
ce9734ef07
commit
e3888aee85
|
|
@ -228,7 +228,11 @@ const Plugins = [
|
||||||
from: 'node_modules/bootstrap4-duallistbox/dist',
|
from: 'node_modules/bootstrap4-duallistbox/dist',
|
||||||
to: 'plugins/bootstrap4-duallistbox/'
|
to: 'plugins/bootstrap4-duallistbox/'
|
||||||
},
|
},
|
||||||
|
// filterizr
|
||||||
|
{
|
||||||
|
from: 'node_modules/filterizr/dist',
|
||||||
|
to: 'plugins/filterizr/'
|
||||||
|
},
|
||||||
|
|
||||||
// AdminLTE Dist
|
// AdminLTE Dist
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -421,6 +421,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -408,6 +408,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -418,6 +418,14 @@ to get the desired effect
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -5764,6 +5764,11 @@
|
||||||
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
|
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
|
||||||
"dev": true
|
"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": {
|
"eve-raphael": {
|
||||||
"version": "0.5.0",
|
"version": "0.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/eve-raphael/-/eve-raphael-0.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/eve-raphael/-/eve-raphael-0.5.0.tgz",
|
||||||
|
|
@ -6290,6 +6295,11 @@
|
||||||
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
|
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
|
||||||
"dev": true
|
"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": {
|
"fastclick": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
|
"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": {
|
"finalhandler": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
|
||||||
|
|
@ -7494,6 +7513,14 @@
|
||||||
"integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
|
"integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
|
||||||
"dev": true
|
"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": {
|
"immutable": {
|
||||||
"version": "3.8.2",
|
"version": "3.8.2",
|
||||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@
|
||||||
"datatables.net-bs4": "^1.10.19",
|
"datatables.net-bs4": "^1.10.19",
|
||||||
"daterangepicker": "^3.0.5",
|
"daterangepicker": "^3.0.5",
|
||||||
"fastclick": "^1.0.6",
|
"fastclick": "^1.0.6",
|
||||||
|
"filterizr": "^2.2.3",
|
||||||
"flag-icon-css": "^3.3.0",
|
"flag-icon-css": "^3.3.0",
|
||||||
"flot": "^3.1.1",
|
"flot": "^3.1.1",
|
||||||
"icheck-bootstrap": "^3.0.1",
|
"icheck-bootstrap": "^3.0.1",
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -456,6 +456,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -414,6 +414,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -416,6 +416,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -415,6 +415,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -409,6 +409,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -416,6 +416,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -424,6 +424,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -439,6 +439,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -424,6 +424,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -413,6 +413,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -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 © 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>
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -412,6 +412,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -413,6 +413,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -411,6 +411,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -413,6 +413,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -414,6 +414,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -410,6 +410,14 @@
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<li class="nav-item has-treeview">
|
||||||
<a href="#" class="nav-link">
|
<a href="#" class="nav-link">
|
||||||
<i class="nav-icon far fa-envelope"></i>
|
<i class="nav-icon far fa-envelope"></i>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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 {};
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import StyledFilterizrElement from '../StyledFilterizrElement';
|
||||||
|
export default class StyledFilterContainer extends StyledFilterizrElement {
|
||||||
|
initialize(): void;
|
||||||
|
updatePaddings(): void;
|
||||||
|
setHeight(newHeight: number): void;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './FilterContainer';
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './FilterItem';
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './FilterItems';
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './Filterizr';
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export default function installAsJQueryPlugin($: any): void;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { RawOptions } from '../types/interfaces';
|
||||||
|
declare const defaultOptions: RawOptions;
|
||||||
|
export default defaultOptions;
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as defaultOptions } from './defaultOptions';
|
||||||
|
export { default } from './FilterizrOptions';
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import StyledFilterizrElement from '../StyledFilterizrElement';
|
||||||
|
export default class StyledSpinner extends StyledFilterizrElement {
|
||||||
|
initialize(): void;
|
||||||
|
fadeOut(): Promise<void>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './Spinner';
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import { SpinnerOptions } from '../types/interfaces';
|
||||||
|
export declare function makeSpinner({ fillColor }: SpinnerOptions): HTMLElement;
|
||||||
|
|
@ -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>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export default abstract class StyledFilterizrElements {
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
/**
|
||||||
|
* A Regexp to validate potential values for the CSS easing property of transitions.
|
||||||
|
*/
|
||||||
|
export declare const cssEasingValuesRegexp: RegExp;
|
||||||
|
|
@ -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 {};
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { FILTERIZR_STATE } from './filterizrState';
|
||||||
|
export { LAYOUT } from './layout';
|
||||||
|
export { cssEasingValuesRegexp } from './cssEasingValuesRegexp';
|
||||||
|
|
@ -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 {};
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||||
|
|
@ -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';
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export default function installAsJQueryPlugin($: any): void;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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 {};
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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 {};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './makeLayoutPositions';
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue