new cat interface

cat/css/iatagger.css

@@ -21,10 +21,36 @@
 	padding:0;
 }
 
+#cancel-button {
+    cursor:pointer;
+    vertical-align:middle;
+}
+
+#phrase-selection {
+    height:50px;
+}
+
 .hidden {
     display:none;
 }
 
+#phrase-icon {
+    cursor:pointer;
+    vertical-align:middle;
+    margin-right:20px;
+}
+
+#reset-icon {
+    cursor:pointer;
+    vertical-align:middle;
+    margin-right:20px;
+}
+
+#search-icon {
+    cursor:pointer;
+}
+
+
 #help-icon {
     margin-left:20px;
     cursor:pointer;
@@ -34,7 +60,7 @@
     margin-top:10px;
 }
 
-#searchInput {
+#search-input {
     margin-bottom:10px;
 }
 
@@ -101,6 +127,12 @@
     cursor:pointer;
 }
 
+#result-sentence.phrase-mode .matchedFragment {
+    background-color:#e5e5ff;
+    border-color:#e5e5ff;
+    cursor:text;
+}
+
 .matchedFragment {
     background-color:#99CCFF;
     border-style: solid;

cat/index.html_pattern

@@ -10,10 +10,10 @@
         var concordiaUrl = 'http://@concordia_host@:@concordia_port@';
 
         $(document).ready(function() {
-            $('#searchInput').bind("enterKey",function(e){
+            $('#search-input').bind("enterKey",function(e){
                 searchHandle(@tmid@);
             });
-            $('#searchInput').keyup(function(e){
+            $('#search-input').keyup(function(e){
                 if(e.keyCode == 13) {
                     $(this).trigger("enterKey");
                 }
@@ -32,16 +32,14 @@
             <div id="help" class="hidden">
 	            <p>@desc@</p>
 	            <p>@enjoy@</p>
-                <span class="suggestion" onclick="showHideSuggestions()">show/hide samples</span>
+                <div id="suggestions">
-                <br/><br/>
-                <div class="suggestionsInvisible" id="suggestions">
                     <ul>@suggestions@</ul>
                     <br/><br/>
                 </div>
-                <label for="searchInput">@prompt@</label>
+                <label for="search-input">@prompt@</label>
             </div>
-            <input id="searchInput" type="text" value="" />
+            <input id="search-input" type="text" value="" />
-            <input type="button" value="search" onclick="searchHandle(@tmid@)" />
+            <img id="search-icon" src="../images/search.png" alt="search" onclick="searchHandle(@tmid@)" title="search"/>
             <img id="help-icon" src="../images/help.png" alt="help" onclick="toggleHelp()" title="show/hide help"/>
             <div id="result">
             

cat/js/cat.js

@@ -6,7 +6,7 @@ function searchHandle(tmid) {
     var concordiaRequest = {
         operation: 'concordiaSearch',
         tmId: tmid,
-        pattern:$("#searchInput").val()
+        pattern:$("#search-input").val()
     }
 
     $.ajax({
@@ -26,8 +26,9 @@ function renderResult(data) {
     var score = data['result']['bestOverlayScore']*100;
     
     res += '<div id="result-score">Concordia score: <b>'+score.toFixed(0)+'%</b></div>';
+    res += '<div id="phrase-selection"><img id="phrase-icon" src="../images/phrase.png" alt="phrase search" onclick="togglePhraseSearchMode()" title="search for phrases"/><span id="phrase-prompt" class="hidden">Select continuous phrase: <img id="cancel-button" src="../images/cancel-button.png" alt="cancel phrase search" onclick="togglePhraseSearchMode()" title="cancel searching for phrases"/></span></div>';
     
-    var inputSentence = $('#searchInput').val();
+    var inputSentence = $('#search-input').val();
     var markedSentence = '';
     var fragments = '';
     lastInsertedEnd = 0;
@@ -47,7 +48,7 @@ function renderResult(data) {
     //remaining unmarked fragment
     markedSentence += inputSentence.slice(lastInsertedEnd);
     
-    res += '<div id="result-sentence">'+markedSentence+'</div>';
+    res += '<div id="result-sentence" onMouseUp="phraseSearch(this)">'+markedSentence+'</div>';
     
     res += '<br/><br/><br/>'+fragments;
     
@@ -81,18 +82,99 @@ function renderFragment(fragment, number) {
     return result;
 }
 
+function togglePhraseSearchMode() {
+    $('#result-sentence').toggleClass('phrase-mode');
+    $('#phrase-icon').toggleClass('hidden');
+    $('#phrase-prompt').toggleClass('hidden');
+    clearTextSelections();
+}
+
 function displayDetails(caller, number) {
+    if (!$('#result-sentence').hasClass('phrase-mode')) {
         $('#result-sentence .matchedFragmentSelected').attr("class","matchedFragment");
         caller.className='matchedFragmentSelected';
         $('.fragmentDetails').css('display', 'none');
         $('#fragment'+number).css('display', 'block');
+    }
 }
 
 function searchText(text, tmid) {
-    $("#searchInput").val(text);
+    $("#search-input").val(text);
     searchHandle(tmid);
 }
 
 function showHideSuggestions() {
     $('#suggestions').toggleClass('suggestionsInvisible');
 }
+
+function phraseSearch(caller) {
+    if ($('#result-sentence').hasClass('phrase-mode')) {
+        var phrase = getSelectedTextWithin(caller);
+        console.log('phrase search for: '+phrase);
+        console.log(getIndicesOf(phrase, $("#search-input").val(), true));
+        var phrases = $('phrase-prompt').data();
+    }
+}
+
+function getSelectedTextWithin(el) {
+    var selectedText = "";
+    if (typeof window.getSelection != "undefined") {
+        var sel = window.getSelection(), rangeCount;
+        if ( (rangeCount = sel.rangeCount) > 0 ) {
+            var range = document.createRange();
+            for (var i = 0, selRange; i < rangeCount; ++i) {
+                range.selectNodeContents(el);
+                selRange = sel.getRangeAt(i);
+                if (selRange.compareBoundaryPoints(range.START_TO_END, range) == 1 && selRange.compareBoundaryPoints(range.END_TO_START, range) == -1) {
+                    if (selRange.compareBoundaryPoints(range.START_TO_START, range) == 1) {
+                        range.setStart(selRange.startContainer, selRange.startOffset);
+                    }
+                    if (selRange.compareBoundaryPoints(range.END_TO_END, range) == -1) {
+                        range.setEnd(selRange.endContainer, selRange.endOffset);
+                    }
+                    selectedText += range.toString();
+                }
+            }
+        }
+    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
+        var selTextRange = document.selection.createRange();
+        var textRange = selTextRange.duplicate();
+        textRange.moveToElementText(el);
+        if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 && selTextRange.compareEndPoints("StartToEnd", textRange) == -1) {
+            if (selTextRange.compareEndPoints("StartToStart", textRange) == 1) {
+                textRange.setEndPoint("StartToStart", selTextRange);
+            }
+            if (selTextRange.compareEndPoints("EndToEnd", textRange) == -1) {
+                textRange.setEndPoint("EndToEnd", selTextRange);
+            }
+            selectedText = textRange.text;
+        }
+    }
+    return selectedText;
+}
+
+function clearTextSelections() {
+    if (window.getSelection) {
+      if (window.getSelection().empty) {  // Chrome
+        window.getSelection().empty();
+      } else if (window.getSelection().removeAllRanges) {  // Firefox
+        window.getSelection().removeAllRanges();
+      }
+    } else if (document.selection) {  // IE?
+      document.selection.empty();
+    }
+}
+
+function getIndicesOf(searchStr, str, caseSensitive) {
+    var startIndex = 0, searchStrLen = searchStr.length;
+    var index, indices = [];
+    if (!caseSensitive) {
+        str = str.toLowerCase();
+        searchStr = searchStr.toLowerCase();
+    }
+    while ((index = str.indexOf(searchStr, startIndex)) > -1) {
+        indices.push(index);
+        startIndex = index + searchStrLen;
+    }
+    return indices;
+}