generated from dellevin/template
233 lines
6.5 KiB
HTML
233 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Anx Reader Debug</title>
|
|
<style>
|
|
html {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
user-select: none;
|
|
margin: 0 !important;
|
|
height: 100vh;
|
|
}
|
|
|
|
#footnote-dialog {
|
|
position: fixed;
|
|
width: 80vw;
|
|
height: 80vh;
|
|
max-width: 400px;
|
|
max-height: 200px;
|
|
min-width: 300px;
|
|
min-height: 200px;
|
|
border-radius: 15px;
|
|
border: 1px solid grey;
|
|
user-select: none;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
outline: none;
|
|
z-index: 1000;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#footnote-dialog main {
|
|
overflow: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#debug-controls {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.translated-text {
|
|
display: block !important;
|
|
font-style: italic;
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
.translated-text.hidden {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
|
|
<div id="debug-controls">
|
|
<div>
|
|
<button onclick="window.prevPage()">Prev</button>
|
|
<button onclick="window.nextPage()">Next</button>
|
|
<button onclick="window.goToPercent(0.5)">50%</button>
|
|
</div>
|
|
<!-- <div style="margin-top: 10px;">
|
|
<label>Translation:</label><br>
|
|
<button onclick="setTranslationMode('off')">Off</button>
|
|
<button onclick="setTranslationMode('bilingual')">Bilingual</button>
|
|
<button onclick="setTranslationMode('translation-only')">Trans Only</button>
|
|
<button onclick="setTranslationMode('original-only')">Orig Only</button>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<button onclick="testCFIPreservation()">Test CFI</button>
|
|
<div id="cfi-result" style="font-size: 0.8em; margin-top: 5px;"></div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div id="footnote-dialog">
|
|
<main></main>
|
|
</div>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"core-js/stable": "https://esm.sh/core-js@3/stable"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
console.log("AnxUA", navigator.userAgent);
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (!urlParams.has('url')) {
|
|
const mockParams = {
|
|
importing: false,
|
|
url: '../local/xyz.epub',
|
|
initialCfi: "epubcfi(/6/14!/4,/2[CHP4]/1:1,/16/1:43)",
|
|
style: {
|
|
fontSize: 1.4,
|
|
fontName: "book",
|
|
fontPath: "",
|
|
fontWeight: 400.0,
|
|
letterSpacing: 0.0,
|
|
spacing: 1.5,
|
|
paragraphSpacing: 1.0,
|
|
textIndent: 2.0,
|
|
fontColor: "#111111ff",
|
|
backgroundColor: "#fefefeff",
|
|
topMargin: 20.0,
|
|
bottomMargin: 50.0,
|
|
sideMargin: 15.0,
|
|
justify: true,
|
|
hyphenate: true,
|
|
// 'slide' 'scroll' 'noAnimation'
|
|
pageTurnStyle: "slide",
|
|
// pageTurnStyle: "slide",
|
|
maxColumnCount: 1,
|
|
// auto 'horizontal-tb' 'vertical-rl'
|
|
// writingMode: "vertical-rl",
|
|
writingMode: "auto",
|
|
backgroundImage: "none",
|
|
|
|
// true, false
|
|
allowScript: true,
|
|
},
|
|
readingRules: {
|
|
convertChineseMode: "none",
|
|
bionicReadingMode: false
|
|
}
|
|
};
|
|
|
|
const params = new URLSearchParams();
|
|
params.set('importing', JSON.stringify(mockParams.importing));
|
|
params.set('url', JSON.stringify(mockParams.url));
|
|
params.set('initialCfi', JSON.stringify(mockParams.initialCfi));
|
|
params.set('style', JSON.stringify(mockParams.style));
|
|
params.set('readingRules', JSON.stringify(mockParams.readingRules));
|
|
|
|
window.location.href = window.location.pathname + '?' + params.toString();
|
|
}
|
|
|
|
window.flutter_inappwebview = {
|
|
callHandler: (name, data) => {
|
|
console.log(`Flutter Handler Called: ${name}`, data);
|
|
// Mock translation response for testing
|
|
if (name === 'translateText') {
|
|
return Promise.resolve(`TRANS: ${data}`);
|
|
}
|
|
return Promise.resolve(null);
|
|
}
|
|
};
|
|
|
|
// available types: highlight, underline, bookmark
|
|
const anno = [
|
|
{ id: 1, type: 'highlight', value: "epubcfi(/6/14!/4,/10/1:0,/16/1:12)", color: 'blue', note: 'this is' },
|
|
// { id: 2, type: 'ubderline', value: "epubcfi(/6/6!/4/2[pgepubid00003]/18,/3:300,/5:102)", color: '#66ccff', note: 'this is' },
|
|
// { id: 3, type: 'underline', value: "epubcfi(/6/6!/4/2[pgepubid00003]/18/6,/1:1,/1:8)", color: 'red', note: 'this is' },
|
|
]
|
|
|
|
setTimeout(() => {
|
|
reader.renderAnnotation(anno)
|
|
}, 1000)
|
|
|
|
// Translation testing functions
|
|
function setTranslationMode(mode) {
|
|
if (reader.view && reader.view.setTranslationMode) {
|
|
reader.view.setTranslationMode(mode);
|
|
console.log('Translation mode set to:', mode);
|
|
} else {
|
|
console.warn('Translation mode not available');
|
|
}
|
|
}
|
|
|
|
function testCFIPreservation() {
|
|
if (!reader.view) {
|
|
document.getElementById('cfi-result').textContent = 'View not ready';
|
|
return;
|
|
}
|
|
|
|
const testCFI = "epubcfi(/6/6!/4/2[pgepubid00003],/16/1:223,/20/7:170)";
|
|
const resultDiv = document.getElementById('cfi-result');
|
|
|
|
try {
|
|
// Test 1: Get current location before translation
|
|
const beforeLocation = reader.view.getCFI();
|
|
resultDiv.innerHTML = `Before: ${beforeLocation}<br>`;
|
|
|
|
// Test 2: Enable translation
|
|
setTranslationMode('bilingual');
|
|
|
|
setTimeout(() => {
|
|
// Test 3: Get location after translation
|
|
const afterLocation = reader.view.getCFI();
|
|
resultDiv.innerHTML += `After: ${afterLocation}<br>`;
|
|
|
|
// Test 4: Navigate to specific CFI
|
|
reader.view.goTo(testCFI);
|
|
|
|
setTimeout(() => {
|
|
const finalLocation = reader.view.getCFI();
|
|
resultDiv.innerHTML += `Final: ${finalLocation}<br>`;
|
|
|
|
if (beforeLocation && afterLocation && finalLocation) {
|
|
resultDiv.innerHTML += `<span style="color: ${beforeLocation === afterLocation ? 'green' : 'orange'};">CFI Stable: ${beforeLocation === afterLocation}</span>`;
|
|
}
|
|
}, 1000);
|
|
}, 2000);
|
|
|
|
} catch (error) {
|
|
resultDiv.textContent = `Error: ${error.message}`;
|
|
console.error('CFI test error:', error);
|
|
}
|
|
}
|
|
|
|
// Make functions globally available
|
|
window.setTranslationMode = setTranslationMode;
|
|
window.testCFIPreservation = testCFIPreservation;
|
|
</script>
|
|
|
|
<script src="./src/book.js" type="module"></script>
|
|
<script src="./src/vendor/pdfjs/pdf.js"></script>
|
|
</html> |