Browse Source

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

Adding preview for the direct image links
master
miguelfreitas 11 years ago
parent
commit
90809532e8
  1. 10
      css/style.css
  2. 2
      home.html
  3. 15
      js/interface_common.js
  4. 13
      js/options.js
  5. 9
      options.html

10
css/style.css

@ -951,6 +951,16 @@ button.disabled:hover @@ -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;

2
home.html

@ -244,6 +244,8 @@ @@ -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>

15
js/interface_common.js

@ -307,7 +307,20 @@ var postExpandFunction = function( e, postLi ) @@ -307,7 +307,20 @@ var postExpandFunction = function( e, postLi )
originalLi.append(originalPost);
$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

13
js/options.js

@ -131,6 +131,18 @@ var TwisterOptions = function() @@ -131,6 +131,18 @@ var TwisterOptions = function()
$.Options.setOption(this.id, this.value);
})
}
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();
@ -139,6 +151,7 @@ var TwisterOptions = function() @@ -139,6 +151,7 @@ var TwisterOptions = function()
this.setLang();
this.setTheme();
this.setLineFeedsOpt();
this.setShowPreviewOpt();
}
}

9
options.html

@ -146,6 +146,15 @@ @@ -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>

Loading…
Cancel
Save