Commit 6d42e913 authored by Sebastien Jourdain's avatar Sebastien Jourdain

Improve basic search in web-catalyst

Change-Id: Ie865bdb8924223aca06e2f5a1125d0b28443afd7
parent 3ce7a4f1
......@@ -28,10 +28,42 @@
display: block;
}
.vtkweb-catalyst-analysis-search .query-results {
.vtkweb-catalyst-analysis-search .query-results {
position: relative;
}
.vtkweb-catalyst-analysis-search .query-result {
.vtkweb-catalyst-analysis-search .query-result {
margin: 10px;
border-radius: 5px;
border: solid 1px black;
position: relative;
float: left;
}
.vtkweb-catalyst-analysis-search .query-stats {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 5px;
z-index: 2;
}
.vtkweb-catalyst-analysis-search .query-result .image-result {
position: relative;
width: 95%;
z-index: 1;
}
.vtkweb-catalyst-analysis-search .search-button {
padding: 2px;
border-radius: 4px;
border: solid 1px black;
background: white;
margin-left: 15px;
}
.vtkweb-catalyst-analysis-search .toggle-stats.stats {
background: #ccc;
}
\ No newline at end of file
(function ($, GLOBAL) {
var SEARCH_TEMPLATE = '<div class="search-toolbar"><b>Query</b><input type="text" class="query-expression"/><input type="range" min="10" max="100" value="10" class="zoom-level"/><span class="result-count"></span><i>HELP</i></div><div class="query-results"></div>',
var SEARCH_TEMPLATE = '<div class="search-toolbar"><b>Query</b><input type="text" class="query-expression"/><b>Sort&nbsp;by</b><input type="text" class="sort-expression"/><input type="range" min="10" max="100" value="10" class="zoom-level"/><span class="result-count"></span><span class="vtk-icon-chart-area toggle-stats stats action search-button"></span><span class="vtk-icon-picture-1 render-all action search-button" title="Render all images" alt="Render all images"></span><i>HELP</i></div><div class="query-results"></div>',
TOOLBAR_TEMPLATE = '<div class=sub-menu><ul class="menu left"><li class="vtk-icon-list-add sub action" data-type="composite-image-stack"><ul></ul></li><li class="vtk-icon-chart-line sub action" data-type="catalyst-resample-viewer"><ul></ul></li><li class="vtk-icon-loop-alt sub action" data-type="catalyst-viewer"><ul></ul></li></ul><ul class="menu right"><li class="search-title"/></ul></div><div class="search-panel"></div>',
ENTRY_TEMPLATE = '<li class="create-search" data-path="PATH" data-title="TITLE">TITLE<i class=help>DESCRIPTION</i></li>',
SEARCH_FACTORY = {
......@@ -150,16 +150,34 @@
resultContainer = $('.query-results', container),
imageList = [],
count = results.length,
width = $('.zoom-level', container).val(),
imgStr = '<img class="query-result" src="URL" width="WIDTH%" title="ALT" alt="ALT"/>'.replace(/WIDTH/g, width);
sortQuery = $('.sort-expression', container).val(),
imgStr = '<div class="query-result" data-url="URL"><div class="query-stats">STATS</div><img class="image-result"/></div>';
// Sort results if possible
if(sortQuery.trim().length > 0) {
var exposeVars = "var noop = 0";
for(var key in results[0]['args']) {
exposeVars += ', ' + key + ' = obj.args["' + key + '"]';
}
exposeVars += ';';
var sortFunctionSTR = "function extractValue(obj) {" + exposeVars + "return " + sortQuery + ";}; return extractValue(a) - extractValue(b);",
sortFunc = new Function(["a","b"], sortFunctionSTR);
results.sort(sortFunc);
}
while(count--) {
if(results[count]['keep']) {
imageList.push(imgStr.replace(/URL/g, results[count]['url']).replace(/ALT/g, JSON.stringify(results[count]["args"]).replace(/["{}]/g,'').replace(/,/g,'\n').replace(/:/g,' : ')));
imageList.push(imgStr.replace(/URL/g, results[count]['url']).replace(/STATS/g, JSON.stringify(results[count]["args"]).replace(/["{}]/g,'').replace(/,/g,'<br/>').replace(/:/g,' : ')));
}
}
resultContainer.empty()[0].innerHTML = imageList.join('');
$('.zoom-level', container).trigger('change');
$('.query-result', container).click(function(){
var me = $(this), img = $('img', me), url = me.attr('data-url');
img.attr('src', url);
});
}
// ------------------------------------------------------------------------
......@@ -167,7 +185,10 @@
function initializeListeners(container) {
var query = $('.query-expression', container),
zoom = $('.zoom-level', container),
sort = $('.sort-expression', container),
resultCountTxt = $('.result-count', container),
toggleStats = $('.toggle-stats', container),
renderAll = $('.render-all', container),
resultCount = 0;
query.change(function(){
......@@ -179,9 +200,33 @@
});
zoom.bind('change mousemove keyup', function(){
$('.query-result', container).css('width', $(this).val() +'%');
var widthRef = $(window).width() * Number($(this).val()) / 100.0;
$('.query-result', container).css('width', widthRef).css('height', widthRef);
})
sort.bind('change keyup', function(e){
// Apply search
if(e.type === 'keyup' && e.keyCode !== 13) {
return;
}
query.trigger('change');
});
toggleStats.click(function(){
var me = $(this).toggleClass('stats'), isActive = me.hasClass('stats');
if(isActive) {
$('.query-stats').show();
} else {
$('.query-stats').hide();
}
});
renderAll.click(function(){
$('.query-result', container).each(function(){
var me = $(this), img = $('img', me), url = me.attr('data-url');
img.attr('src', url);
});
});
}
/**
......
......@@ -339,10 +339,9 @@
.vtkweb-catalyst-analysis-composite-search .composite-result ul {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 5px;
}
\ No newline at end of file
......@@ -1328,7 +1328,7 @@
// Add search/results containers
$('<div/>', {class: "chart-container"}).appendTo(me);
$('<div/>', {class: "search-toolbar", html: '<div class="table"><span class="cell"><b>Query</b></span><span class="cell expand"><input type="text" class="query-expression"></span><span class="cell"><b>Sort&nbsp;by</b></span><span class="cell expand"><input type="text" class="sortby-expression"></span><span class="cell"><span class="result-count"></span></span><span class="cell"><span class="vtk-icon-chart-area toggle-stats stats action"></span></span><span class="cell"><span class="vtk-icon-picture-1 render-all-composites action" title="Render all composites alt="Render all composites"></span></span><span class="cell"><input type="range" class="zoom-level" value="10" max="100" min="10"></span></div><i>HELP</i>'.replace(/HELP/g, helpTxt)}).appendTo(me);
$('<div/>', {class: "search-toolbar", html: '<div class="table"><span class="cell"><b>Query</b></span><span class="cell expand"><input type="text" class="query-expression"></span><span class="cell"><b>Sort&nbsp;by</b></span><span class="cell expand"><input type="text" class="sortby-expression"></span><span class="cell"><span class="result-count"></span></span><span class="cell"><span class="vtk-icon-chart-area toggle-stats stats action"></span></span><span class="cell"><span class="vtk-icon-picture-1 render-all-composites action" title="Render all composites" alt="Render all composites"></span></span><span class="cell"><input type="range" class="zoom-level" value="10" max="100" min="10"></span></div><i>HELP</i>'.replace(/HELP/g, helpTxt)}).appendTo(me);
$('<div/>', {class: "composite-search-results"}).appendTo(me);
initializeListeners(me, createSearchManager(me, data, dataBasePath), null);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment