X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fjs%2Fhovercard.js;h=c3396b7626aecc4eb2923d76d067008132066f48;hb=cf9a65cded8e8f270aedbb3ba46d5fe2fe351b4c;hp=93c87e7a887ec953c14710a262fe6d2b82c607b5;hpb=8ec424325375aa923c7d2d78ac8ddcc352f09cff;p=friendica.git

diff --git a/view/theme/frio/js/hovercard.js b/view/theme/frio/js/hovercard.js
index 93c87e7a88..c3396b7626 100644
--- a/view/theme/frio/js/hovercard.js
+++ b/view/theme/frio/js/hovercard.js
@@ -1,17 +1,17 @@
-/* 
+/*
  * The javascript for friendicas hovercard. Bootstraps popover is needed.
- * 
- * Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im> 
+ *
+ * Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
  * qvitter code (https://github.com/hannesmannerheim/qvitter)
- * 
+ *
  * It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
- * 
+ *
  */
 $(document).ready(function(){
 	// Elements with the class "userinfo" will get a hover-card.
 	// Note that this elements does need a href attribute which links to
 	// a valid profile url
-	$("body").on("mouseover", ".userinfo", function(e) {
+	$("body").on("mouseover", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function(e) {
 			var timeNow = new Date().getTime();
 			removeAllhoverCards(e,timeNow);
 			var hoverCardData = false;
@@ -40,13 +40,21 @@ $(document).ready(function(){
 			// Take link href attribute as link to the profile
 			var profileurl = hrefAttr;
 			// the url to get the contact and template data
-			var url = baseurl + "/frio_hovercard";
+			var url = baseurl + "/hovercard";
 
 			// store the title in an other data attribute beause bootstrap
 			// popover destroys the title.attribute. We can restore it later
 			var title = targetElement.attr("title");
 			targetElement.attr({"data-orig-title": title, title: ""});
 
+			// if the device is a mobile open the hover card by click and not by hover
+			if(typeof is_mobile != "undefined") {
+					targetElement[0].removeAttribute("href");
+					var hctrigger = 'click';
+				} else {
+					var hctrigger = 'manual';
+			};
+
 			// Timeoute until the hover-card does appear
 			setTimeout(function(){
 				if(targetElement.is(":hover") && parseInt(targetElement.attr('data-awaiting-hover-card'),10) == timeNow) {
@@ -69,16 +77,17 @@ $(document).ready(function(){
 										}
 										return "top";
 									},
-									trigger: 'manual',
+									trigger: hctrigger,
 									template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
-									content: data
+									content: data,
+									container: "body",
 								}).popover('show');
 							}
 						});
 					}
 				}
 			}, 500);
-	}).on("mouseleave", ".userinfo", function(e) { // action when mouse leaves the hover-card
+	}).on("mouseleave", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function(e) { // action when mouse leaves the hover-card
 		var timeNow = new Date().getTime();
 		// copy the original title to the title atribute
 		var title = $(this).attr("data-orig-title");
@@ -90,8 +99,12 @@ $(document).ready(function(){
 
 	// hover cards should be removed very easily, e.g. when any of these events happen
 	$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
-		var timeNow = new Date().getTime();
-		removeAllhoverCards(e,timeNow);
+		// remove hover card only for desktiop user, since on mobile we openen the hovercards
+		// by click event insteadof hover
+		if(typeof is_mobile == "undefined") {
+			var timeNow = new Date().getTime();
+			removeAllhoverCards(e,timeNow);
+		};
 	});
 
 	// if we're hovering a hover card, give it a class, so we don't remove it
@@ -151,7 +164,7 @@ function getContactData(purl, url, actionOnSuccess) {
 			// The nurl will be the identifier in the object
 			if(data.nurl.length > 0) {
 				// Test if the contact is allready connected with the user (if url containing
-				// the expression ("redir/") We will store different cache keys 
+				// the expression ("redir/") We will store different cache keys
 				if((data.url.search("redir/")) >= 0 ) {
 					var key = data.url;
 				} else {
@@ -199,7 +212,7 @@ function getHoverCardContent(purl, url, callback) {
 	});
 
 // This is interisting. this pice of code ajax request are done asynchron.
-// To make it work getHOverCardTemplate() and getHOverCardData have to return it's 
+// To make it work getHOverCardTemplate() and getHOverCardData have to return it's
 // data (no succes handler for each of this). I leave it here, because it could be useful.
 // https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/
 //	$.when(
@@ -270,49 +283,3 @@ function getHoverCardVariables(object) {
 
 	return variables;
 }
-
-// This is the html template for the hover-card
-// Since we grab the original hovercard.tpl we don't
-// need it anymore
-function hovercard_template() {
-	var tempate = '\
-	<div class="basic-content" >\
-		<div class="hover-card-details">\
-			<div class="hover-card-header left-align">\
-				<div class="hover-card-pic left-align">\
-					<span class="image-wrapper medium">\
-						<a href="{{$profile.url}}" title="{{$profile.name}}"><img href="" class="left-align thumbnail" src="{{$profile.thumb}}"></a>\
-					</span>\
-				</div>\
-				<div class="hover-card-content">\
-					<div class="profile-entry-name">\
-						<h4 class="left-align1"><a href="{{$profile.url}}">{{$profile.name}}</a></h4>{{if $profile.account_type}}<span>{{$profile.account_type}}</span>{{/if}}\
-					</div>\
-					<div class="profile-details">\
-						<span class="profile-addr">{{$profile.addr}}</span>\
-						{{if $profile.network}}<span class="profile-network"> ({{$profile.network}})</span>{{/if}}\
-					</div>\
-					{{*{{if $profile.about}}<div class="profile-details profile-about">{{$profile.about}}</div>{{/if}}*}}\
-\
-				</div>\
-				<div class="hover-card-actions  right-aligned">\
-					{{* here are the differnt actions like privat message, poke, delete and so on *}}\
-					{{* @todo we have two different photo menus one for contacts and one for items at the network stream. We currently use the contact photo menu, so the items options are missing We need to move them *}}\
-					<div class="hover-card-actions-social">\
-						{{if $profile.actions.pm}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal("{{$profile.actions.pm.1}}")" title="{{$profile.actions.pm.0}}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{{/if}}\
-						{{if $profile.actions.poke}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal("{{$profile.actions.poke.1}}")" title="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{{/if}}\
-					</div>\
-					<div class="hover-card-actions-connection">\
-						{{if $profile.actions.edit}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.edit.1}}" title="{{$profile.actions.edit.0}}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}\
-						{{if $profile.actions.drop}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.drop.1}}" title="{{$profile.actions.drop.0}}"><i class="fa fa-user-times" aria-hidden="true"></i></a>{{/if}}\
-						{{if $profile.actions.follow}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.follow.1}}" title="{{$profile.actions.follow.0}}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{{/if}}\
-					</div>\
-				</div>\
-			</div>\
-\
-			<div class="clearfix"></div>\
-\
-		</div>\
-	</div>\
-	{{if $profile.tags}}<div class="hover-card-footer">{{$profile.tags}}</div>{{/if}}';
-}