twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-02-02 18:14:26 +00:00
Code Issues Projects Releases Wiki Activity

implement optional posts translation API

Browse Source
This commit is contained in:
d47081 2022-09-01 14:26:00 +03:00
parent 33411c4d43
commit eb45bffacd
13 changed files with 137 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/style.css
View File

@ -1256,6 +1256,7 @@ ol.toptrends-list {
{
display: none;
}
.post-translate,
.post-reply,
.post-propagate,
.post-favorite
@ -1266,30 +1267,36 @@ ol.toptrends-list {
opacity: .7;
display: none;
}
.post:hover .post-translate,
.post:hover .post-reply,
.post:hover .post-propagate,
.post:hover .post-favorite,
.original.open .post-interactions .post-translate,
.original.open .post-interactions .post-reply,
.original.open .post-interactions .post-propagate,
.original.open .post-interactions .post-favorite,
.post:hover .original .post-interactions .post-translate,
.post:hover .original .post-interactions .post-reply,
.post:hover .original .post-interactions .post-propagate,
.post:hover .original .post-interactions .post-favorite
{
display: inline-block;
}
.related.post:hover .post-translate,
.related.post:hover .post-reply,
.related.post:hover .post-propagate,
.related.post:hover .post-favorite
{
display: inline-block;
}
.open .related .post-translate,
.open .related .post-reply,
.open .related .post-propagate,
.open .related .post-favorite
{
display: none!important;
}
.open .related:hover .post-translate,
.open .related:hover .post-reply,
.open .related:hover .post-propagate,
.open .related:hover .post-favorite
@ -1300,6 +1307,11 @@ ol.toptrends-list {
{
background: url(../img/repost.png) no-repeat left center;
}
.post-translate
{
background: none;
padding-left: 0;
}
.post-favorite
{
background: none;
@ -1310,6 +1322,7 @@ ol.toptrends-list {
content: "★";
font-size: 18px;
}
.post-translate:hover,
.post-reply:hover,
.post-propagate:hover,
.post-favorite:hover

1
home.html
View File

@ -365,6 +365,7 @@
<span class="post-expand">Expand</span>
<!-- elementos de interação com o post que são exibidos no hover -->
<div class="post-interactions">
<span class="post-translate">Translate</span>
<span class="post-reply">Reply</span>
<span class="post-propagate">Retransmit</span>
<span class="post-favorite">Favorite</span>

43
js/interface_common.js
View File

@ -1873,6 +1873,43 @@ function postReplyClick(event) {
event.stopPropagation();
}
function postTranslateClick(event) {
if ($.Options.TranslationEnabled.val === 'enable' && $.Options.TranslationAPI.val.length > 0) {
var post = $(this).closest('.post').find('.post-text');
// prevent merge string on tabulation usage
post.html(post.html().replaceAll('<br>',' '));
// some APIs not accept slash as the part of the get request routing
var request = post.text().replaceAll('/','|');
$.ajax({
dataType: 'json',
url: $.Options.TranslationAPI.val + encodeURIComponent(request),
success: function(json) {
if (json.translation) {
var translation = htmlFormatMsg(json.translation.replaceAll('|','/'));
post.html(translation.html);
}
if (json.error) {
alert(json.error);
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
})
}
event.stopPropagation();
}
// Expande Área do Novo post
function composeNewPost(e, postAreaNew) {
e.stopPropagation();
@ -3028,6 +3065,12 @@ function initInterfaceCommon() {
postExpandFunction(event, $(this));
})
;
if ($.Options.TranslationEnabled.val !== 'enable') {
twister.tmpl.post.find('.post-translate').remove();
}
twister.tmpl.post.find('.post-translate').on('click', postTranslateClick);
twister.tmpl.post.find('.post-reply').on('click', postReplyClick);
twister.tmpl.post.find('.post-propagate').on('click', reTwistPopup);
twister.tmpl.post.find('.post-favorite').on('click', favPopup);

14
js/options.js
View File

@ -340,6 +340,20 @@ function twisterOptions() {
type: 'checkbox',
valDefault: false
});
this.add({
name: 'TranslationEnabled',
valDefault: 'disable',
tickMethod: function (elem) {
$('#TranslationCont').css('display', (elem.value === 'enable') ? 'block' : 'none');
}
});
this.add({
name: 'TranslationAPI',
type: 'text',
valDefault: 'https://lingva.ml/api/v1/auto/en/',
valMes: 'characters',
getMethod: function (val) {return val;}
});
}
twisterOptions.prototype.add = function (option) {

25
options.html
View File

@ -60,6 +60,8 @@
<label for="t-6" class="tabs selectable_theme theme_nin">Users</label>
<input id="t-7" name="option_tab" type="radio" class="selectable_theme theme_nin" />
<label for="t-7" class="tabs selectable_theme theme_nin">WebTorrent</label>
<input id="t-9" name="option_tab" type="radio" class="selectable_theme theme_nin" />
<label for="t-9" class="tabs selectable_theme theme_nin">Translation</label>
<div class="tab-content">
@ -539,6 +541,29 @@
</div>
</div>
<div class="translation">
<div class="module">
<p class="label label-h"> Translation </p>
<div class="container">
<form>
<p class="label">Translation support to display localized twists</p>
<select id="TranslationEnabled" class="container">
<option value="enable">Enable</option>
<option value="disable">Disable</option>
</select>
</form>
</div>
<div id="TranslationCont" class="container">
<form>
<p class="label">Translation API address</p>
<input type="text" id="TranslationAPI" size="80" class="container"/>
<a href="https://github.com/thedaviddelta/lingva-translate#instances" target="_blank">Get Instances</a>
</form>
<p></p>
</div>
</div>
</div>
</div><!-- /tab-content -->
</div><!-- /options -->
</div><!-- /options -->

13
theme_calm/css/style.css
View File

@ -1646,6 +1646,7 @@ textarea.splited-post {
{
display: none;
}
.post-translate,
.post-reply,
.post-propagate,
.post-favorite
@ -1661,30 +1662,36 @@ textarea.splited-post {
-o-transition: all 200ms;
transition: all 200ms;
}
.post:hover .post-translate,
.post:hover .post-reply,
.post:hover .post-propagate,
.post:hover .post-favorite,
.original.open .post-interactions .post-translate,
.original.open .post-interactions .post-reply,
.original.open .post-interactions .post-propagate,
.original.open .post-interactions .post-favorite,
.post:hover .original .post-interactions .post-translate,
.post:hover .original .post-interactions .post-reply,
.post:hover .original .post-interactions .post-propagate,
.post:hover .original .post-interactions .post-favorite
{
display: inline-block;
}
.related.post:hover .post-translate,
.related.post:hover .post-reply,
.related.post:hover .post-propagate,
.related.post:hover .post-favorite
{
display: inline-block;
}
.open .related .post-translate,
.open .related .post-reply,
.open .related .post-propagate,
.open .related .post-favorite
{
display: none!important;
}
.open .related:hover .post-translate,
.open .related:hover .post-reply,
.open .related:hover .post-propagate,
.open .related:hover .post-favorite
@ -1703,10 +1710,16 @@ textarea.splited-post {
background: none;
padding-left: 0;
}
.post-translate
{
background: none;
padding-left: 0;
}
.post-favorite:before
{
content: "★";
}
.post-translate:hover,
.post-reply:hover,
.post-propagate:hover,
.post-favorite:hover

8
theme_nin/css/style.css
View File

@ -1003,11 +1003,11 @@ samp {
}
/* line 215, ../sass/_postboard.sass */
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite {
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite, .expanded-post .post-translate {
color: #b3b5b7;
}
/* line 217, ../sass/_postboard.sass */
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover {
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover, .expanded-post .post-translate:hover {
color: #727578;
}
@ -1038,7 +1038,7 @@ samp {
}
/* line 239, ../sass/_postboard.sass */
.post-reply:hover, .post-propagate:hover, .post-favorite:hover {
.post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate:hover {
color: #727578;
}
@ -1440,7 +1440,7 @@ button:disabled:hover, button.disabled:hover, .mini-profile-actions span.disable
visibility: hidden;
}
/* line 42, ../sass/_tabs.sass */
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs {
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs, .options input#t-9:checked ~ .tab-content .translation {
position: relative;
z-index: 10;
opacity: 1;

10
theme_nin/sass/_postboard.sass
View File

@ -231,7 +231,7 @@
display: block
.expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite
.post-expand, .post-reply, .post-propagate, .post-favorite, .post-translate
color: lighten($dark-grey,30%)
&:hover
color: lighten($dark-grey,5%)
@ -240,22 +240,22 @@
display: none
margin: 0
.post-reply, .post-propagate, .post-favorite
.post-reply, .post-propagate, .post-favorite, .post-translate
padding-left: 10px
display: none
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite
.post-reply, .post-propagate, .post-favorite, .post-translate
display: inline-block
.open .related
.post-reply, .post-propagate, .post-favorite
.post-reply, .post-propagate, .post-favorite, .post-translate
display: none!important
&:hover
.post-reply, .post-propagate/*, .post-favorite*/
display: inline-block!important
.post-reply:hover, .post-propagate:hover, .post-favorite:hover
.post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate:hover
color: lighten($dark-grey,5%)
.expanded-content

7
theme_nin/sass/_tabs.sass
View File

@ -46,9 +46,10 @@
&#t-3:checked ~ .tab-content .notifications,
&#t-4:checked ~ .tab-content .keys,
&#t-5:checked ~ .tab-content .appearance,
&#t-6:checked ~ .tab-content .users
&#t-7:checked ~ .tab-content .webtorrent
&#t-8:checked ~ .tab-content .DMs
&#t-6:checked ~ .tab-content .users,
&#t-7:checked ~ .tab-content .webtorrent,
&#t-8:checked ~ .tab-content .DMs,
&#t-9:checked ~ .tab-content .translation
position: relative
z-index: 10
opacity: 1

12
theme_nin_night/css/style.css
View File

@ -1015,11 +1015,11 @@ samp {
}
/* line 215, ../sass/_postboard.sass */
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite {
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite, .expanded-post .post-translate {
color: #b3b5b7;
}
/* line 217, ../sass/_postboard.sass */
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover {
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover, .expanded-post .post-translate:hover {
color: #e3bc71;
}
@ -1030,13 +1030,13 @@ samp {
}
/* line 224, ../sass/_postboard.sass */
.post-reply, .post-propagate, .post-favorite {
.post-reply, .post-propagate, .post-favorite, .post-translate {
padding-left: 10px;
display: none;
}
/* line 229, ../sass/_postboard.sass */
.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite {
.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite, .post:hover .post-translate {
display: inline-block;
}
@ -1050,7 +1050,7 @@ samp {
}
/* line 239, ../sass/_postboard.sass */
.post-reply:hover, .post-propagate:hover, .post-favorite:hover {
.post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate:hover {
color: rgba(255, 255, 255, 1)
}
@ -1460,7 +1460,7 @@ button:disabled, button.disabled, .mini-profile-actions span.disabled, a.button.
visibility: hidden;
}
/* line 42, ../sass/_tabs.sass */
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs {
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs, .options input#t-9:checked ~ .tab-content .translation {
position: relative;
z-index: 10;
opacity: 1;

8
theme_nin_original/css/style.css
View File

@ -1999,11 +1999,11 @@ button.light:hover, a.button.light:hover {
.post-interactions span:before {
padding: 3px;
}
.post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate, .post:hover .post-interactions .post-favorite {
.post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate, .post:hover .post-interactions .post-favorite, .post:hover .post-interactions .post-translate {
display: inline-block;
}
.open .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-reply,
.open .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-translate,
.open .related .post-propagate,
#postboard-top .post-area .post-area-new .related .post-propagate,
.mini-profile .post-area-new .related .post-propagate,
@ -2012,7 +2012,7 @@ button.light:hover, a.button.light:hover {
.mini-profile .post-area-new .related .post-favorite {
display: none !important;
}
.open .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply,
.open .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-translate,
.open .related:hover .post-propagate,
#postboard-top .post-area .post-area-new .related:hover .post-propagate,
.mini-profile .post-area-new .related:hover .post-propagate,
@ -2390,7 +2390,7 @@ button.light:hover, a.button.light:hover {
opacity: 0;
visibility: hidden;
}
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs {
.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent, .options input#t-8:checked ~ .tab-content .DMs, .options input#t-9:checked ~ .tab-content .translation {
position: relative;
z-index: 10;
opacity: 1;

4
theme_nin_original/sass/layout/_postboard.sass
View File

@ -265,16 +265,18 @@
@extend .ion-alert
.post:hover &
.post-reply, .post-propagate , .post-favorite
.post-reply, .post-propagate, .post-favorite, .post-translate
display: inline-block
.open .related
.post-translate,
.post-reply,
.post-propagate,
.post-favorite
display: none!important
&:hover
.post-translate,
.post-reply,
.post-propagate,
.post-favorite

3
theme_nin_original/sass/layout/_tabs.sass
View File

@ -51,7 +51,8 @@
&#t-5:checked ~ .tab-content .appearance,
&#t-6:checked ~ .tab-content .users,
&#t-7:checked ~ .tab-content .webtorrent,
&#t-8:checked ~ .tab-content .DMs
&#t-8:checked ~ .tab-content .DMs,
&#t-9:checked ~ .tab-content .translation
position: relative
z-index: 10
opacity: 1