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

show embedded content in tooltips and when notice is expanded, if user opt-out:ed

Browse Source
This commit is contained in:
Hannes Mannerheim 2016-01-24 22:02:43 +01:00
parent 087ef6cf95
commit c2ff567339
4 changed files with 86 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
css/qvitter.css
View File

@ -1446,6 +1446,15 @@ body.rtl #history-container.menu-container a .chev-right {
hyphens: auto; hyphens: auto;
word-wrap: break-word; word-wrap: break-word;
} }
.tooltip.oembed {
border-radius: 3px;
max-width:400px;
}
.tooltip.quote {
padding:10px 20px;
border-radius: 3px;
max-width:400px;
}
.tooltip-caret { .tooltip-caret {
z-index: 10000; z-index: 10000;
display:block; display:block;
@ -1453,7 +1462,7 @@ body.rtl #history-container.menu-container a .chev-right {
position:absolute; position:absolute;
width:0; width:0;
height:0; height:0;
border:5px solid #333; border:6px solid #333;
border-top:0 none; border-top:0 none;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
@ -1464,7 +1473,7 @@ body.rtl #history-container.menu-container a .chev-right {
transition-delay: 0.6s; transition-delay: 0.6s;
} }
.tooltip-caret.bottom { .tooltip-caret.bottom {
border-top:5px solid #333; border-top:6px solid #333;
border-bottom:0 none; border-bottom:0 none;
} }
@ -1495,14 +1504,14 @@ body.rtl #history-container.menu-container a .chev-right {
position:absolute; position:absolute;
width:0; width:0;
height:0; height:0;
border:5px solid #fff; border:6px solid #fff;
border-top:0 none; border-top:0 none;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
transition: opacity 0.1s ease-in 0; transition: opacity 0.1s ease-in 0;
} }
.hover-card-caret.bottom { .hover-card-caret.bottom {
border-top:5px solid #fff; border-top:6px solid #fff;
border-bottom:0 none; border-bottom:0 none;
} }
@ -2090,6 +2099,9 @@ body.rtl .queet.rtl .expanded-content {
margin:0 10px 0 0; margin:0 10px 0 0;
float: left; float: left;
} }
.tooltip .oembed-img-container {
margin:5px 10px 5px 0;
}
.quoted-notice-attachments-num-1 .quoted-notice-img-container { .quoted-notice-attachments-num-1 .quoted-notice-img-container {
height: 100%; height: 100%;
@ -2195,7 +2207,8 @@ body.rtl .queet.rtl .expanded-content {
display:block; display:block;
} }
.queet .thumb-container { .queet .thumb-container,
.tooltip .thumb-container {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -2214,6 +2227,17 @@ body.rtl .queet.rtl .expanded-content {
height:250px; height:250px;
} }
.tooltip .thumb-container {
max-width:300px;
min-height:0;
max-height:200px;
margin:5px 0 0 0;
}
.tooltip .thumb-container img {
max-width:100%;
opacity:0;
}
.stream-item:not(.expanded) .queet .queet-thumbs.thumb-num-1 .thumb-container.play-button:before, .stream-item:not(.expanded) .queet .queet-thumbs.thumb-num-1 .thumb-container.play-button:before,
.queet .queet-thumbs:not(.thumb-num-1) .thumb-container.play-button:before, .queet .queet-thumbs:not(.thumb-num-1) .thumb-container.play-button:before,
.modal-content .queet .thumb-container.play-button:before { .modal-content .queet .thumb-container.play-button:before {
@ -2452,17 +2476,25 @@ body.rtl .queet.rtl .expanded-content {
} }
#feed-body.embedded-content-hidden-by-user .queet-content > .oembed-data, #feed-body.embedded-content-hidden-by-user .stream-item:not(.expanded) > .queet .queet-content > .oembed-data,
#feed-body.embedded-content-hidden-by-user .queet-content > .queet-thumbs, #feed-body.embedded-content-hidden-by-user .stream-item:not(.expanded) > .queet .queet-content > .queet-thumbs,
#feed-body.quotes-hidden-by-user .queet-text .quote-link-container, #feed-body.quotes-hidden-by-user .stream-item:not(.expanded) > .queet .queet-text .quote-link-container,
.queet-text a.hidden-embedded-link-in-queet-text, .queet-text a.hidden-embedded-link-in-queet-text,
.queet-text a.hidden-quote-link-in-queet-text { .queet-text a.hidden-quote-link-in-queet-text {
display:none; display:none;
} }
#feed-body.embedded-content-hidden-by-user .stream-item.collapsing > .queet .queet-content > .oembed-data,
#feed-body.embedded-content-hidden-by-user .stream-item.collapsing > .queet .queet-content > .queet-thumbs,
#feed-body.quotes-hidden-by-user .stream-item.collapsing > .queet .queet-text .quote-link-container {
display:none !important;
}
#feed-body.embedded-content-hidden-by-user .queet-text a.hidden-embedded-link-in-queet-text, #feed-body.embedded-content-hidden-by-user .queet-text a.hidden-embedded-link-in-queet-text,
#feed-body.quotes-hidden-by-user .queet-text a.hidden-quote-link-in-queet-text { #feed-body.quotes-hidden-by-user .stream-item:not(.expanded) > .queet .queet-text a.hidden-quote-link-in-queet-text {
display:inline; display:inline;
} }
#feed-body.quotes-hidden-by-user .stream-item.collapsing > .queet .queet-text a.hidden-quote-link-in-queet-text {
display:inline !important;
}
.stream-item.activity .created-at a { .stream-item.activity .created-at a {

12
js/dom-functions.js
View File

@ -2145,6 +2145,7 @@ function placeQuotedNoticesInQueetText(quotedNotices,queetText) {
if($(this).next().is('.quote-link-container')) { if($(this).next().is('.quote-link-container')) {
$(this).addClass('hidden-quote-link-in-queet-text'); $(this).addClass('hidden-quote-link-in-queet-text');
$(this).attr('data-quote-url',qoutedNotice.url); $(this).attr('data-quote-url',qoutedNotice.url);
$(this).next().attr('data-quote-url',qoutedNotice.url);
$(this).next().addClass(qoutedNotice.class); $(this).next().addClass(qoutedNotice.class);
$(this).next().attr('href',qoutedNotice.href); $(this).next().attr('href',qoutedNotice.href);
$(this).next().html(qoutedNotice.html); $(this).next().html(qoutedNotice.html);
@ -2370,13 +2371,16 @@ function buildAttachmentHTML(attachments){
var img_url = this.thumb_url; var img_url = this.thumb_url;
} }
attachmentHTML += '<a style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + playButtonClass + youTubeClass + animatedGifClass + '" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + img_url + '"/ data-width="' + this.width + '" data-height="' + this.height + '" data-full-image-url="' + this.url + '" data-thumb-url="' + img_url + '"></a>'; var urlToHide = window.siteInstanceURL + 'attachment/' + this.id;
urlsToHide.push(window.siteInstanceURL + 'attachment/' + this.id); // hide this attachment url from the queet text
attachmentHTML += '<a data-local-attachment-url="' + urlToHide + '" style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + playButtonClass + youTubeClass + animatedGifClass + '" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + img_url + '"/ data-width="' + this.width + '" data-height="' + this.height + '" data-full-image-url="' + this.url + '" data-thumb-url="' + img_url + '"></a>';
urlsToHide.push(urlToHide); // hide this attachment url from the queet text
attachmentNum++; attachmentNum++;
} }
else if (this.mimetype == 'image/svg+xml') { else if (this.mimetype == 'image/svg+xml') {
attachmentHTML += '<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>'; var urlToHide = window.siteInstanceURL + 'attachment/' + this.id;
urlsToHide.push(window.siteInstanceURL + 'attachment/' + this.id); // hide this attachment url from the queet text attachmentHTML += '<a data-local-attachment-url="' + urlToHide + '" 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>';
urlsToHide.push(urlToHide); // hide this attachment url from the queet text
attachmentNum++; attachmentNum++;
} }
}); });

