]> git.evergreen-ils.org Git - Evergreen.git/blob - Open-ILS/web/js/ui/default/staff/cat/services/marcedit.js
LP#1402797 insert 00[678], building 008 from record data
[Evergreen.git] / 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 : scope}, 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><label class="marcedit marcsfcodedelimiter"'+
142                         'for="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}s{{subfield[2]}}code" '+
143                         '>‡</label><eg-marc-edit-editable '+
144                         'itype="sfc" '+
145                         'class="marcedit marcsf marcsfcode" '+
146                         'field="field" '+
147                         'subfield="subfield" '+
148                         'content="subfield[0]" '+
149                         'max="1" '+
150                         'on-keydown="onKeydown" '+
151                         'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}s{{subfield[2]}}code" '+
152                     '/></span>'+
153                     '<span><eg-marc-edit-editable '+
154                         'itype="sfv" '+
155                         'class="marcedit marcsf marcsfvalue" '+
156                         'field="field" '+
157                         'subfield="subfield" '+
158                         'content="subfield[1]" '+
159                         'on-keydown="onKeydown" '+
160                         'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}s{{subfield[2]}}value" '+
161                     '/></span>'+
162                   '</span>',
163         scope: { field: "=", subfield: "=", onKeydown: '=' },
164         replace: false
165     }
166 })
167
168 .directive("egMarcEditInd", function () {
169     return {
170         transclude: true,
171         restrict: 'E',
172         template: '<span><eg-marc-edit-editable '+
173                       'itype="ind" '+
174                       'class="marcedit marcind" '+
175                       'field="field" '+
176                       'content="ind" '+
177                       'max="1" '+
178                       'on-keydown="onKeydown" '+
179                       'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}i{{indNumber}}"'+
180                       '/></span>',
181         scope: { ind : '=', field: '=', onKeydown: '=', indNumber: '@' },
182         replace: false,
183     }
184 })
185
186 .directive("egMarcEditTag", function () {
187     return {
188         transclude: true,
189         restrict: 'E',
190         template: '<span><eg-marc-edit-editable '+
191                       'itype="tag" '+
192                       'class="marcedit marctag" '+
193                       'field="field" '+
194                       'content="tag" '+
195                       'max="3" '+
196                       'on-keydown="onKeydown" '+
197                       'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}tag"'+
198                       '/></span>',
199         scope: { tag : '=', field: '=', onKeydown: '=' },
200         replace: false
201     }
202 })
203
204 .directive("egMarcEditDatafield", function () {
205     return {
206         transclude: true,
207         restrict: 'E',
208         template: '<div>'+
209                     '<span><eg-marc-edit-tag field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
210                     '<span><eg-marc-edit-ind field="field" ind="field.ind1" on-keydown="onKeydown" ind-number="1"/></span>'+
211                     '<span><eg-marc-edit-ind field="field" ind="field.ind2" on-keydown="onKeydown" ind-number="2"/></span>'+
212                     '<span><eg-marc-edit-subfield ng-repeat="subfield in field.subfields" subfield="subfield" field="field" on-keydown="onKeydown"/></span>'+
213                   '</div>',
214         scope: { field: "=", onKeydown: '=' }
215     }
216 })
217
218 .directive("egMarcEditControlfield", function () {
219     return {
220         transclude: true,
221         restrict: 'E',
222         template: '<div>'+
223                     '<span><eg-marc-edit-tag field="field" tag="field.tag" on-keydown="onKeydown"/></span>'+
224                     '<span><eg-marc-edit-editable '+
225                       'itype="cfld" '+
226                       'field="field" '+
227                       'class="marcedit marcdata" '+
228                       'content="field.data" '+
229                       'on-keydown="onKeydown" '+
230                       'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}data"'+
231                       '/></span>'+
232                   '</div>',
233         scope: { field: "=", onKeydown: '=' }
234     }
235 })
236
237 .directive("egMarcEditLeader", function () {
238     return {
239         transclude: true,
240         restrict: 'E',
241         template: '<div>'+
242                     '<span><eg-marc-edit-editable '+
243                       'class="marcedit marctag" '+
244                       'content="tag" '+
245                       'on-keydown="onKeydown" '+
246                       'id="leadertag" '+
247                       'disabled="disabled"'+
248                       '/></span>'+
249                     '<span><eg-marc-edit-editable '+
250                       'class="marcedit marcdata" '+
251                       'itype="ldr" '+
252                       'max="{{record.leader.length}}" '+
253                       'content="record.leader" '+
254                       'id="r{{record.subfield(\'901\',\'c\')[1]}}leaderdata" '+
255                       'on-keydown="onKeydown"'+
256                       '/></span>'+
257                   '</div>',
258         controller : ['$scope',
259             function ( $scope ) {
260                 $scope.tag = 'LDR';
261             }
262         ],
263         scope: { record: "=", onKeydown: '=' }
264     }
265 })
266
267 /// TODO: fixed field editor and such
268 .directive("egMarcEditRecord", function () {
269     return {
270         template: '<form ng-submit="saveRecord()">'+
271                   '<div class="marcrecord">'+
272                     '<div><eg-marc-edit-leader record="record" on-keydown="onKeydown"/></div>'+
273                     '<div><eg-marc-edit-controlfield '+
274                         'ng-repeat="field in controlfields" '+
275                         'field="field" on-keydown="onKeydown"'+
276                         'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}"'+
277                         '/></div>'+
278                     '<div><eg-marc-edit-datafield '+
279                         'ng-repeat="field in datafields" '+
280                         'field="field" on-keydown="onKeydown" '+
281                         'id="r{{field.record.subfield(\'901\',\'c\')[1]}}f{{field.position}}"'+
282                         '/></div>'+
283                   '</div>'+
284                   '<button class="btn btn-default" type="submit">Save</button>'+
285                   '</form>'+
286                   '<button class="btn btn-default" ng-click="seeBreaker()">Breaker</button>',
287         restrict: 'E',
288         replace: false,
289         scope: { recordId : '=', maxUndo : '@' },
290         link: function (scope, element, attrs) {
291
292             element.bind('click', function(e) {;
293                 scope.current_event_target = $(e.target).attr('id');
294                 if (scope.current_event_target) {
295                     console.log('Recording click event on ' + scope.current_event_target);
296                     scope.current_event_target_cursor_pos =
297                         e.target.selectionDirection=='backward' ?
298                             e.target.selectionStart :
299                             e.target.selectionEnd;
300                 }
301             });
302
303         },
304         controller : ['$timeout','$scope','egCore',
305             function ( $timeout , $scope , egCore ) {
306
307                 $scope.max_undo = $scope.maxUndo || 100;
308                 $scope.record_undo_stack = [];
309                 $scope.record_redo_stack = [];
310                 $scope.in_undo = false;
311                 $scope.in_redo = false;
312                 $scope.record = new MARC.Record();
313                 $scope.save_stack_depth = 0;
314                 $scope.controlfields = [];
315                 $scope.datafields = [];
316
317                 $scope.onKeydown = function (event) {
318                     var event_return = true;
319
320                     console.log(
321                         'keydown: which='+event.which+
322                         ', ctrlKey='+event.ctrlKey+
323                         ', shiftKey='+event.shiftKey+
324                         ', altKey='+event.altKey+
325                         ', metaKey='+event.altKey
326                     );
327
328                     if (event.which == 89 && event.ctrlKey) { // ctrl+y, redo
329                         event_return = $scope.processRedo();
330                     } else if (event.which == 90 && event.ctrlKey) { // ctrl+z, undo
331                         event_return = $scope.processUndo();
332                     } else if ((event.which == 68 || event.which == 73) && event.ctrlKey) { // ctrl+d or ctrl+i, insert subfield
333
334                         var element = $(event.target);
335                         var new_sf, index_sf, move_data;
336
337                         if (element.hasClass('marcsfvalue')) {
338                             index_sf = event.data.scope.subfield[2];
339                             new_sf = index_sf + 1;
340
341                             var start = event.target.selectionStart;
342                             var end = event.target.selectionEnd - event.target.selectionStart ?
343                                     event.target.selectionEnd :
344                                     event.target.value.length;
345
346                             move_data = event.target.value.substring(start,end);
347
348                         } else if (element.hasClass('marcsfcode')) {
349                             index_sf = event.data.scope.subfield[2];
350                             new_sf = index_sf + 1;
351                         } else if (element.hasClass('marctag') || element.hasClass('marcind')) {
352                             index_sf = 0;
353                             new_sf = index_sf;
354                         }
355
356                         $scope.current_event_target = 'r' + $scope.recordId +
357                                                       'f' + event.data.scope.field.position + 
358                                                       's' + new_sf + 'code';
359
360                         event.data.scope.field.subfields.forEach(function(sf) {
361                             if (sf[2] >= new_sf) sf[2]++;
362                             if (sf[2] == index_sf) sf[1] = event.target.value.substring(0,start) + event.target.value.substring(end);
363                         });
364                         event.data.scope.field.subfields.splice(
365                             new_sf,
366                             0,
367                             [' ', move_data, new_sf ]
368                         );
369
370                         $scope.current_event_target_cursor_pos = 0;
371                         $scope.current_event_target_cursor_pos_end = 1;
372
373                         $timeout(function(){$scope.$digest()}).then(setCaret);
374
375                         event_return = false;
376
377                     } else if (event.which == 117 && event.shiftKey) { // shift + F6, insert 006
378                         event.data.scope.field.record.insertOrderedFields(
379                             new MARC.Field({
380                                 tag : '006',
381                                 data : '                                        '
382                             })
383                         );
384
385                         $scope.force_render = true;
386                         $timeout(function(){$scope.$digest()}).then(setCaret);
387
388                         event_return = false;
389
390                     } else if (event.which == 118 && event.shiftKey) { // shift + F7, insert 007
391                         event.data.scope.field.record.insertOrderedFields(
392                             new MARC.Field({
393                                 tag : '007',
394                                 data : '                                        '
395                             })
396                         );
397
398                         $scope.force_render = true;
399                         $timeout(function(){$scope.$digest()}).then(setCaret);
400
401                         event_return = false;
402
403                     } else if (event.which == 119 && event.shiftKey) { // shift + F8, insert/replace 008
404                         var new_008_data = event.data.scope.field.record.generate008();
405
406
407                         var old_008s = event.data.scope.field.record.field('008',true);
408                         old_008s.forEach(function(o) {
409                             var domnode = $('#r'+o.record.subfield('901','c')[1] + 'f' + o.position);
410                             domnode.scope().$destroy();
411                             domnode.remove();
412                             event.data.scope.field.record.deleteFields(o);
413                         });
414
415                         event.data.scope.field.record.insertOrderedFields(
416                             new MARC.Field({
417                                 tag : '008',
418                                 data : new_008_data
419                             })
420                         );
421
422                         $scope.force_render = true;
423                         $timeout(function(){$scope.$digest()}).then(setCaret);
424
425                         event_return = false;
426
427                     } else if (event.which == 13 && event.ctrlKey) { // ctrl+enter, insert datafield
428
429                         var element = $(event.target);
430
431                         var index_field = event.data.scope.field.position;
432                         var new_field = index_field + 1;
433
434                         event.data.scope.field.record.insertFieldsAfter(
435                             event.data.scope.field,
436                             new MARC.Field({
437                                 tag : '999',
438                                 subfields : [[' ','',0]]
439                             })
440                         );
441
442                         $scope.current_event_target = 'r' + $scope.recordId +
443                                                       'f' + new_field + 'tag';
444
445                         $scope.current_event_target_cursor_pos = 0;
446                         $scope.current_event_target_cursor_pos_end = 3;
447                         $scope.force_render = true;
448
449                         $timeout(function(){$scope.$digest()}).then(setCaret);
450
451                         event_return = false;
452
453                     } else if (event.which == 46 && event.ctrlKey) { // ctrl+del, remove field
454
455                         var del_field = event.data.scope.field.position;
456
457                         var domnode = $('#r'+event.data.scope.field.record.subfield('901','c')[1] + 'f' + del_field);
458
459                         event.data.scope.field.record.deleteFields(
460                             event.data.scope.field
461                         );
462
463                         domnode.scope().$destroy();
464                         domnode.remove();
465
466                         $scope.current_event_target = 'r' + $scope.recordId +
467                                                       'f' + del_field + 'tag';
468
469                         $scope.current_event_target_cursor_pos = 0;
470                         $scope.current_event_target_cursor_pos_end = 0
471                         $scope.force_render = true;
472
473                         $timeout(function(){$scope.$digest()}).then(setCaret);
474
475                         event_return = false;
476
477                     } else if (event.which == 46 && event.shiftKey && $(event.target).hasClass('marcsf')) { // shift+del, remove subfield
478
479                         var sf = event.data.scope.subfield[2] - 1;
480                         if (sf == -1) sf = 0;
481
482                         event.data.scope.field.deleteExactSubfields(
483                             event.data.scope.subfield
484                         );
485
486                         if (!event.data.scope.field.subfields[sf]) {
487                             $scope.current_event_target = 'r' + $scope.recordId +
488                                                           'f' + event.data.scope.field.position + 
489                                                           'tag';
490                         } else {
491                             $scope.current_event_target = 'r' + $scope.recordId +
492                                                           'f' + event.data.scope.field.position + 
493                                                           's' + sf + 'value';
494                         }
495
496                         $scope.current_event_target_cursor_pos = 0;
497                         $scope.current_event_target_cursor_pos_end = 0;
498                         $scope.force_render = true;
499
500                         $timeout(function(){$scope.$digest()}).then(setCaret);
501
502                         event_return = false;
503
504                     } else { // Assumes only marc editor elements have IDs that can trigger this event handler.
505                         $scope.current_event_target = $(event.target).attr('id');
506                         if ($scope.current_event_target) {
507                             $scope.current_event_target_cursor_pos =
508                                 event.target.selectionDirection=='backward' ?
509                                     event.target.selectionStart :
510                                     event.target.selectionEnd;
511                         }
512                     }
513
514                     return event_return;
515                 };
516
517                 function setCaret() {
518                     if ($scope.current_event_target) {
519                         if (!$scope.current_event_target_cursor_pos_end)
520                             $scope.current_event_target_cursor_pos_end = $scope.current_event_target_cursor_pos
521
522                         var element = $('#'+$scope.current_event_target).get(0);
523                         if (element) {
524                             element.focus();
525                             element.setSelectionRange(
526                                 $scope.current_event_target_cursor_pos,
527                                 $scope.current_event_target_cursor_pos_end
528                             );
529                             $scope.current_event_target = null;
530                         }
531                     }
532                 }
533
534                 function loadRecord() {
535                     return egCore.pcrud.retrieve(
536                         'bre', $scope.recordId
537                     ).then(function(rec) {
538                         $scope.in_redo = true;
539                         $scope.bre = rec;
540                         $scope.record = new MARC.Record({ marcxml : $scope.bre.marc() });
541                         $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
542                         $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
543                         $scope.save_stack_depth = $scope.record_undo_stack.length;
544                     }).then(setCaret);
545                 }
546
547                 $scope.$watch('record.toBreaker()', function (newVal, oldVal) {
548                     if (!$scope.in_undo && !$scope.in_redo && oldVal != newVal) {
549                         $scope.record_undo_stack.push({
550                             breaker: oldVal,
551                             target: $scope.current_event_target,
552                             pos: $scope.current_event_target_cursor_pos
553                         });
554
555                         if ($scope.force_render) {
556                             $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
557                             $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
558                             $scope.force_render = false;
559                         }
560
561                         if ($scope.record_undo_stack.length != $scope.save_stack_depth) {
562                             console.log('should get a listener... does not');
563                             $('body').on('beforeunload', function(){
564                                 return 'There is unsaved data in this record.'
565                             });
566                         } else {
567                             $('body').off('beforeunload');
568                         }
569                     }
570
571                     if ($scope.record_undo_stack.length > $scope.max_undo)
572                         $scope.record_undo_stack.shift();
573
574                     console.log('undo stack is ' + $scope.record_undo_stack.length + ' deep');
575                     $scope.in_redo = false;
576                     $scope.in_undo = false;
577                 });
578
579                 $scope.processUndo = function () {
580                     if ($scope.record_undo_stack.length) {
581                         $scope.in_undo = true;
582
583                         var undo_item = $scope.record_undo_stack.pop();
584                         $scope.record_redo_stack.push(undo_item);
585
586                         $scope.record = new MARC.Record({ marcbreaker : undo_item.breaker });
587                         $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
588                         $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
589
590                         $scope.current_event_target = undo_item.target;
591                         $scope.current_event_target_cursor_pos = undo_item.pos;
592                         console.log('Undo targeting ' + $scope.current_event_target + ' position ' + $scope.current_event_target_cursor_pos);
593
594                         $timeout(function(){$scope.$digest()}).then(setCaret);
595                         return false;
596                     }
597
598                     return true;
599                 };
600
601                 $scope.processRedo = function () {
602                     if ($scope.record_redo_stack.length) {
603                         $scope.in_redo = true;
604
605                         var redo_item = $scope.record_redo_stack.pop();
606                         $scope.record_undo_stack.push(redo_item);
607
608                         $scope.record = new MARC.Record({ marcbreaker : redo_item.breaker });
609                         $scope.controlfields = $scope.record.fields.filter(function(f){ return f.isControlfield() });
610                         $scope.datafields = $scope.record.fields.filter(function(f){ return !f.isControlfield() });
611
612                         $scope.current_event_target = redo_item.target;
613                         $scope.current_event_target_cursor_pos = redo_item.pos;
614                         console.log('Redo targeting ' + $scope.current_event_target + ' position ' + $scope.current_event_target_cursor_pos);
615
616                         $timeout(function(){$scope.$digest()}).then(setCaret);
617                         return false;
618                     }
619
620                     return true;
621                 };
622
623                 $scope.saveRecord = function () {
624                     $scope.bre.marc($scope.record.toXmlString());
625                     return egCore.pcrud.update(
626                         $scope.bre
627                     ).then(loadRecord);
628                 };
629
630                 $scope.seeBreaker = function () {
631                     alert($scope.record.toBreaker());
632                 };
633
634                 $scope.$watch('recordId',
635                     function(newVal, oldVal) {
636                         if (newVal && newVal !== oldVal) {
637                             loadRecord();
638                         }
639                     }
640                 );
641
642                 if ($scope.recordId)
643                     loadRecord();
644
645             }
646         ]          
647     }
648 })
649
650 ;