增加Feed列表
parent
706e051d2e
commit
5b707ec169
@ -0,0 +1,7 @@
|
||||
<?php
|
||||
$magicWords = [
|
||||
'en' => [
|
||||
'htmldetails' => [0, 'htmldetails'],
|
||||
'htmlsummary' => [0, 'htmlsummary'],
|
||||
],
|
||||
];
|
||||
Binary file not shown.
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class FeedListWidget {
|
||||
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, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.feedList');
|
||||
|
||||
return self::getHtml();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
|
||||
class Html5Widget {
|
||||
public static function createDetails(string $text, array $args, \Parser $parser, \PPFrame $frame) {
|
||||
$parser->getOutput()->addModules('ext.isekai.collapse');
|
||||
$allowedAttr = ['class'];
|
||||
$htmlArgs = array_filter($args, function($k) use($allowedAttr) {
|
||||
return in_array($k, $allowedAttr);
|
||||
}, ARRAY_FILTER_USE_KEY);
|
||||
|
||||
$content = '';
|
||||
if ($text) {
|
||||
$content = Utils::makeParagraph($parser->recursiveTagParse($text, $frame), true);
|
||||
}
|
||||
|
||||
return [Html::rawElement('details', $htmlArgs, $content), "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function createSummary(string $text, array $args, \Parser $parser, \PPFrame $frame) {
|
||||
$allowedAttr = ['class'];
|
||||
$htmlArgs = array_filter($args, function($k) use($allowedAttr) {
|
||||
return in_array($k, $allowedAttr);
|
||||
}, ARRAY_FILTER_USE_KEY);
|
||||
|
||||
$content = '';
|
||||
if ($text) {
|
||||
$content = $parser->recursiveTagParse($text, $frame);
|
||||
}
|
||||
|
||||
return [Html::rawElement('summary', $htmlArgs, $content), "markerType" => 'nowiki'];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
(function($) {
|
||||
$('.isekai-collapse').addClass('animate')
|
||||
$('.isekai-collapse .isekai-collapse-title').on('click', '', function(e) {
|
||||
e.preventDefault();
|
||||
var titleElem = $(this);
|
||||
var containerElem = titleElem.parent('.isekai-collapse');
|
||||
var contentElem = containerElem.find('.isekai-collapse-content');
|
||||
if (containerElem.prop('open')) { // 需要收起
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
console.log('expandedHeight', expandedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
console.log('collapsedHeight', collapsedHeight);
|
||||
containerElem.addClass('closing').css('height', collapsedHeight);
|
||||
setTimeout(function() {
|
||||
containerElem.prop('open', false).removeClass('closing'); //.css('height', 'auto');
|
||||
}, 260);
|
||||
});
|
||||
} else { // 需要展开
|
||||
containerElem.prop('open', true);
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
containerElem.css('height', collapsedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
/*setTimeout(function() {
|
||||
containerElem.css('height', 'auto');
|
||||
}, 260);*/
|
||||
});
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1,64 @@
|
||||
.isekai-collapse {
|
||||
width: 50%;
|
||||
background: #fff;
|
||||
margin-bottom: .5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.animate {
|
||||
overflow-y: hidden;
|
||||
will-change: height;
|
||||
transition: height 250ms ease-in-out;
|
||||
}
|
||||
|
||||
.isekai-collapse-title {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
background-color: #f7f7f7;
|
||||
padding-left: 2.2rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
border-width: 0.4rem;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent #000;
|
||||
position: absolute;
|
||||
top: 1.32rem;
|
||||
left: 1.2rem;
|
||||
transform: rotate(0);
|
||||
transform-origin: 0.2rem 50%;
|
||||
will-change: transform;
|
||||
transition: transform 250ms ease;
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-collapse-content {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
&[open] > .isekai-collapse-title:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.closing[open] > .isekai-collapse-title:before {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-indent > .isekai-collapse {
|
||||
padding-left: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
.isekai-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1rem 0 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.card-body-fluid {
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media(max-width: 360px){
|
||||
.card-header-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
@feed-list-height: 24rem;
|
||||
|
||||
.isekai-feed-list-card > .card-header {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
#isekai-feed-list {
|
||||
margin: 0;
|
||||
height: @feed-list-height;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
|
||||
&.mounted {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-list {
|
||||
margin: 0 !important;
|
||||
padding: 0 0 0.5rem 0 !important;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
|
||||
.isekai-list-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-height: 3rem;
|
||||
padding: 0 1rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(0,0,0,.12);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.isekai-list-item-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
padding-top: 0.875rem;
|
||||
padding-bottom: 0.875rem;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.isekai-list-item-title~.isekai-list-item-text {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.isekai-list-item-text {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.54;
|
||||
-webkit-line-clamp: 1;
|
||||
height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="isekai-card isekai-feed-list-card">
|
||||
<div class="card-header">
|
||||
<span class="card-header-text"><?=wfMessage('isekai-feed-list-title')->parse()?></span>
|
||||
</div>
|
||||
<div class="card-body-fluid">
|
||||
<div id="isekai-feed-list" :class="{ mounted: 'mounted' }">
|
||||
<div v-if="loading" class="loading">
|
||||
<div class="spinner">
|
||||
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-progressBarWidget-indeterminate oo-ui-progressBarWidget" aria-disabled="false" role="progressbar" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="oo-ui-progressBarWidget-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-else class="isekai-list">
|
||||
<a class="isekai-list-item" v-for="(feedItem, index) in feedList" :key="index" :href="feedItem.url">
|
||||
<div class="isekai-list-item-content">
|
||||
<div class="isekai-list-item-title">{{ feedItem.title }}</div>
|
||||
<div class="isekai-list-item-text">{{ feedItem.description }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="isekai-preview-card-wrapper">
|
||||
<div class="isekai-preview-card card-media" data-title="<?php echo $title; ?>">
|
||||
<div class="isekai-preview-card card-media" data-title="<?=$title?>">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
<div class="card-header-title-text"><?php echo $displayTitle; ?></div>
|
||||
<div class="card-header-subtitle-text"><?php echo $path; ?></div>
|
||||
<div class="card-header-title-text"><?=$displayTitle?></div>
|
||||
<div class="card-header-subtitle-text"><?=$path?></div>
|
||||
</div>
|
||||
<img class="card-img" style="display: none;">
|
||||
</div>
|
||||
Loading…
Reference in New Issue