Added border on clicked image to indicate it can be double clicked or drag it (issue #62)

2012-10-14 18:19:12 -03:00
commit 340f5fe1fe
@@ -1,5 +1,5 @@
 ## -*- coding: utf-8 -*-
- 
+
 <%page args="artist, album, stylesheet" />

 <html xmlns="http://www.w3.org/1999/xhtml">
@@ -14,6 +14,7 @@
            var imageSearch;
            var currentPage = 0;
            var clear = true;
+            var selected;

            google.load('search', '1');

@@ -51,6 +52,7 @@

                        var newImg = document.createElement('img');
                        newImg.ondblclick = setCover;
+                        newImg.onclick = highlight;
                        newImg.src = result.tbUrl;
                        newImg.id = result.url;
                        newImg.setAttribute("class", "srchresult");
@@ -81,6 +83,17 @@
                document.title = this.id
            }

+            function highlight(event) {
+                if ( selected !== undefined ) {
+                    selected.style.border = "hidden"
+                    selected.style.margin = "5px"
+                }
+
+                selected = this
+                selected.style.border = "solid 3px blue"
+                selected.style.margin = "2px"
+            }
+
            function onSearchText() {
                var txt = document.getElementById('searchtext').value;
                clear = true;
@@ -1,6 +1,6 @@
 body { font-size: 8pt; padding: 6px; line-height: 1.4em;  }
 #heading {font-size: 10pt; text-align: center; background-color: #555; color: white;}
-.srchresult {margin: 5px; width: 125px; height: 125px; float: left}
+.srchresult {margin: 5px; width: 125px; height: 125px; float: left;}
 #searchtext {width:15em}
 #searchmode {width:15em}
 #content {overflow: auto}