Ajax loading + Tweaks of CSS

searx/static/themes/pix-art/js/searx.js

@@ -47,3 +47,97 @@ if(searx.autocompleter) {
 
 })(window, document);
 
+var xmlHttp
+
+function GetXmlHttpObject(){
+
+    var xmlHttp = null;
+
+    try {
+        // Firefox, Opera 8.0+, Safari
+        xmlHttp = new XMLHttpRequest();
+    }
+    catch (e) {
+        // Internet Explorer
+        try {
+            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
+        }
+        catch (e){
+            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+    }
+    return xmlHttp;
+}
+
+var timer;
+
+// Calculate the rating
+function load_more(query,page){
+
+    xmlHttp = GetXmlHttpObject();
+    clearTimeout(timer);
+
+    if(xmlHttp == null){
+        alert ("Your browser does not support AJAX!");
+        return;
+    }
+
+    favicons[page] = [];
+
+    xmlHttp.onreadystatechange = function(){
+        
+        var loader = document.getElementById('load_more');
+
+        if (xmlHttp.readyState == 4){
+            
+            //loader.style.display = 'none';
+            var res = xmlHttp.responseText;
+
+            //loader.style.display = 'block';
+            //loader.innerHTML = '<div class="voted">Vote pris en compte</div>';
+            clearTimeout(timer);
+            timer = setTimeout(function(){},6000);
+
+            var results = document.getElementById('results_list');
+            //results_list.innerHTML += res;
+            var newNode = document.createElement('span');      
+            newNode.innerHTML = res;
+            results_list.appendChild(newNode);
+
+            var scripts = newNode.getElementsByTagName('script');
+            for (var ix = 0; ix < scripts.length; ix++) {
+                eval(scripts[ix].text);
+            }
+
+            load_images(page);
+            document.getElementById("load_more").onclick = function() { load_more(query, (page+1)); }
+            loader.removeAttribute("disabled");
+            
+        } else {
+            //loader.innerHTML = '<img src="images/rating_loading.gif" alt="loading" />'; 
+            loader.disabled = 'disabled';
+        }
+    }
+    var url = "/";
+    var params = "q="+query+"&pageno="+page+"&category_general=1&category_files=1&category_images=1&category_it=1&category_map=1&category_music=1&category_news=1&category_social+media=1&category_videos=1";
+    xmlHttp.open("POST",url,true);
+    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xmlHttp.setRequestHeader("Content-length", params.length);
+    xmlHttp.setRequestHeader("Connection", "close");
+    xmlHttp.send(params);
+}
+
+function load_images(page){
+    var arrayLength = favicons[page].length;
+    for (var i = 1; i < arrayLength+1; i++) {
+        var img = new Image();
+        img.setAttribute("i",i)
+        img.onload = function () {
+            var id = 'canvas-'+page+'-'+this.getAttribute("i");
+            var can = document.getElementById(id);
+            var ctx = can.getContext("2d");
+            ctx.drawImage(this, 0, 0, 16, 16);
+        };
+        img.src = favicons[page][i];
+    }
+}

searx/static/themes/pix-art/less/search.less

@@ -35,15 +35,15 @@
 
 #search_submit {
 	position: absolute;
-	top: 13px;
-	right: 1px;
+	top: 15px;
+	right: 5px;
 	padding: 0;
 	border: 0;
 	background: url('../img/search-icon-pixel.png') no-repeat;
 	background-size: 24px 24px;
 	opacity: 0.8;
 	width: 24px;
-	height: 30px;
+	height: 24px;
 	font-size: 0;
 }
 

searx/static/themes/pix-art/less/style.less

