Skip to content
Browse files

Triple-click handling. Finally fixing mysterious width changes when c…

…licking or tabbing to a facet.
  • Loading branch information...
1 parent d161de3 commit bfce7a61d62360a10e4cb7a169dbd2fe19586c85 @samuelclay samuelclay committed Jun 21, 2011
View
7 assets.yml
@@ -13,16 +13,15 @@ javascripts:
- vendor/jquery.ui.*.js
- vendor/underscore-*.js
- vendor/backbone-*.js
- visualsearch<% if $VS_MIN %>-min<% end %>:
+ visualsearch:
- lib/js/visualsearch.js
- lib/js/views/*.js
- lib/js/utils/*.js
- lib/js/models/*.js
- lib/js/templates/*.jst
-<% unless $VS_MIN %>
- visualsearch_templates:
+ <% unless $VS_MIN %>visualsearch_templates:
- lib/js/templates/*.jst
-<% end %>
+ <% end %>
stylesheets:
visualsearch:
View
BIN build-min/dependencies.js.gz
Binary file not shown.
View
2 build-min/visualsearch-datauri.css
@@ -1 +1 @@
-.VS-search .icon{background-repeat:no-repeat;background-position:center center;vertical-align:middle;width:16px;height:16px}.VS-search .icon.VS-icon-cancel{width:11px;height:11px;background-position:center 0;background-image:url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAWCAYAAAAW5GZjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAb9JREFUeNqUUr1qAkEQ3j0khQp6kihaeGgEEa18gTQR0iRY+BaBSMDGwidIEUKqFL6BopgqBAJ5AMFGjUU0d4WHEvwJarvZ77gRIzGYgb1hZr+Z75vZ40IIzqTNZrPj8Xicn0wmmcViEXS73aaqqq+BQODG6/W+A8MBNk3zfDAY3C6Xy0O2ZS6X6zMSiVwHg8FHLjtq7Xb7RQKj7BeTzVCgJ5PJU2U0GhUk7REuMpkMi8fjFggeMeecrVYrFRId0CgTAgDDMFg4HLbA8IjJgHNgGEr0er0fQIphUmZAwdSUADUB4RFDsz3oSMF6CLzZkQqgGebz+Z75dDqNdTqdp13bgDmdTj2VSp0oWHg0Gr2UNH2Z/9o+yMv7K4/HY/C/XhDUfr//jl7QQVT9fp/V63VWqVRYt9tliUSCZbPZg1wux9Lp9PqFeK1Wu9A0DdXz7YM87i0FrVZLs4Fi1wmFQh/NZjOmVKvVgq7rR/QflMtlixGedjwcDlUpMQ9tbzalkAAB2/R297mNW+sT2wUbUnA//V/nYrH4QOBNABUQuFQq3TNMuc82sDVrz41G42yvPeODAwZQ0QzwiJEnzLcAAwBJ6WXlwoBgZAAAAABJRU5ErkJggg==");cursor:pointer}.VS-search .icon.VS-icon-cancel:hover{background-position:center -11px}.VS-search .icon.VS-icon-search{width:12px;height:12px;background-image:url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNpUUM2qgmAQzS8NiUgLzTIXLZQW1QuI9AY9QPSW9gQ9QiriwpJQEBVrVWT2d7p2L9xZzDdzZs7M+YYqy/J8Ptu2vd/v4zgeDAaqqk4mE47jar9GnU6nzWbjOA5FUa/Xq0Jns9l8Pud5vkpp58cwAOzhcBhFkeu6GNztdg3D+Db5vo9nOp2iiWGYTqdDCMFe4LquI0aVpGmKR9M0lmUbjQY8YiBJklTb4YkoilBzOBzq9TogeMQIJEmqmlAlo9EIyXa7tSyrKAp4xEBkWUb5q2k8Hh+PR8/zwjCEgufz+aESstvtoKnVan2GgY31kBkEAfT1ej1FUZDiNIIgrFYr9H1ug3teLpfH43G/3/FBUJGu1+s8z8FZLpc0mmiabrfbf5fEumazuVgsTNO8Xq+3242qRNT+G0CMz7IMzH6//xZgAA60tj6rqzxpAAAAAElFTkSuQmCC")}.VS-search div,.VS-search span,.VS-search a,.VS-search img,.VS-search ul,.VS-search li,.VS-search form,.VS-search label,.ui-autocomplete ul,.ui-autocomplete li,.ui-autocomplete{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}.VS-search :focus{outline:0}.VS-search{line-height:1;color:black}.VS-search ol,.VS-search ul{list-style:none}.VS-search{font-family:Arial,sans-serif;color:#373737;font-size:12px}.VS-search input{display:block;border:none;outline:none;margin:0;padding:4px;background:transparent;font-size:16px;line-height:20px;width:100%}.VS-interface,.VS-search .dialog,.VS-search input{font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif!important;line-height:1.1em}.VS-search .VS-search-box{cursor:text;position:relative;background:transparent;border:2px solid #ccc;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;background-color:#fafafa;-webkit-box-shadow:inset 0 0 3px #ccc;-moz-box-shadow:inset 0 0 3px #ccc;box-shadow:inset 0 0 3px #ccc;min-height:29px;height:auto}.VS-search .VS-search-box.VS-focus{border-color:#acf;-webkit-box-shadow:inset 0 0 3px #acf;-moz-box-shadow:inset 0 0 3px #acf;box-shadow:inset 0 0 3px #acf}.VS-search .search_inner{position:relative;margin:0 0 0 18px;padding:0 3px;overflow:hidden}.VS-search input{width:100px}.VS-search input,.VS-search .VS-input-width-tester{padding:6px 0;float:left;color:#808080;font:13px/17px Helvetica,Arial}.VS-search.VS-focus input{color:#606060}.VS-search .VS-icon-search{position:absolute;left:9px;top:8px}.VS-search .VS-icon-cancel{position:absolute;right:9px;top:8px}.VS-search .search_facet{float:left;margin:0;padding:0 0 0 13px;position:relative}.VS-search .search_facet.is_selected{margin:5px -3px 5px -3px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.VS-search .search_facet.is_selected{background-color:#cbd1f1;background-image:-moz-linear-gradient(top,#cbd1f1,#afb5ec);background-image:-ms-linear-gradient(top,#cbd1f1,#afb5ec);background-image:-o-linear-gradient(top,#cbd1f1,#afb5ec);background-image:-webkit-gradient(linear,left top,left bottom,from(#cbd1f1),to(#afb5ec));background-image:-webkit-linear-gradient(top,#cbd1f1,#afb5ec);background-image:linear-gradient(top,#cbd1f1,#afb5ec);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#CBD1F1',EndColorStr='#AFB5EC')}.VS-search .search_facet .category{float:left;text-transform:uppercase;font-weight:bold;font-size:10px;color:#808080;text-shadow:1px 1px 0 #FFF;padding:9px 0 6px;line-height:13px;cursor:pointer}.VS-search .search_facet.is_selected .category{padding:4px 0 0;margin-left:3px;text-shadow:1px 1px 0 #d0d0d0}.VS-search .search_facet .search_facet_input_container{float:left}.VS-search .search_facet input{margin:0;padding:0;color:#505050;font-size:13px;line-height:16px;padding:6px 0 7px 4px;height:16px;width:auto;z-index:100;position:relative}.VS-search .search_facet.is_selected input{padding-top:1px;padding-bottom:2px;padding-right:3px}.VS-search .search_facet.is_editing input,.VS-search .search_facet.is_selected input{color:#202020}.VS-search .search_facet .search_facet_remove{position:absolute;left:0;top:9px;opacity:.6}.VS-search .search_facet.is_selected .search_facet_remove{top:4px;left:3px}.VS-search .search_facet .search_facet_remove:hover{opacity:1}.VS-search .search_facet.is_editing .category,.VS-search .search_facet.is_selected .category{color:darkblue}.VS-search .search_facet.search_facet_maybe_delete .category,.VS-search .search_facet.search_facet_maybe_delete input{color:darkred}.VS-search .search_input{height:28px;float:left}.VS-search .search_input input{padding:6px 2px 7px 2px;width:10px;z-index:100;position:relative}.VS-search .search_input.is_editing input{color:#202020}.ui-autocomplete{position:absolute;border:1px solid #c0c0c0;background-color:#f6f6f6;cursor:pointer;z-index:10000;width:auto;min-width:80px;max-width:220px;max-height:240px;overflow-y:auto;overflow-x:hidden;font-size:13px;top:1px;opacity:.97;filter:alpha(opacity=97);box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-webkit-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-moz-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5)}.ui-autocomplete .ui-autocomplete-category{text-transform:capitalize;font-size:11px;padding:4px 4px 4px;border-top:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2;background-color:#b7b7b7;text-shadow:0 -1px 0 #999;font-weight:bold;color:white;cursor:default}.ui-autocomplete .ui-menu-item a{outline:none;display:block;padding:3px 4px 5px;background-color:#f8f8f8;background-image:-moz-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-ms-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-o-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f3f3f3));background-image:-webkit-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:linear-gradient(top,#f8f8f8,#f3f3f3);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#F8F8F8',EndColorStr='#F3F3F3');border-top:1px solid #fafafa;border-bottom:1px solid #f2f2f2}.ui-autocomplete .ui-menu-item a:active{outline:none}.ui-autocomplete .ui-menu-item .ui-state-hover{background-color:#6483f7;background-image:-moz-linear-gradient(top,#6483f7,#2254f6);background-image:-ms-linear-gradient(top,#6483f7,#2254f6);background-image:-o-linear-gradient(top,#6483f7,#2254f6);background-image:-webkit-gradient(linear,left top,left bottom,from(#6483f7),to(#2254f6));background-image:-webkit-linear-gradient(top,#6483f7,#2254f6);background-image:linear-gradient(top,#6483f7,#2254f6);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#6483F7',EndColorStr='#2254F6');border-top:1px solid #5a7bee;border-bottom:1px solid #1048ec;color:white}.ui-autocomplete li{list-style:none;width:auto}
+.VS-search .icon{background-repeat:no-repeat;background-position:center center;vertical-align:middle;width:16px;height:16px}.VS-search .icon.VS-icon-cancel{width:11px;height:11px;background-position:center 0;background-image:url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAWCAYAAAAW5GZjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAb9JREFUeNqUUr1qAkEQ3j0khQp6kihaeGgEEa18gTQR0iRY+BaBSMDGwidIEUKqFL6BopgqBAJ5AMFGjUU0d4WHEvwJarvZ77gRIzGYgb1hZr+Z75vZ40IIzqTNZrPj8Xicn0wmmcViEXS73aaqqq+BQODG6/W+A8MBNk3zfDAY3C6Xy0O2ZS6X6zMSiVwHg8FHLjtq7Xb7RQKj7BeTzVCgJ5PJU2U0GhUk7REuMpkMi8fjFggeMeecrVYrFRId0CgTAgDDMFg4HLbA8IjJgHNgGEr0er0fQIphUmZAwdSUADUB4RFDsz3oSMF6CLzZkQqgGebz+Z75dDqNdTqdp13bgDmdTj2VSp0oWHg0Gr2UNH2Z/9o+yMv7K4/HY/C/XhDUfr//jl7QQVT9fp/V63VWqVRYt9tliUSCZbPZg1wux9Lp9PqFeK1Wu9A0DdXz7YM87i0FrVZLs4Fi1wmFQh/NZjOmVKvVgq7rR/QflMtlixGedjwcDlUpMQ9tbzalkAAB2/R297mNW+sT2wUbUnA//V/nYrH4QOBNABUQuFQq3TNMuc82sDVrz41G42yvPeODAwZQ0QzwiJEnzLcAAwBJ6WXlwoBgZAAAAABJRU5ErkJggg==");cursor:pointer}.VS-search .icon.VS-icon-cancel:hover{background-position:center -11px}.VS-search .icon.VS-icon-search{width:12px;height:12px;background-image:url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNpUUM2qgmAQzS8NiUgLzTIXLZQW1QuI9AY9QPSW9gQ9QiriwpJQEBVrVWT2d7p2L9xZzDdzZs7M+YYqy/J8Ptu2vd/v4zgeDAaqqk4mE47jar9GnU6nzWbjOA5FUa/Xq0Jns9l8Pud5vkpp58cwAOzhcBhFkeu6GNztdg3D+Db5vo9nOp2iiWGYTqdDCMFe4LquI0aVpGmKR9M0lmUbjQY8YiBJklTb4YkoilBzOBzq9TogeMQIJEmqmlAlo9EIyXa7tSyrKAp4xEBkWUb5q2k8Hh+PR8/zwjCEgufz+aESstvtoKnVan2GgY31kBkEAfT1ej1FUZDiNIIgrFYr9H1ug3teLpfH43G/3/FBUJGu1+s8z8FZLpc0mmiabrfbf5fEumazuVgsTNO8Xq+3242qRNT+G0CMz7IMzH6//xZgAA60tj6rqzxpAAAAAElFTkSuQmCC")}.VS-search div,.VS-search span,.VS-search a,.VS-search img,.VS-search ul,.VS-search li,.VS-search form,.VS-search label,.ui-autocomplete ul,.ui-autocomplete li,.ui-autocomplete{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}.VS-search :focus{outline:0}.VS-search{line-height:1;color:black}.VS-search ol,.VS-search ul{list-style:none}.VS-search{font-family:Arial,sans-serif;color:#373737;font-size:12px}.VS-search input{display:block;border:none;outline:none;margin:0;padding:4px;background:transparent;font-size:16px;line-height:20px;width:100%}.VS-interface,.VS-search .dialog,.VS-search input{font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif!important;line-height:1.1em}.VS-search .VS-search-box{cursor:text;position:relative;background:transparent;border:2px solid #ccc;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;background-color:#fafafa;-webkit-box-shadow:inset 0 0 3px #ccc;-moz-box-shadow:inset 0 0 3px #ccc;box-shadow:inset 0 0 3px #ccc;min-height:29px;height:auto}.VS-search .VS-search-box.VS-focus{border-color:#acf;-webkit-box-shadow:inset 0 0 3px #acf;-moz-box-shadow:inset 0 0 3px #acf;box-shadow:inset 0 0 3px #acf}.VS-search .search_inner{position:relative;margin:0 0 0 18px;padding:0 3px;overflow:hidden}.VS-search input{width:100px}.VS-search input,.VS-search .VS-input-width-tester{padding:6px 0;float:left;color:#808080;font:13px/17px Helvetica,Arial}.VS-search.VS-focus input{color:#606060}.VS-search .VS-icon-search{position:absolute;left:9px;top:8px}.VS-search .VS-icon-cancel{position:absolute;right:9px;top:8px}.VS-search .search_facet{float:left;margin:0;padding:0 0 0 13px;position:relative}.VS-search .search_facet.is_selected{margin:5px -3px 5px -3px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.VS-search .search_facet.is_selected{background-color:#a7b9ff;background-image:-moz-linear-gradient(top,#b0bcff,#7489ff);background-image:-webkit-gradient(linear,left top,left bottom,from(#b0bcff),to(#7489ff));background-image:linear-gradient(top,#b0bcff,#7489ff)}.VS-search .search_facet .category{float:left;text-transform:uppercase;font-weight:bold;font-size:10px;color:#808080;text-shadow:1px 1px 0 #FFF;padding:9px 0 6px;line-height:13px;cursor:pointer}.VS-search .search_facet.is_selected .category{padding:4px 0 0;margin-left:3px;text-shadow:1px 1px 0 #d0d0d0}.VS-search .search_facet .search_facet_input_container{float:left}.VS-search .search_facet input{margin:0;padding:0;color:#000;font-size:13px;line-height:16px;padding:6px 0 7px 4px;height:16px;width:auto;z-index:100;position:relative}.VS-search .search_facet.is_selected input{padding-top:1px;padding-bottom:2px;padding-right:3px}.VS-search .search_facet.is_editing input,.VS-search .search_facet.is_selected input{color:#000}.VS-search .search_facet .search_facet_remove{position:absolute;left:0;top:9px;opacity:.6}.VS-search .search_facet.is_selected .search_facet_remove{top:4px;left:3px}.VS-search .search_facet .search_facet_remove:hover{opacity:1}.VS-search .search_facet.is_editing .category,.VS-search .search_facet.is_selected .category{color:darkblue}.VS-search .search_facet.search_facet_maybe_delete .category,.VS-search .search_facet.search_facet_maybe_delete input{color:darkred}.VS-search .search_input{height:28px;float:left}.VS-search .search_input input{padding:6px 2px 7px 2px;width:10px;z-index:100;position:relative}.VS-search .search_input.is_editing input{color:#202020}.VS-interface.ui-autocomplete{position:absolute;border:1px solid #c0c0c0;border-top:1px solid #d9d9d9;background-color:#f6f6f6;cursor:pointer;z-index:10000;width:auto;min-width:80px;max-width:220px;max-height:240px;overflow-y:auto;overflow-x:hidden;font-size:13px;top:1px;opacity:.97;box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-webkit-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-moz-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5)}.VS-interface.ui-autocomplete .ui-autocomplete-category{text-transform:capitalize;font-size:11px;padding:4px 4px 4px;border-top:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2;background-color:#b7b7b7;text-shadow:0 -1px 0 #999;font-weight:bold;color:white;cursor:default}.VS-interface.ui-autocomplete .ui-menu-item a{outline:none;display:block;padding:3px 4px 5px;background-color:#f8f8f8;background-image:-moz-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f3f3f3));background-image:linear-gradient(top,#f8f8f8,#f3f3f3);border-top:1px solid #fafafa;border-bottom:1px solid #f2f2f2}.VS-interface.ui-autocomplete .ui-menu-item a:active{outline:none}.VS-interface.ui-autocomplete .ui-menu-item .ui-state-hover{background-color:#6483f7;background-image:-moz-linear-gradient(top,#6483f7,#2254f6);background-image:-webkit-gradient(linear,left top,left bottom,from(#6483f7),to(#2254f6));background-image:linear-gradient(top,#6483f7,#2254f6);border-top:1px solid #5a7bee;border-bottom:1px solid #1048ec;color:white}.VS-interface.ui-autocomplete li{list-style:none;width:auto}
View
BIN build-min/visualsearch-datauri.css.gz
Binary file not shown.
View
2 build-min/visualsearch.css
@@ -1 +1 @@
-.VS-search .icon{background-repeat:no-repeat;background-position:center center;vertical-align:middle;width:16px;height:16px}.VS-search .icon.VS-icon-cancel{width:11px;height:11px;background-position:center 0;background-image:url(../Users/conesus/cloud/visualsearch/lib/images/embed/icons/cancel_search.png?1308268129);cursor:pointer}.VS-search .icon.VS-icon-cancel:hover{background-position:center -11px}.VS-search .icon.VS-icon-search{width:12px;height:12px;background-image:url(../Users/conesus/cloud/visualsearch/lib/images/embed/icons/search_glyph.png?1308268129)}.VS-search div,.VS-search span,.VS-search a,.VS-search img,.VS-search ul,.VS-search li,.VS-search form,.VS-search label,.ui-autocomplete ul,.ui-autocomplete li,.ui-autocomplete{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}.VS-search :focus{outline:0}.VS-search{line-height:1;color:black}.VS-search ol,.VS-search ul{list-style:none}.VS-search{font-family:Arial,sans-serif;color:#373737;font-size:12px}.VS-search input{display:block;border:none;outline:none;margin:0;padding:4px;background:transparent;font-size:16px;line-height:20px;width:100%}.VS-interface,.VS-search .dialog,.VS-search input{font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif!important;line-height:1.1em}.VS-search .VS-search-box{cursor:text;position:relative;background:transparent;border:2px solid #ccc;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;background-color:#fafafa;-webkit-box-shadow:inset 0 0 3px #ccc;-moz-box-shadow:inset 0 0 3px #ccc;box-shadow:inset 0 0 3px #ccc;min-height:29px;height:auto}.VS-search .VS-search-box.VS-focus{border-color:#acf;-webkit-box-shadow:inset 0 0 3px #acf;-moz-box-shadow:inset 0 0 3px #acf;box-shadow:inset 0 0 3px #acf}.VS-search .search_inner{position:relative;margin:0 0 0 18px;padding:0 3px;overflow:hidden}.VS-search input{width:100px}.VS-search input,.VS-search .VS-input-width-tester{padding:6px 0;float:left;color:#808080;font:13px/17px Helvetica,Arial}.VS-search.VS-focus input{color:#606060}.VS-search .VS-icon-search{position:absolute;left:9px;top:8px}.VS-search .VS-icon-cancel{position:absolute;right:9px;top:8px}.VS-search .search_facet{float:left;margin:0;padding:0 0 0 13px;position:relative}.VS-search .search_facet.is_selected{margin:5px -3px 5px -3px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.VS-search .search_facet.is_selected{background-color:#cbd1f1;background-image:-moz-linear-gradient(top,#cbd1f1,#afb5ec);background-image:-ms-linear-gradient(top,#cbd1f1,#afb5ec);background-image:-o-linear-gradient(top,#cbd1f1,#afb5ec);background-image:-webkit-gradient(linear,left top,left bottom,from(#cbd1f1),to(#afb5ec));background-image:-webkit-linear-gradient(top,#cbd1f1,#afb5ec);background-image:linear-gradient(top,#cbd1f1,#afb5ec);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#CBD1F1',EndColorStr='#AFB5EC')}.VS-search .search_facet .category{float:left;text-transform:uppercase;font-weight:bold;font-size:10px;color:#808080;text-shadow:1px 1px 0 #FFF;padding:9px 0 6px;line-height:13px;cursor:pointer}.VS-search .search_facet.is_selected .category{padding:4px 0 0;margin-left:3px;text-shadow:1px 1px 0 #d0d0d0}.VS-search .search_facet .search_facet_input_container{float:left}.VS-search .search_facet input{margin:0;padding:0;color:#505050;font-size:13px;line-height:16px;padding:6px 0 7px 4px;height:16px;width:auto;z-index:100;position:relative}.VS-search .search_facet.is_selected input{padding-top:1px;padding-bottom:2px;padding-right:3px}.VS-search .search_facet.is_editing input,.VS-search .search_facet.is_selected input{color:#202020}.VS-search .search_facet .search_facet_remove{position:absolute;left:0;top:9px;opacity:.6}.VS-search .search_facet.is_selected .search_facet_remove{top:4px;left:3px}.VS-search .search_facet .search_facet_remove:hover{opacity:1}.VS-search .search_facet.is_editing .category,.VS-search .search_facet.is_selected .category{color:darkblue}.VS-search .search_facet.search_facet_maybe_delete .category,.VS-search .search_facet.search_facet_maybe_delete input{color:darkred}.VS-search .search_input{height:28px;float:left}.VS-search .search_input input{padding:6px 2px 7px 2px;width:10px;z-index:100;position:relative}.VS-search .search_input.is_editing input{color:#202020}.ui-autocomplete{position:absolute;border:1px solid #c0c0c0;background-color:#f6f6f6;cursor:pointer;z-index:10000;width:auto;min-width:80px;max-width:220px;max-height:240px;overflow-y:auto;overflow-x:hidden;font-size:13px;top:1px;opacity:.97;filter:alpha(opacity=97);box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-webkit-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-moz-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5)}.ui-autocomplete .ui-autocomplete-category{text-transform:capitalize;font-size:11px;padding:4px 4px 4px;border-top:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2;background-color:#b7b7b7;text-shadow:0 -1px 0 #999;font-weight:bold;color:white;cursor:default}.ui-autocomplete .ui-menu-item a{outline:none;display:block;padding:3px 4px 5px;background-color:#f8f8f8;background-image:-moz-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-ms-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-o-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f3f3f3));background-image:-webkit-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:linear-gradient(top,#f8f8f8,#f3f3f3);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#F8F8F8',EndColorStr='#F3F3F3');border-top:1px solid #fafafa;border-bottom:1px solid #f2f2f2}.ui-autocomplete .ui-menu-item a:active{outline:none}.ui-autocomplete .ui-menu-item .ui-state-hover{background-color:#6483f7;background-image:-moz-linear-gradient(top,#6483f7,#2254f6);background-image:-ms-linear-gradient(top,#6483f7,#2254f6);background-image:-o-linear-gradient(top,#6483f7,#2254f6);background-image:-webkit-gradient(linear,left top,left bottom,from(#6483f7),to(#2254f6));background-image:-webkit-linear-gradient(top,#6483f7,#2254f6);background-image:linear-gradient(top,#6483f7,#2254f6);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#6483F7',EndColorStr='#2254F6');border-top:1px solid #5a7bee;border-bottom:1px solid #1048ec;color:white}.ui-autocomplete li{list-style:none;width:auto}
+.VS-search .icon{background-repeat:no-repeat;background-position:center center;vertical-align:middle;width:16px;height:16px}.VS-search .icon.VS-icon-cancel{width:11px;height:11px;background-position:center 0;background-image:url(../Users/conesus/cloud/visualsearch/lib/images/embed/icons/cancel_search.png?1308268129);cursor:pointer}.VS-search .icon.VS-icon-cancel:hover{background-position:center -11px}.VS-search .icon.VS-icon-search{width:12px;height:12px;background-image:url(../Users/conesus/cloud/visualsearch/lib/images/embed/icons/search_glyph.png?1308268129)}.VS-search div,.VS-search span,.VS-search a,.VS-search img,.VS-search ul,.VS-search li,.VS-search form,.VS-search label,.ui-autocomplete ul,.ui-autocomplete li,.ui-autocomplete{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}.VS-search :focus{outline:0}.VS-search{line-height:1;color:black}.VS-search ol,.VS-search ul{list-style:none}.VS-search{font-family:Arial,sans-serif;color:#373737;font-size:12px}.VS-search input{display:block;border:none;outline:none;margin:0;padding:4px;background:transparent;font-size:16px;line-height:20px;width:100%}.VS-interface,.VS-search .dialog,.VS-search input{font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif!important;line-height:1.1em}.VS-search .VS-search-box{cursor:text;position:relative;background:transparent;border:2px solid #ccc;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;background-color:#fafafa;-webkit-box-shadow:inset 0 0 3px #ccc;-moz-box-shadow:inset 0 0 3px #ccc;box-shadow:inset 0 0 3px #ccc;min-height:29px;height:auto}.VS-search .VS-search-box.VS-focus{border-color:#acf;-webkit-box-shadow:inset 0 0 3px #acf;-moz-box-shadow:inset 0 0 3px #acf;box-shadow:inset 0 0 3px #acf}.VS-search .search_inner{position:relative;margin:0 0 0 18px;padding:0 3px;overflow:hidden}.VS-search input{width:100px}.VS-search input,.VS-search .VS-input-width-tester{padding:6px 0;float:left;color:#808080;font:13px/17px Helvetica,Arial}.VS-search.VS-focus input{color:#606060}.VS-search .VS-icon-search{position:absolute;left:9px;top:8px}.VS-search .VS-icon-cancel{position:absolute;right:9px;top:8px}.VS-search .search_facet{float:left;margin:0;padding:0 0 0 13px;position:relative}.VS-search .search_facet.is_selected{margin:5px -3px 5px -3px;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.VS-search .search_facet.is_selected{background-color:#a7b9ff;background-image:-moz-linear-gradient(top,#b0bcff,#7489ff);background-image:-webkit-gradient(linear,left top,left bottom,from(#b0bcff),to(#7489ff));background-image:linear-gradient(top,#b0bcff,#7489ff)}.VS-search .search_facet .category{float:left;text-transform:uppercase;font-weight:bold;font-size:10px;color:#808080;text-shadow:1px 1px 0 #FFF;padding:9px 0 6px;line-height:13px;cursor:pointer}.VS-search .search_facet.is_selected .category{padding:4px 0 0;margin-left:3px;text-shadow:1px 1px 0 #d0d0d0}.VS-search .search_facet .search_facet_input_container{float:left}.VS-search .search_facet input{margin:0;padding:0;color:#000;font-size:13px;line-height:16px;padding:6px 0 7px 4px;height:16px;width:auto;z-index:100;position:relative}.VS-search .search_facet.is_selected input{padding-top:1px;padding-bottom:2px;padding-right:3px}.VS-search .search_facet.is_editing input,.VS-search .search_facet.is_selected input{color:#000}.VS-search .search_facet .search_facet_remove{position:absolute;left:0;top:9px;opacity:.6}.VS-search .search_facet.is_selected .search_facet_remove{top:4px;left:3px}.VS-search .search_facet .search_facet_remove:hover{opacity:1}.VS-search .search_facet.is_editing .category,.VS-search .search_facet.is_selected .category{color:darkblue}.VS-search .search_facet.search_facet_maybe_delete .category,.VS-search .search_facet.search_facet_maybe_delete input{color:darkred}.VS-search .search_input{height:28px;float:left}.VS-search .search_input input{padding:6px 2px 7px 2px;width:10px;z-index:100;position:relative}.VS-search .search_input.is_editing input{color:#202020}.VS-interface.ui-autocomplete{position:absolute;border:1px solid #c0c0c0;border-top:1px solid #d9d9d9;background-color:#f6f6f6;cursor:pointer;z-index:10000;width:auto;min-width:80px;max-width:220px;max-height:240px;overflow-y:auto;overflow-x:hidden;font-size:13px;top:1px;opacity:.97;box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-webkit-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5);-moz-box-shadow:3px 4px 5px -2px rgba(0,0,0,0.5)}.VS-interface.ui-autocomplete .ui-autocomplete-category{text-transform:capitalize;font-size:11px;padding:4px 4px 4px;border-top:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2;background-color:#b7b7b7;text-shadow:0 -1px 0 #999;font-weight:bold;color:white;cursor:default}.VS-interface.ui-autocomplete .ui-menu-item a{outline:none;display:block;padding:3px 4px 5px;background-color:#f8f8f8;background-image:-moz-linear-gradient(top,#f8f8f8,#f3f3f3);background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f3f3f3));background-image:linear-gradient(top,#f8f8f8,#f3f3f3);border-top:1px solid #fafafa;border-bottom:1px solid #f2f2f2}.VS-interface.ui-autocomplete .ui-menu-item a:active{outline:none}.VS-interface.ui-autocomplete .ui-menu-item .ui-state-hover{background-color:#6483f7;background-image:-moz-linear-gradient(top,#6483f7,#2254f6);background-image:-webkit-gradient(linear,left top,left bottom,from(#6483f7),to(#2254f6));background-image:linear-gradient(top,#6483f7,#2254f6);border-top:1px solid #5a7bee;border-bottom:1px solid #1048ec;color:white}.VS-interface.ui-autocomplete li{list-style:none;width:auto}
View
BIN build-min/visualsearch.css.gz
Binary file not shown.
View
60 build-min/visualsearch.js
@@ -7,37 +7,39 @@
*/
(function(){var c=jQuery;if(!window.VS)window.VS={};if(!VS.app)VS.app={};if(!VS.ui)VS.ui={};if(!VS.model)VS.model={};if(!VS.utils)VS.utils={};VS.init=function(a){var b={container:"",query:"",unquotable:[],callbacks:{search:c.noop,focus:c.noop,categoryMatches:c.noop,facetMatches:c.noop}};VS.options=_.extend({},b,a);VS.options.callbacks=_.extend({},b.callbacks,a.callbacks);VS.app.hotkeys.initialize();VS.app.searchQuery=new VS.model.SearchQuery;VS.app.searchBox=new VS.ui.SearchBox(a);if(a.container){b=
VS.app.searchBox.render().el;c(a.container).html(b)}VS.app.searchBox.value(a.query||"");c(window).bind("unload",function(){});return VS.app.searchBox}})();
-(function(){var c=jQuery;VS.ui.SearchBox=Backbone.View.extend({id:"search",events:{"click .VS-cancel-search-box":"clearSearch","mousedown .VS-search-box":"focusSearch","dblclick .VS-search-box":"highlightSearch"},initialize:function(){this.flags={allSelected:false};this.facetViews=[];this.inputViews=[];_.bindAll(this,"renderFacets","_maybeDisableFacets","disableFacets");VS.app.searchQuery.bind("refresh",this.renderFacets);c(document).bind("keydown",this._maybeDisableFacets)},render:function(){c(this.el).append(JST.search_box({}));
-c(document.body).setMode("no","search");return this},value:function(a){if(a==null)return this.getQuery();return this.setQuery(a)},getQuery:function(){var a=[],b=this.inputViews.length;VS.app.searchQuery.each(_.bind(function(d,e){a.push(this.inputViews[e].value());a.push(d.serialize())},this));b&&a.push(this.inputViews[b-1].value());return _.compact(a).join(" ")},setQuery:function(a){this.currentQuery=a;VS.app.SearchParser.parse(a);this.clearInputs()},viewPosition:function(a){a=_.indexOf(a.type=="facet"?
-this.facetViews:this.inputViews,a);if(a==-1)a=0;return a},searchEvent:function(){var a=this.value();this.focusSearch();VS.options.callbacks.search(a)!==false&&this.value(a)},addFacet:function(a,b,d){a=VS.utils.inflector.trim(a);b=VS.utils.inflector.trim(b||"");if(a){var e=new VS.model.SearchFacet({category:a,value:b||""});VS.app.searchQuery.add(e,{at:d});this.renderFacets();_.detect(this.facetViews,function(f){if(f.model==e)return true}).enableEdit()}},renderFacets:function(){this.facetViews=[];this.inputViews=
-[];this.$(".search_inner").empty();VS.app.searchQuery.each(_.bind(function(a,b){this.renderFacet(a,b)},this));this.renderSearchInput()},renderFacet:function(a,b){var d=new VS.ui.SearchFacet({model:a,order:b});this.renderSearchInput();this.facetViews.push(d);this.$(".search_inner").children().eq(b*2).after(d.render().el);d.calculateSize();_.defer(_.bind(d.calculateSize,d));return d},renderSearchInput:function(){var a=new VS.ui.SearchInput({position:this.inputViews.length});this.$(".search_inner").append(a.render().el);
-this.inputViews.push(a)},clearSearch:function(a){this.value("");this.flags.allSelected=false;this.focusSearch(a)},clearInputs:function(){_.each(this.inputViews,function(a){a.clear()})},selectAllFacets:function(){this.flags.allSelected=true;_.each(this.inputViews,function(a){a.selectText()});_.each(this.facetViews,function(a){a.selectFacet()});c(document).one("click",this.disableFacets)},allSelected:function(a){if(a)this.flags.allSelected=false;return this.flags.allSelected},disableFacets:function(a){_.each(this.facetViews,
-function(b){if(b!=a&&(b.modes.editing=="is"||b.modes.selected=="is")){b.disableEdit();b.deselectFacet()}});this.flags.allSelected=false;this.removeFocus()},resizeFacets:function(a){_.each(this.facetViews,function(b){if(!a||b==a)b.resize()})},_maybeDisableFacets:function(a){if(this.flags.allSelected&&VS.app.hotkeys.key(a)=="backspace"){a.preventDefault();this.clearSearch(a);return false}else if(this.flags.allSelected&&VS.app.hotkeys.printable(a))this.clearSearch(a);else if(this.flags.allSelected){this.flags.allSelected=
-false;this.disableFacets()}},focusNextFacet:function(a,b,d){d=d||{};var e=this.facetViews.length,f=d.viewPosition||this.viewPosition(a);if(d.skipToFacet){if(d.skipToFacet&&a.type=="text"&&e==f&&b>=0)b=f=0}else{if(a.type=="text"&&b>0)b-=1;if(a.type=="facet"&&b<0)b+=1}var g;f=Math.min(e,f+b);if(a.type=="text"&&f>=0&&f<e){g=this.facetViews[f];if(d.selectFacet)g.selectFacet();else{g.enableEdit();g.setCursorAtEnd(b||d.startAtEnd)}}else if(a.type=="facet")if(d.skipToFacet)if(f>=e||f<0){g=_.last(this.inputViews);
-g.focus()}else{g=this.facetViews[f];g.enableEdit();g.setCursorAtEnd(b||d.startAtEnd)}else{g=this.inputViews[f];g.focus();d.selectText&&g.selectText()}d.selectText&&g.selectText();this.resizeFacets()},focusSearch:function(a,b){var d=this.inputViews[this.inputViews.length-1];if(!a||c(a.target).is(".VS-search-box")||c(a.target).is(".search_inner")||a.type=="keydown"){this.disableFacets();b?d.focus(b):d.setCursorAtEnd(-1);if(a&&a.type=="keydown"){d.keydown(a);d.box.trigger("keydown")}_.defer(_.bind(function(){this.$("input:focus").length||
-this.inputViews[this.inputViews.length-1].focus(b)},this))}},highlightSearch:function(a){this.focusSearch(a,true)},addFocus:function(){VS.options.callbacks.focus();this.$(".VS-search-box").addClass("VS-focus")},removeFocus:function(){_.any(this.facetViews.concat(this.inputViews),function(a){return a.isFocused()})||this.$(".VS-search-box").removeClass("VS-focus")},showFacetCategoryMenu:function(a){a.preventDefault();a.stopPropagation();if(this.facetCategoryMenu&&this.facetCategoryMenu.modes.open==
-"is")return this.facetCategoryMenu.close();a=[{title:"Account",onClick:_.bind(this.addFacet,this,"account","")},{title:"Project",onClick:_.bind(this.addFacet,this,"project","")},{title:"Filter",onClick:_.bind(this.addFacet,this,"filter","")},{title:"Access",onClick:_.bind(this.addFacet,this,"access","")}];a=this.facetCategoryMenu||(this.facetCategoryMenu=new dc.ui.Menu({items:a,standalone:true}));this.$(".VS-icon-search").after(a.render().open().content);return false}})})();
+(function(){var c=jQuery;VS.ui.SearchBox=Backbone.View.extend({id:"search",events:{"click .VS-cancel-search-box":"clearSearch","mousedown .VS-search-box":"focusSearch","dblclick .VS-search-box":"highlightSearch","click .VS-search-box":"maybeTripleClick"},initialize:function(){this.flags={allSelected:false};this.facetViews=[];this.inputViews=[];_.bindAll(this,"renderFacets","_maybeDisableFacets","disableFacets");VS.app.searchQuery.bind("refresh",this.renderFacets);c(document).bind("keydown",this._maybeDisableFacets)},
+render:function(){c(this.el).append(JST.search_box({}));c(document.body).setMode("no","search");return this},value:function(a){if(a==null)return this.getQuery();return this.setQuery(a)},getQuery:function(){var a=[],b=this.inputViews.length;VS.app.searchQuery.each(_.bind(function(d,e){a.push(this.inputViews[e].value());a.push(d.serialize())},this));b&&a.push(this.inputViews[b-1].value());return _.compact(a).join(" ")},setQuery:function(a){this.currentQuery=a;VS.app.SearchParser.parse(a);this.clearInputs()},
+viewPosition:function(a){a=_.indexOf(a.type=="facet"?this.facetViews:this.inputViews,a);if(a==-1)a=0;return a},searchEvent:function(){var a=this.value();this.focusSearch();VS.options.callbacks.search(a)!==false&&this.value(a)},addFacet:function(a,b,d){a=VS.utils.inflector.trim(a);b=VS.utils.inflector.trim(b||"");if(a){var e=new VS.model.SearchFacet({category:a,value:b||""});VS.app.searchQuery.add(e,{at:d});this.renderFacets();_.detect(this.facetViews,function(f){if(f.model==e)return true}).enableEdit()}},
+renderFacets:function(){this.facetViews=[];this.inputViews=[];this.$(".search_inner").empty();VS.app.searchQuery.each(_.bind(function(a,b){this.renderFacet(a,b)},this));this.renderSearchInput()},renderFacet:function(a,b){var d=new VS.ui.SearchFacet({model:a,order:b});this.renderSearchInput();this.facetViews.push(d);this.$(".search_inner").children().eq(b*2).after(d.render().el);d.calculateSize();_.defer(_.bind(d.calculateSize,d));return d},renderSearchInput:function(){var a=new VS.ui.SearchInput({position:this.inputViews.length});
+this.$(".search_inner").append(a.render().el);this.inputViews.push(a)},clearSearch:function(a){this.value("");this.flags.allSelected=false;this.focusSearch(a)},clearInputs:function(){_.each(this.inputViews,function(a){a.clear()})},selectAllFacets:function(){this.flags.allSelected=true;_.each(this.inputViews,function(a){a.selectText()});_.each(this.facetViews,function(a){a.selectFacet()});c(document).one("click.selectAllFacets",this.disableFacets)},allSelected:function(a){if(a)this.flags.allSelected=
+false;return this.flags.allSelected},disableFacets:function(a){_.each(this.inputViews,function(b){if(b!=a&&(b.modes.editing=="is"||b.modes.selected=="is"))b.blur()});_.each(this.facetViews,function(b){if(b!=a&&(b.modes.editing=="is"||b.modes.selected=="is")){b.disableEdit();b.deselectFacet()}});this.flags.allSelected=false;this.removeFocus();c(document).unbind("click.selectAllFacets")},resizeFacets:function(a){_.each(this.facetViews,function(b){if(!a||b==a)b.resize()})},_maybeDisableFacets:function(a){if(this.flags.allSelected&&
+VS.app.hotkeys.key(a)=="backspace"){a.preventDefault();this.clearSearch(a);return false}else if(this.flags.allSelected&&VS.app.hotkeys.printable(a))this.clearSearch(a);else if(this.flags.allSelected){this.flags.allSelected=false;this.disableFacets()}},focusNextFacet:function(a,b,d){d=d||{};var e=this.facetViews.length,f=d.viewPosition||this.viewPosition(a);if(d.skipToFacet){if(d.skipToFacet&&a.type=="text"&&e==f&&b>=0)b=f=0}else{if(a.type=="text"&&b>0)b-=1;if(a.type=="facet"&&b<0)b+=1}var g;f=Math.min(e,
+f+b);if(a.type=="text"&&f>=0&&f<e){g=this.facetViews[f];if(d.selectFacet)g.selectFacet();else{g.enableEdit();g.setCursorAtEnd(b||d.startAtEnd)}}else if(a.type=="facet")if(d.skipToFacet)if(f>=e||f<0){g=_.last(this.inputViews);g.focus()}else{g=this.facetViews[f];g.enableEdit();g.setCursorAtEnd(b||d.startAtEnd)}else{g=this.inputViews[f];g.focus();d.selectText&&g.selectText()}d.selectText&&g.selectText();this.resizeFacets()},focusSearch:function(a,b){var d=this.inputViews[this.inputViews.length-1];if(!a||
+c(a.target).is(".VS-search-box")||c(a.target).is(".search_inner")||a.type=="keydown"){this.disableFacets();b?d.focus(b):d.setCursorAtEnd(-1);if(a&&a.type=="keydown"){d.keydown(a);d.box.trigger("keydown")}_.defer(_.bind(function(){this.$("input:focus").length||this.inputViews[this.inputViews.length-1].focus(b)},this))}},highlightSearch:function(a){this.inputViews[this.inputViews.length-1].startTripleClickTimer();this.focusSearch(a,true)},maybeTripleClick:function(a){return this.inputViews[this.inputViews.length-
+1].maybeTripleClick(a)},addFocus:function(){VS.options.callbacks.focus();this.$(".VS-search-box").addClass("VS-focus")},removeFocus:function(){_.any(this.facetViews.concat(this.inputViews),function(a){return a.isFocused()})||this.$(".VS-search-box").removeClass("VS-focus")},showFacetCategoryMenu:function(a){a.preventDefault();a.stopPropagation();if(this.facetCategoryMenu&&this.facetCategoryMenu.modes.open=="is")return this.facetCategoryMenu.close();a=[{title:"Account",onClick:_.bind(this.addFacet,
+this,"account","")},{title:"Project",onClick:_.bind(this.addFacet,this,"project","")},{title:"Filter",onClick:_.bind(this.addFacet,this,"filter","")},{title:"Access",onClick:_.bind(this.addFacet,this,"access","")}];a=this.facetCategoryMenu||(this.facetCategoryMenu=new dc.ui.Menu({items:a,standalone:true}));this.$(".VS-icon-search").after(a.render().open().content);return false}})})();
(function(){var c=jQuery;VS.ui.SearchFacet=Backbone.View.extend({type:"facet",className:"search_facet",events:{"click .category":"selectFacet","keydown input":"keydown","mousedown input":"enableEdit","mouseover .VS-icon-cancel":"showDelete","mouseout .VS-icon-cancel":"hideDelete","click .VS-icon-cancel":"remove"},initialize:function(){this.flags={canClose:false};_.bindAll(this,"set","keydown","deselectFacet","deferDisableEdit")},render:function(){c(this.el).html(JST.search_facet({model:this.model}));
this.setMode("not","editing");this.setMode("not","selected");this.box=this.$("input");this.box.val(this.model.get("value"));this.box.bind("blur",this.deferDisableEdit);this.setupAutocomplete();return this},calculateSize:function(){this.box.autoGrowInput();this.box.unbind("updated.autogrow");this.box.bind("updated.autogrow",_.bind(this.moveAutocomplete,this))},resize:function(a){this.box.trigger("resize.autogrow",a)},setupAutocomplete:function(){this.box.autocomplete({source:_.bind(this.autocompleteValues,
-this),minLength:0,delay:0,autoFocus:true,select:_.bind(function(a,b){a.preventDefault();var d=this.model.get("value");this.set(b.item.value);if(d!=b.item.value||this.box.val()!=b.item.value)this.search(a);return false},this)});this.box.autocomplete("widget").addClass("VS-interface")},moveAutocomplete:function(){var a=this.box.data("autocomplete");a&&a.menu.element.position({my:"left top",at:"left bottom",of:this.box.data("autocomplete").element,collision:"flip",offset:"0 0"})},searchAutocomplete:function(){var a=
-this.box.data("autocomplete");a&&a.search()},closeAutocomplete:function(){var a=this.box.data("autocomplete");a&&a.close()},autocompleteValues:function(a,b){var d=this.model.get("category"),e=this.model.get("value"),f=a.term;d=VS.options.callbacks.facetMatches(d)||[];if(f&&e!=f){f=VS.utils.inflector.escapeRegExp(f||"");var g=RegExp("\\b"+f,"i");d=c.grep(d,function(h){return g.test(h)||g.test(h.value)||g.test(h.label)})}b(_.sortBy(d,function(h){return h==e||h.value==e?"":h}))},set:function(a){a&&this.model.set({value:a})},
-search:function(a){this.closeAutocomplete();VS.app.searchBox.searchEvent(a)},enableEdit:function(){if(this.modes.editing!="is"){this.setMode("is","editing");this.deselectFacet();this.box.val()==""&&this.box.val(this.model.get("value"))}this.flags.canClose=false;this.searchAutocomplete();VS.app.searchBox.disableFacets(this);VS.app.searchBox.addFocus();_.defer(function(){VS.app.searchBox.addFocus()});this.box.is(":focus")||this.box.focus();this.resize()},deferDisableEdit:function(){this.flags.canClose=
-true;_.delay(_.bind(function(){this.flags.canClose&&!this.box.is(":focus")&&this.modes.editing=="is"&&this.modes.selected!="is"&&this.disableEdit()},this),250)},disableEdit:function(){var a=VS.utils.inflector.trim(this.box.val());a!=this.model.get("value")&&this.set(a);this.flags.canClose=false;this.box.selectRange(0,0);this.box.blur();this.setMode("not","editing");this.closeAutocomplete();VS.app.searchBox.removeFocus()},selectFacet:function(){this.flags.canClose=false;var a=VS.app.searchBox.allSelected();
-a||VS.app.searchBox.disableFacets(this);if(this.box.is(":focus")){this.box.setCursorPosition(0);this.box.blur()}this.closeAutocomplete();this.setMode("is","selected");this.setMode("not","editing");if(!a){c(document).unbind("keydown.facet",this.keydown);c(document).unbind("click.facet",this.deselectFacet);_.defer(_.bind(function(){c(document).unbind("keydown.facet").bind("keydown.facet",this.keydown);c(document).unbind("click.facet").one("click.facet",this.deselectFacet)},this));VS.app.searchBox.addFocus()}},
-deselectFacet:function(){if(this.modes.selected=="is"){this.setMode("not","selected");this.closeAutocomplete();VS.app.searchBox.removeFocus()}c(document).unbind("keydown.facet",this.keydown);c(document).unbind("click.facet",this.deselectFacet)},isFocused:function(){return this.box.is(":focus")},showDelete:function(){c(this.el).addClass("search_facet_maybe_delete")},hideDelete:function(){c(this.el).removeClass("search_facet_maybe_delete")},setCursorAtEnd:function(a){a==-1?this.box.setCursorPosition(this.box.val().length):
-this.box.setCursorPosition(0)},remove:function(){var a=this.model.has("value");this.deselectFacet();this.disableEdit();VS.app.searchQuery.remove(this.model);a?this.search():VS.app.searchBox.renderFacets();VS.app.searchBox.focusNextFacet(this,0,{viewPosition:this.options.order})},selectText:function(){this.box.selectRange(0,this.box.val().length)},keydown:function(a){var b=VS.app.hotkeys.key(a);if(b=="enter"&&this.box.val()){this.disableEdit();this.search(a)}else if(b=="left"){if(this.box.getCursorPosition()==
-0&&!this.box.getSelection().length)if(this.modes.selected=="is"){this.deselectFacet();VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true})}else this.selectFacet()}else if(b=="right")if(this.modes.selected=="is"){a.preventDefault();this.deselectFacet();this.setCursorAtEnd(0);this.enableEdit()}else{if(this.box.getCursorPosition()==this.box.val().length){a.preventDefault();this.disableEdit();VS.app.searchBox.focusNextFacet(this,1)}}else if(VS.app.hotkeys.shift&&b=="tab"){a.preventDefault();this.deselectFacet();
-this.disableEdit();VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true,skipToFacet:true,selectText:true})}else if(b=="tab"){a.preventDefault();this.deselectFacet();this.disableEdit();VS.app.searchBox.focusNextFacet(this,1,{skipToFacet:true,selectText:true})}else if(VS.app.hotkeys.command&&(a.which==97||a.which==65)){a.preventDefault();VS.app.searchBox.selectAllFacets();return false}else if(VS.app.hotkeys.printable(a)&&this.modes.selected=="is"){VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true});
-this.remove()}else if(b=="backspace")if(this.modes.selected=="is"){a.preventDefault();this.remove(a)}else if(this.box.getCursorPosition()==0&&!this.box.getSelection().length){a.preventDefault();this.selectFacet()}this.resize(a)}})})();
-(function(){var c=jQuery;VS.ui.SearchInput=Backbone.View.extend({type:"text",className:"search_input",events:{"keypress input":"keypress","keydown input":"keydown"},initialize:function(){_.bindAll(this,"removeFocus","addFocus","moveAutocomplete")},render:function(){c(this.el).html(JST.search_input({}));this.setMode("not","editing");this.setMode("not","selected");this.box=this.$("input");this.box.autoGrowInput();this.box.bind("updated.autogrow",this.moveAutocomplete);this.box.bind("blur",this.removeFocus);
-this.box.bind("focus",this.addFocus);this.setupAutocomplete();return this},setupAutocomplete:function(){this.box.autocomplete({minLength:1,delay:50,autoFocus:true,source:_.bind(this.autocompleteValues,this),select:_.bind(function(a,b){a.preventDefault();a.stopPropagation();var d=this.addTextFacetRemainder(b.item.value);VS.app.searchBox.addFacet(b.item.value,"",this.options.position+(d?1:0));this.clear();return false},this)});this.box.data("autocomplete")._renderMenu=function(a,b){var d="";_.each(b,
-_.bind(function(e){if(e.category&&e.category!=d){a.append('<li class="ui-autocomplete-category">'+e.category+"</li>");d=e.category}this._renderItem(a,e)},this))};this.box.autocomplete("widget").addClass("VS-interface")},autocompleteValues:function(a,b){var d=a.term.match(/\w+$/);d=VS.utils.inflector.escapeRegExp(d&&d[0]||" ");var e=VS.options.callbacks.categoryMatches()||[],f=RegExp("^"+d,"i");d=c.grep(e,function(g){return f.test(g.label||g)});b(_.sortBy(d,function(g){return g.label?g.category+"-"+
-g.label:g}))},moveAutocomplete:function(){var a=this.box.data("autocomplete");a&&a.menu.element.position({my:"left top",at:"left bottom",of:this.box.data("autocomplete").element,collision:"none"})},addTextFacetRemainder:function(a){var b=this.box.val(),d=b.match(/\b(\w+)$/);if(d&&a.indexOf(d[0])==0)b=b.replace(/\b(\w+)$/,"");(b=b.replace("^s+|s+$",""))&&VS.app.searchBox.addFacet("text",b,this.options.position);return b},focus:function(a){this.addFocus();this.box.focus();a&&this.selectText()},blur:function(){this.box.blur();
-this.removeFocus()},removeFocus:function(){VS.app.searchBox.removeFocus();this.setMode("not","editing");this.setMode("not","selected")},addFocus:function(){VS.app.searchBox.disableFacets(this);VS.app.searchBox.addFocus();this.setMode("is","editing");this.setMode("not","selected")},isFocused:function(){return this.box.is(":focus")},clear:function(){this.box.val("")},value:function(){return this.box.val()},setCursorAtEnd:function(a){a==-1?this.box.setCursorPosition(this.box.val().length):this.box.setCursorPosition(0)},
-selectText:function(){if(VS.app.searchBox.allSelected())this.setMode("is","selected");else{this.box.selectRange(0,this.box.val().length);this.box.focus()}},keypress:function(a){var b=VS.app.hotkeys.key(a);if(b=="enter")return VS.app.searchBox.searchEvent(a);else if(VS.app.hotkeys.colon(a)){this.box.trigger("resize.autogrow",a);b=this.box.val();var d=VS.options.callbacks.categoryMatches()||[];d=_.map(d,function(e){return e.label?e.label:e});if(_.contains(d,b)){a.preventDefault();a=this.addTextFacetRemainder(b);
-VS.app.searchBox.addFacet(b,"",this.options.position+(a?1:0));this.clear();return false}}else if(b=="backspace")if(this.box.getCursorPosition()==0&&!this.box.getSelection().length){a.preventDefault();a.stopPropagation();a.stopImmediatePropagation();VS.app.searchBox.resizeFacets();return false}},keydown:function(a){var b=VS.app.hotkeys.key(a);if(b=="left"){if(this.box.getCursorPosition()==0){a.preventDefault();VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true})}}else if(b=="right"){if(this.box.getCursorPosition()==
-this.box.val().length){a.preventDefault();VS.app.searchBox.focusNextFacet(this,1,{selectFacet:true})}}else if(VS.app.hotkeys.shift&&b=="tab"){a.preventDefault();VS.app.searchBox.focusNextFacet(this,-1,{selectText:true})}else if(b=="tab"){a.preventDefault();b=this.box.val();if(b.length){var d=this.addTextFacetRemainder(b);VS.app.searchBox.addFacet(b,"",this.options.position+(d?1:0))}else VS.app.searchBox.focusNextFacet(this,0,{skipToFacet:true,selectText:true})}else if(VS.app.hotkeys.command&&String.fromCharCode(a.which).toLowerCase()==
-"a"){a.preventDefault();VS.app.searchBox.selectAllFacets();return false}else if(b=="backspace"&&!VS.app.searchBox.allSelected())if(this.box.getCursorPosition()==0&&!this.box.getSelection().length){a.preventDefault();VS.app.searchBox.focusNextFacet(this,-1,{backspace:true});return false}this.box.trigger("resize.autogrow",a)}})})();(function(){var c=jQuery;Backbone.View.prototype.setMode=function(a,b){this.modes||(this.modes={});if(this.modes[b]!==a){c(this.el).setMode(a,b);this.modes[b]=a}}})();
+this),minLength:0,delay:0,autoFocus:true,select:_.bind(function(a,b){a.preventDefault();var d=this.model.get("value");this.set(b.item.value);if(d!=b.item.value||this.box.val()!=b.item.value)this.search(a);VS.app.searchBox.focusNextFacet(this,1,{viewPosition:this.options.order});return false},this)});this.box.autocomplete("widget").addClass("VS-interface")},moveAutocomplete:function(){var a=this.box.data("autocomplete");a&&a.menu.element.position({my:"left top",at:"left bottom",of:this.box.data("autocomplete").element,
+collision:"flip",offset:"0 0"})},searchAutocomplete:function(){var a=this.box.data("autocomplete");if(a){var b=a.menu.element;a.search();b.outerWidth(Math.max(b.width("").outerWidth(),a.element.outerWidth()))}},closeAutocomplete:function(){var a=this.box.data("autocomplete");a&&a.close()},autocompleteValues:function(a,b){var d=this.model.get("category"),e=this.model.get("value"),f=a.term;d=VS.options.callbacks.facetMatches(d)||[];if(f&&e!=f){f=VS.utils.inflector.escapeRegExp(f||"");var g=RegExp("\\b"+
+f,"i");d=c.grep(d,function(h){return g.test(h)||g.test(h.value)||g.test(h.label)})}b(_.sortBy(d,function(h){return h==e||h.value==e?"":h}))},set:function(a){a&&this.model.set({value:a})},search:function(a){this.closeAutocomplete();VS.app.searchBox.searchEvent(a)},enableEdit:function(){if(this.modes.editing!="is"){this.setMode("is","editing");this.deselectFacet();this.box.val()==""&&this.box.val(this.model.get("value"))}this.flags.canClose=false;VS.app.searchBox.disableFacets(this);VS.app.searchBox.addFocus();
+_.defer(function(){VS.app.searchBox.addFocus()});this.box.is(":focus")||this.box.focus();this.resize();this.searchAutocomplete()},deferDisableEdit:function(){this.flags.canClose=true;_.delay(_.bind(function(){this.flags.canClose&&!this.box.is(":focus")&&this.modes.editing=="is"&&this.modes.selected!="is"&&this.disableEdit()},this),250)},disableEdit:function(){var a=VS.utils.inflector.trim(this.box.val());a!=this.model.get("value")&&this.set(a);this.flags.canClose=false;this.box.selectRange(0,0);this.box.blur();
+this.setMode("not","editing");this.closeAutocomplete();VS.app.searchBox.removeFocus()},selectFacet:function(){var a=VS.app.searchBox.allSelected();this.flags.canClose=false;a||VS.app.searchBox.disableFacets(this);if(this.box.is(":focus")){this.box.setCursorPosition(0);this.box.blur()}this.closeAutocomplete();this.setMode("is","selected");this.setMode("not","editing");if(!a){c(document).unbind("keydown.facet",this.keydown);c(document).unbind("click.facet",this.deselectFacet);_.defer(_.bind(function(){c(document).unbind("keydown.facet").bind("keydown.facet",
+this.keydown);c(document).unbind("click.facet").one("click.facet",this.deselectFacet)},this));VS.app.searchBox.addFocus()}},deselectFacet:function(){if(this.modes.selected=="is"){this.setMode("not","selected");this.closeAutocomplete();VS.app.searchBox.removeFocus()}c(document).unbind("keydown.facet",this.keydown);c(document).unbind("click.facet",this.deselectFacet)},isFocused:function(){return this.box.is(":focus")},showDelete:function(){c(this.el).addClass("search_facet_maybe_delete")},hideDelete:function(){c(this.el).removeClass("search_facet_maybe_delete")},
+setCursorAtEnd:function(a){a==-1?this.box.setCursorPosition(this.box.val().length):this.box.setCursorPosition(0)},remove:function(){var a=this.model.has("value");this.deselectFacet();this.disableEdit();VS.app.searchQuery.remove(this.model);a?this.search():VS.app.searchBox.renderFacets();VS.app.searchBox.focusNextFacet(this,0,{viewPosition:this.options.order})},selectText:function(){this.box.selectRange(0,this.box.val().length)},keydown:function(a){var b=VS.app.hotkeys.key(a);if(b=="enter"&&this.box.val()){this.disableEdit();
+this.search(a)}else if(b=="left"){if(this.box.getCursorPosition()==0&&!this.box.getSelection().length)if(this.modes.selected=="is"){this.deselectFacet();VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true})}else this.selectFacet()}else if(b=="right")if(this.modes.selected=="is"){a.preventDefault();this.deselectFacet();this.setCursorAtEnd(0);this.enableEdit()}else{if(this.box.getCursorPosition()==this.box.val().length){a.preventDefault();this.disableEdit();VS.app.searchBox.focusNextFacet(this,
+1)}}else if(VS.app.hotkeys.shift&&b=="tab"){a.preventDefault();this.deselectFacet();this.disableEdit();VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true,skipToFacet:true,selectText:true})}else if(b=="tab"){a.preventDefault();this.deselectFacet();this.disableEdit();VS.app.searchBox.focusNextFacet(this,1,{skipToFacet:true,selectText:true})}else if(VS.app.hotkeys.command&&(a.which==97||a.which==65)){a.preventDefault();VS.app.searchBox.selectAllFacets();return false}else if(VS.app.hotkeys.printable(a)&&
+this.modes.selected=="is"){VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true});this.remove()}else if(b=="backspace")if(this.modes.selected=="is"){a.preventDefault();this.remove(a)}else if(this.box.getCursorPosition()==0&&!this.box.getSelection().length){a.preventDefault();this.selectFacet()}this.resize(a)}})})();
+(function(){var c=jQuery;VS.ui.SearchInput=Backbone.View.extend({type:"text",className:"search_input",events:{"keypress input":"keypress","keydown input":"keydown","click input":"maybeTripleClick","dblclick input":"startTripleClickTimer"},initialize:function(){_.bindAll(this,"removeFocus","addFocus","moveAutocomplete")},render:function(){c(this.el).html(JST.search_input({}));this.setMode("not","editing");this.setMode("not","selected");this.box=this.$("input");this.box.autoGrowInput();this.box.bind("updated.autogrow",
+this.moveAutocomplete);this.box.bind("blur",this.removeFocus);this.box.bind("focus",this.addFocus);this.setupAutocomplete();return this},setupAutocomplete:function(){this.box.autocomplete({minLength:1,delay:50,autoFocus:true,source:_.bind(this.autocompleteValues,this),select:_.bind(function(a,b){a.preventDefault();a.stopPropagation();var d=this.addTextFacetRemainder(b.item.value);VS.app.searchBox.addFacet(b.item.value,"",this.options.position+(d?1:0));this.clear();return false},this)});this.box.data("autocomplete")._renderMenu=
+function(a,b){var d="";_.each(b,_.bind(function(e){if(e.category&&e.category!=d){a.append('<li class="ui-autocomplete-category">'+e.category+"</li>");d=e.category}this._renderItem(a,e)},this))};this.box.autocomplete("widget").addClass("VS-interface")},autocompleteValues:function(a,b){var d=a.term.match(/\w+$/);d=VS.utils.inflector.escapeRegExp(d&&d[0]||" ");var e=VS.options.callbacks.categoryMatches()||[],f=RegExp("^"+d,"i");d=c.grep(e,function(g){return f.test(g.label||g)});b(_.sortBy(d,function(g){return g.label?
+g.category+"-"+g.label:g}))},moveAutocomplete:function(){var a=this.box.data("autocomplete");a&&a.menu.element.position({my:"left top",at:"left bottom",of:this.box.data("autocomplete").element,collision:"none"})},addTextFacetRemainder:function(a){var b=this.box.val(),d=b.match(/\b(\w+)$/);if(d&&a.indexOf(d[0])==0)b=b.replace(/\b(\w+)$/,"");(b=b.replace("^s+|s+$",""))&&VS.app.searchBox.addFacet("text",b,this.options.position);return b},focus:function(a){this.addFocus();this.box.focus();a&&this.selectText()},
+blur:function(){this.box.blur();this.removeFocus()},removeFocus:function(){VS.app.searchBox.removeFocus();this.setMode("not","editing");this.setMode("not","selected")},addFocus:function(){VS.app.searchBox.disableFacets(this);VS.app.searchBox.addFocus();this.setMode("is","editing");this.setMode("not","selected")},startTripleClickTimer:function(){this.tripleClickTimer=setTimeout(_.bind(function(){this.tripleClickTimer=null},this),500)},maybeTripleClick:function(a){if(this.tripleClickTimer){a.preventDefault();
+VS.app.searchBox.selectAllFacets();return false}},isFocused:function(){return this.box.is(":focus")},clear:function(){this.box.val("")},value:function(){return this.box.val()},setCursorAtEnd:function(a){a==-1?this.box.setCursorPosition(this.box.val().length):this.box.setCursorPosition(0)},selectText:function(){if(VS.app.searchBox.allSelected())this.setMode("is","selected");else{this.box.selectRange(0,this.box.val().length);this.box.focus()}},keypress:function(a){var b=VS.app.hotkeys.key(a);if(b==
+"enter")return VS.app.searchBox.searchEvent(a);else if(VS.app.hotkeys.colon(a)){this.box.trigger("resize.autogrow",a);b=this.box.val();var d=VS.options.callbacks.categoryMatches()||[];d=_.map(d,function(e){return e.label?e.label:e});if(_.contains(d,b)){a.preventDefault();a=this.addTextFacetRemainder(b);VS.app.searchBox.addFacet(b,"",this.options.position+(a?1:0));this.clear();return false}}else if(b=="backspace")if(this.box.getCursorPosition()==0&&!this.box.getSelection().length){a.preventDefault();
+a.stopPropagation();a.stopImmediatePropagation();VS.app.searchBox.resizeFacets();return false}},keydown:function(a){var b=VS.app.hotkeys.key(a);if(b=="left"){if(this.box.getCursorPosition()==0){a.preventDefault();VS.app.searchBox.focusNextFacet(this,-1,{startAtEnd:true})}}else if(b=="right"){if(this.box.getCursorPosition()==this.box.val().length){a.preventDefault();VS.app.searchBox.focusNextFacet(this,1,{selectFacet:true})}}else if(VS.app.hotkeys.shift&&b=="tab"){a.preventDefault();VS.app.searchBox.focusNextFacet(this,
+-1,{selectText:true})}else if(b=="tab"){a.preventDefault();b=this.box.val();if(b.length){var d=this.addTextFacetRemainder(b);VS.app.searchBox.addFacet(b,"",this.options.position+(d?1:0))}else VS.app.searchBox.focusNextFacet(this,0,{skipToFacet:true,selectText:true})}else if(VS.app.hotkeys.command&&String.fromCharCode(a.which).toLowerCase()=="a"){a.preventDefault();VS.app.searchBox.selectAllFacets();return false}else if(b=="backspace"&&!VS.app.searchBox.allSelected())if(this.box.getCursorPosition()==
+0&&!this.box.getSelection().length){a.preventDefault();VS.app.searchBox.focusNextFacet(this,-1,{backspace:true});return false}this.box.trigger("resize.autogrow",a)}})})();(function(){var c=jQuery;Backbone.View.prototype.setMode=function(a,b){this.modes||(this.modes={});if(this.modes[b]!==a){c(this.el).setMode(a,b);this.modes[b]=a}}})();
(function(){var c=jQuery;VS.app.hotkeys={KEYS:{"16":"shift","17":"control","91":"command","93":"command","224":"command","13":"enter","37":"left","38":"upArrow","39":"right","40":"downArrow","46":"delete","8":"backspace","9":"tab","188":"comma"},initialize:function(){_.bindAll(this,"down","up","blur");c(document).bind("keydown",this.down);c(document).bind("keyup",this.up)},down:function(a){if(a=this.KEYS[a.which])this[a]=true},up:function(a){if(a=this.KEYS[a.which])this[a]=false},blur:function(){for(var a in this.KEYS)this[this.KEYS[a]]=
false},key:function(a){return this.KEYS[a.which]},colon:function(a){return(a=a.which)&&String.fromCharCode(a)==":"},printable:function(a){var b=a.which;if(a.type=="keydown"){if(b==32||b>=48&&b<=90||b>=96&&b<=111||b>=186&&b<=192||b>=219&&b<=222)return true}else if(b>=32&&b<=126||b>=160&&b<=500||String.fromCharCode(b)==":")return true;return false}}})();
(function(){VS.utils.inflector={trim:function(c){return c.trim?c.trim():c.replace(/^\s+|\s+$/g,"")},escapeRegExp:function(c){return c.replace(/([.*+?^${}()|[\]\/\\])/g,"\\$1")}}})();
View
BIN build-min/visualsearch.js.gz
Binary file not shown.
View
BIN build-min/visualsearch_templates.js.gz
Binary file not shown.
View
39 build/visualsearch-datauri.css
@@ -141,14 +141,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
border-radius: 16px;
}
.VS-search .search_facet.is_selected {
- background-color: #CBD1F1;
- background-image: -moz-linear-gradient(top, #CBD1F1, #AFB5EC); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #CBD1F1, #AFB5EC); /* IE10 */
- background-image: -o-linear-gradient(top, #CBD1F1, #AFB5EC); /* Opera 11.10+ */
- background-image: -webkit-gradient(linear, left top, left bottom, from(#CBD1F1), to(#AFB5EC)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #CBD1F1, #AFB5EC); /* Chrome 10+, Saf5.1+ */
- background-image: linear-gradient(top, #CBD1F1, #AFB5EC);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#CBD1F1', EndColorStr='#AFB5EC'); /* IE6–IE9 */
+ background-color: #A7B9FF;
+ background-image: -moz-linear-gradient(top, #B0BCFF, #7489FF); /* FF3.6 */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#B0BCFF), to(#7489FF)); /* Saf4+, Chrome */
+ background-image: linear-gradient(top, #B0BCFF, #7489FF);
}
.VS-search .search_facet .category {
float: left;
@@ -172,7 +168,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
.VS-search .search_facet input {
margin: 0;
padding: 0;
- color: #505050;
+ color: #000;
font-size: 13px;
line-height: 16px;
padding: 6px 0 7px 4px;
@@ -189,7 +185,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
}
.VS-search .search_facet.is_editing input,
.VS-search .search_facet.is_selected input {
- color: #202020;
+ color: #000;
}
.VS-search .search_facet .search_facet_remove {
position: absolute;
@@ -235,9 +231,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
/* = Autocomplete = */
/* ================ */
-.ui-autocomplete {
+.VS-interface.ui-autocomplete {
position: absolute;
border: 1px solid #C0C0C0;
+ border-top: 1px solid #D9D9D9;
background-color: #F6F6F6;
cursor: pointer;
z-index: 10000;
@@ -249,10 +246,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
overflow-x: hidden;
font-size: 13px;
top: 1px;
- opacity: 0.97; filter: alpha(opacity=97);
+ opacity: 0.97;
box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5);
}
- .ui-autocomplete .ui-autocomplete-category {
+ .VS-interface.ui-autocomplete .ui-autocomplete-category {
text-transform: capitalize;
font-size: 11px;
padding: 4px 4px 4px;
@@ -264,38 +261,30 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
color: white;
cursor: default;
}
- .ui-autocomplete .ui-menu-item a {
+ .VS-interface.ui-autocomplete .ui-menu-item a {
outline: none;
display: block;
padding: 3px 4px 5px;
background-color: #F8F8F8;
background-image: -moz-linear-gradient(top, #F8F8F8, #F3F3F3); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #F8F8F8, #F3F3F3); /* IE10 */
- background-image: -o-linear-gradient(top, #F8F8F8, #F3F3F3); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F3F3F3)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #F8F8F8, #F3F3F3); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #F8F8F8, #F3F3F3);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F8F8F8', EndColorStr='#F3F3F3'); /* IE6–IE9 */
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #F2F2F2;
}
- .ui-autocomplete .ui-menu-item a:active {
+ .VS-interface.ui-autocomplete .ui-menu-item a:active {
outline: none;
}
- .ui-autocomplete .ui-menu-item .ui-state-hover {
+ .VS-interface.ui-autocomplete .ui-menu-item .ui-state-hover {
background-color: #6483F7;
background-image: -moz-linear-gradient(top, #6483F7, #2254F6); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #6483F7, #2254F6); /* IE10 */
- background-image: -o-linear-gradient(top, #6483F7, #2254F6); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#6483F7), to(#2254F6)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #6483F7, #2254F6); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #6483F7, #2254F6);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6483F7', EndColorStr='#2254F6'); /* IE6–IE9 */
border-top: 1px solid #5A7BEE;
border-bottom: 1px solid #1048EC;
color: white;
}
- .ui-autocomplete li {
+ .VS-interface.ui-autocomplete li {
list-style: none;
width: auto;
}
View
39 build/visualsearch.css
@@ -141,14 +141,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
border-radius: 16px;
}
.VS-search .search_facet.is_selected {
- background-color: #CBD1F1;
- background-image: -moz-linear-gradient(top, #CBD1F1, #AFB5EC); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #CBD1F1, #AFB5EC); /* IE10 */
- background-image: -o-linear-gradient(top, #CBD1F1, #AFB5EC); /* Opera 11.10+ */
- background-image: -webkit-gradient(linear, left top, left bottom, from(#CBD1F1), to(#AFB5EC)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #CBD1F1, #AFB5EC); /* Chrome 10+, Saf5.1+ */
- background-image: linear-gradient(top, #CBD1F1, #AFB5EC);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#CBD1F1', EndColorStr='#AFB5EC'); /* IE6–IE9 */
+ background-color: #A7B9FF;
+ background-image: -moz-linear-gradient(top, #B0BCFF, #7489FF); /* FF3.6 */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#B0BCFF), to(#7489FF)); /* Saf4+, Chrome */
+ background-image: linear-gradient(top, #B0BCFF, #7489FF);
}
.VS-search .search_facet .category {
float: left;
@@ -172,7 +168,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
.VS-search .search_facet input {
margin: 0;
padding: 0;
- color: #505050;
+ color: #000;
font-size: 13px;
line-height: 16px;
padding: 6px 0 7px 4px;
@@ -189,7 +185,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
}
.VS-search .search_facet.is_editing input,
.VS-search .search_facet.is_selected input {
- color: #202020;
+ color: #000;
}
.VS-search .search_facet .search_facet_remove {
position: absolute;
@@ -235,9 +231,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
/* = Autocomplete = */
/* ================ */
-.ui-autocomplete {
+.VS-interface.ui-autocomplete {
position: absolute;
border: 1px solid #C0C0C0;
+ border-top: 1px solid #D9D9D9;
background-color: #F6F6F6;
cursor: pointer;
z-index: 10000;
@@ -249,10 +246,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
overflow-x: hidden;
font-size: 13px;
top: 1px;
- opacity: 0.97; filter: alpha(opacity=97);
+ opacity: 0.97;
box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.5);
}
- .ui-autocomplete .ui-autocomplete-category {
+ .VS-interface.ui-autocomplete .ui-autocomplete-category {
text-transform: capitalize;
font-size: 11px;
padding: 4px 4px 4px;
@@ -264,38 +261,30 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
color: white;
cursor: default;
}
- .ui-autocomplete .ui-menu-item a {
+ .VS-interface.ui-autocomplete .ui-menu-item a {
outline: none;
display: block;
padding: 3px 4px 5px;
background-color: #F8F8F8;
background-image: -moz-linear-gradient(top, #F8F8F8, #F3F3F3); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #F8F8F8, #F3F3F3); /* IE10 */
- background-image: -o-linear-gradient(top, #F8F8F8, #F3F3F3); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F3F3F3)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #F8F8F8, #F3F3F3); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #F8F8F8, #F3F3F3);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F8F8F8', EndColorStr='#F3F3F3'); /* IE6–IE9 */
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #F2F2F2;
}
- .ui-autocomplete .ui-menu-item a:active {
+ .VS-interface.ui-autocomplete .ui-menu-item a:active {
outline: none;
}
- .ui-autocomplete .ui-menu-item .ui-state-hover {
+ .VS-interface.ui-autocomplete .ui-menu-item .ui-state-hover {
background-color: #6483F7;
background-image: -moz-linear-gradient(top, #6483F7, #2254F6); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #6483F7, #2254F6); /* IE10 */
- background-image: -o-linear-gradient(top, #6483F7, #2254F6); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#6483F7), to(#2254F6)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #6483F7, #2254F6); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #6483F7, #2254F6);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6483F7', EndColorStr='#2254F6'); /* IE6–IE9 */
border-top: 1px solid #5A7BEE;
border-bottom: 1px solid #1048EC;
color: white;
}
- .ui-autocomplete li {
+ .VS-interface.ui-autocomplete li {
list-style: none;
width: auto;
}
View
66 build/visualsearch.js
@@ -73,7 +73,8 @@ VS.ui.SearchBox = Backbone.View.extend({
events : {
'click .VS-cancel-search-box' : 'clearSearch',
'mousedown .VS-search-box' : 'focusSearch',
- 'dblclick .VS-search-box' : 'highlightSearch'
+ 'dblclick .VS-search-box' : 'highlightSearch',
+ 'click .VS-search-box' : 'maybeTripleClick'
},
// Creating a new SearchBox registers handlers for re-rendering facets when necessary,
@@ -234,7 +235,7 @@ VS.ui.SearchBox = Backbone.View.extend({
facetView.selectFacet();
});
- $(document).one('click', this.disableFacets);
+ $(document).one('click.selectAllFacets', this.disableFacets);
},
// Used by facets and input to see if all facets are currently selected.
@@ -246,15 +247,23 @@ VS.ui.SearchBox = Backbone.View.extend({
// Disables all facets except for the passed in view. Used when switching between
// facets, so as not to have to keep state of active facets.
disableFacets : function(keepView) {
+ _.each(this.inputViews, function(view) {
+ if (view != keepView &&
+ (view.modes.editing == 'is' || view.modes.selected == 'is')) {
+ view.blur();
+ }
+ });
_.each(this.facetViews, function(view) {
if (view != keepView &&
(view.modes.editing == 'is' || view.modes.selected == 'is')) {
view.disableEdit();
view.deselectFacet();
}
});
+
this.flags.allSelected = false;
this.removeFocus();
+ $(document).unbind('click.selectAllFacets');
},
// Resize all inputs to account for extra keystrokes which may be changing the facet
@@ -293,17 +302,18 @@ VS.ui.SearchBox = Backbone.View.extend({
var viewCount = this.facetViews.length;
var viewPosition = options.viewPosition || this.viewPosition(currentView);
- // Correct for bouncing between matching text and facet arrays.
if (!options.skipToFacet) {
+ // Correct for bouncing between matching text and facet arrays.
if (currentView.type == 'text' && direction > 0) direction -= 1;
if (currentView.type == 'facet' && direction < 0) direction += 1;
} else if (options.skipToFacet && currentView.type == 'text' &&
viewCount == viewPosition && direction >= 0) {
+ // Special case of looping around to a facet from the last search input box.
viewPosition = 0;
direction = 0;
}
var view, next = Math.min(viewCount, viewPosition + direction);
-
+
if (currentView.type == 'text' && next >= 0 && next < viewCount) {
view = this.facetViews[next];
if (options.selectFacet) {
@@ -356,11 +366,18 @@ VS.ui.SearchBox = Backbone.View.extend({
},
// Double-clicking on the search wrapper should select the existing text in
- // the last search input.
+ // the last search input. Also start the triple-click timer.
highlightSearch : function(e) {
+ var lastinput = this.inputViews[this.inputViews.length-1];
+ lastinput.startTripleClickTimer();
this.focusSearch(e, true);
},
+ maybeTripleClick : function(e) {
+ var lastinput = this.inputViews[this.inputViews.length-1];
+ return lastinput.maybeTripleClick(e);
+ },
+
// Used to show the user is focused on some input inside the search box.
addFocus : function() {
VS.options.callbacks.focus();
@@ -479,6 +496,7 @@ VS.ui.SearchFacet = Backbone.View.extend({
if (originalValue != ui.item.value || this.box.val() != ui.item.value) {
this.search(e);
}
+ VS.app.searchBox.focusNextFacet(this, 1, {viewPosition: this.options.order});
return false;
}, this)
});
@@ -502,10 +520,20 @@ VS.ui.SearchFacet = Backbone.View.extend({
}
},
// When a user enters a facet and it is being edited, immediately show
- // the autocomplete menu.
+ // the autocomplete menu and size it to match the contents.
searchAutocomplete : function(e) {
var autocomplete = this.box.data('autocomplete');
- if (autocomplete) autocomplete.search();
+ if (autocomplete) {
+ var menu = autocomplete.menu.element;
+ autocomplete.search();
+
+ // Resize the menu based on the correctly measured width of what's bigger:
+ // the menu's original size or the menu items' new size.
+ menu.outerWidth(Math.max(
+ menu.width('').outerWidth(),
+ autocomplete.element.outerWidth()
+ ));
+ }
},
// Closes the autocomplete menu. Called on disabling, selecting, deselecting,
@@ -570,14 +598,14 @@ VS.ui.SearchFacet = Backbone.View.extend({
}
this.flags.canClose = false;
- this.searchAutocomplete();
VS.app.searchBox.disableFacets(this);
VS.app.searchBox.addFocus();
_.defer(function() {
VS.app.searchBox.addFocus();
});
if (!this.box.is(':focus')) this.box.focus();
this.resize();
+ this.searchAutocomplete();
},
// When the user blurs the input, they may either be going to another input
@@ -618,8 +646,9 @@ VS.ui.SearchFacet = Backbone.View.extend({
// we attach a mouse/keyboard watcher to check if the next action by the user
// should delete this facet or just deselect it.
selectFacet : function() {
- this.flags.canClose = false;
var allSelected = VS.app.searchBox.allSelected();
+
+ this.flags.canClose = false;
if (!allSelected) {
VS.app.searchBox.disableFacets(this);
}
@@ -788,7 +817,9 @@ VS.ui.SearchInput = Backbone.View.extend({
events : {
'keypress input' : 'keypress',
- 'keydown input' : 'keydown'
+ 'keydown input' : 'keydown',
+ 'click input' : 'maybeTripleClick',
+ 'dblclick input' : 'startTripleClickTimer'
},
initialize : function() {
@@ -926,6 +957,21 @@ VS.ui.SearchInput = Backbone.View.extend({
this.setMode('not', 'selected');
},
+ // Starts a timer that will cause a triple-click, which highlights all facets.
+ startTripleClickTimer : function() {
+ this.tripleClickTimer = setTimeout(_.bind(function() {
+ this.tripleClickTimer = null;
+ }, this), 500);
+ },
+
+ maybeTripleClick : function(e) {
+ if (!!this.tripleClickTimer) {
+ e.preventDefault();
+ VS.app.searchBox.selectAllFacets();
+ return false;
+ }
+ },
+
isFocused : function() {
return this.box.is(':focus');
},
View
41 docs/search_box.html
@@ -7,7 +7,8 @@
<span class="nx">events</span> <span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .VS-cancel-search-box&#39;</span> <span class="o">:</span> <span class="s1">&#39;clearSearch&#39;</span><span class="p">,</span>
<span class="s1">&#39;mousedown .VS-search-box&#39;</span> <span class="o">:</span> <span class="s1">&#39;focusSearch&#39;</span><span class="p">,</span>
- <span class="s1">&#39;dblclick .VS-search-box&#39;</span> <span class="o">:</span> <span class="s1">&#39;highlightSearch&#39;</span>
+ <span class="s1">&#39;dblclick .VS-search-box&#39;</span> <span class="o">:</span> <span class="s1">&#39;highlightSearch&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;click .VS-search-box&#39;</span> <span class="o">:</span> <span class="s1">&#39;maybeTripleClick&#39;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Creating a new SearchBox registers handlers for re-rendering facets when necessary,
as well as handling typing when a facet is selected.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">flags</span> <span class="o">=</span> <span class="p">{</span>
@@ -125,23 +126,31 @@
<span class="nx">facetView</span><span class="p">.</span><span class="nx">selectFacet</span><span class="p">();</span>
<span class="p">});</span>
- <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">one</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">disableFacets</span><span class="p">);</span>
+ <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">one</span><span class="p">(</span><span class="s1">&#39;click.selectAllFacets&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">disableFacets</span><span class="p">);</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Used by facets and input to see if all facets are currently selected.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">allSelected</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">deselect</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">deselect</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">flags</span><span class="p">.</span><span class="nx">allSelected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">flags</span><span class="p">.</span><span class="nx">allSelected</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Disables all facets except for the passed in view. Used when switching between
facets, so as not to have to keep state of active facets.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">disableFacets</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">keepView</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">view</span> <span class="o">!=</span> <span class="nx">keepView</span> <span class="o">&amp;&amp;</span>
+ <span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">modes</span><span class="p">.</span><span class="nx">editing</span> <span class="o">==</span> <span class="s1">&#39;is&#39;</span> <span class="o">||</span> <span class="nx">view</span><span class="p">.</span><span class="nx">modes</span><span class="p">.</span><span class="nx">selected</span> <span class="o">==</span> <span class="s1">&#39;is&#39;</span><span class="p">))</span> <span class="p">{</span>
+ <span class="nx">view</span><span class="p">.</span><span class="nx">blur</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="p">});</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">facetViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">view</span> <span class="o">!=</span> <span class="nx">keepView</span> <span class="o">&amp;&amp;</span>
<span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">modes</span><span class="p">.</span><span class="nx">editing</span> <span class="o">==</span> <span class="s1">&#39;is&#39;</span> <span class="o">||</span> <span class="nx">view</span><span class="p">.</span><span class="nx">modes</span><span class="p">.</span><span class="nx">selected</span> <span class="o">==</span> <span class="s1">&#39;is&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">view</span><span class="p">.</span><span class="nx">disableEdit</span><span class="p">();</span>
<span class="nx">view</span><span class="p">.</span><span class="nx">deselectFacet</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">});</span>
+
<span class="k">this</span><span class="p">.</span><span class="nx">flags</span><span class="p">.</span><span class="nx">allSelected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeFocus</span><span class="p">();</span>
+ <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s1">&#39;click.selectAllFacets&#39;</span><span class="p">);</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Resize all inputs to account for extra keystrokes which may be changing the facet
width incorrectly. This is a safety check to ensure inputs are correctly sized.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">resizeFacets</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
@@ -171,16 +180,15 @@
<span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">viewCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">facetViews</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">viewPosition</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">viewPosition</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewPosition</span><span class="p">(</span><span class="nx">currentView</span><span class="p">);</span>
- </pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Correct for bouncing between matching text and facet arrays.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">skipToFacet</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">currentView</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;text&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">direction</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="nx">direction</span> <span class="o">-=</span> <span class="mi">1</span><span class="p">;</span>
+
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">skipToFacet</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Correct for bouncing between matching text and facet arrays.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">currentView</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;text&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">direction</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="nx">direction</span> <span class="o">-=</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">currentView</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;facet&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">direction</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> <span class="nx">direction</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">skipToFacet</span> <span class="o">&amp;&amp;</span> <span class="nx">currentView</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;text&#39;</span> <span class="o">&amp;&amp;</span>
- <span class="nx">viewCount</span> <span class="o">==</span> <span class="nx">viewPosition</span> <span class="o">&amp;&amp;</span> <span class="nx">direction</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">viewPosition</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
+ <span class="nx">viewCount</span> <span class="o">==</span> <span class="nx">viewPosition</span> <span class="o">&amp;&amp;</span> <span class="nx">direction</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Special case of looping around to a facet from the last search input box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">viewPosition</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">direction</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">view</span><span class="p">,</span> <span class="nx">next</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">viewCount</span><span class="p">,</span> <span class="nx">viewPosition</span> <span class="o">+</span> <span class="nx">direction</span><span class="p">);</span>
-
+
<span class="k">if</span> <span class="p">(</span><span class="nx">currentView</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;text&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">next</span> <span class="o">&gt;=</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">next</span> <span class="o">&lt;</span> <span class="nx">viewCount</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">view</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">facetViews</span><span class="p">[</span><span class="nx">next</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">selectFacet</span><span class="p">)</span> <span class="p">{</span>
@@ -208,7 +216,7 @@
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">selectText</span><span class="p">)</span> <span class="nx">view</span><span class="p">.</span><span class="nx">selectText</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">resizeFacets</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Bring focus to last input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">focusSearch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">selectText</span><span class="p">)</span> <span class="p">{</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Bring focus to last input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">focusSearch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">selectText</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span> <span class="o">||</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s1">&#39;.VS-search-box&#39;</span><span class="p">)</span> <span class="o">||</span>
@@ -228,20 +236,27 @@
<span class="p">},</span> <span class="k">this</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Double-clicking on the search wrapper should select the existing text in
-the last search input.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">highlightSearch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+ </pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Double-clicking on the search wrapper should select the existing text in
+the last search input. Also start the triple-click timer.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">highlightSearch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">lastinput</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">];</span>
+ <span class="nx">lastinput</span><span class="p">.</span><span class="nx">startTripleClickTimer</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">focusSearch</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Used to show the user is focused on some input inside the search box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFocus</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+
+ <span class="nx">maybeTripleClick</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">lastinput</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">];</span>
+ <span class="k">return</span> <span class="nx">lastinput</span><span class="p">.</span><span class="nx">maybeTripleClick</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
+ <span class="p">},</span>
+ </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Used to show the user is focused on some input inside the search box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFocus</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">callbacks</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.VS-search-box&#39;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;VS-focus&#39;</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>User is no longer focused on anything in the search box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeFocus</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>User is no longer focused on anything in the search box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeFocus</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">focus</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">any</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">facetViews</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">inputViews</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">view</span><span class="p">.</span><span class="nx">isFocused</span><span class="p">();</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">focus</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.VS-search-box&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;VS-focus&#39;</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Show a menu which adds pre-defined facets to the search box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showFacetCategoryMenu</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+ </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Show a menu which adds pre-defined facets to the search box.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showFacetCategoryMenu</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">facetCategoryMenu</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">facetCategoryMenu</span><span class="p">.</span><span class="nx">modes</span><span class="p">.</span><span class="nx">open</span> <span class="o">==</span> <span class="s1">&#39;is&#39;</span><span class="p">)</span> <span class="p">{</span>
View
50 docs/search_facet.html
@@ -64,6 +64,7 @@
<span class="k">if</span> <span class="p">(</span><span class="nx">originalValue</span> <span class="o">!=</span> <span class="nx">ui</span><span class="p">.</span><span class="nx">item</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">!=</span> <span class="nx">ui</span><span class="p">.</span><span class="nx">item</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
+ <span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">focusNextFacet</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="p">{</span><span class="nx">viewPosition</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">order</span><span class="p">});</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">},</span> <span class="k">this</span><span class="p">)</span>
<span class="p">});</span>
@@ -84,15 +85,23 @@
<span class="p">});</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>When a user enters a facet and it is being edited, immediately show
-the autocomplete menu.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">searchAutocomplete</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+the autocomplete menu and size it to match the contents.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">searchAutocomplete</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">autocomplete</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;autocomplete&#39;</span><span class="p">);</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">autocomplete</span><span class="p">)</span> <span class="nx">autocomplete</span><span class="p">.</span><span class="nx">search</span><span class="p">();</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">autocomplete</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">menu</span> <span class="o">=</span> <span class="nx">autocomplete</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">element</span><span class="p">;</span>
+ <span class="nx">autocomplete</span><span class="p">.</span><span class="nx">search</span><span class="p">();</span>
+ </pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Resize the menu based on the correctly measured width of what's bigger:
+the menu's original size or the menu items' new size.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">menu</span><span class="p">.</span><span class="nx">outerWidth</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span>
+ <span class="nx">menu</span><span class="p">.</span><span class="nx">width</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">(),</span>
+ <span class="nx">autocomplete</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">outerWidth</span><span class="p">()</span>
+ <span class="p">));</span>
+ <span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Closes the autocomplete menu. Called on disabling, selecting, deselecting,
+ </pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Closes the autocomplete menu. Called on disabling, selecting, deselecting,
and anything else that takes focus out of the facet's input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">closeAutocomplete</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">autocomplete</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;autocomplete&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">autocomplete</span><span class="p">)</span> <span class="nx">autocomplete</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Search terms used in the autocomplete menu. These are specific to the facet,
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Search terms used in the autocomplete menu. These are specific to the facet,
and only match for the facet's category. The values are then matched on the
first letter of any word in matches, and finally sorted according to the
value's own category.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">autocompleteValues</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">resp</span><span class="p">)</span> <span class="p">{</span>
@@ -117,16 +126,16 @@
<span class="k">else</span> <span class="k">return</span> <span class="nx">match</span><span class="p">;</span>
<span class="p">}));</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Sets the facet's model's value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">set</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
+ </pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Sets the facet's model's value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">set</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">value</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="s1">&#39;value&#39;</span><span class="o">:</span> <span class="nx">value</span><span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Before the searchBox performs a search, we need to close the
+ </pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Before the searchBox performs a search, we need to close the
autocomplete menu.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">search</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">closeAutocomplete</span><span class="p">();</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">searchEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Begin editing the facet's input. This is called when the user enters
+ </pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Begin editing the facet's input. This is called when the user enters
the input either from another facet or directly clicking on it. </p>
<p>This method tells all other facets and inputs to disable so it can have
@@ -140,16 +149,16 @@
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">flags</span><span class="p">.</span><span class="nx">canClose</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">searchAutocomplete</span><span class="p">();</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">disableFacets</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">addFocus</span><span class="p">();</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">defer</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">addFocus</span><span class="p">();</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">&#39;:focus&#39;</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">resize</span><span class="p">();</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">searchAutocomplete</span><span class="p">();</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>When the user blurs the input, they may either be going to another input
+ </pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>When the user blurs the input, they may either be going to another input
or off the search box entirely. If they go to another input, this facet
will be instantly disabled, and the canClose flag will be turned back off.</p>
@@ -164,7 +173,7 @@
<span class="p">}</span>
<span class="p">},</span> <span class="k">this</span><span class="p">),</span> <span class="mi">250</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>Called either by other facets receiving focus or by the timer in <code>deferDisableEdit</code>,
+ </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Called either by other facets receiving focus or by the timer in <code>deferDisableEdit</code>,
this method will turn off the facet, remove any text selection, and close
the autocomplete menu.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">disableEdit</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">newFacetQuery</span> <span class="o">=</span> <span class="nx">VS</span><span class="p">.</span><span class="nx">utils</span><span class="p">.</span><span class="nx">inflector</span><span class="p">.</span><span class="nx">trim</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">val</span><span class="p">());</span>
@@ -178,12 +187,13 @@
<span class="k">this</span><span class="p">.</span><span class="nx">closeAutocomplete</span><span class="p">();</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">removeFocus</span><span class="p">();</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Selects the facet, which blurs the facet's input and highlights the facet.
+ </pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>Selects the facet, which blurs the facet's input and highlights the facet.
If this is the only facet being selected (and not part of a select all event),
we attach a mouse/keyboard watcher to check if the next action by the user
should delete this facet or just deselect it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectFacet</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">flags</span><span class="p">.</span><span class="nx">canClose</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">allSelected</span> <span class="o">=</span> <span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">allSelected</span><span class="p">();</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">flags</span><span class="p">.</span><span class="nx">canClose</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">allSelected</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">disableFacets</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
@@ -206,7 +216,7 @@
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">addFocus</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>Turns off highlighting on the facet. Called in a variety of ways, this
+ </pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Turns off highlighting on the facet. Called in a variety of ways, this
only deselects the facet if it is selected, and then cleans up the
keyboard/mouse watchers that were created when the facet was first
selected.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deselectFacet</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -218,17 +228,17 @@
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s1">&#39;keydown.facet&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">keydown</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s1">&#39;click.facet&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">deselectFacet</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Is the user currently focused in this facet's input field?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isFocused</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ </pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>Is the user currently focused in this facet's input field?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isFocused</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">&#39;:focus&#39;</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>Hovering over the delete button styles the facet so the user knows that
+ </pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>Hovering over the delete button styles the facet so the user knows that
the delete button will kill the entire facet.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showDelete</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;search_facet_maybe_delete&#39;</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>On <code>mouseout</code>, the user is no longer hovering on the delete button.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideDelete</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ </pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>On <code>mouseout</code>, the user is no longer hovering on the delete button.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideDelete</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;search_facet_maybe_delete&#39;</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>When switching between facets, depending on the direction the cursor is
+ </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>When switching between facets, depending on the direction the cursor is
coming from, the cursor in this facet's input field should match the original
direction.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setCursorAtEnd</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">direction</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
@@ -237,7 +247,7 @@
<span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">setCursorPosition</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Deletes the facet and sends the cursor over to the nearest input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remove</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+ </pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Deletes the facet and sends the cursor over to the nearest input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remove</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">committed</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">deselectFacet</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">disableEdit</span><span class="p">();</span>
@@ -249,11 +259,11 @@
<span class="p">}</span>
<span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">searchBox</span><span class="p">.</span><span class="nx">focusNextFacet</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="p">{</span><span class="nx">viewPosition</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">order</span><span class="p">});</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Selects the text in the facet's input field. When the user tabs between
+ </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Selects the text in the facet's input field. When the user tabs between
facets, convention is to highlight the entire field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">selectText</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">selectRange</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">box</span><span class="p">.</span><span class="nx">val</span><span class="p">().</span><span class="nx">length</span><span class="p">);</span>
<span class="p">},</span>
- </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Handles all keyboard inputs when in the facet's input field. This checks
+ </pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>Handles all keyboard inputs when in the facet's input field. This checks
for movement between facets and inputs, entering a new value that needs
to be autocompleted, as well as the removal of this facet.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">keydown</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">VS</span><span class="p">.</span><span class="nx">app</span><span class="p">.</span><span class="nx">hotkeys</span><span class="p">.</span><span class="nx">key</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
View
21 docs/search_input.html
@@ -9,7 +9,9 @@
<span class="nx">events</span> <span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;keypress input&#39;</span> <span class="o">:</span> <span class="s1">&#39;keypress&#39;</span><span class="p">,</span>
- <span class="s1">&#39;keydown input&#39;</span> <span class="o">:</span> <span class="s1">&#39;keydown&#39;</span>
+ <span class="s1">&#39;keydown input&#39;</span> <span class="o">:</span> <span class="s1">&#39;keydown&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;click input&#39;</span> <span class="o">:</span> <span class="s1">&#39;maybeTripleClick&#39;</span><span class="p">,</span>
+ <span class="s1">&#39;dblclick input&#39;</span> <span class="o">:</span> <span class="s1">&#39;startTripleClickTimer&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -129,6 +131,19 @@
<span class="k">this</span><span class="p">.</span><span class="nx">setMode</span><span class="p">(</span><span class="s1">&#39;is&#39;</span><span class="p">,</span> <span class="s1">&#39;editing&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setMode</span><span class="p">(</span><span class="s1">&#39;not&#39;</span><span class="p">,</span> <span class="s1">&#39;selected&#39;</span><span class="p">);</span>
<span class="p">},</span>
+ </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Starts a timer that will cause a triple-click, which highlights all facets.</p> </td> <td class="code"> <div class="highlight"><pre> <span