tune 'shorten URL', add related localization

css/style.css

@@ -675,7 +675,6 @@ button.follow:hover, button.unfollow:hover, .following-own-modal .following-list
     border-radius: 3px;
     border: solid 1px rgba(0, 0, 0, .3 );
     margin-left: 55px;
-    margin-bottom: 10px;
     padding: 4px;
     font-size: 13px;
 }
@@ -755,14 +754,13 @@ textarea.splited-post {
     transition: all .6s linear;
 }
 
-.post-area-new .shorten-uri {
+.post-area-new .post-textarea-edit-bar {
     font-size: 11px;
-    float: left;
-    margin: 2px 4px;
+    margin: 2px 0;
 }
 
-.postboard .post-area-new .shorten-uri, .modal-content .post-area-new .shorten-uri {
-    margin-left: 56px;
+.post-area-new .post-textarea-edit-bar > * {
+    margin: 2px 4px;
 }
 
 .post-area-remaining

home.html

@@ -313,6 +313,10 @@
         </div>
     </div>
 
+    <div id="template-post-textarea-edit-bar">
+        <div class="post-textarea-edit-bar"><!-- TODO add buttons to format text --></div>
+    </div>
+
     <div id="template-shorten-uri">
         <a class="shorten-uri">shorten URL</a>
     </div>

js/interface_common.js

@@ -822,7 +822,7 @@ function openRequestShortURIForm(event) {
         return;
     }
 
-    var uri = prompt('enter a link, watch yourself carefully');  // FIXME
+    var uri = prompt(polyglot.t('shorten_URI_enter_link'));  // FIXME replace native prompt
 
     if (event && event.data && typeof event.data.cbFunc === 'function')
         newShortURI(uri, event.data.cbFunc, event.data.cbReq);
@@ -1359,7 +1359,7 @@ function composeNewPost(e, postAreaNew) {
     if (!postAreaNew.hasClass('open')) {
         postAreaNew.addClass('open');
         //se o usuário clicar fora é pra fechar
-        postAreaNew.clickoutside(unfocusThis);
+        postAreaNew.clickoutside(unfocusPostAreaNew);
 
         if ($.Options.splitPosts.val === 'enable')
             usePostSpliting = true;
@@ -1380,21 +1380,26 @@ function composeNewPost(e, postAreaNew) {
     var textArea = postAreaNew.find('textarea');
     if (textArea.attr('data-reply-to') && !textArea.val().length) {
         textArea.val(textArea.attr('data-reply-to'));
-        posPostPreview(textArea);
+        poseTextareaPostTools(textArea);
     }
     if (!postAreaNew.find('textarea:focus').length)
         postAreaNew.find('textarea:last').focus();
 }
 
-function posPostPreview(event) {
+function poseTextareaPostTools(event) {
+    if (event.jquery)
+        var textArea = event;
+    else
+        var textArea = $(event.target);
+
+    posePostPreview(textArea);
+    poseTextareaEditBar(textArea);
+}
+
+function posePostPreview(textArea) {
     if (!$.Options.postPreview.val)
         return;
 
-    if (event.jquery) {
-        var textArea = event;
-    } else {
-        var textArea = $(event.target);
-    }
     var postPreview = textArea.siblings('#post-preview');
     if (!postPreview.length) {
         postPreview = $('#post-preview-template').children().clone()
@@ -1412,10 +1417,23 @@ function posPostPreview(event) {
     textArea.before(postPreview);
 }
 
+function poseTextareaEditBar(textArea) {
+    var editBar = textArea.siblings('.post-textarea-edit-bar');
+    if (!editBar.length) {
+        editBar = twister.tmpl.postTextareaEditBar.clone(true)
+            .css('margin-left', textArea.css('margin-left'))
+            .css('margin-right', textArea.css('margin-right'))
+        ;
+        editBar.find('.shorten-uri').text(polyglot.t('shorten_URI'));
+    }
+    editBar.insertAfter(textArea).show();
+}
+
 // Reduz Área do Novo post
-function unfocusThis() {
-    $(this).removeClass('open')
-        .find('#post-preview').slideUp('fast');
+function unfocusPostAreaNew() {
+    var postAreaNew = $(this).removeClass('open');
+    postAreaNew.find('#post-preview').slideUp('fast');
+    postAreaNew.find('.post-textarea-edit-bar').hide();
 }
 
 function checkPostForMentions(post, mentions, max) {
@@ -2222,10 +2240,10 @@ function initInterfaceCommon() {
     });
     $('.post-area-new')
         .on('click', function(e) {composeNewPost(e, $(this));})
-        .clickoutside(unfocusThis)
+        .clickoutside(unfocusPostAreaNew)
         .children('textarea')
             .on({
-                'focus': posPostPreview,
+                'focus': poseTextareaPostTools,
                 'input': replyTextInput,  // input event fires in modern browsers (IE9+) on any changes in textarea (and copypasting with mouse too)
                 'input focus': replyTextUpdateRemaining,
                 'keyup': replyTextKeySend
@@ -2298,12 +2316,6 @@ function initInterfaceCommon() {
         .on('focus',
             function (event) {
                 twister.focus.textareaPostCur = $(event.target);
-
-                // FIXME that's a hack, need to implement complete toolbar with buttons of text formatting
-                var xtrs = twister.focus.textareaPostCur.siblings('.post-area-extras');
-                if (!xtrs.find('.shorten-uri').length)
-                    xtrs.prepend(twister.tmpl.shortenUri.clone(true));
-
                 if ($.fn.textcomplete) {  // because some pages don't have that. // network.html
                     event.data = {req: getMentionsForAutoComplete};
                     setTextcompleteOnEventTarget(event);
@@ -2447,16 +2459,19 @@ $(document).ready(function () {
             function (event) {
                 muteEvent(event);
 
-                var formPost = $(event.target).closest('.post-area-new');
-                var textArea = formPost.find(twister.focus.textareaPostCur);
-                if (!textArea.length) textArea = formPost.find(twister.focus.textareaPostPrev);
-                if (!textArea.length) textArea = formPost.find('textarea:last');
+                var postAreaNew = $(event.target).closest('.post-area-new');
+                var textArea = postAreaNew.find(twister.focus.textareaPostCur);
+                if (!textArea.length) textArea = postAreaNew.find(twister.focus.textareaPostPrev);
+                if (!textArea.length) textArea = postAreaNew.find('textarea:last');
 
                 event.data.cbReq = textArea;
                 openRequestShortURIForm(event);
             }
         )
     ;
+    twister.tmpl.postTextareaEditBar = extractTemplate('#template-post-textarea-edit-bar')
+        .append(twister.tmpl.shortenUri.clone(true))
+    ;
     twister.tmpl.postRtReference = extractTemplate('#template-post-rt-reference')
         .on('mouseup', {feeder: '.post-rt-reference'}, openConversationClick)
         .on('click', muteEvent)  // to prevent post expanding or collapsing

js/interface_localization.js

@@ -170,6 +170,8 @@ if(preferredLanguage == "en"){
       "send_DM": "Send direct message",
       "Sent Post to @": "Sent Post to @",
       "Setup account": "Setup account",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "The File APIs are not fully supported in this browser.",
       "time_ago": "%{time} ago", // 5 minutes ago
       "Time of the last block:": "Time of the last block: ",
@@ -499,6 +501,8 @@ if(preferredLanguage == "es"){
       "send_DM": "Mensaje directo",
       "Sent Post to @": "El Post enviado a @",
       "Setup account": "Configuración de la cuenta",
+      "shorten_URI": "Acortar URL",
+      "shorten_URI_enter_link": "Introducir el enlace largo (¡ten cuidado!):",
       "The File APIs are not fully supported in this browser.": "Las API de archivos no son totalmente compatibles con este navegador.",
       "time_ago": "hace %{time}", // 5 minutes ago
       "Time of the last block:": "Hora del último bloque: ",
@@ -813,6 +817,8 @@ if(preferredLanguage == "uk"){
       "send_DM": "Надіслати особисте повідомлення",
       "Sent Post to @": "Надіслати твіст @",
       "Setup account": "Обліковий запис",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "File APIs не повністю підтримується браузером.",
       "time_ago": "%{time} тому", // 5 minutes ago
       "Time of the last block:": "Час останнього блоку: ",
@@ -1124,6 +1130,8 @@ if(preferredLanguage == "zh-CN"){
       "send_DM": "发送私信",
       "Sent Post to @": "发送推文 @",
       "Setup account": "设置账号",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "这个浏览器不能完全支持 File API。",
       "time_ago": "%{time} 之前", // 5 minutes ago
       "Time of the last block:": "最新区块的时间：",
@@ -1453,6 +1461,8 @@ if(preferredLanguage == "nl"){
       "send_DM": "Verstuur privébericht",
       "Sent Post to @": "Verstuur bericht naar @",
       "Setup account": "Account instellingen",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "The File APIs are not fully supported in this browser.",
       "time_ago": "%{time} geleden", // 5 minutes ago
       "Time of the last block:": "Tijd van de laatste block: ",
@@ -1766,6 +1776,8 @@ if(preferredLanguage == "it"){
       "send_DM": "Messaggi Diretti inviati",
       "Sent Post to @": "Messaggi inviati a @",
       "Setup account": "Configurazione Utente",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "Le API File non sono interamente supportate da questo browser.",
       "time_ago": "%{time} fa", // 5 minutes ago
       "Time of the last block:": "Orario del blocco più recente: ",
@@ -2077,6 +2089,8 @@ if(preferredLanguage == "fr"){
       "send_DM": "Message privé envoyé",
       "Sent Post to @": "Envoyer un billet à @",
       "Setup account": "Configuration du compte",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "L'API de fichier n'est pas entièrement pris en charge dans votre navigateur.",
       "time_ago": "Il y a %{time}", // 5 minutes ago
       "Time of the last block:": "Heure du dernier bloc: ",
@@ -2392,6 +2406,8 @@ if(preferredLanguage == "ru"){
        "send_DM": "Отправить личное сообщение",
        "Sent Post to @": "Отправить сообщение для @",
        "Setup account": "Настроить аккаунт",
+       "shorten_URI": "Сокр. URL",
+       "shorten_URI_enter_link": "Введи длинную ссылку (очень осторожно!):",
        "The File APIs are not fully supported in this browser.": "File APIs не полностью поддерживается этим браузером.",
        "time_ago": "%{time} назад", // 5 minutes ago
        "Time of the last block:": "Время последнего блока: ",
@@ -2710,6 +2726,8 @@ if(preferredLanguage == "de"){
       "send_DM": "Direktnachricht senden",
       "Sent Post to @": "Sende Post an @",
       "Setup account": "Accounteinstellungen",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "Die File-API's werden von diesem Browser nicht vollständig unterstützt.",
       "time_ago": "vor %{time}", // 5 minutes ago
       "Time of the last block:": "Zeit des letzten Blocks: ",
@@ -3024,6 +3042,8 @@ if(preferredLanguage == "ja"){
       "send_DM": "ダイレクトメッセージを送る",
       "Sent Post to @": "メンションを投稿する",
       "Setup account": "アカウント設定",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "ご使用のブラウザーは完全にファイルAPIに対応していません。",
       "time_ago": "%{time}前", // 5 minutes ago
       "Time of the last block:": "最新ブロックの生成日時: ",
@@ -3336,6 +3356,8 @@ if(preferredLanguage == "pt-BR"){
       "send_DM": "Mensagens Diretas trocadas",
       "Sent Post to @": "Postagens enviadas para @",
       "Setup account": "Configurar conta",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "O gerenciamento de arquivos não é completamente suportado neste navegador.",
       "time_ago": "%{time} atrás", // 5 minutes ago
       "Time of the last block:": "Horário do último bloco: ",
@@ -3650,6 +3672,8 @@ if(preferredLanguage == "tr"){
       "send_DM": "Direk Mesaj Gönder",
       "Sent Post to @": "@ Kullanıcıya Gönder",
       "Setup account": "Hesap ayarları",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "Dosya API'si tarayıcınızda tam olarak desteklenmiyor.",
       "time_ago": "%{time} önce", // 5 minutes ago
       "Time of the last block:": "Son blok saati: ",
@@ -3963,6 +3987,8 @@ if(preferredLanguage == "cs"){
       "send_DM": "Poslat přímou zprávu",
       "Sent Post to @": "Poslat veřejný příspěvek pro @",
       "Setup account": "Upravit profil",
+      "shorten_URI": "Shorten URL",
+      "shorten_URI_enter_link": "Enter the long link (be careful!):",
       "The File APIs are not fully supported in this browser.": "Upozornění: váš webový prohlížeč nepodporuje File API.",
       "time_ago": "před %{time}", // 5 minutes ago
       "Time of the last block:": "Čas posledního bloku: ",

js/tmobile.js

@@ -26,7 +26,7 @@ function initializeTwister( redirectNetwork, redirectLogin, cbFunc, cbArg ) {
         // reply text counter both newmsg and dmchat
         $('.post-area-new textarea')
             .off('input keyup')
-            .on('focus', posPostPreview)
+            .on('focus', poseTextareaPostTools)
             .on('keyup', replyTextInput)
             .on('keyup', function() { replyTextUpdateRemaining(this); })
         ;

network.html

@@ -251,6 +251,10 @@
         </div>
     </div>
 
+    <div id="template-post-textarea-edit-bar">
+        <div class="post-textarea-edit-bar"></div>
+    </div>
+
     <div id="template-shorten-uri">
         <a class="shorten-uri">shorten URL</a>
     </div>

theme_calm/css/style.css

@@ -796,7 +796,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     border-radius: 3px;
     border: solid 1px rgba(0, 0, 0, .3 );
     margin-left: 55px;
-    margin-bottom: 10px;
     padding: 4px;
     font-size: 13px;
 }
@@ -928,14 +927,13 @@ textarea.splited-post {
     transition: all .6s linear;
 }
 
-.post-area-new .shorten-uri {
+.post-area-new .post-textarea-edit-bar {
     font-size: 11px;
-    float: left;
-    margin: 2px 4px;
+    margin: 2px 0;
 }
 
-.postboard .post-area-new .shorten-uri, .modal-content .post-area-new .shorten-uri {
-    margin-left: 56px;
+.post-area-new .post-textarea-edit-bar > * {
+    margin: 2px 4px;
 }
 
 .post-area-remaining

theme_nin/css/style.css

@@ -2077,9 +2077,12 @@ textarea.splited-post {
   transition: all 0.6s linear;
 }
 
-.post-area-new .shorten-uri {
+.post-area-new .post-textarea-edit-bar {
     font-size: 11px;
-    float: left;
+    margin: 2px 0;
+}
+
+.post-area-new .post-textarea-edit-bar > * {
     margin: 2px 4px;
 }
 

tmobile.html

@@ -76,6 +76,16 @@
   .content {padding:15px 20px 20px 20px;}
   .footer {position:fixed;z-index:10;bottom:0;width:100%}
 
+.post-textarea-edit-bar {
+    font-weight: lighter;
+    font-size: 12px;
+    margin: 2px 0;
+}
+
+.post-area-new .post-textarea-edit-bar > * {
+    margin: 2px 4px;
+}
+
 .post-info-time {
     font-weight: lighter;
     font-size: 12px;
@@ -756,6 +766,10 @@
         </div>
     </div>
 
+    <div id="template-post-textarea-edit-bar">
+        <div class="post-textarea-edit-bar"></div>
+    </div>
+
     <div id="template-shorten-uri">
         <a class="shorten-uri">shorten URL</a>
     </div>