适配打印模式

master
落雨楓 1 week ago
parent 4bcebf588e
commit dcf17403b9

@ -1,33 +1,54 @@
(function($) {
$('.isekai-collapse').addClass('animate')
function expand(titleElem, containerElem, contentElem) {
containerElem.prop('open', true);
var collapsedHeight = titleElem.outerHeight();
containerElem.css('height', collapsedHeight);
requestAnimationFrame(function() {
var expandedHeight = collapsedHeight + contentElem.outerHeight();
containerElem.css('height', expandedHeight);
});
}
function collapse(titleElem, containerElem, contentElem) {
var collapsedHeight = titleElem.outerHeight();
var expandedHeight = collapsedHeight + contentElem.outerHeight();
containerElem.css('height', expandedHeight);
requestAnimationFrame(function() {
containerElem.addClass('closing').css('height', collapsedHeight);
setTimeout(function() {
containerElem.prop('open', false).removeClass('closing');
}, 260);
});
}
$('.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);
});
collapse(titleElem, containerElem, contentElem);
} 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);*/
});
expand(titleElem, containerElem, contentElem);
}
});
function onMediaQueryChanged(mediaQueryList) {
console.log('mediaQuery', mediaQueryList.matches);
if (mediaQueryList.matches) {
// 打印时展开所有折叠
$('.isekai-collapse').each(function() {
$(this).prop('open', true);
});
}
}
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
onMediaQueryChanged(mediaQueryList);
mediaQueryList.addEventListener('change', function(e) {
onMediaQueryChanged(mediaQueryList);
});
}
})(jQuery);

@ -60,6 +60,12 @@
&.closing[open] > .isekai-collapse-title:before {
transform: rotate(0);
}
@media print {
&::details-content {
display: block;
}
}
}
.isekai-indent > .isekai-collapse {

@ -114,6 +114,10 @@
list-style: none;
background-color: transparent;
@media print {
padding-bottom: 0 !important;
}
.isekai-list-item {
display: -webkit-box;
display: -ms-flexbox;

@ -167,38 +167,46 @@ function htmlDecode(input) {
return doc.documentElement.textContent;
}
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) {
let jsonStr = htmlDecode(pagesJsonEl.innerText);
pageList = JSON.parse(jsonStr);
}
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);
}
(function() {
// 打印模式下不加载
var mediaQueryList = window.matchMedia('print');
if (mediaQueryList.matches) {
return;
}
Vue.createMwApp(App, props).mount(previewPageListDom);
} catch (e) {
console.error(e);
}
});
}
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) {
let jsonStr = htmlDecode(pagesJsonEl.innerText);
pageList = JSON.parse(jsonStr);
}
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);
}
});
}
})();

@ -2,6 +2,10 @@
.isekai-preview-page-list-card {
height: @preview-page-list-height;
@media print {
height: auto;
}
}
.isekai-preview-page-list-card > .card-header {

Loading…
Cancel
Save