2
js/misc-functions.js
View File

@ -404,7 +404,7 @@ function alignTooltipTohoveredElement(tooltipElement,tooltipCaret,hovered) {
// tooltip at top // tooltip at top
else { else {
var tooltipCaretPosX = targetPosX+targetWidth/2-5; var tooltipCaretPosX = targetPosX+targetWidth/2-5;
var tooltipCaretPosY = targetPosY-7; var tooltipCaretPosY = targetPosY-8;
// caret always directly on top of element // caret always directly on top of element
tooltipCaret.css('left',tooltipCaretPosX + 'px'); tooltipCaret.css('left',tooltipCaretPosX + 'px');

37
js/qvitter.js
View File

@ -138,8 +138,43 @@ $('body').on({
// regular tooltips // regular tooltips
if($(e.target).is('[data-tooltip]')) { if($(e.target).is('[data-tooltip]')) {
var tooltipClass = '';
tooltip_data = $(e.target).attr('data-tooltip'); tooltip_data = $(e.target).attr('data-tooltip');
var tooltipElement = $('<div class="tooltip" lang="' + window.selectedLanguage + '">' + tooltip_data + '</div>');
// if embedded content is hidden, we show it in tooltips
if($('#feed-body').hasClass('embedded-content-hidden-by-user')
&& !$(e.target).is('.oembed-item')
&& $(e.target).closest('.queet').length > 0
&& $(e.target).closest('.queet').find('.oembed-item[href="' + $(e.target).attr('href') + '"]').length > 0) {
tooltip_data = $(e.target).closest('.queet').find('.oembed-item[href="' + $(e.target).attr('href') + '"]').html();
tooltipClass = 'oembed';
}
else if($('#feed-body').hasClass('embedded-content-hidden-by-user')
&& !$(e.target).is('.attachment-thumb')
&& $(e.target).closest('.queet').length > 0
&& $(e.target).text().indexOf('/attachment/') > -1) {
// local attachments has /attachment/-url in its href attribute
if($(e.target).closest('.queet').find('.thumb-container[data-local-attachment-url="' + $(e.target).attr('href') + '"]').length>0) {
tooltip_data = $(e.target).closest('.queet').find('.thumb-container[data-local-attachment-url="' + $(e.target).attr('href') + '"]').outerHTML();
tooltipClass = 'thumb';
}
// remote attachments are identified by full url
else if($(e.target).closest('.queet').find('.thumb-container[href="' + $(e.target).attr('data-tooltip') + '"]').length>0) {
tooltip_data = $(e.target).closest('.queet').find('.thumb-container[href="' + $(e.target).attr('data-tooltip') + '"]').outerHTML();
tooltipClass = 'thumb';
}
}
else if($('#feed-body').hasClass('quotes-hidden-by-user')
&& !$(e.target).is('.quote-link-container')
&& $(e.target).is('[data-quote-url]')
&& $(e.target).closest('.queet-text').find('.quote-link-container[data-quote-url="' + $(e.target).attr('data-quote-url') + '"]').length > 0) {
tooltip_data = $(e.target).closest('.queet-text').find('.quote-link-container[data-quote-url="' + $(e.target).attr('data-quote-url') + '"]').html();
tooltipClass = 'quote';
}
var tooltipElement = $('<div class="tooltip ' + tooltipClass + '" lang="' + window.selectedLanguage + '">' + tooltip_data + '</div>');
var tooltipCaret = $('<div class="tooltip-caret"></div>'); var tooltipCaret = $('<div class="tooltip-caret"></div>');
$('body').prepend(tooltipElement); $('body').prepend(tooltipElement);
$('body').prepend(tooltipCaret); $('body').prepend(tooltipCaret);