Merge pull request #276 from slr/tasty-markdown

post preview

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;

following.html

@@ -206,6 +206,12 @@
     <li class="ancestor module post">
     </li>
 
+    <div id="post-preview-template">
+        <div id="post-preview">
+        </div>
+    </div>
+
+
     <li id="post-template" class="module post" data-time="">
         <div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
              data-screen-name="" data-id="" data-text="" data-text-mentions="">

home.html

@@ -298,6 +298,11 @@
     <li class="ancestor module post">
     </li>
 
+    <div id="post-preview-template">
+        <div id="post-preview">
+        </div>
+    </div>
+
     <li id="post-template" class="module post" data-time="">
         <div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
              data-screen-name="" data-id="" data-text="" data-text-mentions="">

js/interface_common.js

@@ -573,11 +573,34 @@ 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();
 }
 
+function posPostPreview(event) {
+    if (!$.Options.postPreview.val)
+        return;
+
+    var textArea = $(event.target);
+    var postPreview = textArea.siblings('#post-preview');
+    if (!postPreview.length) {
+        postPreview = $('#post-preview-template').children().clone()
+            .css('margin-left', textArea.css('margin-left'))
+            .css('margin-right', textArea.css('margin-right'))
+        ;
+        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'));
+    }
+    if (textArea[0].value.length)
+        postPreview.html(htmlFormatMsg(textArea[0].value, [])).show();
+    else
+        postPreview.hide();
+    textArea.before(postPreview);
+}
+
 // Reduz Área do Novo post
 function unfocusThis() {
     $(this).removeClass('open');
@@ -680,6 +703,11 @@ function replyTextInput(event) {
                 textArea.caret(caretPos);
             }
         }
