From be2dd076a3d86b7d9d0fc6c4d496d0d504530b87 Mon Sep 17 00:00:00 2001 From: Artem Rymarchik Date: Fri, 5 Oct 2018 14:20:19 +0300 Subject: [PATCH] Added basic version of InstantSearch --- _layouts/docwithnav.html | 13 ++- css/instantsearch/instantsearch.min.css | 3 + css/search.css | 0 css/search.scss | 27 ++++++ js/instantsearch/instantsearch.min.js | 3 + js/searchConfig.js | 121 +++++++++++++++++++++--- 6 files changed, 152 insertions(+), 15 deletions(-) create mode 100644 css/instantsearch/instantsearch.min.css delete mode 100644 css/search.css create mode 100644 css/search.scss create mode 100644 js/instantsearch/instantsearch.min.js diff --git a/_layouts/docwithnav.html b/_layouts/docwithnav.html index 322f10c7f64..1fdf39807f8 100755 --- a/_layouts/docwithnav.html +++ b/_layouts/docwithnav.html @@ -49,9 +49,11 @@ + + diff --git a/css/instantsearch/instantsearch.min.css b/css/instantsearch/instantsearch.min.css new file mode 100644 index 00000000000..bae730aecd4 --- /dev/null +++ b/css/instantsearch/instantsearch.min.css @@ -0,0 +1,3 @@ +/*! instantsearch.js 2.7.1 | © Algolia Inc. and other contributors; Licensed MIT | github.com/algolia/instantsearch.js */ +@-webkit-keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.ais-search-box{position:relative;max-width:300px;width:100%}.ais-search-box--input{padding-left:24px;height:100%;width:100%}.ais-search-box--magnifier{top:4px;left:7px}.ais-search-box--magnifier svg{display:block}.ais-search-box--loading-indicator-wrapper,.ais-search-box--magnifier,.ais-search-box--reset{background:0 0;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ais-search-box--loading-indicator-wrapper{display:none;left:7px;top:4px}.ais-search-box--loading-indicator-wrapper svg,.ais-search-box--magnifier svg{vertical-align:middle;height:14px;width:14px}.ais-search-box--reset{cursor:pointer;top:5px;right:5px;margin:0;border:0;padding:0}.ais-search-box--reset svg{display:block;width:12px;height:12px}.ais-search-box--powered-by{font-size:.8em;text-align:right;margin-top:2px}.ais-search-box--powered-by-link{display:inline-block;width:45px;height:16px;text-indent:101%;overflow:hidden;white-space:nowrap;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-size:contain;vertical-align:middle}.ais-search-box.ais-stalled-search .ais-search-box--magnifier-wrapper{display:none}.ais-search-box.ais-stalled-search .ais-search-box--loading-indicator-wrapper{display:block}.sbx-sffv{display:inline-block;position:relative;width:100%;height:26px;white-space:nowrap;box-sizing:border-box;font-size:14px}.sbx-sffv__input,.sbx-sffv__wrapper{width:100%;height:100%}.sbx-sffv__input{display:inline-block;transition:box-shadow .4s ease,background .4s ease;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ccc;background:#fff;padding:0 20px 0 26px;vertical-align:middle;white-space:normal;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.sbx-sffv__input::-webkit-search-cancel-button,.sbx-sffv__input::-webkit-search-decoration,.sbx-sffv__input::-webkit-search-results-button,.sbx-sffv__input::-webkit-search-results-decoration{display:none}.sbx-sffv__input:hover{box-shadow:inset 0 0 0 1px #b3b3b3}.sbx-sffv__input:active,.sbx-sffv__input:focus{outline:0;box-shadow:inset 0 0 0 1px #337ab7;background:#fff}.sbx-sffv__input::-webkit-input-placeholder{color:#bbb}.sbx-sffv__input:-ms-input-placeholder,.sbx-sffv__input::-ms-input-placeholder{color:#bbb}.sbx-sffv__input::placeholder{color:#bbb}.sbx-sffv__submit{position:absolute;top:0;right:inherit;left:0;margin:0;border:0;border-radius:3px 0 0 3px;background-color:transparent;padding:0;width:26px;height:100%;vertical-align:middle;text-align:center;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sbx-sffv__submit::before{display:inline-block;margin-right:-4px;height:100%;vertical-align:middle;content:''}.sbx-sffv__submit:active,.sbx-sffv__submit:hover{cursor:pointer}.sbx-sffv__reset:focus,.sbx-sffv__submit:focus{outline:0}.sbx-sffv__submit svg{width:14px;height:14px;vertical-align:middle;fill:#337ab7}.sbx-sffv__reset{display:none;position:absolute;top:2px;right:2px;margin:0;border:0;background:0 0;cursor:pointer;padding:0;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:rgba(0,0,0,.5)}.sbx-sffv__reset svg{display:block;margin:4px;width:14px;height:14px}.sbx-sffv__input:valid~.sbx-sffv__reset{display:block;-webkit-animation-name:sbx-reset-in;animation-name:sbx-reset-in;-webkit-animation-duration:.15s;animation-duration:.15s}.ais-refinement-list--item em{font-style:normal;font-weight:700}.ais-pagination--item{display:inline-block;padding:3px}.ais-pagination--item__disabled{visibility:hidden}.ais-hierarchical-menu--list__lvl1,.ais-hierarchical-menu--list__lvl2{margin-left:10px}.ais-range-input--fieldset{margin:0;padding:0;border:0}.ais-range-input--labelMin{display:inline-block}.ais-range-input--inputMin{min-width:165px}.ais-range-input--inputMax:hover:disabled,.ais-range-input--inputMin:hover:disabled{cursor:not-allowed}.ais-range-input--separator{margin:0 5px}.ais-range-input--labelMax{display:inline-block}.ais-range-input--inputMax{min-width:165px}.ais-range-input--submit{margin-left:5px}.ais-range-input--submit:disabled,.ais-range-input--submit:hover:disabled{cursor:not-allowed;background-color:#c9c9c9}.ais-range-slider .ais-range-slider--disabled{cursor:not-allowed}.ais-range-slider .ais-range-slider--disabled .ais-range-slider--handle{border-color:#ddd;cursor:not-allowed}.ais-range-slider .ais-range-slider--disabled .rheostat-horizontal .rheostat-progress{background-color:#ddd}.ais-range-slider .rheostat{overflow:visible;margin-top:2em;margin-bottom:2em}.ais-range-slider .rheostat-background{background-color:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-left:2px solid #ddd;border-right:2px solid #ddd;position:relative}.ais-range-slider .rheostat-horizontal .rheostat-background{height:6px;top:0;width:100%}.ais-range-slider .rheostat-horizontal .rheostat-progress{background-color:#46aeda;position:absolute;height:4px;top:1px}.ais-range-slider .rheostat-horizontal .rheostat-handle{margin-left:-12px;top:-7px}.ais-range-slider .rheostat-horizontal .rheostat-handle .ais-range-slider--tooltip{text-align:center;margin-left:-10px;width:40px}.ais-range-slider .rheostat-horizontal .rheostat-handle::after,.ais-range-slider .rheostat-horizontal .rheostat-handle::before{top:7px;height:10px;width:1px}.ais-range-slider .rheostat-horizontal .rheostat-handle::before{left:10px}.ais-range-slider .rheostat-horizontal .rheostat-handle::after{left:13px}.ais-range-slider--handle{width:20px;height:20px;position:relative;z-index:1;background:#fff;border:1px solid #46aeda;border-radius:50%;cursor:pointer}.ais-range-slider--tooltip{position:absolute;background:#fff;top:-22px;font-size:.8em}.ais-range-slider--value{width:40px;position:absolute;text-align:center;margin-left:-20px;padding-top:15px;font-size:.8em}.ais-range-slider--marker{position:absolute;background:#ddd;margin-left:-1px;width:1px;height:5px}.ais-star-rating--item{vertical-align:middle}.ais-star-rating--item__active{font-weight:700}.ais-star-rating--star,.ais-star-rating--star__empty{display:inline-block;width:1em;height:1em}.ais-star-rating--star::before{content:'\2605';color:#fbae00}.ais-star-rating--star__empty::before{content:'\2606';color:#fbae00}.ais-star-rating--link__disabled .ais-star-rating--star::before,.ais-star-rating--link__disabled .ais-star-rating--star__empty::before{color:#c9c9c9}.ais-root__collapsible .ais-header{cursor:pointer}.ais-root__collapsed .ais-body,.ais-root__collapsed .ais-footer{display:none}.ais-breadcrumb--home,.ais-breadcrumb--label,.ais-breadcrumb--separator{display:inline;color:#3369e7}.ais-breadcrumb--item{display:inline}.ais-breadcrumb--disabledLabel{color:#444;display:inline}.ais-geo-search,.ais-geo-search--map{height:100%}.ais-geo-search--toggle-label{display:flex;align-items:center} +/*# sourceMappingURL=instantsearch.min.css.map */ \ No newline at end of file diff --git a/css/search.css b/css/search.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/css/search.scss b/css/search.scss new file mode 100644 index 00000000000..755e10fc055 --- /dev/null +++ b/css/search.scss @@ -0,0 +1,27 @@ +.search-container { + display: none; +} + +.ais-content { + color: #63676d; +} + +.ais-lvl0 { + color: black; + font-size: 1.1em +} + +.ais-result { + margin-bottom: 15px; + border-left: solid 1px #ddd; + padding-left: 10px; +} + +input:focus { + outline: none; +} + +.popover { + max-width: unset; + width: 500px; +} \ No newline at end of file diff --git a/js/instantsearch/instantsearch.min.js b/js/instantsearch/instantsearch.min.js new file mode 100644 index 00000000000..9cf7298a914 --- /dev/null +++ b/js/instantsearch/instantsearch.min.js @@ -0,0 +1,3 @@ +/*! instantsearch.js 2.7.1 | © Algolia Inc. and other contributors; Licensed MIT | github.com/algolia/instantsearch.js */ +!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports.instantsearch=t():e.instantsearch=t()}("undefined"!==typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=215)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function a(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t0}function s(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function u(e){return function(t,n){return t&&!n?e+"--"+t:t&&n?e+"--"+t+"__"+n:!t&&n?e+"__"+n:e}}function c(e){var t=e.transformData,n=e.defaultTemplates,r=e.templates,a=e.templatesConfig,i=l(n,r);return x({transformData:t,templatesConfig:a},i)}function l(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=(0,U.default)([].concat(a((0,I.default)(e)),a((0,I.default)(t))));return(0,C.default)(n,function(n,r){var a=e[r],i=t[r],o=void 0!==i&&i!==a;return n.templates[r]=o?i:a,n.useCustomCompileOptions[r]=o,n},{templates:{},useCustomCompileOptions:{}})}function f(e){var t=e.templates,n=e.templateKey,r=e.compileOptions,a=e.helpers,i=e.data,o=t[n],s="undefined"===typeof o?"undefined":S(o),u="string"===s,c="function"===s;if(!u&&!c)throw new Error("Template must be 'string' or 'function', was '"+s+"' (key: "+n+")");if(c)return o(i);var l=d(a,r,i);return K.default.compile(o,r).render(x({},i,{helpers:l}))}function d(e,t,n){return(0,Q.default)(e,function(e){return(0,W.default)(function(r){var a=this,i=function(e){return K.default.compile(e,t).render(a)};return e.call(n,r,i)})})}function p(e,t,n,r,a){var i={type:t,attributeName:n,name:r},o=(0,N.default)(a,{name:n}),s=void 0;if("hierarchical"===t){var u=e.getHierarchicalFacetByName(n),c=r.split(u.separator);i.name=c[c.length-1];for(var l=0;void 0!==o&&l2&&void 0!==arguments[2]&&arguments[2],r=e;return n&&(r=r.setQuery("")),(0,L.default)(t)?(r=r.clearTags(),r=r.clearRefinements()):((0,E.default)(t,function(e){r="_tags"===e?r.clearTags():r.clearRefinements(e)}),r)}function v(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];e.setState(m(e.state,t,n)).search()}function g(e,t){if(t)return(0,B.default)(t,function(t,n){return e+n})}function y(e){return"number"===typeof e&&e<0&&(e=String(e).replace(/^-/,"\\-")),e}function b(e){return String(e).replace(/^\\-/,"-")}function _(e,t){if(void 0===e||"function"!==typeof e)throw new Error(t)}function w(e){return"object"===("undefined"===typeof e?"undefined":S(e))&&null!==e&&e.$$typeof===$}function P(e,t){var n=!1;return function(){return n||(n=!0,console.warn("[InstantSearch.js]: "+t)),e.apply(void 0,arguments)}}function R(e){var t=e.match(J);if(!t)throw new Error('Invalid value for "aroundLatLng" parameter: "'+e+'"');return{lat:parseFloat(t[1]),lng:parseFloat(t[2])}}Object.defineProperty(t,"__esModule",{value:!0}),t.parseAroundLatLngFromString=t.deprecate=t.isReactElement=t.checkRendering=t.unescapeRefinement=t.escapeRefinement=t.prefixKeys=t.clearRefinementsAndSearch=t.clearRefinementsFromState=t.getRefinements=t.isDomElement=t.isSpecialClick=t.renderTemplate=t.prepareTemplateProps=t.bemHelper=t.getContainerNode=void 0;var S="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x=Object.assign||function(e){for(var t=1;t0;)n[r]=arguments[r+2];if(!g(e))return e;var a=e.attributes||e.props,i=Object(U.c)(e.nodeName||e.type,w({},a),e.children||a&&a.children),o=[i,t];return n&&n.length?o.push(n):t&&t.children&&o.push(t.children),m(U.b.apply(void 0,o))}function g(e){return e&&(e instanceof $||e.$$typeof===V)}function y(e,t){return t._refProxies[e]||(t._refProxies[e]=function(n){t&&t.refs&&(t.refs[e]=n,null===n&&(delete t._refProxies[e],t=null))})}function b(e){var t=e.nodeName,n=e.attributes;if(n&&"string"===typeof t){var r={};for(var a in n)r[a.toLowerCase()]=a;if(r.ondoubleclick&&(n.ondblclick=n[r.ondoubleclick],delete n[r.ondoubleclick]),r.onchange&&("textarea"===t||"input"===t.toLowerCase()&&!/^fil|che|rad/i.test(n.type))){var i=r.oninput||"oninput";n[i]||(n[i]=F([n[i],n[r.onchange]]),delete n[r.onchange])}}}function _(e){var t=e.attributes||(e.attributes={});re.enumerable="className"in t,t.className&&(t.class=t.className),Object.defineProperty(t,"className",re)}function w(e,t){for(var n=arguments,r=1,a=void 0;r0&&(n=d.default.createElement(t,u({},this.props,{depth:this.props.depth+1,facetValues:e.data})));var r=this.props.createURL(e.value),i=u({},e,{url:r,cssClasses:this.props.cssClasses}),o=(0,h.default)(this.props.cssClasses.item,a({},this.props.cssClasses.active,e.isRefined)),s=e.value;return void 0!==e.isRefined&&(s+="/"+e.isRefined),void 0!==e.count&&(s+="/"+e.count),d.default.createElement(b.default,{facetValueToRefine:e.value,handleClick:this.handleItemClick,isRefined:e.isRefined,itemClassName:o,key:s,subItems:n,templateData:i,templateKey:"item",templateProps:this.props.templateProps})}},{key:"handleItemClick",value:function(e){var t=e.facetValueToRefine,n=e.originalEvent,r=e.isRefined;if(!(0,m.isSpecialClick)(n)){if("INPUT"===n.target.tagName)return void this.refine(t,r);for(var a=n.target;a!==n.currentTarget;){if("LABEL"===a.tagName&&(a.querySelector('input[type="checkbox"]')||a.querySelector('input[type="radio"]')))return;"A"===a.tagName&&a.href&&n.preventDefault(),a=a.parentNode}n.stopPropagation(),this.refine(t,r)}}},{key:"componentWillReceiveProps",value:function(e){this.searchbox&&!e.isFromSearch&&this.searchbox.clearInput()}},{key:"refineFirstValue",value:function(){var e=this.props.facetValues[0];if(e){var t=e.value;this.props.toggleRefinement(t)}}},{key:"render",value:function(){var e=this,t=[this.props.cssClasses.list];this.props.cssClasses.depth&&t.push(""+this.props.cssClasses.depth+this.props.depth);var n=!0===this.props.showMore&&this.props.canToggleShowMore?d.default.createElement(g.default,u({rootProps:{onClick:this.props.toggleShowMore},templateKey:"show-more-"+(this.props.isShowingMore?"active":"inactive")},this.props.templateProps)):void 0,r=!0!==this.props.searchIsAlwaysActive&&!(this.props.isFromSearch||!this.props.hasExhaustiveItems),a=this.props.searchFacetValues?d.default.createElement(R.default,{ref:function(t){e.searchbox=t},placeholder:this.props.searchPlaceholder,onChange:this.props.searchFacetValues,onValidate:function(){return e.refineFirstValue()},disabled:r}):null,i=this.props.searchFacetValues&&this.props.isFromSearch&&0===this.props.facetValues.length?d.default.createElement(g.default,u({templateKey:"noResults"},this.props.templateProps)):null;return d.default.createElement("div",{className:(0,h.default)(t)},a,this.props.facetValues.map(this._generateFacetItem,this),i,n)}}]),t}(f.Component);O.defaultProps={cssClasses:{},depth:0},t.default=(0,x.default)((0,C.default)(O))},function(e,t,n){var r=n(222),a=n(6),i=Object.prototype,o=i.hasOwnProperty,s=i.propertyIsEnumerable,u=r(function(){return arguments}())?r:function(e){return a(e)&&o.call(e,"callee")&&!s.call(e,"callee")};e.exports=u},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"===typeof window&&(n=window)}e.exports=n},function(e,t,n){(function(e){var r=n(5),a=n(225),i="object"==typeof t&&t&&!t.nodeType&&t,o=i&&"object"==typeof e&&e&&!e.nodeType&&e,s=o&&o.exports===i,u=s?r.Buffer:void 0,c=u?u.isBuffer:void 0,l=c||a;e.exports=l}).call(t,n(79)(e))},function(e,t){function n(e,t){var n=typeof e;return!!(t=null==t?r:t)&&("number"==n||"symbol"!=n&&a.test(e))&&e>-1&&e%1==0&&e2?t[2]:void 0;for(c&&i(t[0],t[1],c)&&(r=1);++n1)for(var n=1;n was loaded but did not call our provided callback"),JSONPScriptError:a("JSONPScriptError","