Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js

   1 /**
   2  *  A MARC editor...
   3  */
   4
   5 angular.module('egMarcMod', ['egCoreMod', 'ui.bootstrap'])
   6
   7 .directive("egContextMenuItem", ['$timeout',function ($timeout) {
   8     return {
   9         restrict: 'E',
  10         replace: true,
  11         template: '<li><a ng-click="setContent(item.value,item.action)">{{item.label}}</a></li>',
  12         scope: { item: '=', content: '=' },
  13         controller: ['$scope','$element',
  14             function ($scope , $element) {
  15                 if (!$scope.item.label) $scope.item.label = $scope.item.value;
  16                 if ($scope.item.divider) {
  17                     $element.style.borderTop = 'solid 1px';
  18                 }
  19
  20                 $scope.setContent = function (v, a) {
  21                     var replace_with = v;
  22                     if (a) replace_with = a($scope,$element,$scope.item.value,$scope.$parent.$parent.content);
  23                     $timeout(function(){
  24                         $scope.$parent.$parent.$apply(function(){
  25                             $scope.$parent.$parent.content = replace_with
  26                         })
  27                     }, 0);
  28                     $($element).parent().css({display: 'none'});
  29                 }
  30             }
  31         ]
  32     }
  33 }])
  34
  35 .directive("egMarcEditEditable", ['$timeout', '$compile', '$document', function ($timeout, $compile, $document) {
  36     return {
  37         restrict: 'E',
  38         replace: true,
  39         template: '<input style="font-family: \'Lucida Console\', Monaco, monospace;" ng-model="content" size="{{content.length * 1.1}}" maxlength="{{max}}" class="" type="text"/>',
  40         scope: {
  41             field: '=',
  42             onKeydown: '=',
  43             subfield: '=',
  44             content: '=',
  45             contextItemContainer: '@',
  46             idPath: '=',
  47             max: '@',
  48             itype: '@'
  49         },
  50         controller : ['$scope',
  51             function ( $scope ) {
  52
  53 /* XXX Example, for testing.  We'll get this from the tag-table services for realz
  54  *
  55                 if (!$scope.contextItemContainer) {
  56                     $scope.contextItemContainer = "default_context";
  57                     $scope[$scope.contextItemContainer] = [
  58                         { value: 'a' },
  59                         { value: 'b' },
  60                         { value: 'c' },
  61                     ];
  62                 }
  63
  64  *
  65  */
  66
  67                 if ($scope.contextItemContainer)
  68                     $scope.item_container = $scope[$scope.contextItemContainer];
  69
  70                 $scope.showContext = function (event) {
  71                     if ($scope.context_menu_element) {
  72                         console.log('Reshowing context menu...');
  73                         $($scope.context_menu_element).css({ display: 'block', top: event.pageY, left: event.pageX });
  74                         $('body').on('click.context_menu',function() {
  75                             $($scope.context_menu_element).css('display','none');
  76                             $('body').off('click.context_menu');
  77                         });
  78                         return false;
  79                     }
  80
  81                     if (angular.isArray($scope.item_container)) { // we have a list of values or transforms
  82                         console.log('Showing context menu...');
  83
  84                         var tmpl =
  85                             '<ul class="dropdown-menu" role="menu">'+
  86                                 '<eg-context-menu-item ng-repeat="item in item_container" item="item" content="content"/>'+
  87                             '</ul>';
  88
  89                         var tnode = angular.element(tmpl);
  90                         $document.find('body').append(tnode);
  91
  92                         $(tnode).css({
  93                             display: 'block',
  94                             top: event.pageY,
  95                             left: event.pageX
  96                         });
  97
  98                         $scope.context_menu_element = tnode;
  99
 100                         $timeout(function() {
 101                             var e = $compile(tnode)($scope);
 102                         }, 0);
 103
 104
 105                         $('body').on('click.context_menu',function() {
 106                             $(tnode).css('display','none');
 107                             $('body').off('click.context_menu');
 108                         });
 109
 110                         return false;
 111                     }
 112
 113                     return true;
 114                 }
 115
 116             }
 117         ],
 118         link: function (scope, element, attrs) {
 119
 120             if (scope.onKeydown) element.bind('keydown', scope.onKeydown);
 121
 122             element.bind('change', function (e) { element.size = scope.max || parseInt(scope.content.length * 1.1) });
 123
 124             if (scope.contextItemContainer && angular.isArray(scope[scope.contextItemContainer]))
 125                 element.bind('contextmenu', scope.showContext);
 126         }
 127     }
 128 }])
 129
 130 .directive("egMarcEditSubfield", function () {
 131     return {
 132         transclude: true,
 133         restrict: 'E',
 134         template: '<span>'+
 135                     '<span><eg-marc-edit-editable '+
 136                         'itype="sfc" '+
 137                         'class="marcsfcode" '+
 138                         'field="field" '+
 139                         'subfield="subfield" '+
 140                         'content="subfield[0]" '+
 141                         'max="1" '+
 142                         'on-keydown="onKeydown" '+
 143                         'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}s{{subfield[2]}}code" '+
 144                     '/></span>'+
 145                     '<span><eg-marc-edit-editable '+
 146                         'itype="sfv" '+
 147                         'class="marcsfvalue" '+
 148                         'field="field" '+
 149                         'subfield="subfield" '+
 150                         'content="subfield[1]" '+
 151                         'on-keydown="onKeydown" '+
 152                         'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}s{{subfield[2]}}value" '+
 153                     '/></span>'+
 154                   '</span>',
 155         scope: { field: "=", subfield: "=", onKeydown: '=' },
 156         replace: false
 157     }
 158 })
 159
 160 .directive("egMarcEditInd", function () {
 161     return {
 162         transclude: true,
 163         restrict: 'E',
 164         template: '<span><eg-marc-edit-editable itype="ind" field="field" content="ind" max="1" on-keydown="onKeydown" id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}i{{indNumber}}"/></span>',
 165         scope: { ind : '=', field: '=', onKeydown: '=', indNumber: '@' },
 166         replace: false,
 167     }
 168 })
 169
 170 .directive("egMarcEditTag", function () {
 171     return {
 172         transclude: true,
 173         restrict: 'E',
 174         template: '<span><eg-marc-edit-editable itype="tag" field="field" content="tag" max="3" on-keydown="onKeydown" id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}tag"/></span>',
 175         scope: { tag : '=', field: '=', onKeydown: '=' },
 176         replace: false
 177     }
 178 })
 179
 180 .directive("egMarcEditDatafield", function () {
 181     return {
 182         transclude: true,
 183         restrict: 'E',
 184         template: '<div>'+
 185                     '<span><eg-marc-edit-tag class="marctag" field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
 186                     '<span><eg-marc-edit-ind class="marcind" field="field" ind="field.ind1" on-keydown="onKeydown" ind-number="1"/></span>'+
 187                     '<span><eg-marc-edit-ind class="marcind" field="field" ind="field.ind2" on-keydown="onKeydown" ind-number="2"/></span>'+
 188                     '<span><eg-marc-edit-subfield ng-repeat="subfield in field.subfields" subfield="subfield" field="field" on-keydown="onKeydown"/></span>'+
 189                   '</div>',
 190         scope: { field: "=", onKeydown: '=' }
 191     }
 192 })
 193
 194 .directive("egMarcEditControlfield", function () {
 195     return {
 196         transclude: true,
 197         restrict: 'E',
 198         template: '<div>'+
 199                     '<span><eg-marc-edit-tag class="marctag" field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
 200                     '<span><eg-marc-edit-editable itype="cfld" field="field" class="marcdata" content="field.data" on-keydown="onKeydown" id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}data"/></span>'+
 201                   '</div>',
 202         scope: { field: "=", onKeydown: '=' }
 203     }
 204 })
 205
 206 .directive("egMarcEditLeader", function () {
 207     return {
 208         transclude: true,
 209         restrict: 'E',
 210         template: '<div>'+
 211                     '<span><eg-marc-edit-editable class="marctag" content="tag" on-keydown="onKeydown" id="leadertag" disabled="disabled"/></span>'+
 212                     '<span><eg-marc-edit-editable class="marcdata" itype="ldr" max="{{record.leader.length}}" content="record.leader" id="r{{record.subfield(\'901\',\'c\')[1]}}leaderdata" on-keydown="onKeydown"/></span>'+
 213                   '</div>',
 214         controller : ['$scope',
 215             function ( $scope ) {
 216                 $scope.tag = 'LDR';
 217             }
 218         ],
 219         scope: { record: "=", onKeydown: '=' }
 220     }
 221 })
 222
 223 /// TODO: fixed field editor and such
 224 .directive("egMarcEditRecord", function () {
 225     return {
 226         template: '<form ng-submit="saveRecord()">'+
 227                   '<div class="marcrecord">'+
 228                     '<div><eg-marc-edit-leader record="record" on-keydown="onKeydown"/></div>'+
 229                     '<div><eg-marc-edit-controlfield ng-repeat="field in controlfields" field="field" on-keydown="onKeydown"/></div>'+
 230                     '<div><eg-marc-edit-datafield ng-repeat="field in datafields" field="field" on-keydown="onKeydown"/></div>'+
 231                   '</div>'+
 232                   '<button class="btn btn-default" type="submit">Save</button>'+
 233                   '</form>'+
 234                   '<button class="btn btn-default" ng-click="seeBreaker()">Breaker</button>',
 235         restrict: 'E',
 236         replace: false,
 237         scope: { recordId : '=', maxUndo : '@' },
 238         controller : ['$timeout','$scope','egCore',
 239             function ( $timeout , $scope , egCore ) {
 240
 241                 $scope.max_undo = $scope.maxUndo || 100;
 242                 $scope.record_undo_stack = [];
 243                 $scope.record_redo_stack = [];
 244                 $scope.in_undo = false;
 245                 $scope.in_redo = false;
 246                 $scope.record = new MARC.Record();
 247
 248                 $scope.onKeydown = function (event) {
 249                     var event_return = true;
 250
 251                     if (event.which == 89 && event.ctrlKey) { // ctrl+y, redo
 252                         event_return = $scope.processRedo();
 253                     } else if (event.which == 90 && event.ctrlKey) { // ctrl+z, undo
 254                         event_return = $scope.processUndo();
 255                     } else { // Assumes only marc editor elements have IDs that can trigger this event handler.
 256                         $scope.current_event_target = $(event.target).attr('id');
 257                         if ($scope.current_event_target) {
 258                             $scope.current_event_target_cursor_pos =
 259                                 event.target.selectionDirection=='backward' ?
 260                                     event.target.selectionStart :
 261                                     event.target.selectionEnd;
 262                         }
 263                     }
 264
 265                     return event_return;
 266                 };
 267
 268                 function setCaret() {
 269                     if ($scope.current_event_target) {
 270                         var element = $('#'+$scope.current_event_target).get(0);
 271                         element.focus();
 272                         element.setSelectionRange(
 273                             $scope.current_event_target_cursor_pos,
 274                             $scope.current_event_target_cursor_pos
 275                         );
 276                         $scope.current_event_target = null;
 277                     }
 278                 }
 279
 280                 function loadRecord() {
 281                     return egCore.pcrud.retrieve(
 282                         'bre', $scope.recordId
 283                     ).then(function(rec) {
 284                         $scope.in_redo = true;
 285                         $scope.bre = rec;
 286                         $scope.record = new MARC.Record({ marcxml : $scope.bre.marc() });
 287                         $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
 288                         $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
 289                     }).then(setCaret);
 290                 }
 291
 292                 $scope.$watch('record.toBreaker()', function (newVal, oldVal) {
 293                     if (!$scope.in_undo && !$scope.in_redo && oldVal != newVal) {
 294                         $scope.record_undo_stack.push({
 295                             breaker: oldVal,
 296                             target: $scope.current_event_target,
 297                             pos: $scope.current_event_target_cursor_pos
 298                         });
 299                     }
 300
 301                     if ($scope.record_undo_stack.length > $scope.max_undo)
 302                         $scope.record_undo_stack.shift();
 303
 304                     console.log('undo stack is ' + $scope.record_undo_stack.length + ' deep');
 305                     $scope.in_redo = false;
 306                     $scope.in_undo = false;
 307                 });
 308
 309                 $scope.processUndo = function () {
 310                     if ($scope.record_undo_stack.length) {
 311                         $scope.in_undo = true;
 312
 313                         var undo_item = $scope.record_undo_stack.pop();
 314                         $scope.record_redo_stack.push(undo_item);
 315
 316                         $scope.record = new MARC.Record({ marcbreaker : undo_item.breaker });
 317                         $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
 318                         $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
 319
 320                         $scope.current_event_target = undo_item.target;
 321                         $scope.current_event_target_cursor_pos = undo_item.pos;
 322                         console.log('Undo targeting ' + $scope.current_event_target + ' position ' + $scope.current_event_target_cursor_pos);
 323
 324                         $timeout(function(){$scope.$digest()}).then(setCaret);
 325                         return false;
 326                     }
 327
 328                     return true;
 329                 };
 330
 331                 $scope.processRedo = function () {
 332                     if ($scope.record_redo_stack.length) {
 333                         $scope.in_redo = true;
 334
 335                         var redo_item = $scope.record_redo_stack.pop();
 336                         $scope.record_undo_stack.push(redo_item);
 337
 338                         $scope.record = new MARC.Record({ marcbreaker : redo_item.breaker });
 339                         $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
 340                         $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
 341
 342                         $scope.current_event_target = redo_item.target;
 343                         $scope.current_event_target_cursor_pos = redo_item.pos;
 344                         console.log('Redo targeting ' + $scope.current_event_target + ' position ' + $scope.current_event_target_cursor_pos);
 345
 346                         $timeout(function(){$scope.$digest()}).then(setCaret);
 347                         return false;
 348                     }
 349
 350                     return true;
 351                 };
 352
 353                 $scope.saveRecord = function () {
 354                     $scope.bre.marc($scope.record.toXmlString());
 355                     return egCore.pcrud.update(
 356                         $scope.bre
 357                     ).then(loadRecord);
 358                 };
 359
 360                 $scope.seeBreaker = function () {
 361                     alert($scope.record.toBreaker());
 362                 };
 363
 364                 $scope.$watch('recordId',
 365                     function(newVal, oldVal) {
 366                         if (newVal && newVal !== oldVal) {
 367                             loadRecord();
 368                         }
 369                     }
 370                 );
 371
 372
 373                 $scope.controlfields = [];
 374                 $scope.datafields = [];
 375
 376                 if ($scope.recordId)
 377                     loadRecord();
 378
 379             }
 380         ]
 381     }
 382 })
 383
 384 ;