picky-client 0.2.4 → 0.3.0

data/sinatra_prototype/javascripts/picky.client.js

@@ -0,0 +1,62 @@
+var Localization = {
+  // TODO Remove.
+  location_delimiters: { de:'in', fr:'à', it:'a', en:'in', ch:'in' },
+  
+  explanation_delimiters: { de:'und', fr:'et', it:'e', en:'and', ch:'und' }
+};
+
+// The client handles parameters and
+// offers an insert method.
+//
+var PickyClient = function(config) {
+  
+  // Params handling.
+  //
+  
+  // This is used to generate the correct query strings, localized.
+  //
+  // e.g with locale it:
+  // ['title', 'ulysses', 'Ulysses'] => 'titolo:ulysses'
+  //
+  // This needs to correspond to the parsing in the search engine.
+  //
+  Localization.qualifiers   = config.qualifiers || {};
+  
+  // This is used to explain the preceding word in the suggestion text.
+  //
+  // e.g. with locale it:
+  // ['title', 'ulysses', 'Ulysses'] => 'Ulysses (titolo)'
+  //
+  Localization.explanations = config.explanations || {};
+  
+  // TODO Explain.
+  //
+  Localization.explanation_delimiters = { de:'und', fr:'et', it:'e', en:'and', ch:'und' };
+  
+  // Either you pass it a backends hash with full and live,
+  // or you pass it full and live (urls), which will then
+  // be wrapped in appropriate backends. 
+  //
+  var backends = config.backends;
+  if (backends) {
+    backends.live || alert('Both a full and live backend must be provided.');
+    backends.full || alert('Both a full and live backend must be provided.');
+  } else {
+    config.backends = {
+      live: config.live && new LiveBackend(config.live) || alert('A live backend path must be provided.'),
+      full: config.full && new FullBackend(config.full) || alert('A live backend path must be provided.')
+    };
+  }
+  
+  // The central Picky controller.
+  //
+  var controller = config.controller && new config.controller(config) || new PickyController(config);
+  
+  // Insert a query into the client and run it.
+  // Default is a full query.
+  //
+  this.insert = function(query, full) {
+    controller.insert(query, full || true);
+  };
+  
+};

data/sinatra_prototype/javascripts/picky.controller.js

@@ -0,0 +1,107 @@
+var PickyController = function(config) {
+  
+  var view = new PickyView(this, config);
+  
+  var backends         = config.backends;
+  var beforeCallback   = config.before || function(params, query, offset) {  };
+  var successCallback  = config.success || function(data, query) {  };
+  var afterCallback    = config.after || function(data, query) {  };
+  
+  // If the given backend cannot be found, ignore the search request.
+  //
+  var search = function(type, query, callback, offset, specificParams) {
+    var currentBackend = backends[type];
+    if (currentBackend) { currentBackend.search(query, callback, offset, specificParams); };
+  };
+  
+  var fullSearchCallback = function(data, query) {
+    data = successCallback(data, query) || data;
+    
+    view.fullResultsCallback(data);
+    
+    afterCallback(data, query);
+  };
+  var fullSearch = function(query, possibleOffset, possibleParams) {
+    var params = possibleParams || {};
+    var offset = possibleOffset || 0;
+    liveSearchTimer.stop();
+    
+    params = beforeCallback(params, query, offset) || params;
+    
+    search('full', query, fullSearchCallback, offset, params);
+  };
+  var liveSearchCallback = function(data, query) {
+    data = successCallback(data, query) || data;
+    
+    view.liveResultsCallback(data);
+    
+    afterCallback(data, query);
+  };
+  var liveSearch = function(query, possibleParams) {
+    var params = possibleParams || {};
+    
+    params = beforeCallback(params) || params;
+    
+    search('live', query, liveSearchCallback, 0);
+  };
+  
+  // The timer is initially instantly stopped.
+  //
+  var liveSearchTimer = $.timer(180, function(timer) {
+    liveSearch(view.text());
+    timer.stop();
+  });
+  liveSearchTimer.stop();
+  
+  this.insert = function(query, full) {
+    view.insert(query);
+    
+    if (full) { fullSearch(query); } // TODO
+  };
+  
+  var clearButtonClicked = function() {
+    liveSearchTimer.stop();
+  };
+  this.clearButtonClicked = clearButtonClicked;
+  
+  var searchTextCleared  = function() {
+    liveSearchTimer.stop();
+  };
+  this.searchTextCleared = searchTextCleared;
+  
+  var shouldTriggerSearch = function(event) {
+    var validTriggerKeys = [
+                  0,  // special char (ä ö ü etc...)
+                  8,  // backspace
+                  13, // enter
+                  32, // space
+                  46, // delete
+                  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, // numbers
+                  65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90 // a-z
+                ];
+                
+    return $.inArray(event.keyCode, validTriggerKeys) > -1;
+  };
+  var searchTextEntered = function(text, event) {
+    if (shouldTriggerSearch(event)) {
+      if (event.keyCode == 13) { fullSearch(text); } else { liveSearchTimer.reset(); }
+    }
+  };
+  this.searchTextEntered = searchTextEntered;
+  
+  var searchButtonClicked = function(text) {
+    fullSearch(text);
+  };
+  this.searchButtonClicked = searchButtonClicked;
+  
+  var allocationChosen = function(text) {
+    fullSearch(text);
+  };
+  this.allocationChosen = allocationChosen;
+  
+  // Move to a view object.
+  var addinationClicked = function(text, event) {
+    fullSearch(text, event.data.offset);
+  };
+  this.addinationClicked = addinationClicked;
+};

