Merge pull request #125 from erqan/adding-image-preview

Adding preview for the direct image links

css/style.css

@@ -951,6 +951,16 @@ button.disabled:hover
     display: none;
     padding: 5px 5px 0 5px;
 }
+.image-preview
+{
+    max-height: 500px;
+    width: auto;
+}
+.preview-container
+{
+    max-height: 500px;
+    width: 100%;
+}
 .post-stats
 {
     margin: 0 10px 0 55px;

home.html

@@ -244,6 +244,8 @@
                         <!-- use "avatar-row-template" here -->
                     </li>
                 </ul>
+                <div class="preview-container">
+                </div>
                 <div class="post-reply-content" style="display: block;">
                     <form class="post-area-new">
                         <textarea placeholder="Reply..."></textarea>

js/interface_common.js

@@ -308,6 +308,19 @@ var postExpandFunction = function( e, postLi )
 
         $postExpandedContent.slideDown( "fast" );
         
+        if ($.Options.getShowPreviewOpt() == 'enable')
+        {
+            var previewContainer=$postExpandedContent.find(".preview-container")[0];
+            /* was the preview added before... */
+            if ($(previewContainer).children().length == 0)
+            {
+                var link = originalPost.find("a[rel='nofollow']");
+                if (/(\.jpg)|(\.gif)|(\.png)|(\.jpeg)/.test(link.html().toLowerCase()))
+                {
+                    $(previewContainer).append($("<img src='" + link.html() + "' class='image-preview' />"));
+                }
+            }
+        }
         // insert "reply_to" before
         requestRepliedBefore(originalLi);
         // insert replies to this post after

js/options.js

@@ -132,6 +132,18 @@ var TwisterOptions = function()
         })
     }
     
+    this.getShowPreviewOpt = function() {
+        return $.Options.getOption('displayPreview',"disable");
+    }
+    
+    this.setShowPreviewOpt = function () {
+        $('#showPreviewOpt select')[0].value = this.getShowPreviewOpt();
+
+        $('#showPreviewOpt select').on('change', function(){
+            $.Options.setOption(this.id, this.value);
+        })
+    }
+
     this.InitOptions = function() {
         this.soundNotifOptions();
         this.volumeControl();
@@ -139,6 +151,7 @@ var TwisterOptions = function()
         this.setLang();
         this.setTheme();
         this.setLineFeedsOpt();
+        this.setShowPreviewOpt();
     }
 }
 

options.html

@@ -146,6 +146,15 @@
               </select>
             </form>
         </div>
+        <div>
+            <form action="" id="showPreviewOpt">
+              <p>Inline image preview</p>
+              <select name="" id="displayPreview">
+                <option value="disable">Ignore</option>
+                <option value="enable">Display</option>
+              </select>
+            </form>
+        </div>
       </div>
     </div>