From e9e14cbf5c570495649862d1e2a7afdf92ff4c50 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@esilibrary.com>
Date: Mon, 12 Oct 2015 21:12:08 +0000
Subject: [PATCH] webstaff: highlight currently active position in phys char
 wizard

Signed-off-by: Galen Charlton <gmc@esilibrary.com>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>
---
 .../staff/cat/share/t_physchar_wizard.tt2     |  2 +-
 Open-ILS/src/templates/staff/css/cat.css.tt2  |  5 +++
 .../ui/default/staff/cat/services/marcedit.js | 35 +++++++++++++++++--
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/Open-ILS/src/templates/staff/cat/share/t_physchar_wizard.tt2 b/Open-ILS/src/templates/staff/cat/share/t_physchar_wizard.tt2
index 2b869799da..630e00aa66 100644
--- a/Open-ILS/src/templates/staff/cat/share/t_physchar_wizard.tt2
+++ b/Open-ILS/src/templates/staff/cat/share/t_physchar_wizard.tt2
@@ -1,7 +1,7 @@
 <div>
   <div class="row">
     <div class="col-md-4">[% l('007 Value') %]</div>
-    <div class="col-md-4">{{field.data}}</div>
+    <div class="col-md-4"><pre ng-bind-html="highlightedFieldData()"></pre></div>
   </div>
   <div class="row"><div class="col-md-12 pad-vert"><hr/></div></div>
   <div class="row">
diff --git a/Open-ILS/src/templates/staff/css/cat.css.tt2 b/Open-ILS/src/templates/staff/css/cat.css.tt2
index a94f56ef17..3b87e4283d 100644
--- a/Open-ILS/src/templates/staff/css/cat.css.tt2
+++ b/Open-ILS/src/templates/staff/css/cat.css.tt2
@@ -90,6 +90,11 @@ input.marcedit:focus {
     min-width: 1em;
 }
 
+.active-physchar {
+    font-weight: bold;
+    color: red;
+}
+
 .tooltip {
     /* width: 10em; */
 }
diff --git a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
index 026767fc73..412c02e96e 100644
--- a/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
@@ -1625,7 +1625,7 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
     }
 })
 
-.directive("egPhyscharWizard", function () {
+.directive("egPhyscharWizard", ['$sce', function ($sce) {
     return {
         restrict: 'E',
         replace: true,
@@ -1641,6 +1641,12 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                 // step==0 means we are currently selecting the type
                 $scope.step = 0;
 
+                // position and offset of the "subfields" we're
+                // currently editing; this is maintained as a convenience
+                // for the highlighting of the currently active position
+                $scope.offset = 0;
+                $scope.len = 1;
+
                 if (!$scope.field.data) 
                     $scope.field.data = '';
 
@@ -1661,6 +1667,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                     var promise;
 
                     if ($scope.step == 0) {
+                        $scope.offset = 0;
+                        $scope.len    = 1;
                         promise = egTagTable.getPhysCharTypeMap();
                     } else {
                         promise = current_subfield().then(
@@ -1697,6 +1705,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                         var after = value.substr(slot[0] + slot[1]);
                         $scope.field.data = 
                             before + new_val.substr(0, slot[1]) + after;
+                        $scope.offset = slot[0];
+                        $scope.len    = slot[1];
                     });
                 }
 
@@ -1745,6 +1755,8 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                             return (opt.ptype_key() == current_ptype())})[0];
                     } else {
                         get_step_slot().then(function(slot) {
+                            $scope.offset = slot[0];
+                            $scope.len    = slot[1];
                             var val = String.prototype.substr.apply(                      
                                 $scope.field.data, slot);
                             if (val) {
@@ -1757,11 +1769,30 @@ angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
                         })
                     }
                 }
+
+                $scope.highlightedFieldData = function() {
+                    if (
+                            $scope.len && $scope.field.data &&
+                            $scope.field.data.length > 0 &&
+                            $scope.field.data.length >= $scope.offset
+                        ) {
+                        return $sce.trustAsHtml(
+                            $scope.field.data.substring(0, $scope.offset) + 
+                            '<span class="active-physchar">' +
+                            $scope.field.data.substr($scope.offset, $scope.len) +
+                            '</span>' +
+                            $scope.field.data.substr($scope.offset + $scope.len)
+                        );
+                    } else {
+                        return $scope.field.data;
+                    }
+                };
+
                 set_values_for_step();
             }
         ]
     }
-})
+}])
 
 
 .directive("egMarcEditAuthorityBrowser", function () {
-- 
2.43.2