From cb635d6e04681e6c7275db210388091ebe248c9d Mon Sep 17 00:00:00 2001
From: Hannes Mannerheim <h@nnesmannerhe.im>
Date: Sun, 24 Jan 2016 22:03:33 +0100
Subject: [PATCH] show embedded content in tooltips and when notice is
 expanded, if user opt-out:ed

---
 css/qvitter.css      | 50 ++++++++++++++++++++++++++++++++++++--------
 js/dom-functions.js  | 12 +++++++----
 js/misc-functions.js |  2 +-
 js/qvitter.js        | 37 +++++++++++++++++++++++++++++++-
 4 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/css/qvitter.css b/css/qvitter.css
index aa474ec..6664bfb 100644
--- a/css/qvitter.css
+++ b/css/qvitter.css
@@ -1446,6 +1446,15 @@ body.rtl #history-container.menu-container a .chev-right {
     hyphens: auto;
 	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 {
 	z-index: 10000;
 	display:block;
@@ -1453,7 +1462,7 @@ body.rtl #history-container.menu-container a .chev-right {
 	position:absolute;
 	width:0;
 	height:0;
-	border:5px solid #333;
+	border:6px solid #333;
 	border-top:0 none;
 	border-left-color: transparent;
 	border-right-color: transparent;
@@ -1464,7 +1473,7 @@ body.rtl #history-container.menu-container a .chev-right {
     transition-delay: 0.6s;
 	}
 .tooltip-caret.bottom {
-	border-top:5px solid #333;
+	border-top:6px solid #333;
 	border-bottom:0 none;
 	}
 
@@ -1495,14 +1504,14 @@ body.rtl #history-container.menu-container a .chev-right {
 	position:absolute;
 	width:0;
 	height:0;
-	border:5px solid #fff;
+	border:6px solid #fff;
 	border-top:0 none;
 	border-left-color: transparent;
 	border-right-color: transparent;
 	transition: opacity 0.1s ease-in 0;
 	}
 .hover-card-caret.bottom {
-	border-top:5px solid #fff;
+	border-top:6px solid #fff;
 	border-bottom:0 none;
 	}
 
@@ -2090,6 +2099,9 @@ body.rtl .queet.rtl .expanded-content {
 	margin:0 10px 0 0;
 	float: left;
 	}
+.tooltip .oembed-img-container {
+	margin:5px 10px 5px 0;
+	}
 
 .quoted-notice-attachments-num-1 .quoted-notice-img-container {
     height: 100%;
@@ -2195,7 +2207,8 @@ body.rtl .queet.rtl .expanded-content {
 	display:block;
 	}
 
-.queet .thumb-container {
+.queet .thumb-container,
+.tooltip .thumb-container {
     display: inline-block;
     overflow: hidden;
     position: relative;
@@ -2214,6 +2227,17 @@ body.rtl .queet.rtl .expanded-content {
 	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,
 .queet .queet-thumbs:not(.thumb-num-1) .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 .queet-content > .queet-thumbs,
-#feed-body.quotes-hidden-by-user .queet-text .quote-link-container,
+#feed-body.embedded-content-hidden-by-user .stream-item:not(.expanded) > .queet .queet-content > .oembed-data,
+#feed-body.embedded-content-hidden-by-user .stream-item:not(.expanded) > .queet .queet-content > .queet-thumbs,
+#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-quote-link-in-queet-text {
 	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.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;
 	}
+#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 {
diff --git a/js/dom-functions.js b/js/dom-functions.js
index 4ffab10..2d2d538 100644
--- a/js/dom-functions.js
+++ b/js/dom-functions.js
@@ -2145,6 +2145,7 @@ function placeQuotedNoticesInQueetText(quotedNotices,queetText) {
 					if($(this).next().is('.quote-link-container')) {
 						$(this).addClass('hidden-quote-link-in-queet-text');
 						$(this).attr('data-quote-url',qoutedNotice.url);
+						$(this).next().attr('data-quote-url',qoutedNotice.url);
 						$(this).next().addClass(qoutedNotice.class);
 						$(this).next().attr('href',qoutedNotice.href);
 						$(this).next().html(qoutedNotice.html);
@@ -2370,13 +2371,16 @@ function buildAttachmentHTML(attachments){
 					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>';
-				urlsToHide.push(window.siteInstanceURL + 'attachment/' + this.id); // hide this attachment url from the queet text
+				var urlToHide = window.siteInstanceURL + 'attachment/' + this.id;
+
+				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++;
 				}
 			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>';
-				urlsToHide.push(window.siteInstanceURL + 'attachment/' + this.id); // hide this attachment url from the queet text
+				var urlToHide = window.siteInstanceURL + 'attachment/' + this.id;
+				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++;
 				}
 			});
diff --git a/js/misc-functions.js b/js/misc-functions.js
index f2e978e..f859576 100644
--- a/js/misc-functions.js
+++ b/js/misc-functions.js
@@ -404,7 +404,7 @@ function alignTooltipTohoveredElement(tooltipElement,tooltipCaret,hovered) {
 	// tooltip at top
 	else {
 		var tooltipCaretPosX = targetPosX+targetWidth/2-5;
-		var tooltipCaretPosY = targetPosY-7;
+		var tooltipCaretPosY = targetPosY-8;
 
 		// caret always directly on top of element
 		tooltipCaret.css('left',tooltipCaretPosX + 'px');
diff --git a/js/qvitter.js b/js/qvitter.js
index ef5c216..d5e73ff 100644
--- a/js/qvitter.js
+++ b/js/qvitter.js
@@ -138,8 +138,43 @@ $('body').on({
 
 		// regular tooltips
 		if($(e.target).is('[data-tooltip]')) {
+
+			var tooltipClass = '';
+
 			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>');
 			$('body').prepend(tooltipElement);
 			$('body').prepend(tooltipCaret);