add help text to relationship mapper
Tara L Andrews [Wed, 7 Mar 2012 12:13:43 +0000 (13:13 +0100)]
stemmaweb/lib/stemmaweb/Controller/Relation.pm
stemmaweb/lib/stemmaweb/View/TT.pm
stemmaweb/root/css/relationship.css
stemmaweb/root/js/jquery.popupWindow.js [new file with mode: 0644]
stemmaweb/root/js/relationship.js
stemmaweb/root/src/header.tt
stemmaweb/root/src/relate.tt
stemmaweb/root/src/relatehelp.tt [new file with mode: 0644]

index 832a447..4ca7a25 100644 (file)
@@ -29,6 +29,19 @@ sub index :Path :Args(0) {
        $c->stash->{'template'} = 'relate.tt';
 }
 
+=head2 help
+
+ GET relation/help
+
+Returns the help window HTML.
+
+=cut
+
+sub help :Local :Args(0) {
+       my( $self, $c ) = @_;
+       $c->stash->{'template'} = 'relatehelp.tt';
+}
+
 =head2 definitions
 
  GET relation/definitions
index 493f8a6..55061d7 100644 (file)
@@ -10,6 +10,7 @@ __PACKAGE__->config(
     INCLUDE_PATH => [
        stemmaweb->path_to( 'root', 'src' ),
     ],
+    ENCODING => 'utf-8',
     render_die => 1,
 );
 
index c0d1d8b..0d85213 100644 (file)
@@ -13,10 +13,19 @@ body {
        height: 100px;
        margin-top: 20px;
 }
+#bannerinfo {
+       float: right;
+       margin-right: 12%;
+       margin-top: 15px;
+}
 #logoimg {
        float: left;
        margin-left: 20px;
 }
+.helptag {
+       color: #488dd2;
+       text-decoration: underline;
+}
 #logotitle {
        float: left;
        margin-left: 30px;
diff --git a/stemmaweb/root/js/jquery.popupWindow.js b/stemmaweb/root/js/jquery.popupWindow.js
new file mode 100644 (file)
index 0000000..3e25dd5
--- /dev/null
@@ -0,0 +1,62 @@
+(function($){            
+       $.fn.popupWindow = function(instanceSettings){
+               
+               return this.each(function(){
+               
+               $(this).click(function(){
+               
+               $.fn.popupWindow.defaultSettings = {
+                       centerBrowser:0, // center window over browser window? {1 (YES) or 0 (NO)}. overrides top and left
+                       centerScreen:0, // center window over entire screen? {1 (YES) or 0 (NO)}. overrides top and left
+                       height:500, // sets the height in pixels of the window.
+                       left:0, // left position when the window appears.
+                       location:0, // determines whether the address bar is displayed {1 (YES) or 0 (NO)}.
+                       menubar:0, // determines whether the menu bar is displayed {1 (YES) or 0 (NO)}.
+                       resizable:0, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.
+                       scrollbars:0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.
+                       status:0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.
+                       width:500, // sets the width in pixels of the window.
+                       windowName:null, // name of window set from the name attribute of the element that invokes the click
+                       windowURL:null, // url used for the popup
+                       top:0, // top position when the window appears.
+                       toolbar:0 // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.
+               };
+               
+               settings = $.extend({}, $.fn.popupWindow.defaultSettings, instanceSettings || {});
+               
+               var windowFeatures =    'height=' + settings.height +
+                                                               ',width=' + settings.width +
+                                                               ',toolbar=' + settings.toolbar +
+                                                               ',scrollbars=' + settings.scrollbars +
+                                                               ',status=' + settings.status + 
+                                                               ',resizable=' + settings.resizable +
+                                                               ',location=' + settings.location +
+                                                               ',menuBar=' + settings.menubar;
+
+                               settings.windowName = this.name || settings.windowName;
+                               settings.windowURL = this.href || settings.windowURL;
+                               var centeredY,centeredX;
+                       
+                               if(settings.centerBrowser){
+                                               
+                                       if ($.browser.msie) {//hacked together for IE browsers
+                                               centeredY = (window.screenTop - 120) + ((((document.documentElement.clientHeight + 120)/2) - (settings.height/2)));
+                                               centeredX = window.screenLeft + ((((document.body.offsetWidth + 20)/2) - (settings.width/2)));
+                                       }else{
+                                               centeredY = window.screenY + (((window.outerHeight/2) - (settings.height/2)));
+                                               centeredX = window.screenX + (((window.outerWidth/2) - (settings.width/2)));
+                                       }
+                                       window.open(settings.windowURL, settings.windowName, windowFeatures+',left=' + centeredX +',top=' + centeredY).focus();
+                               }else if(settings.centerScreen){
+                                       centeredY = (screen.height - settings.height)/2;
+                                       centeredX = (screen.width - settings.width)/2;
+                                       window.open(settings.windowURL, settings.windowName, windowFeatures+',left=' + centeredX +',top=' + centeredY).focus();
+                               }else{
+                                       window.open(settings.windowURL, settings.windowName, windowFeatures+',left=' + settings.left +',top=' + settings.top).focus();  
+                               }
+                               return false;
+                       });
+                       
+               });     
+       };
+})(jQuery);
index 2cbd7ee..414b78c 100644 (file)
@@ -586,6 +586,15 @@ $(document).ready(function () {
      }
   });
   
