# HG changeset patch
# User Zoe Hong <zhong@mpiwg-berlin.mpg.de>
# Date 1424365871 -3600
# Node ID 1f98c92ebbfbd059babd114b746ce38855d3f998
# Parent  ac77748bb8136e0d9a4b3bc9485b499db43d5d61
first version of UI layout. Very roughly, but works in the fixed sidebar, head line, popups and so on.

diff -r ac77748bb813 -r 1f98c92ebbfb develop/models/extractapp.php
--- a/develop/models/extractapp.php	Thu Feb 19 11:07:27 2015 +0100
+++ b/develop/models/extractapp.php	Thu Feb 19 18:11:11 2015 +0100
@@ -156,7 +156,8 @@
         $data['topiclistArray'] = $topiclistArray;
         $data['default_topic_id'] = $this->GetTopic();
         $data['topic_tag'] = $this->GetTopicTag($this->GetTopic());
-        
+        $data['topic_name'] = $this->GetTopicName($this->GetTopic());
+
         $data['info'] = array('file_id'=>$this->file_id, 'user_id'=>$this->user_id, 'branch_id'=>$this->branch_id, 'section_id'=>$this->section_id);
         $data['messages'] = $this->messages;
 
@@ -622,6 +623,13 @@
         return $tag;
 
     }
+    private function GetTopicName($topic_id) {
+        $result = $this->GetTopicByID($topic_id);
+        $row = mysql_fetch_assoc($result);
+        $name = $row['name'];
+        return $name;
+
+    }
 
     // =========================== 
 
diff -r ac77748bb813 -r 1f98c92ebbfb develop/views/Extractapp/taggingtext.php
--- a/develop/views/Extractapp/taggingtext.php	Thu Feb 19 11:07:27 2015 +0100
+++ b/develop/views/Extractapp/taggingtext.php	Thu Feb 19 18:11:11 2015 +0100
@@ -6,6 +6,7 @@
 $section_id = $viewmodel['section_id'];
 $topiclistArray = $viewmodel['topiclistArray'];
 $default_topic_id = $viewmodel['default_topic_id'];
+$topic_name = $viewmodel['topic_name'];
 $topic_tag = $viewmodel['topic_tag'];
 $info = $viewmodel['info'];
 $messages = $viewmodel['messages'];
@@ -125,7 +126,9 @@
         newdiv.id = "tagItemDivId";
         newdiv.setAttribute("class", "tagItemDivClass");
         newdiv.style.cssText = 'top:'+e.pageY+'; left:'+e.pageX+'; position:absolute; background-color: white; border:1px solid black; padding: 5px';