data/sinatra_prototype/javascripts/picky.data.js

@@ -0,0 +1,78 @@
+// The data is basically the model behind the search.
+//
+
+// Container for an allocation.
+//
+function Allocation(type, weight, count, combination, ids, rendered) {
+  var self = this;
+
+  this.type        = type;        // 'books'
+  this.weight      = weight;      // 5.14
+  this.count       = count;       // 14
+  this.combination = combination; // [['title', 'Old', 'old'], ['title', 'Man', 'man']]
+  this.ids         = ids || [];
+  this.rendered    = rendered || [];
+  this.entries     = this.rendered;
+
+  this.isType = function(name) {
+    return name == self.type;
+  };
+};
+
+// Container for the allocations.
+//
+// allocs (should) come preordered by weight.
+//
+function Allocations(allocations) {
+  var self = this;
+
+  this.allocations = [];
+
+  // Wrap and save the allocations.
+  //
+  for (var i = 0, l = allocations.length; i < l; i++) {
+    var alloc = allocations[i];
+    var new_allocation = new Allocation(alloc[0], alloc[1], alloc[2], alloc[3], alloc[4], alloc[5]);
+    this.allocations.push(new_allocation);
+  }
+  this.length = this.allocations.length;
+  
+  this.each = function(callback) {
+    return $.each(this.allocations, callback);
+  };
+};
+
+// Container for the types.
+//
+// data:
+//   offset: X
+//   duration: X
+//   total: X
+//   allocations:
+//     Allocation[] of [weight, count, combination, Entry[] of [id, content]]
+//
+function PickyData(data) {
+  var self = this;
+
+  // Attributes.
+  //
+  var total       = data.total;
+  var duration    = data.duration;
+  var offset      = data.offset;
+  var allocations = new Allocations(data.allocations || []);
+
+  // Expose some attributes.
+  //
+  this.total       = total;
+  this.duration    = duration;
+  this.offset      = offset;
+  this.allocations = allocations;
+  
+  // Are there any results?
+  //
+  var isEmpty = function() {
+    return total == 0;
+  };
+  this.isEmpty = isEmpty;
+  
+};

data/sinatra_prototype/javascripts/picky.extensions.js

@@ -0,0 +1,15 @@
+Array.prototype.index = function(val) {
+  for(var i = 0, l = this.length; i < l; i++) {
+    if(this[i] == val) return i;
+  }
+  return null;
+};
+
+Array.prototype.include = function(val) {
+  return this.index(val) !== null;
+};
+
+Array.prototype.remove = function(index) {
+  this.splice(index, 1);
+  return this;
+};

data/sinatra_prototype/javascripts/picky.min.js

