A new editor mode is introduced: "visualReview mode". This issue relates to T5DEV-158

General layout and features of "visualReview mode"

• If the import provides PDFs in pdf_for_layoutedReview, the "visualReview mode" is the default editor mode
• The screen is split into 2 areas, a larger and upper part and a lower and smaller part
• The user can manually alter the size of the 2 areas by dragging the border
• In the larger and upper part of the browser window the content in layout is provided
• In the lower, smaller area a reduced translate5 editor is shown (see attached PDF for visualization)
• clicking on a sentence in the layout scrolls the segment table in the lower part to the corresponding segment and opens the clicked segment for editing (and saves a previously opened segment).
• opening a segment in the lower part for editing
  • scrolls the content in layout
  • places the current segment in the middle of the content in layout
  • highlights the current segment in the content in layout
• text in the preview in layout that is not found in the bilingual data is marked with an explaining tool-tip and not linked (maybe it just does not exist in the bilingual data)
• for segments that could not be linked to the layout above the upper center part of the layout an info message appears informing the user. The message stays, as long as the segment is open for editing. If the segment is not opened for editing, but only clicked at, than the info message appears and disapears, as info messages normally do.

The implementation should be flexible enough, in the future to be easy the pdf content (who is provided in an iframe) be moved in a separate browser window, so the user be able to move the pdf layout where he wants or work on two screens

Conception

• The visual review panel should have collapsible header.
• When this header is expanded, the translate5 header panel is hidden and when the visual review panel is collapsed the translete5 header panel is visible.
• The idea behind is, if the visual review plug-in is active, the user still to have the possibility to use the translate5 header.
• The panels header size should be reduced
  • with css or using extjs
• The panels header title should also do not exist

• for purpose of this test the simple pdf-html layout is provided as attachment (see pdflayout.html)
• we need communication between the iframe and the editor
  • the iframe contains the pdf layout converted in html file with all needed files included, scripts, css, images etc.
• the editor is the translate5 editor. Some of the editors areas are hidden, (east,west,north areas)

• editor - iframe comunication

• for this we will need couple of javascript functions in the iframe so the control-communication will be posible
• function for focusing the segment in iframe
• when segment is selected in the editor
  • scroll the segment in layout, so it is positioned in the center of the layout view
  • simple (proof of concept) code
  • this code is located in the pdflayout html file

    		
       //add scroll to centar function to each element
       //FIXME add this only to the elements with segment tag
       HTMLElement.prototype.scrollToCenter = function(){
            window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
       }
    		
       function focusSegment(segmentId){
    	var iframe=document.getElementById('pdfLayoutIframe');
    	var segmentElement = document.querySelectorAll("[data-segment-id='"+segmentId+"']");
    	segmentElement.scrollToCenter();
    	console.log("segment focused.")
       }
    

  • call the focusSegment function from Editor

        var iframe=document.getElementById('pdfLayoutIframe');
        iframe.contentWindow.focusSegment(segmentId);
    

  • this function can be called in Editor.controller.Editor->handleStartEdit()
• other posible functions can be
  • highlightSegment
    • highlights the segment text in the pdf layout
  • insertInfo
    • inserts info icon with tooltip in pdf loyout
• iframe - editor communication
  • first we will need to add onclick listeners on each segment in pdf-layout

window.onload=function(){
	var layoutSegment = document.querySelectorAll("[data-segment-id]");
	for (var i = 0; i < layoutSegment.length; i++) {
		layoutSegment[i].addEventListener('click', selectSegment(layoutSegment[i]), false);
	}
};

– the code above will add on click listener on each mapped segment.
— mapped segment is segment who exist in pdflayout and also in the editor
– when the segment is clicked the followed function is called

function selectSegment(segmentId){
	//find the segment grid
	//find the record in segment grid store by function argument->segmentId
	//call extjs function wich will save the changes in the currently edited segment (if there is one), and open the
        //new segment for editing
	//this new segment is find by quering the segment grid by function argument->segmentId
}

• for saving the segment we can use Editor.controller.Editor->handleStartEdit()
  • this function accept context as parameter
    • the context is extjs object for a grid row
• to find the row context we can search the segment grid using the segmentId parameter

Better option

• The second possibility is to implement all functionality using extjs.
• We are also able using extjs to edit and modify dom elements in iframe, insert custom css, creating tooltips etc.
• Good example for such a implementation is HtmlEditor.js in translate5.
• The extjs implementation will be better for implementing this.

• accessing the iframe using extjs (this is an example from HtmlEditor.js)
  • the 'this' pointer represents instance of a view where all other components are childs (editor view,visual review view etc..)

getDoc: function() {
  	  //it is possible that dom is not initialized
  	  if(!this.iframeEl || !this.iframeEl.dom) {
  	  	return null;
  	  }
      return this.iframeEl.dom.contentDocument || (this.getWin() && this.getWin().document);
  },

• with having instance of the iframe in extjs, we are able to access all dom elements inside the iframe.
• add on click listener on each html element which are representing the segments

segment.on('event name', handleFunction, scope, {delegated: false});

• inserting tooltip on needed location/component

Ext.create('Ext.tip.ToolTip', {
    target: segmentDom,
    html: 'This segment is changed by:aleksandar, etc ..'
});

• appending custom component (it can be image) to specific element (in this case body)

Ext.getBody().appendChild({
    id: 'componentId',
    html: 'Component html tag',
    cls:'component css class',
   
     or inline css style

    style: 'display:inline-block;background:#A2C841;padding:7px;cursor:pointer;'
});