make analysis options dialog modal

diff --git a/root/css/stexaminer.css b/root/css/stexaminer.css
index 1348dfa..703dfc1 100644 (file)
--- a/root/css/stexaminer.css
+++ b/root/css/stexaminer.css
@@ -8,23 +8,6 @@
        margin-right: 12%;
        margin-top: 15px;
 }
-#options {
-       position: relative;
-       border: 1px #c6dcf1 solid;
-       margin-left: 20px;
-       margin-bottom: 20px;
-       padding: 10px;
-       width: 500px;
-}
-.optionformelement {
-       float: left;
-       padding-left: 15px;
-}
-#options_button {
-       position: absolute;
-       bottom: 20px;
-       right: 20px;
-}
 #variants_table {
     clear: both;
     width: 90%;

diff --git a/root/js/stexaminer.js b/root/js/stexaminer.js
index 2a9e10e..7469615 100644 (file)
--- a/root/js/stexaminer.js
+++ b/root/js/stexaminer.js
@@ -95,4 +95,27 @@ function show_stats( rs ) {
 // Save the original unextended SVG for when we need it.
 $(document).ready(function () {
        original_svg = $('#stemma_graph > svg').clone();
+       
+       $('#aboutlink').popupWindow({ 
+               height:500, 
+               width:800, 
+               top:50, 
+               left:50,
+               scrollbars:1 
+       }); 
+       $('#options').dialog({
+               autoOpen: false,
+               height: 200,
+               width: 300,
+               modal: true,
+               buttons: {
+                       Cancel: function() {
+                               $(this).dialog( "close" );
+                       },
+                       Reanalyze: function() {
+                               $('#use_variants_form').submit();
+                       },
+               }
+       });
+
 });

diff --git a/root/src/stexaminer.tt b/root/src/stexaminer.tt
index 1f3a945..63505f7 100644 (file)
--- a/root/src/stexaminer.tt
+++ b/root/src/stexaminer.tt
@@ -10,26 +10,11 @@ var graphdot = '[% graphdot %]';
 [% END -%]
        <div id="topbanner">
                <div id="bannerinfo">
-                       <a href="help" title="Stexaminer help" class="helptag">Help / About</a>
+                       <a href="help" title="Stexaminer help" class="navlink" id="aboutlink">Help / About</a>
                </div>
            <h1>Stexaminer</h1>
        <h2>[% text_title %]</h2>
-    </div>
-    <div id="options">
-       <h3>Analysis options:</h3>
-       <form id="use_variants_form" name="use_variants_form" class="clearfix" method="POST">
-               <div class="optionformelement">
-                       <input type="radio" name="ignore_variant" value="none" [% 'checked="true"' IF ignore_variant == 'none' %]>Analyze all variation</input><br/>
-                       <input type="radio" name="ignore_variant" value="orthographic" [% 'checked="true"' IF ignore_variant == 'orthographic' %]>Ignore orthographic variation</input><br/>
-                       <input type="radio" name="ignore_variant" value="spelling" [% 'checked="true"' IF ignore_variant == 'spelling' %]>Ignore orthographic and spelling variation</input>
-               </div>
-               <div class="optionformelement">
-                       <input type="checkbox" name="show_type1" [% 'checked="true"' IF show_type1 %]>Include type-1 variation</input>
-               </div>
-               <div id="options_button" class="button optionformelement" onclick="$('#use_variants_form').submit()">
-                       <span>Re-analyze</span>
-               </div>
-       </form>
+       <p><span class="navlink" onClick="$('#options').dialog('open')">Analysis options</span></p>
     </div>
     <div id="variants_table">
       <table>
@@ -73,6 +58,20 @@ var graphdot = '[% graphdot %]';
                        <ul class="reading_parent_list"></ul>
                </div>
        </div>
+       
+       <div id="options" title="Analysis options...">
+       <form id="use_variants_form" name="use_variants_form">
+               <fieldset>
+                       <input type="radio" name="ignore_variant" value="none" [% 'checked="true"' IF ignore_variant == 'none' %]>Analyze all variation</input><br/>
+                       <input type="radio" name="ignore_variant" value="orthographic" [% 'checked="true"' IF ignore_variant == 'orthographic' %]>Ignore orthographic variation</input><br/>
+                       <input type="radio" name="ignore_variant" value="spelling" [% 'checked="true"' IF ignore_variant == 'spelling' %]>Ignore orthographic and spelling variation</input>
+               </fieldset>
+               <fieldset>
+                       <input type="checkbox" name="show_type1" [% 'checked="true"' IF show_type1 %]>Include type-1 variation</input>
+               </fieldset>
+       </form>
+    </div>
+
 
 [% PROCESS footer.tt %]