implement optional posts translation API

css/style.css

@@ -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

home.html

@@ -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>

js/interface_common.js

@@ -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);

js/options.js

@@ -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) {

options.html

@@ -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 -->

theme_calm/css/style.css

@@ -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

theme_nin/css/style.css

@@ -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;

theme_nin/sass/_postboard.sass

@@ -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

theme_nin/sass/_tabs.sass

@@ -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

theme_nin_night/css/style.css

@@ -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;

theme_nin_original/css/style.css

@@ -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;

theme_nin_original/sass/layout/_postboard.sass

@@ -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

theme_nin_original/sass/layout/_tabs.sass

@@ -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