image popups
This commit is contained in:
Hannes Mannerheim
parent
0c5d8b9e43
commit
dd14e3977e
|
|
@ -423,13 +423,22 @@ class QvitterPlugin extends Plugin {
|
|||
$enclosure_o = $attachment->getEnclosure();
|
||||
$thumb = $attachment->getThumbnail();
|
||||
$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]['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
|
||||
|
|
|
|||
388
css/qvitter.css
388
css/qvitter.css
|
|
@ -462,6 +462,10 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
|
|||
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;
|
||||
|
|
@ -1649,113 +1653,215 @@ body.rtl .queet.rtl .expanded-content {
|
|||
color:#999999;
|
||||
}
|
||||
|
||||
.queet .attachments {
|
||||
bottom: 0;
|
||||
height: 100px;
|
||||
margin-right: -35px;
|
||||
|
||||
.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 .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 .thumb-container.no-cover {
|
||||
background-size:100% auto;
|
||||
}
|
||||
.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;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
z-index:100;
|
||||
}
|
||||
body.rtl .queet .attachments {
|
||||
right:auto;
|
||||
left:0;
|
||||
margin-left:-35px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
.queet .queet-thumbs.thumb-num-1 .thumb-container.no-cover {
|
||||
width:100%;
|
||||
min-height:0;
|
||||
}
|
||||
body.rtl .queet .attachments:hover {
|
||||
|
||||
.queet .queet-thumbs.thumb-num-1 .thumb-container {
|
||||
width:100%;
|
||||
}
|
||||
.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 .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 .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 .queet-thumbs .thumb-container:last-child {
|
||||
margin-right:0
|
||||
}
|
||||
|
||||
.queet .attachments a:nth-child(2) img {
|
||||
-moz-transform:rotate(35deg);
|
||||
-webkit-transform:rotate(35deg);
|
||||
-o-transform:rotate(35deg);
|
||||
-ms-transform:rotate(35deg);
|
||||
}
|
||||
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 {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.queet .attachments a:nth-child(3) img {
|
||||
-moz-transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
-o-transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
}
|
||||
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);
|
||||
.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 .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-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;
|
||||
}
|
||||
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);
|
||||
.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
|
||||
------------------------- */
|
||||
|
|
@ -4910,6 +5099,9 @@ body.rtl #feed-header-inner h2 {
|
|||
margin-left: -63px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.stream-item.expanded > .queet .queet-thumbs {
|
||||
margin-left: -63px;
|
||||
}
|
||||
|
||||
.show-full-conversation {
|
||||
background-color:#ddd;
|
||||
|
|
|
|||
|
|
@ -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,41 +1027,42 @@ 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');
|
||||
|
||||
}, 50);
|
||||
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(){
|
||||
setTimeout(function() {
|
||||
cleanUpAfterCollapseQueet(q);
|
||||
}, 250);
|
||||
});
|
||||
}, collapseTime);
|
||||
}
|
||||
else {
|
||||
setTimeout(function() {
|
||||
cleanUpAfterCollapseQueet(q);
|
||||
}, collapseTime+250);
|
||||
}, collapseTime);
|
||||
}
|
||||
|
||||
}, 50);
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,31 +1270,40 @@ 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();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ·
|
||||
·
|
||||
· Gnu social don't use url as uri anymore, we need to handle both cases
|
||||
|
|
@ -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>\
|
||||
|
|
|
|||
171
js/qvitter.js
171
js/qvitter.js
|
|
@ -1411,10 +1411,10 @@ $('body').on('click','.queet',function (event) {
|
|||
&& !$(event.target).is('.cm-group')
|
||||
&& !$(event.target).is('.cm-url')
|
||||
&& !$(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('button')
|
||||
&& !$(event.target).is('.show-full-conversation')
|
||||
&& !$(event.target).is('span.mention')
|
||||
|
|
@ -1437,6 +1437,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');
|
||||
}
|
||||
}
|
||||
|
||||
/* ·
|
||||
·
|
||||
· Collapse all open conversations, ellipsis menus and the welcome text on esc or when clicking the margin
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user