@@ -0,0 +1,17 @@
+Array.prototype.index=function(b){for(var d=0,f=this.length;d<f;d++)if(this[d]==b)return d;return null};Array.prototype.include=function(b){return this.index(b)!==null};Array.prototype.remove=function(b){this.splice(b,1);return this};var PickyI18n={};$(function(){PickyI18n.locale=$("html").attr("lang")||"en"});
+var dictionary={common:{join:{de:"und",fr:"et",it:"e",en:"and",ch:"und"},"with":{de:"mit",fr:"avec",it:"con",en:"with",ch:"mit"},of:{de:"von",fr:"de",it:"di",en:"of",ch:"vo"},to:{de:"bis",fr:"\u00e0",it:"alla",en:"to",ch:"bis"}},results:{addination:{more:{de:"Weitere Resultate",fr:"Autres r\u00e9sultats",it:"Altri risultati",en:"More results",ch:"Mee Resultaat"}},header:{de:"Ergebnisse",fr:"R\u00e9sultats",it:"Risultati",en:"Results",ch:"Erg\u00e4bnis"}}},t=function(b){for(var d=PickyI18n.locale||
+"en",f=b.split(".").concat(d),c=dictionary,j=0,r=f.length;j<r;j++){c=c[f[j]];if(c==undefined){c="Translation missing: "+b+"."+d;break}}return c};function Allocation(b,d,f,c,j,r){var e=this;this.type=b;this.weight=d;this.count=f;this.combination=c;this.ids=j||[];this.entries=this.rendered=r||[];this.isType=function(k){return k==e.type}}function Allocations(b){this.allocations=[];for(var d=0,f=b.length;d<f;d++){var c=b[d];this.allocations.push(new Allocation(c[0],c[1],c[2],c[3],c[4],c[5]))}this.length=this.allocations.length;this.each=function(j){return $.each(this.allocations,j)}}
+function PickyData(b){var d=b.total,f=b.duration,c=b.offset;b=new Allocations(b.allocations||[]);this.total=d;this.duration=f;this.offset=c;this.allocations=b;this.isEmpty=function(){return d==0}};var PickyView=function(b,d){var f=d.showResultsLimit||10,c=$("#picky input.query"),j=$("#picky div.reset"),r=$("#picky input.search_button"),e=$("#picky div.status"),k=$("#picky .dashboard"),s=$("#picky .results"),o=$("#picky .no_results"),g=new PickyAddination(this,s),n=new PickyAllocationsCloud(this),u=new PickyResultsRenderer(g),w=function(){j.fadeTo(166,1)},z=function(){n.hide();s.empty();o.hide()},D=function(m){c.val(m);j.fadeTo(166,0);B("empty");e.empty();z()},x=function(){return c.val()};this.text=
+x;var A=function(m){e.text(m);m>0&&m<=5&&e.fadeTo("fast",0.5).fadeTo("fast",1)},E=function(m){if(m.isEmpty())return"none";if(m.total>f&&m.allocations.length>1)return"support";return"ok"},B=function(m){k.attr("class","dashboard "+m)};this.insert=function(m){c.val(m);c.select()};this.fullResultsCallback=function(m){B(E(m));if(m.isEmpty()){z();A(0);o.show();w()}else if(m.total>f&&m.allocations.length>1){z();w();n.show(m);A(m.total)}else if(m.offset==0){z();A(m.total);u.render(m);s.show();w()}else{g.remove();
+u.render(m);$.scrollTo("#picky .results div.info:last",{duration:500,offset:-12})}c.focus()};this.liveResultsCallback=function(m){B(E(m));A(m.total)};this.allocationChosen=function(m){m=m.data.query;c.val(m);b.allocationChosen(m)};this.addinationClicked=function(m){b.addinationClicked(x(),m)};(function(){c.keyup(function(m){if(x()==""){D();b.searchTextCleared()}else{b.searchTextEntered(x(),m);w()}});r.click(function(){x()==""||b.searchButtonClicked(x())});j.click(function(){D("");b.clearButtonClicked();
+c.focus()})})();c.focus()};var PickyBackend=function(b){var d=function(f,c,j,r){var e=r||{};e=$.extend({query:f,offset:j},r);$.ajax({type:"GET",url:b,data:e,success:function(k){c&&c(new PickyData(k))},dataType:"json"})};this.search=function(f,c,j,r,e){d(f,function(k){c&&c(e,k)},j,r)}},LiveBackend=function(b){var d=new PickyBackend(b);this.search=function(f,c,j,r,e){e=e||{};latestRequestTimestamp=new Date;e.live=latestRequestTimestamp;d.search(f,function(k,s){if(!k.live||k.live==latestRequestTimestamp)c&&c(s)},j,r,e)}},FullBackend=
+function(b){var d=new PickyBackend(b);this.search=function(f,c,j,r,e){e=e||{};latestRequestTimestamp=new Date;e.full=latestRequestTimestamp;d.search(f,function(k,s){if(!k.full||k.full==latestRequestTimestamp)c&&c(s)},j,r,e)}};var PickyController=function(b){var d=new PickyView(this,b),f=b.backends,c=b.before||function(){},j=b.success||function(){},r=b.after||function(){},e=function(g,n){g=j(g,n)||g;d.fullResultsCallback(g);r(g,n)},k=function(g,n,u){u=u||{};n=n||0;o.stop();u=c(u,g,n)||u;var w=f.full;w&&w.search(g,e,n,u)},s=function(g,n){g=j(g,n)||g;d.liveResultsCallback(g);r(g,n)},o=$.timer(180,function(g){var n=d.text();c({});var u=f.live;u&&u.search(n,s,0,void 0);g.stop()});o.stop();this.insert=function(g,n){d.insert(g);
+n&&k(g)};this.clearButtonClicked=function(){o.stop()};this.searchTextCleared=function(){o.stop()};this.searchTextEntered=function(g,n){if($.inArray(n.keyCode,[0,8,13,32,46,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90])>-1)n.keyCode==13?k(g):o.reset()};this.searchButtonClicked=function(g){k(g)};this.allocationChosen=function(g){k(g)};this.addinationClicked=function(g,n){k(g,n.data.offset)}};var Localization={location_delimiters:{de:"in",fr:"\u00e0",it:"a",en:"in",ch:"in"},explanation_delimiters:{de:"und",fr:"et",it:"e",en:"and",ch:"und"}},PickyClient=function(b){Localization.qualifiers=b.qualifiers||{};Localization.explanations=b.explanations||{};Localization.explanation_delimiters={de:"und",fr:"et",it:"e",en:"and",ch:"und"};var d=b.backends;if(d){d.live||alert("Both a full and live backend must be provided.");d.full||alert("Both a full and live backend must be provided.")}else b.backends=
+{live:b.live&&new LiveBackend(b.live)||alert("A live backend path must be provided."),full:b.full&&new FullBackend(b.full)||alert("A live backend path must be provided.")};var f=b.controller&&new b.controller(b)||new PickyController(b);this.insert=function(c,j){f.insert(c,j||true)}};var PickyAddination=function(b,d){this.remove=function(){d.find(".addination").remove()};this.render=function(f){var c=f.total,j=void 0;j=j||0;j=f.offset+20+j;var r=j+20;f=f.total;if(f<r)r=f;f={offset:j,start:j+1,end:r};if(f.offset<c){c=$("<div class='addination current'>"+t("results.addination.more")+"<div class='tothetop'><a href='javascript:$.scrollTo(0,{ duration: 500});'>&uarr;</a></div></div>");c.bind("click",{offset:f.offset},b.addinationClicked);return c}else return""}};var PickyResultsRenderer=function(b){var d=["street_number","zipcode"],f=function(e){var k=e[e.length-1];e=e.slice(0,e.length-1);if(e==[])e=[e];if(!d.include(k[0]))if(k[1].match(/[^\*~]$/))k[1]+="*";e.push(k);return e},c=function(e){for(var k=Localization.explanations&&Localization.explanations[PickyI18n.locale]||{},s=[],o,g=0,n=e.length;g<n;g++){o=e[g];var u=o[0];u=k[u]||u;s.push([u,o[1]])}return s},j=function(e,k){var s=Localization.explanation_delimiters[PickyI18n.locale],o=c(f(k));o=$.map(o,function(g){return[g[0].replace(/([\w\s\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u00e9\u00e8\u00e0]+)/,
+"<strong>$1</strong>"),g[1]].join(" ")});o=o.join(" "+s+" ");return'<div class="explanation">'+e+" "+o+"</div>"},r=function(e,k){var s='<div class="info">';s+=j(k.type,k.combination);if(e.offset>0)s+='<div class="tothetop"><a href="javascript:$.scrollTo(0,{ duration: 500 });">&uarr;</a></div>';s+='<div class="clear"></div></div>';return s};this.render=function(e){var k=$("#picky .results");e.allocations.each(function(s,o){k.append(r(e,o)).append(o.entries.join("")).append(b.render(e))})}};function AllocationRenderer(b){function d(a){var h={},p={},i=[],q;q=0;for(l=a.length;q<l;q++){var v=a[q][0];if(v in h){h[v]=h[v]+" "+a[q][1];i.push(q)}else{h[v]=a[q][1];p[q]=v}}for(q in p)a[q][1]=h[p[q]];for(q=i.length-1;q>=0;q--)a.remove(i[q]);return a}function f(a,h){var p=h||false,i=a[0],q=a[1],v=D[i];if(v){if(v.method)q=q[v.method]();if(v.format)q=v.format.replace(/%1\$s/,q)}i=w[i]||i;if(p&&!(v&&v.ignoreSingle))return q+"&nbsp;("+i+")";return q}function c(a){if(a.length==0)return"";else if(a.length==
+1)return f(a[0],true);else{var h=[],p=[];a=d(a);for(var i=0,q=a.length;i<q;i++)if(a[i][0]=="first_name")h.unshift(f(a[i]));else a[i][0]=="maiden_name"?p.push(f(a[i])):h.push(f(a[i]));p.length>0&&h.push(p);return h.join(" ")}}function j(a){return function(h,p){for(var i=0,q=a.length;i<q;i++)if(a[i][0]==p)return a[i][1];return""}}function r(a){if(a.length==0)return"";var h=a=d(a);h.sort(function(v,y){return v[0]<y[0]?-1:1});for(var p=[],i=0,q=h.length;i<q;i++)p.push(h[i][0]);return x[p].replace(/:(zipcode|city)/g,
+j(a))}function e(a){var h=a[0];return a[1]+"&nbsp;("+(w[h]||h)+")"}function k(a){if(a.length==0)return"";result=[];a=d(a);for(var h=0,p=a.length;h<p;h++)result.push(e(a[h]));return result.join(", ")}function s(a){for(var h=[],p=[],i=[],q=0,v=a.length;q<v;q++){var y=a[q];if(E.include(y[0]))i.push(y);else A.include(y[0])?h.push(y):p.push(y)}var C;if(i.length>0)C=i[i.length-1];else if(p.length>0)C=p[p.length-1];else if(h.length>0)C=h[h.length-1];z.include(C[0])||(C[1]+="...");a=c(h);p=k(p);i=r(i);return[a,
+p,i]}function o(a){var h=a[0],p=a[1];a=a[2];var i="";i=h!=""?p!=""?[h,p].join(B):h:p;if(a=="")return i;return[i,a].join(m)}function g(a){var h=[],p,i;for(i in a){p=a[i][0];p=u[p]||p;h[i]=p+":"+a[i][1]}return h.join(" ")}var n=PickyI18n.locale,u=Localization.qualifiers&&Localization.qualifiers[n]||{},w=Localization.explanations&&Localization.explanations[n]||{};n=Localization.location_delimiters[n];this.explanation=this.query=this.text="";var z=["street_number","zipcode"];this.contract=d;var D={maiden_name:{format:"(-%1$s)",
+method:"capitalize",ignoreSingle:true},name:{format:"<strong>%1$s</strong>",method:"toUpperCase",ignoreSingle:true},first_name:{format:"%1$s",method:"capitalize"}};this.who=c;var x={zipcode:":zipcode ["+w.city+"]",city:":city","city,zipcode":":zipcode :city"};this.where=r;this.what=k;var A=["first_name","name","maiden_name"],E=["zipcode","city"];this.trisect=s;var B=", ",m=" "+n+"&nbsp;";this.fuse=o;this.querify=g;this.render=function(a){var h=a.combination,p=a.count;a=g(h);h=o(s(h));h=$('<li><div class="text">'+
+h+'</div><div class="count">'+p+"</div></li>");h.bind("click",{query:a},b);return h}};var PickyAllocationsCloud=function(b){var d=$("#picky .allocations"),f=d.find(".shown"),c=d.find(".more"),j=d.find(".hidden"),r=function(){d.hide()},e=new AllocationRenderer(function(o){r();b.allocationChosen(o)}),k=function(o){var g=[];o.each(function(n,u){g.push(e.render(u))});return g},s=function(o){if(o.length==0)return $("#search .allocations").hide();f.empty();c.hide();j.empty().hide();if(o.length>3){$.each(o.slice(0,2),function(g,n){f.append(n)});$.each(o.slice(2),function(g,n){j.append(n)});
+c.show()}else $.each(o,function(g,n){f.append(n)});return $("#search .allocations").show()};c.click(function(){c.hide();j.show()});this.hide=r;this.show=function(o){s(k(o.allocations));d.show()}};

