Merge pull request #7225 from MrPetovan/bug/7194-frio-hovercard-modal-button

Fix frio hovercard modal buttons

view/js/main.js

@@ -1,4 +1,21 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+if (!Element.prototype.matches) {
+	Element.prototype.matches =
+		Element.prototype.matchesSelector ||
+		Element.prototype.mozMatchesSelector ||
+		Element.prototype.msMatchesSelector ||
+		Element.prototype.oMatchesSelector ||
+		Element.prototype.webkitMatchesSelector ||
+		function(s) {
+			var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+				i = matches.length;
+			while (--i >= 0 && matches.item(i) !== this) {}
+			return i > -1;
+		};
+}
+
 function resizeIframe(obj) {
 	_resizeIframe(obj, 0);
 }

view/templates/hovercard.tpl

@@ -21,8 +21,8 @@
 				{{* 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}}')" aria-label="{{$profile.actions.pm.0}}" 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}}')" aria-label="{{$profile.actions.poke.0}}" title="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{{/if}}
+					{{if $profile.actions.pm}}<a class="btn btn-labeled btn-primary btn-sm add-to-modal" href="{{$profile.actions.pm.1}}" aria-label="{{$profile.actions.pm.0}}"><i class="fa fa-envelope" aria-hidden="true" title="{{$profile.actions.pm.0}}"></i><span class="sr-only">{{$profile.actions.pm.0}}</span></a>{{/if}}
+					{{if $profile.actions.poke}}<a class="btn btn-labeled btn-primary btn-sm add-to-modal" href="{{$profile.actions.poke.1}}" aria-label="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true" title="{{$profile.actions.poke.0}}"></i><span class="sr-only">{{$profile.actions.poke.0}}</span></a>{{/if}}
 				</div>
 				<div class="hover-card-actions-connection">
 					{{if $profile.actions.network}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.network.1}}" aria-label="{{$profile.actions.network.0}}" title="{{$profile.actions.network.0}}"><i class="fa fa-cloud" aria-hidden="true"></i></a>{{/if}}

view/theme/frio/js/modal.js

@@ -93,6 +93,21 @@ $(document).ready(function(){
 		input.val(img);
 		
 	});
+
+	// Generic delegated event to open an anchor URL in a modal.
+	// Used in the hovercard.
+	document.getElementsByTagName('body')[0].addEventListener('click', function(e) {
+		var target = e.target;
+		while (target) {
+			if (target.matches && target.matches('a.add-to-modal')) {
+				addToModal(target.href);
+				e.preventDefault();
+				return false;
+			}
+
+			target = target.parentNode || null;
+		}
+	});
 });
 
 // Overwrite Dialog.show from main js to load the filebrowser into a bs modal.