| Index: trunk/tools/wp-photocommons/search.php |
| — | — | @@ -5,6 +5,7 @@ |
| 6 | 6 | <head> |
| 7 | 7 | <meta charset="utf-8" /> |
| 8 | 8 | <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.5.custom.css" /> |
| | 9 | + <link rel="stylesheet" href="css/jquery.suggestions.css" /> |
| 9 | 10 | </head> |
| 10 | 11 | <body> |
| 11 | 12 | <?php endif; ?> |
| — | — | @@ -22,6 +23,7 @@ |
| 23 | 24 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> |
| 24 | 25 | <script src="js/jquery-ui-1.8.5.custom.min.js"></script> |
| 25 | 26 | <script src="js/search.js"></script> |
| | 27 | + <script src="js/jquery.suggestions.js"></script> |
| 26 | 28 | </body> |
| 27 | 29 | </html> |
| 28 | 30 | <?php endif; ?> |
| \ No newline at end of file |
| Index: trunk/tools/wp-photocommons/js/search.js |
| — | — | @@ -57,17 +57,18 @@ |
| 58 | 58 | 'callback' : '!noencode!?' |
| 59 | 59 | }, args); |
| 60 | 60 | |
| 61 | | - var url = 'http://commons.wikimedia.org/w/api.php'; |
| 62 | | - var first = true; |
| 63 | | - for (var key in args) { |
| | 61 | + var url = 'http://commons.wikimedia.org/w/api.php', |
| | 62 | + first = true, |
| | 63 | + key; |
| | 64 | + for ( key in args ) { |
| 64 | 65 | var value = args[key]; |
| 65 | 66 | url += (first) ? '?' : '&'; |
| 66 | 67 | first = false; |
| 67 | 68 | |
| 68 | | - if (value.indexOf( '!noencode!' ) === 0 && typeof value === 'string' ) { |
| 69 | | - value = value.slice(10); |
| | 69 | + if ( value.indexOf( '!noencode!' ) === 0 && typeof value === 'string' ) { |
| | 70 | + value = value.slice( 10 ); |
| 70 | 71 | } else { |
| 71 | | - value = encodeURIComponent(value); |
| | 72 | + value = encodeURIComponent( value ); |
| 72 | 73 | } |
| 73 | 74 | |
| 74 | 75 | url += key + '=' + value; |
| — | — | @@ -75,19 +76,60 @@ |
| 76 | 77 | return url; |
| 77 | 78 | }, |
| 78 | 79 | init: function() { |
| 79 | | - |
| 80 | | - $( '#wp-photocommons-search' ).autocomplete({ |
| 81 | | - source : function(request, response) { |
| | 80 | + |
| | 81 | + /* jQuery suggestions */ |
| | 82 | + $( '#wp-photocommons-search' ).suggestions( { |
| | 83 | + fetch: function( query ) { |
| 82 | 84 | var url = Photocommons.getQueryUrl( 'pagesearch', { |
| 83 | | - 'search' : $( '#wp-photocommons-search' ).val() |
| | 85 | + 'search' : query |
| 84 | 86 | }); |
| 85 | | - |
| 86 | | - $.getJSON(url, function(data) { |
| 87 | | - response(data[1]); |
| | 87 | + log('query', query); |
| | 88 | + log('url', url); |
| | 89 | + $.getJSON( url, function( data ) { |
| | 90 | + $( '#wp-photocommons-search' ).suggestions( 'suggestions', data[1] ); |
| 88 | 91 | }); |
| 89 | 92 | }, |
| | 93 | + cancel: function() { |
| | 94 | + //... |
| | 95 | + }, |
| | 96 | + maxRows: 0, |
| | 97 | + result: { |
| | 98 | + select: function( $result ) { |
| | 99 | + var value = $result.val(), |
| | 100 | + url = Photocommons.getQueryUrl( 'pageimages', { |
| | 101 | + 'title' : value, |
| | 102 | + 'width' : '200' |
| | 103 | + }); |
| 90 | 104 | |
| 91 | | - select : function(event, ui) { |
| | 105 | + $( '#wp-photocommons-images' ).empty(); |
| | 106 | + $( '#wp-photocommons-loading' ).show(); |
| | 107 | + $.getJSON( url, function( data ) { |
| | 108 | + |
| | 109 | + if ( !data.query.pageids.length ) { |
| | 110 | + $( '#wp-photocommons-images' ).html( 'No images found :(' ); |
| | 111 | + } else { |
| | 112 | + $.each( data.query.pageids, function( key, pageid ) { |
| | 113 | + var img = data.query.pages[pageid]; |
| | 114 | + if ( img.imageinfo && img.imageinfo[0] ) { |
| | 115 | + $( '#wp-photocommons-images' ).append( '<img src="' + img.imageinfo[0].thumburl + '" style="display:none;"/>' ).find( 'img' ).fadeIn(); |
| | 116 | + |
| | 117 | + } |
| | 118 | + }); |
| | 119 | + |
| | 120 | + } |
| | 121 | + |
| | 122 | + $( '#wp-photocommons-loading' ).hide(); |
| | 123 | + }); |
| | 124 | + } |
| | 125 | + } |
| | 126 | + |
| | 127 | + } ); |
| | 128 | + |
| | 129 | + /* jQuery UI Autosuggest*/ |
| | 130 | + /* |
| | 131 | + $( '#wp-photocommons-search' ).autocomplete({ |
| | 132 | + |
| | 133 | + select : function( event, ui ) { |
| 92 | 134 | $( '#wp-photocommons-images' ).empty(); |
| 93 | 135 | $( '#wp-photocommons-loading' ).show(); |
| 94 | 136 | |
| — | — | @@ -96,18 +138,18 @@ |
| 97 | 139 | 'width' : '200' |
| 98 | 140 | }); |
| 99 | 141 | |
| 100 | | - $.getJSON(url, function(data) { |
| | 142 | + $.getJSON( url, function( data ) { |
| 101 | 143 | |
| 102 | 144 | if ( !data.query.pageids.length ) { |
| 103 | 145 | $( '#wp-photocommons-images' ).html( 'No images found :(' ); |
| 104 | 146 | } else { |
| 105 | | - $.each(data.query.pageids, function(key,pageid){ |
| | 147 | + $.each( data.query.pageids, function( key, pageid ) { |
| 106 | 148 | var img = data.query.pages[pageid]; |
| 107 | 149 | if ( img.imageinfo && img.imageinfo[0] ) { |
| 108 | 150 | $( '#wp-photocommons-images' ).append( '<img src="' + img.imageinfo[0].thumburl + '" style="display:none;"/>' ).find( 'img' ).fadeIn(); |
| 109 | 151 | |
| 110 | 152 | } |
| 111 | | - }) |
| | 153 | + }); |
| 112 | 154 | |
| 113 | 155 | } |
| 114 | 156 | |
| — | — | @@ -115,6 +157,7 @@ |
| 116 | 158 | }); |
| 117 | 159 | } |
| 118 | 160 | }); |
| | 161 | + */ |
| 119 | 162 | } |
| 120 | 163 | }); |
| 121 | 164 | |
| Index: trunk/tools/wp-photocommons/js/jquery.suggestions.js |
| — | — | @@ -145,7 +145,6 @@ |
| 146 | 146 | var $results = context.data.$container.children( '.suggestions-results' ); |
| 147 | 147 | $results.empty(); |
| 148 | 148 | var expWidth = -1; |
| 149 | | - var $autoEllipseMe = $( [] ); |
| 150 | 149 | var matchedText = null; |
| 151 | 150 | for ( var i = 0; i < context.config.suggestions.length; i++ ) { |
| 152 | 151 | var text = context.config.suggestions[i]; |
| — | — | @@ -180,7 +179,6 @@ |
| 181 | 180 | // factor in any padding, margin, or border space on the parent |
| 182 | 181 | expWidth = $span.outerWidth() + ( context.data.$container.width() - $span.parent().width()); |
| 183 | 182 | } |
| 184 | | - $autoEllipseMe = $autoEllipseMe.add( $result ); |
| 185 | 183 | } |
| 186 | 184 | } |
| 187 | 185 | // Apply new width for results box, if any |
| — | — | @@ -188,8 +186,6 @@ |
| 189 | 187 | var maxWidth = context.config.maxExpandFactor*context.data.$textbox.width(); |
| 190 | 188 | context.data.$container.width( Math.min( expWidth, maxWidth ) ); |
| 191 | 189 | } |
| 192 | | - // autoEllipse the results. Has to be done after changing the width |
| 193 | | - $autoEllipseMe.autoEllipsis( { hasSpan: true, tooltip: true, matchText: matchedText } ); |
| 194 | 190 | } |
| 195 | 191 | } |
| 196 | 192 | break; |
| — | — | @@ -303,6 +299,8 @@ |
| 304 | 300 | break; |
| 305 | 301 | // Enter |
| 306 | 302 | case 13: |
| | 303 | + console.log('case 13'); |
| | 304 | + //debugger; |
| 307 | 305 | context.data.$container.hide(); |
| 308 | 306 | preventDefault = wasVisible; |
| 309 | 307 | selected = context.data.$container.find( '.suggestions-result-current' ); |