+
+        if (textArea[0].value.length)
+            textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, [])).show();
+        else
+            textAreaForm.find('#post-preview').html('').hide();
     }
 
     function getPostSplitingPML() {
@@ -1196,6 +1224,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');
@@ -1372,6 +1402,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

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": "Переходы на новую строку",
@@ -2468,6 +2476,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",
@@ -2743,6 +2752,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",
@@ -3024,6 +3034,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",
@@ -3292,6 +3303,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ı",
@@ -3577,6 +3589,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",

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',

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

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('');

js/twister_formatpost.js

@@ -196,7 +196,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;

options.html

@@ -374,6 +374,9 @@
         <div class="post-editor">
           <div class="module">
             <p class="label label-h"> Post editor </p>
+            <div class="container">
+                <p><span class="label">Post preview</span> <input type="checkbox" id="optPostPreview" /></p>
+            </div>
             <div class="container">
               <form action="" id="unicodeConversionOpt">
                 <p class="label">Automatic unicode conversion options</p>

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
 {

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

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

tmobile.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
-<html> 
+<html>
-<head> 
+<head>
-  <meta charset="utf-8" /> 
+  <meta charset="utf-8" />
 
   <title>twister mobile</title>
-  
+
   <meta name="viewport" content="width=device-width, user-scalable=no"/>
 
   <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
@@ -38,8 +38,8 @@
     <script src="js/jpeg_encoder_basic.js"></script>
 
   <link rel="icon" type="image/png" href="img/twister_mini.png" />
-</head> 
+</head>
-<body> 
+<body>
 
 <style>
   .ui-li-heading { margin: 0em 0 0.6em 0; }
@@ -61,22 +61,22 @@
   }
   img.size24 {width: 24px; height: 24px;}
   #profile-edit img.avatar {display:block; margin-left: auto; margin-right: auto; width: 64px; height: 64px;}
- 
+
   .ui-listview .post a{ color: #0030ff; }
-  
+
   #post li.original { background: #fff; /*top:5px; border-width:5px !important;*/}
   #post li.related .post-interactions { display:none; }
-  
+
   #new-user-modal .text { margin: 0 0 15px 0; }
   #new-user-modal .emphasis { font-size: 18px; text-align: center; }
   #new-user-modal .secret-key { font-weight: bold; word-break:break-all; }
   #profile-edit .secret-key { word-break:break-all; }
-  
+
   .header {position:fixed;z-index:10;top:0;width:100%}
   .content {padding:15px 20px 20px 20px;}
   .footer {position:fixed;z-index:10;bottom:0;width:100%}
 }
-  
+
 </style>
 
 <div id="index" data-role="page">
@@ -94,7 +94,7 @@
     <h1 class="rtitle">twister login</h1>
   </div>
 
-  <div class="content" data-role="content" style="">  
+  <div class="content" data-role="content" style="">
     <div class="login">
       <div class="module">
         <span> Existing local users </span>
@@ -143,7 +143,7 @@
     </div>
 
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -153,7 +153,7 @@
 </div>
 
 <div id="home" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
     <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
     <a data-role="button" data-icon="refresh" class="timeline-refresh" rel="external">
@@ -164,19 +164,19 @@
         @
     </a>
     </div>
-    
+
     <h1 class="rtitle"></h1>
 
     <a href="#newmsg" class="ui-btn-right" style="">New post</a>
   </div>
 
-  <div class="content" data-role="content">  
+  <div class="content" data-role="content">
     <div class="timeline">
        <ul class="posts" data-role="listview">
        </ul>
     </div>
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#login" data-role="button">Login</a>
     <a href="#network" data-role="button">Network</a>
@@ -186,7 +186,7 @@
 </div>
 
 <div id="post" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
     <a href="#search" class="ui-btn-left" style="">Search</a>
     <h1 class="rtitle">twister</h1>
@@ -197,7 +197,7 @@
     <ul class="posts" data-role="listview">
     </ul>
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -208,7 +208,7 @@
 
 
 <div id="mentions" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
     <a href="#search" class="ui-btn-left" style="">Search</a>
     <h1 class="rtitle"></h1>
@@ -219,7 +219,7 @@
     <ul class="posts" data-role="listview">
     </ul>
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -229,7 +229,7 @@
 </div>
 
 <div id="hashtag" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
     <a href="#search" class="ui-btn-left" style="">Search</a>
     <h1 class="rtitle"></h1>
@@ -240,7 +240,7 @@
     <ul class="posts" data-role="listview">
     </ul>
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -252,16 +252,16 @@
 
 
 <div id="newmsg" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
     <h1 class="rtitle">New post</h1>
   </div>
 
   <div class="content" data-role="content">
-  
+
     <div class="tbox" style="">
       <div style="padding-left:5px; width:300px; margin-bottom: 30px;">
-      
+
         <form class="post-area-new open">
           <textarea placeholder="New Post..." style="height:85px; width:270px;"></textarea>
           <div class="post-area-extras">
@@ -277,7 +277,7 @@
       </ul>
     </div>
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -317,7 +317,7 @@
 
 
 <div id="profile" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
     <a href="#search" class="ui-btn-left" style="">Search</a>
     <h1 class="rtitle">Profile</h1>
@@ -325,7 +325,7 @@
   </div>
 
   <div class="content" data-role="content">
-  
+
      <div class="profile-card" data-screen-name="">
        <!-- Coloquei a imagem de fundo do card do usuário como background da div
             abaixo inline na tag para poder ser alterada dinamicamente
@@ -351,7 +351,7 @@
        <a data-role="button" data-mini="true" class="mentions-from-user" href="#mentions">Mentions</a>
        <div>&nbsp;</div>
     </div>
-    
+
     <div>
         <ul class="posts postboard-posts" data-role="listview">
         </ul>
@@ -367,7 +367,7 @@
 </div>
 
 <div id="profile-edit" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
     <a href="#login" class="ui-btn-left" style="">Login</a>
     <h1 class="rtitle">Edit profile</h1>
@@ -407,7 +407,7 @@
 
 
 <div id="following" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
     <a href="#search" class="ui-btn-left" style="">Search</a>
     <h1 class="rtitle">Following</h1>
@@ -455,7 +455,7 @@
 
 
 <div id="network" data-role="page">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
     <a href="#login" class="ui-btn-left" style="">Login</a>
     <h1 class="rtitle">twister</h1>
@@ -475,7 +475,7 @@
            <div>&nbsp;</div>
         </ul>
         <button class="terminate-daemon">Terminate Daemon</button>
-        
+
         <h3> Detailed information </h3>
         <ul>
           <li class="connections">
@@ -550,7 +550,7 @@
     </div>
 
   </div>
-    
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -564,11 +564,11 @@
     <h1 class="rtitle">Direct Messages</h1>
   </div>
 
-  <div class="content" data-role="content">  
+  <div class="content" data-role="content">
     <ul class="direct-messages-thread" data-role="listview">
     </ul>
   </div>
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -585,7 +585,7 @@
   <div class="content" data-role="content">
     <ul class="direct-messages-list" data-role="listview">
     </ul>
-    
+
     <div class="dm-form" style="padding:15px 20px 20px 20px;">
       <form class="post-area-new open">
         <textarea placeholder="New direct message..."></textarea>
@@ -596,8 +596,8 @@
       </form>
     </div>
   </div>
-  
+
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -629,8 +629,8 @@
         </ul>
     </div>
   </div>
-  
+
-  
+
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
     <a href="#home" data-role="button">Home</a>
     <a href="#network" data-role="button">Network</a>
@@ -650,7 +650,7 @@
             Please do not close this window, this might take a few minutes.
         </div>
         <div class="text emphasis">
-            Your secret key is: 
+            Your secret key is:
             <div class="secret-key"></div>
         </div>
         <div class="text">
@@ -676,25 +676,25 @@
 
 
 <div id="dialog_page" data-role="page" style="background:gray;">
-    
+
   <div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
     <a class="back-btn" href="#home" data-icon="arrow-l" data-rel="back">Back</a>
-    
+
     <h1 class="page-title"></h1>
   </div>
 
   <div class="content" data-role="content" style="">
-  
+
     <div class="ui-body-c" style="padding:10px; border-radius: 10px;">
       <div class="dialog-title" style="font-size: 105%; font-weight:bold; margin-bottom:10px; text-align:center;"></div>
       <div class="dialog-description" style="width:100%; margin-bottom:20px; text-align:center;"></div>
-    
+
       <div class="dialog-buttons" style="width:100%;"></div>
     </div>
   </div>
   <div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
-    <a href="#" data-role="button" class="logoutButton">Logout</a>    
+    <a href="#" data-role="button" class="logoutButton">Logout</a>
-  </div>  
+  </div>
 </div>
 
 <div id="anywhere"></div>
@@ -717,7 +717,12 @@
             </div>
         </div>
     </li> <!-- post-template -->
-    
+
+    <div id="post-preview-template">
+        <div id="post-preview">
+        </div>
+    </div>
+
     <li id="post-template-post" class="module post" data-time="">
         <img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
         <div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
@@ -755,20 +760,20 @@
             </div> <!-- expanded-content -->
         </div> <!-- post-data -->
     </li> <!-- post-template -->
-    
+
-    
+
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>
     <!-- template for user links in message (open profile modal) -->
     <a id="external-page-link-template" rel="nofollow" target="_blank"></a>
     <!-- template for user links in message (open profile modal) -->
     <a id="hashtag-link-template" class="open-hashtag-modal"></a>
-    
+
     <!-- template para ir dentro de avatar-row -->
     <a id="avatar-row-template" class="open-profile-modal" href="">
        <img class="avatar size24" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
     </a>
-    
+
     <!-- template for dm-snippet (dm threads list)  -->
     <li id="dm-snippet-template" class="module post message" data-icon="arrow-r">
       <a class="dm-chat-link post-photo" href="#dmchat">
@@ -782,7 +787,7 @@
         <p class="post-text"></p>
       </a>
     </li>
-    
+
     <!-- template for each dm (chat window) -->
     <li id="dm-chat-template" class="module post message">
       <h4 class="post-photo">
@@ -791,9 +796,9 @@
       </h4>
       <p class="post-text no-ellipsis"></p>
     </li>
-    
+
 </div> <!-- templates -->
 
 
-</body> 
+</body>
-</html> 
+</html>