From 3f6877bcfced673350abb18c48258759720b97ca Mon Sep 17 00:00:00 2001 From: jdorn Date: Wed, 4 Sep 2013 12:23:34 -0700 Subject: [PATCH] Add back in report search using Twitter's typeahead. --- public/css/report.css | 6 +- public/css/typeahead.js-bootstrap.css | 85 ++++++++++++++++++++++++ public/js/typeahead.min.js | 7 ++ templates/default/html/page.twig | 96 +++++++++++---------------- 4 files changed, 135 insertions(+), 59 deletions(-) create mode 100644 public/css/typeahead.js-bootstrap.css create mode 100644 public/js/typeahead.min.js diff --git a/public/css/report.css b/public/css/report.css index 393bafd0..b29eb44a 100644 --- a/public/css/report.css +++ b/public/css/report.css @@ -23,13 +23,13 @@ body { } .right { - text-align:right; + text-align:right !important; } .left { - text-align:left; + text-align:left !important; } .center { - text-align:center; + text-align:center !important; } .show_query, #show_time_estimate, #query_holder { font-size: .8em; diff --git a/public/css/typeahead.js-bootstrap.css b/public/css/typeahead.js-bootstrap.css new file mode 100644 index 00000000..c26ba599 --- /dev/null +++ b/public/css/typeahead.js-bootstrap.css @@ -0,0 +1,85 @@ +.twitter-typeahead { + width: 100%; + position: relative; +} + +.twitter-typeahead .tt-query, +.twitter-typeahead .tt-hint { + margin-bottom: 0; + width: 100%; + height: 34px; + position: absolute; + top: 0; + left: 0; +} + +.twitter-typeahead .tt-hint { + color: #a1a1a1; + z-index: 1; + padding: 6px 12px; + border: 1px solid transparent; +} + +.twitter-typeahead .tt-query { + z-index: 2; + border-radius: 4px !important; +} + +.input-group-addon + .twitter-typeahead > .tt-query { + border-top-left-radius: 0!important; + border-bottom-left-radius: 0!important; +} + +.input-group-appended > .twitter-typeahead > .tt-query { + border-top-right-radius: 0!important; + border-bottom-right-radius: 0!important; +} + +.tt-input { + z-index:999; +} + +.tt-dropdown-menu { + min-width: 160px; + margin-top: 2px; + padding: 5px 0; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.tt-suggestion { + display: block; + padding: 3px 20px; +} + +.tt-suggestion.tt-cursor { + color: #fff; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0) +} + +.tt-suggestion.tt-cursor a { + color: #fff; +} + +.tt-suggestion p { + margin: 0; +} \ No newline at end of file diff --git a/public/js/typeahead.min.js b/public/js/typeahead.min.js new file mode 100644 index 00000000..7b4a2e5c --- /dev/null +++ b/public/js/typeahead.min.js @@ -0,0 +1,7 @@ +/*! + * typeahead.js 0.9.3 + * https://github.com/twitter/typeahead + * Copyright 2013 Twitter, Inc. and other contributors; Licensed MIT + */ + +!function(a){var b={isMsie:function(){var a=/(msie) ([\w.]+)/i.exec(navigator.userAgent);return a?parseInt(a[2],10):!1},isBlankString:function(a){return!a||/^\s*$/.test(a)},escapeRegExChars:function(a){return a.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},isString:function(a){return"string"==typeof a},isNumber:function(a){return"number"==typeof a},isArray:a.isArray,isFunction:a.isFunction,isObject:a.isPlainObject,isUndefined:function(a){return"undefined"==typeof a},bind:a.proxy,each:function(b,c){function d(a,b){return c(b,a)}a.each(b,d)},map:a.map,filter:a.grep,every:function(b,c){var d=!0;return b?(a.each(b,function(a,e){return(d=c.call(null,e,a,b))?void 0:!1}),!!d):d},some:function(b,c){var d=!1;return b?(a.each(b,function(a,e){return(d=c.call(null,e,a,b))?!1:void 0}),!!d):d},mixin:a.extend,getUniqueId:function(){var a=0;return function(){return a++}}(),templatify:function(b){function c(){return String(b)}return a.isFunction(b)?b:c},defer:function(a){setTimeout(a,0)},debounce:function(a,b,c){var d,e;return function(){var f,g,h=this,i=arguments;return f=function(){d=null,c||(e=a.apply(h,i))},g=c&&!d,clearTimeout(d),d=setTimeout(f,b),g&&(e=a.apply(h,i)),e}},throttle:function(a,b){var c,d,e,f,g,h;return g=0,h=function(){g=new Date,e=null,f=a.apply(c,d)},function(){var i=new Date,j=b-(i-g);return c=this,d=arguments,0>=j?(clearTimeout(e),e=null,g=i,f=a.apply(c,d)):e||(e=setTimeout(h,j)),f}},noop:function(){}},c="0.9.3",d=function(){function a(a){this.maxSize=a||100,this.size=0,this.hash={},this.list=new c}function c(){this.head=this.tail=null}function d(a,b){this.key=a,this.val=b,this.prev=this.next=null}return b.mixin(a.prototype,{set:function(a,b){var c,e=this.list.tail;this.size>=this.maxSize&&(this.list.remove(e),delete this.hash[e.key]),(c=this.hash[a])?(c.val=b,this.list.moveToFront(c)):(c=new d(a,b),this.list.add(c),this.hash[a]=c,this.size++)},get:function(a){var b=this.hash[a];return b?(this.list.moveToFront(b),b.val):void 0}}),b.mixin(c.prototype,{add:function(a){this.head&&(a.next=this.head,this.head.prev=a),this.head=a,this.tail=this.tail||a},remove:function(a){a.prev?a.prev.next=a.next:this.head=a.next,a.next?a.next.prev=a.prev:this.tail=a.prev},moveToFront:function(a){this.remove(a),this.add(a)}}),a}(this),e=function(){function a(a){this.prefix=["__",a,"__"].join(""),this.ttlKey="__ttl__",this.keyMatcher=new RegExp("^"+this.prefix)}function c(){return(new Date).getTime()}function d(a){return JSON.stringify(b.isUndefined(a)?null:a)}function e(a){return JSON.parse(a)}var f,g;try{f=window.localStorage,f.setItem("~~~","!"),f.removeItem("~~~")}catch(h){f=null}return g=f&&window.JSON?{_prefix:function(a){return this.prefix+a},_ttlKey:function(a){return this._prefix(a)+this.ttlKey},get:function(a){return this.isExpired(a)&&this.remove(a),e(f.getItem(this._prefix(a)))},set:function(a,e,g){return b.isNumber(g)?f.setItem(this._ttlKey(a),d(c()+g)):f.removeItem(this._ttlKey(a)),f.setItem(this._prefix(a),d(e))},remove:function(a){return f.removeItem(this._ttlKey(a)),f.removeItem(this._prefix(a)),this},clear:function(){var a,b,c=[],d=f.length;for(a=0;d>a;a++)(b=f.key(a)).match(this.keyMatcher)&&c.push(b.replace(this.keyMatcher,""));for(a=c.length;a--;)this.remove(c[a]);return this},isExpired:function(a){var d=e(f.getItem(this._ttlKey(a)));return b.isNumber(d)&&c()>d?!0:!1}}:{get:b.noop,set:b.noop,remove:b.noop,clear:b.noop,isExpired:b.noop},b.mixin(a.prototype,g),a}(),f=function(){function c(b){b=b||{},this._send=b.send?e(b.send):a.ajax,this._get=b.rateLimiter?b.rateLimiter(this._get):this._get}function e(c){return function(d,e){function f(a){b.defer(function(){h.resolve(a)})}function g(a){b.defer(function(){h.reject(a)})}var h=a.Deferred();return c(d,e,f,g),h}}var f=0,g={},h=6,i=new d(10);return c.setMaxPendingRequests=function(a){h=a},c.resetCache=function(){i=new d(10)},b.mixin(c.prototype,{_get:function(a,b,c){function d(b){c&&c(b),i.set(a,b)}function e(){f--,delete g[a],k.onDeckRequestArgs&&(k._get.apply(k,k.onDeckRequestArgs),k.onDeckRequestArgs=null)}var j,k=this;(j=g[a])?j.done(d):h>f?(f++,g[a]=this._send(a,b).done(d).always(e)):this.onDeckRequestArgs=[].slice.call(arguments,0)},get:function(a,c,d){var e;return b.isFunction(c)&&(d=c,c={}),(e=i.get(a))?b.defer(function(){d&&d(e)}):this._get(a,c,d),!!e}}),c}(),g=function(){function c(a){a=a||{},this.tokenize=a.tokenizer||d,this.datums=[],this.trie=f()}function d(b){return a.trim(b).toLowerCase().split(/\s+/)}function e(a){return a=b.filter(a,function(a){return!!a}),a=b.map(a,function(a){return a.toLowerCase()})}function f(){return{ids:[],children:{}}}function g(a){for(var b={},c=[],d=0;db[e]?e++:(f.push(a[d]),d++,e++);return f}return b.mixin(c.prototype,{bootstrap:function(a){this.datums=a.datums,this.trie=a.trie},add:function(a){var c=this;a=b.isArray(a)?a:[a],b.each(a,function(a){var d,g;d=c.datums.push(a)-1,g=e(a.tokens||c.tokenize(a.value)),delete a.tokens,b.each(g,function(a){var b,e,g;for(b=c.trie,e=a.split("");g=e.shift();)b=b.children[g]||(b.children[g]=f()),b.ids.push(d)})})},remove:function(){a.error("not implemented")},get:function(a){var c,d,e=this;return c=this.tokenize(a),b.each(c,function(a){var b,c,f,g;if(d&&0===d.length)return!1;for(b=e.trie,c=a.split("");b&&(f=c.shift());)b=b.children[f];return b&&0===c.length?(g=b.ids.slice(0),d=d?h(d,g):g,void 0):!1}),d?b.map(g(d),function(a){return e.datums[a]}):[]},serialize:function(){return{datums:this.datums,trie:this.trie}}}),c}(),h=window.Dataset=function(){function d(c){c&&(c.local||c.prefetch||c.remote)||a.error("one of local, prefetch, or remote is required"),this.name=c.name||b.getUniqueId(),this.limit=c.limit||5,this.valueKey=c.valueKey||"value",this.dupChecker=i(c.dupChecker),this.sorter=h(c.sorter),this.local=j(c),this.prefetch=k(c),this.remote=l(c),this.index=new g({tokenizer:c.tokenizer}),this.storage=c.name?new e(c.name):null}function h(a){function b(){return 0}return a||b}function i(a){function c(){return!1}function d(a,b){return a.value===b.value}return b.isFunction(a)||(a=a===!1?c:d),a}function j(a){return a.local||null}function k(a){var d,e;return e={url:null,thumbprint:"",ttl:864e5,filter:null,ajax:{}},(d=a.prefetch||null)&&(d=b.isString(d)?{url:d}:d,d=b.mixin(e,d),d.thumbprint=c+d.thumbprint,d.ajax.method=d.ajax.method||"get",d.ajax.dataType=d.ajax.dataType||"json"),d}function l(a){function c(a){return function(c){return b.debounce(c,a)}}function d(a){return function(c){return b.throttle(c,a)}}var e,f;return f={url:null,wildcard:"%QUERY",replace:null,rateLimitBy:"debounce",rateLimitWait:300,send:null,filter:null,ajax:{}},(e=a.remote||null)&&(e=b.isString(e)?{url:e}:e,e=b.mixin(f,e),e.rateLimiter=/^throttle$/i.test(e.rateLimitBy)?d(e.rateLimitWait):c(e.rateLimitWait),e.ajax.method=e.ajax.method||"get",e.ajax.dataType=e.ajax.dataType||"json",delete e.rateLimitBy,delete e.rateLimitWait),e}var m;return m={data:"data",protocol:"protocol",thumbprint:"thumbprint"},b.mixin(d.prototype,{_loadPrefetch:function(b){function c(a){var c;c=b.filter?b.filter(a):a,f.add(c),f._saveToStorage(f.index.serialize(),b.thumbprint,b.ttl)}var d,e,f=this;return(d=this._readFromStorage(b.thumbprint))?(this.index.bootstrap(d),e=a.Deferred().resolve()):e=a.ajax(b.url,b.ajax).done(c),e},_getFromRemote:function(a,b){function c(a){var c=f.remote.filter?f.remote.filter(a):a;b(f._normalize(c))}var d,e,f=this;return a=a||"",e=encodeURIComponent(a),d=this.remote.replace?this.remote.replace(this.remote.url,a):this.remote.url.replace(this.remote.wildcard,e),this.transport.get(d,this.remote.ajax,c)},_normalize:function(a){function c(a){var c,e;return c=b.isString(a)?a:a[d.valueKey],e={value:c,tokens:a.tokens},b.isString(a)?(e.raw={})[d.valueKey]=a:e.raw=a,e}var d=this;return b.map(a,c)},_saveToStorage:function(a,b,c){this.storage&&(this.storage.set(m.data,a,c),this.storage.set(m.protocol,location.protocol,c),this.storage.set(m.thumbprint,b,c))},_readFromStorage:function(a){var b={};return this.storage&&(b.data=this.storage.get(m.data),b.protocol=this.storage.get(m.protocol),b.thumbprint=this.storage.get(m.thumbprint)),isExpired=b.thumbprint!==a||b.protocol!==location.protocol,b.data&&!isExpired?b.data:null},initialize:function(){function b(){d.add(d.local)}var c,d=this;return c=this.prefetch?this._loadPrefetch(this.prefetch):a.Deferred().resolve(),this.local&&c.done(b),this.transport=this.remote?new f(this.remote):null,this.initialize=function(){return d},this},add:function(a){var c;a=b.isArray(a)?a:[a],c=this._normalize(a),this.index.add(c)},get:function(a,c){function d(a){var d=f.slice(0);a=b.map(a,e),b.each(a,function(a){var c;return c=b.some(d,function(b){return g.dupChecker(a,b)}),!c&&d.push(a),d.length