LP#1708291: add an egHelpPopover directive
authorGalen Charlton <gmc@equinoxinitiative.org>
Tue, 20 Jun 2017 22:10:46 +0000 (18:10 -0400)
committerDan Wells <dbw2@calvin.edu>
Fri, 1 Sep 2017 16:47:16 +0000 (12:47 -0400)
This directive allows adding help text accessible by clicking
on a question mark icon.  Example usage:

<eg-help-popover help-text="Use the Force, Leia!">

to create simple popover or

<eg-help-popover help-text="Learn MARC21"
                 help-link="https://www.loc.gov/marc"
>

to have the help text hyperlinked.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Dan Wells <dbw2@calvin.edu>
Open-ILS/src/templates/staff/share/t_help_popover.tt2 [new file with mode: 0644]
Open-ILS/web/js/ui/default/staff/services/ui.js

diff --git a/Open-ILS/src/templates/staff/share/t_help_popover.tt2 b/Open-ILS/src/templates/staff/share/t_help_popover.tt2
new file mode 100644 (file)
index 0000000..215400a
--- /dev/null
@@ -0,0 +1,10 @@
+<span class="glyphicon glyphicon-question-sign"
+      uib-popover="{{helpText}}"
+      popover-trigger="click"
+      ng-if="!helpLink || helpLink.length == 0"
+></span>
+<span class="glyphicon glyphicon-question-sign"
+      uib-popover-html="helpHtml"
+      popover-trigger="click"
+      ng-if="helpLink.length > 0"
+></span>
index 10766ff..6513459 100644 (file)
@@ -1024,6 +1024,29 @@ function($window , egStrings) {
     }
 })
 
+/*
+ * egHelpPopover - a helpful widget
+ */
+.directive('egHelpPopover', function() {
+    return {
+        restrict : 'E',
+        transclude : true,
+        scope : {
+            helpText : '@',
+            helpLink : '@'
+        },
+        templateUrl : './share/t_help_popover',
+        controller : ['$scope','$sce', function($scope , $sce) {
+            if ($scope.helpLink) {
+                $scope.helpHtml = $sce.trustAsHtml(
+                    '<a target="_new" href="' + $scope.helpLink + '">' +
+                    $scope.helpText + '</a>'
+                );
+            }
+        }]
+    }
+})
+
 .factory('egWorkLog', ['egCore', function(egCore) {
     var service = {};