data/sinatra_prototype/javascripts/picky.results_renderer.js

@@ -0,0 +1,103 @@
+var PickyResultsRenderer = function(addination) {
+  
+  // Adds asterisks to the last token.
+  //
+  var no_asterisks = ['street_number', 'zipcode']; // TODO Works. Parametrize!
+  var asteriskifyLastToken = function(combination) {
+    var last_part = combination[combination.length-1];
+    var parts = combination.slice(0, combination.length-1);
+    if (parts == []) { parts = [parts]; }
+    if (!no_asterisks.include(last_part[0])) {
+      // Replace with * unless there is already one or a tilde.
+      //
+      if (last_part[1].match(/[^\*~]$/)) { last_part[1] += '*'; }
+    }
+    parts.push(last_part);
+    return parts;
+  };
+  
+  // Replaces the category with an explanation of the category.
+  //
+  var explainCategory = function(combination) {
+    var explanations = Localization.explanations && Localization.explanations[PickyI18n.locale] || {}; // TODO
+    var parts = [];
+    var combo;
+    
+    for (var i = 0, l = combination.length; i < l; i++) {
+      combo = combination[i];
+      var explanation = combo[0];
+      explanation = explanations[explanation] || explanation;
+      parts.push([explanation, combo[1]]);
+    }
+    return parts;
+  };
+  
+  //
+  //
+  var explain = function(type, combination) {
+    var explanation_delimiter = Localization.explanation_delimiters[PickyI18n.locale];
+    
+    var parts = explainCategory(asteriskifyLastToken(combination));
+    var replaced = $.map(parts, function(part) {
+      var category = part[0].replace(/([\w\sÄäÖöÜüéèà]+)/, "<strong>$1</strong>");
+      var token    = part[1];
+      return [category, token].join(' ');
+    });
+    replaced = replaced.join(' ' + explanation_delimiter + ' ');
+    
+    return '<div class="explanation">' + type + ' ' + replaced + '</div>';
+  };
+  
+  // TODO Make customizable.
+  //
+  var renderHeader = function(data, allocation) {
+    // TODO Make type definable. (Mapping, i18n)
+    //
+    var header_html = '<div class="info">';
+    header_html += explain(allocation.type, allocation.combination);
+    if (data.offset > 0) {
+      header_html += '<div class="tothetop"><a href="javascript:$.scrollTo(0,{ duration: 500 });">&uarr;</a></div>'; // searchEngine.focus();
+    }
+    
+    // TODO Parametrize!
+    // var names = '';
+    // var firstEntryName = $(allocation.entries[0]).find('.name').html();
+    // var lastEntryName = $(allocation.entries[allocation.entries.length-1]).find('.name').html();
+    // if(firstEntryName == lastEntryName) {
+    //   var firstEntryFirstName = $(allocation.entries[0]).find('.first_name').html();
+    //   var lastEntryFirstName = $(allocation.entries[allocation.entries.length-1]).find('.first_name').html();
+    //   names = '<div class="names">' + firstEntryName + ', ' + firstEntryFirstName + ' ' + t('common.to') + ' ' + lastEntryFirstName + '</div>';
+    // }
+    // else {
+    //   names = '<div class="names">' + firstEntryName + ' ' + t('common.to') + ' ' + lastEntryName + '</div>';
+    // }
+    
+    // var rangeStart = data.offset + 1;
+    // var rangeEnd = data.offset + allocation.entries.length;
+    // var rangeText = (rangeStart == rangeEnd) ? rangeStart : rangeStart + '-' + rangeEnd;
+    // var range = '<div class="range">' + rangeText + ' ' + t('common.of') + ' ' + data.total + '</div>';
+    
+    // if (data.total > 20) { // TODO Make settable.
+    //   // header_html += '<div class="clear"></div>'; // TODO
+    //   // header_html += names; // TODO
+    //   // header_html += range; // TODO
+    // }
+    
+    // For smooth addination scrolling. Don't ask.
+    //
+    header_html += '<div class="clear"></div></div>';
+    
+    return header_html;
+  };
+  
+  // Render results with the data.
+  //
+  this.render = function(data) {
+    var results = $('#picky .results'); // TODO Extract, also from view.
+    data.allocations.each(function(i, allocation) {
+      results.append(renderHeader(data, allocation)) // TODO header.render(data);
+             .append(allocation.entries.join(''))
+             .append(addination.render(data));
+    });
+  };
+};

