BugTrack/2433 search2 plugin: Show search progress

diff --git a/plugin/search2.inc.php b/plugin/search2.inc.php
index 4542639..6379d21 100644 (file)
--- a/plugin/search2.inc.php
+++ b/plugin/search2.inc.php
@@ -300,6 +300,8 @@ EOD;
 
        $plain_search_link = '<a href="' . $script . '?cmd=search' . '">' . htmlsc($_btn_search) . '</a>';
        $alt_msg = str_replace('$1', $plain_search_link, $_msg_use_alternative_link);
+       $status_span_text = '<span class="_plugin_search2_search_status_text1"></span>' .
+               '<span class="_plugin_search2_search_status_text2"></span>';
        $form =<<<EOD
 <form action="$script" method="GET" class="_plugin_search2_form">
  <div>
@@ -312,7 +314,7 @@ $base_option
 EOD;
        $second_form =<<<EOD
 <div class="_plugin_search2_second_form" style="display:none;">
-<div class="_plugin_search2_search_status"></div>
+<div class="_plugin_search2_search_status">$status_span_text</span></div>
 <div class="_plugin_search2_message"></div>
 $form
 </div>
@@ -349,12 +351,41 @@ EOD;
 <noscript>
  <p>$_msg_unsupported_webbrowser $alt_msg</p>
 </noscript>
+<style>
+input#_plugin_search2_detail:checked ~ ul > div.search-result-detail {
+  display:block;
+}
+input#_plugin_search2_detail ~ ul > div.search-result-detail {
+  display:none;
+}
+._plugin_search2_search_status {
+  min-height:1.5em;
+}
+@keyframes plugin-search2-searching {
+  10% { opacity: 1; }
+  40% { opacity: 0; }
+  70% { opacity: 0; }
+  90% { opacity: 1; }
+}
+span.plugin-search2-progress {
+  animation: plugin-search2-searching 1.5s infinite ease-out;
+}
+span.plugin-search2-progress1 {
+  animation-delay: -1s;
+}
+span.plugin-search2-progress2 {
+  animation-delay: -0.8s;
+}
+span.plugin-search2-progress3 {
+  animation-delay: -0.6s;
+}
+</style>
 <p class="_plugin_search2_nosupport_message" style="display:none;">
   $_msg_unsupported_webbrowser $alt_msg
 </p>
 $search_props
 $form
-<div class="_plugin_search2_search_status"></div>
+<div class="_plugin_search2_search_status">$status_span_text</div>
 <div class="_plugin_search2_message"></div>
 $result_page_panel
 $second_form

diff --git a/skin/pukiwiki.css b/skin/pukiwiki.css
index e9a39b2..601e7b7 100644 (file)
--- a/skin/pukiwiki.css
+++ b/skin/pukiwiki.css
@@ -655,15 +655,6 @@ tr.bugtrack_state_undef td {
 }
 
 /* search2.inc.php  */
-input#_plugin_search2_detail:checked ~ ul > div.search-result-detail {
-  display:block;
-}
-input#_plugin_search2_detail ~ ul > div.search-result-detail {
-  display:none;
-}
-._plugin_search2_search_status {
-  min-height:1.5em;
-}
 .search-result-page-summary {
   font-size:70%;
   color:gray;

diff --git a/skin/search2.js b/skin/search2.js
index 237c7d7..2652896 100644 (file)
--- a/skin/search2.js
+++ b/skin/search2.js
@@ -289,10 +289,35 @@ window.addEventListener && window.addEventListener('DOMContentLoaded', function(
     /**
      * @param {string} statusText
      */
-    function setSearchStatus(statusText) {
+    function setSearchStatus(statusText, statusText2) {
       var statusList = document.querySelectorAll('._plugin_search2_search_status');
       forEach(statusList, function(statusObj) {
-        statusObj.textContent = statusText;
+        var textObj1 = statusObj.querySelector('._plugin_search2_search_status_text1');
+        var textObj2 = statusObj.querySelector('._plugin_search2_search_status_text2');
+        if (textObj1) {
+          var prevText = textObj1.getAttribute('data-text');
+          if (prevText !== statusText) {
+            textObj1.setAttribute('data-text', statusText);
+            if (statusText.substr(statusText.length - 3) === '...') {
+              var firstHalf = statusText.substr(0, statusText.length - 3);
+              textObj1.textContent = firstHalf;
+              var span = document.createElement('span');
+              span.innerHTML = '<span class="plugin-search2-progress plugin-search2-progress1">.</span>'
+                + '<span class="plugin-search2-progress plugin-search2-progress2">.</span>'
+                + '<span class="plugin-search2-progress plugin-search2-progress3">.</span>';
+              textObj1.appendChild(span);
+            } else {
+              textObj1.textContent = statusText;
+            }
+          }
+        }
+        if (textObj2) {
+          if (statusText2) {
+            textObj2.textContent = ' ' + statusText2;
+          } else {
+            textObj2.textContent = '';
+          }
+        }
       });
     }
     /**
@@ -723,7 +748,7 @@ window.addEventListener && window.addEventListener('DOMContentLoaded', function(
       if (prevTimestamp) {
         setSearchStatus(searchProps.searchingMsg);
       } else {
-        setSearchStatus(searchProps.searchingMsg + ' ' +
+        setSearchStatus(searchProps.searchingMsg,
           getSearchProgress(session));
       }
       if (searchDone) {
@@ -733,7 +758,7 @@ window.addEventListener && window.addEventListener('DOMContentLoaded', function(
           if (singlePageResult) {
             setSearchStatus('');
           } else {
-            setSearchStatus(searchProps.showingResultMsg + ' ' + progress);
+            setSearchStatus(searchProps.showingResultMsg, progress);
           }
         }, 2000);
       }
@@ -777,7 +802,7 @@ window.addEventListener && window.addEventListener('DOMContentLoaded', function(
           localStorage[key] = JSON.stringify(session);
           // Stop API calling
           setSearchMessage(msg + ' ' + getOffsetLinks(session, maxResults));
-          setSearchStatus(searchProps.showingResultMsg + ' ' +
+          setSearchStatus(searchProps.showingResultMsg,
             getSearchProgress(session));
         } else {
           setTimeout(function() {
@@ -823,7 +848,7 @@ window.addEventListener && window.addEventListener('DOMContentLoaded', function(
         var moreResultHtml = getOffsetLinks(session, maxResults);
         setSearchMessage(msg + ' ' + moreResultHtml);
         var progress = getSearchProgress(session);
-        setSearchStatus(searchProps.showingResultMsg + ' ' + progress);
+        setSearchStatus(searchProps.showingResultMsg, progress);
       } else {
         setSearchStatus('');
       }

diff --git a/skin/tdiary.css b/skin/tdiary.css
index 8a1c789..9458909 100644 (file)
--- a/skin/tdiary.css
+++ b/skin/tdiary.css
@@ -531,15 +531,6 @@ tr.bugtrack_state_undef td {
 }
 
 /* search2.inc.php  */
-input#_plugin_search2_detail:checked ~ ul > div.search-result-detail {
-  display:block;
-}
-input#_plugin_search2_detail ~ ul > div.search-result-detail {
-  display:none;
-}
-._plugin_search2_search_status {
-  min-height:1.5em;
-}
 .search-result-page-summary {
   font-size:70%;
   color:gray;