Browse Source

images preview

images preview, fixes
master
Hedgehog 11 years ago
parent
commit
106a12f314
  1. 31
      css/style.css
  2. 13
      home.html
  3. BIN
      jquery-emotions/emotions/calm/angel.png
  4. BIN
      jquery-emotions/emotions/calm/beer.png
  5. BIN
      jquery-emotions/emotions/calm/confused.png
  6. BIN
      jquery-emotions/emotions/calm/cry.png
  7. BIN
      jquery-emotions/emotions/calm/devil.png
  8. BIN
      jquery-emotions/emotions/calm/friends.png
  9. BIN
      jquery-emotions/emotions/calm/frown.png
  10. BIN
      jquery-emotions/emotions/calm/glasses.png
  11. BIN
      jquery-emotions/emotions/calm/grin.png
  12. BIN
      jquery-emotions/emotions/calm/grumpy.png
  13. BIN
      jquery-emotions/emotions/calm/heart.png
  14. BIN
      jquery-emotions/emotions/calm/kiss.png
  15. BIN
      jquery-emotions/emotions/calm/mimi.png
  16. BIN
      jquery-emotions/emotions/calm/smile.png
  17. BIN
      jquery-emotions/emotions/calm/sunglasses.png
  18. BIN
      jquery-emotions/emotions/calm/tongue.png
  19. BIN
      jquery-emotions/emotions/calm/unsure.png
  20. BIN
      jquery-emotions/emotions/calm/wink.png
  21. 2
      jquery-emotions/jquery.emotions.calm.css
  22. 9
      js/ZeroClipboard.min.js
  23. BIN
      js/ZeroClipboard.swf
  24. 13
      js/interface_common.js
  25. 17
      js/options.js
  26. 19
      js/twister_formatpost.js
  27. 45
      options.html

31
css/style.css

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

13
home.html

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

BIN
jquery-emotions/emotions/calm/angel.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
jquery-emotions/emotions/calm/beer.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
jquery-emotions/emotions/calm/confused.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1016 B

BIN
jquery-emotions/emotions/calm/cry.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1015 B

BIN
jquery-emotions/emotions/calm/devil.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 960 B

BIN
jquery-emotions/emotions/calm/friends.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
jquery-emotions/emotions/calm/frown.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 999 B

BIN
jquery-emotions/emotions/calm/glasses.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
jquery-emotions/emotions/calm/grin.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 958 B

BIN
jquery-emotions/emotions/calm/grumpy.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 969 B

BIN
jquery-emotions/emotions/calm/heart.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 614 B

After

Width:  |  Height:  |  Size: 414 B

BIN
jquery-emotions/emotions/calm/kiss.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
jquery-emotions/emotions/calm/mimi.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 959 B

BIN
jquery-emotions/emotions/calm/smile.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 976 B

BIN
jquery-emotions/emotions/calm/sunglasses.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 958 B

BIN
jquery-emotions/emotions/calm/tongue.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1005 B

BIN
jquery-emotions/emotions/calm/unsure.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 936 B

BIN
jquery-emotions/emotions/calm/wink.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 997 B

2
jquery-emotions/jquery.emotions.calm.css

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

9
js/ZeroClipboard.min.js vendored

File diff suppressed because one or more lines are too long

BIN
js/ZeroClipboard.swf

Binary file not shown.

13
js/interface_common.js

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

17
js/options.js