data/sinatra_prototype/javascripts/picky.translations.js

@@ -0,0 +1,50 @@
+// Translations
+//
+var PickyI18n = { };
+
+// Set the correct locale for all js code.
+//
+$(function() {
+  PickyI18n.locale = $('html').attr('lang') || 'en';
+});
+
+var dictionary = {
+  common:{
+    join:   {de:'und',fr:'et',it:'e',en:'and',ch:'und'},
+    'with': {de:'mit',fr:'avec',it:'con',en:'with',ch:'mit'},
+    of: {de:'von',fr:'de',it:'di',en:'of',ch:'vo'},
+    to: {de:'bis',fr:'à',it:'alla',en:'to',ch:'bis'}
+  },
+  results:{
+    addination:{
+      more:{
+        de: 'Weitere Resultate',
+        fr: 'Autres résultats',
+        it: 'Altri risultati',
+        en: 'More results',
+        ch: 'Mee Resultaat'
+      }
+    },
+    header:{
+      de: 'Ergebnisse',
+      fr: 'Résultats',
+      it: 'Risultati',
+      en: 'Results',
+      ch: 'Ergäbnis'
+    }
+  }
+};
+var t = function(key) {
+  var locale = PickyI18n.locale || 'en';
+  var keys = key.split('.').concat(locale);
+  var current = dictionary;
+
+  for (var i = 0, l = keys.length; i < l; i++) {
+    current = current[keys[i]];
+    if (current == undefined) {
+      current = 'Translation missing: ' + key + '.' + locale;
+      break;
+    }
+  };
+  return current;
+};

