[frio] Add .add-to-modal delegated event on anchors

- Improve hovercard button accessibility

diff --git a/view/templates/hovercard.tpl b/view/templates/hovercard.tpl
index a688f57b202c1a25c16f21d868a24722e73f971b..017e096afc561b89c5bb77aaecb89b6fc4c22b09 100644 (file)
--- a/view/templates/hovercard.tpl
+++ b/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}}

diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js
index ab263bc2ab76cb19082e7990b0d710fb56096fa4..9bca427779fcbc057e05aa5b81e4c84ea863d74e 100644 (file)
--- a/view/theme/frio/js/modal.js
+++ b/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.