images preview

images preview, fixes

css/style.css

@@ -1252,6 +1252,22 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     display: none;
     padding: 5px 5px 0 5px;
 }
+.image-preview
+{
+    max-height: 500px;
+    width: 100%;
+}
+.preview-container
+{
+    height: 100px;
+    width: 95%;
+    margin: 0 auto;
+    overflow: hidden;
+    display: none;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}
 .post-stats
 {
     margin: 0 10px 0 55px;
@@ -1405,14 +1421,14 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 /*************************************
 **************************** LOGIN PAGE
 **************************************/
-.login .module, .sounds .module, .keys .module, .language .module {
+.login .module, .optionsPage .module {
     padding: 20px;
     width: 500px;
     margin: 10px auto;
     border: 3px solid #c7cdda;
     border-radius: 6px;
 }
-.login .module p, .sounds .module p, .keys .module p, .language .module p {
+.login .module p, .optionsPage .module p{
     font: 14px "Open Sans", sans-serif;
     margin-bottom: 5px;
 
@@ -1429,7 +1445,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     background: #fff;
     transition: background-color 100ms linear;
 }
-.login .module select.local-usernames, .sndOpt, #keysOpt select, #selectLanguage select, #selectTheme select {
+.login .module select, .optionsPage select{
     height: 30px;
     font: 13px/24px "Open sans";
     text-align: center;
@@ -1909,8 +1925,13 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     margin-right: -163px;
     font: 12px "Open Sans", sans-serif;
 }
-#notifyForm p, #selectLanguage p, #keysOpt p {
-    margin-top: 15px;
+.optionsPage .module h1 {
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+.optionsPage .module h2 {
+    margin-top: 10px;
+    font-size: 11px;
 }
 /* Following page */
 .following ol.following-list > li{

home.html

@@ -26,7 +26,6 @@
     <script src="js/interface_common.js"></script>
     <script src="js/interface_home.js"></script>
     <script src="js/jquery.animate-colors-min.js"></script>
-    <script src="js/ZeroClipboard.min.js"></script>
     <script src="js/jquery.textcomplete.js"></script>
     <script src="js/calm.js"></script>
     <script src="js/options.js"></script>
@@ -288,6 +287,8 @@
                 <a class="post-info-time"></a>
             </div>
             <p class="post-text"></p>
+            <div class="preview-container"></div>
+            <div style="clearfix:both"></div>
             <div class="post-context" style="display: none;">
                 <i class="post-retransmited-icon"></i>
                 <span>twisted again by</span>
@@ -433,9 +434,13 @@
                  style="background: url(img/imgBack.png) no-repeat center center;"-->
             <div class="profile-card-main">
               <img class="profile-card-photo" src="img/grayed_avatar_placeholder_24.png"/>
-              <h1 class="profile-name"></h1><br>
-              <h2 class="profile-screen-name">@<b></b></h2><br>
-              <span class="profile-location"></span><br>
+              <h1 class="profile-name"></h1>
+              <div>
+                <h2 class="profile-screen-name">@<b></b></h2>
+              </div>
+              <div>
+                <span class="profile-location"></span>
+              </div>
               <a class="profile-url" rel="nofollow" target="_blank"></a>
               <div class="profile-bio"></div>
               <div id="msngrswr">

jquery-emotions/jquery.emotions.calm.css

@@ -15,7 +15,7 @@
 .emo-beer {
     background: url("emotions/calm/beer.png");
     width: 36px;
-    height: 22px;
+    height: 23px;
 }
 .emo-confused {
     background: url("emotions/calm/confused.png");

js/interface_common.js

@@ -119,10 +119,13 @@ function openProfileModal(e)
             unfollow(username);
         });
     };
-    $mc = $('.modal-content');
-    $mch = parseInt($('.modal-content').css('height'));//
-    $pch = parseInt($('.profile-card').css('height'));//
-    $mc.css('height', $mch - ($pch + Math.floor($mch/50)));//hed//fix .modal-content height
+    //hed//fix .modal-content height in profile modal
+    if($('.modal-blackout').hasClass('profile-modal')){
+        $mc = $('.modal-content');
+        $mch = parseInt($('.modal-content').css('height'));
+        $pch = parseInt($('.profile-card').css('height'));
+        $mc.css('height', $mch - ($pch + Math.floor($mch/50)));
+    }
 }
 
 function newHashtagModal(hashtag) {
@@ -318,6 +321,9 @@ var postExpandFunction = function( e, postLi )
         requestRepliesAfter(originalLi);
         // RTs faces and counter
         requestRTs(originalLi);
+
+        //hed//image preview 
+        postLi.find('.preview-container').css('height', '100%');
     }
     else
     {
@@ -331,6 +337,7 @@ var postExpandFunction = function( e, postLi )
             postLi.empty();
             postLi.append(originalPost);
         });
+        postLi.find('.preview-container').css('height', '')
     }
 
     e.stopPropagation();