+  $('.helptag').popupWindow({ 
+         height:500, 
+         width:800, 
+         top:50, 
+         left:50,
+         scrollbars:1 
+  }); 
+
+  
   function toggle_relation_active( node_id ) {
       $('#svgenlargement .relation').find( "title:contains('" + node_id +  "')" ).each( function(index) {
           matchid = new RegExp( "^" + node_id );
index 6d844a1..1bd5508 100644 (file)
@@ -10,6 +10,7 @@
     <script type="text/javascript" src="[% c.uri_for('/js/jquery-1.4.4.min.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery-ui-1.8.10.custom.min.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery.mousewheel.min.js') %]"></script>
+    <script type="text/javascript" src="[% c.uri_for('/js/jquery.popupWindow.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery.svg.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery.svgdom.js') %]"></script>
 [% IF applicationjs -%]
index 17ffc96..72ea8e1 100644 (file)
@@ -11,6 +11,9 @@ $(function() {
 [% END %]
 
        <div id="topbanner">
+               <div id="bannerinfo">
+                       <a href="help" title="Relationship mapper help" class="helptag">Help / About</a>
+               </div>
                <h1>Relationship mapper</h1>
                <h2>[% text_title %]</h2>
        </div>
@@ -36,7 +39,7 @@ $(function() {
                        <select name="scope" id="scope" class=".ui-widget select">
                        </select>
                        <br/><br/>
-                       <label for="note">Annotation on note..&nbsp;</label>
+                       <label for="note">Annotation or note..&nbsp;</label>
                        <input type="text" width="60" name="note" id="note" class=".ui-widget input" />
                </fieldset>
        <div id="status"></div>         
diff --git a/stemmaweb/root/src/relatehelp.tt b/stemmaweb/root/src/relatehelp.tt
new file mode 100644 (file)
index 0000000..607f22d
--- /dev/null
@@ -0,0 +1,40 @@
+[% PROCESS header.tt
+       pagetitle = "Stemmaweb - Relationship mapper"
+       applicationstyle = c.uri_for('/css/relationship.css')
+%]
+
+<div id="docco">
+ <h2>Text relationship mapper</h2>
+ <h3>An Interedition prototype interface</h3>
+ <p>The relationship mapper is a tool born of the joint requirements of the <a href="http://byzantini.st/treeoftexts/">Tree of Texts</a> project at the KU Leuven, and the <a href="http://www.bibelwissenschaft.de/start/editionsprojekte/editio-critica-maior-ecm/">Editio Critica Maior</a> project at the Institute for New Testament Research (INTF), University of Münster.</p>
+ <p>The premise of the tool is that, once a set of texts has been collated, there will be a need to chart the relationships between the variants—are they substantially the same word? Different words meaning the same thing? Is one an orthographic variant of the other that should be excluded from any eventual apparatus?</p>
+ <h3>Instructions for use</h3>
+ <p>The tool itself is an interface for allowing these relationships to be declared.  The collation is presented as a variant graph running from left to right.  In a variant graph, each node is a reading, and each witness takes a single path through the readings from beginning to end.  When readings appear vertically aligned with each other, it is an indication that they are variant readings, occurring at the same point in the text.
+ <p>In 'select' mode, when the nodes are green, you can navigate through the graph. Scrolling up or down will zoom in and out, respectively; dragging the graph will pan it in that direction.  Use this navigation to hone in on the part of the graph to be worked with.</p>
+ <p> When you are ready to draw relationships, click the 'pencil' icon to enter edit mode.  Here, dragging a reading node onto another reading will establish a relationship link between them. Fill in the details of the relationship as follows:</p>
+<p><em>Type</em> can be one of:</p>
+<ul>
+       <li>Orthographic - these are interchangeable representations of the same reading</li>
+       <li>Spelling - these are variant spellings of the same reading</li>
+       <li>Grammatical - these readings are word forms with the same lemma</li>
+       <li>Lexical - these readings fulfill corresponding functions in the text. Use the "Annotation" field to elaborate.</li>
+       <li>Meaning - these readings have corresponding meanings (e.g. synonyms, antonyms). Use the "Annotation" field to elaborate.</li>
+       <li>Transposition - this pair actually represents the same reading, but its location varies between witnesses.
+</ul>
+<p><em>Scope</em> can be one of:</p>
+<ul>
+       <li>Local - the relationship applies only at this point in the text</li>
+       <li>Global - the relationship applies throughout the text</li>
+</ul>
+ <p>The relationships are displayed as colored paths between readings; while in 'edit' mode, clicking on a relationship path will display the information associated with it, and give the user an option to delete it.  Deletion of a 'global' relationship will remove that relationship throughout the graph.  When you are ready to move elsewhere in the graph, click the 'hand' icon to return to select mode.<p>
+ <p>Please note that this tool is known to work with recent versions of Firefox (e.g. 8, 9, 10); it is known not to work with Safari and Chrome.</p>
+[% PROCESS footer.tt %]
\ No newline at end of file