Skip to content

Commit

Permalink
improve online reading
Browse files Browse the repository at this point in the history
  • Loading branch information
cdhigh committed Jun 3, 2024
1 parent 3eb464d commit 5aa8921
Show file tree
Hide file tree
Showing 26 changed files with 1,248 additions and 745 deletions.
13 changes: 12 additions & 1 deletion application/static/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -1318,7 +1318,8 @@ function startUploadCoversToServer(url) {
}
///[end] adv_uploadcover.html
///[start] book_translator.html
//根据当前可选的翻译引擎列表 g_trans_engines 填充下拉框,currEngineName为Recipe的当前配置
//根据当前可选的翻译引擎列表 g_trans_engines 填充下拉框,
//currEngineName: Recipe的当前配置
function PopulateTranslatorFields(currEngineName) {
var engineSel = $('#translator_engine');
for (var name in g_trans_engines) {
Expand Down Expand Up @@ -1400,6 +1401,16 @@ function TestTranslator(recipeId) {
divDst.val(resp.text);
});
}

//测试在线阅读器的翻译器设置是否正确,这个是adv_reader.html的函数,放在这里是为了归类
function TestReaderTranslator() {
var text = $('#translator_test_src_text').val();
var divDst = $('#translator_test_dst_text');
divDst.val(i18n.translating);
MakeAjaxRequest("/adv/reader/test", "POST", {text: text}, function (resp) {
divDst.val(resp.text);
});
}
///[end] book_translator.html

///[start] book_audiolator.html
Expand Down
41 changes: 41 additions & 0 deletions application/static/reader.css
Original file line number Diff line number Diff line change
Expand Up @@ -284,3 +284,44 @@ body::-webkit-scrollbar-thumb {
text-align: center;
font-size: 0.9em;
}

.tr-result {
position: absolute;
top: 50%;
left: 50%;
background-color: white;
border: 1px solid #ccc;
border-radius: 20px;
box-shadow: 0px 0px 3px #aaa;
display: none;
min-width: 200px;
max-width: 50%;
max-height: 50%;
cursor: pointer;
}
.tr-close-icon {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: #111;
border: 1px solid #000;
border-radius: 50%;
font-size: 20px;
font-weight: bolder;
}
.tr-word {
margin: 10px auto 10px auto;
padding: 10px 50px 10px 40px;
font-weight: bold;
text-align: center;
border-bottom: 1px dotted #ccc;
}
.tr-text {
margin: 10px auto 10px auto;
padding: 10px;
text-align: center;
}
93 changes: 85 additions & 8 deletions application/static/reader.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
var g_iframeScrollHeight = 500; //在 iframeLoadEvent 里更新
//var g_iframeClientHeight = 500;
var g_currentArticle = {};
var g_dictMode = false;

//对古董浏览器兼容性最好的判断一个变量是否为空的语法
//支持基本类型/数组/对象
Expand Down Expand Up @@ -130,8 +131,8 @@ function updateNavIndicator() {
}