@ -5,7 +5,7 @@ $(function() {
function soundNotifOptions() { function soundNotifOptions() {
if(!localStorage['sndDM']) localStorage['sndDM'] = false; if(!localStorage['sndDM']) localStorage['sndDM'] = false;
if(!localStorage['sndMention']) localStorage['sndMention'] = false; if(!localStorage['sndMention']) localStorage['sndMention'] = false;
$('#notifyForm select').each(function(){ $('.sndOpt').each(function(){
this.value = localStorage[this.id]; this.value = localStorage[this.id];
}); });
@ -14,7 +14,7 @@ function soundNotifOptions() {
$('#player').empty(); $('#player').empty();
$('form#notifyForm').on('change','select',function(){ $('.sndOpt').on('change',function(){
localStorage.setItem(this.id, this.value); localStorage.setItem(this.id, this.value);
if(this.value == false) {player[0].pause(); return;} if(this.value == false) {player[0].pause(); return;}
@ -76,9 +76,9 @@ function mensNotif() {
function keysSend() { function keysSend() {
if(!localStorage['keysSend']) localStorage['keysSend'] = 1; 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; 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 () { function InitOptions () {
soundNotifOptions(); soundNotifOptions();
volumeControl(); volumeControl();
keysSend(); keysSend();
setLang(); setLang();
setTheme(); setTheme();
setShowPreviewOpt();
} }

19
js/twister_formatpost.js

@ -100,6 +100,14 @@ function postToElem( post, kind ) {
retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by)); retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by));
retweetedByElem.text('@'+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; return elem;
} }
@ -238,6 +246,7 @@ function htmlFormatMsg( msg, output, mentions ) {
} }
output.append(_formatText(msg)); output.append(_formatText(msg));
msg = ""; msg = "";
} }
} }
@ -247,6 +256,7 @@ function _formatText(msg)
{ {
msg = $.emotions(msg); msg = $.emotions(msg);
msg = msg.replace(/\n/g, '<br />'); msg = msg.replace(/\n/g, '<br />');
return msg; return msg;
} }
@ -282,3 +292,12 @@ function _extractHashtag(s) {
function escapeHtmlEntities(str) { function escapeHtmlEntities(str) {
return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;').replace("'", '&apos;'); 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' />";
}
}
}

45
options.html

@ -72,14 +72,11 @@
</div> </div>
<!-- MENU SUPERIOR END Original--> <!-- MENU SUPERIOR END Original-->
<div class="wrapper"> <div class="wrapper optionsPage">
<div class="language">
<div class="module"> <div class="module">
<p> Use language </p> <h1> Use language </h1>
<div> <div>
<form action="" id="selectLanguage">
<select name="" id="language"> <select name="" id="language">
<option value="auto">Auto</option> <option value="auto">Auto</option>
<option value="en">English</option> <option value="en">English</option>
@ -90,32 +87,22 @@
<option value="it">Italian</option> <option value="it">Italian</option>
<option value="nl">Dutch</option> <option value="nl">Dutch</option>
</select> </select>
</form>
</div>
</div> </div>
</div> </div>
<div class="language">
<div class="module"> <div class="module">
<p> Theme </p> <h1> Theme </h1>
<div> <div>
<form action="" id="selectTheme">
<select name="" id="theme"> <select name="" id="theme">
<option value="calm">Calm</option> <option value="calm">Calm</option>
<option value="original">Original</option> <option value="original">Original</option>
</select> </select>
</form>
</div> </div>
</div> </div>
</div>
<div class="sounds">
<div class="module"> <div class="module">
<p> Sound notifications </p> <h1> Sound notifications </h1>
<div> <h2>Mentions</h2>
<form action="" id="notifyForm">
<p>Mentions</p>
<select name="" id="sndMention" class="sndOpt"> <select name="" id="sndMention" class="sndOpt">
<option value="false">none</option> <option value="false">none</option>
<option value="1">beat</option> <option value="1">beat</option>
@ -124,7 +111,7 @@
<option value="4">flip</option> <option value="4">flip</option>
<option value="5">click</option> <option value="5">click</option>
</select><br> </select><br>
<p>Direct Messages</p> <h2>Direct Messages</h2>
<select name="" id="sndDM" class="sndOpt"> <select name="" id="sndDM" class="sndOpt">
<option value="false">none</option> <option value="false">none</option>
<option value="1">beat</option> <option value="1">beat</option>
@ -134,26 +121,26 @@
<option value="5">click</option> <option value="5">click</option>
</select> </select>
<input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span> <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
</form>
<audio id="player"></audio> <audio id="player"></audio>
</div> </div>
</div>
</div>
<div class="keys">
<div class="module"> <div class="module">
<p> Keys </p> <h1> Keys </h1>
<div> <h2>Send key</h2>
<form action="" id="keysOpt">
<p>Send key</p>
<select name="" id="keysSend"> <select name="" id="keysSend">
<option value="1">Enter</option> <option value="1">Enter</option>
<option value="2">Ctrl/Cmd+Enter</option> <option value="2">Ctrl/Cmd+Enter</option>
</select> </select>
</form>
</div>
</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> </div>
</body> </body>
</html> </html>

Loading…
Cancel
Save