-        
+        newdiv.style.backgroundColor = "white";
+        newdiv.style.zIndex = 2;
+
         //console.log(selection.getRangeAt(0).cloneContents());
         if ( container.innerHTML.indexOf( "br" ) != -1 ) {
             var newselect = document.createElement("select");
@@ -168,7 +171,7 @@
             <?php 
             foreach ( $taglistArray as $taglistValue ) {
                 if ($taglistValue[2] == $topic_tag) {
-                	echo "newdiv.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, '\"+String(selection)+\"', '".$taglistValue[2]."2' )\\\">[TopicTag]Tag as:".$taglistValue[1]."(necessary for this topic!)</button>\";\n";
+                	echo "newdiv.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, '\"+String(selection)+\"', '".$taglistValue[2]."2' )\\\" class='btn btn-xs btn-primary'>[TopicTag]Tag as:".$taglistValue[1]."(necessary for this topic!)</button>\";\n";
                     echo "newdiv.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">Tag as:".$taglistValue[1]."(No BR)</button>\";\n";
                     echo "newdiv.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">Tag as:".$taglistValue[1]."(ALL)</button></br>\";\n";
             		break;
@@ -203,6 +206,8 @@
                 }
             ?>
         }
+
+        $('#tagItemDivId').addClass();  // tagItemDivId is newdiv's id
         $('body').append(newdiv);
         
         $('#TitletagType').val(lastAddTag);
@@ -323,10 +328,8 @@
 
 function chooseTopic(default_topic_id) {
     var t = JSON.parse( '<?php echo json_encode($topiclistArray) ?>' );
-
     var info = JSON.parse('<?php echo json_encode($info) ?>');
 
-
     $('#load_topic_div').html("");
     $('#load_topic_div').css("display", "block");
     
@@ -336,25 +339,21 @@
     $('#load_topic_div').css("height", "50px");
     $('#load_topic_div').css("top", "20px");
     $('#load_topic_div').css("left", "-150px");
-
+    
 
     var topic_select = document.createElement("select");
     topic_select.id = "loadTopiclist";
     var selected_topic = t[0];
     topic_select.onchange = function(){
 
-
     	selected_topic = topic_select.options[topic_select.selectedIndex];
     	console.log(selected_topic.text);
 
     	var topic_id = selected_topic.value;
-		// var topic_name = selected_topic.text;
-
 
 		var form = document.createElement("form");
         form.setAttribute("method", "post");
         form.setAttribute("action", "./TaggingText");  // hand to controller
-        //form.setAttribute("action", "./"+section_id);  // hand to controller
         form.setAttribute("target", "_self");
 
         var hiddenField = document.createElement("input");      
@@ -369,10 +368,8 @@
     
 	    _postForContineTagging(form);
 
-
     };
 
-
     //Create and append the options
 	for (var i = 0; i < t.length; i++) {
 		console.log(t[i]['id']+","+t[i]['name']);
@@ -387,10 +384,9 @@
 
     $('#load_topic_div').append(topic_select);
 
-   
     var newbutton = document.createElement("button");
     $(newbutton).html("Close");
-    $(newbutton).addClass("btn btn-default");
+    $(newbutton).addClass("btn btn-xs btn-default");
     $(newbutton).attr("onclick", "$('#load_topic_div').css(\"display\", \"none\");");
     $('#load_topic_div').append(newbutton);
   
@@ -488,61 +484,63 @@
 })
 
 </script>
+ 
 
 <div class="container-fluid">
     <div class="row">
-        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1"> 
-            <p class="bg-primary"> <?php echo $messages; ?> </p>
-        </div>
-    </div>
-
-    <div class="row">
-        <div id="editable-area" class="col-xs-8 col-sm-8 col-md-8 col-lg-7 col-lg-offset-1"><?php echo $stringInput; ?>
+        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-7 col-lg-offset-1" style="position:fixed; height:30px; z-index:99"> 
+            <p class="bg-info"> <?php echo $messages; ?> </p>
+            <div id="popups" style="position:relative; width:300px; margin-left: 100%">
+                <div id="load_topic_div" style="position: absolute; display: none; z-index:2"></div>
+                <div id="load_regex_div" style="position: absolute; display: none; z-index:2;"></div>
+                <div id="smartRegexPopUpDiv" style="position: absolute; display: none; z-index:2">
+                    Name: <input id="smartRegexPopUpName"></input><br><br>
+                    Word List: 
+                    <select id="smartRegexPopUpSelectWord">
+                    <option value="NULL" selected>無</option>
+                    <?php
+                        foreach ( $wordlistArray as $wordlistValue ) {
+                            echo "<option value=\"".$wordlistValue[0]."\">".$wordlistValue[1]."</option>\n";
+                        }
+                    ?>
+                    </select>
+                    <br>
+                    OR (USE "|" TO SEPARATE WORDS):<br>
+                    <TEXTAREA id="smartRegexPopUpText" COLS=30 ROWS=4></TEXTAREA><br><br>
+                    Tag:
+                    <select id="smartRegexPopUpSelectTag">
+                    <?php
+                        foreach ( $taglistArray as $taglistValue ) {
+                            echo "<option value=\"".$taglistValue[2]."\">".$taglistValue[1]."</option>\n";
+                        }
+                        echo "<option value=\"title\">Title</option>\n";
+                    ?>
+                    <option value="NOTAG">不標記</option>
+                    </select><br>
+                    <button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" class="btn btn-info" style="">Add</button>
+                    <button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" class="btn btn-success" style="">Edit</button>
+                    <button id="smartRegexPopUpDel" onclick="replaceSmartDel()" class="btn btn-danger" style="">Delete</button>
+                    <button id="smartRegexPopUpBack" onclick="replaceSmartBack()" class="btn btn-default" style=""><<</button>
+                    <button id="smartRegexPopUpFor" onclick="replaceSmartFor()" class="btn btn-default" style="">>></button>
+                    <button onclick="replaceSmartClose()" class="btn btn-default" style="">Close</button>
+                </div>
+                
+            </div>
         </div>
-        <div id="follow-scroll" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
-            <div id="load_topic_div" style="position: absolute; display: none"></div>
-            <div id="load_regex_div" style="position: absolute; display: none"></div>
-            <div id="smartRegexPopUpDiv" style="position: absolute; display: none">
-                Name: <input id="smartRegexPopUpName"></input><br><br>
-                Word List: 
-                <select id="smartRegexPopUpSelectWord">
-                <option value="NULL" selected>無</option>
-                <?php
-                    foreach ( $wordlistArray as $wordlistValue ) {
-                        echo "<option value=\"".$wordlistValue[0]."\">".$wordlistValue[1]."</option>\n";
-                    }
-                ?>
-                </select>
-                <br>
-                OR (USE "|" TO SEPARATE WORDS):<br>
-                <TEXTAREA id="smartRegexPopUpText" COLS=30 ROWS=4></TEXTAREA><br><br>
-                Tag:
-                <select id="smartRegexPopUpSelectTag">
-                <?php
-                    foreach ( $taglistArray as $taglistValue ) {
-                        echo "<option value=\"".$taglistValue[2]."\">".$taglistValue[1]."</option>\n";
-                    }
-                    echo "<option value=\"title\">Title</option>\n";
-                ?>
-                <option value="NOTAG">不標記</option>
-                </select><br>
-                <button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" class="btn btn-info" style="">Add</button>
-                <button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" class="btn btn-success" style="">Edit</button>
-                <button id="smartRegexPopUpDel" onclick="replaceSmartDel()" class="btn btn-warning" style="">Delete</button>
-                <button id="smartRegexPopUpBack" onclick="replaceSmartBack()" class="btn btn-default" style=""><<</button>
-                <button id="smartRegexPopUpFor" onclick="replaceSmartFor()" class="btn btn-default" style="">>></button>
-                <button onclick="replaceSmartClose()" class="btn btn-default" style="">Close</button>
-            </div>
-                     
+
+        
+        <div id="follow-scroll" class="col-xs-4 col-xs-offset-8 col-sm-4 col-sm-offset-8 col-md-4 col-md-offset-8 col-lg-4 col-lg-offset-8" style="position:fixed; width:300px; height:900px; overflow:scroll; float:right">
             <form action="javascript:void(0);">   
-                
-                <h4 class="text-success"> Config Topic</h4>
-                <button onclick="chooseTopic(<?php echo $default_topic_id; ?>)" class="btn-">Choose Topic</button>
-                
-                <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" style="">Config Tags</button></br>
-            
                 <fieldset>
-                    <legend><h4 class="text-success"> Replace By <i><b>Smart Regex</b></i>©: </h4></legend>
+                    <legend><h5 class="text-success"> Config Topic: </h5></legend>
+                    <div> current topic is <?php echo $topic_name; ?> 
+                        <button onclick="chooseTopic(<?php echo $default_topic_id; ?>)" class="btn btn-xs btn-default">Change</button>
+                    </div>
+                    <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" class="btn btn-sm btn-default" style="">Config Tags</button></br>
+                </fieldset>
+
+                <fieldset>
+                    <legend><h5 class="text-success"> Replace By <i><b>Smart Regex</b></i>©: </h5></legend>
                     <div id="smartRegexShowDiv"></div><br>
                     <button onclick="smartRegexNew()" style="height: 30px; width: 220px">Add Regex Group</button></br>
                     Range: <input type="text" size="5" id="regexPageStart">to<input type="text" size="5" id="regexPageEnd"><br>
@@ -551,15 +549,13 @@
                     <button onclick="smartRegexSave()" style="height: 30px; width: 70px">Save</button>
                     <button onclick="smartRegexLoad(<?php echo $default_topic_id; ?>)" style="height: 30px; width: 70px">Load</button>
                     <button onclick="smartRegexEmpty()" style="height: 30px; width: 70px">Clear</button></br>
-                   
                     <!--
                     <button id="example" type="button" class="btn btn-sm btn-default" data-toggle="popover">Load</button>
                     -->
-
                 </fieldset>
                 
                 <fieldset>
-                    <legend><h4 class="text-success"> Tag by rule:</h4></legend>
+                    <legend><h5 class="text-success"> Tag by rule:</h5></legend>
                     <button onclick="tagNameWithLastName()" style="height: 30px; width: 220px">Tag Word Begin With Surname</button></br>
                     <button onclick="tagNameWithLastName2()" style="height: 30px; width: 170px">Tag Word Begin With</button><input type="text" size="2" id="surname"></br>
                     <!--<button onclick="tagTime()" style="height: 30px; width: 220px">Tag Time</button></br>-->
@@ -568,7 +564,7 @@
                 </fieldset>
             
                 <fieldset>
-                    <legend><h4 class="text-success"> Edit:</h4></legend>
+                    <legend><h5 class="text-success"> Edit:</h5></legend>
                     <button onclick="saveTextToLGService()" style="height: 30px; width: 220px">Save to LGService</button></br>
                 
                     <!--<button onclick="cleanUpTextArea()" style="height: 30px; width: 220px">Reform the text</button></br>-->
@@ -580,14 +576,14 @@
                 </fieldset>
                 
                 <fieldset>
-                    <legend><h4 class="text-success"> Export:</h4></legend>
+                    <legend><h5 class="text-success"> Export:</h5></legend>
                     Page: <input type="text" size="5" id="exportPageStart">to<input type="text" size="5" id="exportPageEnd"><br>
                     <button onclick="exportPage()" style="height: 30px; width: 220px">Export</button></br>
                     <button onclick="exportAll(<?php echo $default_topic_id;?>)" style="height: 30px; width: 220px">Export All</button></br>
                 </fieldset>
             
                 <fieldset>
-                    <legend><h4 class="text-success"> Replace By <i><b>Regex</b></i>: </h4></legend>
+                    <legend><h5 class="text-success"> Replace By <i><b>Regex</b></i>: </h5></legend>
                     Range: <input type="text" size="5" id="regexPageStart2">to<input type="text" size="5" id="regexPageEnd2"><br>
                     Regex: <input type="text" size="30" id="regexText"></br>
                     Replace: <input type="text" size="30" id="replaceText"><br>
@@ -596,108 +592,16 @@
             </form>
         </div>
     </div>
+    
+    <div class="row" style="margin-top:30px;">
+        <div id="editable-area" class="col-xs-8 col-sm-8 col-md-8 col-lg-7 col-lg-offset-1" style="z-index:1">
+            <?php echo $stringInput; ?>
+        </div>
+    </div>
 
 </div>
 
 
-<table width="1250" border="1">
-	<tr>
-		<td width="980">
-			<div id="editable-area" class="area" style="max-width: 980"><?php echo $stringInput; ?></div>
-		</td>
-		<td width="270" valign="top">
-			<div id="follow-scroll" style="position:absolute; width: 220" width="220">
-				<div id="load_regex_div" style="position: absolute; display: none"></div>
-				<div id="load_topic_div" style="position: absolute; display: none"></div>
-				<div id="smartRegexPopUpDiv" style="position: absolute; display: none">
-					Name: <input id="smartRegexPopUpName"></input><br><br>
-					Word List: 
-					<select id="smartRegexPopUpSelectWord">
-					<option value="NULL" selected>無</option>
-					<?php
-						foreach ( $wordlistArray as $wordlistValue ) {
-							echo "<option value=\"".$wordlistValue[0]."\">".$wordlistValue[1]."</option>\n";
-						}
-					?>
-					</select>
-					<br>
-					OR (USE "|" TO SEPARATE WORDS):<br>
-					<TEXTAREA id="smartRegexPopUpText" COLS=30 ROWS=4></TEXTAREA><br><br>
-					Tag:
-					<select id="smartRegexPopUpSelectTag">
-					<?php
-						foreach ( $taglistArray as $taglistValue ) {
-							echo "<option value=\"".$taglistValue[2]."\">".$taglistValue[1]."</option>\n";
-						}
-						echo "<option value=\"title\">Title</option>\n";
-					?>
-					<option value="NOTAG">不標記</option>
-					</select><br>
-					<button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" style="height: 30px; width: 50px">Add</button>
-					<button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" style="height: 30px; width: 50px">Edit</button>
-					<button id="smartRegexPopUpDel" onclick="replaceSmartDel()" style="height: 30px; width: 50px">Delete</button>
-					<button id="smartRegexPopUpBack" onclick="replaceSmartBack()" style="height: 30px; width: 50px"><<</button>
-					<button id="smartRegexPopUpFor" onclick="replaceSmartFor()" style="height: 30px; width: 50px">>></button>
-					<button onclick="replaceSmartClose()" style="height: 30px; width: 50px">Close</button>
-				</div>
-				<form action="javascript:void(0);">
-					<button onclick="chooseTopic(<?php echo $default_topic_id; ?>)">Choose Topic</button>
-					<button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" style="height: 30px; width: 220px">Config Tag List for Topic</button></br>
-					<fieldset>
-						<legend>Replace By <i><b>Smart Regex</b></i>©:</legend>
-						<div id="smartRegexShowDiv"></div><br>
-						<button onclick="smartRegexNew()" style="height: 30px; width: 220px">Add Regex Group</button></br>
-						Range: <input type="text" size="5" id="regexPageStart">to<input type="text" size="5" id="regexPageEnd"><br>
-						<button onclick="replaceSmartRun()" style="height: 30px; width: 220px">Run</button></br>
-						<button onclick="replaceSmartRunSpace()" style="height: 30px; width: 220px">Run(Allow space between Group)</button></br>
-						<button onclick="smartRegexSave()" style="height: 30px; width: 70px">Save</button>
-						<button onclick="smartRegexLoad()" style="height: 30px; width: 70px">Load</button>
-						<button onclick="smartRegexEmpty()" style="height: 30px; width: 70px">Clear</button></br>
-					</fieldset>
-					
-					<fieldset>
-						<legend>Tag by rule:</legend>
-						<button onclick="tagNameWithLastName()" style="height: 30px; width: 220px">Tag Word Begin With Surname</button></br>
-						<button onclick="tagNameWithLastName2()" style="height: 30px; width: 170px">Tag Word Begin With</button><input type="text" size="2" id="surname"></br>
-						<!--<button onclick="tagTime()" style="height: 30px; width: 220px">Tag Time</button></br>-->
-						<!--<button onclick="tagBiogAddr()" style="height: 30px; width: 220px">Tag BiogAddr</button></br>-->
-						<button onclick="Undo()" style="height: 30px; width: 220px" id="buttonUndo" disabled="true">Undo</button>
-					</fieldset>
-					
-					<fieldset>
-						<legend>Edit:</legend>
-						<button onclick="saveTextToLGService()" style="height: 30px; width: 220px">Save to LGService</button></br>
-                    
-                        <!--<button onclick="cleanUpTextArea()" style="height: 30px; width: 220px">Reform the text</button></br>-->
-						<button onclick="saveText(<?php echo $section_id; ?>)" style="height: 30px; width: 220px">Save the text</button></br>
-						<button onclick="editText()" id="editTextId" style="height: 30px; width: 220px">Edit the text</button></br>
-						</br>
-						<button onclick="window.open('./EditWordlist')" style="height: 30px; width: 220px">Manage Word List</button></br>
-						<button onclick="window.open('./EditTaglist')" style="height: 30px; width: 220px">Manage Tag List</button></br>
-					</fieldset>
-					
-					<fieldset>
-						<legend>Export:</legend>
-						Page: <input type="text" size="5" id="exportPageStart">to<input type="text" size="5" id="exportPageEnd"><br>
-						<button onclick="exportPage()" style="height: 30px; width: 220px">Export</button></br>
-						<button onclick="exportAll(<?php echo $default_topic_id;?>)" style="height: 30px; width: 220px">Export All</button></br>
-					</fieldset>
-					
-					<fieldset>
-						<legend>Replace By <i><b>Regex</b></i>:</legend>
-						Range: <input type="text" size="5" id="regexPageStart2">to<input type="text" size="5" id="regexPageEnd2"><br>
-						Regex: <input type="text" size="30" id="regexText"></br>
-						Replace: <input type="text" size="30" id="replaceText"><br>
-						<button onclick="replaceSmartRegex()">Replace!</button>
-					</fieldset>
-				</form>
-			</div>
-		</td>
-	</tr>
-</table>
-
-
-
 </body>
 
 </html>