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