1 /**
  2  * 
  3  * @param {} args
  4  */
  5 Monk.component.AdvancedViewerComponent = function(args) {
  6 // track the currently loaded chunk
  7 this.currentChunk = null;
  8 this.documentList=[];
  9 this.currentSelectedChunkIndex=0;
 10 // updated by the Monk.event.chunk.FeatureSelected event
 11 this.selectedTerm=null;
 12 this.selectedTermType=null;
 13 
 14 this.store = new Ext.data.SimpleStore({
 15      fields: ['id','label'],
 16      data : []
 17     });
 18     
 19 this.recordDef = Ext.data.Record.create([
 20   	{name: 'id'},
 21     {name: 'label'}
 22    ]);   
 23 
 24 Monk.component.AdvancedViewerComponent.superclass.constructor.call(this, args);
 25 }
 26 
 27 
 28 Workbench.extend(Monk.component.AdvancedViewerComponent , Workbench.component.Component, {
 29 label : "Advanced Viewer",
 30 description : "This component is for displaying chunk text",
 31 "window" : this.window,
 32 lookup:{},
 33 displaySearchSyntaxHelp :function(){
 34 	var helpString ="<p>Three types of search are available: <i>part of speech, lemma and spelling</i>. " +
 35 			"For example, to search for all nouns in a work you would form the query <b>\"* (n)\"</b>" +
 36 			" Lemma queries have the lemma followed by part of speech in parenthesis, " +
 37 			"such as <b>\"love \"(n)</b>. Spelling queries should be the exact form of the word.</p><p> " +
 38 			"Queries can use \"|\" and \"*\" operators. For example: <b>\"* (fr-it) | * (fr-ge)\"</b> " +
 39 			"will return all Italian and German words in the work. You may not combine " +
 40 			"different types of searches. If you use multiple terms in a query, " +
 41 			"the concordance search will assume \"or\" statements between them.</p>";
 42 	 Monk.component.messenger.alert('Monk Workbench', helpString, 
 43 	 this.window.parent ? this.window.parent.window : this.window);
 44 	
 45 },
 46 synchronizeList :function(currentId){
 47 	//debugger;
 48 	if(this.documentList!=null){
 49 		if(this.documentList[this.currentSelectedChunkIndex]==id){
 50      		return;
 51 		}else{
 52 			// iterate through the array and update the currentSelectedChunkIndex
 53 			for(var i=0; i < this.documentList.length; i++){
 54 				if(this.documentList[i]==currentId){
 55 					this.currentSelectedChunkIndex=i;
 56 					break;
 57 				}
 58 			}
 59 
 60 
 61 		}
 62 	}
 63 },
 64 showText : function(data) {
 65     document.getElementById("view").innerHTML = data.html;
 66     Ext.get('chunkLabel').update(data.text);
 67 },
 68 showConcordance: function(data){
 69 	Ext.get("con-data").update(data.html);
 70 },
 71 showNext: function(){
 72 	//debugger;
 73  	if(this.documentList==null){
 74  		return;
 75  	}
 76  	if(this.currentSelectedChunkIndex>= this.documentList.length-1){
 77  		Monk.component.messenger.growl('Monk Workbench','Already at the last work/workpart.');
 78         return;
 79  	}else{
 80  		Ext.getCmp("prevButton").show();
 81  		this.currentSelectedChunkIndex++;
 82  	}
 83     this.currentChunk = this.documentList[this.currentSelectedChunkIndex];
 84  	this.notify(new Monk.event.chunk.ChunkSelected({
 85                         label: 'Text workpart selected: '+'"'+this.currentChunk+'"'
 86                     }),
 87                     {id: this.currentChunk, text: this.currentChunk.id, displayText:true}
 88      );
 89 
 90 
 91 
 92 
 93      if(this.currentSelectedChunkIndex==this.documentList.length-1){
 94      	Ext.getCmp("nextButton").hide();
 95      }
 96  },
 97 showPrev: function(){
 98         if(this.documentList==null){
 99          return;
100          }
101 
102     if(this.currentSelectedChunkIndex<=0){
103       Monk.component.messenger.growl('Monk Workbench','Already at the first work/workpart.');
104       return;
105     }else{
106     	Ext.getCmp("nextButton").show();
107         this.currentSelectedChunkIndex--;
108     }
109     this.currentChunk = this.documentList[this.currentSelectedChunkIndex];
110     this.notify(new Monk.event.chunk.ChunkSelected({
111                         label: 'Text workpart selected: '+'"'+this.currentChunk+'"'
112                     }),
113                     {id: this.currentChunk, text: this.currentChunk.id, displayText:true}
114      );
115    /*
116     if(this.selectedTerm !=null){
117             var params= {
118                         term: this.selectedTerm,
119                         type: this.selectedTermType
120                     };
121             this.getFeatureConcordance(params);
122      }
123      */
124     if(this.currentSelectedChunkIndex==0){
125     	Ext.getCmp("prevButton").hide();
126     }
127 
128  },
129 getFeatureConcordanceFromUserInput: function(term){
130 	if(this.currentChunk==null){
131         return;
132     }
133     var posTest = /\(.+?\)$/;
134     var feature ="spelling";
135     if (!term.match(posTest)) {
136     	feature ="spelling";
137     }else{
138         feature="lemma";	
139     }
140     this.selectedTerm = term;
141     this.selectedTermType=feature;
142     var data={'term':term, 'type': this.selectedTermType};
143     Monk.data.chunk.getChunkConcordance(this.currentChunk,data);
144 }, 
145  
146 getFeatureConcordance: function(data){
147 	if(this.currentChunk==null){
148 		return;
149 	}
150  	this.selectedTerm = data.term;
151  	this.selectedTermType=data.type;
152  	Monk.data.chunk.getChunkConcordance(this.currentChunk,data);
153 },
154 setDocumentList: function(data){
155 	//debugger;
156  	this.documentList=data;
157  	this.store.removeAll();
158  	if(data.length>0){
159  		this.currentSelectedChunkIndex=0;
160  		this.currentChunk= data[0];
161  	    this.notify(new Monk.event.chunk.ChunkSelected({
162                         label: 'Text workpart selected: '+'"'+this.currentChunk+'"'
163                     }),
164                     {id: this.currentChunk, text: this.currentChunk, displayText:true}
165         );
166         if(Ext.getCmp("navigationtable")!=null)
167             Ext.getCmp("navigationtable").show();
168 
169         if(Ext.getCmp("nextButton")!=null)
170  	      Ext.getCmp("nextButton").show();
171  	      
172  	      this.showFirst();
173  	      
174  	}
175  },
176  
177 showFirst: function(){
178     this.currentSelectedChunkIndex=0;
179     this.currentChunk = this.documentList[this.currentSelectedChunkIndex];
180     this.notify(new Monk.event.chunk.ChunkSelected({
181                         label: 'Text workpart selected: '+'"'+this.currentChunk+'"'
182                     }),
183                     {id: this.currentChunk, text: this.currentChunk, displayText:true}
184      );
185 },
186 
187 handle: function(monkEvent, data){
188     if (monkEvent.instanceOf(Monk.event.chunk.ChunkSelected)) {
189         Workbench.console.info("DATA: "+data.displayText+ " " + data.id);
190 	    if(data.displayText==true && data.id!=null){
191 	        Ext.getCmp("viewContainer").body.mask("Loading text...");
192             Workbench.component.manager.handleFocus(this);
193             this.currentChunk = data.id;
194             Ext.get("con-data").update("");
195             this.synchronizeList(data.id);
196             Monk.data.chunk.retrieveChunkContents(data);
197             if(this.selectedTerm !=null){
198                 var params= {
199                     term: this.selectedTerm,
200                     type: this.selectedTermType
201                 };
202         	    this.getFeatureConcordance(params);
203             }
204 	   }
205     } /*else if (monkEvent.instanceOf(Monk.event.chunk.ChunkChecked)) {
206             if (data.checked) {
207             	this.store.add(new this.recordDef({id: data.id, label: data.id}, data.id))
208             }
209             else {
210             	this.store.remove(this.store.getById(data.id));
211             	this.workListView.refresh();
212             }
213     }*/else if(monkEvent.instanceOf(Monk.event.chunk.ChunkContentsRetrieved)){
214           this.window.scrollTo(0,0);
215           Ext.getCmp("viewContainer").body.unmask();
216           Monk.data.chunk.retrieveChunkTOC(data);
217           this.showText(data);
218 	}else if(monkEvent.instanceOf(Monk.event.chunk.ChunkTOCRetrieved)){
219           Monk.data.chunk.retrieveChunkBib(data);
220           Ext.getCmp('tools-panel-cmp').show();
221           Ext.getCmp('tocPanel').body.update(data.html);
222 	}else if(monkEvent.instanceOf(Monk.event.chunk.ChunkBibRetrieved)){
223           Ext.getCmp('tools-panel-cmp').show();
224           Ext.getCmp('bibPanel').body.update(data.html);
225           Monk.data.chunk.retrieveChunkHeader(data);
226     }else if(monkEvent.instanceOf(Monk.event.chunk.ChunksSimilarRetrieved)){
227     	this.setDocumentList(data);
228     }else if(monkEvent.instanceOf(Monk.event.chunk.FeatureSelected)){
229     	this.getFeatureConcordance(data);
230     }else if(monkEvent.instanceOf(Monk.event.chunk.ChunkConcordanceRetrieved)){
231     	this.showConcordance(data);
232     }else if(monkEvent.instanceOf(Monk.event.chunk.ChunkHeaderRetrieved)){
233     	this.showHeader(data);
234     }else if(monkEvent.instanceOf(Monk.event.workset.WorksetLoaded)){
235     	var worklist=Monk.component.dataManager.getWorklist();
236     	var chunks = [];
237         for (var chunkId in worklist) {
238             var chunk = worklist[chunkId];
239             chunks.push(chunk.id);
240         }
241     	this.setDocumentList(chunks);
242     	this.showFirst();
243     }
244 
245 
246 },
247 	showDetails : function(){
248 		var view=Ext.getCmp("data-view");
249         var selNode = view.getSelectedNodes();
250         if(selNode && selNode.length > 0){
251             selNode = selNode[0];
252             var data = {id:this.lookup[selNode.id], text: this.currentChunk, displayText:true};
253              this.notify(
254                     new Monk.event.chunk.ChunkSelected({
255                         label: 'Text chunk selected: '+'"'+data.label+'"'
256                     }), data
257                 );
258         }else{
259         }
260     },
261     
262     showHeader: function(data){
263     	Ext.get("teiHeader").update(data.html);
264     },
265 
266 //    scrollToId : function(id){
267 //        var y = Ext.get(id).getY();
268 //        this.window.scrollTo(0, y);
269 //    }
270 
271 init: function(){
272 
273   var prevButton = new Ext.Button({
274         text: '<',
275         id: 'prevButton',
276         width: 40,
277         handler: this.showPrev,
278         tooltip: 'Fetch previous text',
279         scope: this
280     });
281 
282 
283 
284     var nextButton = new Ext.Button({
285         text: '>',
286         id: 'nextButton',
287         width: 40,
288         handler: this.showNext,
289         tooltip: 'Fetch following text',
290         scope: this
291     });
292 
293     
294       var tpl = new Ext.XTemplate(
295       	'<tpl for="."> <span class="view-data-link" id="{id}">{label}</span><tpl if="xindex!=xcount">, </tpl></tpl>'
296      );
297      
298      var formatData = function(data){
299         data.id = data.id;
300         data.label = data.label;// change this with the title of the work
301         this.lookup[data.id] = data;
302         return data;            
303       };
304 
305 
306     this.workListView  =new Ext.DataView({
307 	    id:'data-view',
308         store: this.store,
309         tpl: tpl,
310         autoHeight:true,
311         multiSelect: true,
312         overClass:'x-view-over',
313         itemSelector:'span.thumb-wrap',
314         emptyText: 'No Works to Display',
315         prepareData: formatData.createDelegate(this),
316         listeners: {
317             'selectionchange': {fn:this.showDetails, scope:this, buffer:100}
318          }      
319             
320     });
321 
322     
323     var workListPanel = new Ext.Panel({
324         id:'worklist-view',
325         frame:true,
326 //        width:535,
327 //        autoHeight:true,
328         collapsible:false,
329   //      layout:'fit',
330         autoScroll: true,
331         items: this.workListView,
332         listeners: {
333             'render' :{
334             	fn: function(panel) {
335             		panel.body.on('click', function(e, target) {
336             			if (target) {
337             				var link = Ext.fly(target);
338             				if (link.hasClass('view-data-link')) {
339             					this.workListView.select(target)
340             				}
341             			}
342             		}, this);
343             	}
344             	,scope: this
345             }
346             
347          }      
348     });
349     
350     this.viewport = new Ext.Viewport({
351         id: 'viewport',
352         layout: 'border',
353         renderTo: 'component',
354         defaults: {
355             collapsible: true,
356             animCollapse: false,
357             floatable: false
358         },
359         items: [{
360             id: 'viewContainer',
361             region: 'center',
362             collapsible: false,
363             tbar: ['<span id="chunkLabel" class="bookIcon"> </span>', {xtype: 'tbfill'}, prevButton, nextButton],
364             autoScroll: true,
365             html: '<div id="view"></div>'
366         },{
367             region: 'east',
368             title: 'Info',
369             width: 200,
370             id: 'tools-panel-cmp',
371             layout: 'row-fit',
372             collapsed: true,
373             split: true,
374             defaults: {
375                 bodyStyle: 'padding: 5px',
376                 autoScroll: true
377             },
378             items : [{
379                 id: 'bibPanel',
380                 title: 'Bibliographic Info',
381                 height: 200,
382                 html: ' '
383             },{
384                 id: 'tocPanel',
385                 title: 'Table of Contents',
386                 html: ' '
387             }]
388         },{
389             id: 'options-panel',
390             region: 'south',
391             title: 'Options',
392             collapsed: false,
393             split: true,
394             height: 200,
395             listeners: {
396                 resize: {fn: function(component, adjWidth, adjHeight, rawWidth, rawHeight){
397                     Ext.getCmp('concordanceTab').setHeight(adjHeight - 50);
398                     Ext.getCmp('teiHeaderTab').setHeight(adjHeight - 50);
399                 }, scope: this}
400             },
401             items: [{
402                 xtype: 'tabpanel',
403                 tabWidth: 135,
404                 activeTab: 0,
405                 layoutOnTabChange: true,
406                 autoHeight: true,
407                 defaults: {autoScroll: true},
408                 deferredRender: false,
409                 border: false,
410                 items:[{
411                     id :'concordanceTab',
412                     title: 'Concordance',
413                     html:'<div id="con-data"></div>',
414                     tbar:[{
415                       xtype:'textfield',
416                       id: 'concordanceValue',
417                       selectOnFocus:true,
418                       width:100,
419                       listeners:{
420                           'render': {
421                            fn:function(){
422                             }, scope:this
423                           },
424                           'specialKey':{
425                              fn: function(field, e ){
426                                 if ( e.getKey() == e.RETURN || e.getKey() == e.ENTER ){  
427                                     this.getFeatureConcordanceFromUserInput(Ext.getCmp("concordanceValue").getValue());
428                                 }
429                              }, scope:this  
430                           }
431                        }
432                     },' ',{
433                         xtype:'button',
434                         id:'concordanceSubmitId',
435                         text: "Find",
436                         name:'concordanceSubmit',
437                         tooltip:'Click to Search for feature.',
438                         handler: function(){
439                            this.getFeatureConcordanceFromUserInput(Ext.getCmp("concordanceValue").getValue());
440                         },
441                         scope:this
442                     },' ','-',{
443                        xtype:'button',
444                        id:'helpId',
445                        text:'Help',
446                        tooltip:'Help on Concordance Syntax',
447                        handler:this.displaySearchSyntaxHelp,
448                        scope:this
449                     }]
450                 },{
451                     title: 'TEI header',
452                     id: 'teiHeaderTab',
453                     html: '<div id="teiHeader"></div>'
454                  }]
455             }]
456         }]
457     });
458     
459    if(Monk.component.dataManager.getWorklist()==null){
460         this.currentChunk = Monk.component.dataManager.getCurrentChunk();
461         this.documentList = Monk.component.dataManager.getChunkSimilar();
462         
463         if(this.documentList!=null && this.documentList.length>0){
464             this.synchronizeList(this.currentChunk);
465             this.setDocumentList(this.documentList);
466         }
467     }
468     
469     if(Monk.component.dataManager.getCurrentChunk()!=null){
470         this.currentChunk = Monk.component.dataManager.getCurrentChunk().id;
471         if (this.currentChunk != null) {
472             this.notify(
473                 new Monk.event.chunk.ChunkSelected({
474                     label: 'Text chunk selected: '+'"'+this.currentChunk+'"'
475                 }), {id:this.currentChunk, text:this.currentChunk, displayText:true}
476             );
477         }
478         
479         var worklist = Monk.component.dataManager.getWorklist();
480         var idList = new Array();
481         for (var chunkId in worklist){
482             idList.push(chunkId);
483         }
484         this.setDocumentList(idList);
485     }
486 
487 }
488 });
489 
490