From 3e21fb44bce7f9e3431f735efdce689258f40043 Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlib@outlook.com>
Date: Mon, 29 May 2023 14:27:36 +0000
Subject: [PATCH] fix incompatible for PHP 8.2

---
 modules/tile/ext.isekai.tile.css | 1392 ++++++++++++++++++++++++++++++
 modules/tile/ext.isekai.tile.js  |    1 +
 src/tile/ext.isekai.tile.js      |  854 ++++++++++++++++++
 3 files changed, 2247 insertions(+)
 create mode 100644 modules/tile/ext.isekai.tile.css
 create mode 100644 modules/tile/ext.isekai.tile.js
 create mode 100644 src/tile/ext.isekai.tile.js

diff --git a/modules/tile/ext.isekai.tile.css b/modules/tile/ext.isekai.tile.css
new file mode 100644
index 0000000..71e3b55
--- /dev/null
+++ b/modules/tile/ext.isekai.tile.css
@@ -0,0 +1,1392 @@
+.tile-small,
+.tile-medium,
+.tile-wide,
+.tile-large,
+.tile-app {
+  display: block;
+  background-color: #1ba1e2;
+  color: #ffffff;
+  width: 150px;
+  height: 150px;
+  box-shadow: inset 0 0 1px #FFFFCC;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  max-width: none!important;
+}
+.tile-small {
+  width: 70px;
+  height: 70px;
+}
+.tile-medium {
+  width: 150px;
+  height: 150px;
+}
+.tile-wide {
+  width: 310px;
+  height: 150px;
+}
+.tile-large {
+  width: 310px;
+  height: 310px;
+}
+.tile-app {
+  width: 44px;
+  height: 44px;
+}
+.tile-small .icon,
+.tile-medium .icon,
+.tile-wide .icon,
+.tile-large .icon,
+.tile-app .icon {
+  max-width: 33%;
+  height: 33%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  /*font-size: 50px;*/
+  /*line-height: 50px;*/
+  z-index: 2;
+}
+.tile-small .branding-bar,
+.tile-medium .branding-bar,
+.tile-wide .branding-bar,
+.tile-large .branding-bar,
+.tile-app .branding-bar {
+  height: 32px;
+  line-height: 32px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0 10px 5px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  z-index: 2;
+}
+.tile-small .badge-top,
+.tile-medium .badge-top,
+.tile-wide .badge-top,
+.tile-large .badge-top,
+.tile-app .badge-top,
+.tile-small .badge-bottom,
+.tile-medium .badge-bottom,
+.tile-wide .badge-bottom,
+.tile-large .badge-bottom,
+.tile-app .badge-bottom {
+  position: absolute;
+  display: block;
+  padding: 4px 8px;
+  font-size: 12px;
+  text-align: center;
+  background-color: rgba(29, 29, 29, 0.1);
+  z-index: 2;
+}
+.tile-small .badge-bottom,
+.tile-medium .badge-bottom,
+.tile-wide .badge-bottom,
+.tile-large .badge-bottom,
+.tile-app .badge-bottom {
+  right: 10px;
+  bottom: 0;
+}
+.tile-small .badge-top,
+.tile-medium .badge-top,
+.tile-wide .badge-top,
+.tile-large .badge-top,
+.tile-app .badge-top {
+  top: 10px;
+  right: 10px;
+}
+.tile-small:hover,
+.tile-medium:hover,
+.tile-wide:hover,
+.tile-large:hover,
+.tile-app:hover {
+  outline: rgba(29, 29, 29, 0.1) solid 4px;
+}
+.tile-small {
+  /*.branding-bar {
+            display: none;
+        }*/
+}
+.tile-small .icon {
+  max-width: 50%;
+  font-size: 35px;
+  line-height: 35px;
+}
+.tile-large .icon {
+  font-size: 102px;
+  line-height: 102px;
+}
+.tile-app .icon {
+  max-width: 75%;
+  height: 75%;
+}
+.tile-small.transform-right,
+.tile-medium.transform-right,
+.tile-wide.transform-right,
+.tile-large.transform-right,
+.tile-app.transform-right {
+  transform-origin: left 50%;
+  transform: perspective(500px) rotateY(0.138372rad) !important;
+}
+.tile-small.transform-right.tile-small,
+.tile-medium.transform-right.tile-small,
+.tile-wide.transform-right.tile-small,
+.tile-large.transform-right.tile-small,
+.tile-app.transform-right.tile-small {
+  transform: perspective(500px) rotateY(0.276744rad) !important;
+}
+.tile-small.transform-right.tile-wide,
+.tile-medium.transform-right.tile-wide,
+.tile-wide.transform-right.tile-wide,
+.tile-large.transform-right.tile-wide,
+.tile-app.transform-right.tile-wide {
+  transform: perspective(500px) rotateY(0.138372rad / 2) !important;
+}
+.tile-small.transform-right.tile-large,
+.tile-medium.transform-right.tile-large,
+.tile-wide.transform-right.tile-large,
+.tile-large.transform-right.tile-large,
+.tile-app.transform-right.tile-large {
+  transform: perspective(500px) rotateY(0.138372rad / 3) !important;
+}
+.tile-small.transform-left,
+.tile-medium.transform-left,
+.tile-wide.transform-left,
+.tile-large.transform-left,
+.tile-app.transform-left {
+  transform-origin: right 50%;
+  transform: perspective(500px) rotateY(-0.138372rad) !important;
+}
+.tile-small.transform-left.tile-small,
+.tile-medium.transform-left.tile-small,
+.tile-wide.transform-left.tile-small,
+.tile-large.transform-left.tile-small,
+.tile-app.transform-left.tile-small {
+  transform: perspective(500px) rotateY(-0.276744rad) !important;
+}
+.tile-small.transform-left.tile-wide,
+.tile-medium.transform-left.tile-wide,
+.tile-wide.transform-left.tile-wide,
+.tile-large.transform-left.tile-wide,
+.tile-app.transform-left.tile-wide {
+  transform: perspective(500px) rotateY(-0.138372rad / 2) !important;
+}
+.tile-small.transform-left.tile-large,
+.tile-medium.transform-left.tile-large,
+.tile-wide.transform-left.tile-large,
+.tile-large.transform-left.tile-large,
+.tile-app.transform-left.tile-large {
+  transform: perspective(500px) rotateY(-0.138372rad / 3) !important;
+}
+.tile-small.transform-top,
+.tile-medium.transform-top,
+.tile-wide.transform-top,
+.tile-large.transform-top,
+.tile-app.transform-top {
+  transform-origin: 50% bottom;
+  transform: perspective(500px) rotateX(0.138372rad) !important;
+}
+.tile-small.transform-top.tile-small,
+.tile-medium.transform-top.tile-small,
+.tile-wide.transform-top.tile-small,
+.tile-large.transform-top.tile-small,
+.tile-app.transform-top.tile-small {
+  transform: perspective(500px) rotateX(0.276744rad) !important;
+}
+.tile-small.transform-top.tile-wide,
+.tile-medium.transform-top.tile-wide,
+.tile-wide.transform-top.tile-wide,
+.tile-large.transform-top.tile-wide,
+.tile-app.transform-top.tile-wide {
+  transform: perspective(500px) rotateX(0.138372rad / 2) !important;
+}
+.tile-small.transform-top.tile-large,
+.tile-medium.transform-top.tile-large,
+.tile-wide.transform-top.tile-large,
+.tile-large.transform-top.tile-large,
+.tile-app.transform-top.tile-large {
+  transform: perspective(500px) rotateX(0.138372rad / 3) !important;
+}
+.tile-small.transform-bottom,
+.tile-medium.transform-bottom,
+.tile-wide.transform-bottom,
+.tile-large.transform-bottom,
+.tile-app.transform-bottom {
+  transform-origin: 50% top;
+  transform: perspective(500px) rotateX(-0.138372rad) !important;
+}
+.tile-small.transform-bottom.tile-small,
+.tile-medium.transform-bottom.tile-small,
+.tile-wide.transform-bottom.tile-small,
+.tile-large.transform-bottom.tile-small,
+.tile-app.transform-bottom.tile-small {
+  transform: perspective(500px) rotateX(-0.276744rad) !important;
+}
+.tile-small.transform-bottom.tile-wide,
+.tile-medium.transform-bottom.tile-wide,
+.tile-wide.transform-bottom.tile-wide,
+.tile-large.transform-bottom.tile-wide,
+.tile-app.transform-bottom.tile-wide {
+  transform: perspective(500px) rotateX(-0.138372rad / 2) !important;
+}
+.tile-small.transform-bottom.tile-large,
+.tile-medium.transform-bottom.tile-large,
+.tile-wide.transform-bottom.tile-large,
+.tile-large.transform-bottom.tile-large,
+.tile-app.transform-bottom.tile-large {
+  transform: perspective(500px) rotateX(-0.138372rad / 3) !important;
+}
+.tiles-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 24%);
+  /*grid-template-rows: repeat(auto-fit, (@tileBaseSize - 1%));*/
+  grid-gap: 10px;
+  /*.tile-small::before,
+    .tile-medium::before,
+    .tile-large::before {
+        content: '';
+        padding-bottom: 100%;
+        display: block;
+    }
+
+    .tile-wide::before {
+        content: '';
+        padding-bottom: 50%;
+        display: block;
+    }*/
+}
+.tiles-grid .tile-small {
+  height: 100%;
+  width: 100%;
+  grid-column: span 1;
+  grid-row: span 1;
+}
+.tiles-grid .tile-medium {
+  height: 100%;
+  width: 100%;
+  grid-column: span 2;
+  grid-row: span 2;
+}
+.tiles-grid .tile-wide {
+  height: 100%;
+  width: 100%;
+  grid-column: span 4;
+  grid-row: span 2;
+}
+.tiles-grid .tile-large {
+  height: 100%;
+  width: 100%;
+  grid-column: span 4;
+  grid-row: span 4;
+}
+.tiles-grid .tile-small.col-1 {
+  grid-column: 1 / span 1;
+}
+.tiles-grid .tile-medium.col-1 {
+  grid-column: 1 / span 2;
+}
+.tiles-grid .tile-wide.col-1 {
+  grid-column: 1 / span 4;
+}
+.tiles-grid .tile-large.col-1 {
+  grid-column: 1 / span 4;
+}
+.tiles-grid .tile-small.row-1 {
+  grid-row: 1 / span 1;
+}
+.tiles-grid .tile-medium.row-1 {
+  grid-row: 1 / span 2;
+}
+.tiles-grid .tile-wide.row-1 {
+  grid-row: 1 / span 4;
+}
+.tiles-grid .tile-large.row-1 {
+  grid-row: 1 / span 4;
+}
+.tiles-grid .tile-small.col-2 {
+  grid-column: 2 / span 1;
+}
+.tiles-grid .tile-medium.col-2 {
+  grid-column: 2 / span 2;
+}
+.tiles-grid .tile-wide.col-2 {
+  grid-column: 2 / span 4;
+}
+.tiles-grid .tile-large.col-2 {
+  grid-column: 2 / span 4;
+}
+.tiles-grid .tile-small.row-2 {
+  grid-row: 2 / span 1;
+}
+.tiles-grid .tile-medium.row-2 {
+  grid-row: 2 / span 2;
+}
+.tiles-grid .tile-wide.row-2 {
+  grid-row: 2 / span 4;
+}
+.tiles-grid .tile-large.row-2 {
+  grid-row: 2 / span 4;
+}
+.tiles-grid .tile-small.col-3 {
+  grid-column: 3 / span 1;
+}
+.tiles-grid .tile-medium.col-3 {
+  grid-column: 3 / span 2;
+}
+.tiles-grid .tile-wide.col-3 {
+  grid-column: 3 / span 4;
+}
+.tiles-grid .tile-large.col-3 {
+  grid-column: 3 / span 4;
+}
+.tiles-grid .tile-small.row-3 {
+  grid-row: 3 / span 1;
+}
+.tiles-grid .tile-medium.row-3 {
+  grid-row: 3 / span 2;
+}
+.tiles-grid .tile-wide.row-3 {
+  grid-row: 3 / span 4;
+}
+.tiles-grid .tile-large.row-3 {
+  grid-row: 3 / span 4;
+}
+.tiles-grid .tile-small.col-4 {
+  grid-column: 4 / span 1;
+}
+.tiles-grid .tile-medium.col-4 {
+  grid-column: 4 / span 2;
+}
+.tiles-grid .tile-wide.col-4 {
+  grid-column: 4 / span 4;
+}
+.tiles-grid .tile-large.col-4 {
+  grid-column: 4 / span 4;
+}
+.tiles-grid .tile-small.row-4 {
+  grid-row: 4 / span 1;
+}
+.tiles-grid .tile-medium.row-4 {
+  grid-row: 4 / span 2;
+}
+.tiles-grid .tile-wide.row-4 {
+  grid-row: 4 / span 4;
+}
+.tiles-grid .tile-large.row-4 {
+  grid-row: 4 / span 4;
+}
+.tiles-grid .tile-small.col-5 {
+  grid-column: 5 / span 1;
+}
+.tiles-grid .tile-medium.col-5 {
+  grid-column: 5 / span 2;
+}
+.tiles-grid .tile-wide.col-5 {
+  grid-column: 5 / span 4;
+}
+.tiles-grid .tile-large.col-5 {
+  grid-column: 5 / span 4;
+}
+.tiles-grid .tile-small.row-5 {
+  grid-row: 5 / span 1;
+}
+.tiles-grid .tile-medium.row-5 {
+  grid-row: 5 / span 2;
+}
+.tiles-grid .tile-wide.row-5 {
+  grid-row: 5 / span 4;
+}
+.tiles-grid .tile-large.row-5 {
+  grid-row: 5 / span 4;
+}
+.tiles-grid .tile-small.col-6 {
+  grid-column: 6 / span 1;
+}
+.tiles-grid .tile-medium.col-6 {
+  grid-column: 6 / span 2;
+}
+.tiles-grid .tile-wide.col-6 {
+  grid-column: 6 / span 4;
+}
+.tiles-grid .tile-large.col-6 {
+  grid-column: 6 / span 4;
+}
+.tiles-grid .tile-small.row-6 {
+  grid-row: 6 / span 1;
+}
+.tiles-grid .tile-medium.row-6 {
+  grid-row: 6 / span 2;
+}
+.tiles-grid .tile-wide.row-6 {
+  grid-row: 6 / span 4;
+}
+.tiles-grid .tile-large.row-6 {
+  grid-row: 6 / span 4;
+}
+.tiles-grid .tile-small.col-7 {
+  grid-column: 7 / span 1;
+}
+.tiles-grid .tile-medium.col-7 {
+  grid-column: 7 / span 2;
+}
+.tiles-grid .tile-wide.col-7 {
+  grid-column: 7 / span 4;
+}
+.tiles-grid .tile-large.col-7 {
+  grid-column: 7 / span 4;
+}
+.tiles-grid .tile-small.row-7 {
+  grid-row: 7 / span 1;
+}
+.tiles-grid .tile-medium.row-7 {
+  grid-row: 7 / span 2;
+}
+.tiles-grid .tile-wide.row-7 {
+  grid-row: 7 / span 4;
+}
+.tiles-grid .tile-large.row-7 {
+  grid-row: 7 / span 4;
+}
+.tiles-grid .tile-small.col-8 {
+  grid-column: 8 / span 1;
+}
+.tiles-grid .tile-medium.col-8 {
+  grid-column: 8 / span 2;
+}
+.tiles-grid .tile-wide.col-8 {
+  grid-column: 8 / span 4;
+}
+.tiles-grid .tile-large.col-8 {
+  grid-column: 8 / span 4;
+}
+.tiles-grid .tile-small.row-8 {
+  grid-row: 8 / span 1;
+}
+.tiles-grid .tile-medium.row-8 {
+  grid-row: 8 / span 2;
+}
+.tiles-grid .tile-wide.row-8 {
+  grid-row: 8 / span 4;
+}
+.tiles-grid .tile-large.row-8 {
+  grid-row: 8 / span 4;
+}
+.tiles-grid .tile-small.col-9 {
+  grid-column: 9 / span 1;
+}
+.tiles-grid .tile-medium.col-9 {
+  grid-column: 9 / span 2;
+}
+.tiles-grid .tile-wide.col-9 {
+  grid-column: 9 / span 4;
+}
+.tiles-grid .tile-large.col-9 {
+  grid-column: 9 / span 4;
+}
+.tiles-grid .tile-small.row-9 {
+  grid-row: 9 / span 1;
+}
+.tiles-grid .tile-medium.row-9 {
+  grid-row: 9 / span 2;
+}
+.tiles-grid .tile-wide.row-9 {
+  grid-row: 9 / span 4;
+}
+.tiles-grid .tile-large.row-9 {
+  grid-row: 9 / span 4;
+}
+.tiles-grid .tile-small.col-10 {
+  grid-column: 10 / span 1;
+}
+.tiles-grid .tile-medium.col-10 {
+  grid-column: 10 / span 2;
+}
+.tiles-grid .tile-wide.col-10 {
+  grid-column: 10 / span 4;
+}
+.tiles-grid .tile-large.col-10 {
+  grid-column: 10 / span 4;
+}
+.tiles-grid .tile-small.row-10 {
+  grid-row: 10 / span 1;
+}
+.tiles-grid .tile-medium.row-10 {
+  grid-row: 10 / span 2;
+}
+.tiles-grid .tile-wide.row-10 {
+  grid-row: 10 / span 4;
+}
+.tiles-grid .tile-large.row-10 {
+  grid-row: 10 / span 4;
+}
+.tiles-grid .tile-small.col-11 {
+  grid-column: 11 / span 1;
+}
+.tiles-grid .tile-medium.col-11 {
+  grid-column: 11 / span 2;
+}
+.tiles-grid .tile-wide.col-11 {
+  grid-column: 11 / span 4;
+}
+.tiles-grid .tile-large.col-11 {
+  grid-column: 11 / span 4;
+}
+.tiles-grid .tile-small.row-11 {
+  grid-row: 11 / span 1;
+}
+.tiles-grid .tile-medium.row-11 {
+  grid-row: 11 / span 2;
+}
+.tiles-grid .tile-wide.row-11 {
+  grid-row: 11 / span 4;
+}
+.tiles-grid .tile-large.row-11 {
+  grid-row: 11 / span 4;
+}
+.tiles-grid .tile-small.col-12 {
+  grid-column: 12 / span 1;
+}
+.tiles-grid .tile-medium.col-12 {
+  grid-column: 12 / span 2;
+}
+.tiles-grid .tile-wide.col-12 {
+  grid-column: 12 / span 4;
+}
+.tiles-grid .tile-large.col-12 {
+  grid-column: 12 / span 4;
+}
+.tiles-grid .tile-small.row-12 {
+  grid-row: 12 / span 1;
+}
+.tiles-grid .tile-medium.row-12 {
+  grid-row: 12 / span 2;
+}
+.tiles-grid .tile-wide.row-12 {
+  grid-row: 12 / span 4;
+}
+.tiles-grid .tile-large.row-12 {
+  grid-row: 12 / span 4;
+}
+.tiles-grid.size-half {
+  width: 50%;
+}
+.tiles-grid.size-1 {
+  width: 8.33333333%;
+}
+.tiles-grid.size-2 {
+  width: 16.66666667%;
+}
+.tiles-grid.size-3 {
+  width: 25%;
+}
+.tiles-grid.size-4 {
+  width: 33.33333333%;
+}
+.tiles-grid.size-5 {
+  width: 41.66666667%;
+}
+.tiles-grid.size-6 {
+  width: 50%;
+}
+.tiles-grid.size-7 {
+  width: 58.33333333%;
+}
+.tiles-grid.size-8 {
+  width: 66.66666667%;
+}
+.tiles-grid.size-9 {
+  width: 75%;
+}
+.tiles-grid.size-10 {
+  width: 83.33333333%;
+}
+.tiles-grid.size-11 {
+  width: 91.66666667%;
+}
+.tiles-grid.size-12 {
+  width: 100%;
+}
+@media screen and (min-width: 0) {
+  .tiles-grid .col-fs-1 {
+    grid-column: 1;
+  }
+  .tiles-grid .row-fs-1 {
+    grid-row: 1;
+  }
+  .tiles-grid .col-fs-2 {
+    grid-column: 2;
+  }
+  .tiles-grid .row-fs-2 {
+    grid-row: 2;
+  }
+  .tiles-grid .col-fs-3 {
+    grid-column: 3;
+  }
+  .tiles-grid .row-fs-3 {
+    grid-row: 3;
+  }
+  .tiles-grid .col-fs-4 {
+    grid-column: 4;
+  }
+  .tiles-grid .row-fs-4 {
+    grid-row: 4;
+  }
+  .tiles-grid .col-fs-5 {
+    grid-column: 5;
+  }
+  .tiles-grid .row-fs-5 {
+    grid-row: 5;
+  }
+  .tiles-grid .col-fs-6 {
+    grid-column: 6;
+  }
+  .tiles-grid .row-fs-6 {
+    grid-row: 6;
+  }
+  .tiles-grid .col-fs-7 {
+    grid-column: 7;
+  }
+  .tiles-grid .row-fs-7 {
+    grid-row: 7;
+  }
+  .tiles-grid .col-fs-8 {
+    grid-column: 8;
+  }
+  .tiles-grid .row-fs-8 {
+    grid-row: 8;
+  }
+  .tiles-grid .col-fs-9 {
+    grid-column: 9;
+  }
+  .tiles-grid .row-fs-9 {
+    grid-row: 9;
+  }
+  .tiles-grid .col-fs-10 {
+    grid-column: 10;
+  }
+  .tiles-grid .row-fs-10 {
+    grid-row: 10;
+  }
+  .tiles-grid .col-fs-11 {
+    grid-column: 11;
+  }
+  .tiles-grid .row-fs-11 {
+    grid-row: 11;
+  }
+  .tiles-grid .col-fs-12 {
+    grid-column: 12;
+  }
+  .tiles-grid .row-fs-12 {
+    grid-row: 12;
+  }
+  .tiles-grid.size-fs-1 {
+    width: 8.33333333%;
+  }
+  .tiles-grid.size-fs-2 {
+    width: 16.66666667%;
+  }
+  .tiles-grid.size-fs-3 {
+    width: 25%;
+  }
+  .tiles-grid.size-fs-4 {
+    width: 33.33333333%;
+  }
+  .tiles-grid.size-fs-5 {
+    width: 41.66666667%;
+  }
+  .tiles-grid.size-fs-6 {
+    width: 50%;
+  }
+  .tiles-grid.size-fs-7 {
+    width: 58.33333333%;
+  }
+  .tiles-grid.size-fs-8 {
+    width: 66.66666667%;
+  }
+  .tiles-grid.size-fs-9 {
+    width: 75%;
+  }
+  .tiles-grid.size-fs-10 {
+    width: 83.33333333%;
+  }
+  .tiles-grid.size-fs-11 {
+    width: 91.66666667%;
+  }
+  .tiles-grid.size-fs-12 {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 576px) {
+  .tiles-grid .col-sm-1 {
+    grid-column: 1;
+  }
+  .tiles-grid .row-sm-1 {
+    grid-row: 1;
+  }
+  .tiles-grid .col-sm-2 {
+    grid-column: 2;
+  }
+  .tiles-grid .row-sm-2 {
+    grid-row: 2;
+  }
+  .tiles-grid .col-sm-3 {
+    grid-column: 3;
+  }
+  .tiles-grid .row-sm-3 {
+    grid-row: 3;
+  }
+  .tiles-grid .col-sm-4 {
+    grid-column: 4;
+  }
+  .tiles-grid .row-sm-4 {
+    grid-row: 4;
+  }
+  .tiles-grid .col-sm-5 {
+    grid-column: 5;
+  }
+  .tiles-grid .row-sm-5 {
+    grid-row: 5;
+  }
+  .tiles-grid .col-sm-6 {
+    grid-column: 6;
+  }
+  .tiles-grid .row-sm-6 {
+    grid-row: 6;
+  }
+  .tiles-grid .col-sm-7 {
+    grid-column: 7;
+  }
+  .tiles-grid .row-sm-7 {
+    grid-row: 7;
+  }
+  .tiles-grid .col-sm-8 {
+    grid-column: 8;
+  }
+  .tiles-grid .row-sm-8 {
+    grid-row: 8;
+  }
+  .tiles-grid .col-sm-9 {
+    grid-column: 9;
+  }
+  .tiles-grid .row-sm-9 {
+    grid-row: 9;
+  }
+  .tiles-grid .col-sm-10 {
+    grid-column: 10;
+  }
+  .tiles-grid .row-sm-10 {
+    grid-row: 10;
+  }
+  .tiles-grid .col-sm-11 {
+    grid-column: 11;
+  }
+  .tiles-grid .row-sm-11 {
+    grid-row: 11;
+  }
+  .tiles-grid .col-sm-12 {
+    grid-column: 12;
+  }
+  .tiles-grid .row-sm-12 {
+    grid-row: 12;
+  }
+  .tiles-grid.size-sm-1 {
+    width: 8.33333333%;
+  }
+  .tiles-grid.size-sm-2 {
+    width: 16.66666667%;
+  }
+  .tiles-grid.size-sm-3 {
+    width: 25%;
+  }
+  .tiles-grid.size-sm-4 {
+    width: 33.33333333%;
+  }
+  .tiles-grid.size-sm-5 {
+    width: 41.66666667%;
+  }
+  .tiles-grid.size-sm-6 {
+    width: 50%;
+  }
+  .tiles-grid.size-sm-7 {
+    width: 58.33333333%;
+  }
+  .tiles-grid.size-sm-8 {
+    width: 66.66666667%;
+  }
+  .tiles-grid.size-sm-9 {
+    width: 75%;
+  }
+  .tiles-grid.size-sm-10 {
+    width: 83.33333333%;
+  }
+  .tiles-grid.size-sm-11 {
+    width: 91.66666667%;
+  }
+  .tiles-grid.size-sm-12 {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 768px) {
+  .tiles-grid .col-md-1 {
+    grid-column: 1;
+  }
+  .tiles-grid .row-md-1 {
+    grid-row: 1;
+  }
+  .tiles-grid .col-md-2 {
+    grid-column: 2;
+  }
+  .tiles-grid .row-md-2 {
+    grid-row: 2;
+  }
+  .tiles-grid .col-md-3 {
+    grid-column: 3;
+  }
+  .tiles-grid .row-md-3 {
+    grid-row: 3;
+  }
+  .tiles-grid .col-md-4 {
+    grid-column: 4;
+  }
+  .tiles-grid .row-md-4 {
+    grid-row: 4;
+  }
+  .tiles-grid .col-md-5 {
+    grid-column: 5;
+  }
+  .tiles-grid .row-md-5 {
+    grid-row: 5;
+  }
+  .tiles-grid .col-md-6 {
+    grid-column: 6;
+  }
+  .tiles-grid .row-md-6 {
+    grid-row: 6;
+  }
+  .tiles-grid .col-md-7 {
+    grid-column: 7;
+  }
+  .tiles-grid .row-md-7 {
+    grid-row: 7;
+  }
+  .tiles-grid .col-md-8 {
+    grid-column: 8;
+  }
+  .tiles-grid .row-md-8 {
+    grid-row: 8;
+  }
+  .tiles-grid .col-md-9 {
+    grid-column: 9;
+  }
+  .tiles-grid .row-md-9 {
+    grid-row: 9;
+  }
+  .tiles-grid .col-md-10 {
+    grid-column: 10;
+  }
+  .tiles-grid .row-md-10 {
+    grid-row: 10;
+  }
+  .tiles-grid .col-md-11 {
+    grid-column: 11;
+  }
+  .tiles-grid .row-md-11 {
+    grid-row: 11;
+  }
+  .tiles-grid .col-md-12 {
+    grid-column: 12;
+  }
+  .tiles-grid .row-md-12 {
+    grid-row: 12;
+  }
+  .tiles-grid.size-md-1 {
+    width: 8.33333333%;
+  }
+  .tiles-grid.size-md-2 {
+    width: 16.66666667%;
+  }
+  .tiles-grid.size-md-3 {
+    width: 25%;
+  }
+  .tiles-grid.size-md-4 {
+    width: 33.33333333%;
+  }
+  .tiles-grid.size-md-5 {
+    width: 41.66666667%;
+  }
+  .tiles-grid.size-md-6 {
+    width: 50%;
+  }
+  .tiles-grid.size-md-7 {
+    width: 58.33333333%;
+  }
+  .tiles-grid.size-md-8 {
+    width: 66.66666667%;
+  }
+  .tiles-grid.size-md-9 {
+    width: 75%;
+  }
+  .tiles-grid.size-md-10 {
+    width: 83.33333333%;
+  }
+  .tiles-grid.size-md-11 {
+    width: 91.66666667%;
+  }
+  .tiles-grid.size-md-12 {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 992px) {
+  .tiles-grid .col-lg-1 {
+    grid-column: 1;
+  }
+  .tiles-grid .row-lg-1 {
+    grid-row: 1;
+  }
+  .tiles-grid .col-lg-2 {
+    grid-column: 2;
+  }
+  .tiles-grid .row-lg-2 {
+    grid-row: 2;
+  }
+  .tiles-grid .col-lg-3 {
+    grid-column: 3;
+  }
+  .tiles-grid .row-lg-3 {
+    grid-row: 3;
+  }
+  .tiles-grid .col-lg-4 {
+    grid-column: 4;
+  }
+  .tiles-grid .row-lg-4 {
+    grid-row: 4;
+  }
+  .tiles-grid .col-lg-5 {
+    grid-column: 5;
+  }
+  .tiles-grid .row-lg-5 {
+    grid-row: 5;
+  }
+  .tiles-grid .col-lg-6 {
+    grid-column: 6;
+  }
+  .tiles-grid .row-lg-6 {
+    grid-row: 6;
+  }
+  .tiles-grid .col-lg-7 {
+    grid-column: 7;
+  }
+  .tiles-grid .row-lg-7 {
+    grid-row: 7;
+  }
+  .tiles-grid .col-lg-8 {
+    grid-column: 8;
+  }
+  .tiles-grid .row-lg-8 {
+    grid-row: 8;
+  }
+  .tiles-grid .col-lg-9 {
+    grid-column: 9;
+  }
+  .tiles-grid .row-lg-9 {
+    grid-row: 9;
+  }
+  .tiles-grid .col-lg-10 {
+    grid-column: 10;
+  }
+  .tiles-grid .row-lg-10 {
+    grid-row: 10;
+  }
+  .tiles-grid .col-lg-11 {
+    grid-column: 11;
+  }
+  .tiles-grid .row-lg-11 {
+    grid-row: 11;
+  }
+  .tiles-grid .col-lg-12 {
+    grid-column: 12;
+  }
+  .tiles-grid .row-lg-12 {
+    grid-row: 12;
+  }
+  .tiles-grid.size-lg-1 {
+    width: 8.33333333%;
+  }
+  .tiles-grid.size-lg-2 {
+    width: 16.66666667%;
+  }
+  .tiles-grid.size-lg-3 {
+    width: 25%;
+  }
+  .tiles-grid.size-lg-4 {
+    width: 33.33333333%;
+  }
+  .tiles-grid.size-lg-5 {
+    width: 41.66666667%;
+  }
+  .tiles-grid.size-lg-6 {
+    width: 50%;
+  }
+  .tiles-grid.size-lg-7 {
+    width: 58.33333333%;
+  }
+  .tiles-grid.size-lg-8 {
+    width: 66.66666667%;
+  }
+  .tiles-grid.size-lg-9 {
+    width: 75%;
+  }
+  .tiles-grid.size-lg-10 {
+    width: 83.33333333%;
+  }
+  .tiles-grid.size-lg-11 {
+    width: 91.66666667%;
+  }
+  .tiles-grid.size-lg-12 {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .tiles-grid .col-xl-1 {
+    grid-column: 1;
+  }
+  .tiles-grid .row-xl-1 {
+    grid-row: 1;
+  }
+  .tiles-grid .col-xl-2 {
+    grid-column: 2;
+  }
+  .tiles-grid .row-xl-2 {
+    grid-row: 2;
+  }
+  .tiles-grid .col-xl-3 {
+    grid-column: 3;
+  }
+  .tiles-grid .row-xl-3 {
+    grid-row: 3;
+  }
+  .tiles-grid .col-xl-4 {
+    grid-column: 4;
+  }
+  .tiles-grid .row-xl-4 {
+    grid-row: 4;
+  }
+  .tiles-grid .col-xl-5 {
+    grid-column: 5;
+  }
+  .tiles-grid .row-xl-5 {
+    grid-row: 5;
+  }
+  .tiles-grid .col-xl-6 {
+    grid-column: 6;
+  }
+  .tiles-grid .row-xl-6 {
+    grid-row: 6;
+  }
+  .tiles-grid .col-xl-7 {
+    grid-column: 7;
+  }
+  .tiles-grid .row-xl-7 {
+    grid-row: 7;
+  }
+  .tiles-grid .col-xl-8 {
+    grid-column: 8;
+  }
+  .tiles-grid .row-xl-8 {
+    grid-row: 8;
+  }
+  .tiles-grid .col-xl-9 {
+    grid-column: 9;
+  }
+  .tiles-grid .row-xl-9 {
+    grid-row: 9;
+  }
+  .tiles-grid .col-xl-10 {
+    grid-column: 10;
+  }
+  .tiles-grid .row-xl-10 {
+    grid-row: 10;
+  }
+  .tiles-grid .col-xl-11 {
+    grid-column: 11;
+  }
+  .tiles-grid .row-xl-11 {
+    grid-row: 11;
+  }
+  .tiles-grid .col-xl-12 {
+    grid-column: 12;
+  }
+  .tiles-grid .row-xl-12 {
+    grid-row: 12;
+  }
+  .tiles-grid.size-xl-1 {
+    width: 8.33333333%;
+  }
+  .tiles-grid.size-xl-2 {
+    width: 16.66666667%;
+  }
+  .tiles-grid.size-xl-3 {
+    width: 25%;
+  }
+  .tiles-grid.size-xl-4 {
+    width: 33.33333333%;
+  }
+  .tiles-grid.size-xl-5 {
+    width: 41.66666667%;
+  }
+  .tiles-grid.size-xl-6 {
+    width: 50%;
+  }
+  .tiles-grid.size-xl-7 {
+    width: 58.33333333%;
+  }
+  .tiles-grid.size-xl-8 {
+    width: 66.66666667%;
+  }
+  .tiles-grid.size-xl-9 {
+    width: 75%;
+  }
+  .tiles-grid.size-xl-10 {
+    width: 83.33333333%;
+  }
+  .tiles-grid.size-xl-11 {
+    width: 91.66666667%;
+  }
+  .tiles-grid.size-xl-12 {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 1452px) {
+  .tiles-grid .col-xxl-1 {
+    grid-column: 1;
+  }
+  .tiles-grid .row-xxl-1 {
+    grid-row: 1;
+  }
+  .tiles-grid .col-xxl-2 {
+    grid-column: 2;
+  }
+  .tiles-grid .row-xxl-2 {
+    grid-row: 2;
+  }
+  .tiles-grid .col-xxl-3 {
+    grid-column: 3;
+  }
+  .tiles-grid .row-xxl-3 {
+    grid-row: 3;
+  }
+  .tiles-grid .col-xxl-4 {
+    grid-column: 4;
+  }
+  .tiles-grid .row-xxl-4 {
+    grid-row: 4;
+  }
+  .tiles-grid .col-xxl-5 {
+    grid-column: 5;
+  }
+  .tiles-grid .row-xxl-5 {
+    grid-row: 5;
+  }
+  .tiles-grid .col-xxl-6 {
+    grid-column: 6;
+  }
+  .tiles-grid .row-xxl-6 {
+    grid-row: 6;
+  }
+  .tiles-grid .col-xxl-7 {
+    grid-column: 7;
+  }
+  .tiles-grid .row-xxl-7 {
+    grid-row: 7;
+  }
+  .tiles-grid .col-xxl-8 {
+    grid-column: 8;
+  }
+  .tiles-grid .row-xxl-8 {
+    grid-row: 8;
+  }
+  .tiles-grid .col-xxl-9 {
+    grid-column: 9;
+  }
+  .tiles-grid .row-xxl-9 {
+    grid-row: 9;
+  }
+  .tiles-grid .col-xxl-10 {
+    grid-column: 10;
+  }
+  .tiles-grid .row-xxl-10 {
+    grid-row: 10;
+  }
+  .tiles-grid .col-xxl-11 {
+    grid-column: 11;
+  }
+  .tiles-grid .row-xxl-11 {
+    grid-row: 11;
+  }
+  .tiles-grid .col-xxl-12 {
+    grid-column: 12;
+  }
+  .tiles-grid .row-xxl-12 {
+    grid-row: 12;
+  }
+  .tiles-grid.size-xxl-1 {
+    width: 8.33333333%;
+  }
+  .tiles-grid.size-xxl-2 {
+    width: 16.66666667%;
+  }
+  .tiles-grid.size-xxl-3 {
+    width: 25%;
+  }
+  .tiles-grid.size-xxl-4 {
+    width: 33.33333333%;
+  }
+  .tiles-grid.size-xxl-5 {
+    width: 41.66666667%;
+  }
+  .tiles-grid.size-xxl-6 {
+    width: 50%;
+  }
+  .tiles-grid.size-xxl-7 {
+    width: 58.33333333%;
+  }
+  .tiles-grid.size-xxl-8 {
+    width: 66.66666667%;
+  }
+  .tiles-grid.size-xxl-9 {
+    width: 75%;
+  }
+  .tiles-grid.size-xxl-10 {
+    width: 83.33333333%;
+  }
+  .tiles-grid.size-xxl-11 {
+    width: 91.66666667%;
+  }
+  .tiles-grid.size-xxl-12 {
+    width: 100%;
+  }
+}
+.tiles-group {
+  width: 100%;
+  float: left;
+  overflow: visible;
+}
+.tiles-group::before {
+  content: attr(data-group-title);
+  display: block;
+  position: absolute;
+  left: 0;
+  top: -36px;
+  height: 1.5em;
+  line-height: 1.5em;
+  z-index: 1;
+  color: inherit;
+}
+[class*=tile-].image-set {
+  background-size: contain;
+  background-position: center;
+}
+[class*=tile-].image-set .img {
+  width: 25%;
+  height: 50%;
+  display: block;
+  float: left;
+  border: 1px solid #1d1d1d;
+  background-size: cover;
+}
+[class*=tile-].image-set .img:nth-child(1) {
+  width: 50%;
+  height: 100%;
+}
+[class*=tile-] .slide {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+}
+[class*=tile-] [class*=slide-] {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: all 0.3s ease-in-out;
+}
+[class*=tile-] .slide-front {
+  top: 0;
+  left: 0;
+}
+[class*=tile-].effect-hover-slide-up .slide-back,
+[class*=tile-].effect-hover-zoom-up .slide-back {
+  top: 100%;
+  left: 0;
+}
+[class*=tile-].effect-hover-slide-up:hover .slide-front,
+[class*=tile-].effect-hover-zoom-up:hover .slide-front {
+  transform: translateY(-100%);
+}
+[class*=tile-].effect-hover-slide-up:hover .slide-back,
+[class*=tile-].effect-hover-zoom-up:hover .slide-back {
+  top: 0;
+}
+[class*=tile-].effect-hover-slide-down .slide-back,
+[class*=tile-].effect-hover-zoom-down .slide-back {
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+}
+[class*=tile-].effect-hover-slide-down:hover .slide-front,
+[class*=tile-].effect-hover-zoom-down:hover .slide-front {
+  top: 100%;
+}
+[class*=tile-].effect-hover-slide-down:hover .slide-back,
+[class*=tile-].effect-hover-zoom-down:hover .slide-back {
+  transform: translateY(0);
+}
+[class*=tile-].effect-hover-slide-left .slide-back,
+[class*=tile-].effect-hover-zoom-left .slide-back {
+  top: 0;
+  left: 100%;
+}
+[class*=tile-].effect-hover-slide-left:hover .slide-front,
+[class*=tile-].effect-hover-zoom-left:hover .slide-front {
+  transform: translateX(-100%);
+}
+[class*=tile-].effect-hover-slide-left:hover .slide-back,
+[class*=tile-].effect-hover-zoom-left:hover .slide-back {
+  left: 0;
+}
+[class*=tile-].effect-hover-slide-right .slide-back,
+[class*=tile-].effect-hover-zoom-right .slide-back {
+  top: 0;
+  left: 0;
+  transform: translateX(-100%);
+}
+[class*=tile-].effect-hover-slide-right:hover .slide-front,
+[class*=tile-].effect-hover-zoom-right:hover .slide-front {
+  left: 100%;
+}
+[class*=tile-].effect-hover-slide-right:hover .slide-back,
+[class*=tile-].effect-hover-zoom-right:hover .slide-back {
+  transform: translateX(0);
+}
+[class*=tile-].effect-hover-zoom-up:hover .slide-front,
+[class*=tile-].effect-hover-zoom-down:hover .slide-front,
+[class*=tile-].effect-hover-zoom-left:hover .slide-front,
+[class*=tile-].effect-hover-zoom-right:hover .slide-front {
+  left: 0;
+  top: 0;
+  transform: scale(2);
+}
+
diff --git a/modules/tile/ext.isekai.tile.js b/modules/tile/ext.isekai.tile.js
new file mode 100644
index 0000000..d59d415
--- /dev/null
+++ b/modules/tile/ext.isekai.tile.js
@@ -0,0 +1 @@
+(()=>{"use strict";function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(t,i){for(var n=0;n<i.length;n++){var a=i[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,(void 0,r=function(t,i){if("object"!==e(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var a=n.call(t,"string");if("object"!==e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(a.key),"symbol"===e(r)?r:String(r)),a)}var r}var i={tileDeferred:0,size:"medium",cover:"",coverPosition:"center",effect:"",effectInterval:3e3,effectDuration:500,target:null,canTransform:!0,onClick:function(){},onTileCreate:function(){}};!function(e,t){var i="ui.tile".split(".");"isekai"in window||(window.isekai={});for(var n=window.isekai,a=0;a<i.length-1;a++){var r=i[a];r in n||(n[r]={}),n=n[r]}n[i[a]]=t}(0,function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var n,a;return n=e,a=[{key:"setup",value:function(e){i=jQuery.extend({},i,e)}},{key:"init",value:function(){}}],null&&t(n.prototype,null),a&&t(n,a),Object.defineProperty(n,"prototype",{writable:!1}),e}()),function(t){function n(e,t){return Math.floor(Math.random()*(t-e+1)+e)}var a={isValue:function(e){return null!=e&&""!==e},isUrl:function(e){return/^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(e)},isTag:function(e){return/^<\/?[\w\s="/.':;#-\/\?]+>/gi.test(e)},isType:function(t,i){if(!a.isValue(t))return!1;if(e(t)===i)return t;if(a.isTag(t)||a.isUrl(t))return!1;if(e(window[t])===i)return window[t];if("string"==typeof t&&-1===t.indexOf("."))return!1;if("string"==typeof t&&-1!==t.indexOf("/"))return!1;if("string"==typeof t&&-1!==t.indexOf(" "))return!1;if("string"==typeof t&&-1!==t.indexOf("("))return!1;if("string"==typeof t&&-1!==t.indexOf("["))return!1;if("number"==typeof t&&"number"!==i.toLowerCase())return!1;var n,r=t.split("."),f=window;for(n=0;n<r.length;n++)f=f[r[n]];return e(f)===i&&f},isFunc:function(e){return a.isType(e,"function")},pageXY:function(e){return{x:e.changedTouches?e.changedTouches[0].pageX:e.pageX,y:e.changedTouches?e.changedTouches[0].pageY:e.pageY}},isRightMouse:function(e){return"which"in e?3===e.which:"button"in e?2===e.button:void 0},func:function(e){return new Function("a",e)},exec:function(e,t,i){var n;if(null==e)return!1;var r=a.isFunc(e);!1===r&&(r=a.func(e));try{n=r.apply(i,t)}catch(e){throw n=null,e}return n}},r={duration:100,func:"linear",switch:function(e,t){e.hide(),t.css({top:0,left:0}).show()},slideUp:function(e,t,i,n){var a=e.parent().outerHeight(!0);void 0===i&&(i=this.duration),void 0===n&&(n=this.func),e.css("z-index",1).animate({draw:{top:-a,opacity:0},dur:i,ease:n}),t.css({top:a,left:0,zIndex:2}).animate({draw:{top:0,opacity:1},dur:i,ease:n})},slideDown:function(e,t,i,n){var a=e.parent().outerHeight(!0);void 0===i&&(i=this.duration),void 0===n&&(n=this.func),e.css("z-index",1).animate({draw:{top:a,opacity:0},dur:i,ease:n}),t.css({left:0,top:-a,zIndex:2}).animate({draw:{top:0,opacity:1},dur:i,ease:n})},slideLeft:function(e,t,i,n){var a=e.parent().outerWidth(!0);void 0===i&&(i=this.duration),void 0===n&&(n=this.func),e.css("z-index",1).animate({draw:{left:-a,opacity:0},dur:i,ease:n}),t.css({left:a,zIndex:2}).animate({draw:{left:0,opacity:1},dur:i,ease:n})},slideRight:function(e,t,i,n){var a=e.parent().outerWidth(!0);void 0===i&&(i=this.duration),void 0===n&&(n=this.func),e.css("z-index",1).animate({draw:{left:a,opacity:0},dur:i,ease:n}),t.css({left:-a,zIndex:2}).animate({draw:{left:0,opacity:1},dur:i,ease:n})},fade:function(e,t,i){void 0===i&&(i=this.duration),e.animate({draw:{opacity:0},dur:i}),t.css({top:0,left:0,opacity:0}).animate({draw:{opacity:1},dur:i})}},f={PALETTES:{ALL:"colorList",METRO:"colorListMetro",STANDARD:"colorListStandard"},colorListMetro:{lime:"#a4c400",green:"#60a917",emerald:"#008a00",blue:"#00AFF0",teal:"#00aba9",cyan:"#1ba1e2",cobalt:"#0050ef",indigo:"#6a00ff",violet:"#aa00ff",pink:"#dc4fad",magenta:"#d80073",crimson:"#a20025",red:"#CE352C",orange:"#fa6800",amber:"#f0a30a",yellow:"#fff000",brown:"#825a2c",olive:"#6d8764",steel:"#647687",mauve:"#76608a",taupe:"#87794e"},colorListStandard:{aliceBlue:"#f0f8ff",antiqueWhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedAlmond:"#ffebcd",blue:"#0000ff",blueViolet:"#8a2be2",brown:"#a52a2a",burlyWood:"#deb887",cadetBlue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerBlue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkBlue:"#00008b",darkCyan:"#008b8b",darkGoldenRod:"#b8860b",darkGray:"#a9a9a9",darkGreen:"#006400",darkKhaki:"#bdb76b",darkMagenta:"#8b008b",darkOliveGreen:"#556b2f",darkOrange:"#ff8c00",darkOrchid:"#9932cc",darkRed:"#8b0000",darkSalmon:"#e9967a",darkSeaGreen:"#8fbc8f",darkSlateBlue:"#483d8b",darkSlateGray:"#2f4f4f",darkTurquoise:"#00ced1",darkViolet:"#9400d3",deepPink:"#ff1493",deepSkyBlue:"#00bfff",dimGray:"#696969",dodgerBlue:"#1e90ff",fireBrick:"#b22222",floralWhite:"#fffaf0",forestGreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#DCDCDC",ghostWhite:"#F8F8FF",gold:"#ffd700",goldenRod:"#daa520",gray:"#808080",green:"#008000",greenYellow:"#adff2f",honeyDew:"#f0fff0",hotPink:"#ff69b4",indianRed:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderBlush:"#fff0f5",lawnGreen:"#7cfc00",lemonChiffon:"#fffacd",lightBlue:"#add8e6",lightCoral:"#f08080",lightCyan:"#e0ffff",lightGoldenRodYellow:"#fafad2",lightGray:"#d3d3d3",lightGreen:"#90ee90",lightPink:"#ffb6c1",lightSalmon:"#ffa07a",lightSeaGreen:"#20b2aa",lightSkyBlue:"#87cefa",lightSlateGray:"#778899",lightSteelBlue:"#b0c4de",lightYellow:"#ffffe0",lime:"#00ff00",limeGreen:"#32dc32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumAquaMarine:"#66cdaa",mediumBlue:"#0000cd",mediumOrchid:"#ba55d3",mediumPurple:"#9370db",mediumSeaGreen:"#3cb371",mediumSlateBlue:"#7b68ee",mediumSpringGreen:"#00fa9a",mediumTurquoise:"#48d1cc",mediumVioletRed:"#c71585",midnightBlue:"#191970",mintCream:"#f5fffa",mistyRose:"#ffe4e1",moccasin:"#ffe4b5",navajoWhite:"#ffdead",navy:"#000080",oldLace:"#fdd5e6",olive:"#808000",oliveDrab:"#6b8e23",orange:"#ffa500",orangeRed:"#ff4500",orchid:"#da70d6",paleGoldenRod:"#eee8aa",paleGreen:"#98fb98",paleTurquoise:"#afeeee",paleVioletRed:"#db7093",papayaWhip:"#ffefd5",peachPuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderBlue:"#b0e0e6",purple:"#800080",rebeccaPurple:"#663399",red:"#ff0000",rosyBrown:"#bc8f8f",royalBlue:"#4169e1",saddleBrown:"#8b4513",salmon:"#fa8072",sandyBrown:"#f4a460",seaGreen:"#2e8b57",seaShell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",slyBlue:"#87ceeb",slateBlue:"#6a5acd",slateGray:"#708090",snow:"#fffafa",springGreen:"#00ff7f",steelBlue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whiteSmoke:"#f5f5f5",yellow:"#ffff00",yellowGreen:"#9acd32"},colorList:{},colors:function(e){var i=[];return e=e||this.PALETTES.ALL,t.each(this[e],(function(){i.push(this)})),i}};function o(e,o){this.init=function(e,n){this.effectInterval=!1,this.images=[],this.slides=[],this.currentSlide=-1,this.options=t.extend({},i,e),this.element=n,this.hasIcon=!1,this.hasBranding=!1,this._fixSizeCallback=this.resize.bind(this),this._create()},this._create=function(){this._createTile(),this._createEvents(),this.element.trigger("tilecreate")},this._createTile=function(){function e(e,t,i){setTimeout((function(){e.fadeOut(500,(function(){e.css("background-image","url("+t+")"),e.fadeIn()}))}),300*i)}var i=this,a=this.element,r=this.options,o=a.find(".slide"),s=a.find(".slide-front, .slide-back");if(a.addClass("tile-"+r.size),a.find(".icon").length>0&&(this.hasIcon=!0),a.find(".branding-bar")&&(this.hasBranding=!0),r.effect.indexOf("hover-")>-1&&(a.addClass("effect-"+r.effect),t.each(s,(function(){var e=t(this);void 0!==e.data("cover")&&i._setCover(e,e.data("cover"),e.data("cover-position"))}))),r.effect.indexOf("animate-")>-1&&o.length>1&&(t.each(o,(function(e){var n=t(this);i.slides.push(this),void 0!==n.data("cover")&&this._setCover(n,n.data("cover"),n.data("cover-position")),e>0&&(["animate-slide-up","animate-slide-down"].indexOf(r.effect)>-1&&n.css("top","100%"),["animate-slide-left","animate-slide-right"].indexOf(r.effect)>-1&&n.css("left","100%"),["animate-fade"].indexOf(r.effect)>-1&&n.css("opacity",0))})),this.currentSlide=0,this._runEffects()),""!==r.cover&&this._setCover(a,r.cover),"image-set"===r.effect){a.addClass("image-set"),t.each(a.children("img"),(function(){var e=document.createElement("img");e.src=this.src,e.srcset=this.srcset,e.alt=this.alt,i.images.push(e),t(this).remove()}));for(var l=this.images.slice(),c=0;c<5;c++){var d=n(0,l.length-1),u=t("<div>").addClass("img -js-img-"+c).css("background-image","url("+l[d].src+")");a.prepend(u),l.length>1&&l.splice(d,1)}var h=[0,1,4,3,2];setInterval((function(){var t,r=i.images.slice(),o=f.colors(f.PALETTES.ALL);t=o[n(0,o.length-1)],a.css("background-color",t);for(var s=0;s<h.length;s++){var l=n(0,r.length-1);e(a.find(".-js-img-"+h[s]),r[l].src,s),r.length>1&&r.splice(l,1)}h=h.reverse()}),5e3)}},this._runEffects=function(){var e=this.options;!1===this.effectInterval&&(this.effectInterval=setInterval((function(){var i,n;i=t(this.slides[this.currentSlide]),this.currentSlide++,this.currentSlide===this.slides.length&&(this.currentSlide=0),n=this.slides[this.currentSlide],"animate-slide-up"===e.effect&&r.slideUp(t(i),t(n),e.effectDuration),"animate-slide-down"===e.effect&&r.slideDown(t(i),t(n),e.effectDuration),"animate-slide-left"===e.effect&&r.slideLeft(t(i),t(n),e.effectDuration),"animate-slide-right"===e.effect&&r.slideRight(t(i),t(n),e.effectDuration),"animate-fade"===e.effect&&r.fade(t(i),t(n),e.effectDuration)}),e.effectInterval))},this._stopEffects=function(){clearInterval(this.effectInterval),this.effectInterval=!1},this.resize=function(){var e=1,t=this.element.parent(".tiles-grid");t.length>0&&t.width(),"wide"==this.options.size&&(e=.5);var i=this.element.width()*e-0;if(this.hasIcon){var n=.33*i,a=this.element.find(".icon");if(a.css("font-size",n+"px"),this.hasBranding){var r=(i+n)/2-(i-this.element.find(".branding-bar").outerHeight())+.1*i;r>0&&a.css("padding-bottom",r+"px")}}},this._setCover=function(e,t,i){a.isValue(i)||(i=this.options.coverPosition),e.css({backgroundImage:"url("+t+")",backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:i})},this._createEvents=function(){var e=this.element,i=this.options;e.on("mousedown touchstart",(function(n){var r,f=t(this),o=e.width(),s=e.height(),l=a.pageXY(n).x-f.offset().left,c=a.pageXY(n).y-f.offset().top;!1===a.isRightMouse(n)&&(r=l<1*o/3&&(c<1*s/2||c>1*s/2)?"left":l>2*o/3&&(c<1*s/2||c>1*s/2)?"right":l>1*o/3&&l<2*o/3&&c>s/2?"bottom":"top",!0===i.canTransform&&f.addClass("transform-"+r),null!==i.target&&setTimeout((function(){document.location.href=i.target}),100),a.exec(i.onClick,[r],e[0]),e.trigger("click",{side:r}))})),e.on("mouseup touchend mouseleave",(function(){t(this).removeClass("transform-left").removeClass("transform-right").removeClass("transform-top").removeClass("transform-bottom")})),t(window).on("resize",this._fixSizeCallback),t(this._fixSizeCallback)},this.destroy=function(){var e=this.element;e.off("mousedown touchstart"),e.off("mouseup touchend mouseleave"),t(window).off("resize",this._fixSizeCallback),this._stopEffects()},this.init(e,o)}function s(){t(".tiles-grid").each((function(){var e=t(this),i=e.width()/4-10;e.css({gridTemplateColumns:"repeat(4, "+i+"px)",gridAutoRows:i+"px"})}))}function l(e){e.forEach((function(e){"attributes"==e.type&&"class"==e.attributeName&&(t('*[data-role="tile"]').tile("resize"),s())}))}t.fn.extend({tile:function(e){for(var i=arguments.length,n=new Array(i>1?i-1:0),a=1;a<i;a++)n[a-1]=arguments[a];var r;return this.each((function(){var i=t(this);if("tile"!==i.attr("data-role"))throw new Error("This element isn't a tile element");var a=i.data("tile");if("init"==e){if(a)throw new Error("Tile already inited.");var f=n[0]||{};f=t.extend({},f,function(e){var i={};return t.each(e[0].attributes,(function(e,t){t.name.startsWith("data-")&&(i[t.name.substr(5)]=t.value)})),i}(i)),a=new o(f,i),i.data("tile",a)}else{var s;if(!a)throw new Error("Tile not inited.");if(!a[e])throw new Error("Method: "+e+" not exists.");r=(s=a[e]).apply.apply(s,[a].concat(n))}})),null==r?this:r}}),t('*[data-role="tile"]').tile("init"),t(window).on("resize",s),t(s),t("body").hasClass("skin-minerva")&&t("#mw-content-text .collapsible-block").each((function(){var e=t(this);e.find('*[data-role="tile"]').length>0&&new MutationObserver(l).observe(e[0],{attributes:!0})}))}(jQuery)})();
\ No newline at end of file
diff --git a/src/tile/ext.isekai.tile.js b/src/tile/ext.isekai.tile.js
new file mode 100644
index 0000000..291fc2a
--- /dev/null
+++ b/src/tile/ext.isekai.tile.js
@@ -0,0 +1,854 @@
+/* global Colors */
+import './tile.less';
+import { registerModule } from '../moduleRegister';
+
+var TileDefaultConfig = {
+    tileDeferred: 0,
+    size: "medium",
+    cover: "",
+    coverPosition: "center",
+    effect: "",
+    effectInterval: 3000,
+    effectDuration: 500,
+    target: null,
+    canTransform: true,
+    onClick: () => {},
+    onTileCreate: () => {},
+};
+
+var METRO_THROWS = true;
+var GRID_GAP = 10;
+
+class IsekaiTile {
+    static setup(options) {
+        TileDefaultConfig = jQuery.extend({}, TileDefaultConfig, options);
+    }
+
+    static init() {
+        
+    }
+}
+
+registerModule('ui.tile', IsekaiTile);
+
+(function($){
+    function rand(min, max) { // min and max included 
+        return Math.floor(Math.random() * (max - min + 1) + min)
+    }
+
+    var Utils = {
+        isValue: function(val){
+            return val !== undefined && val !== null && val !== "";
+        },
+
+        isUrl: function (val){
+            /* eslint-disable-next-line */
+            return /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(val);
+        },
+    
+        isTag: function(val){
+            /* eslint-disable-next-line */
+            return /^<\/?[\w\s="/.':;#-\/\?]+>/gi.test(val);
+        },
+
+        isType: function(o, t){
+            if (!Utils.isValue(o)) {
+                return false;
+            }
+    
+            if (typeof o === t) {
+                return o;
+            }
+    
+            if (Utils.isTag(o) || Utils.isUrl(o)) {
+                return false;
+            }
+    
+            if (typeof window[o] === t) {
+                return window[o];
+            }
+    
+            if (typeof o === 'string' && o.indexOf(".") === -1) {
+                return false;
+            }
+    
+            if (typeof o === 'string' && o.indexOf("/") !== -1) {
+                return false;
+            }
+    
+            if (typeof o === 'string' && o.indexOf(" ") !== -1) {
+                return false;
+            }
+    
+            if (typeof o === 'string' && o.indexOf("(") !== -1) {
+                return false;
+            }
+    
+            if (typeof o === 'string' && o.indexOf("[") !== -1) {
+                return false;
+            }
+    
+            if (typeof o === "number" && t.toLowerCase() !== "number") {
+                return false;
+            }
+    
+            var ns = o.split(".");
+            var i, context = window;
+    
+            for(i = 0; i < ns.length; i++) {
+                context = context[ns[i]];
+            }
+    
+            return typeof context === t ? context : false;
+        },
+
+        isFunc: function(f){
+            return Utils.isType(f, 'function');
+        },
+
+        /**
+         *
+         * @param {TouchEvent|Event|MouseEvent} e
+         * @returns {{x: (*), y: (*)}}
+         */
+        pageXY: function(e){
+            return {
+                x: e.changedTouches ? e.changedTouches[0].pageX : e.pageX,
+                y: e.changedTouches ? e.changedTouches[0].pageY : e.pageY
+            };
+        },
+
+        isRightMouse: function(e){
+            return "which" in e ? e.which === 3 : "button" in e ? e.button === 2 : undefined;
+        },
+
+        func: function(f){
+            /* jshint -W054 */
+            return new Function("a", f);
+        },
+
+        exec: function(f, args, context){
+            var result;
+            if (f === undefined || f === null) {return false;}
+            var func = Utils.isFunc(f);
+    
+            if (func === false) {
+                func = Utils.func(f);
+            }
+    
+            try {
+                result = func.apply(context, args);
+            } catch (err) {
+                result = null;
+                if (METRO_THROWS === true) {
+                    throw err;
+                }
+            }
+            return result;
+        },
+    };
+
+    var FrameAnimation = {
+        duration: 100,
+        func: "linear",
+    
+        switch: function(current, next){
+            current.hide();
+            next.css({top: 0, left: 0}).show();
+        },
+    
+        slideUp: function(current, next, duration, func){
+            var h = current.parent().outerHeight(true);
+            if (duration === undefined) {duration = this.duration;}
+            if (func === undefined) {func = this.func;}
+    
+            current
+                .css("z-index", 1)
+                .animate({
+                    draw: {
+                        top: -h,
+                        opacity: 0
+                    },
+                    dur: duration,
+                    ease: func
+                });
+    
+            next
+                .css({
+                    top: h,
+                    left: 0,
+                    zIndex: 2
+                })
+                .animate({
+                    draw: {
+                        top: 0,
+                        opacity: 1
+                    },
+                    dur: duration,
+                    ease: func
+                });
+        },
+    
+        slideDown: function(current, next, duration, func){
+            var h = current.parent().outerHeight(true);
+            if (duration === undefined) {duration = this.duration;}
+            if (func === undefined) {func = this.func;}
+    
+            current
+                .css("z-index", 1)
+                .animate({
+                    draw: {
+                        top: h,
+                        opacity: 0
+                    },
+                    dur: duration,
+                    ease: func
+                });
+    
+            next
+                .css({
+                    left: 0,
+                    top: -h,
+                    zIndex: 2
+                })
+                .animate({
+                    draw: {
+                        top: 0,
+                        opacity: 1
+                    },
+                    dur: duration,
+                    ease: func
+                });
+        },
+    
+        slideLeft: function(current, next, duration, func){
+            var w = current.parent().outerWidth(true);
+            if (duration === undefined) {duration = this.duration;}
+            if (func === undefined) {func = this.func;}
+            current
+                .css("z-index", 1)
+                .animate({
+                    draw: {
+                        left: -w,
+                        opacity: 0
+                    },
+                    dur: duration,
+                    ease: func
+                });
+    
+            next
+                .css({
+                    left: w,
+                    zIndex: 2
+                })
+                .animate({
+                    draw: {
+                        left: 0,
+                        opacity: 1
+                    },
+                    dur: duration,
+                    ease: func
+                });
+        },
+    
+        slideRight: function(current, next, duration, func){
+            var w = current.parent().outerWidth(true);
+            if (duration === undefined) {duration = this.duration;}
+            if (func === undefined) {func = this.func;}
+    
+            current
+                .css("z-index", 1)
+                .animate({
+                    draw: {
+                        left:  w,
+                        opacity: 0
+                    },
+                    dur: duration,
+                    ease: func
+                });
+    
+            next
+                .css({
+                    left: -w,
+                    zIndex: 2
+                })
+                .animate({
+                    draw: {
+                        left: 0,
+                        opacity: 1
+                    },
+                    dur: duration,
+                    ease: func
+                });
+        },
+    
+        fade: function(current, next, duration){
+            if (duration === undefined) {duration = this.duration;}
+    
+            current
+                .animate({
+                    draw: {
+                        opacity: 0
+                    },
+                    dur: duration
+                });
+    
+            next
+                .css({
+                    top: 0,
+                    left: 0,
+                    opacity: 0
+                })
+                .animate({
+                    draw: {
+                        opacity: 1
+                    },
+                    dur: duration
+                });
+        }
+    };
+
+    var Colors = {
+        PALETTES: {
+            ALL: "colorList",
+            METRO: "colorListMetro",
+            STANDARD: "colorListStandard"
+        },
+
+        colorListMetro: {
+            lime: '#a4c400',
+            green: '#60a917',
+            emerald: '#008a00',
+            blue: '#00AFF0',
+            teal: '#00aba9',
+            cyan: '#1ba1e2',
+            cobalt: '#0050ef',
+            indigo: '#6a00ff',
+            violet: '#aa00ff',
+            pink: '#dc4fad',
+            magenta: '#d80073',
+            crimson: '#a20025',
+            red: '#CE352C',
+            orange: '#fa6800',
+            amber: '#f0a30a',
+            yellow: '#fff000',
+            brown: '#825a2c',
+            olive: '#6d8764',
+            steel: '#647687',
+            mauve: '#76608a',
+            taupe: '#87794e'
+        },
+    
+        colorListStandard: {
+            aliceBlue: "#f0f8ff",
+            antiqueWhite: "#faebd7",
+            aqua: "#00ffff",
+            aquamarine: "#7fffd4",
+            azure: "#f0ffff",
+            beige: "#f5f5dc",
+            bisque: "#ffe4c4",
+            black: "#000000",
+            blanchedAlmond: "#ffebcd",
+            blue: "#0000ff",
+            blueViolet: "#8a2be2",
+            brown: "#a52a2a",
+            burlyWood: "#deb887",
+            cadetBlue: "#5f9ea0",
+            chartreuse: "#7fff00",
+            chocolate: "#d2691e",
+            coral: "#ff7f50",
+            cornflowerBlue: "#6495ed",
+            cornsilk: "#fff8dc",
+            crimson: "#dc143c",
+            cyan: "#00ffff",
+            darkBlue: "#00008b",
+            darkCyan: "#008b8b",
+            darkGoldenRod: "#b8860b",
+            darkGray: "#a9a9a9",
+            darkGreen: "#006400",
+            darkKhaki: "#bdb76b",
+            darkMagenta: "#8b008b",
+            darkOliveGreen: "#556b2f",
+            darkOrange: "#ff8c00",
+            darkOrchid: "#9932cc",
+            darkRed: "#8b0000",
+            darkSalmon: "#e9967a",
+            darkSeaGreen: "#8fbc8f",
+            darkSlateBlue: "#483d8b",
+            darkSlateGray: "#2f4f4f",
+            darkTurquoise: "#00ced1",
+            darkViolet: "#9400d3",
+            deepPink: "#ff1493",
+            deepSkyBlue: "#00bfff",
+            dimGray: "#696969",
+            dodgerBlue: "#1e90ff",
+            fireBrick: "#b22222",
+            floralWhite: "#fffaf0",
+            forestGreen: "#228b22",
+            fuchsia: "#ff00ff",
+            gainsboro: "#DCDCDC",
+            ghostWhite: "#F8F8FF",
+            gold: "#ffd700",
+            goldenRod: "#daa520",
+            gray: "#808080",
+            green: "#008000",
+            greenYellow: "#adff2f",
+            honeyDew: "#f0fff0",
+            hotPink: "#ff69b4",
+            indianRed: "#cd5c5c",
+            indigo: "#4b0082",
+            ivory: "#fffff0",
+            khaki: "#f0e68c",
+            lavender: "#e6e6fa",
+            lavenderBlush: "#fff0f5",
+            lawnGreen: "#7cfc00",
+            lemonChiffon: "#fffacd",
+            lightBlue: "#add8e6",
+            lightCoral: "#f08080",
+            lightCyan: "#e0ffff",
+            lightGoldenRodYellow: "#fafad2",
+            lightGray: "#d3d3d3",
+            lightGreen: "#90ee90",
+            lightPink: "#ffb6c1",
+            lightSalmon: "#ffa07a",
+            lightSeaGreen: "#20b2aa",
+            lightSkyBlue: "#87cefa",
+            lightSlateGray: "#778899",
+            lightSteelBlue: "#b0c4de",
+            lightYellow: "#ffffe0",
+            lime: "#00ff00",
+            limeGreen: "#32dc32",
+            linen: "#faf0e6",
+            magenta: "#ff00ff",
+            maroon: "#800000",
+            mediumAquaMarine: "#66cdaa",
+            mediumBlue: "#0000cd",
+            mediumOrchid: "#ba55d3",
+            mediumPurple: "#9370db",
+            mediumSeaGreen: "#3cb371",
+            mediumSlateBlue: "#7b68ee",
+            mediumSpringGreen: "#00fa9a",
+            mediumTurquoise: "#48d1cc",
+            mediumVioletRed: "#c71585",
+            midnightBlue: "#191970",
+            mintCream: "#f5fffa",
+            mistyRose: "#ffe4e1",
+            moccasin: "#ffe4b5",
+            navajoWhite: "#ffdead",
+            navy: "#000080",
+            oldLace: "#fdd5e6",
+            olive: "#808000",
+            oliveDrab: "#6b8e23",
+            orange: "#ffa500",
+            orangeRed: "#ff4500",
+            orchid: "#da70d6",
+            paleGoldenRod: "#eee8aa",
+            paleGreen: "#98fb98",
+            paleTurquoise: "#afeeee",
+            paleVioletRed: "#db7093",
+            papayaWhip: "#ffefd5",
+            peachPuff: "#ffdab9",
+            peru: "#cd853f",
+            pink: "#ffc0cb",
+            plum: "#dda0dd",
+            powderBlue: "#b0e0e6",
+            purple: "#800080",
+            rebeccaPurple: "#663399",
+            red: "#ff0000",
+            rosyBrown: "#bc8f8f",
+            royalBlue: "#4169e1",
+            saddleBrown: "#8b4513",
+            salmon: "#fa8072",
+            sandyBrown: "#f4a460",
+            seaGreen: "#2e8b57",
+            seaShell: "#fff5ee",
+            sienna: "#a0522d",
+            silver: "#c0c0c0",
+            slyBlue: "#87ceeb",
+            slateBlue: "#6a5acd",
+            slateGray: "#708090",
+            snow: "#fffafa",
+            springGreen: "#00ff7f",
+            steelBlue: "#4682b4",
+            tan: "#d2b48c",
+            teal: "#008080",
+            thistle: "#d8bfd8",
+            tomato: "#ff6347",
+            turquoise: "#40e0d0",
+            violet: "#ee82ee",
+            wheat: "#f5deb3",
+            white: "#ffffff",
+            whiteSmoke: "#f5f5f5",
+            yellow: "#ffff00",
+            yellowGreen: "#9acd32"
+        },
+    
+        colorList: {},
+
+        colors: function(palette){
+            var c = [];
+            palette = palette || this.PALETTES.ALL;
+            $.each(this[palette], function(){
+                c.push(this);
+            });
+            return c;
+        },
+    }
+
+    function Tile(options, element){
+        this.init = function(options, element) {
+            this.effectInterval = false;
+            this.images = [];
+            this.slides = [];
+            this.currentSlide = -1;
+            this.options = $.extend({}, TileDefaultConfig, options);
+            this.element = element;
+            this.hasIcon = false;
+            this.hasBranding = false;
+
+            this._fixSizeCallback = this.resize.bind(this);
+
+            this._create();
+        };
+    
+        this._create = function(){
+            this._createTile();
+            this._createEvents();
+    
+            this.element.trigger("tilecreate");
+        };
+    
+        this._createTile = function(){
+            function switchImage(el, img_src, i){
+                setTimeout(function(){
+                    el.fadeOut(500, function(){
+                        el.css("background-image", "url(" + img_src + ")");
+                        el.fadeIn();
+                    });
+                }, i * 300);
+            }
+    
+            var that = this, element = this.element, o = this.options;
+            var slides = element.find(".slide");
+            var slides2 = element.find(".slide-front, .slide-back");
+    
+            element.addClass("tile-" + o.size);
+
+            if(element.find('.icon').length > 0){
+                this.hasIcon = true;
+            }
+
+            if(element.find('.branding-bar')){
+                this.hasBranding = true;
+            }
+    
+            if (o.effect.indexOf("hover-") > -1) {
+                element.addClass("effect-" + o.effect);
+                $.each(slides2, function(){
+                    var slide = $(this);
+    
+                    if (slide.data("cover") !== undefined) {
+                        that._setCover(slide, slide.data("cover"), slide.data("cover-position"));
+                    }
+                })
+            }
+    
+            if (o.effect.indexOf("animate-") > -1 && slides.length > 1) {
+                $.each(slides, function(i){
+                    var slide = $(this);
+    
+                    that.slides.push(this);
+    
+                    if (slide.data("cover") !== undefined) {
+                        this._setCover(slide, slide.data("cover"), slide.data("cover-position"));
+                    }
+    
+                    if (i > 0) {
+                        if (["animate-slide-up", "animate-slide-down"].indexOf(o.effect) > -1) slide.css("top", "100%");
+                        if (["animate-slide-left", "animate-slide-right"].indexOf(o.effect) > -1) slide.css("left", "100%");
+                        if (["animate-fade"].indexOf(o.effect) > -1) slide.css("opacity", 0);
+                    }
+                });
+    
+                this.currentSlide = 0;
+    
+                this._runEffects();
+            }
+    
+            if (o.cover !== "") {
+                this._setCover(element, o.cover);
+            }
+    
+            if (o.effect === "image-set") {
+                element.addClass("image-set");
+    
+                $.each(element.children("img"), function(){
+                    var imgElem = document.createElement('img');
+                    imgElem.src = this.src;
+                    imgElem.srcset = this.srcset;
+                    imgElem.alt = this.alt;
+                    that.images.push(imgElem);
+                    $(this).remove();
+                });
+    
+                var temp = this.images.slice();
+    
+                for(var i = 0; i < 5; i++) {
+                    var rnd_index = rand(0, temp.length - 1);
+                    var div = $("<div>").addClass("img -js-img-"+i).css("background-image", "url("+temp[rnd_index].src+")");
+                    element.prepend(div);
+                    if (temp.length > 1) {
+                        temp.splice(rnd_index, 1);
+                    }
+                }
+    
+                var a = [0, 1, 4, 3, 2];
+    
+                setInterval(function(){
+                    var temp = that.images.slice();
+                    var colors = Colors.colors(Colors.PALETTES.ALL), bg;
+                    bg = colors[rand(0, colors.length - 1)];
+    
+                    element.css("background-color", bg);
+    
+                    for(var i = 0; i < a.length; i++) {
+                        var rnd_index = rand(0, temp.length - 1);
+                        var div = element.find(".-js-img-"+a[i]);
+                        switchImage(div, temp[rnd_index].src, i);
+                        if (temp.length > 1) {
+                            temp.splice(rnd_index, 1);
+                        }
+                    }
+    
+                    a = a.reverse();
+                }, 5000);
+            }
+        };
+    
+        this._runEffects = function(){
+            var o = this.options;
+    
+            if (this.effectInterval === false) this.effectInterval = setInterval(function(){
+                var current, next;
+    
+                current = $(this.slides[this.currentSlide]);
+    
+                this.currentSlide++;
+                if (this.currentSlide === this.slides.length) {
+                    this.currentSlide = 0;
+                }
+    
+                next = this.slides[this.currentSlide];
+    
+                if (o.effect === "animate-slide-up") FrameAnimation.slideUp($(current), $(next), o.effectDuration);
+                if (o.effect === "animate-slide-down") FrameAnimation.slideDown($(current), $(next), o.effectDuration);
+                if (o.effect === "animate-slide-left") FrameAnimation.slideLeft($(current), $(next), o.effectDuration);
+                if (o.effect === "animate-slide-right") FrameAnimation.slideRight($(current), $(next), o.effectDuration);
+                if (o.effect === "animate-fade") FrameAnimation.fade($(current), $(next), o.effectDuration);
+    
+            }, o.effectInterval);
+        };
+    
+        this._stopEffects = function(){
+            clearInterval(this.effectInterval);
+            this.effectInterval = false;
+        };
+
+        this.resize = function(){
+            var ratio = 1;
+            var padding = 0;
+            var grid = this.element.parent('.tiles-grid');
+            var gridWidth = 0;
+            if(grid.length > 0){
+                gridWidth = grid.width();
+            }
+
+            if(this.options.size == 'wide'){
+                ratio = 0.5;
+            }
+
+            //修正长宽比
+            var height = this.element.width() * ratio - padding;
+            //this.element.height(height);
+
+            if(this.hasIcon){
+                var fontSize = height * 0.33;
+                var iconDom = this.element.find('.icon');
+                iconDom.css('font-size', fontSize + 'px');
+
+                if(this.hasBranding){ //计算与标签的重叠
+                    var iconBottom = (height + fontSize) / 2;
+
+                    var brandingTop = height - this.element.find('.branding-bar').outerHeight();
+                    var overlap = iconBottom - brandingTop + (height * 0.1);
+                    if(overlap > 0){
+                        iconDom.css('padding-bottom', overlap + 'px');
+                    }
+                }
+            }
+        }
+    
+        this._setCover = function(to, src, pos){
+            if (!Utils.isValue(pos)) {
+                pos = this.options.coverPosition;
+            }
+            to.css({
+                backgroundImage: "url("+src+")",
+                backgroundSize: "cover",
+                backgroundRepeat: "no-repeat",
+                backgroundPosition: pos
+            });
+        };
+    
+        this._createEvents = function(){
+            var element = this.element, o = this.options;
+    
+            element.on('mousedown touchstart', function(e){
+                var tile = $(this);
+                var dim = {w: element.width(), h: element.height()};
+                var X = Utils.pageXY(e).x - tile.offset().left,
+                    Y = Utils.pageXY(e).y - tile.offset().top;
+                var side;
+    
+                if (Utils.isRightMouse(e) === false) {
+    
+                    if (X < dim.w * 1 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) {
+                        side = 'left';
+                    } else if (X > dim.w * 2 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) {
+                        side = 'right';
+                    } else if (X > dim.w * 1 / 3 && X < dim.w * 2 / 3 && Y > dim.h / 2) {
+                        side = 'bottom';
+                    } else {
+                        side = "top";
+                    }
+    
+                    if (o.canTransform === true) tile.addClass("transform-" + side);
+    
+                    if (o.target !== null) {
+                        setTimeout(function(){
+                            document.location.href = o.target;
+                        }, 100);
+                    }
+    
+                    Utils.exec(o.onClick, [side], element[0]);
+                    element.trigger("click", {
+                        side: side
+                    });
+                }
+            });
+    
+            element.on('mouseup touchend mouseleave', function(){
+                $(this)
+                    .removeClass("transform-left")
+                    .removeClass("transform-right")
+                    .removeClass("transform-top")
+                    .removeClass("transform-bottom");
+            });
+
+            $(window).on('resize', this._fixSizeCallback);
+            $(this._fixSizeCallback);
+        };
+    
+        this.destroy = function(){
+            var element = this.element;
+    
+            element.off('mousedown touchstart');
+    
+            element.off('mouseup touchend mouseleave');
+
+            $(window).off('resize', this._fixSizeCallback);
+
+            this._stopEffects();
+        };
+
+        this.init(options, element);
+    };
+
+    function getElementOptions(element){
+        var options = {};
+        $.each(element[0].attributes, function (index, attribute){
+            if(attribute.name.startsWith('data-')){
+                options[attribute.name.substr(5)] = attribute.value;
+            }
+        });
+
+        return options;
+    }
+
+    $.fn.extend({
+        tile: function(action, ...args){
+            var result;
+            this.each(function(){
+                var element = $(this);
+                if(element.attr('data-role') !== 'tile'){
+                    throw new Error('This element isn\'t a tile element');
+                }
+
+                var tileObj = element.data('tile');
+                if(action == 'init'){
+                    if(tileObj){
+                        throw new Error('Tile already inited.');
+                    }
+
+                    var options = args[0] || {};
+                    options = $.extend({}, options, getElementOptions(element));
+                    tileObj = new Tile(options, element);
+                    element.data('tile', tileObj);
+                } else {
+                    if(!tileObj){
+                        throw new Error('Tile not inited.');
+                    }
+
+                    if(!tileObj[action]){
+                        throw new Error('Method: ' + action + ' not exists.');
+                    }
+
+                    result = tileObj[action].apply(tileObj, ...args);
+                }
+            });
+
+            if(result == undefined){
+                return this;
+            } else {
+                return result;
+            }
+        }
+    });
+
+    function resizeGrid(){
+        $('.tiles-grid').each(function(){
+            var dom = $(this);
+            var width = dom.width();
+            var gridSize = width / 4 - GRID_GAP;
+            dom.css({
+                gridTemplateColumns: 'repeat(4, ' + gridSize + 'px)',
+                gridAutoRows: gridSize + 'px',
+            });
+        });
+    }
+
+    $('*[data-role="tile"]').tile('init');
+    $(window).on('resize', resizeGrid);
+    $(resizeGrid);
+
+    function onCollapseDivChange(mutationsList){
+        mutationsList.forEach((item) => {
+            if(item.type == 'attributes' && item.attributeName == 'class'){
+                $('*[data-role="tile"]').tile('resize');
+                resizeGrid();
+            }
+        });
+    }
+
+    if($('body').hasClass('skin-minerva')){
+        $('#mw-content-text .collapsible-block').each(function(){
+            var dom = $(this);
+            if(dom.find('*[data-role="tile"]').length > 0){ //存在tile，监听这个dom
+                var observer = new MutationObserver(onCollapseDivChange);
+                observer.observe(dom[0], {
+                    attributes: true,
+                });
+            }
+        });
+    }
+})(jQuery);
\ No newline at end of file