js/options.js

@@ -5,7 +5,7 @@ $(function() {
 function soundNotifOptions() {
 	if(!localStorage['sndDM']) localStorage['sndDM'] = false;
 	if(!localStorage['sndMention']) localStorage['sndMention'] = false;
-	$('#notifyForm select').each(function(){
+	$('.sndOpt').each(function(){
 		this.value = localStorage[this.id];
 	});
 
@@ -14,7 +14,7 @@ function soundNotifOptions() {
 	$('#player').empty();
 
 
-	$('form#notifyForm').on('change','select',function(){
+	$('.sndOpt').on('change',function(){
 		localStorage.setItem(this.id, this.value);
 
 		if(this.value == false) {player[0].pause(); return;}
@@ -76,9 +76,9 @@ function mensNotif() {
 
 function keysSend() {
 	if(!localStorage['keysSend']) localStorage['keysSend'] = 1;
-	$('#keysOpt select')[0].value = localStorage['keysSend'];
+	$('#keysSend')[0].value = localStorage['keysSend'];
 	
-	$('#keysOpt select').on('change', function(){
+	$('#keysSend').on('change', function(){
 		localStorage[this.id] = this.value;
 	
 	})
@@ -101,10 +101,19 @@ function setTheme() {
 
 }
 
+function setShowPreviewOpt(){
+	$('#displayPreview').val(localStorage['showPreviewOpt'] || "enable");
+	if(!localStorage['showPreviewOpt']) localStorage['showPreviewOpt'] = "enable";
+	$('#displayPreview').on('change', function(){
+		localStorage['showPreviewOpt'] = $(this).val();
+	})
+}
+
 function InitOptions () {
 	soundNotifOptions();
 	volumeControl();
 	keysSend();
 	setLang();
 	setTheme();
+	setShowPreviewOpt();
 }

js/twister_formatpost.js

@@ -100,6 +100,14 @@ function postToElem( post, kind ) {
         retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by));
         retweetedByElem.text('@'+retweeted_by);
     }
+    //hed//image in post
+    var previewContainer = elem.find('.preview-container'), postText = elem.find(".post-text");
+    
+    if(imagePreview(postText)){
+        previewContainer.show();
+        previewContainer.append(imagePreview(postText))
+    };
+    
 
     return elem;
 }
@@ -238,6 +246,7 @@ function htmlFormatMsg( msg, output, mentions ) {
         }
 
         output.append(_formatText(msg));
+
         msg = "";
     }
 }
@@ -247,6 +256,7 @@ function _formatText(msg)
 {
     msg = $.emotions(msg);
     msg = msg.replace(/\n/g, '<br />');
+
     return msg;
 }
 
@@ -282,3 +292,12 @@ function _extractHashtag(s) {
 function escapeHtmlEntities(str) {
     return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;').replace("'", '&apos;');
 }
+function imagePreview(post) {
+    if (localStorage['showPreviewOpt'] == 'enable') {
+        var link = post.find("a[rel='nofollow']");
+        if (link.html() && /(\.jpg)|(\.gif)|(\.png)|(\.jpeg)/.test(link.html().toLowerCase()))
+        {
+             return "<img src='" + link.html() + "' class='image-preview' />";
+        }
+    }
+}

options.html

@@ -72,88 +72,75 @@
  </div>
   <!-- MENU SUPERIOR END Original-->
   
-  <div class="wrapper">
-
-    <div class="language">
+  <div class="wrapper optionsPage">
 
       <div class="module">
-        <p> Use language </p>
+        <h1> Use language </h1>
         <div>
-            <form action="" id="selectLanguage">
-              <select name="" id="language">
-                <option value="auto">Auto</option>
-                <option value="en">English</option>
-                <option value="ru">Russian</option>
-                <option value="zh">Chinese</option>
-        				<option value="de">German</option>
-        				<option value="fr">French</option>
-        				<option value="it">Italian</option>
-        				<option value="nl">Dutch</option>
-              </select>
-            </form>
+          <select name="" id="language">
+            <option value="auto">Auto</option>
+            <option value="en">English</option>
+            <option value="ru">Russian</option>
+            <option value="zh">Chinese</option>
+    				<option value="de">German</option>
+    				<option value="fr">French</option>
+    				<option value="it">Italian</option>
+    				<option value="nl">Dutch</option>
+          </select>
         </div>
       </div>
-    </div>
-    <div class="language">
 
       <div class="module">
-        <p> Theme </p>
+        <h1> Theme </h1>
         <div>
-            <form action="" id="selectTheme">
-              <select name="" id="theme">
-                <option value="calm">Calm</option>
-                <option value="original">Original</option>
-              </select>
-            </form>
+          <select name="" id="theme">
+            <option value="calm">Calm</option>
+            <option value="original">Original</option>
+          </select>
         </div>
       </div>
-    </div>
 
-    <div class="sounds">
+      <div class="module">
+        <h1> Sound notifications </h1>
+          <h2>Mentions</h2>
+          <select name="" id="sndMention" class="sndOpt">
+            <option value="false">none</option>
+            <option value="1">beat</option>
+            <option value="2">pip</option>
+            <option value="3">vibro</option>
+            <option value="4">flip</option>
+            <option value="5">click</option>
+          </select><br>
+          <h2>Direct Messages</h2>
+          <select name="" id="sndDM" class="sndOpt">
+            <option value="false">none</option>
+            <option value="1">beat</option>
+            <option value="2">pip</option>
+            <option value="3">vibro</option>
+            <option value="4">flip</option>
+            <option value="5">click</option>
+          </select>
+          <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
+          <audio id="player"></audio>
+      </div>
 
       <div class="module">
-        <p> Sound notifications </p>
-        <div>
-            <form action="" id="notifyForm">
-              <p>Mentions</p>
-              <select name="" id="sndMention" class="sndOpt">
-                <option value="false">none</option>
-                <option value="1">beat</option>
-                <option value="2">pip</option>
-                <option value="3">vibro</option>
-                <option value="4">flip</option>
-                <option value="5">click</option>
-              </select><br>
-              <p>Direct Messages</p>
-              <select name="" id="sndDM" class="sndOpt">
-                <option value="false">none</option>
-                <option value="1">beat</option>
-                <option value="2">pip</option>
-                <option value="3">vibro</option>
-                <option value="4">flip</option>
-                <option value="5">click</option>
-              </select>
-              <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
-            </form>
-            <audio id="player"></audio>
-        </div>
+        <h1> Keys </h1>
+          <h2>Send key</h2>
+          <select name="" id="keysSend">
+            <option value="1">Enter</option>
+            <option value="2">Ctrl/Cmd+Enter</option>
+          </select>
       </div>
-    </div>
 
-      <div class="keys">
-        <div class="module">
-          <p> Keys </p>
-          <div>
-              <form action="" id="keysOpt">
-                <p>Send key</p>
-                <select name="" id="keysSend">
-                  <option value="1">Enter</option>
-                  <option value="2">Ctrl/Cmd+Enter</option>
-                </select>
-              </form>
-          </div>
-        </div>
+      <div class="module">
+        <h1>Inline image preview</h1>
+        <select name="" id="displayPreview">
+          <option value="disable">Ignore</option>
+          <option value="enable">Display</option>
+        </select>
       </div>
-  </div>
+
+    </div>
   </body>
 </html>