@@ -46,9 +46,6 @@ canvas {
 
 @import "search.less";
 
-// Autocompleter
-
-
 .row {
 	max-width: 800px;
 	margin: 20px auto;
@@ -116,8 +113,8 @@ div.title {
 	}
 }
 
-input[type="submit"] {
-	padding: 2px 6px;
+input[type="button"] {
+	padding: 4px 12px;
 	margin: 2px 4px;
 	display: inline-block;
 	background: @color-download-button-background;
@@ -127,6 +124,10 @@ input[type="submit"] {
 	cursor: pointer;
 }
 
+input[type="button"]:disabled {
+	cursor: progress;
+}
+
 input[type="checkbox"] {
 	visibility: hidden;
 }
@@ -136,6 +137,12 @@ fieldset {
 	border: 1px solid @color-settings-fieldset;
 }
 
+#logo {
+	position: absolute;
+	top: 13px;
+	left: 10px;
+}
+
 #categories {
 	margin: 0 10px;
 	.user-select;
@@ -299,7 +306,7 @@ tr {
 
 #pagination {
 	clear: both;
-
+	text-align: center;
         br {
         	clear: both;
         }
@@ -346,7 +353,7 @@ tr {
         div.title {
 
         	h1 {
-                        font-size: 1em;
+                font-size: 1em;
         	}
         }
 
@@ -398,6 +405,10 @@ tr {
 	#search_url {
 		display: none;
 	}
+
+	#logo {
+		display: none;
+	}
 }
 
 .favicon {

searx/templates/pix-art/base.html

@@ -14,6 +14,9 @@
         {% block meta %}{% endblock %}
         {% block head %}
         {% endblock %}
+        <script type="text/javascript">
+        var favicons = [[]];
+        </script>
     </head>
     <body>
         <div id="container">
@@ -23,6 +26,9 @@
                     searx = {};
             </script>
             <script src="{{ url_for('static', filename='js/searx.js') }}" ></script>
+            <script type="text/javascript">
+            load_images(1);
+            </script>
         </div>
     </body>
 </html>

searx/templates/pix-art/result_templates/default.html

@@ -2,12 +2,5 @@
 	<canvas id="canvas-{{ pageno }}-{{ index }}" class="icon" width="16" height="16"></canvas>
 </a>
 <script type="text/javascript">
-var img{{ pageno }}_{{ index }} = new Image();
-img{{ pageno }}_{{ index }}.src = 'http://{{ result.url | extract_domain }}/favicon.ico';
-
-img{{ pageno }}_{{ index }}.onload = function () { 
-    var can{{ pageno }}_{{ index }} = document.getElementById('canvas-{{ pageno }}-{{ index }}');
-    var ctx = can{{ pageno }}_{{ index }}.getContext("2d");
-    ctx.drawImage(img{{ pageno }}_{{ index }}, 0, 0, 16, 16);
-};
+favicons[{{ pageno }}][{{ index }}] = 'http://{{ result.url | extract_domain }}/favicon.ico';
 </script>

searx/templates/pix-art/results.html

@@ -1,44 +1,32 @@
-{% extends "pix-art/base.html" %}
-{% block title %}{{ q }} - {% endblock %}
-{% block meta %}{% endblock %}
-{% block content %}
-<div class="preferences_container right"><a href="{{ url_for('preferences') }}" id="preferences"><span>preferences</span></a></div>
-<div class="small search center">
-    {% include 'pix-art/search.html' %}
-</div>
-<div id="results">
+{% if pageno > 1 %}
     {% for result in results %}
         {% set index = loop.index %}
         {% include 'pix-art/result_templates/default.html' %}
     {% endfor %}
-
-    {% if paging %}
+{% else %}
+{% extends "pix-art/base.html" %}
+{% block title %}{{ q }} - {% endblock %}
+{% block meta %}{% endblock %}
+{% block content %}
+<div id="logo"><a href="./"><img src="{{ url_for('static', filename='img/searx-pixel-small.png') }}" alt="Searx Logo"/></a></div>
+<div class="preferences_container right"><a href="{{ url_for('preferences') }}" id="preferences"><span>preferences</span></a></div>
+<div class="small search center">
+    {% include 'pix-art/search.html' %}
+</div>
+<script type="text/javascript">
+    favicons[{{ pageno }}] = [];
+</script>
+<div id="results">
+    <span id="results_list">
+    {% for result in results %}
+        {% set index = loop.index %}
+        {% include 'pix-art/result_templates/default.html' %}
+    {% endfor %}
+    </span>
     <div id="pagination">
-        {% if pageno > 1 %}
-            <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}">
-                <div class="{% if rtl %}right{% else %}left{% endif %}">
-                <input type="hidden" name="q" value="{{ q }}" />
-                {% for category in selected_categories %}
-                <input type="hidden" name="category_{{ category }}" value="1"/>
-                {% endfor %}
-                <input type="hidden" name="pageno" value="{{ pageno-1 }}" />
-                <input type="submit" value="<< {{ _('previous page') }}" />
-                </div>
-            </form>
-        {% endif %}
-        <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}">
-            <div class="{% if rtl %}left{% else %}right{% endif %}">
-                {% for category in selected_categories %}
-                <input type="hidden" name="category_{{ category }}" value="1"/>
-                {% endfor %}
-                <input type="hidden" name="q" value="{{ q }}" />
-                <input type="hidden" name="pageno" value="{{ pageno+1 }}" />
-                <input type="submit" value="{{ _('next page') }} >>" />
-            </div>
-        </form>
-
         <br />
+        <input type="button" onclick="load_more('{{ q }}', {{ pageno+1 }})" id="load_more" value="{{ _('Load more...') }}" />
     </div>
-    {% endif %}
 </div>
 {% endblock %}
+{% endif %}

searx/templates/pix-art/search.html

@@ -1,7 +1,7 @@
 <form method="{{ method or 'POST' }}" action="{{ url_for('index') }}" id="search_form">
     <div id="search_wrapper">
         <input type="text" placeholder="{{ _('Search for...') }}" id="q" class="q" name="q" tabindex="1" size="100" {% if q %}value="{{ q }}"{% endif %}/>
-        <input type="submit" value="search" id="search_submit" />
+        <input type="submit" value="" id="search_submit" />
         {% for category in categories %}
         <input type="hidden" name="category_{{ category }}" value="1"/>
         {% endfor %}