fix incompatible for PHP 8.2

extension.json

@@ -126,10 +126,10 @@
         },
         "ext.isekai.tile": {
             "scripts": [
-                "tile/tile.js"
+                "tile/ext.isekai.tile.js"
             ],
             "styles": [
-                "tile/tile.css",
+                "tile/ext.isekai.tile.css",
                 "tile/style.less"
             ],
             "targets": [
@@ -172,7 +172,8 @@
 				"tilegroup": "text/mediawiki",
                 "exfont": "text/mediawiki",
 				"details": "text/mediawiki",
-				"summary": "text/mediawiki"
+				"summary": "text/mediawiki",
+                "veval": "text/mediawiki"
 			}
 		}
     },

includes/CreatePageWidget.php

@@ -2,14 +2,14 @@
 namespace Isekai\Widgets;
 
 class CreatePageWidget {
-    public static function getHtml(){
+    public static function getHtml() {
         ob_start();
         include(dirname(__DIR__) . '/modules/createPage/ext.isekai.createPage.tpl');
         $template = ob_get_clean();
         return [$template, "markerType" => 'nowiki'];
     }
     
-    public static function create($text, $params, \Parser $parser, \PPFrame $frame){
+    public static function create($text, $params, \Parser $parser, \PPFrame $frame) {
         $parser->getOutput()->addModules(['ext.isekai.createPage']);
 
         return self::getHtml();

includes/DiscoverWidget.php

@@ -2,14 +2,14 @@
 namespace Isekai\Widgets;
 
 class DiscoverWidget {
-    public static function getHtml(){
+    public static function getHtml() {
         ob_start();
         include(dirname(__DIR__) . '/modules/discover/ext.isekai.discover.tpl');
         $template = ob_get_clean();
         return [$template, "markerType" => 'nowiki'];
     }
     
-    public static function create($text, $params, \Parser $parser, \PPFrame $frame){
+    public static function create($text, $params, \Parser $parser, \PPFrame $frame) {
         $parser->getOutput()->addModules(['ext.isekai.discover']);
         
         return self::getHtml();

includes/ExtraFontWidget.php

@@ -1,10 +1,11 @@
 <?php
+
 namespace Isekai\Widgets;
 
 use Html;
 
 class ExtraFontWidget {
-    public static function create($text, $params, \Parser $parser, \PPFrame $frame){
+    public static function create($text, $params, \Parser $parser, \PPFrame $frame) {
         $existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
 
         $content = $text = $parser->recursiveTagParse($text, $frame);

includes/FeedListWidget.php

@@ -2,14 +2,14 @@
 namespace Isekai\Widgets;
 
 class FeedListWidget {
-    public static function getHtml(){
+    public static function getHtml() {
         ob_start();
         include(dirname(__DIR__) . '/modules/feedList/ext.isekai.feedList.tpl');
         $template = ob_get_clean();
         return [$template, "markerType" => 'nowiki'];
     }
     
-    public static function create($text, $params, \Parser $parser, \PPFrame $frame){
+    public static function create($text, $params, \Parser $parser, \PPFrame $frame) {
         $parser->getOutput()->addModules(['ext.isekai.feedList']);
         
         return self::getHtml();

includes/Parsoid/VEvalTagHandler.php

@@ -0,0 +1,53 @@
+<?php
+namespace Isekai\Widgets\Parsoid;
+
+use Wikimedia\Parsoid\DOM\DocumentFragment;
+use Wikimedia\Parsoid\Ext\ExtensionTagHandler;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+
+class VEvalTagHandler extends ExtensionTagHandler {
+    public function toArgs(array $extArgs): array {
+        $ret = [];
+        /** @var KV $extArg */
+        foreach ($extArgs as $extArg) {
+            $ret[$extArg->k] = $extArg->v;
+        }
+        return $ret;
+    }
+
+    public function sourceToDom(ParsoidExtensionAPI $extApi, string $src, array $extArgs): DocumentFragment {
+        $src = preg_replace('/^([ ]*)([#*]+)/', '${1}<nowiki>${2}</nowiki>', $src);
+        $args = $this->toArgs($extArgs);
+
+        $type = 'block';
+        if (isset($args['inline'])) {
+            $type = 'inline';
+        }
+
+        $wrapperTag = '';
+        $contextType = '';
+        switch ($type) {
+            case 'inline':
+                $wrapperTag = 'span';
+                $contextType = 'inline';
+                break;
+            case 'block':
+                $wrapperTag = 'div';
+                $contextType = 'block';
+                break;
+        }
+        
+        return $extApi->extTagToDOM(
+            $extArgs,
+            '',
+            $src,
+            [
+                'wrapperTag' => $wrapperTag,
+                'parseOpts' => [
+                    'extTag' => 'veval',
+                    'context' => $contextType
+                ],
+            ],
+        );;
+    }
+}

includes/PreviewCardWidget.php

@@ -2,7 +2,7 @@
 namespace Isekai\Widgets;
 
 class PreviewCardWidget {
-    public static function getHtml($variables){
+    public static function getHtml($variables) {
         extract($variables);
         ob_start();
         include(dirname(__DIR__) . '/modules/previewCard/ext.isekai.previewCard.tpl');

includes/TileGroupWidget.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace Isekai\Widgets;
 
 use Html;
@@ -11,11 +12,11 @@ class TileGroupWidget {
     private $classes = [];
     private $styles = [];
 
-    public function __construct($args){
+    public function __construct($args) {
         $this->parseArgs($args);
     }
 
-    public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame){
+    public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame) {
         $content = $parser->recursiveTagParse($text, $frame);
 
         $args['content'] = $content;
@@ -24,53 +25,53 @@ class TileGroupWidget {
         return [$tileGroup->getHtml(), "markerType" => 'nowiki'];
     }
 
-    private function parseArgs($args){
+    private function parseArgs($args) {
         $allowedArgs = ['content', 'size', 'title', 'class', 'style'];
 
-        if(isset($args['content'])){
+        if (isset($args['content'])) {
             $this->content = $args['content'];
         }
 
-        if(isset($args['size'])){
+        if (isset($args['size'])) {
             $this->size = explode(' ', str_replace('size-', '', $args['size']));
         }
 
-        if(isset($args['title'])){
+        if (isset($args['title'])) {
             $this->title = $args['title'];
         }
 
-        if(isset($args['class'])){
+        if (isset($args['class'])) {
             $this->classes = explode(' ', $args['class']);
         }
 
-        if(isset($args['style'])){
+        if (isset($args['style'])) {
             $this->classes = explode(' ', $args['style']);
         }
 
-        foreach($args as $name => $arg){
-            if(!in_array($name, $allowedArgs) && substr($name, 0, 2) !== 'on'){
+        foreach ($args as $name => $arg) {
+            if (!in_array($name, $allowedArgs) && substr($name, 0, 2) !== 'on') {
                 $this->attributes[$name] = $arg;
             }
         }
     }
 
-    private function getSizeArgs(array &$element){
-        if(!empty($this->size)){
+    private function getSizeArgs(array &$element) {
+        if (!empty($this->size)) {
             $sizeAttr = [];
-            foreach($this->size as $size){
+            foreach ($this->size as $size) {
                 $sizeAttr[] = 'size-' . $size;
             }
             $element['class'] = array_merge($element['class'], $sizeAttr);
         }
     }
 
-    private function getTitleArgs(array &$element){
-        if($this->title){
+    private function getTitleArgs(array &$element) {
+        if ($this->title) {
             $element['data-group-title'] = $this->title;
         }
     }
 
-    public function getHtml(){
+    public function getHtml() {
         $element = array_merge($this->attributes, [
             'class' => array_merge($this->classes, ['tiles-grid', 'tiles-group']),
             'style' => $this->styles,
@@ -79,12 +80,12 @@ class TileGroupWidget {
         $this->getSizeArgs($element);
         $this->getTitleArgs($element);
 
-        if(!empty($element['class'])){
+        if (!empty($element['class'])) {
             $element['class'] = implode(' ', $element['class']);
         } else {
             unset($element['class']);
         }
-        if(!empty($element['style'])){
+        if (!empty($element['style'])) {
             $element['style'] = implode('; ', $element['style']) . ';';
         } else {
             unset($element['style']);

includes/TileWidget.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace Isekai\Widgets;
 
 use Html;
@@ -9,6 +10,7 @@ class TileWidget {
     private $size = 'medium';
     private $icon = false;
     private $title = '';
+    private $content = '';
     private $href = '';
     private $badge = false;
     private $color = false;
@@ -18,12 +20,12 @@ class TileWidget {
 
     private $attributes = [];
 
-    public function __construct($args, $content){
+    public function __construct($args, $content) {
         $this->content = $content;
         $this->parseArgs($args);
     }
 
-    public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame){
+    public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame) {
         $parser->getOutput()->addModules(['ext.isekai.tile']);
 
         $content = '';
@@ -40,26 +42,26 @@ class TileWidget {
         return [$tile->toHtml(), 'markerType' => 'nowiki'];
     }
 
-    private function parseArgs($args){
+    private function parseArgs($args) {
         $allowedArgs = ['size', 'icon', 'title', 'cover', 'badge', 'color', 'href', 'grid'];
 
-        foreach($args as $name => $arg){
-            if(in_array($name, $allowedArgs)){
+        foreach ($args as $name => $arg) {
+            if (in_array($name, $allowedArgs)) {
                 $this->$name = $arg;
-            } elseif(substr($name, 0, 2) !== 'on'){
+            } elseif (substr($name, 0, 2) !== 'on') {
                 $this->attributes[$name] = $arg;
             }
         }
     }
 
-    private function getSizeArgs(array &$element, array &$content){
+    private function getSizeArgs(array &$element, array &$content) {
         $element['data-size'] = $this->size;
         $element['class'][] = 'tile-' . $this->size;
     }
 
-    private function getColorArgs(array &$element, array &$content){
-        if($this->color){
-            if(substr($this->color, 0, 1) == '#' || substr($this->color, 0, 3) == 'rgb'){
+    private function getColorArgs(array &$element, array &$content) {
+        if ($this->color) {
+            if (substr($this->color, 0, 1) == '#' || substr($this->color, 0, 3) == 'rgb') {
                 $element['style'][] = 'background-color: ' . $this->color;
             } else {
                 $color = str_replace($this->color, 'bg-', '');
@@ -68,8 +70,8 @@ class TileWidget {
         }
     }
 
-    private function getTitleArgs(array &$element, array &$content){
-        if(!empty($this->title)){
+    private function getTitleArgs(array &$element, array &$content) {
+        if (!empty($this->title)) {
             $content[] = Html::element('span', [
                 'class' => ['branding-bar'],
             ], $this->title);
@@ -77,12 +79,12 @@ class TileWidget {
         }
     }
 
-    private function getCoverArgs(array &$element, array &$content){
+    private function getCoverArgs(array &$element, array &$content) {
         $element['data-cover'] = $this->cover;
     }
 
-    private function getHrefArgs(array &$element, array &$content){
-        if(substr($this->href, 0, 2) == '[[' && substr($this->href, -2, 2) == ']]'){ //内部链接
+    private function getHrefArgs(array &$element, array &$content) {
+        if (substr($this->href, 0, 2) == '[[' && substr($this->href, -2, 2) == ']]') { //内部链接
             $titleText = substr($this->href, 2, strlen($this->href) - 4);
             $title = Title::newFromText($titleText);
             $href = $title->getLocalURL();
@@ -92,10 +94,10 @@ class TileWidget {
         $element['href'] = $href;
     }
 
-    private function getIconArgs(array &$element, array &$content){
-        if($this->icon){
-            if(is_string($this->icon)){
-                if(preg_match('/\.[a-zA-Z0-9]{3,4}$/', $this->icon)){
+    private function getIconArgs(array &$element, array &$content) {
+        if ($this->icon) {
+            if (is_string($this->icon)) {
+                if (preg_match('/\.[a-zA-Z0-9]{3,4}$/', $this->icon)) {
                     //图片图标
                     $iconSrc = $this->icon;
                     $type = 'image';
@@ -108,11 +110,11 @@ class TileWidget {
                 $iconSrc = $this->icon;
             }
 
-            if($type == 'class'){
+            if ($type == 'class') {
                 $content[] = Html::element('span', [
                     'class' => array_merge($iconSrc, ['icon']),
                 ]);
-            } elseif($type == 'image'){
+            } elseif ($type == 'image') {
                 $content[] = Html::element('img', [
                     'src' => $iconSrc,
                     'class' => ['icon'],
@@ -121,15 +123,15 @@ class TileWidget {
         }
     }
 
-    private function getBadgeArgs(array &$element, array &$content){
-        if($this->badge){
+    private function getBadgeArgs(array &$element, array &$content) {
+        if ($this->badge) {
             $content[] = Html::element('span', [
                 'class' => ['badge-bottom'],
             ], strval($this->badge));
         }
     }
 
-    private function getImagesArgs(array &$element, array &$content){
+    private function getImagesArgs(array &$element, array &$content) {
         $service = MediaWikiServices::getInstance();
         $this->images = [];
         // 提取wikitext图片
@@ -151,9 +153,9 @@ class TileWidget {
             $this->images = array_merge($this->images, $matches['src']);
         }
 
-        if(!empty($this->images)){
+        if (!empty($this->images)) {
             $element['data-effect'] = 'image-set';
-            foreach($this->images as $image){
+            foreach ($this->images as $image) {
                 $content[] = Html::element('img', [
                     'src' => $image,
                     'style' => 'display: none'
@@ -162,28 +164,28 @@ class TileWidget {
         }
     }
 
-    private function getGridArgs(array &$element, array &$content){
-        if($this->grid){
+    private function getGridArgs(array &$element, array &$content) {
+        if ($this->grid) {
             $grid = explode(' ', $this->grid);
             $element['class'][] = 'col-' . $grid[0];
-            if(count($grid) > 1){
+            if (count($grid) > 1) {
                 $element['class'][] = 'row-' . $grid[1];
             }
         }
     }
 
-    public function toHtml(){
+    public function toHtml() {
         $element = array_merge($this->attributes, [
             'data-role' => 'tile',
         ]);
         $content = [];
 
-        if(isset($element['class'])){
+        if (isset($element['class'])) {
             $element['class'] = explode(' ', $element['class']);
         } else {
             $element['class'] = [];
         }
-        if(isset($element['style'])){
+        if (isset($element['style'])) {
             $element['style'] = explode(' ', $element['style']);
         } else {
             $element['style'] = [];
@@ -201,12 +203,12 @@ class TileWidget {
 
         $content = implode('', $content);
 
-        if(!empty($element['class'])){
+        if (!empty($element['class'])) {
             $element['class'] = implode(' ', $element['class']);
         } else {
             unset($element['class']);
         }
-        if(!empty($element['style'])){
+        if (!empty($element['style'])) {
             $element['style'] = implode('; ', $element['style']) . ';';
         } else {
             unset($element['style']);

includes/VEvalWidget.php

@@ -0,0 +1,9 @@
+<?php
+namespace Isekai\Widgets;
+
+class VEvalWidget {
+    public static function create($text, $params, \Parser $parser, \PPFrame $frame) {
+        $content = $text = $parser->recursiveTagParse($text, $frame);
+        return [$content, "markerType" => 'nowiki'];
+    }
+}

includes/Widgets.php

@@ -10,7 +10,7 @@ class Widgets {
      * @return bool
      * @throws \MWException
      */
-    public static function onParserSetup(&$parser){
+    public static function onParserSetup(&$parser) {
         $parser->extIsekaiWidgetsCache = new MapCacheLRU( 100 ); // 100 is arbitrary
 
         $parser->setHook('createpage', [CreatePageWidget::class, 'create']);
@@ -30,6 +30,8 @@ class Widgets {
 
         $parser->setHook('information', [InformationWidget::class, 'create']);
 
+        $parser->setHook('veval', [VEvalWidget::class, 'create']);
+
         return true;
     }
 

modules/createPage/ext.isekai.createPage.js

@@ -1 +1 @@
-(()=>{var e={153:e=>{e.exports=function(e,t){var a=e.split(".");"isekai"in window||(window.isekai={});for(var i=window.isekai,r=0;r<a.length-1;r++){var s=a[r];s in i||(i[s]={}),i=i[s]}i[a[r]]=t}}},t={};function a(i){var r=t[i];if(void 0!==r)return r.exports;var s=t[i]={exports:{}};return e[i](s,s.exports,a),s.exports}(()=>{function e(e,t){for(var a=0;a<t.length;a++){var i=t[a];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}a(153)("ui.CreatePageWidget",function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.baseDom=e,this.pageUrl=null,this.api=new mw.Api,this.hasError=!1,this.initDom()}var a,i;return a=t,(i=[{key:"initDom",value:function(){this.pageNameInput=new OO.ui.TextInputWidget({placeholder:mw.message("isekai-createpage-page-title").parse()}),this.pageNameInput.on("enter",this.createPage.bind(this)),this.pageNameInput.on("change",this.onPageNameChange.bind(this)),this.createButton=new OO.ui.ButtonWidget({label:mw.message("isekai-createpage-create-page-button").parse(),flags:["primary","progressive"]}),this.createButton.on("click",this.createPage.bind(this)),this.formGroup=new OO.ui.ActionFieldLayout(this.pageNameInput,this.createButton,{align:"top"}),this.baseDom.find(".card-body .card-content").append(this.formGroup.$element)}},{key:"createPage",value:function(){var e=this,t=this.pageNameInput.getValue();this.hasError&&this.clearError(),t.trim().length>0?(this.createButton.setDisabled(!0),this.pageExists(t).then((function(a){if(a)e.createButton.setDisabled(!1),e.setError(mw.message("isekai-createpage-page-exists").parse());else{var i=mw.util.getUrl(t,{veaction:"edit"});e.formGroup.setSuccess([mw.message("isekai-createpage-redirecting").parse()]),location.href=i}}))):this.setError(mw.message("isekai-createpage-title-empty").parse())}},{key:"onPageNameChange",value:function(){this.hasError&&this.clearError();var e=this.pageNameInput.getValue();if(-1!==e.indexOf("：")||-1!==e.indexOf("`")){var t=this.pageNameInput.getRange();e=e.replace(/：/g,":").replace(/`/g,"·"),this.pageNameInput.setValue(e),this.pageNameInput.selectRange(t.from,t.to)}}},{key:"setError",value:function(e){this.formGroup.setErrors([e]),this.hasError=!0}},{key:"clearError",value:function(){this.formGroup.setErrors([]),this.hasError=!1}},{key:"pageExists",value:function(e){var t=this;return new Promise((function(a,i){t.api.get({action:"query",titles:e}).done((function(e){e.query&&e.query.pages?e.query.pages[-1]?a(!1):a(!0):a(!1)})).fail(i)}))}},{key:"setTitle",value:function(e){this.title.text(e)}}])&&e(a.prototype,i),t}())})()})();
+(()=>{"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 r=0;r<i.length;r++){var a=i[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,(void 0,n=function(t,i){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var a=r.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(n)?n:String(n)),a)}var n}!function(e,t){var i="ui.CreatePageWidget".split(".");"isekai"in window||(window.isekai={});for(var r=window.isekai,a=0;a<i.length-1;a++){var n=i[a];n in r||(r[n]={}),r=r[n]}r[i[a]]=t}(0,function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.baseDom=t,this.pageUrl=null,this.api=new mw.Api,this.hasError=!1,this.initDom()}var i,r;return i=e,(r=[{key:"initDom",value:function(){this.pageNameInput=new OO.ui.TextInputWidget({placeholder:mw.message("isekai-createpage-page-title").parse()}),this.pageNameInput.on("enter",this.createPage.bind(this)),this.pageNameInput.on("change",this.onPageNameChange.bind(this)),this.createButton=new OO.ui.ButtonWidget({label:mw.message("isekai-createpage-create-page-button").parse(),flags:["primary","progressive"]}),this.createButton.on("click",this.createPage.bind(this)),this.formGroup=new OO.ui.ActionFieldLayout(this.pageNameInput,this.createButton,{align:"top"}),this.baseDom.find(".card-body .card-content").append(this.formGroup.$element)}},{key:"createPage",value:function(){var e=this,t=this.pageNameInput.getValue();this.hasError&&this.clearError(),t.trim().length>0?(this.createButton.setDisabled(!0),this.pageExists(t).then((function(i){if(i)e.createButton.setDisabled(!1),e.setError(mw.message("isekai-createpage-page-exists").parse());else{var r=mw.util.getUrl(t,{veaction:"edit"});e.formGroup.setSuccess([mw.message("isekai-createpage-redirecting").parse()]),location.href=r}}))):this.setError(mw.message("isekai-createpage-title-empty").parse())}},{key:"onPageNameChange",value:function(){this.hasError&&this.clearError();var e=this.pageNameInput.getValue();if(-1!==e.indexOf("：")||-1!==e.indexOf("`")){var t=this.pageNameInput.getRange();e=e.replace(/：/g,":").replace(/`/g,"·"),this.pageNameInput.setValue(e),this.pageNameInput.selectRange(t.from,t.to)}}},{key:"setError",value:function(e){this.formGroup.setErrors([e]),this.hasError=!0}},{key:"clearError",value:function(){this.formGroup.setErrors([]),this.hasError=!1}},{key:"pageExists",value:function(e){var t=this;return new Promise((function(i,r){t.api.get({action:"query",titles:e}).done((function(e){e.query&&e.query.pages?e.query.pages[-1]?i(!1):i(!0):i(!1)})).fail(r)}))}},{key:"setTitle",value:function(e){this.title.text(e)}}])&&t(i.prototype,r),Object.defineProperty(i,"prototype",{writable:!1}),e}())})();

modules/discover/ext.isekai.discover.js

@@ -1 +1 @@
-(()=>{var e={153:e=>{e.exports=function(e,t){var n=e.split(".");"isekai"in window||(window.isekai={});for(var i=window.isekai,r=0;r<n.length-1;r++){var o=n[r];o in i||(i[o]={}),i=i[o]}i[n[r]]=t}}},t={};function n(i){var r=t[i];if(void 0!==r)return r.exports;var o=t[i]={exports:{}};return e[i](o,o.exports,n),o.exports}(()=>{function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}n(153)("ui.DiscoverWidget",function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.baseDom=e,this.pageUrl=null,this.api=new mw.Api,this.initDom(),this.refreshPage()}var n,i;return n=t,(i=[{key:"initDom",value:function(){this.reloadButton=new OO.ui.ButtonWidget({icon:"reload",label:mw.message("isekai-discover-change-btn").parse()}),this.reloadButton.on("click",this.refreshPage.bind(this)),this.readMoreButton=new OO.ui.ButtonWidget({icon:"ellipsis",label:mw.message("isekai-discover-readmore-btn").parse(),flags:["primary","progressive"]}),this.readMoreButton.on("click",this.showMore.bind(this)),this.loadingBar=new OO.ui.ProgressBarWidget({progress:!1}),this.baseDom.find(".card-body .loading .spinner").append(this.loadingBar.$element),this.buttonGroup=new OO.ui.ButtonGroupWidget({items:[this.reloadButton,this.readMoreButton]}),this.baseDom.find(".card-header .card-header-buttons").append(this.buttonGroup.$element),this.loading=this.baseDom.find(".card-body .loading"),this.title=this.baseDom.find(".card-body .card-title"),this.contentContainer=this.baseDom.find(".card-body .card-content")}},{key:"showMore",value:function(){this.pageUrl&&window.open(this.pageUrl)}},{key:"refreshPage",value:function(){var e=this;this.pageUrl=null,this.clearContent(),this.showLoading(),this.getRandomPage().then((function(t){e.loadPage(t)}))}},{key:"setTitle",value:function(e){this.title.text(e)}},{key:"showLoading",value:function(){this.loading.show(),this.contentContainer.hide()}},{key:"hideLoading",value:function(){this.loading.hide(),this.contentContainer.show()}},{key:"clearContent",value:function(){this.contentContainer.children().remove()}},{key:"setContent",value:function(e){this.hideLoading(),this.clearContent(),this.contentContainer.append(e)}},{key:"showError",value:function(e){var t=new OO.ui.MessageWidget({type:"error",label:e});this.setContent(t.$element)}},{key:"getRandomPage",value:function(){var e=this;return new Promise((function(t,n){e.api.get({action:"query",list:"random",rnlimit:1,rnnamespace:0}).done((function(n){if(n.query&&n.query.random&&n.query.random.length>0){var i=n.query.random[0].title;e.setTitle(i),t(i)}else n.error?e.showError(n.error.info):e.showError(mw.message("isekai-discover-error-cannotload").parse())}))}))}},{key:"parseHTMLString",value:function(e){try{return(new DOMParser).parseFromString(e,"text/html")}catch(e){console.error(e.message)}return null}},{key:"loadPage",value:function(e){var t=this,n=mw.util.getUrl(e);this.pageUrl=n,n.indexOf("?")>=0?n+="&":n+="?",n+="action=render",$.get(n,(function(e){var n=$(t.parseHTMLString(e)).find(".mw-parser-output");n.length>0&&(n.find(".toc").remove(),t.setContent(n))}),"html")}}])&&e(n.prototype,i),t}())})()})();
+(()=>{"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,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,(void 0,o=function(t,n){if("object"!==e(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,"string");if("object"!==e(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(r.key),"symbol"===e(o)?o:String(o)),r)}var o}!function(e,t){var n="ui.DiscoverWidget".split(".");"isekai"in window||(window.isekai={});for(var i=window.isekai,r=0;r<n.length-1;r++){var o=n[r];o in i||(i[o]={}),i=i[o]}i[n[r]]=t}(0,function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.baseDom=t,this.pageUrl=null,this.api=new mw.Api,this.initDom(),this.refreshPage()}var n,i;return n=e,(i=[{key:"initDom",value:function(){this.reloadButton=new OO.ui.ButtonWidget({icon:"reload",label:mw.message("isekai-discover-change-btn").parse()}),this.reloadButton.on("click",this.refreshPage.bind(this)),this.readMoreButton=new OO.ui.ButtonWidget({icon:"ellipsis",label:mw.message("isekai-discover-readmore-btn").parse(),flags:["primary","progressive"]}),this.readMoreButton.on("click",this.showMore.bind(this)),this.loadingBar=new OO.ui.ProgressBarWidget({progress:!1}),this.baseDom.find(".card-body .loading .spinner").append(this.loadingBar.$element),this.buttonGroup=new OO.ui.ButtonGroupWidget({items:[this.reloadButton,this.readMoreButton]}),this.baseDom.find(".card-header .card-header-buttons").append(this.buttonGroup.$element),this.loading=this.baseDom.find(".card-body .loading"),this.title=this.baseDom.find(".card-body .card-title"),this.contentContainer=this.baseDom.find(".card-body .card-content")}},{key:"showMore",value:function(){this.pageUrl&&window.open(this.pageUrl)}},{key:"refreshPage",value:function(){var e=this;this.pageUrl=null,this.clearContent(),this.showLoading(),this.getRandomPage().then((function(t){e.loadPage(t)}))}},{key:"setTitle",value:function(e){this.title.text(e)}},{key:"showLoading",value:function(){this.loading.show(),this.contentContainer.hide()}},{key:"hideLoading",value:function(){this.loading.hide(),this.contentContainer.show()}},{key:"clearContent",value:function(){this.contentContainer.children().remove()}},{key:"setContent",value:function(e){this.hideLoading(),this.clearContent(),this.contentContainer.append(e)}},{key:"showError",value:function(e){var t=new OO.ui.MessageWidget({type:"error",label:e});this.setContent(t.$element)}},{key:"getRandomPage",value:function(){var e=this;return new Promise((function(t,n){e.api.get({action:"query",list:"random",rnlimit:1,rnnamespace:0}).done((function(n){if(n.query&&n.query.random&&n.query.random.length>0){var i=n.query.random[0].title;e.setTitle(i),t(i)}else n.error?e.showError(n.error.info):e.showError(mw.message("isekai-discover-error-cannotload").parse())}))}))}},{key:"parseHTMLString",value:function(e){try{return(new DOMParser).parseFromString(e,"text/html")}catch(e){console.error(e.message)}return null}},{key:"loadPage",value:function(e){var t=this,n=mw.util.getUrl(e);this.pageUrl=n,n.indexOf("?")>=0?n+="&":n+="?",n+="action=render",$.get(n,(function(e){var n=$(t.parseHTMLString(e)).find(".mw-parser-output");n.length>0&&(n.find(".toc").remove(),t.setContent(n))}),"html")}}])&&t(n.prototype,i),Object.defineProperty(n,"prototype",{writable:!1}),e}())})();

modules/tile/style.less

@@ -17,7 +17,7 @@ a {
 }
 
 .tiles-group {
-    margin: 5px 0;
+    margin: 10px 0;
 }
 
 .tiles-group::before {

modules/tile/tile.js

@@ -1,853 +0,0 @@
-/* global Colors */
-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 = 5;
-
-if(typeof isekai == 'undefined'){
-    var isekai = {};
-}
-
-isekai.tile = {};
-
-isekai.tile.setup = function (options) {
-    TileDefaultConfig = jQuery.extend({}, TileDefaultConfig, options);
-};
-
-isekai.tile.init = function () {
-    
-};
-
-(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).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);

package.json

@@ -9,20 +9,22 @@
     "watch": "webpack --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
-    "autoprefixer": "^10.2.6",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.6",
-    "mini-css-extract-plugin": "^1.6.0",
-    "postcss": "^8.3.5",
-    "postcss-loader": "^6.1.0",
-    "prettier": "^2.3.1",
-    "sass": "^1.35.1",
-    "sass-loader": "^12.1.0",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.4.23",
+    "postcss-loader": "^7.3.0",
+    "prettier": "^2.8.8",
+    "sass": "^1.62.1",
+    "sass-loader": "^12.6.0",
     "style-loader": "^2.0.0",
-    "webpack": "^5.39.0",
-    "webpack-cli": "^4.7.2"
+    "webpack": "^5.82.0",
+    "webpack-cli": "^5.1.1"
   },
   "dependencies": {
     "masonry-layout": "^4.2.2"

src/createPage/ext.isekai.createPage.js

@@ -1,4 +1,4 @@
-const registerModule = require('../moduleRegister');
+import { registerModule } from '../moduleRegister';
 
 class CreatePageWidget {
     constructor(dom) {

src/discover/ext.isekai.discover.js

@@ -1,4 +1,4 @@
-const registerModule = require('../moduleRegister');
+import { registerModule } from '../moduleRegister';
 
 class DiscoverWidget {
     constructor(dom){

src/index.js

@@ -1 +0,0 @@
-console.log("Hello World!");

src/moduleRegister.js

@@ -1,4 +1,4 @@
-function register(namespace, func) {
+export function registerModule(namespace, func) {
     let nsList = namespace.split('.');
 
     if(!('isekai' in window)){
@@ -15,5 +15,3 @@ function register(namespace, func) {
     }
     obj[nsList[i]] = func;
 }
-
-module.exports = register;

src/previewCard/ext.isekai.previewCard.js

@@ -1,4 +1,4 @@
-const registerModule = require('../moduleRegister');
+import { registerModule } from '../moduleRegister';
 
 class PreviewCardWidget {
     constructor(dom) {

src/tile/include/default-icons.less

@@ -1,63 +0,0 @@
-@playIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/play.svg');
-@loopIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/loop.svg');
-@stopIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/stop.svg');
-@pauseIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/pause.svg');
-@muteIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-mute.svg');
-@volumeLowIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-low.svg');
-@volumeMediumIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-medium.svg');
-@volumeHighIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-high.svg');
-@enlargeIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/enlarge.svg');
-@shrinkIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/shrink.svg');
-@playlistIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/list.svg');
-@nextIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/next.svg');
-@prevIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/prev.svg');
-@firstIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/first.svg');
-@lastIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/last.svg');
-@forwardIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/forward.svg');
-@backwardIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/backward.svg');
-@shareIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/share.svg');
-@equalizerIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/equalizer.svg');
-@ejectIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/eject.svg');
-@shuffleIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/shuffle.svg');
-@randomIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/dice.svg');
-
-@playIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/play.svg');
-@loopIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/loop.svg');
-@stopIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/stop.svg');
-@pauseIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/pause.svg');
-@muteIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-mute.svg');
-@volumeLowIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-low.svg');
-@volumeMediumIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-medium.svg');
-@volumeHighIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-high.svg');
-@enlargeIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/enlarge.svg');
-@shrinkIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/shrink.svg');
-@playlistIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/list.svg');
-@nextIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/next.svg');
-@prevIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/prev.svg');
-@firstIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/first.svg');
-@lastIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/last.svg');
-@forwardIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/forward.svg');
-@backwardIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/backward.svg');
-@shareIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/share.svg');
-@equalizerIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/equalizer.svg');
-@ejectIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/eject.svg');
-@shuffleIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/shuffle.svg');
-@randomIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/dice.svg');
-
-@checkIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/checkmark.svg');
-@crossIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/cross.svg');
-@searchIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/search.svg');
-@eyeIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/eye.svg');
-@plusIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/plus.svg');
-@minusIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/minus.svg');
-@helpIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/help.svg');
-@leftArrowIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/arrow-left.svg');
-@rightArrowIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/arrow-right.svg');
-@calendarIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/calendar.svg');
-@clockIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/clock.svg');
-@menuIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/menu.svg');
-@uploadIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/upload.svg');
-@pencilIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/pencil.svg');
-@chevronLeftIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/chevron-left.svg');
-@chevronRightIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/chevron-right.svg');
-

src/tile/tile.less

@@ -1,5 +1,3 @@
-/* Please use node.js "less" module to complie this less */
-/* 请使用node.js的“less”模块来编译本less */
 @import (once) "./include/vars";
 @import (once) "./include/mixins";
 
@@ -223,7 +221,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, (@tileBaseSize - 1%));
     /*grid-template-rows: repeat(auto-fit, (@tileBaseSize - 1%));*/
-    grid-gap: 5px;
+    grid-gap: 10px;
 
     .tile-small {
         height: 100%;

webpack.config.js

@@ -8,14 +8,17 @@ const stylesHandler = MiniCssExtractPlugin.loader;
 const config = {
 	entry: {
 		'createPage': './src/createPage/ext.isekai.createPage.js',
-		'discover': './src/discover/ext.isekai.discover.js'
+		'discover': './src/discover/ext.isekai.discover.js',
+        'tile': './src/tile/ext.isekai.tile.js',
 	},
     output: {
 		filename: '[name]/ext.isekai.[name].js',
 		path: path.resolve(__dirname, 'modules')
     },
     plugins: [
-        new MiniCssExtractPlugin(),
+        new MiniCssExtractPlugin({
+            filename: '[name]/ext.isekai.[name].css',
+        }),
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ],
@@ -29,6 +32,10 @@ const config = {
                 test: /\.s[ac]ss$/i,
                 use: [stylesHandler, 'css-loader', 'postcss-loader', 'sass-loader'],
             },
+            {
+                test: /\.less$/i,
+                use: [stylesHandler, 'css-loader', 'postcss-loader', 'less-loader'],
+            },
             {
                 test: /\.css$/i,
                 use: [stylesHandler, 'css-loader', 'postcss-loader'],