data/sinatra_prototype/javascripts/picky.view.js

@@ -0,0 +1,214 @@
+// Add PickyResults?
+var PickyView = function(picky_controller, config) {
+  
+  var controller       = picky_controller;
+  
+  var showResultsLimit = config.showResultsLimit || 10;
+  
+  var searchField   = $('#picky input.query');
+  var clearButton   = $('#picky div.reset');
+  var searchButton  = $('#picky input.search_button');
+  var resultCounter = $('#picky div.status');
+  var dashboard     = $('#picky .dashboard');
+  
+  var results       = $('#picky .results'); // Push into results.
+  var noResults     = $('#picky .no_results');
+  
+  var addination    = new PickyAddination(this, results); // Push into results.
+  
+  var allocationsCloud = new PickyAllocationsCloud(this);
+  var resultsRenderer  = new PickyResultsRenderer(addination); // TODO Rename results.
+  
+  // Toggle the clear button visibility.
+  //
+  var showClearButton = function() {
+    clearButton.fadeTo(166, 1.0);
+  };
+  var hideClearButton = function() {
+    clearButton.fadeTo(166, 0.0);
+  };
+  
+  // TODO Move to results
+  var clearResults = function() {
+    results.empty();
+  };
+  var hideEmptyResults = function() {
+    noResults.hide();
+  };
+  
+  var focus = function() {
+    searchField.focus();
+  };
+  var select = function() {
+    searchField.select();
+  };
+  
+  // Cleans the interface of any results or choices presented.
+  //
+  var clean = function() {
+    allocationsCloud.hide();
+    clearResults();
+    hideEmptyResults();
+  };
+  
+  // Resets the whole view to the inital state.
+  //
+  var reset = function(to_text) {
+    searchField.val(to_text);
+    hideClearButton();
+    setSearchStatus('empty');
+    resultCounter.empty();
+    clean();
+  };
+  
+  var bindEventHandlers = function() {
+    searchField.keyup(function(event) {
+      if (isTextEmpty()) {
+        reset();
+        controller.searchTextCleared();
+      } else {
+        controller.searchTextEntered(text(), event);
+        showClearButton();
+      }
+    });
+    
+    searchButton.click(function(event) {
+      if (!isTextEmpty()) {
+        controller.searchButtonClicked(text());
+      }
+    });
+    
+    clearButton.click(function() {
+      reset('');
+      controller.clearButtonClicked();
+      focus();
+    });
+  };
+  
+  var text = function() {
+    return searchField.val();
+  };
+  this.text = text; // TODO Remove.
+  var isTextEmpty = function() {
+    return text() == '';
+  };
+  
+  var showEmptyResults = function() {
+    clean();
+    updateResultCounter(0);
+    noResults.show();
+    showClearButton();
+  };
+  var showTooManyResults = function(data) {
+    clean();
+    showClearButton();
+    allocationsCloud.show(data);
+    updateResultCounter(data.total);
+  };
+  var showResults = function(data) {
+    clean();
+    updateResultCounter(data.total);
+    resultsRenderer.render(data);
+    results.show();
+    showClearButton();
+  };
+  
+  var appendResults = function(data) {
+    addination.remove(); // TODO Where should this be?
+    resultsRenderer.render(data);
+    $.scrollTo('#picky .results div.info:last', { duration: 500, offset: -12 });
+  };
+  
+  var updateResultCounter = function(total) {
+    resultCounter.text(total); // ((total > 999) ? '999+' : total); // TODO Decide on this.
+    flashResultCounter(total);
+  };
+  
+  var alertThreshold = 5;
+  var flashResultCounter = function(total) {
+    if (total > 0 && total <= alertThreshold) {
+      resultCounter.fadeTo('fast', 0.5).fadeTo('fast', 1);
+    }
+  };
+  
+  var tooManyResults = function(data) {
+    return data.total > showResultsLimit && data.allocations.length > 1;
+  };
+  var resultStatusFor = function(data) {
+    if (data.isEmpty()) { return 'none'; };
+    if (tooManyResults(data)) { return 'support'; }
+    return 'ok';
+  };
+  var setSearchStatus = function(statusClass) {
+    dashboard.attr('class', 'dashboard ' + statusClass);
+  };
+  var setSearchStatusFor = function(data) {
+    setSearchStatus(resultStatusFor(data));
+  };
+  
+  // Insert a search text into the search field.
+  // Field is always selected when doing that.
+  //
+  var insert = function(text) {
+    searchField.val(text);
+    select();
+  };
+  this.insert = insert;
+  
+  // Callbacks.
+  // 
+  
+  // Full results handling.
+  //
+  var fullResultsCallback = function(data) {
+    setSearchStatusFor(data);
+    
+    if (data.isEmpty()) {
+      showEmptyResults();
+    } else if (tooManyResults(data)) {
+      showTooManyResults(data);
+    } else {
+      if (data.offset == 0) {
+        showResults(data);
+      } else {
+        appendResults(data);
+      }
+    };
+    
+    focus();
+  };
+  this.fullResultsCallback = fullResultsCallback;
+  
+  // Live results handling.
+  //
+  var liveResultsCallback = function(data) {
+    setSearchStatusFor(data);
+    
+    updateResultCounter(data.total);
+  };
+  this.liveResultsCallback = liveResultsCallback;
+  
+  // Callback for when an allocation has been chosen
+  // in the allocation cloud.
+  //
+  var allocationChosen = function(event) {
+    var text = event.data.query;
+    
+    searchField.val(text);
+    
+    controller.allocationChosen(text);
+  };
+  this.allocationChosen = allocationChosen;
+  
+  // Callback for when the addination has been clicked.
+  //
+  var addinationClicked = function(event) {
+    controller.addinationClicked(text(), event);
+  };
+  this.addinationClicked = addinationClicked;
+  
+  // 
+  //
+  bindEventHandlers();
+  focus();
+};