完成页面列表预览组件
parent
fb8e78e630
commit
6e162edd86
@ -0,0 +1,71 @@
|
|||||||
|
<?php
|
||||||
|
namespace Isekai\Widgets;
|
||||||
|
|
||||||
|
use Html;
|
||||||
|
use Title;
|
||||||
|
|
||||||
|
class PreviewPageListWidget {
|
||||||
|
public const CONTAINER_CLASS_NAME = 'isekai-card isekai-preview-page-list-card';
|
||||||
|
|
||||||
|
public static function create($text, $params, \Parser $parser, \PPFrame $frame) {
|
||||||
|
$parser->getOutput()->addModules(['ext.isekai.previewPageList']);
|
||||||
|
|
||||||
|
$loader = $params['loader'] ?? 'unknown';
|
||||||
|
if ($loader === 'unknown' && !empty(trim($text))) {
|
||||||
|
$loader = 'pages';
|
||||||
|
}
|
||||||
|
|
||||||
|
$autoFocus = $params['autofocus'] ?? false;
|
||||||
|
if ($autoFocus === 'false' || $autoFocus === '0') {
|
||||||
|
$autoFocus = false;
|
||||||
|
} else {
|
||||||
|
$autoFocus = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
$lazyLoad = $params['lazyload'] ?? false;
|
||||||
|
if ($lazyLoad === 'false' || $lazyLoad === '0') {
|
||||||
|
$lazyLoad = false;
|
||||||
|
} else {
|
||||||
|
$lazyLoad = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch ($loader) {
|
||||||
|
case 'pages':
|
||||||
|
$pageList = explode("\n", trim($text));
|
||||||
|
$pageList = array_map(function ($page) {
|
||||||
|
return trim($page);
|
||||||
|
}, $pageList);
|
||||||
|
|
||||||
|
return Html::openElement('div', [
|
||||||
|
'class' => self::CONTAINER_CLASS_NAME,
|
||||||
|
'data-loader' => $loader,
|
||||||
|
'data-autofocus' => $autoFocus,
|
||||||
|
'data-lazyload' => $lazyLoad,
|
||||||
|
]) . Html::element('script', [
|
||||||
|
'type' => 'application/json',
|
||||||
|
'data-pages' => true,
|
||||||
|
], json_encode($pageList)) . Html::closeElement('div');
|
||||||
|
case 'category':
|
||||||
|
$category = $params['category'] ?? null;
|
||||||
|
if (!$category) {
|
||||||
|
return Html::element('span', [
|
||||||
|
'class' => 'error'
|
||||||
|
], wfMessage('isekai-preview-page-list-error-invalid-category')->parse());
|
||||||
|
}
|
||||||
|
|
||||||
|
$categoryTitle = new Title($category, NS_CATEGORY);
|
||||||
|
$categoryTitleText = $categoryTitle->getPrefixedText();
|
||||||
|
|
||||||
|
return Html::element('div', [
|
||||||
|
'class' => self::CONTAINER_CLASS_NAME,
|
||||||
|
'data-category' => $categoryTitleText,
|
||||||
|
'data-autofocus' => $autoFocus,
|
||||||
|
'data-lazyload' => $lazyLoad,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Html::element('span', [
|
||||||
|
'class' => 'error'
|
||||||
|
], wfMessage('isekai-preview-page-list-error-invalid-loader', $loader)->parse());
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,174 @@
|
|||||||
|
const Vue = require("vue");
|
||||||
|
|
||||||
|
class BasePageListLoader {
|
||||||
|
loadPageList() {
|
||||||
|
return Promise.reject(new Error('Not implemented'));
|
||||||
|
}
|
||||||
|
|
||||||
|
parseHTMLString(txt) {
|
||||||
|
try {
|
||||||
|
let parser = new DOMParser();
|
||||||
|
let xmlDoc = parser.parseFromString(txt, "text/html");
|
||||||
|
return xmlDoc;
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e.message);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
loadPageContent(pageInfo) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (!pageInfo || !pageInfo.fullTitle) {
|
||||||
|
return reject(new Error('pageInfo.fullTitle is null'));
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = mw.util.getUrl(pageInfo.fullTitle);
|
||||||
|
if (url.indexOf('?') >= 0) {
|
||||||
|
url += '&';
|
||||||
|
} else {
|
||||||
|
url += '?'
|
||||||
|
}
|
||||||
|
url += 'action=render';
|
||||||
|
$.get(url, (str) => {
|
||||||
|
let $dom = $(this.parseHTMLString(str));
|
||||||
|
let $content = $dom.find('.mw-parser-output');
|
||||||
|
if ($content.length > 0) {
|
||||||
|
//删除目录
|
||||||
|
$content.find('.toc').remove();
|
||||||
|
resolve($content.html());
|
||||||
|
}
|
||||||
|
}, 'html');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getPageUrl(pageInfo) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (!pageInfo || !pageInfo.fullTitle) {
|
||||||
|
return reject(new Error('pageInfo.fullTitle is null'));
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = mw.util.getUrl(pageInfo.fullTitle);
|
||||||
|
resolve(url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据标题生成页面信息
|
||||||
|
* @param {string} title
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
makePageInfoFromTitle(title) {
|
||||||
|
let pageInfo = {
|
||||||
|
fullTitle: title,
|
||||||
|
title: title,
|
||||||
|
subTitle: null
|
||||||
|
};
|
||||||
|
if (title.indexOf('/') !== 0) {
|
||||||
|
let splitPos = title.lastIndexOf('/');
|
||||||
|
pageInfo.title = title.substring(splitPos + 1);
|
||||||
|
pageInfo.subTitle = title.substring(0, splitPos);
|
||||||
|
}
|
||||||
|
return pageInfo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PresetPageListLoader extends BasePageListLoader {
|
||||||
|
/**
|
||||||
|
* 从页面列表加载页面
|
||||||
|
* @param {string[]} pageList
|
||||||
|
*/
|
||||||
|
constructor(pageList) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.pageList = pageList.map((pageTitle) => {
|
||||||
|
return this.makePageInfoFromTitle(pageTitle);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载页面列表
|
||||||
|
* @returns {Promise<*>}
|
||||||
|
*/
|
||||||
|
loadPageList() {
|
||||||
|
return Promise.resolve(this.pageList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class CategoryPageListLoader extends BasePageListLoader {
|
||||||
|
/**
|
||||||
|
* 从分类加载页面
|
||||||
|
* @param {string} category
|
||||||
|
*/
|
||||||
|
constructor(category) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.category = category;
|
||||||
|
this.api = new mw.Api();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载页面列表
|
||||||
|
* @returns {Promise<*>}
|
||||||
|
*/
|
||||||
|
loadPageList() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.api.get({
|
||||||
|
action: 'query',
|
||||||
|
list: 'categorymembers',
|
||||||
|
cmtitle: this.category,
|
||||||
|
cmtype: page,
|
||||||
|
cmnamespace: 0,
|
||||||
|
cmlimit: 200,
|
||||||
|
cmsort: 'sortkey',
|
||||||
|
}).done((data) => {
|
||||||
|
if(data.query && data.query.categorymembers){
|
||||||
|
let pageList = data.query.categorymembers.map((pageInfo) => {
|
||||||
|
return this.makePageInfoFromTitle(pageInfo.title);
|
||||||
|
});
|
||||||
|
resolve(pageList);
|
||||||
|
} else if(data.error){
|
||||||
|
reject(new Error(data.error.info));
|
||||||
|
} else {
|
||||||
|
reject(new Error(mw.message('isekai-discover-error-cannotload').parse()));
|
||||||
|
}
|
||||||
|
}).fail((data) => {
|
||||||
|
reject(new Error(data.error.info));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let previewPageList = document.querySelectorAll('.isekai-preview-page-list-card');
|
||||||
|
if (previewPageList.length > 0) {
|
||||||
|
const App = require("./PreviewPageList.vue");
|
||||||
|
previewPageList.forEach((previewPageListDom) => {
|
||||||
|
try {
|
||||||
|
let props = {};
|
||||||
|
let dataset = previewPageListDom.dataset;
|
||||||
|
|
||||||
|
props.autoFocus = (dataset.autofocus == '1');
|
||||||
|
props.lazyLoad = (dataset.lazyload == '1');
|
||||||
|
|
||||||
|
switch (dataset.loader) {
|
||||||
|
case 'pages':
|
||||||
|
let pagesJsonEl = document.querySelector('script[type="application/json"][data-pages]');
|
||||||
|
let pageList = [];
|
||||||
|
if (pagesJsonEl) {
|
||||||
|
pageList = JSON.parse(pagesJsonEl.innerHTML);
|
||||||
|
}
|
||||||
|
props.pageListLoader = new PresetPageListLoader(pageList);
|
||||||
|
break;
|
||||||
|
case 'category':
|
||||||
|
let category = dataset.category;
|
||||||
|
props.pageListLoader = new CategoryPageListLoader(category);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error('Unknown loader: ' + dataset.loader);
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.createMwApp(App, props).mount(previewPageListDom);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,173 @@
|
|||||||
|
@preview-page-list-height: 70vh;
|
||||||
|
|
||||||
|
.isekai-preview-page-list-card {
|
||||||
|
height: @preview-page-list-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-preview-page-list-card > .card-header {
|
||||||
|
height: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-preview-page-list-container {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
width: 100%;
|
||||||
|
height: 99.5%;
|
||||||
|
height: calc(100% - 2px); // fix: overflow because of border
|
||||||
|
margin-top: 1px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
margin: auto;
|
||||||
|
padding: 2rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.oo-ui-progressBarWidget {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-layout {
|
||||||
|
display: flex;
|
||||||
|
height: @preview-page-list-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面列表
|
||||||
|
.isekai-booklet-menu {
|
||||||
|
flex: 0 0;
|
||||||
|
width: 280px;
|
||||||
|
flex-basis: 280px;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
height: @preview-page-list-height;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-right: 1px solid rgba(0,0,0,.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-preview-page-list {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.isekai-list-item {
|
||||||
|
&.active {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #36c;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面预览
|
||||||
|
.isekai-booklet-content {
|
||||||
|
flex: 1 1;
|
||||||
|
width: 0;
|
||||||
|
height: @preview-page-list-height;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
flex: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-preview-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 12px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提示选择页面
|
||||||
|
.isekai-preview-page-list-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: @preview-page-list-height;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.isekai-booklet-layout {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.animating {
|
||||||
|
.isekai-booklet-menu,
|
||||||
|
.isekai-booklet-content {
|
||||||
|
transition: transform 150ms ease-in-out, opacity 150ms ease-in-out;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-menu {
|
||||||
|
display: block;
|
||||||
|
z-index: 3;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-content {
|
||||||
|
display: flex;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focus-menu-transition {
|
||||||
|
.isekai-booklet-menu {
|
||||||
|
transform: scale(100%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-content {
|
||||||
|
transform: scale(80%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focus-content-transition {
|
||||||
|
.isekai-booklet-menu {
|
||||||
|
transform: scale(120%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-content {
|
||||||
|
transform: scale(100%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-menu {
|
||||||
|
width: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focus-content {
|
||||||
|
.isekai-booklet-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isekai-booklet-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue