Skip to content

Commit

Permalink
Merge pull request #32 from wmde/escape-autosuggest
Browse files Browse the repository at this point in the history 
T184354 Autosuggest refactoring
  • Loading branch information
@tzhelyazkova
tzhelyazkova committed Feb 15, 2018
2 parents 6bb7b3c + e640639 commit 380b1eb
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 108 deletions.
9 changes: 9 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,15 @@ a:hover, a:active {
color: #333;
padding: 2px 6px 2px 6px;
}
.suggest_link img {
width: 16px;
height: 16px;
border: 0 none;
margin-right: 0.8em;
}
.suggest_link a.exact-match {
font-weight: bold;
}
.suggest_link_over {
background-color: #d8e8ff;
}
Expand Down
277 changes: 169 additions & 108 deletions suggest.js
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,169 @@
var ajaxCallTimeout = 5000;
var suggestTimeout = null;
var delay = 500;
var searchLang = "de";
var lastSearch = "";

function triggerSuggestLater( lang ) {
if ( suggestTimeout ) clearTimeout( suggestTimeout ); //kill suggestion timer
suggestTimeout = setTimeout( "searchSuggest('" + lang + "')", delay );
}

function searchSuggest( lang ) {
searchLang = lang;
var str = $( '#txtSearch' ).val();

if ( str == lastSearch ) return;
lastSearch = str;

if ( str == "" ) {
hideSuggest();
} else {
$.ajax( 'suggest.php', {
data: {
lang: searchLang,
search: str
},
success: function( response ) {
handleSearchSuggest( response )
},
timeout: ajaxCallTimeout
} );
}
}

function hideSuggest() {
$( '#search_suggest' ).hide();
lastSearch = "";
}

function handleSearchSuggest( response ) {
var searchString = lastSearch;
if( response == null ) return;

var ss = $( '#search_suggest' ).empty().show();
var str = response.split( "\n" );
ss.append( '<div class="suggest_link">Treffer f&uuml;r "' + searchString + '"</div>' );

$.each( str, function( index, row ) {
// skip first row, it's the search string itself
if( index === 0 ) return true;

var entry = row.split( "\t" );
var suggest = '<div class="suggest_link"><a href="go?l='+ searchLang +'&q=' + entry[0] + '">';

if ( searchString == entry[0] ) {
suggest += '<b>' + entry[0] + '</b>';
} else {
suggest += entry[0];
}

suggest += '</a> ';
suggest += '</div>';
ss.append( suggest );
} );
ss.append( '<hr noshade size=1 style="background-color:#ffffff;">' );
ss.append( '<div class="suggest_link"><img src="favicon.ico" width="16" height="16" title="Suchen mit Wikipedia" border="0" >&nbsp;&nbsp;<a href="go?l=' + searchLang + '&e=wikipedia&s=search&q=' + searchString + '">auf wikipedia.org suchen</a></div>' );

if (searchLang == "de") {
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'class="suggest_link"><img src="img/t-online.ico" width="16" height="16" title="Suchen mit T-Online" border="0" />&nbsp;&nbsp;<a href="go?l=' + searchLang + '&q=' + searchString + '&e=t-online&s=search">t-online.de</a></div>';
ss.append( suggest );

var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'class="suggest_link"><img src="img/web.de.ico" width="16" height="16" title="Suchen mit web.de" border="0" />&nbsp;&nbsp;<a href="go?l=' + searchLang + '&q=' + searchString + '&e=web.de&s=search">web.de</a></div>';
ss.append( suggest );

var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'class="suggest_link"><img src="img/exalead.ico" width="16" height="16" title="Suchen mit exalead" border="0" />&nbsp;&nbsp;<a href="go?l=' + searchLang + '&q=' + searchString + '&e=exalead&s=search">exalead.de</a></div>';
ss.append( suggest );

var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'class="suggest_link"><img src="img/wikiwix.ico" width="16" height="16" title="Suchen mit Wikiwix" border="0" />&nbsp;&nbsp;<a href="go?l=' + searchLang + '&q=' + searchString + '&e=wikiwix&s=search">wikiwix.com</a></div>';
ss.append( suggest );

var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'class="suggest_link"><img src="img/eyeplorer.ico" width="16" height="16" title="Suchen mit EyePlorer" border="0" />&nbsp;&nbsp;<a href="go?l=' + searchLang + '&q=' + searchString + '&e=eyeplorer&s=search">eyeplorer.com</a></div>';
ss.append( suggest );
}
}

$( document ).ready( function() {
$( 'body' ).on( 'mouseover', 'div.suggest_link', function() {
$( this ).addClass( 'suggest_link_over' );
} );
$( 'body' ).on( 'mouseout', 'div.suggest_link', function() {
$( this ).removeClass( 'suggest_link_over' );
} )
} );

function triggerPiwikTrack( element, code ) {
var piwikImgUrl = 'https://spenden.wikimedia.de/piwik/piwik.php?idsite=1&url=https://www.wikipedia.de/link-clicked/' + code + '&rec=1';
$(element).prepend( '<img src="' + piwikImgUrl + '" width="0" height="0" border="0" />' );
}
var ajaxCallTimeout = 5000;
var suggestTimeout = null;
var delay = 500;
var searchLang = "de";
var lastSearch = "";
var searchPath = 'go';
var searchProviders = {
default: [
{
title: 'Wikipedia',
anchor: 'auf wikipedia.org suchen',
linkId: 'wikipedia',
icon: 'favicon.ico'
}
],
languageExtras: {
de: [
{
title: 'T-Online',
anchor: 't-online.de',
linkId: 't-online',
icon: 'img/t-online.ico'
},
{
title: 'web.de',
anchor: 'web.de',
linkId: 'web.de',
icon: 'img/web.de.ico'
},
{
title: 'exalead',
anchor: 'exalead.de',
linkId: 'exalead',
icon: 'img/exalead.ico'
},
{
title: 'Wikiwix',
anchor: 'wikiwix.com',
linkId: 'wikiwix',
icon: 'img/wikiwix.ico'
},
{
title: 'EyePlorer',
anchor: 'eyeplorer.com',
linkId: 'eyeplorer',
icon: 'img/eyeplorer.ico'
}
]
}
};

function triggerSuggestLater( lang ) {
if ( suggestTimeout ) clearTimeout( suggestTimeout ); //kill suggestion timer
suggestTimeout = setTimeout( "searchSuggest('" + lang + "')", delay );
}

function searchSuggest( lang ) {
searchLang = lang;
var str = $( '#txtSearch' ).val();

if ( str == lastSearch ) return;
lastSearch = str;

if ( str == "" ) {
hideSuggest();
} else {
$.ajax( 'suggest.php', {
data: {
lang: searchLang,
search: str
},
success: function( response ) {
handleSearchSuggest( response )
},
timeout: ajaxCallTimeout
} );
}
}

function hideSuggest() {
$( '#search_suggest' ).hide();
lastSearch = "";
}

function getSearchProvidersForLanguage( language ) {
var activeSearchProviders = searchProviders.default;
if ( searchProviders.languageExtras.hasOwnProperty( language ) ) {
activeSearchProviders = activeSearchProviders.concat( searchProviders.languageExtras[language] );
}
return activeSearchProviders;
}

function getSearchLink( query, language, provider ) {
var queryParams = {
l: language,
q: query
};

if ( typeof provider === 'string' ) {
queryParams.e = provider;
queryParams.s = 'search';
}

return searchPath + '?' + $.param( queryParams );
}

function handleSearchSuggest( response ) {
var searchString = lastSearch;
if( response == null ) return;

var ss = $( '#search_suggest' ).empty().show(),
str = response.split( "\n" ),
searchProviders = getSearchProvidersForLanguage( searchLang )
;

ss.append(
$( '<div></div>' )
.addClass( 'suggest_link' )
.text( 'Treffer für ' + searchString )
);

$.each( str, function( index, row ) {
// skip first row, it's the search string itself
if( index === 0 ) return true;

var entry = row.split( "\t" );

ss.append(
$( '<div></div>' )
.addClass( 'suggest_link' )
.append(
$( '<a></a>' )
.attr( 'href', getSearchLink( entry[0], searchLang ) )
.addClass( searchString === entry[0] ? 'exact-match' : 'partial-match' )
.text( entry[0] )
)
);
} );
ss.append( '<hr noshade size=1 style="background-color:#ffffff;">' );

$.each( searchProviders, function ( index, provider ) {
ss.append(
$( '<div></div>' )
.addClass( 'suggest_link' )
.append(
$( '<img>' )
.attr( 'src', provider.icon )
.attr( 'title', 'Suchen mit ' + provider.title ),
$( '<a></a>' )
.attr( 'href', getSearchLink( searchString, searchLang, provider.linkId ) )
.text( provider.anchor )
)
);
} );
}

$( document ).ready( function() {
$( 'body' ).on( 'mouseover', 'div.suggest_link', function() {
$( this ).addClass( 'suggest_link_over' );
} );
$( 'body' ).on( 'mouseout', 'div.suggest_link', function() {
$( this ).removeClass( 'suggest_link_over' );
} )
} );

function triggerPiwikTrack( element, code ) {
var piwikImgUrl = 'https://spenden.wikimedia.de/piwik/piwik.php?idsite=1&url=https://www.wikipedia.de/link-clicked/' + code + '&rec=1';
$(element).prepend( '<img src="' + piwikImgUrl + '" width="0" height="0" border="0" />' );
}

0 comments on commit 380b1eb

Please sign in to comment.