From 3b696e336ab8517e92d750a93268c2be5f2eb26b Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Fri, 24 Jul 2015 00:51:24 +0500 Subject: [PATCH 1/8] initial very basic post preview --- following.html | 6 ++ home.html | 5 ++ js/interface_common.js | 12 ++++ js/tmobile.js | 1 + tmobile.html | 121 +++++++++++++++++++++-------------------- 5 files changed, 87 insertions(+), 58 deletions(-) diff --git a/following.html b/following.html index 0122525..ab4f61e 100644 --- a/following.html +++ b/following.html @@ -206,6 +206,12 @@
    • +
    +
    +
    +
    + +
  • diff --git a/home.html b/home.html index b9ac963..c06955c 100644 --- a/home.html +++ b/home.html @@ -298,6 +298,11 @@
    • +
    +
    +
    +
    +
  • diff --git a/js/interface_common.js b/js/interface_common.js index 6d08428..d0a5b7e 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -578,6 +578,15 @@ function composeNewPost(e, postAreaNew) { postAreaNew.find('textarea:last').focus(); } +function posPostPreview(event) { + var textArea = $(event.target); + var postPreview = textArea.siblings('#post-preview'); + if (!postPreview.length) + postPreview = $('#post-preview-template').children().clone(); + postPreview.html(htmlFormatMsg(textArea[0].value, [])) + textArea.before(postPreview); +} + // Reduz Área do Novo post function unfocusThis() { $(this).removeClass('open'); @@ -680,6 +689,8 @@ function replyTextInput(event) { textArea.caret(caretPos); } } + + textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, [])); } function getPostSplitingPML() { @@ -1372,6 +1383,7 @@ function initInterfaceCommon() { .clickoutside(unfocusThis) .children('textarea') .on({ + 'focus': posPostPreview, 'input': replyTextInput, // input event fires in modern browsers (IE9+) on any changes in textarea (and copypasting with mouse too) 'input focus': replyTextUpdateRemaining, 'keyup': replyTextKeySend diff --git a/js/tmobile.js b/js/tmobile.js index dfd6c89..32603a6 100644 --- a/js/tmobile.js +++ b/js/tmobile.js @@ -26,6 +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('keyup', replyTextInput) .on('keyup', function() { replyTextUpdateRemaining(this); }) ; diff --git a/tmobile.html b/tmobile.html index 7b63760..6a7699b 100644 --- a/tmobile.html +++ b/tmobile.html @@ -1,12 +1,12 @@ - - - + + + twister mobile - + @@ -38,8 +38,8 @@ - - + +
    @@ -94,7 +94,7 @@

    twister login

    -
    +
    - +
    Home Network @@ -153,7 +153,7 @@
    - +
    @@ -164,19 +164,19 @@ @
    - +

    New post
    -
    +
    - +
    Login Network @@ -186,7 +186,7 @@
    - +
    Search

    twister

    @@ -197,7 +197,7 @@
    - +
    Home Network @@ -208,7 +208,7 @@
    - +
    Search

    @@ -219,7 +219,7 @@
    - +
    Home Network @@ -229,7 +229,7 @@
    - +
    Search

    @@ -240,7 +240,7 @@
    - +
    Home Network @@ -252,16 +252,16 @@
    - +

    New post

    - +
    - +
    @@ -277,7 +277,7 @@
    - +
    Home Network @@ -317,7 +317,7 @@
    - +
    Search

    Profile

    @@ -325,7 +325,7 @@
    - +
    - + +
    +
    +
    +
    +
  • user-photo
    • - - + + - + user-photo - +
  • @@ -782,7 +787,7 @@

    • - +

  • @@ -791,9 +796,9 @@

    • - + - - + + From c93d410c0063cd5b3fd9a43955ed690feeb2fb2e Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 02:18:03 +0500 Subject: [PATCH 2/8] CSS rules for posts preview --- css/style.css | 14 ++++++++++++- theme_calm/css/style.css | 43 +++++++++++++++++++++++++++++++-------- theme_nin/css/style.css | 16 +++++++++++++++ theme_nin/sass/style.sass | 11 ++++++++++ 4 files changed, 75 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 4611ee1..27ad9f1 100644 --- a/css/style.css +++ b/css/style.css @@ -626,7 +626,6 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover padding: 4px; font-size: 13px; } - .post-area-new textarea:focus { border: solid 1px rgba( 227, 79, 66, .5 ); } @@ -648,6 +647,19 @@ textarea.splited-post { box-shadow: none!important; height: 28px; } + +#post-preview { + background-color: #F2FFBA; + border: solid 1px #B4C669; + font-size: 11px; + margin: 4px 0; + padding: 4px; +} + +#post-preview a { + color: #E34F42; +} + .splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 9d9fb55..6183598 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -776,6 +776,15 @@ textarea.splited-post { box-shadow: none!important; height: 28px; } + +#post-preview { + background-color: #F2FFBA; + border: solid 1px #B4C669; + font-size: 11px; + margin: 4px 0; + padding: 4px; +} + .splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; @@ -1252,8 +1261,9 @@ textarea.splited-post { { color: #76b2ce; } + /* external http links */ -.post-text a[href^="http"] { +.post-text a[href^="http"], #post-preview a[href^="http"] { font: italic 13px "Open Sans", sans-serif; text-decoration: none; color: #b46e67; @@ -1263,11 +1273,13 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.post-text a[href^="http"]:hover{ + +.post-text a[href^="http"]:hover, #post-preview a[href^="http"]:hover { color: #e18881; opacity: .8; } -.post-text a[href^="http"]:after { + +.post-text a[href^="http"]:after, #post-preview a[href^="http"]:after { content: ''; display: inline-block; position: relative; @@ -1284,10 +1296,13 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.post-text a[href^="http"]:hover:after { + +.post-text a[href^="http"]:hover:after, #post-preview a[href^="http"]:hover:after { opacity: .8; } -.post-text a[href^="#profile"], .follow-suggestions a[href^="#profile"] { + +.post-text a[href^="#profile"], .follow-suggestions a[href^="#profile"], +#post-preview a[href^="#profile"] { color: #5e8da4; text-decoration: none; -webkit-transition: all 200ms; @@ -1296,10 +1311,18 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.post-text a[href^="#profile"]:hover, .follow-suggestions a[href^="#profile"]:hover { + +.post-text a[href^="#profile"]:hover, .follow-suggestions a[href^="#profile"]:hover, +#post-preview a[href^="#profile"]:hover { color: #76b2ce; } -.toptrends-list a[href^="#hashtag"], .post-text a[href^="#hashtag"]{ + +#post-preview a { + font-size: 11px; +} + +.toptrends-list a[href^="#hashtag"], .post-text a[href^="#hashtag"], +#post-preview a[href^="#hashtag"] { color: #5e72a4; text-decoration: none; -webkit-transition: all 200ms; @@ -1308,7 +1331,9 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.toptrends-list a[href^="#hashtag"]:hover, .post-text a[href^="#hashtag"]:hover{ + +.toptrends-list a[href^="#hashtag"]:hover, .post-text a[href^="#hashtag"]:hover, +#post-preview a[href^="#hashtag"]:hover { color: #768fce; } @@ -1320,10 +1345,12 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } + .post-info a[href^="#profile"]:hover, .followers a[href^="#profile"]:hover, a[href^="#profile"].post-retransmited-by:hover { color: #5e8da4; text-decoration: none; } + /* Inpost previw */ .preview-container { diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 3928b1a..c5e3673 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -2270,6 +2270,22 @@ textarea.splited-post { height: 28px; } +#post-preview { + background-color: #FCFFF3; + border: solid 1px #ECEFE3; + font-size: 12px; + margin: 4px 0; + padding: 4px; +} + +#post-preview a { + color: #AAA; +} + +#post-preview a:hover { + color: #B4C669; +} + /* line 384, ../sass/style.sass */ .splited-post-counter { color: rgba(0, 0, 0, 0.3); diff --git a/theme_nin/sass/style.sass b/theme_nin/sass/style.sass index 79aa579..094055f 100755 --- a/theme_nin/sass/style.sass +++ b/theme_nin/sass/style.sass @@ -354,6 +354,17 @@ ul.userMenu-search-profiles &:focus border-bottom: solid 2px $color-green +#post-preview + background-color: #FCFFF3 + border: solid 1px #ECEFE3 + font-size: 12px + margin: 4px 0 + padding: 4px + a + color: #AAA + a:hover + color: $color-green + #postboard-top clear: both position: relative From 4e7e09456f3cfd514e36b178b201a32808d01535 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 02:19:52 +0500 Subject: [PATCH 3/8] dynamic width and margin for post preview, some other fixes --- js/interface_common.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/js/interface_common.js b/js/interface_common.js index d0a5b7e..b0b28f4 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -581,9 +581,15 @@ function composeNewPost(e, postAreaNew) { function posPostPreview(event) { var textArea = $(event.target); var postPreview = textArea.siblings('#post-preview'); - if (!postPreview.length) - postPreview = $('#post-preview-template').children().clone(); - postPreview.html(htmlFormatMsg(textArea[0].value, [])) + if (!postPreview.length) { + postPreview = $('#post-preview-template').children().clone() + .css('margin-left', textArea.css('margin-left')) + .css('margin-right', textArea.css('margin-right')) + ; + postPreview.css('width', textArea.css('width') + - postPreview.css('padding-left') - postPreview.css('padding-right')); + } + postPreview.html(htmlFormatMsg(textArea[0].value, [])).show(); textArea.before(postPreview); } @@ -1207,6 +1213,8 @@ function postSubmit(e, oldLastPostId) { var $replyText = $this.closest('.post-area-new').find('textarea'); + $replyText.siblings('#post-preview').hide(); + var $postOrig = $this.closest('.post-data'); if (!$postOrig.length) { $postOrig = $this.closest('.modal-content').find('.post-data'); From e95f745d93edf8c400e339248c0d3b991cdc91b7 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 02:48:19 +0500 Subject: [PATCH 4/8] add checkbox to #options to enable/disable *post preview* --- js/interface_common.js | 3 +++ js/interface_localization.js | 13 +++++++++++++ js/options.js | 8 +++++++- options.html | 3 +++ 4 files changed, 26 insertions(+), 1 deletion(-) diff --git a/js/interface_common.js b/js/interface_common.js index b0b28f4..7720ef4 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -579,6 +579,9 @@ function composeNewPost(e, postAreaNew) { } function posPostPreview(event) { + if (!$.Options.postPreview.val) + return; + var textArea = $(event.target); var postPreview = textArea.siblings('#post-preview'); if (!postPreview.length) { diff --git a/js/interface_localization.js b/js/interface_localization.js index d2ea970..33d71e0 100644 --- a/js/interface_localization.js +++ b/js/interface_localization.js @@ -207,6 +207,7 @@ if(preferredLanguage == "en"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -501,6 +502,7 @@ if(preferredLanguage == "es"){ "Send key": "Send key", "Posts display": "Presentación de mensajes", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Vista previa de imágenes en línea", "Display": "Mostrar", "Line feeds": "Avances de línea", @@ -776,6 +778,7 @@ if(preferredLanguage == "uk"){ "Send key": "Надсилання твістів", "Posts display": "Відображення твістів", "Post editor": "Редактор твістів", + "Post preview": "Post preview", "Inline image preview": "Контекстний перегляд зображення", "Display": "Відображати", "Line feeds": "Line feeds", @@ -1055,6 +1058,7 @@ if(preferredLanguage == "zh-CN"){ "Send key": "发送键", "Posts display": "推文显示", "Post editor": "信息编辑器", + "Post preview": "Post preview", "Inline image preview": "内嵌图像预览", "Display": "显示", "Line feeds": "Line feeds", @@ -1350,6 +1354,7 @@ if(preferredLanguage == "nl"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -1625,6 +1630,7 @@ if(preferredLanguage == "it"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -1903,6 +1909,7 @@ if(preferredLanguage == "fr"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -2183,6 +2190,7 @@ if(preferredLanguage == "ru"){ "Send key": "Отправка сообщения", "Posts display": "Отображение сообщений", "Post editor": "Редактор сообщения", + "Post preview": "Предпросмотр сообщений", "Inline image preview": "Предпросмотр изображений", "Display": "Показывать", "Line feeds": "Переходы на новую строку", @@ -2467,6 +2475,7 @@ if(preferredLanguage == "de"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Nachrichten-Editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -2742,6 +2751,7 @@ if(preferredLanguage == "ja"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -3023,6 +3033,7 @@ if(preferredLanguage == "pt-BR"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -3291,6 +3302,7 @@ if(preferredLanguage == "tr"){ "Send key": "Gönderme tuşu", "Posts display": "Gönderiler", "Post editor": "Gönderi düzenleyici", + "Post preview": "Post preview", "Inline image preview": "Dahili resim ön izleme", "Display": "Göster", "Line feeds": "Satır sonları", @@ -3576,6 +3588,7 @@ if(preferredLanguage == "cs"){ "Send key": "Klávesa pro odeslání", "Posts display": "Zobrazení příspěvků", "Post editor": "Editor příspěvků", + "Post preview": "Post preview", "Inline image preview": "Náhled vložených obrázků", "Display": "Zobrazit", "Line feeds": "Nové řádky", diff --git a/js/options.js b/js/options.js index 99c6f65..936c5f1 100644 --- a/js/options.js +++ b/js/options.js @@ -142,9 +142,15 @@ function twisterOptions() { valDefault: 'apply' }); this.add({ - name: 'displayPreview', + name: 'displayPreview', // it's inline image preview // FIXME we need some mechanism to rename options safely valDefault: 'disable' }); + this.add({ + name: 'postPreview', + selector: '#optPostPreview', + type: 'checkbox', + valDefault: true + }); this.add({ name: 'unicodeConversion', valDefault: 'disable', diff --git a/options.html b/options.html index 22b6a97..be7a2f6 100644 --- a/options.html +++ b/options.html @@ -374,6 +374,9 @@

    Post editor

    +
    +

    Post preview

    +

    Automatic unicode conversion options

    From d123c3838cec9dafe2680dfbb6383609492518cc Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 03:19:12 +0500 Subject: [PATCH 5/8] fix of dynamic width for post preview --- js/interface_common.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/interface_common.js b/js/interface_common.js index 7720ef4..49e2b17 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -589,7 +589,8 @@ function posPostPreview(event) { .css('margin-left', textArea.css('margin-left')) .css('margin-right', textArea.css('margin-right')) ; - postPreview.css('width', textArea.css('width') + postPreview.width(textArea.width()); + postPreview.width(postPreview.width() // width is not accurate if we do it with textArea.width() directly, don't know why - postPreview.css('padding-left') - postPreview.css('padding-right')); } postPreview.html(htmlFormatMsg(textArea[0].value, [])).show(); From fe0a1e1d501d21430703382305afec0987dfb619 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 04:13:53 +0500 Subject: [PATCH 6/8] hide post preview if textarea is empty --- js/interface_common.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/js/interface_common.js b/js/interface_common.js index 49e2b17..40252a5 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -573,6 +573,7 @@ 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(e); } if (!postAreaNew.find('textarea:focus').length) postAreaNew.find('textarea:last').focus(); @@ -593,7 +594,10 @@ function posPostPreview(event) { postPreview.width(postPreview.width() // width is not accurate if we do it with textArea.width() directly, don't know why - postPreview.css('padding-left') - postPreview.css('padding-right')); } - postPreview.html(htmlFormatMsg(textArea[0].value, [])).show(); + if (textArea[0].value.length) + postPreview.html(htmlFormatMsg(textArea[0].value, [])).show(); + else + postPreview.hide(); textArea.before(postPreview); } @@ -700,7 +704,10 @@ function replyTextInput(event) { } } - textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, [])); + if (textArea[0].value.length) + textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, [])).show(); + else + textAreaForm.find('#post-preview').html('').hide(); } function getPostSplitingPML() { From b3a281a6934a14ff986b9e6e6e87510a5755cb3a Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 12:00:32 +0500 Subject: [PATCH 7/8] fix missing argument in htmlFormatMsg() call on DM snippet show --- js/twister_formatpost.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 42de19b..393d285 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -194,7 +194,7 @@ function dmDataToSnippetItem(dmData, remoteUser) { getGroupChatName( remoteUser, dmItem.find("a.post-info-name") ); else getFullname( remoteUser, dmItem.find("a.post-info-name") ); - dmItem.find(".post-text").html(htmlFormatMsg(dmData.text)); + dmItem.find(".post-text").html(htmlFormatMsg(dmData.text, [])); dmItem.find(".post-info-time").text(timeGmtToText(dmData.time)).attr("title",timeSincePost(dmData.time)); return dmItem; From 27256788edccd4c8ad7b08f8d6d3fc9d4758519b Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 25 Jul 2015 12:16:18 +0500 Subject: [PATCH 8/8] add hide post preview in directMsgSubmit() too --- js/twister_directmsg.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/twister_directmsg.js b/js/twister_directmsg.js index f60f6aa..8748bf5 100644 --- a/js/twister_directmsg.js +++ b/js/twister_directmsg.js @@ -94,6 +94,8 @@ function directMsgSubmit(e) { var replyText = $(this).closest('.post-area-new').find('textarea'); + replyText.siblings('#post-preview').hide(); + newDirectMsg(replyText.val(), $('.directMessages').attr('data-dm-screen-name')); replyText.val('');