fixed google image search

resources/library/search/Google images.wgs/config.xml

@@ -10,7 +10,7 @@
   		<name>Choisir</name>
 		<author href="http://www.getuniboard.com"
 	            email="info@mnemis.com">Mnemis SA</author>
-		<description>Choisir widget</description> 
+		<description>Google Image Search</description> 
 
  		<content src="index.html"/> 
 </widget>

resources/library/search/Google images.wgs/css/basic.css

@@ -6,15 +6,6 @@ html, body{
     margin: 0;
 }
 
-a {html, body{
-    width: 100%;
-    padding: 0;
-    height: auto;
-    background-color: white;
-    margin: 0;
-}
-
-
 ::-webkit-scrollbar {
     width: 14px;
     background-color:white;
@@ -48,7 +39,7 @@ a {html, body{
 }
 
 a {
-    text-decoration: none;
+    text-decoration: underline;    
 }
 
 .disclaimer{
@@ -56,41 +47,28 @@ a {
     position: fixed;
     left: 0;
     bottom: 0;    
-    margin-left: 1px;
-    margin-right: 1px;
-    margin-bottom: 0px;
     padding: 5px;
     text-align: center;
     background-color: #BBBBBB;    
-    -webkit-border-top-left-radius: 15px;
+    border-top: solid 4px #EEEEEE;
-    -webkit-border-top-right-radius: 15px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    border: solid 4px #EEEEEE;
     border-bottom: none;
-    z-index: 10;
     font-size: 12px;
 }
 
 #searchResult {
     overflow: hidden;
     text-align: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
 }
 
 .search{   
-    width: 90%;    
     position: fixed;
     top: 0;
     left: 0;
     padding: 5px;
     background-color: #BBBBBB;
-    -webkit-border-bottom-left-radius: 15px;
+    border-bottom: solid 4px #EEEEEE;
-    -webkit-border-bottom-right-radius: 15px;
-    border-bottom-left-radius: 15px;
-    border-bottom-right-radius: 15px;
-    border: solid 4px #EEEEEE;
-    border-top: none;
-    z-index: 101;
 }
 
 .search,
@@ -100,25 +78,6 @@ a {
     -webkit-box-sizing: border-box;
 }
 
-.togglePages{
-    padding: 0;
-    position: absolute;
-    bottom: -19px;
-    left: 40%;
-    width: 22%;
-    height: 15px;
-    background-color: #666;
-    -webkit-border-bottom-left-radius: 20px;
-    -webkit-border-bottom-right-radius: 20px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    -webkit-box-shadow: #dadada -1px 0 4px;
-    box-shadow: #dadada -1px 0 4px;
-    cursor: pointer;
-	z-index: 100;
-    text-align: center;
-}
-
 .toggleIcon{
     display: inline-block;
     width: 14px;
@@ -175,6 +134,7 @@ a {
 .searchResult{
     width: 98%;
     padding: 3px;
+
     background-color:#123456;
 }
 
@@ -186,367 +146,13 @@ a {
     overflow: hidden;
     font-size: small;
     font-family: Verdana,Arial,Helvetica,sans-serif;
-    border: 1px solid #666;
-    border-radius: 5px;
-    -webkit-box-shadow: #dadada -1px 0 4px;
-    -webkit-border-radius: 5px;
-    box-shadow: #666 -1px 0 4px;
     vertical-align: top;
 }
 
 .resultFooter{
-    float: left;
-    margin: 5px;
-    padding: 3px;
-    width: 100%;
-    font-family: Verdana,Arial,Helvetica,sans-serif;
-    font-weight: bold;
-    font-size: x-large;
-    text-align: center;
-}
-
-#branding{
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-}
-
-.filterContainer{
-    float: left;
-    margin: 2px;
-    padding: 2px;
-    font-size: 14px;
-    
-}
-
-.filterSelect{
-    border-style:none;
-    -webkit-border-top-right-radius: 15px;
-    -webkit-border-bottom-right-radius: 15px;
-    -moz-border-radius-topright: 15px;
-    -moz-border-radius-bottomright: 15px;
-    border-top-right-radius: 15px;
-    margin-top: 2px;
-    width: 100%;
-}
-
-span{    
-    font-family: Verdana,Arial,Helvetica,sans-serif;
-    color: #666;
-}
-
-[draggable] {
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.toggleFilters{
-    margin: 0;
-    padding: 0;
-    background-position: center;
-    background-image: url(../images/down.png);
-    position: absolute;
-    top: 11px;
-    right: 6px;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
-.colors_line {
-    float: left;
-    margin: 4px;
-    margin-right: 0;
-    clear: left;
-}
-
-.custom {
-    opacity: 0;
-    position: absolute;
-    left: -10000px;
-}
-
-.filter_button.button.color {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    border: 1px solid #EBEBEB;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
-
-.filter_button.button.color:hover {
-  border: 1px solid rgb(128,128,128);
-  cursor: pointer;
-}
-
-input[type="radio"]:checked + .filter_button.button.color {
-  border: 1px solid rgb(255,255,255);
-  box-shadow: 0 0 0px 1px #000;
-  -webkit-box-shadow: 0 0 0px 1px #000;
-}
-
-#allcolor {
-    background: white url('../images/search_app.png') -43px -144px no-repeat;
-}
-
-#colored {
-    background: white url('../images/search_app.png') -43px -244px no-repeat;
-}
-
-#grayed {
-    background: white url('../images/search_app.png') -45px -343px no-repeat;
-}
-
-#black{
-    background-color:#ffffff;
-}
-#blue{
-    background-color:#0000FF;
-}
-#brown{
-    background-color:rgba(139, 82, 16, 1);
-}
-
-#gray{
-    background-color:#999999;
-}
-
-#green{
-    background-color:#00CC00;
-}
-
-#orange{
-    background-color:#FB940B;
-}
-
-#pink{
-    background-color:#FF98BF;
-} 
-
-#purple{
-    background-color:#762CA7;
-}
-
-#red{
-    background-color:#CC0000;
-}
-
-#teal{
-    background-color:#03C0C6;
-}
-
-#white{
-    background-color:#000000;
-}
-
-#yellow{
-    background-color:#FFFF00;
-}
-
-.selectBox-dropdown, .selectBox-options li a { 
-    line-height: 1.3 !important;
-    font-size: 13px;
-}
-
-.pager_button {
-    padding: 3px 5px;
-    font-size: 16px;
-    color: black;
-    display: inline-block;
-}
-
-.pager_button.active {
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    background-color: gray;
-    color: white;
-}
-
-
-    text-decoration: none;
-}
-
-::-webkit-scrollbar {
-    width: 14px;
-    background-color:white;
-}
-
-
-::-webkit-scrollbar-thumb {
-    border-radius: 10px; 
-    background-color:lightgray;
-    border: 2px solid gray;
-}
-
-::-webkit-scrollbar-button:vertical:start{
-    border-radius: 10px;
-    background-color:lightgray;
-    background-image: url(../images/trgUp.png);
-    background-size: 8px auto;
-    background-position: center;
-    background-repeat: no-repeat;
-    border: 2px solid gray;
-}
-
-::-webkit-scrollbar-button:vertical:end{
-    border-radius: 10px;
-    background-color:lightgray;
-    background-image: url(../images/trgDown.png);
-    background-size: 8px auto;
-    background-position: center;
-    background-repeat: no-repeat;
-    border: 2px solid gray;
-}
-
-.disclaimer{
-    height: auto;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    margin-left: 1px;
-    margin-right: 1px;
-    margin-bottom: 0px;
-    padding: 5px;
-    text-align: center;
-    background-color: #BBBBBB;
-    -webkit-border-top-left-radius: 15px;
-    -webkit-border-top-right-radius: 15px;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    border: solid 4px #EEEEEE;
-    border-bottom: none;
-    z-index: 10;
-    font-size: 12px;
-}
-
-#searchResult {
-    overflow: hidden;
-    text-align: center;
-}
-
-.search{
-    width: 90%;    
     position: fixed;
-    top: 0;
     left: 0;
-    padding: 5px;
+    bottom: 50px; 
-    background-color: #BBBBBB;
-    -webkit-border-bottom-left-radius: 15px;
-    -webkit-border-bottom-right-radius: 15px;
-    border-bottom-left-radius: 15px;
-    border-bottom-right-radius: 15px;
-    border: solid 4px #EEEEEE;
-    border-top: none;
-    z-index: 101;
-}
-
-.search,
-.disclaimer {
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
-
-.togglePages{
-    padding: 0;
-    position: absolute;
-    bottom: -19px;
-    left: 40%;
-    width: 22%;
-    height: 15px;
-    background-color: #666;
-    -webkit-border-bottom-left-radius: 20px;
-    -webkit-border-bottom-right-radius: 20px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    -webkit-box-shadow: #dadada -1px 0 4px;
-    box-shadow: #dadada -1px 0 4px;
-    cursor: pointer;
-	z-index: 100;
-    text-align: center;
-}
-
-.toggleIcon{
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    background: url(../images/trgUp.png) 50% no-repeat;
-    
-}
-
-.searchInput{
-    padding: 3px;
-    float: left;
-    width: 100%;
-    border-radius: 3px;
-    border-style: none;
-    height: 22px;
-    line-height: 18px;
-    vertical-align: middle;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
-
-.searchButton{
-    background: url("../images/search_app.png") -38px -38px no-repeat;
-    width: 24px;
-    height: 24px;
-    overflow: hidden;
-    position: absolute;
-    right: 30px;
-    top: 9px;
-    margin-left: -2px;
-    cursor: pointer;
-}
-
-.subSearch{
-    margin: 0;
-    float: left;    
-}
-
-#subSearchInput{
-    width: 100%;
-    float: left;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    padding: 5px;
-    padding-right: 26px;
-}
-
-#subSearchFilter{
-    width: 100%;
-    float: left;
-    display: none;
-}
-
-.searchResult{
-    width: 98%;
-    padding: 3px;
-    background-color:#123456;
-}
-
-.imgContainer{
-    display: inline-block;
-    padding: 3px;
-    margin: 3px;
-    text-align: center;
-    overflow: hidden;
-    font-size: small;
-    font-family: Verdana,Arial,Helvetica,sans-serif;
-    border: 1px solid #666;
-    border-radius: 5px;
-    -webkit-box-shadow: #dadada -1px 0 4px;
-    -webkit-border-radius: 5px;
-    box-shadow: #666 -1px 0 4px;
-    vertical-align: top;
-}
-
-.resultFooter{
-    float: left;
     margin: 5px;
     padding: 3px;
     width: 100%;
@@ -554,13 +160,7 @@ input[type="radio"]:checked + .filter_button.button.color {
     font-weight: bold;
     font-size: x-large;
     text-align: center;
-}
+    background-color: white;
-
-#branding{
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
 }
 
 .filterContainer{

resources/library/search/Google images.wgs/index.html

@@ -66,7 +66,7 @@
                         // For each result write it's title and image to the screen
                         var result = results[i];
                         var imgContainer = $("<div class='imgContainer' draggable='true'>");
-                        var title = document.createElement('div');
+                        //var title = document.createElement('div');
                         var iUrl = $("<input type='hidden'/>");
                         var iContent = $("<input type='hidden'/>");
                         var iHeight = $("<input type='hidden'/>");
@@ -75,7 +75,7 @@
             
                         // We use titleNoFormatting so that no HTML tags are left in the 
                         // title
-                        title.innerHTML = result.title;
+                        //title.innerHTML = result.title;
                         var newImg = document.createElement('img');
 
                         // There is also a result.url property which has the escaped version
@@ -89,7 +89,7 @@
                         var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
                         imgContainer.width(imgWidth).height(imgHeight);
                         imgContainer.append($(newImg));
-                        imgContainer.append($(title));  
+                        //imgContainer.append($(title));  
                         imgContainer.append(iUrl);
                         imgContainer.append(iContent);
                         imgContainer.append(iHeight);
@@ -164,8 +164,8 @@
                     
                 var search = $("<div id='search' class='search'>").appendTo("body");
     
-                var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
+                //var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
-                var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
+                //var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
     
                 var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
                 var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
@@ -245,16 +245,18 @@
                 toggleFilters.click(function(){
                     if(filtersDisplayed){
                         subSearchFilter.hide();
+                        //$("#search").height(46);
                         toggleFilters.css("background-image","url(images/down.png)");
                         filtersDisplayed = false;
                     } else {
+                        //$("#search").height(120);
                         subSearchFilter.show();
                         toggleFilters.css("background-image","url(images/up.png)");
                         filtersDisplayed = true;
                     }
                 });
                 
-                togglePages.click(function(event){
+                /*togglePages.click(function(event){
                     if(mode){
                         hide = false;
                         $("#search, #disclaimer").slideDown('fast', function(){
@@ -270,12 +272,12 @@
                         });
                         mode = true;
                     }
-                });
+                });*/
                 
                 searchButton.click(function(){
                     if(!hide){
                         checkFilters(imageSearch).execute(searchInput.val());
-                        togglePages.trigger("click");
+                        //togglePages.trigger("click");
                     }
                 });
                 
@@ -283,7 +285,7 @@
                     if(!hide){
                         if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
                             checkFilters(imageSearch).execute(searchInput.val());
-                            togglePages.trigger("click");
+                            //togglePages.trigger("click");
                         }
                               
                     }
@@ -463,7 +465,6 @@
 
     </head>
     <body style="font-family: Arial;border: 0 none;">
-        <div id="branding"  style="float: left;"></div><br />
         <div id="searchResult"></div>
     </body>
 </html>