//获取最靠近点击位置的一个单词(以空格分隔的单词)
function getWordAtClick(event) {
iframe = document.getElementById('iframe');
function getWordAtClick(event, iframe) {
iframe = iframe || document.getElementById('iframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
const range = doc.caretRangeFromPoint(event.clientX, event.clientY);
if (range) {
Expand All @@ -155,12 +156,54 @@ function getWordAtClick(event) {
return null;
}

//连接服务器查询一个单词的释义然后显示出来
//event: click event
//word: 要查的词
//selection: 是否有选择区域
function translateWord(event, word, selection) {
var language = isEmpty(g_currentArticle) ? '' : getBookLanguage(g_currentArticle);
ajax_post('/reader/dict', {word: word, key: g_shareKey, language: language}, function (resp) {
if (resp.status == 'ok') {
var content = document.getElementById('content');
var dialog = document.getElementById('tr-result');
var title = document.getElementById('tr-word');
var text = document.getElementById('tr-text');
title.innerHTML = word;
text.innerHTML = resp.text;
var x = event.clientX;
var y = Math.max(event.clientY - content.scrollTop, 0);
var width = content.clientWidth;
var height = content.clientHeight;
if (x > width * 0.8) {
dialog.style.left = 'auto';
dialog.style.right = Math.max(width - x, 20) + 'px';
} else {
dialog.style.right = 'auto';
dialog.style.left = x + 'px';
}
if (y > height * 0.8) {
dialog.style.top = 'auto';
dialog.style.bottom = Math.max(height - y, 20) + 'px';
} else {
dialog.style.bottom = 'auto';
dialog.style.top = (y + 20) + 'px';
}
dialog.style.display = 'block';
if (selection) {
selection.removeAllRanges();
}
} else {
alert(resp.status);
}
});
}

//屏幕点击事件的处理
function clickEvent(event) {
event.preventDefault();
var content = document.getElementById('content');
var navbar = document.getElementById('navbar');
var navPopMenu = document.getElementById('nav-popmenu')
var navPopMenu = document.getElementById('nav-popmenu');
var x = event.clientX;
var y = event.clientY - content.scrollTop;
var ww = content.clientWidth;
Expand Down Expand Up @@ -439,6 +482,8 @@ function toggleNavPopMenu() {
//inkIcon.innerHTML = g_inkMode ? '✔' : '☐';
var allowIcon = document.getElementById('allow-links').querySelector('.check-icon');
allowIcon.innerHTML = g_allowLinks ? '✔' : '☐';
//var dictIcon = document.getElementById('dict-mode').querySelector('.check-icon');
//dictIcon.innerHTML = g_dictMode ? '✔' : '☐';
menu.style.display = (menu.style.display == 'block') ? 'none' : 'block';
}

Expand Down Expand Up @@ -507,6 +552,19 @@ function toggleInkMode() {
saveSettings();
}

//切换查词模式
function toggleDictMode() {
g_dictMode = !g_dictMode;
document.getElementById('tr-result').style.display='none';
hideNavbar();
}

//关闭查词窗口
function closeDictDialog() {
document.getElementById('tr-result').style.display='none';
g_dictMode = false;
}

//根据是否使能墨水屏模式,设置相应的元素属性
function setInkMode(enable) {
return; //暂时先禁用
Expand Down Expand Up @@ -677,7 +735,7 @@ function pushCurrentArticle() {
hidePopMenu();
}

//通过一个文章获取对应书本的语言
//通过一个文章获取对应书本的语言,在调用时请保证art合法
function getBookLanguage(art) {
for (var i = 0; i < g_books.length; i++) {
var entry = g_books[i]; //date
Expand All @@ -704,6 +762,7 @@ function openArticle(article) {
g_currentArticle = article;
}
hideNavbar();
closeDictDialog();
}

//打开上一篇文章
Expand Down Expand Up @@ -765,7 +824,8 @@ function findNextArticle(art) {
}

//iframe每次加载一个新的文档后会调用此函数,注册一些事件并更新一些变量
function iframeLoadEvent(iframe) {
function iframeLoadEvent(evt) {
var iframe = document.getElementById('iframe');
adjustIFrameStyle(iframe);
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.addEventListener('click', function(event) {
Expand All @@ -780,7 +840,15 @@ function iframeLoadEvent(iframe) {
return;
}
}
if (!doc.getSelection().toString()) { //没有选择文本才翻页
var selection = doc.getSelection();
var text = selection.toString();
if (g_dictMode) {
g_dictMode = false;
text = text || getWordAtClick(event, iframe);
if (text) {
translateWord(event, text, selection);
}
} else if (!text) { //没有选择文本才翻页
clickEvent(event);
}
});
Expand Down Expand Up @@ -811,14 +879,22 @@ function adjustIFrameStyle(iframe) {
function documentKeyDownEvent(event) {
var key = event.key;
//console.log('Key pressed:', key);
if ((key == ' ') || (key == 'ArrowDown') || (key == 'ArrowRight') || (key == 'PageDown')) {
if ((key == ' ') || (key == 'ArrowRight') || (key == 'PageDown')) {
event.stopPropagation();
event.preventDefault();
pageDown();
} else if ((key == 'ArrowUp') || (key == 'ArrowLeft') || (key == 'PageUp')) {
} else if (key == 'ArrowDown') {
event.stopPropagation();
event.preventDefault();
openNextArticle();
} else if ((key == 'ArrowLeft') || (key == 'PageUp')) {
event.stopPropagation();
event.preventDefault();
pageUp();
} else if (key == 'ArrowUp') {
event.stopPropagation();
event.preventDefault();
openPrevArticle();
}
}

Expand All @@ -835,6 +911,7 @@ document.addEventListener('DOMContentLoaded', function() {
content.addEventListener('scroll', updatePosIndicator);
navContent.addEventListener('click', navClickEvent);
navContent.addEventListener('scroll', updateNavIndicator);
iframe.addEventListener('load', iframeLoadEvent);
populateBooks(1);
iframe.style.display = "none"; //加载完成后再显示
iframe.src = iframe.src; //强制刷新一次,避免偶尔出现不能点击的情况
Expand Down
9 changes: 9 additions & 0 deletions application/templates/adv_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,15 @@
<a href="/adv/css" class="pure-menu-link">{{_("Stylesheet")}}</a>
</li>
{% endif -%}
{% if advCurr=='reader' -%}
<li class="pure-menu-item pure-menu-selected">
<span>{{_("Reader")}}</span>
</li>
{% else -%}
<li class="pure-menu-item">
<a href="/adv/reader" class="pure-menu-link">{{_("Reader")}}</a>
</li>
{% endif -%}
{% if advCurr=='calibreOptions' -%}
<li class="pure-menu-item pure-menu-selected">
<span>{{_("Calibre Options")}}</span>
Expand Down
85 changes: 85 additions & 0 deletions application/templates/adv_reader.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{% extends "adv_base.html" %}
{% block titleTag -%}
<title>{{ _("Reader") }} - KindleEar</title>
{% endblock -%}
{% set dict = params.get('dict', {}) %}
{% set src_lang = dict.get('src_lang', '') %}
{% set dst_lang = dict.get('dst_lang', '') %}
{% set api_host = dict.get('api_host', '') %}
{% set api_keys = dict.get('api_keys', [])|join('\n') %}

{% block advcontent -%}
{% if g.allowReader -%}
<form class="pure-form pure-form-aligned" action="" method="POST">
{% if tips -%}
<div class="notice-box error">{{tips}}</div>
{% endif -%}
<fieldset>
<legend>{{_("Dictionary")}}</legend>
<p style="margin-top:10px;font-size:0.8em;">
{{_("Set up a dictionary for online reading.")}}
</p>
<div class="pure-control-group">
<label>{{_("Engine")}}</label>
<select class="pure-u-1 pure-u-sm-1-2" name="engine" id="translator_engine" onchange="TranslatorEngineFieldChanged('{{src_lang}}', '{{dst_lang}}')">
<!-- 由脚本填充 -->
</select>
</div>
<div class="pure-control-group" id="translator_api_host">
<label> {{_("Api Host")}}</label>
<input type="text" name="api_host" id="api_host_input" value="{{api_host}}" class="pure-u-1 pure-u-sm-1-2" />
</div>
<div class="pure-control-group" id="translator_api_key">
<label> {{_("Api Key")}}</label>
<textarea name="api_keys" id="api_keys_textarea" placeholder="{{_('One key per line')}}" class="pure-u-1 pure-u-sm-1-2" >{{api_keys}}</textarea>
</div>
<div class="pure-control-group">
<label>{{_("Source language")}}</label>
<select class="pure-u-1 pure-u-sm-1-2" name="src_lang" id="translator_src_lang">
<!-- 由脚本填充 -->
</select>
</div>
<div class="pure-control-group">
<label>{{_("Target language")}}</label>
<select class="pure-u-1 pure-u-sm-1-2" name="dst_lang" id="translator_dst_lang">
<!-- 由脚本填充 -->
</select>
</div>
</fieldset>
<p style="text-align:center;">
<button type="submit" class="pure-button pure-button-primary pure-input-rounded">{{_('Save settings')}} </button>
</p>
</form>
<hr/>
<form class="pure-form pure-form-aligned" action="" method="POST">
<fieldset>
<legend>{{_("Test (Please save settings firstly)")}}</legend>
<div class="pure-control-group">
<label>{{_("Text")}}</label>
<textarea class="pure-u-1 pure-u-sm-1-2" name="translator_test_src_text" id="translator_test_src_text" rows="2">{{famous}}</textarea>
</div>
<div class="pure-control-group">
<label>{{_("Translation")}}</label>
<textarea class="pure-u-1 pure-u-sm-1-2" name="translator_test_dst_text" id="translator_test_dst_text" rows="2" readonly></textarea>
</div>
</fieldset>
<p style="text-align:center;">
<input type="button" class="pure-button pure-button-primary pure-input-rounded" value="{{_('Test')}}" onclick="TestReaderTranslator()" />
</p>
</form>
{% else %}
<p style="margin-top:10px;font-size:0.8em;">
{{_("Online reading feature has not been activated yet.")}}
</p>
{% endif -%}
{% endblock -%}
{% block js -%}
<script type="text/javascript">
var g_trans_engines = {{engines|safe}};

$(document).ready(function() {
PopulateTranslatorFields("{{params['engine']}}");
TranslatorEngineFieldChanged('{{src_lang}}', '{{dst_lang}}');
});
</script>
{% endblock -%}
4 changes: 0 additions & 4 deletions application/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,7 @@
{% block header -%}
<div>
<a href="/" class="pure-menu-heading pure-menu-link logo">KindleEar</a>
{% if g.allowReader -%}
<a href="/reader" target="_blank" class="pure-menu-heading pure-menu-link reader-link">Reader</a>
{% endif %}
</div>
{% block header_loginfo -%}
<ul class="pure-menu-list home-menu">
Expand Down Expand Up @@ -181,9 +179,7 @@
<li class="pure-menu-item {% if tab == 'admin' %}pure-menu-selected{% endif %}"><a href="/admin" class="pure-menu-link">{{_("Admin")}}</a></li>
<li class="pure-menu-item {% if tab == 'advset' %}pure-menu-selected{% endif %}"><a href="/adv" class="pure-menu-link">{{_("Advanced")}}</a></li>
<li class="pure-menu-item {% if tab == 'shared' %}pure-menu-selected{% endif %}"><a href="/library" class="pure-menu-link">{{_("Shared")}}</a></li>
{% if g.allowReader -%}
<li class="pure-menu-item"><a href="/reader" class="pure-menu-link" target="_blank">{{_("Reader")}}</a></li>
{% endif -%}
</ul>
</div>
{% endif -%}
Expand Down
Loading

0 comments on commit 5aa8921

Please sign in to comment.