wamo/Qvitter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

image popups

Browse Source
This commit is contained in:
Hannes Mannerheim 2015-06-09 23:42:41 +02:00
parent 0c5d8b9e43
commit dd14e3977e
4 changed files with 565 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
QvitterPlugin.php
View File

@ -419,19 +419,28 @@ class QvitterPlugin extends Plugin {
if (!empty($attachments)) {
foreach ($attachments as $attachment) {
if(is_object($attachment)) {
try {
$enclosure_o = $attachment->getEnclosure();
$thumb = $attachment->getThumbnail();
$attachment_url_to_id[$enclosure_o->url]['id'] = $attachment->id;
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
} catch (ServerException $e) {
$thumb = File_thumbnail::getKV('file_id', $attachment->id);
if ($thumb instanceof File_thumbnail) {
try {
$enclosure_o = $attachment->getEnclosure();
$thumb = $attachment->getThumbnail();
$attachment_url_to_id[$enclosure_o->url]['id'] = $attachment->id;
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
}
}
}
if($attachment->width > 1000) {
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
}
$attachment_url_to_id[$enclosure_o->url]['width'] = $attachment->width;
$attachment_url_to_id[$enclosure_o->url]['height'] = $attachment->height;
} catch (ServerException $e) {
$thumb = File_thumbnail::getKV('file_id', $attachment->id);
if ($thumb instanceof File_thumbnail) {
$attachment_url_to_id[$enclosure_o->url]['id'] = $attachment->id;
if($attachment->width > 1000) {
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
}
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
$attachment_url_to_id[$enclosure_o->url]['width'] = $attachment->width;
$attachment_url_to_id[$enclosure_o->url]['height'] = $attachment->height;
}
}
}
}
}
@ -440,6 +449,8 @@ class QvitterPlugin extends Plugin {
foreach ($twitter_status['attachments'] as &$attachment) {
if (!empty($attachment_url_to_id[$attachment['url']])) {
$attachment['id'] = $attachment_url_to_id[$attachment['url']]['id'];
$attachment['width'] = $attachment_url_to_id[$attachment['url']]['width'];
$attachment['height'] = $attachment_url_to_id[$attachment['url']]['height'];
// if the attachment is other than image, and we have a thumb (e.g. videos),
// we include the default thumbnail url

408
css/qvitter.css
View File

@ -461,7 +461,11 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
background-position:center -1245px;
background-color:#fff;
}
.topbar .global-nav:not(.show-logo):before {
background-position:center -1202px;
}
.topbar .global-nav.show-logo:before {
animation: fadeinlogo 0.4s;
animation-timing-function: ease;
@ -1648,114 +1652,216 @@ body.rtl .queet.rtl .expanded-content {
width: 565px;
color:#999999;
}
.queet .attachments {
bottom: 0;
height: 100px;
margin-right: -35px;
overflow: hidden;
position: absolute;
right: 0;
width: 35px;
z-index:100;
}
body.rtl .queet .attachments {
right:auto;
left:0;
margin-left:-35px;
}
.queet .attachments:hover {
width: 200px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transition: width 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-moz-transition: width 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-ms-transition: width 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
-o-transition: width 0.2s ease-in-out, -o-transform 0.2s ease-in-out;
transition: width 0.2s ease-in-out, transform 0.2s ease-in-out;
}
body.rtl .queet .attachments:hover {
.queet .queet-thumbs {
-webkit-transition: max-height 0s linear;
-moz-transition: max-height 0s linear;
-o-transition: max-height 0s linear;
transition: max-height 0s linear;
overflow:hidden;
margin-top:10px;
position:relative;
}
.queet .attachment-thumb {
opacity:0;
width:100%;
padding:0;
margin:0;
display:block;
}
.queet .attachments img {
background-color: #fff;
border:1px solid rgba(255,255,255,0,5);
margin-bottom:20px;
margin-right:15px;
max-height:47px;
position:absolute;
right:0;
bottom:0;
z-index:0;
behavior:url(-ms-transform.htc);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
-ms-transform:rotate(25deg);
box-shadow:1px 1px 5px rgba(255,255,255,0.5);
-webkit-transition: -webkit-transform 0.2s ease-in-out, max-height 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out, max-height 0.2s ease-in-out;
-ms-transition: -ms-transform 0.2s ease-in-out, max-height 0.2s ease-in-out;
-o-transition: -o-transform 0.2s ease-in-out, max-height 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, max-height 0.2s ease-in-out;
}
body.rtl .queet .attachments img {
margin-right:0;
margin-left:15px;
right:auto;
left:0;
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
.queet .thumb-container {
display: inline-block;
overflow: hidden;
position: relative;
background-size:cover;
background-repeat:no-repeat;
background-position: center;
padding:0;
margin:0;
min-height:250px;
}
.queet .attachments a:nth-child(2) img {
-moz-transform:rotate(35deg);
-webkit-transform:rotate(35deg);
-o-transform:rotate(35deg);
-ms-transform:rotate(35deg);
.queet .thumb-container.no-cover {
background-size:100% auto;
}
body.rtl .queet .attachments a:nth-child(2) img {
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
.queet .queet-thumbs .thumb-container.no-cover .attachment-thumb {
min-height:0;
}
.queet .thumb-container:before {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-sizing: border-box;
content: " ";
display: block;
position: absolute;
width:100%;
height:100%;
}
.queet .attachments a:nth-child(3) img {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
.queet .queet-thumbs.thumb-num-1 .thumb-container.no-cover {
width:100%;
min-height:0;
}
.queet .queet-thumbs.thumb-num-1 .thumb-container {
width:100%;
}
body.rtl.queet .attachments a:nth-child(3) img {
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
.queet .queet-thumbs.thumb-num-2 .thumb-container {
width:49.5%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-3 .thumb-container {
width:32.33%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-4 .thumb-container {
width:24%;
margin-right:1%;
}
.queet .attachments:hover img {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
max-height:67px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
}
body.rtl .queet .attachments:hover img {
-moz-transform:rotate(-0deg);
-webkit-transform:rotate(-0deg);
-o-transform:rotate(-0deg);
-ms-transform:rotate(-0deg);
max-height:67px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
.queet .queet-thumbs.thumb-num-5 .thumb-container {
width:19%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-6 .thumb-container {
width:32.33%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-7 .thumb-container {
width:24%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-7 .thumb-container:first-child,
.queet .queet-thumbs.thumb-num-7 .thumb-container:nth-child(2),
.queet .queet-thumbs.thumb-num-7 .thumb-container:nth-child(3) {
width:32.33%;
}
.queet .queet-thumbs.thumb-num-8 .thumb-container {
width:24%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-9 .thumb-container {
width:19%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-9 .thumb-container:first-child,
.queet .queet-thumbs.thumb-num-9 .thumb-container:nth-child(2),
.queet .queet-thumbs.thumb-num-9 .thumb-container:nth-child(3),
.queet .queet-thumbs.thumb-num-9 .thumb-container:nth-child(4) {
width:24%;
}
.queet .queet-thumbs.thumb-num-10 .thumb-container {
width:19%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-11 .thumb-container {
width:24%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-11 .thumb-container:first-child,
.queet .queet-thumbs.thumb-num-11 .thumb-container:nth-child(2),
.queet .queet-thumbs.thumb-num-11 .thumb-container:nth-child(3) {
width:32.33%;
}
.queet .queet-thumbs.thumb-num-12 .thumb-container {
width:24%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-13 .thumb-container {
width:24%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-13 .thumb-container:nth-child(9),
.queet .queet-thumbs.thumb-num-13 .thumb-container:nth-child(10),
.queet .queet-thumbs.thumb-num-13 .thumb-container:nth-child(11),
.queet .queet-thumbs.thumb-num-13 .thumb-container:nth-child(12),
.queet .queet-thumbs.thumb-num-13 .thumb-container:nth-child(13) {
width:19%;
}
.queet .queet-thumbs.thumb-num-14 .thumb-container {
width:19%;
margin-right:1%;
}
.queet .queet-thumbs.thumb-num-14 .thumb-container:first-child,
.queet .queet-thumbs.thumb-num-14 .thumb-container:nth-child(2),
.queet .queet-thumbs.thumb-num-14 .thumb-container:nth-child(3),
.queet .queet-thumbs.thumb-num-14 .thumb-container:nth-child(4) {
width:24%;
}
.queet .queet-thumbs.thumb-num-15 .thumb-container,
.queet .queet-thumbs.thumb-num-more-than-fifteen .thumb-container {
width:19%;
margin-right:1%;
}
.queet .queet-thumbs .thumb-container:last-child {
margin-right:0
}
.queet .queet-thumbs .thumb-container {
border-radius: 10px;
}
.stream-item.expanded > .queet .queet-thumbs.thumb-num-1 .thumb-container,
.stream-item.expanded > .queet .queet-thumbs.thumb-num-1 .thumb-container:before {
border-radius: 0;
}
.queet .queet-thumbs.thumb-num-1 .thumb-container,
.queet .queet-thumbs.thumb-num-2 .thumb-container,
.queet .queet-thumbs.thumb-num-3 .thumb-container,
.queet .queet-thumbs.thumb-num-4 .thumb-container,
.queet .queet-thumbs.thumb-num-5 .thumb-container,
.queet .queet-thumbs.thumb-num-1 .attachment-thumb,
.queet .queet-thumbs.thumb-num-2 .attachment-thumb,
.queet .queet-thumbs.thumb-num-3 .attachment-thumb,
.queet .queet-thumbs.thumb-num-4 .attachment-thumb,
.queet .queet-thumbs.thumb-num-5 .attachment-thumb {
max-height: 250px;
min-height: 250px;
}
.stream-item.expanded > .queet .queet-thumbs.thumb-num-1 .thumb-container,
.stream-item.expanded > .queet .queet-thumbs.thumb-num-1 .attachment-thumb {
max-height: none;
}
.queet .queet-thumbs.thumb-num-6 .thumb-container,
.queet .queet-thumbs.thumb-num-7 .thumb-container,
.queet .queet-thumbs.thumb-num-8 .thumb-container,
.queet .queet-thumbs.thumb-num-9 .thumb-container,
.queet .queet-thumbs.thumb-num-10 .thumb-container,
.queet .queet-thumbs.thumb-num-6 .attachment-thumb,
.queet .queet-thumbs.thumb-num-7 .attachment-thumb,
.queet .queet-thumbs.thumb-num-8 .attachment-thumb,
.queet .queet-thumbs.thumb-num-9 .attachment-thumb,
.queet .queet-thumbs.thumb-num-10 .attachment-thumb {
max-height: 125px;
min-height: 125px;
}
.queet .queet-thumbs.thumb-num-11 .thumb-container,
.queet .queet-thumbs.thumb-num-12 .thumb-container,
.queet .queet-thumbs.thumb-num-13 .thumb-container,
.queet .queet-thumbs.thumb-num-14 .thumb-container,
.queet .queet-thumbs.thumb-num-15 .thumb-container,
.queet .queet-thumbs.thumb-num-more-than-fifteen .thumb-container,
.queet .queet-thumbs.thumb-num-11 .attachment-thumb,
.queet .queet-thumbs.thumb-num-12 .attachment-thumb,
.queet .queet-thumbs.thumb-num-13 .attachment-thumb,
.queet .queet-thumbs.thumb-num-14 .attachment-thumb,
.queet .queet-thumbs.thumb-num-15 .attachment-thumb,
.queet .queet-thumbs.thumb-num-more-than-fifteen .attachment-thumb {
max-height: 83px;
min-height: 83px;
}
.stream-item.collapsing > .queet .thumb-container {
-webkit-transition: max-height 0s linear;
-moz-transition: max-height 0s linear;
-o-transition: max-height 0s linear;
transition: max-height 0s linear;
}
.stream-item.activity .created-at a {
display:none;
@ -2275,9 +2381,6 @@ ul.queet-actions li .icon.is-mine:before {
border-radius: 6px;
margin:8px 0;
}
.stream-item.expanded > .queet > .attachments{
display:none;
}
.stream-item.expanded .stream-item-expand:hover {
text-decoration:underline;
}
@ -3511,9 +3614,6 @@ button.shorten:after {
top: 2px;
z-index:10000;
}
body > .loader {
background-color:#fff;
}
#footer-spinner-container .loader,
.queet-box-loading-cover .loader {
left: auto;
@ -3728,6 +3828,7 @@ background:rgba(0,0,0,0.2);
.modal-footer .queet {
border-bottom:0 none;
cursor:auto;
min-height:53px;
}
.modal-footer .queet:hover {
background-color:#fff;
@ -3887,6 +3988,94 @@ body.rtl .modal-footer button {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
#queet-thumb-popup .modal-header {
border: 0 none;
height: 0;
margin: 0;
min-height: 0;
padding: 0;
}
#queet-thumb-popup .modal-body {
position:relative;
background-color: #000;
}
#queet-thumb-popup .modal-body .queet-thumbs,
#queet-thumb-popup .modal-body .thumb-container,
#queet-thumb-popup .modal-body .attachment-thumb {
position:relative;
display:block;
width:100%;
}
#queet-thumb-popup .modal-body .attachment-thumb {
opacity:0;
}
#queet-thumb-popup .modal-body .thumb-container {
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
max-width: 920px;
margin: 0 auto;
min-height: 0;
}
#queet-thumb-popup .modal-body .thumb-container[href$=".svg"],
#queet-thumb-popup .modal-body .thumb-container[href$=".png"] {
background-color:#fff;
}
#queet-thumb-popup .modal-close {
right: -35px;
top: -11px;
}
#queet-thumb-popup .modal-close .icon {
background-position: -120px -510px;
}
#queet-thumb-popup .thumb-container:not(.display-this-thumb) {
display:none;
}
#queet-thumb-popup .prev-thumb,
#queet-thumb-popup .next-thumb {
box-sizing: border-box;
display: block;
height: 50%;
line-height: 30px;
left: -50px;
margin-top: -15px;
position: absolute;
top: 50%;
width: 60px;
z-index: 1;
text-align: center;
cursor:pointer;
font-size:60px;
color:#e5e5e5;
}
#queet-thumb-popup .next-thumb {
left:auto;
right:-50px;
}
#queet-thumb-popup .prev-thumb:before,
#queet-thumb-popup .next-thumb:before {
font-family:"FontAwesome";
content: "\f104";
}
#queet-thumb-popup .next-thumb:before {
content: "\f105";
}
#queet-thumb-popup .prev-thumb.disabled,
#queet-thumb-popup .next-thumb.disabled {
color:#aaa;
cursor:default;
}
#queet-thumb-popup .prev-thumb:not(.disabled):hover:before,
#queet-thumb-popup .next-thumb:not(.disabled):hover:before {
color:#fff;
}
/* edit profile
------------------------- */
@ -4909,7 +5098,10 @@ body.rtl #feed-header-inner h2 {
line-height: 22px;
margin-left: -63px;
margin-top: 5px;
}
}
.stream-item.expanded > .queet .queet-thumbs {
margin-left: -63px;
}
.show-full-conversation {
background-color:#ddd;

141
js/dom-functions.js
View File

@ -1013,6 +1013,8 @@ function expand_queet(q,doScrolling) {
// give stream item a height
q.css('height',q.height() + 'px');
q.children('.queet').find('.expanded-content').css('height',q.find('.expanded-content').height() + 'px');
q.children('.queet').find('.queet-thumbs.thumb-num-1').css('max-height',q.find('.queet-thumbs.thumb-num-1').height() + 'px');
q.children('.queet').find('.queet-thumbs.thumb-num-1 .thumb-container').css('max-height',q.find('.queet-thumbs.thumb-num-1').height() + 'px');
q.children('div').not('.queet').children('a').css('opacity','0.5');
q.children('div').not('.queet').children().children().css('opacity','0.5');
@ -1025,40 +1027,41 @@ function expand_queet(q,doScrolling) {
q.children('.queet').css('-o-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.children('.queet').css('-webkit-transition-duration',Math.round( collapseTime * 1000 * 10) / 10 + 's');
q.children('.queet').css('transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.children('.queet').find('.expanded-content, .queet-thumbs.thumb-num-1, .queet-thumbs.thumb-num-1 .thumb-container').css('-moz-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.children('.queet').find('.expanded-content, .queet-thumbs.thumb-num-1, .queet-thumbs.thumb-num-1 .thumb-container').css('-o-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.children('.queet').find('.expanded-content, .queet-thumbs.thumb-num-1, .queet-thumbs.thumb-num-1 .thumb-container').css('-webkit-transition-duration',Math.round( collapseTime * 1000 * 10) / 10 + 's');
q.children('.queet').find('.expanded-content, .queet-thumbs.thumb-num-1, .queet-thumbs.thumb-num-1 .thumb-container').css('transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.css('-moz-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.css('-o-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.css('-webkit-transition-duration',Math.round( collapseTime * 1000 * 10) / 10 + 's');
q.css('transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.find('.expanded-content').css('-moz-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.find('.expanded-content').css('-o-transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
q.find('.expanded-content').css('-webkit-transition-duration',Math.round( collapseTime * 1000 * 10) / 10 + 's');
q.find('.expanded-content').css('transition-duration',Math.round( collapseTime / 1000 * 10) / 10 + 's');
// set new heights and margins to animate to
var animateToHeight = q.children('.queet').outerHeight() - q.find('.inline-reply-queetbox').outerHeight() - q.children('.queet').find('.expanded-content').outerHeight() - 2;
var animateToHeight = q.children('.queet').outerHeight() - q.find('.inline-reply-queetbox').outerHeight() - q.children('.queet').find('.expanded-content').outerHeight() - Math.max(0,q.children('.queet').find('.queet-thumbs.thumb-num-1').outerHeight()-250) - 2;
if(animateToHeight < 73) { // no less than this
animateToHeight = 73;
}
q.css('height',animateToHeight + 'px');
q.children('.queet').css('margin-top', '-' + (q.children('.queet').offset().top - q.offset().top) + 'px');
q.children('.queet').find('.expanded-content').css('height','0');
q.children('.queet').find('.expanded-content').css('height','0');
q.children('.queet').find('.queet-thumbs.thumb-num-1, .queet-thumbs.thumb-num-1 .thumb-container').css('max-height','250px');
if(doScrolling) {
setTimeout(function() {
backToMyScrollPos(q,qid,500,function(){
cleanUpAfterCollapseQueet(q);
});
}, collapseTime);
}
else {
setTimeout(function() {
cleanUpAfterCollapseQueet(q);
}, collapseTime);
}
}, 50);
if(doScrolling) {
setTimeout(function() {
backToMyScrollPos(q,qid,500,function(){
setTimeout(function() {
cleanUpAfterCollapseQueet(q);
}, 250);
});
}, collapseTime);
}
else {
setTimeout(function() {
cleanUpAfterCollapseQueet(q);
}, collapseTime+250);
}
}
}
@ -1122,36 +1125,8 @@ function expand_queet(q,doScrolling) {
// attachments in the content link to /attachment/etc url and not direct to image/video, link is in title
if(typeof attachment_title != 'undefined') {
// images
if($.inArray(attachment_mimetype, ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml']) >= 0
|| $.inArray(attachment_title_extension, ['jpeg', 'gif', 'jpg','png','svg']) >= 0) {
if(q.children('.queet').find('.expanded-content').children('.media').children('a[href="' + attachment_title + '"]').length < 1) { // not if already showed
// local attachment with a thumbnail
if(typeof $(this).find('img').attr('data-big-thumbnail') != 'undefined') {
var attachment_src = $(this).find('img').attr('data-big-thumbnail');
}
// external "deep linked" images
else {
var attachment_src = attachment_title;
}
// don't show thumbnails for gifs
if(attachment_mimetype == 'image/gif') {
var attachment_src = attachment_title;
}
if(q.children('.queet').find('.expanded-content').children('.media').length > 0) {
q.children('.queet').find('.media').last().after('<div class="media"><a href="' + attachment_title + '" target="_blank"><img src="' + attachment_src + '" /></a></div>');
}
else {
q.children('.queet').find('.expanded-content').prepend('<div class="media"><a href="' + attachment_title + '" target="_blank"><img src="' + attachment_src + '" /></a></div>');
}
}
}
// videos
else if($.inArray(attachment_mimetype, ['video/mp4', 'video/ogg', 'video/quicktime', 'video/webm']) >= 0) {
if($.inArray(attachment_mimetype, ['video/mp4', 'video/ogg', 'video/quicktime', 'video/webm']) >= 0) {
if(q.children('.queet').find('.expanded-content').children('.media').children('video').children('source[href="' + attachment_title + '"]').length < 1) { // not if already showed
// local attachment with a thumbnail
@ -1223,6 +1198,8 @@ function cleanUpAfterCollapseQueet(q) {
q.find('.show-full-conversation').remove();
q.removeAttr('style');
q.children('.queet').removeAttr('style');
q.children('.queet').find('.queet-thumbs.thumb-num-1').removeAttr('style');
q.children('.queet').find('.queet-thumbs.thumb-num-1 .thumb-container').css('max-height','');
}
@ -1293,28 +1270,37 @@ function replyFormHtml(q,qid) {
·
· · · · · · · · · · · · · */
function popUpAction(popupId, heading, bodyHtml, footerHtml){
function popUpAction(popupId, heading, bodyHtml, footerHtml, popUpWidth){
$('.modal-container').remove(); // remove any open popups
var allFooterHtml = '';
if(footerHtml) {
allFooterHtml = '<div class="modal-footer">' + footerHtml + '</div>';
}
$('body').prepend('<div id="' + popupId + '" class="modal-container"><div class="modal-draggable"><div class="modal-content"><button class="modal-close" type="button"><span class="icon"></span></button><div class="modal-header"><h3 class="modal-title">' + heading + '</h3></div><div class="modal-body">' + bodyHtml + '</div>' + allFooterHtml + '</div></div></div>');
var this_modal_height = $('#' + popupId).children('.modal-draggable').height();
var this_modal_width = $('#' + popupId).children('.modal-draggable').width();
var popupPos = $('#' + popupId).children('.modal-draggable').offset().top - $(window).scrollTop();
var thisPopUp = $('#' + popupId).children('.modal-draggable');
if(typeof popUpWidth != 'undefined') {
thisPopUp.width(popUpWidth);
}
centerPopUp(thisPopUp);
}
function centerPopUp(thisPopUp) {
thisPopUp.css('margin-top','');
thisPopUp.css('margin-left','');
var this_modal_height = thisPopUp.height();
var this_modal_width = thisPopUp.width();
var popupPos = thisPopUp.offset().top - $(window).scrollTop();
if((popupPos-(this_modal_height/2))<5) {
var marginTop = 5-popupPos;
}
else {
var marginTop = 0-this_modal_height/2;
}
$('#' + popupId).children('.modal-draggable').css('margin-top', marginTop + 'px');
$('#' + popupId).children('.modal-draggable').css('margin-left', '-' + (this_modal_width/2) + 'px');
$('#' + popupId).children('.modal-draggable').draggable({ handle: ".modal-header" });
$('#' + popupId).children('.modal-header').disableSelection();
}
thisPopUp.css('margin-top', marginTop + 'px');
thisPopUp.css('margin-left', '-' + (this_modal_width/2) + 'px');
thisPopUp.draggable({ handle: ".modal-header" });
thisPopUp.disableSelection();
}
@ -1933,7 +1919,12 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
// image attachment thumbnails
var attachment_html = '';
var attachmentNum = 0;
if(typeof obj.attachments != "undefined") {
attachmentNum = obj.attachments.length;
if(attachmentNum>15){
attachmentNum = 'more-than-fifteen';
}
$.each(obj.attachments, function(){
if(this.id != null) {
var bigThumbW = 1000;
@ -1945,24 +1936,30 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
bigThumbH = window.siteMaxThumbnailSize;
}
// if thumb_url is set, we use that
if(typeof this.thumb_url != 'undefined') {
var thumb_url = this.thumb_url;
}
else {
var thumb_url = window.siteAttachmentURLBase + this.id + '/thumbnail?w=200&h=200';
// very long landscape images should not have background-size:cover
var noCoverClass='';
if(this.width/this.height > 2) {
noCoverClass=' no-cover';
}
attachment_html = attachment_html + '<a href="' + this.url + '"><img data-mime-type="' + this.mimetype + '" data-big-thumbnail="' + window.siteAttachmentURLBase + this.id + '/thumbnail?w=' + bigThumbW + '&h=' + bigThumbH + '" src="' + thumb_url + '"/></a>';
// if thumb_url is set, we use that
if(typeof this.thumb_url != 'undefined') {
var img_url = this.thumb_url;
}
else if(this.width > 1000) {
var img_url = window.siteAttachmentURLBase + this.id + '/thumbnail?w=' + bigThumbW + '&h=' + bigThumbH;
}
else {
var img_url = this.url;
}
attachment_html = attachment_html + '<a style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + '" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + img_url + '"/ data-width="' + this.width + '" data-height="' + this.height + '"></a>';
}
else if (this.mimetype == 'image/svg+xml') {
attachment_html = attachment_html + '<a href="' + this.url + '"><img data-mime-type="' + this.mimetype + '" src="' + this.url + '"/></a>';
attachment_html = attachment_html + '<a style="background-image:url(\'' + this.url + '\')" class="thumb-container" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + this.url + '"/></a>';
}
});
}
if(attachment_html.length>0) {
attachment_html = '<div class="attachments">' + attachment_html + '</div>';
}
// requeets
var requeetHtml = '';
@ -1992,7 +1989,6 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
' + requeetedByMe + '>\
<div class="queet" id="' + idPrepend + 'q-' + obj.id + '">\
' + requeetHtml + '\
' + attachment_html + '\
' + ostatusHtml + '\
<div class="queet-content">\
<div class="stream-item-header">\
@ -2007,6 +2003,7 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
</small>\
</div>\
<div class="queet-text">' + $.trim(obj.statusnet_html) + '</div>\
<div class="queet-thumbs thumb-num-' + attachmentNum + '">' + attachment_html + '</div>\
<div class="stream-item-footer">\
' + queetActions + '\
</div>\

177
js/qvitter.js
View File

@ -1401,7 +1401,7 @@ $('body').on('click','#new-queets-bar',function(){
·
· Expand and de-expand queets when clicking anywhere but on a few element types
·
· · · · · · · · · · · · · */
· · · · · · · · · · · · · */
$('body').on('click','.queet',function (event) {
if(!$(event.target).is('a')
@ -1410,11 +1410,11 @@ $('body').on('click','.queet',function (event) {
&& !$(event.target).is('.cm-tag')
&& !$(event.target).is('.cm-group')
&& !$(event.target).is('.cm-url')
&& !$(event.target).is('pre')
&& !$(event.target).is('pre')
&& !$(event.target).is('img')
&& !$(event.target).is('.name')
&& !$(event.target).is('.queet-box')
&& !$(event.target).is('.syntax-two')
&& !$(event.target).is('img')
&& !$(event.target).is('.syntax-two')
&& !$(event.target).is('button')
&& !$(event.target).is('.show-full-conversation')
&& !$(event.target).is('span.mention')
@ -1436,6 +1436,175 @@ $('body').on('click','.queet',function (event) {
}
});
/* ·
·
· Image popups
·
· · · · · · · · · · · · · */
$('body').on('click','.stream-item .queet img.attachment-thumb',function (event) {
event.preventDefault();
// don't do anything if we are in the middle of collapsing
if($(this).closest('.stream-item').hasClass('collapsing')) {
// no action
}
// if the stream item isn't expanded, expand that
else if(!$(this).closest('.stream-item').hasClass('expanded')) {
expand_queet($(this).closest('.stream-item'));
}
// otherwise we open the popup
else {
var thisAttachmentThumbSrc = $(this).attr('src');
var parentStreamItem = $(this).closest('.stream-item');
var $parentStreamItemClone = $('<div/>').append(parentStreamItem.outerHTML());
if(!parentStreamItem.hasClass('conversation')) {
$parentStreamItemClone.find('.stream-item.conversation').remove();
}
var $queetThumbsClone = $('<div/>').append($parentStreamItemClone.find('.queet-thumbs').outerHTML());
$parentStreamItemClone.find('.queet-thumbs, .expanded-content, .inline-reply-queetbox, .stream-item-footer').remove();
var footerHTML = $parentStreamItemClone.find('.queet').outerHTML();
$queetThumbsClone.find('img.attachment-thumb[src="' + thisAttachmentThumbSrc + '"]').parent().addClass('display-this-thumb');
var imgNum = parentStreamItem.find('.attachment-thumb').length;
if(imgNum > 1) {
$queetThumbsClone.find('.queet-thumbs').before('<div class="prev-thumb"></div>');
$queetThumbsClone.find('.queet-thumbs').after('<div class="next-thumb"></div>');
}
if(parentStreamItem.hasClass('expanded')) {
var calculatedDimensions = calculatePopUpAndImageDimensions($(this).attr('data-width'),$(this).attr('data-height'));
var $thisImgInQueetThumbsClone = $queetThumbsClone.find('img[src="' + $(this).attr('src') + '"]');
// set dimensions
$thisImgInQueetThumbsClone.width(calculatedDimensions.displayImgWidth);
$thisImgInQueetThumbsClone.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
// open popup
popUpAction('queet-thumb-popup', '', '' + $queetThumbsClone.outerHTML() + '', footerHTML, calculatedDimensions.popUpWidth);
disableOrEnableNavigationButtonsInImagePopup($('#queet-thumb-popup'));
}
}
});
// popups can be max 900px wide, and should not be higher than the window, so we need to do some calculating
function calculatePopUpAndImageDimensions(imgWidth, imgHeight) {
// e.g. svg's may not have dimensions set, in that case we just make them small
if(typeof imgWidth == 'undefined' && typeof imgHeight == 'undefined') {
return {popUpWidth: 540, displayImgWidth: 540};
}
var thisImgWidth = parseInt(imgWidth,10);
var thisImgHeight = parseInt(imgHeight,10);
var maxImageHeight = $(window).height() - 120; // 120 being a little more than a short queet in the footer
if(thisImgWidth < 540) {
var displayImgWidth = thisImgWidth;
var popUpWidth = 540;
if(thisImgHeight > maxImageHeight) {
displayImgWidth = Math.round(thisImgHeight/maxImageHeight*displayImgWidth);
}
}
else if(thisImgWidth < 900) {
var displayImgWidth = thisImgWidth;
if(thisImgHeight > maxImageHeight) {
displayImgWidth = Math.round(maxImageHeight/thisImgHeight*displayImgWidth);
if(displayImgWidth < 540) {
var popUpWidth = 540;
}
else {
var popUpWidth = displayImgWidth;
}
}
else {
var popUpWidth = displayImgWidth;
}
}
else {
var displayImgWidth = 900;
var displayImgHeight = 900/thisImgWidth*thisImgHeight;
if(displayImgHeight > maxImageHeight) {
displayImgWidth = Math.round(maxImageHeight*displayImgWidth/displayImgHeight);
if(displayImgWidth < 540) {
var popUpWidth = 540;
}
else if(displayImgWidth < 900) {
var popUpWidth = displayImgWidth;
}
else {
var popUpWidth = 900;
}
}
else {
var popUpWidth = 900;
}
}
return {popUpWidth: popUpWidth, displayImgWidth: displayImgWidth};
}
// switch to next image when clicking the image in the popup
$('body').on('click','#queet-thumb-popup .attachment-thumb',function (event) {
event.preventDefault();
var nextImage = $(this).parent().next().children('.attachment-thumb');
if(nextImage.length>0) {
// set dimensions of next image and the popup
var calculatedDimensions = calculatePopUpAndImageDimensions(nextImage.attr('data-width'),nextImage.attr('data-height'));
nextImage.width(calculatedDimensions.displayImgWidth);
nextImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
$('#queet-thumb-popup .modal-draggable').width(calculatedDimensions.popUpWidth);
// switch image
$(this).parent().removeClass('display-this-thumb');
$(this).parent().next().addClass('display-this-thumb');
disableOrEnableNavigationButtonsInImagePopup($('#queet-thumb-popup'));
centerPopUp($('#queet-thumb-popup .modal-draggable'));
}
});
// navigation buttons in image popup
$('body').on('click','#queet-thumb-popup .next-thumb',function (event) {
$(this).parent().find('.display-this-thumb').children('img').trigger('click');
});
$('body').on('click','#queet-thumb-popup .prev-thumb',function (event) {
var prevImage = $(this).parent().find('.display-this-thumb').prev().children('img');
if(prevImage.length>0) {
// set dimensions of next image and the popup
var calculatedDimensions = calculatePopUpAndImageDimensions(prevImage.attr('data-width'),prevImage.attr('data-height'));
prevImage.width(calculatedDimensions.displayImgWidth);
prevImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
$('#queet-thumb-popup .modal-draggable').width(calculatedDimensions.popUpWidth);
// switch image
$(this).parent().find('.display-this-thumb').removeClass('display-this-thumb');
prevImage.parent().addClass('display-this-thumb');
disableOrEnableNavigationButtonsInImagePopup($('#queet-thumb-popup'));
centerPopUp($('#queet-thumb-popup .modal-draggable'));
}
});
function disableOrEnableNavigationButtonsInImagePopup(popUp) {
if(popUp.find('.display-this-thumb').prev().length < 1) {
popUp.find('.prev-thumb').addClass('disabled');
}
else {
popUp.find('.prev-thumb').removeClass('disabled');
}
if(popUp.find('.display-this-thumb').next().length < 1) {
popUp.find('.next-thumb').addClass('disabled');
}
else {
popUp.find('.next-thumb').removeClass('disabled');
}
}
/* ·
·