├── .eslintrc
├── .gitignore
├── GETTING-STARTED.md
├── README.md
├── index.html
├── package.json
├── samples
    ├── blog
    │   ├── css
    │   │   └── algolia.css
    │   └── index.html
    └── ecommerce
    │   ├── css
    │       ├── index.css
    │       ├── material.css
    │       └── normalize.css
    │   └── index.html
├── src
    ├── components
    │   ├── BemHelper
    │   │   └── index.js
    │   ├── Facets
    │   │   ├── Conjunctive
    │   │   │   └── index.js
    │   │   ├── Disjunctive
    │   │   │   └── index.js
    │   │   ├── Slider
    │   │   │   └── index.js
    │   │   ├── TabMenu
    │   │   │   └── index.js
    │   │   ├── index.js
    │   │   └── order
    │   │   │   └── index.js
    │   ├── HitsSelector
    │   │   └── index.js
    │   ├── Hogan
    │   │   └── index.js
    │   ├── IndexSelector
    │   │   └── index.js
    │   ├── Intro
    │   │   └── index.js
    │   ├── Page
    │   │   └── index.js
    │   ├── Pagination
    │   │   ├── PaginationLink
    │   │   │   └── index.js
    │   │   ├── Paginator
    │   │   │   └── index.js
    │   │   └── index.js
    │   ├── Results
    │   │   ├── Result
    │   │   │   └── index.js
    │   │   └── index.js
    │   ├── SearchBox
    │   │   └── index.js
    │   └── SearchStats
    │   │   └── index.js
    ├── index.js
    └── setup
    │   ├── index.js
    │   └── url.js
└── todo.md


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "ecmaFeatures" : {
 3 |     "jsx" : true
 4 |   },
 5 |   "plugins" : [
 6 |     "react"
 7 |   ],
 8 |   "rules" : {
 9 |     "brace-style": [2, "stroustrup", { "allowSingleLine": true }],
10 |     "camelcase" : 1,
11 |     "comma-spacing": [2, {"before": false, "after": true}],
12 |     "comma-style": [2, "last"],
13 |     "consistent-return" : 2,
14 |     "consistent-this": [1, "self"],
15 |     "curly" : [2,"multi-line"],
16 |     "default-case": 1,
17 |     "eqeqeq": [2, "smart"],
18 |     "global-strict" : 0,
19 |     "indent": [2, 2, {"indentSwitchCase": true}],
20 |     "key-spacing" : [ 1, { "beforeColon" : true, "afterColon" : true } ],
21 |     "new-cap" : 2,
22 |     "no-extra-bind" : 1,
23 |     "no-multiple-empty-lines" : 1,
24 |     "no-multi-spaces": 1,
25 |     "no-else-return": 1,
26 |     "no-spaced-func": 1,
27 |     "no-trailing-spaces" : 2,
28 |     "no-underscore-dangle": 0,
29 |     "no-use-before-define": "nofunc",
30 |     "quotes" : [1, "double"],
31 |     "quotes" : [2, "double", "avoid-escape"],
32 |     "semi": 2,
33 |     "space-before-blocks": 1,
34 |     "space-before-function-parentheses": [1, "never"],
35 |     "space-infix-ops": 1,
36 |     "space-in-parens": [1, "always"],
37 |     "strict" : [2, "global"]
38 |   },
39 |   "globals" : {
40 |     "module" : true,
41 |     "require" : true,
42 |     "document" : true
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 | 
22 | # Dependency directory
23 | # Commenting this out is preferred by some people, see
24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
25 | node_modules
26 | 
27 | # Users Environment Variables
28 | .lock-wscript
29 | 
30 | docs
31 | 
32 | # Build files
33 | dist/
34 | 


--------------------------------------------------------------------------------
/GETTING-STARTED.md:
--------------------------------------------------------------------------------
  1 | # Getting started with algolia UI kit
  2 | 
  3 | The algolia UI kit is intended to be used with Algolia and Algolia only. You
  4 | can create an account on https://www.algolia.com/users/sign_up
  5 | 
  6 | ## Build the project (real distribution is coming)
  7 | 
  8 |  - clone repo : `git clone https://github.com/algolia/algolia-ui-kit.git`
  9 |  - move into the repo : `cd algolia-ui-kit`
 10 |  - download the dependencies : `npm install`
 11 |  - build the minified version : `npm run build:js`
 12 | 
 13 | The minified version is in dist/algolia-ui-kit.min.js.
 14 | 
 15 | ## Bootstrap page
 16 | 
 17 | ### Starting from scratch
 18 | 
 19 |  - Create a new HTML page
 20 |  - Import the minified algolia-ui-kit file (see dist/algolia-ui-kit.min.js)
 21 | 
 22 | ### Starting from an existing project
 23 | 
 24 |  - Import the minified algolia-ui-kit file (see dist/algolia-ui-kit.min.js)
 25 | 
 26 | ## Configure index
 27 | 
 28 | In order for the UI-kit to work, you need to provide informations about where
 29 | it should fetch the data from (eg. the index you want to use for your application)
 30 | 
 31 | This configuration needs to set on the body of the document with those keys :
 32 |  - data-algolia-key : the public search key of your index ( see https://www.algolia.com/licensing )
 33 |  - data-algolia-app-id : the id of your application ( see https://www.algolia.com/licensing )
 34 |  - data-algolia-index : the name of the index you want to target ( see https://www.algolia.com/explorer )
 35 | 
 36 | The markup should look like : 
 37 | 
 38 | ```html
 39 | <html>
 40 |   ...
 41 |   <body data-algolia-app-id="latency"
 42 |         data-algolia-key="6be0576ff61c053d5f9a3225e2a90f76"
 43 |         data-algolia-index="bestbuy">
 44 |   ...
 45 |   </body>
 46 | </html>
 47 | ```
 48 | 
 49 | ## The search results
 50 | 
 51 | The results component let you specify how the search results will be displayed.
 52 | This is a mandatory component.
 53 | 
 54 | ### Configuration
 55 | 
 56 | This component is configured by creating an empty div element that will hold
 57 | the rendered results. 
 58 | 
 59 | There are 3 parameters to configure on this component :
 60 |  - the number of items to retrieve : data-hits-per-page
 61 |  - the template used to render a single result : data-hit-template
 62 |  - the template used when there is no results to display : data-no-results-template
 63 | 
 64 | How the results are displayed can be customized by using templates (attribute
 65 | data-hits-template on the div). This template will receive a single "hit" or
 66 | "result" from the list of results retrieved from Algolia. The template is 
 67 | specified by giving the css selectors to the element that contains the template.
 68 | The template should be written using Hogan implementation of Mustache.
 69 | 
 70 | If no results are returned from the query, the content displayed can also be
 71 | specified with a template (attribute data-no-results-template). Similarly configured
 72 | this template will be rendered once and will receive the whole algolia results
 73 | object.
 74 | 
 75 | ```html
 76 | <div class="algolia-magic result-items"
 77 |      data-no-results-template="#no-results-template"
 78 |      data-hit-template="#hit-template"
 79 |      data-hits-per-page="5"></div>
 80 | ```
 81 | 
 82 | ### Template
 83 | 
 84 | The templating system behind is Hogan.js. It's an implementation of Mustache
 85 | built by Twitter.
 86 | 
 87 | ## Search box
 88 | 
 89 | The search box is the main entry for your users in the search. When a key is hit
 90 | then the query is updated and sent to the server. The results of this query is
 91 | then feed back to the results component.
 92 | 
 93 | ### Configuration
 94 | 
 95 | The search box is defined with a div element with the classes "algolia-magic" and
 96 | "search-box". It has option only one option data-placeholder which defines the
 97 | value indicating to your user what they should search for.
 98 | 
 99 | ```html
100 | <div class="algolia-magic-search-box" data-placeholder="Search for products!"></div>
101 | ```
102 | 
103 | ## Pagination
104 | 
105 | Results are returned by page with respect to the hits per page parameter from
106 | the results component. In order to browse those pages, a search needs a pager
107 | or paginator.
108 | 
109 | ### Configuration
110 | 
111 | The paginator is described by a div element with the classes "algolia-magic" and
112 | "pagination". The only parameter of this component is the number of items "around"
113 | the selected page : **data-padding**.
114 | 
115 | ```html
116 | <div class="algolia-magic pagination" data-padding="3"></div>
117 | ```
118 | 
119 | ## Facets
120 | 
121 | Facets are the attributes we can use to do some filtering over the results. By
122 | default, none are provided on an index. The good news is that they can be easily
123 | added from the administration website https://www.algolia.com/explorer#?tab=display
124 | 
125 | Once configured those facets can be used to display some filtering components.
126 | Algolia UI kit currently supports :
127 |  - list of facets
128 |  - list of disjunctive facets (advanced facets that can be combine)
129 |  - tab list (used for facetting sub categories)
130 |  - slider (for filtering on numeric values)
131 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 |  > Thanks for your interest in this project. We decided that the approach used in `algolia-ui-kit` (html markup based with magic) is not the best suited for our users, therefore we created       [instantsearch.js](https://github.com/algolia/instantsearch.js). Let us know if you like the new project.
 2 |  
 3 |  
 4 | UI Design Kit (Figma)
 5 | ---------------------------
 6 | You've been looking the the UI Design Kit (Figma) and landed on this page, just follow this link to get back on the right track.
 7 | https://www.algolia.com/doc/guides/building-search-ui/resources/ui-kit/js/
 8 |  
 9 | ![image](https://user-images.githubusercontent.com/1101220/183423931-57e27b89-26b7-4e56-9590-dafc50e01695.png)
10 | 
11 | 
12 | 
13 | 
14 | DEPRECATED - Algolia Kite
15 | =============================
16 | 
17 | Algolia UI-kit Kite is a UI framework to build in minutes a fresh user experience.
18 | 
19 | This project is NOT FOR PROD and also not maintained anymore :) Have a look at [instantsearch.js](https://github.com/algolia/instantsearch.js) if you want javascript widgets for Algolia.
20 | 
21 | What is the algolia UI-kit?
22 | ---------------------------
23 | 
24 | It is UI framework based on a state of the art architecture with ease of use as
25 | the key feature.
26 | 
27 | It uses DOM tagging features (classes and data attributes) for the configuration
28 | and leverages React for displaying the UI. You are not forced to use React
29 | yourself to use this UI kit. In fact, since the whole glue is made internally,
30 | you should consider using the component raw if you are already using React.
31 | 
32 | Why should I bother?
33 | --------------------
34 | 
35 | ### Easy
36 | 
37 | After importing your data in Algolia, you can configure a whole new algolia
38 | search experience in only 3 steps : 
39 |  - add the script at the bottom of your page
40 |  - add components and configurations directly in your HTML with only DOM classes
41 |    and data attributes
42 |  - reload your page!
43 | 
44 | The kit is auto loaded and will automatically read the configuration.
45 | 
46 | ### Fast
47 | 
48 | Algolia UI-kit is built around two main components :
49 |  - React, the blazing fast view layer built by Facebook
50 |  - Algolia JS Helper v2, the search state managing layer on top of our raw API
51 | 
52 | It's not only fast during the execution time, we've made it so it is very easy
53 | to get and deploy.
54 | 
55 | How does it look?
56 | -----------------
57 | 
58 | ```html
59 | <!DOCTYPE HTML>
60 | <html lang="en">
61 | <head>
62 |   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
63 | </head>
64 | <body data-algolia-app-id="latency" data-algolia-key="6be0576ff61c053d5f9a3225e2a90f76" data-algolia-index="bestbuy">
65 |   <div class="container-fluid header">
66 |     <div class="header col-md-12">
67 |       <h1>YOUR search! <span class="powered-by">Powered by Algolia</span></h1>
68 |     </div>
69 |   </div>
70 |   <div class="container-fluid search-container">
71 |     <div class="search col-md-12">
72 |       <div class="algolia-magic search-box" data-placeholder="Search for an awesome product..."></div>
73 |     </div>
74 |     <div class="col-md-12">
75 |       <div class="algolia-magic result-items col-md-12" data-hit-template="#hit-template" data-hits-per-page="5"></div>
76 |       <div class="algolia-magic pagination col-md-12" data-padding="3"></div>
77 |     </div>
78 |   </div>
79 | </body>
80 | </html>
81 | ```
82 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title></title>
 6 | </head>
 7 | <body>
 8 |   <h1>Algolia UI-Kit</h1>
 9 |   <ul>
10 |     <li><a href="samples/blog/index.html">Blog</a></li>
11 |     <li><a href="samples/ecommerce/index.html">E-Commerce</a></li>
12 |   </ul>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "AlgoliasearchUIKit",
 3 |   "version": "1.0.0",
 4 |   "description": "Automagic kit for Algolia search",
 5 |   "main": "index.js",
 6 |   "author": "Algolia unicorn factory <hey@algolia.com>",
 7 |   "scripts": {
 8 |     "postinstall": "mkdir -p ./dist",
 9 |     "build:js": "NODE_ENV=production browserify -d src/index.js | uglifyjs -c warnings=false -m > dist/algoliasearch-ui-kit.min.js && gzip -k -f -9 dist/algoliasearch-ui-kit.min.js",
10 |     "watch:js": "watchify -v -d src/index.js -o dist/algoliasearch-ui-kit.js",
11 |     "serve": "static -z -a 0.0.0.0 ."
12 |   },
13 |   "browserify": {
14 |     "transform": [
15 |       "babelify",
16 |       "envify"
17 |     ]
18 |   },
19 |   "devDependencies": {
20 |     "babelify": "5.0.4",
21 |     "browserify": "9.0.3",
22 |     "envify": "3.4.0",
23 |     "eslint-plugin-react": "2.2.0",
24 |     "minifyify": "6.4.0",
25 |     "node-static": "0.7.6",
26 |     "uglifyjs": "2.4.10",
27 |     "watchify": "2.4.0"
28 |   },
29 |   "dependencies": {
30 |     "algoliasearch": "3.1.x",
31 |     "algoliasearch-helper": "2.0.4",
32 |     "classnames": "2.1.1",
33 |     "hogan.js": "3.0.2",
34 |     "lodash": "3.5.0",
35 |     "qs": "2.4.2",
36 |     "react": "0.13.1",
37 |     "react-dropdown-button": "1.0.11",
38 |     "react-slider": "0.4.2"
39 |   },
40 |   "license": "MIT"
41 | }
42 | 


--------------------------------------------------------------------------------
/samples/blog/css/algolia.css:
--------------------------------------------------------------------------------
 1 | input[type="text"].algolia-magic-search-box--input,
 2 | .algolia-magic-search-box--input {
 3 |   padding: 10px 42px;
 4 |   display: inline-block;
 5 |   border-radius: 20px;
 6 |   border: solid 1px #ccc;
 7 |   background: #FFF;
 8 | }
 9 | input[type="text"].algolia-magic-search-box--input:focus,
10 | .algolia-magic-search-box--input:focus {
11 |   border: solid 1px #2897C5;
12 |   outline: 0;
13 |   box-shadow: none;
14 |   background:none;
15 | }
16 | 
17 | 
18 | .algolia-magic-tab-menu {
19 |   width:100%;
20 | }
21 | .algolia-magic-tab-menu--item {
22 |   font-size: 1.1em;
23 |   margin-right: 14px;
24 |   display: inline-block;
25 |   cursor:pointer;
26 | }
27 | .algolia-magic-tab-menu--item__active {
28 |   font-weight: bold;
29 |   border-bottom: solid 2px #2897C5;
30 |   line-height: 24px;
31 | }
32 | .algolia-magic-tab-menu--count {
33 |   padding-left: 4px;
34 |   font-size: .9em;
35 |   color: #aaa;
36 |   font-weight: 400;
37 | }
38 | 


--------------------------------------------------------------------------------
/samples/blog/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <!--[if lt IE 7]><html lang="en-GB" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
  4 | <!--[if (IE 7)&!(IEMobile)]><html lang="en-GB" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" class="no-js lt-ie9 lt-ie8"><![endif]-->
  5 | <!--[if (IE 8)&!(IEMobile)]><html lang="en-GB" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" class="no-js lt-ie9"><![endif]-->
  6 | <!--[if gt IE 8]><!-->
  7 | <html lang="en-GB" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" class="no-js">
  8 | <!--<![endif]-->
  9 | 
 10 | <head>
 11 |   <meta charset="utf-8">
 12 | 
 13 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 14 | 
 15 |   <title>Milliseconds Matter The Official Algolia Blog</title>
 16 | 
 17 |   <meta name="HandheldFriendly" content="True">
 18 |   <meta name="MobileOptimized" content="320">
 19 |   <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75" />
 20 | 
 21 |   <link rel="apple-touch-icon" href="https://blog.algolia.com/wp-content/themes/algolia/library/images/apple-touch-icon.png">
 22 |   <link rel="icon" href="https://blog.algolia.com/wp-content/themes/algolia/favicon.png">
 23 |   <!--[if IE]>
 24 | 			<link rel="shortcut icon" href="https://blog.algolia.com/wp-content/themes/algolia/favicon.ico">
 25 | 		<![endif]-->
 26 |   <meta name="msapplication-TileColor" content="#f01d4f">
 27 |   <meta name="msapplication-TileImage" content="https://blog.algolia.com/wp-content/themes/algolia/library/images/win8-tile-icon.png">
 28 |   <meta name="theme-color" content="#121212">
 29 | 
 30 |   <link rel="pingback" href="https://blog.algolia.com/xmlrpc.php">
 31 | 
 32 |   <link rel="alternate" type="application/rss+xml" title="Milliseconds Matter &raquo; Feed" href="https://blog.algolia.com/feed/" />
 33 |   <link rel="alternate" type="application/rss+xml" title="Milliseconds Matter &raquo; Comments Feed" href="https://blog.algolia.com/comments/feed/" />
 34 |   <script type="text/javascript">
 35 |     window._wpemojiSettings = {
 36 |       "baseUrl": "https:\/\/s.w.org\/images\/core\/emoji\/72x72\/",
 37 |       "ext": ".png",
 38 |       "source": {
 39 |         "concatemoji": "https:\/\/blog.algolia.com\/wp-includes\/js\/wp-emoji-release.min.js"
 40 |       }
 41 |     };
 42 |     ! function(a, b, c) {
 43 |       function d(a) {
 44 |         var c = b.createElement("canvas"),
 45 |           d = c.getContext && c.getContext("2d");
 46 |         return d && d.fillText ? (d.textBaseline = "top", d.font = "600 32px Arial", "flag" === a ? (d.fillText(String.fromCharCode(55356, 56812, 55356, 56807), 0, 0), c.toDataURL().length > 3e3) : (d.fillText(String.fromCharCode(55357, 56835), 0, 0), 0 !== d.getImageData(16, 16, 1, 1).data[0])) : !1
 47 |       }
 48 | 
 49 |       function e(a) {
 50 |         var c = b.createElement("script");
 51 |         c.src = a, c.type = "text/javascript", b.getElementsByTagName("head")[0].appendChild(c)
 52 |       }
 53 |       var f, g;
 54 |       c.supports = {
 55 |         simple: d("simple"),
 56 |         flag: d("flag")
 57 |       }, c.DOMReady = !1, c.readyCallback = function() {
 58 |         c.DOMReady = !0
 59 |       }, c.supports.simple && c.supports.flag || (g = function() {
 60 |         c.readyCallback()
 61 |       }, b.addEventListener ? (b.addEventListener("DOMContentLoaded", g, !1), a.addEventListener("load", g, !1)) : (a.attachEvent("onload", g), b.attachEvent("onreadystatechange", function() {
 62 |         "complete" === b.readyState && c.readyCallback()
 63 |       })), f = c.source || {}, f.concatemoji ? e(f.concatemoji) : f.wpemoji && f.twemoji && (e(f.twemoji), e(f.wpemoji)))
 64 |     }(window, document, window._wpemojiSettings);
 65 |   </script>
 66 |   <style type="text/css">
 67 |     img.wp-smiley,
 68 |     img.emoji {
 69 |       display: inline !important;
 70 |       border: none !important;
 71 |       box-shadow: none !important;
 72 |       height: 1em !important;
 73 |       width: 1em !important;
 74 |       margin: 0 .07em !important;
 75 |       vertical-align: -0.1em !important;
 76 |       background: none !important;
 77 |       padding: 0 !important;
 78 |     }
 79 |   </style>
 80 |   <link rel="stylesheet" href='./css/algolia.css' />
 81 |   <link rel='stylesheet' id='jquery-ui-css' href='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/lib/jquery/jquery-ui.min.css' type='text/css' media='all' />
 82 |   <link rel='stylesheet' id='algolia_styles-css' href='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/themes/algolia/styles.css' type='text/css' media='all' />
 83 |   <link rel='stylesheet' id='mailchimp-for-wp-checkbox-css' href='https://blog.algolia.com/wp-content/plugins/mailchimp-for-wp/assets/css/checkbox.min.css' type='text/css' media='all' />
 84 |   <link rel='stylesheet' id='mailchimp-for-wp-form-css' href='https://blog.algolia.com/wp-content/plugins/mailchimp-for-wp/assets/css/form.min.css' type='text/css' media='all' />
 85 |   <link rel='stylesheet' id='bones-stylesheet-css' href='https://blog.algolia.com/wp-content/themes/algolia/library/css/style.css' type='text/css' media='all' />
 86 |   <!--[if lt IE 9]>
 87 | <link rel='stylesheet' id='bones-ie-only-css'  href='https://blog.algolia.com/wp-content/themes/algolia/library/css/ie.css' type='text/css' media='all' />
 88 | <![endif]-->
 89 |   <link rel='stylesheet' id='prettify-css' href='https://blog.algolia.com/wp-content/plugins/prettify-code-syntax/stylesheets/sons-of-obsidian.css' type='text/css' media='all' />
 90 |   <script type='text/javascript' src='https://blog.algolia.com/wp-includes/js/jquery/jquery.js'></script>
 91 |   <script type='text/javascript' src='https://blog.algolia.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>
 92 |   <script type='text/javascript'>
 93 |     /* <![CDATA[ */
 94 |     var settings = [];
 95 |     /* ]]> */
 96 |   </script>
 97 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/lib/jquery/jquery-ui.js'></script>
 98 |   <script type='text/javascript'>
 99 |     /* <![CDATA[ */
100 |     var settings = [];
101 |     /* ]]> */
102 |   </script>
103 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/lib/algolia/algoliasearch.min.js'></script>
104 |   <script type='text/javascript'>
105 |     /* <![CDATA[ */
106 |     var settings = [];
107 |     /* ]]> */
108 |   </script>
109 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/lib/hogan/hogan.js'></script>
110 |   <script type='text/javascript'>
111 |     /* <![CDATA[ */
112 |     var settings = [];
113 |     /* ]]> */
114 |   </script>
115 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/lib/typeahead/typeahead.js'></script>
116 |   <script type='text/javascript'>
117 |     /* <![CDATA[ */
118 |     var algoliaSettings = {
119 |       "app_id": "latency",
120 |       "search_key": "6be0576ff61c053d5f9a3225e2a90f76",
121 |       "indices": [{
122 |         "index_name": "wordpress_post",
123 |         "name": "post",
124 |         "order1": 0,
125 |         "order2": 0
126 |       }, {
127 |         "index_name": "wordpress_category",
128 |         "name": "",
129 |         "order1": 1,
130 |         "order2": "1"
131 |       }, {
132 |         "index_name": "wordpress_type",
133 |         "name": "type",
134 |         "order1": 1,
135 |         "order2": "2"
136 |       }, {
137 |         "index_name": "wordpress_post_tag",
138 |         "name": "Related tags",
139 |         "order1": 1,
140 |         "order2": "3"
141 |       }],
142 |       "sorting_indices": [{
143 |         "index_name": "wordpress_all_date_desc",
144 |         "label": "Newer First"
145 |       }],
146 |       "index_name": "wordpress_",
147 |       "type_of_search": "instant",
148 |       "instant_jquery_selector": ".algoliasearchcontainer",
149 |       "facets": [{
150 |         "tax": "category",
151 |         "name": "",
152 |         "order": "1",
153 |         "type": "menu"
154 |       }, {
155 |         "tax": "post_tag",
156 |         "name": "Related tags",
157 |         "order": "3",
158 |         "type": "conjunctive"
159 |       }],
160 |       "number_by_type": "2",
161 |       "number_by_page": "12",
162 |       "search_input_selector": "[name='s']",
163 |       "facetsLabels": {
164 |         "post": "Article",
165 |         "page": "Page"
166 |       },
167 |       "plugin_url": "https:\/\/blog.algolia.com\/wp-content\/plugins\/algoliasearch-wordpress-master\/",
168 |       "theme": {
169 |         "dir": "algolia",
170 |         "name": "New Algolia",
171 |         "screenshot": "https:\/\/blog.algolia.com\/wp-content\/plugins\/algoliasearch-wordpress-master\/core\/..\/themes\/algolia\/screenshot.png",
172 |         "screenshot_autocomplete": "https:\/\/blog.algolia.com\/wp-content\/plugins\/algoliasearch-wordpress-master\/core\/..\/themes\/algolia\/screenshot.png",
173 |         "description": "",
174 |         "facet_types": {
175 |           "menu": "Menu"
176 |         }
177 |       }
178 |     };
179 |     /* ]]> */
180 |   </script>
181 |   <!-- <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/front/main.js'></script> -->
182 |   <script type='text/javascript'>
183 |     /* <![CDATA[ */
184 |     var themesSettings = [];
185 |     /* ]]> */
186 |   </script>
187 |   <!-- <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/algoliasearch-wordpress-master/themes/algolia/theme.js'></script> -->
188 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/themes/algolia/library/js/libs/modernizr.custom.min.js'></script>
189 |   <style type='text/css'>
190 |     @media (max-width: 640px) {
191 |       #crestashareicon {
192 |         display: none !important;
193 |       }
194 |     }
195 | 
196 |     #crestashareicon {
197 |       position: fixed;
198 |       top: 25%;
199 |       right: 20px;
200 |       float: left;
201 |       z-index: 99;
202 |     }
203 | 
204 |     #crestashareicon .sbutton {
205 |       clear: both;
206 |       display: none;
207 |     }
208 | 
209 |     #crestashareicon .sbutton {
210 |       float: right;
211 |     }
212 | 
213 |     #crestashareiconincontent {
214 |       float: none;
215 |       margin: 0 auto;
216 |       display: table;
217 |     }
218 |   </style>
219 |   <style type="text/css" id="custom-background-css">
220 |     body.custom-background {
221 |       background-color: #ffffff;
222 |     }
223 |   </style>
224 |   <style type="text/css">
225 |     .mc4wp-form input[name="_mc4wp_required_but_not_really"] {
226 |       display: none !important;
227 |     }
228 |   </style>
229 |   <!-- START - Facebook Open Graph, Google+ and Twitter Card Tags 1.5.2 -->
230 |   <meta property="og:locale" content="en_GB" />
231 |   <meta property="og:site_name" content="Milliseconds Matter" />
232 |   <meta property="og:title" content="Milliseconds Matter" />
233 |   <meta itemprop="name" content="Milliseconds Matter" />
234 |   <meta name="twitter:title" content="Milliseconds Matter" />
235 |   <meta property="og:url" content="https://blog.algolia.com/" />
236 |   <meta name="twitter:url" content="https://blog.algolia.com/" />
237 |   <meta property="og:type" content="blog" />
238 |   <meta name="twitter:site" content="@algolia" />
239 |   <meta property="og:description" content="The Official Algolia Blog" />
240 |   <meta itemprop="description" content="The Official Algolia Blog" />
241 |   <meta name="twitter:description" content="The Official Algolia Blog" />
242 |   <meta name="twitter:card" content="summary_large_image" />
243 |   <!-- END - Facebook Open Graph, Google+ and Twitter Card Tags -->
244 | 
245 | 
246 | </head>
247 | 
248 | <body class="home blog custom-background" itemscope itemtype="http://schema.org/WebPage" data-algolia-app-id="latency" data-algolia-key="6be0576ff61c053d5f9a3225e2a90f76" data-algolia-index="wordpress_all">
249 | 
250 | 
251 |   <div id="container">
252 | 
253 |     <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">
254 | 
255 |       <div id="inner-header" class="wrap cf">
256 |         <ul id="links">
257 |           <li><a href="https://www.algolia.com/jobs">Jobs</a></li>
258 |           <li><a class="btn-primary" href="https://www.algolia.com/">Go to algolia.com</a></li>
259 |         </ul>
260 |         <a id="logo" href="/"><img src="https://d3ibatyzauff7b.cloudfront.net/assets/algolia256x80_dark.png" width="130" alt="algolia" /></a>
261 |         <p id="title" class="h1" itemscope itemtype="http://schema.org/Organization"><a href="https://blog.algolia.com" rel="nofollow">Milliseconds Matter</a></p>
262 | 
263 |         <p id="tagline">The Official Algolia Blog</p>
264 | 
265 | 
266 |         <nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
267 | 
268 |         </nav>
269 | 
270 |       </div>
271 | 
272 |     </header>
273 | 
274 |     <div id="content">
275 |       <div id="inner-content" class="wrap cf">
276 | 
277 |         <div id="search-input-wrapper">
278 |           <div class="algolia-magic-search-box" data-placeholder="Search for post, author, tag, ..."></div>
279 |         </div>
280 | 
281 |         <main id="main" class="wrap cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
282 | 
283 |           <div class="algolia-magic-tab-menu" data-algolia-facet-name="category"></div>
284 | 
285 |           <div class="algolia-magic result-items cf" data-hit-template="#hit-template" data-hits-per-page="15"></div>
286 | 
287 |           <script type="text/html" id="hit-template">
288 |             <div class="d-1of3 t-1of2">
289 |                 <article class="grid-entry grid-entry--columns">
290 |                     <header class="article-header">
291 |                         <a href="{{permalink}}"><img class="entry-illus" src="{{featureImage.sizes.medium.file}}"/></a>
292 |                         <h1 class="h3 entry-title"><a href="{{permalink}}">{{{ _highlightResult.title.value }}}</a></h1>
293 |                     </header>
294 |                 </article>
295 |             </div>
296 |           </script>
297 | 
298 | 
299 |           <div class="algolia-pagination">PAGINATION</div>
300 |         </main>
301 | 
302 |         <section id="suscribe-newsletter" class="cf">
303 |           <!-- Form by MailChimp for WordPress plugin v2.2.9 - https://mc4wp.com/ -->
304 |           <div id="mc4wp-form-1" class="form mc4wp-form">
305 |             <form method="post">
306 |               <div class="cf">
307 |                 <h2 class="cta-title h1">Want to learn how to build a search experience that delights your users?</h2>
308 | 
309 |                 <p class="cta-tagline">We'll show you how!</p>
310 | 
311 |                 <input type="email" id="mc4wp_email" name="EMAIL" placeholder="you@email.com" />
312 | 
313 |                 <button type="submit">Subscribe to Newsletter</button>
314 | 
315 |               </div>
316 |               <input type="text" name="_mc4wp_required_but_not_really" value="" />
317 |               <input type="hidden" name="_mc4wp_timestamp" value="1431445015" />
318 |               <input type="hidden" name="_mc4wp_form_submit" value="1" />
319 |               <input type="hidden" name="_mc4wp_form_instance" value="1" />
320 |               <input type="hidden" name="_mc4wp_form_nonce" value="511a3589d6" />
321 |             </form>
322 |           </div>
323 |           <!-- / MailChimp for WP Plugin -->
324 |         </section>
325 | 
326 |       </div>
327 | 
328 |     </div>
329 | 
330 |     <footer class="footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter">
331 | 
332 |       <div id="inner-footer" class="wrap cf">
333 | 
334 |         <a class="footer-logo" href="https://www.algolia.com">
335 |           <img src="https://d3ibatyzauff7b.cloudfront.net/assets/algolia256x80_dark.png" width="150" alt="algolia" />
336 |         </a>
337 | 
338 |         <p class="footer-tagline">We make instant and relevant search.
339 |           <br> Easy for developers, delightful for the users.
340 |           <p>
341 | 
342 |             <ul class="social-links">
343 |               <li><a class="social-twitter" href="https://twitter.com/algolia"><i class="icon-twitter"></i></a></li>
344 |               <li><a class="social-googleplus" href="https://plus.google.com/+Algolia"><i class="icon-google-plus"></i></a></li>
345 |               <li><a class="social-facebook" href="https://www.facebook.com/algolia"><i class="icon-facebook2"></i></a></li>
346 |               <li><a class="social-linkedin" href="https://www.linkedin.com/company/algolia"><i class="icon-linkedin2"></i></a></li>
347 |               <li><a class="social-github" href="https://github.com/Algolia"><i class="icon-github2"></i></a></li>
348 |             </ul>
349 | 
350 |             <!-- <p class="source-org copyright">&copy; 2015 Milliseconds Matter.</p> -->
351 | 
352 |       </div>
353 | 
354 |     </footer>
355 | 
356 |   </div>
357 | 
358 |   <script type="text/javascript">
359 |     (function() {
360 | 
361 |       function addSubmittedClass() {
362 |         var className = 'mc4wp-form-submitted';
363 |         (this.classList) ? this.classList.add(className): this.className += ' ' + className;
364 |       }
365 | 
366 |       var forms = document.querySelectorAll('.mc4wp-form');
367 |       for (var i = 0; i < forms.length; i++) {
368 |         (function(f) {
369 | 
370 |           // hide honeypot
371 |           var honeypot = f.querySelector('input[name="_mc4wp_required_but_not_really"]');
372 |           honeypot.style.display = 'none';
373 |           honeypot.setAttribute('type', 'hidden');
374 | 
375 |           // add class on submit
376 |           var b = f.querySelector('[type="submit"]');
377 |           if (b.addEventListener) {
378 |             b.addEventListener('click', addSubmittedClass.bind(f));
379 |           } else {
380 |             b.attachEvent('onclick', addSubmittedClass.bind(f));
381 |           }
382 | 
383 |         })(forms[i]);
384 |       }
385 |     })();
386 |   </script>
387 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/prettify-code-syntax/javascripts/prettify.js'></script>
388 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/prettify-code-syntax/javascripts/lang-css.js'></script>
389 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/plugins/prettify-code-syntax/javascripts/load.js'></script>
390 |   <script type='text/javascript' src='https://blog.algolia.com/wp-content/themes/algolia/library/js/scripts.js'></script>
391 |   <script src="../../dist/algoliasearch-ui-kit.js"></script>
392 | 
393 | </body>
394 | 
395 | </html>
396 | <!-- end of site. what a ride! -->
397 | 


--------------------------------------------------------------------------------
/samples/ecommerce/css/index.css:
--------------------------------------------------------------------------------
  1 | html, body, .app{ height: 100%}
  2 | hr {
  3 |   margin: 5px;
  4 | }
  5 | 
  6 | em {
  7 |   font-style : normal;
  8 |   text-decoration : underline;
  9 | }
 10 | 
 11 | a{
 12 |   color: #46AEDA;
 13 | }
 14 | 
 15 | .algolia-magic {
 16 |   opacity : 0;
 17 |   transition : opacity 500ms;
 18 | }
 19 | 
 20 | .algolia-magic.show{
 21 |   opacity : 1;
 22 | }
 23 | 
 24 | .header{
 25 |   display: block;
 26 |   background: rgb( 10, 24, 35 );
 27 |   color: #ECECE6;
 28 |   text-align: center;
 29 |   padding: 20px 0;
 30 | }
 31 | 
 32 | .app-name {
 33 |   font-size: 5em;
 34 | }
 35 | 
 36 | .tag-line{
 37 |   margin: -10px 0 10px;
 38 |   font-weight: lighter;
 39 |   color: #46AEDA;
 40 |   font-size: 2em;
 41 | }
 42 | 
 43 | .algolia{
 44 |   font-weight:normal;
 45 | }
 46 | 
 47 | .powered-by{
 48 |   font-size:small;
 49 |   font-weight:lighter;
 50 |   color:#558FE5;
 51 | }
 52 | 
 53 | .autocomplete-form {
 54 |   margin-top: 1em;
 55 |   margin-bottom: 1em;
 56 | }
 57 | 
 58 | .search-container {
 59 |   background : #12314A;
 60 |   margin: 0 0 2em 0;
 61 | }
 62 | .search{
 63 |   text-align:center;
 64 | }
 65 | 
 66 | .algolia-magic-search-box {
 67 |   margin : 0 auto;
 68 |   width: 100%;
 69 |   max-width : 600px;
 70 |   height: 2.4em;
 71 | }
 72 | 
 73 | .right{
 74 |   text-align: right;
 75 | }
 76 | 
 77 | .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
 78 |   color:#558FE5;
 79 | }
 80 | 
 81 | .list-group .list-group-item.active:hover, .list-group .list-group-item.active:focus{
 82 |   outline:none;
 83 | }
 84 | 
 85 | .pagination * {
 86 |   background: transparent !important;
 87 |   border: none !important;
 88 | }
 89 | 
 90 | .pagination a {
 91 |   color: black !important;
 92 | }
 93 | 
 94 | .pagination > .active > a {
 95 |   color : #46AED5 !important;
 96 |   font-weight : bold;
 97 | }
 98 | 
 99 | .disabled span{
100 |   color: lightgrey;
101 | }
102 | 
103 | .results-container{
104 |   height: 100%;
105 | }
106 | 
107 | .results nav {
108 |   text-align:center;
109 | }
110 | .result-items nav .pagination{
111 |   margin : 20px auto;
112 | }
113 | 
114 | .search-stats{
115 |   position: relative;
116 |   margin-bottom : 2em;
117 | }
118 | .search_stats_container > nav {
119 |   position: absolute;
120 |   top: 0;
121 |   right: 5px;
122 | }
123 | 
124 | .top_search_options{
125 |   margin-bottom: 2em;
126 | }
127 | .tag{
128 |   margin-right: 4px;
129 |   display : inline-block;
130 | }
131 | 
132 | .result{
133 | }
134 | .speaker-name{
135 |   font-size:2em;
136 |   margin-top : 0;
137 | }
138 | 
139 | .product-image{
140 |   max-width : 75px;
141 |   max-height: 90px;
142 |   margin-bottom : 15px;
143 | }
144 | 
145 | .speaker-session-title{
146 |   font-size:1.5em;
147 |   margin: 0;
148 | }
149 | 
150 | .speaker-sessions{
151 |   padding: 5px 20px;
152 | }
153 | 
154 | .form-control, .form-control:focus{
155 |   color:lightgrey;
156 |   background-image: linear-gradient(#46AEDA, #46AEDA), linear-gradient(#ddd, #ddd);
157 | }
158 | 
159 | .no-results {
160 |   text-align: center;
161 |   font-size : 20px;
162 | }
163 | 
164 | ::-webkit-input-placeholder { /* WebKit browsers */
165 |   color : #eee!important;
166 | }
167 | :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
168 |   color   : #eee!important;
169 |   opacity : 1;
170 | }
171 | ::-moz-placeholder { /* Mozilla Firefox 19+ */
172 |   color   : #eee!important;
173 |   opacity : 1;
174 | }
175 | :-ms-input-placeholder { /* Internet Explorer 10+ */
176 |   color : #eee!important;
177 | }
178 | 
179 | .horizontal-slider {
180 |   height: 50px;
181 | }
182 | 
183 | .horizontal-slider .bar {
184 |   top: 20px;
185 |   height: 10px;
186 |   background: #DAECFA;
187 | }
188 | 
189 | .horizontal-slider .bar-1 {
190 |   background : #246396;
191 | }
192 | 
193 | .horizontal-slider .handle {
194 |   top: 15px;
195 |   width: 20px;
196 |   height: 20px;
197 |   line-height: 30px;
198 |   background: #224C6E;
199 |   color: white;
200 |   border-radius: 7px;
201 | }
202 | 
203 | .statistics {
204 |   text-align : left;
205 | }
206 | 
207 | .results-header {
208 |   display : flex;
209 |   margin-bottom: 1em;
210 |   align-items: flex-end;
211 | }
212 | 
213 | .selectors {
214 |   text-align : right;
215 | }
216 | .selectors > .algolia-magic.show {
217 |   display: inline-block !important;
218 | }
219 | 


--------------------------------------------------------------------------------
/samples/ecommerce/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }
428 | 


--------------------------------------------------------------------------------
/samples/ecommerce/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title></title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <link rel="stylesheet" href="css/normalize.css" />
 8 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 9 |   <link href='http://fonts.googleapis.com/css?family=Roboto:500,100,300,400' rel='stylesheet' type='text/css'>
10 |   <link rel="stylesheet" href="css/material.css" />
11 |   <link rel="stylesheet" href="css/index.css" />
12 | </head>
13 | <body data-algolia-app-id="latency"
14 |       data-algolia-key="6be0576ff61c053d5f9a3225e2a90f76"
15 |       data-algolia-index="bestbuy">
16 |   <div class="container-fluid header">
17 |     <div class="header col-md-12">
18 |       <h1>YOUR search! <span class="powered-by">Powered by Algolia</span></h1>
19 |     </div>
20 |   </div>
21 |   <div class="container-fluid search-container">
22 |     <div class="search">
23 |       <div class="algolia-magic-search-box" data-input-class="form-control" data-placeholder="Search for an awesome product..."></div>
24 |     </div>
25 |   </div>
26 |   <div class="container">
27 |     <div class="row">
28 |       <div class="col-md-9">
29 |       <div class="row results-header">
30 |         <div class="algolia-magic col-md-6 statistics" data-template="#stats-template"></div>
31 |         <div class="col-md-6 selectors">
32 |           <div class="algolia-magic index-selector">
33 |             <div data-index-name="bestbuy">Relevance</div>
34 |             <div data-index-name="bestbuy_price_asc">Lowest price</div>
35 |             <div data-index-name="bestbuy_price_desc">Highest price</div>
36 |           </div>
37 |           <div class="algolia-magic hits-selector">
38 |             <div data-hits-per-page="5"></div>
39 |             <div data-hits-per-page="50"></div>
40 |             <div data-hits-per-page="20"></div>
41 |           </div>
42 |         </div>
43 |       </div> 
44 |         <div class="row results">
45 |           <div class="algolia-magic result-items col-md-12"
46 |                data-no-results-template="#no-results-template"
47 |                data-hit-template="#hit-template" data-hits-per-page="5"></div>
48 |           <div class="algolia-magic pagination col-md-12" data-padding="3"></div>
49 |         </div>
50 |       </div>
51 |       <div class="algolia-magic result-filters col-md-3">
52 |         <div class="algolia-magic facet" data-facet-name="type" data-title-label="Type" data-sort="lexicographic"></div>
53 |         <div class="algolia-magic disjunctive-facet" data-facet-name="category" data-title-label="Categories" data-sort="lexicographicWithSelectedFirst"></div>
54 |         <div class="algolia-magic disjunctive-facet" data-facet-name="shipping" data-title-label="Shipping cost" data-sort="lexicographicWithSelectedFirst"></div>
55 |         <div class="algolia-magic disjunctive-facet" data-facet-name="manufacturer" data-title-label="Manufacturer" data-sort="lexicographicWithSelectedFirst"></div>
56 |         <div class="algolia-magic slider" data-title-label="Price" data-facet-name="salePrice"></div>
57 |       </div>
58 |     </div>
59 |   </div>
60 |   <script type="text/html" id="stats-template">
61 | {{nbHits}} hits retrieved in {{processingTimeMS}} ms
62 |   </script>
63 |   <script type="text/html" id="no-results-template">
64 | Sorry no results
65 |   </script>
66 |   <script type="text/html" id="hit-template">
67 | <div class="col-xs-12" >
68 | <div class="result panel panel-default" >
69 |   <div class="panel-body" >
70 |     <img class="product-image" src="{{thumbnailImage}}" style="float:left;background:#aaa;" >
71 |     <div style="margin-left:90px;max-width:100%;" >
72 |       <h1 class="speaker-name" >
73 |       <a href="{{url}}" >{{{_highlightResult.name.value}}}</a>
74 |       </h1>
75 |       <p>{{salePrice}}</p>
76 |     </div>
77 |     <hr style="clear:both;" >
78 |     <h2 class="speaker-session-title" >Description</h2>
79 |     <p>{{{shortDescription}}}</p>
80 |   </div>
81 | </div> 
82 | </div>
83 |   </script>
84 |   <script src="../../dist/algoliasearch-ui-kit.js"></script>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/src/components/BemHelper/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var BemHelper = function BemHelper( block ) {
 4 |   return function( element, modifier ) {
 5 |     if ( !element ) {
 6 |       return block;
 7 |     }
 8 |     if ( !modifier ) {
 9 |       return block + "--" + element;
10 |     }
11 |     return block + "--" + element + "__" + modifier;
12 |   };
13 | };
14 | 
15 | module.exports = BemHelper;
16 | 


--------------------------------------------------------------------------------
/src/components/Facets/Conjunctive/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var map = require( "lodash/collection/map" );
 4 | var order = require( "../order" );
 5 | 
 6 | var Facet = React.createClass( {
 7 |   render : function() {
 8 |     var facet = this.props.facet;
 9 |     var helper = this.props.helper;
10 |     var sort = this.props.sort;
11 |     var titleLabel = this.titleLabel || facet.name;
12 | 
13 |     var title = <h2 className="panel-title">{ titleLabel }</h2>;
14 | 
15 |     var facetValues = map( facet.data, function( nb, facetFilter ) {
16 |       return {
17 |         name : facetFilter,
18 |         isRefined : helper.isRefined( facet.name, facetFilter ),
19 |         value : nb
20 |       };
21 |     } );
22 | 
23 |     if( sort && order[ sort ] ){
24 |       facetValues.sort( order[ sort ] );
25 |     }
26 | 
27 |     var values = map( facetValues, function( facetValue ) {
28 |       var activeClass = helper.isRefined( facet.name, facetValue.name ) ? " active" : "";
29 |       var className = "list-group-item" + activeClass;
30 |       return <a href="#"
31 |                 className={ className }
32 |                 key={ facet.name + facetValue.name }
33 |                 onClick={ this.toggleSelect.bind( this, facet.name, facetValue.name ) }>
34 |                { facetValue.name } ({ facetValue.value })
35 |              </a>;
36 |     }, this );
37 | 
38 |     return <div className="panel panel-default">
39 |              <div className="panel-heading">{ title }</div>
40 |              <div className="list-group">{values}</div>
41 |            </div>;
42 |   },
43 |   toggleSelect : function( facetName, facetValue, event ) {
44 |     event.preventDefault();
45 |     this.props.helper.toggleRefine( facetName, facetValue ).search();
46 |   }
47 | } );
48 | 
49 | module.exports = Facet;
50 | 


--------------------------------------------------------------------------------
/src/components/Facets/Disjunctive/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var map = require( "lodash/collection/map" );
 4 | var order = require( "../order" );
 5 | 
 6 | var DisjunctiveFacet = React.createClass( {
 7 |   render : function() {
 8 |     var facet = this.props.facet;
 9 |     var helper = this.props.helper;
10 |     var sort = this.props.sort;
11 |     var titleLabel = this.props.titleLabel || facet.name;
12 | 
13 |     var title = <h2 className="panel-title">{ titleLabel }</h2>;
14 | 
15 |     var facetValues = map( facet.data, function( nb, facetFilter ) {
16 |       return {
17 |         name : facetFilter,
18 |         isRefined : helper.isRefined( facet.name, facetFilter ),
19 |         value : nb
20 |       };
21 |     } );
22 | 
23 |     if( sort && order[ sort ] ){
24 |       facetValues.sort( order[ sort ] );
25 |     }
26 | 
27 |     var values = map( facetValues, function( facetValue ) {
28 |       var activeClass = facetValue.isRefined ? " active" : "";
29 |       var className = "list-group-item" + activeClass;
30 |       return <a href="#"
31 |                 key={ facet.name + facetValue.name }
32 |                 className={ className }
33 |                 onClick={ this.toggleSelect.bind( this, facet.name, facetValue.name ) }>
34 |                <input type="checkbox"
35 |                       onClick={ function( e ) { e.preventDefault(); } }
36 |                       checked={ facetValue.isRefined }
37 |                       readOnly/>
38 |                { facetValue.name } ({ facetValue.value })
39 |              </a>;
40 |     }, this );
41 | 
42 |     return <div className="panel panel-default">
43 |              <div className="panel-heading">{ title }</div>
44 |              <div className="list-group">{values}</div>
45 |            </div>;
46 |   },
47 |   toggleSelect : function( facetName, facetValue, event ) {
48 |     event.preventDefault();
49 |     this.props.helper.toggleRefine( facetName, facetValue ).search();
50 |   }
51 | } );
52 | 
53 | module.exports = DisjunctiveFacet;
54 | 


--------------------------------------------------------------------------------
/src/components/Facets/Slider/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | 
 4 | var Slider = require( "react-slider" );
 5 | 
 6 | var AlgoliaSlider = React.createClass( {
 7 |   render : function() {
 8 |     var helper = this.props.helper;
 9 |     var facet = this.props.facet;
10 |     var titleLabel = this.props.titleLabel || facet.name;
11 | 
12 |     var title = <h2 className="panel-title">{ titleLabel }</h2>;
13 | 
14 |     var min = ( facet.stats && facet.stats.min ) || 0;
15 |     var max = ( facet.stats && facet.stats.max ) || 0;
16 |     var values = [
17 |       helper.state.getNumericRefinement( facet.name, ">=" ) || min,
18 |       helper.state.getNumericRefinement( facet.name, "<=" ) || max
19 |     ];
20 | 
21 |     return <div className="panel panel-default">
22 |              <div className="panel-heading">{ title }</div>
23 |              <div className="list-group">
24 |                <div className="list-group-item">{ values[0] } - { values[1] }</div>
25 |                <Slider className="horizontal-slider list-group-item"
26 |                        pearling={ true }
27 |                        barClassName="bar"
28 |                        withBars={ true }
29 |                        max={ max }
30 |                        min={ min }
31 |                        value={ values }
32 |                        onChange={ this.change }
33 |                        onAfterChange={ this.search }>
34 |                  <div className="handle handle-min" ></div>
35 |                  <div className="handle handle-max"/>
36 |                </Slider>
37 |              </div>
38 |            </div>;
39 |   },
40 |   change : function( values ) {
41 |     this.props.helper.addNumericRefinement( this.props.facet.name, ">=", values[0] )
42 |                      .addNumericRefinement( this.props.facet.name, "<=", values[1] );
43 |   },
44 |   search : function() {
45 |     this.props.helper.search();
46 |   }
47 | } );
48 | 
49 | module.exports = AlgoliaSlider;
50 | 


--------------------------------------------------------------------------------
/src/components/Facets/TabMenu/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var cx = require( "classnames" );
 4 | var forEach = require( "lodash/collection/forEach" );
 5 | var sortBy = require( "lodash/collection/sortBy" );
 6 | var map = require( "lodash/collection/map" );
 7 | var bem = require( "../../BemHelper" )( "algolia-magic-tab-menu" );
 8 | 
 9 | // TODO: We should handle i18n in a much better way.
10 | var facetAllValue = "All";
11 | 
12 | var TabMenu = React.createClass( {
13 |   _getKey : function _getKey( facet ) {
14 |     return [
15 |       "algolia-tab-menu",
16 |       this.props.facet.name,
17 |       facet.value
18 |     ].join( "-" );
19 |   },
20 |   _getCategories : function _getCategories( facets ) {
21 |     var results = [];
22 |     var allCount = 0;
23 |     forEach( facets, function( count, value ) {
24 |       results.push( {value : value, count : count} );
25 |       allCount += count;
26 |     } );
27 |     results = sortBy( results, "count" ).reverse();
28 |     results.unshift( {value : facetAllValue, count : allCount} );
29 |     return results;
30 |   },
31 |   _getActiveTab : function _getActiveTab() {
32 |     var facetName = this.props.facet.name;
33 |     var refinements = this.props.helper.state.disjunctiveFacetsRefinements[facetName];
34 |     if ( !refinements ) {
35 |       return facetAllValue;
36 |     }
37 |     return refinements[0];
38 |   },
39 |   render : function() {
40 |     var self = this;
41 |     var facets = self._getCategories( this.props.facet.data );
42 | 
43 |     var lis = map( facets, function( facet ) {
44 |       var uniqueKey = self._getKey( facet );
45 |       var onChange = self.onChange.bind( self, facet.value );
46 | 
47 |       var className = {};
48 |       className[bem( "item" )] = true;
49 |       className[bem( "item", "active" )] = ( facet.value === self._getActiveTab() );
50 |       className = cx( className );
51 | 
52 |       return (
53 |         <li className={className} key={uniqueKey} onClick={onChange}>
54 |           {facet.value}
55 |           <span className={bem( "count" )}>{facet.count}</span>
56 |         </li>
57 |       );
58 |     } );
59 | 
60 |     return <ul className="algolia-belongs-to-menu">{lis}</ul>;
61 |   },
62 |   onChange : function onChange( facetValue ) {
63 |     var facetName = this.props.facet.name;
64 |     this.props.helper.clearRefinements( facetName );
65 |     if ( facetValue !== facetAllValue ) {
66 |       this.props.helper.toggleRefine( facetName, facetValue );
67 |     }
68 |     this.props.helper.search();
69 |   }
70 | } );
71 | 
72 | module.exports = TabMenu;
73 | 


--------------------------------------------------------------------------------
/src/components/Facets/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var map = require( "lodash/collection/map" );
 4 | 
 5 | var Facets = React.createClass( {
 6 |   render : function() {
 7 |     var results = this.props.results;
 8 |     var helper = this.props.helper;
 9 |     var facets = map( results.facets, function( facet ) {
10 |       
11 |     }, this );
12 | 
13 |     return <div className="">{ facets }</div>;
14 |   },
15 | } );
16 | 
17 | module.exports = Facets;
18 | 


--------------------------------------------------------------------------------
/src/components/Facets/order/index.js:
--------------------------------------------------------------------------------
 1 | var order = {
 2 |   lexicographic : function( facetValueA, facetValueB ){
 3 |     return facetValueA.name.localeCompare( facetValueB.name );
 4 |   },
 5 |   lexicographicWithSelectedFirst : function( facetValueA, facetValueB ){
 6 |     if( facetValueB.isRefined === facetValueA.isRefined ){
 7 |       return order.lexicographic( facetValueA, facetValueB );
 8 |     }
 9 |     if( facetValueA.isRefined ){
10 |       return -1;
11 |     }
12 |     else {
13 |       return 1;
14 |     }
15 |   }
16 | };
17 | 
18 | module.exports = order;
19 | 


--------------------------------------------------------------------------------
/src/components/HitsSelector/index.js:
--------------------------------------------------------------------------------
 1 | var React = require( "react" );
 2 | var DDButton = require( "react-dropdown-button" )
 3 | 
 4 | var AlgoliasearchHelper = require( "algoliasearch-helper/src/algoliasearch.helper" );
 5 | var SearchResults = require( "algoliasearch-helper/src/SearchResults" );
 6 | var SearchParameters = require( "algoliasearch-helper/src/SearchParameters" );
 7 | 
 8 | var map = require( "lodash/collection/map" );
 9 | var without = require( "lodash/array/without" );
10 | 
11 | var HitsSelector = React.createClass( {
12 |   propTypes : {
13 |     helper : React.PropTypes.instanceOf( AlgoliasearchHelper ),
14 |     results : React.PropTypes.instanceOf( SearchResults ),
15 |     searchState : React.PropTypes.instanceOf( SearchParameters ),
16 |     displayOptions : React.PropTypes.arrayOf( React.PropTypes.number )
17 |   },
18 |   render : function() {
19 |     var selectedOption = parseInt( this.props.searchState.hitsPerPage, 10 );
20 |     var selectableOptions = map(
21 |       without( this.props.displayOptions, selectedOption ).sort( function(a, b){
22 |         if( a > b ) return 1;
23 |         return a < b ? -1 : 0;
24 |       } ),
25 |       function toDisplayObject( opt ) {
26 |         return { label : opt, value : opt };
27 |       }
28 |     );
29 |     return <DDButton items={ selectableOptions } onMenuClick={ this.changeIndex }>
30 |              Display : <strong>&nbsp; { selectedOption }</strong>
31 |            </DDButton>;
32 |   },
33 |   changeIndex : function( e, itemProps ){
34 |     this.props.helper.setState(
35 |       this.props.searchState.setHitsPerPage( itemProps.data.value )
36 |     ).search();
37 |   }
38 | } );
39 | 
40 | module.exports = HitsSelector;
41 | 


--------------------------------------------------------------------------------
/src/components/Hogan/index.js:
--------------------------------------------------------------------------------
 1 | var React = require( "react" );
 2 | 
 3 | var hogan = require( "hogan.js" );
 4 | var memoize = require( "lodash/function/memoize" );
 5 | 
 6 | var memoHogan = memoize( hogan.compile.bind( hogan ) );
 7 | 
 8 | var HoganResult = React.createClass( {
 9 |   componentWillMount : function(){
10 |     this.setState( {
11 |       template : memoHogan( this.props.template )
12 |     } );
13 |   },
14 |   render : function(){
15 |     var content = this.state.template.render( this.props.data );
16 |     return <div dangerouslySetInnerHTML={{ __html : content }} />;
17 |   }
18 | } );
19 | 
20 | module.exports = HoganResult;
21 | 


--------------------------------------------------------------------------------
/src/components/IndexSelector/index.js:
--------------------------------------------------------------------------------
 1 | var React = require( "react" );
 2 | var DDButton = require( "react-dropdown-button" )
 3 | 
 4 | var AlgoliasearchHelper = require( "algoliasearch-helper/src/algoliasearch.helper" );
 5 | var SearchResults = require( "algoliasearch-helper/src/SearchResults" );
 6 | var SearchParameters = require( "algoliasearch-helper/src/SearchParameters" );
 7 | 
 8 | var find = require( "lodash/collection/find" );
 9 | var reject = require( "lodash/collection/reject" );
10 | 
11 | var IndexSelector = React.createClass( {
12 |   propTypes : {
13 |     helper : React.PropTypes.instanceOf( AlgoliasearchHelper ),
14 |     results : React.PropTypes.instanceOf( SearchResults ),
15 |     searchState : React.PropTypes.instanceOf( SearchParameters ),
16 |     indices : React.PropTypes.arrayOf( React.PropTypes.shape( {
17 |       label : React.PropTypes.string,
18 |       index : React.PropTypes.string
19 |     } ) ),
20 |     selectedIndex : React.PropTypes.string
21 |   },
22 |   render : function() {
23 |     var isSelectedIndex = function( i ) {
24 |       return this.props.selectedIndex === i.index
25 |     };
26 |     var selectedIndex = find( this.props.indices, isSelectedIndex, this );
27 |     var displayableIndices = reject( this.props.indices, isSelectedIndex, this );
28 |     return <DDButton items={ displayableIndices } onMenuClick={ this.changeIndex }>
29 |              Sort by : <strong>&nbsp; { selectedIndex.label }</strong>
30 |            </DDButton>;
31 |   },
32 |   changeIndex : function( e, itemProps ){
33 |     this.props.helper.setIndex( itemProps.data.index ).search();
34 |   }
35 | } );
36 | 
37 | module.exports = IndexSelector;
38 | 


--------------------------------------------------------------------------------
/src/components/Intro/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | 
 4 | class Intro extends React.Component {
 5 |   render() {
 6 |     return <div className="header col-md-12">
 7 |              <h1 className="app-name">Find the speaker!</h1>
 8 |              <p className="tag-line">An <img src="images/irce-logo-small.png" alt="irce"/> app powered by <img src="images/Algolia_logo_bg-dark.jpg" alt="algolia" /></p>
 9 |            </div>;
10 |   }
11 | }
12 | 
13 | module.exports = Intro;
14 | 


--------------------------------------------------------------------------------
/src/components/Page/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var SearchBox = require( "../SearchBox" );
 4 | var Results = require( "../Results" );
 5 | var Intro = require( "../Intro" );
 6 | 
 7 | class Page extends React.Component {
 8 |   render() {
 9 |     var result = this.props.result;
10 |     var searchState = this.props.searchState;
11 |     var helper = this.props.helper;
12 |     var resultRendered = result.nbHits > 0 ?
13 |           <Results results={ result } searchState={ searchState } helper={ helper } /> :
14 |           <div className="no-results">No results could be found :(</div>;
15 | 
16 |     return <span>
17 |              <div className="container-fluid header">
18 |                <Intro />
19 |              </div>
20 |              <div className="container-fluid search-container" ref="searchContainer">
21 |                <div className="search col-md-12">
22 |                  <div className="search-box">
23 |                    <SearchBox helper={ helper } onFocus={ this.moveToRef.bind( this ) }/>
24 |                  </div>
25 |                </div>
26 |              </div>
27 |              <div className="container results-container">
28 |                <div className="result-items col-md-12">
29 |                 { resultRendered }
30 |                </div>
31 |              </div>
32 |            </span>;
33 |   }
34 |   componentDidMount() {
35 |     this.searchContainerPosition = React.findDOMNode( this.refs.searchContainer ).getBoundingClientRect().top;
36 |   }
37 |   moveToRef() {
38 |     window.scrollTo( 0, this.searchContainerPosition );
39 |   }
40 | }
41 | 
42 | module.exports = Page;
43 | 


--------------------------------------------------------------------------------
/src/components/Pagination/PaginationLink/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | 
 4 | class PaginationLink extends React.Component {
 5 |   render() {
 6 |     var label = this.props.label;
 7 |     var ariaLabel = this.props.ariaLabel;
 8 |     var href = this.props.href;
 9 |     var page = this.props.page;
10 |     var className = this.props.className;
11 | 
12 |     var disabled = ( page === undefined );
13 | 
14 |     if( disabled ) {
15 |       return  <li className="disabled">
16 |                 <a href={ href } aria-label={ ariaLabel } onClick={ this.clickDisabled }>
17 |                   { label }
18 |                 </a>
19 |               </li>;
20 |     }
21 |       
22 |     return  <li className={ className } >
23 |               <a href={ href } aria-label={ ariaLabel } onClick={ this.click.bind( this, page ) }>
24 |                 { label }
25 |               </a>
26 |             </li>;
27 |   }
28 |   clickDisabled( e ){
29 |     e.preventDefault();
30 |   }
31 |   click( page, e ){
32 |     e.preventDefault();
33 |     this.props.helper.setCurrentPage( page ).search();
34 |   }
35 | }
36 | 
37 | module.exports = PaginationLink;
38 | 


--------------------------------------------------------------------------------
/src/components/Pagination/Paginator/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var range = require( "lodash/utility/range" );
 3 | var Paginator = function Paginator( params ) {
 4 |   if( params.currentPage < 0 || params.currentPage > params.total ) {
 5 |     throw new Error( "First page is out of bounds. Was " +
 6 |                      params.currentPage + ", expected between 0 and " + params.total );
 7 |   }
 8 |   this.currentPage = params.currentPage;
 9 |   this.total = params.total;
10 |   this.padding = params.padding || 5;
11 | };
12 | 
13 | 
14 | Paginator.prototype = {
15 |   constructor : Paginator,
16 |   pages : function() {
17 |     var current = this.currentPage;
18 |     var padding = this.padding;
19 |     var paddingLeft = this.calculatePaddingLeft( current, padding, this.total );
20 |     var paddingRight = Math.min( 2 * padding + 1, this.total ) - paddingLeft;
21 |     var first = current - paddingLeft;
22 |     var last = current + paddingRight;
23 |     return range( first, last );
24 |   },
25 |   calculatePaddingLeft : function( current, padding, total ) {
26 |     if( current <= padding ) {
27 |       return current;
28 |     }
29 |     else {
30 |       if( current >= ( total - padding ) ) {
31 |         return 2 * padding + 1 - ( total - current );
32 |       }
33 |       else {
34 |         return padding;
35 |       }
36 |     }
37 |   },
38 |   showFirstEllipsis : function() {
39 |     return this.currentPage > this.padding;
40 |   },
41 |   showLastEllipsis : function() {
42 |     return this.currentPage < ( this.total - this.padding );
43 |   },
44 |   isLastPage : function() {
45 |     return this.currentPage === this.total - 1;
46 |   },
47 |   isFirstPage : function() {
48 |     return this.currentPage === 0;
49 |   }
50 | };
51 | 
52 | module.exports = Paginator;
53 | 


--------------------------------------------------------------------------------
/src/components/Pagination/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var forEach = require( "lodash/collection/forEach" );
 4 | 
 5 | var Paginator = require( "./Paginator" );
 6 | var PaginationLink = require( "./PaginationLink" );
 7 | 
 8 | class Pagination extends React.Component {
 9 |   render() {
10 |     var results = this.props.results;
11 | 
12 |     if( !results || !results.hits || results.hits.length === 0 ) return <span/>;
13 | 
14 |     var pager = new Paginator( {
15 |       currentPage : results.page,
16 |       total : results.nbPages,
17 |       padding : this.props.padding
18 |     } );
19 | 
20 |     if( pager ) {
21 |       return <nav className={this.props.className}>
22 |                <ul className="pagination top_pagination">
23 |                   { this.props.showFirstLast ? this.firstPageLink( pager ) : undefined }
24 |                   { this.previousPageLink( pager ) }
25 |                   { this.pages( pager ) }
26 |                   { this.nextPageLink( pager ) }
27 |                   { this.props.showFirstLast ? this.lastPageLink( pager ) : undefined }
28 |                </ul>
29 |              </nav>;
30 |     }
31 |     return <nav><ul className="pagination top_pagination"></ul></nav>;
32 |   }
33 |   previousPageLink( pager ) {
34 |     var label = this.props.labels.previous;
35 |     if( !label ) return undefined;
36 | 
37 |     var page = pager.isFirstPage() ? undefined : pager.currentPage - 1;
38 |     return <PaginationLink href="#" label={ label } ariaLabel="Previous"
39 |                            helper={ this.props.helper } page={ page } />;
40 |   }
41 |   nextPageLink( pager ) {
42 |     var label = this.props.labels.next;
43 |     if( !label ) return undefined;
44 | 
45 |     var page = pager.isLastPage() ? undefined : pager.currentPage + 1;
46 |     return <PaginationLink href="#" label={ label} ariaLabel="Next"
47 |                            helper={ this.props.helper } page={ page } />
48 |   }
49 |   firstPageLink( pager ) {
50 |     var label = this.props.labels.first;
51 |     if( !label ) return undefined;
52 | 
53 |     var page = pager.isFirstPage() ? undefined : 0;
54 |     return <PaginationLink href="#" label={ label } ariaLabel="First"
55 |                            helper={ this.props.helper } page={ page } />;
56 |   }
57 |   lastPageLink( pager ) {
58 |     var label = this.props.labels.last;
59 |     if( !label ) return undefined;
60 | 
61 |     var page = pager.isLastPage() ? undefined : pager.total - 1;
62 |     return <PaginationLink href="#" label={ label } ariaLabel="Last"
63 |                            helper={ this.props.helper } page={ page } />;
64 |   }
65 |   pages( pager ) {
66 |     var pages = pager.pages();
67 |     var elements = [];
68 | 
69 |     forEach( pages, function( pageNumber ) {
70 |       var className = pageNumber === pager.currentPage ? "active" : "";
71 |       elements.push( 
72 |         <PaginationLink href="#" label={ pageNumber + 1 } ariaLabel={ pageNumber + 1 }
73 |                         helper={ this.props.helper } page={ pageNumber }
74 |                         key={ pageNumber }
75 |                         className={ className} />
76 |       );
77 |     }, this );
78 | 
79 |     return elements;
80 |   }
81 | }
82 | 
83 | Pagination.defaultProps = {
84 |   labels : {
85 |     previous : <span>&lsaquo;</span>,
86 |     next : <span>&rsaquo;</span>,
87 |     first : <span>&laquo;</span>,
88 |     last : <span>&raquo;</span>
89 |   },
90 |   showFirstLast : true
91 | };
92 | 
93 | module.exports = Pagination;
94 | 


--------------------------------------------------------------------------------
/src/components/Results/Result/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var map = require( "lodash/collection/map" );
 4 | 
 5 | var baseURL = "http://www.irce.com";
 6 | 
 7 | class Result extends React.Component{
 8 |   render() {
 9 |     var result = this.props.result;
10 |     var sessions = map( result.sessions, function( session ) {
11 |       return <li className="" key={session.url}><a href={ baseURL + session.url }>{ session.name }</a></li>;
12 |     } );
13 |     var style = {
14 |       float : "left",
15 |       background : "#aaa"
16 |     };
17 |     return <div className="col-xs-12 col-sm-6 col-lg-4" >
18 |       <div className="result  panel panel-default" >
19 |          <div className="panel-body">
20 |            <img width="75" height="90" className="speaker-portrait" src={ result.image } style={ style }/>
21 |            <div style={ { marginLeft : "90px", maxWidth : "100%" } }>
22 |              <h1 className="speaker-name"><a href={ baseURL + result.speakerUrl }>{ result.speakerName }</a></h1>
23 |              <p className="speaker-position small">{ result.speakerPosition } at <a href={ result.companyUrl }>{ result.companyName }</a></p>
24 |            </div>
25 |            <hr style={{"clear" : "both"}} />
26 |            <h2 className="speaker-session-title">Sessions</h2>
27 |            <ul className="speaker-sessions">
28 |              { sessions }
29 |            </ul>
30 |          </div>
31 |        </div>
32 |      </div>;
33 |   }
34 | }
35 | 
36 | module.exports = Result;
37 | 


--------------------------------------------------------------------------------
/src/components/Results/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var map = require( "lodash/collection/map" );
 4 | 
 5 | var Hogan = require( "../Hogan" );
 6 | 
 7 | class Results extends React.Component {
 8 |   render() {
 9 |     var results = this.props.results;
10 |     if( !results || !results.hits || results.hits.length === 0 ) {
11 |       return this.renderNoResults( results, this.props.noResultsTemplate );
12 |     }
13 |     return this.renderWithResults( results.hits, this.props.hitTemplate );
14 |   }
15 |   renderWithResults( hits, hitTemplate ) {
16 |     var renderedHits = map( hits, function( hit ) {
17 |       return <Hogan data={ hit } key={ hit.objectID } template={ hitTemplate } />;
18 |     } );
19 |     return <div className="search_list search_results_container row">{ renderedHits }</div>
20 |   }
21 |   renderNoResults( results, noResultsTemplate ) {
22 |     return  <div className="search_list search_results_container row">
23 |               <Hogan data={ results } template={ noResultsTemplate } />
24 |             </div>;
25 |   }
26 | }
27 | 
28 | module.exports = Results;
29 | 


--------------------------------------------------------------------------------
/src/components/SearchBox/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | var bem = require( "../BemHelper" )( "algolia-magic-search-box" );
 4 | var cx = require( "classnames" );
 5 | 
 6 | var AlgoliasearchHelper = require( "algoliasearch-helper/src/algoliasearch.helper" );
 7 | var SearchResults = require( "algoliasearch-helper/src/SearchResults" );
 8 | 
 9 | var SearchBox = React.createClass( {
10 |   propTypes : {
11 |     helper : React.PropTypes.instanceOf( AlgoliasearchHelper ),
12 |     results : React.PropTypes.instanceOf( SearchResults ),
13 |     onFocus : React.PropTypes.func,
14 |     placeholder : React.PropTypes.string
15 |   },
16 |   render : function() {
17 |     var onFocus = this.props.onFocus;
18 |     var classNames = cx( bem( "input" ), this.props.inputClass );
19 | 
20 |     return <input type="text"
21 |                   value={ this.props.helper.state.query }
22 |                   placeholder={ this.props.placeholder }
23 |                   name="algolia-query"
24 |                   className={classNames}
25 |                   data-role="autocomplete"
26 |                   autoComplete="off"
27 |                   autofocus="autofocus"
28 |                   onChange={ this.change }
29 |                   onFocus={ onFocus }
30 |                   role="textbox" />;
31 |   },
32 |   change : function( e ) {
33 |     var value = e.target.value;
34 |     var helper = this.props.helper;
35 | 
36 |     helper.setQuery( value ).search();
37 |   }
38 | } );
39 | 
40 | module.exports = SearchBox;
41 | 
42 | 


--------------------------------------------------------------------------------
/src/components/SearchStats/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | var React = require( "react" );
 3 | 
 4 | var Pagination = require( "../Pagination" );
 5 | 
 6 | var paginationLabels = {
 7 |   next : "suivant",
 8 |   previous : "précédent"
 9 | };
10 | 
11 | class SearchStats extends React.Component {
12 |   render() {
13 |     return <div className="search_stats_container">
14 |              <h3 className="">
15 |                { this.props.results.nbHits } jeux de données
16 |                <span className="small"> trouvés</span>
17 |              </h3>
18 |              <Pagination results={ this.props.results }
19 |                          helper={ this.props.helper }
20 |                          showFirstLast={ false }
21 |                          labels={ paginationLabels } />
22 |            </div>;
23 |   }
24 | }
25 | 
26 | module.exports = SearchStats;
27 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | var React = require( "react" );
  3 | var algoliasearch = require( "algoliasearch" );
  4 | var algoliasearchHelper = require( "algoliasearch-helper" );
  5 | 
  6 | var forEach = require( "lodash/collection/forEach" );
  7 | var map = require( "lodash/collection/map" );
  8 | 
  9 | var setup = require( "./setup" );
 10 | 
 11 | var Slider = require( "./components/Facets/Slider" );
 12 | var TabMenu = require( "./components/Facets/TabMenu" );
 13 | var ConjunctiveF = require( "./components/Facets/Conjunctive" );
 14 | var DisjunctiveF = require( "./components/Facets/Disjunctive" );
 15 | var Results = require( "./components/Results" );
 16 | var SearchBox = require( "./components/SearchBox" );
 17 | var Pagination = require( "./components/Pagination" );
 18 | var Hogan = require( "./components/Hogan" );
 19 | var IndexSelector = require( "./components/IndexSelector" );
 20 | var HitsSelector = require( "./components/HitsSelector" );
 21 | 
 22 | var URLManager = require( "./setup/url.js" );
 23 | 
 24 | ( function setupAll() {
 25 |   var firstRendering = true;
 26 |   var appConfig = setup.readAlgoliaConfig( document );
 27 |   var containers = setup.readContainersConfig( document );
 28 | 
 29 |   //check configuration
 30 |   if( !containers || !containers.results ) {
 31 |     throw new Error( "The result-items containers must be defined in order to correctly initialize the UI-kit. Please check GETTING-STARTED.md chapter called 'The search results'" );
 32 |   }
 33 | 
 34 |   var result = {};
 35 |   var state = {};
 36 | 
 37 |   var facets = map( containers.facets, "name" );
 38 |   var disjunctiveFacets = map( containers.disjunctiveFacets, "name" )
 39 |                          .concat( map( containers.sliders, "name" ) )
 40 |                          .concat( map( containers.tabMenu, "name" ) )
 41 |   var defaultUrlState = {
 42 |     page : 0,
 43 |     query : "",
 44 |     disjunctiveFacetsRefinements : {},
 45 |     facetsRefinements : {},
 46 |     numericRefinements : {}
 47 |   };
 48 |   var urlManager = new URLManager( 
 49 |     defaultUrlState,
 50 |     {
 51 |       hitsPerPage : containers.results.hitsPerPage,
 52 |       facets : facets,
 53 |       disjunctiveFacets : disjunctiveFacets
 54 |     }
 55 |   );
 56 | 
 57 |   var initialState = urlManager.init();
 58 | 
 59 |   var client = algoliasearch( appConfig.appID, appConfig.key );
 60 |   var helper = algoliasearchHelper( client, appConfig.index, initialState );
 61 | 
 62 |   helper.on( "result", function( newResult, newState ) {
 63 |     result = newResult;
 64 |     render( helper, newState, result );
 65 |   } );
 66 | 
 67 |   helper.on( "change", function( newState ) {
 68 |     state = newState;
 69 |     urlManager.update( state );
 70 |     render( helper, state, result );
 71 |   } );
 72 |   
 73 | 
 74 |   window.addEventListener( "popstate", function( event ){
 75 |     helper.overrideStateWithoutTriggeringChangeEvent( event.state )
 76 |           .search();
 77 |   } );
 78 | 
 79 |   helper.search();
 80 | 
 81 |   function render( h, s, r ) {
 82 |     if( containers.results ) {
 83 |       React.render( <Results results={ r }
 84 |                              searchState={ s }
 85 |                              helper={ h }
 86 |                              noResultsTemplate={ containers.results.noResultsTemplate }
 87 |                              hitTemplate={ containers.results.hitTemplate } />,
 88 |                     containers.results.node );
 89 |     }
 90 | 
 91 |     if( containers.searchBox ) {
 92 |       React.render( <SearchBox helper={ h }
 93 |                                inputClass={ containers.searchBox.inputClass }
 94 |                                placeholder={ containers.searchBox.placeholder } />,
 95 |                     containers.searchBox.node );
 96 |     }
 97 | 
 98 |     if( containers.pagination ) {
 99 |       React.render( <Pagination results={ r }
100 |                                 helper={ h }
101 |                                 padding={ containers.pagination.padding}
102 |                                 labels={ containers.pagination.labels } />,
103 |                     containers.pagination.node );
104 |     }
105 | 
106 |     if( containers.statistics ) {
107 |       React.render( <Hogan template={ containers.statistics.template }
108 |                            data={ r } />,
109 |                     containers.statistics.node );
110 |     }
111 | 
112 |     if( containers.indexSelector ) {
113 | 
114 |       React.render( <IndexSelector helper={ h }
115 |                                    results={ r }
116 |                                    searchState={ s }
117 |                                    indices={ containers.indexSelector.indices }
118 |                                    selectedIndex={ h.getIndex() } />,
119 |                     containers.indexSelector.node );
120 |     }
121 | 
122 |     if( containers.hitsSelector ) {
123 |       React.render( <HitsSelector helper={ h } results={ r } searchState={ s }
124 |                                   displayOptions={ containers.hitsSelector.displayOptions } />,
125 |                     containers.hitsSelector.node );
126 |     }
127 | 
128 |     forEach( containers.tabMenu, function( f ) {
129 |       React.render( <TabMenu searchState={ s }
130 |                              facet={ getFacetOrDefaults( r, f.name ) }
131 |                              helper={ h }
132 |                              sort={ f.sort } />,
133 |                     f.node );
134 |     } );
135 | 
136 |     forEach( containers.facets, function( f ) {
137 |       React.render( <ConjunctiveF searchState={ s }
138 |                                   facet={ getFacetOrDefaults( r, f.name ) }
139 |                                   helper={ h }
140 |                                   titleLabel={ f.titleLabel }
141 |                                   sort={ f.sort } />,
142 |                     f.node );
143 |     } );
144 | 
145 |     forEach( containers.disjunctiveFacets, function( f ) {
146 |       React.render( <DisjunctiveF searchState={ s }
147 |                                   facet={ getFacetOrDefaults( r, f.name ) }
148 |                                   titleLabel={ f.titleLabel }
149 |                                   helper={ h }
150 |                                   sort={ f.sort } />,
151 |                     f.node );
152 |     } );
153 | 
154 |     forEach( containers.sliders, function( slider ) {
155 |       React.render( <Slider searchState={ s }
156 |                             facet={ getFacetOrDefaults( r, slider.name ) }
157 |                             titleLabel={ slider.titleLabel }
158 |                             helper={ h } />,
159 |                     slider.node );
160 |     } );
161 | 
162 |     if( firstRendering ) {
163 |       forEach( document.querySelectorAll( ".algolia-magic" ), function( d ) {
164 |         d.classList.add( "show" );
165 |       } );
166 |       firstRendering = false;
167 |     }
168 |   }
169 | 
170 |   function getFacetOrDefaults( results, facetName ) {
171 |     return results.getFacetByName( facetName ) || {name : facetName, data : [] };
172 |   }
173 | } )();
174 | 


--------------------------------------------------------------------------------
/src/setup/index.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | var map = require( "lodash/collection/map" );
  3 | 
  4 | module.exports = {
  5 |   /**
  6 |    * Read the algolia configuration from a given dom node.
  7 |    * @param {DOMNode} dom node holding the configuration
  8 |    * @return {Object} configuration for the algolia search client
  9 |    */
 10 |   readAlgoliaConfig : function readAlgoliaConfig( dom ) {
 11 |     var d = dom.body.dataset;
 12 | 
 13 |     var appID = d.algoliaAppId;
 14 |     var key = d.algoliaKey;
 15 |     var index = d.algoliaIndex;
 16 | 
 17 |     if( !appID || !key || !index ){
 18 |       throw new Error( "algolia-app-id, algolia-key and algolia-index are mandatory parameters on the body. Check out the GETTING_STARTED.md chapter called 'configure index'." );
 19 |     }
 20 | 
 21 |     return {
 22 |       appID : d.algoliaAppId,
 23 |       key : d.algoliaKey,
 24 |       index : d.algoliaIndex
 25 |     };
 26 |   },
 27 |   /**
 28 |    * Read the current DOM node for component configurations. Return a list
 29 |    * of components to render. Those components should follow the same props
 30 |    * signature : { Helper, SearchResults, SearchState }
 31 |    * @param {DOMNode} dom the root dom node in which to look for components
 32 |    * @return {Array<function>} preconfigured react components
 33 |    */
 34 |   readContainersConfig : function lookForContainers( dom ) {
 35 |     var containersConfig = {};
 36 |     containersConfig.indexSelector = ( function( d ) {
 37 |       if( d === null ) return undefined;
 38 | 
 39 |       var options = d.querySelectorAll( "[data-index-name]" );
 40 |       var indices = map( options, function( d0 ) {
 41 |         return {
 42 |           label : d0.innerHTML,
 43 |           index : d0.dataset.indexName
 44 |         };
 45 |       } );
 46 | 
 47 |       return {
 48 |         node : d,
 49 |         indices : indices
 50 |       };
 51 |     } )( dom.querySelector( ".algolia-magic.index-selector" ) );
 52 | 
 53 |     containersConfig.hitsSelector = ( function( d ) {
 54 |       if( d === null ) return undefined;
 55 | 
 56 |       var options = d.querySelectorAll( "[data-hits-per-page]" );
 57 |       var displayOptions = map( options, function( d0 ) {
 58 |         return parseInt( d0.dataset.hitsPerPage, 10 );
 59 |       } );
 60 | 
 61 |       return {
 62 |         node : d,
 63 |         displayOptions : displayOptions
 64 |       };
 65 |     } )( dom.querySelector( ".algolia-magic.hits-selector" ) );
 66 | 
 67 |     containersConfig.sliders = map(
 68 |       dom.querySelectorAll( ".algolia-magic.slider" ),
 69 |       function domToSlider( d ) {
 70 |         return {
 71 |           node : d,
 72 |           name : d.dataset.facetName,
 73 |           titleLabel : d.dataset.titleLabel
 74 |         };
 75 |       } );
 76 | 
 77 |     containersConfig.tabMenu = map(
 78 |       dom.querySelectorAll( ".algolia-magic-tab-menu" ),
 79 |       function domToBelongsToTabMenu( d ) {
 80 |         return {
 81 |           node : d,
 82 |           name : d.dataset.algoliaFacetName
 83 |         };
 84 |       } );
 85 | 
 86 |     containersConfig.facets = map(
 87 |       dom.querySelectorAll( ".algolia-magic.facet" ),
 88 |       function domToFacet( d ) {
 89 |         return {
 90 |           node : d,
 91 |           name : d.dataset.facetName,
 92 |           sort : d.dataset.sort,
 93 |           titleLabel : d.dataset.titleLabel
 94 |         };
 95 |       } );
 96 | 
 97 |     containersConfig.disjunctiveFacets = map(
 98 |       dom.querySelectorAll( ".algolia-magic.disjunctive-facet" ),
 99 |       function domToFacet( d ) {
100 |         return {
101 |           node : d,
102 |           name : d.dataset.facetName,
103 |           sort : d.dataset.sort,
104 |           titleLabel : d.dataset.titleLabel
105 |         };
106 |       } );
107 | 
108 |     containersConfig.searchBox = ( function domToSearchBox( d ) {
109 |       if( d === null ) return undefined;
110 | 
111 |       return {
112 |         node : d,
113 |         placeholder : d.dataset.placeholder,
114 |         inputClass : d.dataset.inputClass
115 |       };
116 |     } )( dom.querySelector( ".algolia-magic-search-box" ) );
117 | 
118 |     containersConfig.results = ( function domToResult( d ) {
119 |       if( d === null ) return undefined;
120 | 
121 |       var noResSelector = d.dataset.noResultsTemplate;
122 |       var noResTmplate = ( function( sel ){
123 |         if( !sel ) return "";
124 |         var templateDom = dom.querySelector( noResSelector );
125 |         return templateDom ? templateDom.innerHTML : "";
126 |       } )( noResSelector )
127 | 
128 |       var hitTemplateSelector = d.dataset.hitTemplate;
129 |       if( !hitTemplateSelector ) throw new Error(
130 |         "hit-template is a mandatory field of the results-items component and should be a selector to a valid template" );
131 |       var hitTemplate = dom.querySelector( hitTemplateSelector );
132 |       if( !hitTemplate ) throw new Error( "hit-template should be a selector to a valid template" );
133 | 
134 |       return {
135 |         node : d,
136 |         hitsPerPage : ( d.dataset && d.dataset.hitsPerPage ) || 12,
137 |         hitTemplate : hitTemplate.innerHTML,
138 |         noResultsTemplate : noResTmplate 
139 |       };
140 |     } )( dom.querySelector( ".algolia-magic.result-items" ) );
141 | 
142 |     containersConfig.pagination = ( function domToPagination( d ) {
143 |       if( d === null ) return undefined;
144 | 
145 |       var labels = ( function() {
146 |         var next = d.dataset.labelNext;
147 |         var previous = d.dataset.labelPrevious;
148 |         var last = d.dataset.labelLast;
149 |         var first = d.dataset.labelFirst;
150 | 
151 |         if( next || previous || last || first ) {
152 |           return {
153 |             next : next, previous : previous, last : last, first : first
154 |           };
155 |         }
156 | 
157 |         return undefined;
158 |       } )();
159 | 
160 |       return {
161 |         node : d,
162 |         padding : d.dataset.padding || 2,
163 |         labels : labels
164 |       };
165 |     } )( dom.querySelector( ".algolia-magic.pagination" ) );
166 | 
167 |     containersConfig.statistics = ( function domToStats( d ) {
168 |       if( d === null ) return undefined;
169 | 
170 |       return {
171 |         node : d,
172 |         template : dom.querySelector( d.dataset.template ).innerHTML
173 |       };
174 |     } )( dom.querySelector( ".algolia-magic.statistics" ) );
175 | 
176 |     return containersConfig;
177 |   }
178 | };
179 | 


--------------------------------------------------------------------------------
/src/setup/url.js:
--------------------------------------------------------------------------------
 1 | var qs = require( "qs" );
 2 | 
 3 | var defaults = require( "lodash/object/defaults" );
 4 | var pick = require( "lodash/object/pick" );
 5 | var keys = require( "lodash/object/keys" );
 6 | var isEqual = require( "lodash/lang/isEqual" );
 7 | var mapValues = require( "lodash/object/mapValues" );
 8 | 
 9 | var SearchParameters = require( "algoliasearch-helper/src/SearchParameters" );
10 | 
11 | var timerMaker = function( t0 ){
12 |   var t = t0;
13 |   return function(){
14 |     var now = Date.now();
15 |     var delta = now - t;
16 |     t = now;
17 |     return delta;
18 |   };
19 | };
20 | 
21 | var URLManager = function( urlStateDefaults, stateDefaults, threshold, timer ){
22 |   this.urlStateDefaults = urlStateDefaults || {};
23 |   this.stateDefaults = stateDefaults || {};
24 |   this.threshold = threshold || 1000;
25 |   this.timer = timer || timerMaker( Date.now() );
26 |   this.urlStateKeys = keys( urlStateDefaults );
27 | }
28 | 
29 | URLManager.prototype.init = function() {
30 |   // Read the URL
31 |   var urlParams = pick( this.read(), keys( this.urlStateDefaults ) );
32 | 
33 |   // Create an updated state with the parameters given by the user
34 |   var updatedURLState = defaults( urlParams, this.urlStateDefaults );
35 |   var updatedStateDef = defaults( {}, updatedURLState, this.stateDefaults );
36 |   var searchState = new SearchParameters( updatedStateDef );
37 | 
38 |   // Update the url with the computed state
39 |   window.history.replaceState( searchState, "", "?" + qs.stringify( updatedURLState ) )
40 | 
41 |   // Return the new state
42 |   return searchState;
43 | };
44 | 
45 | URLManager.prototype.update = function( state ) {
46 |   var newUrlState = pick( state, this.urlStateKeys );
47 |   var newUrlStateStringified = qs.stringify( newUrlState );
48 |   var currentUrlSearch = window.location.search.slice( 1 );
49 | 
50 |   if( newUrlStateStringified === currentUrlSearch ) {
51 |     return;
52 |   }
53 | 
54 |   if( this.timer() < this.threshold ) {
55 |     window.history.replaceState( state, "", "?" + newUrlStateStringified );
56 |   }
57 |   else {
58 |     window.history.pushState( state, "", "?" + newUrlStateStringified );
59 |   }
60 | };
61 | 
62 | URLManager.prototype.read = function(){
63 |   var search = window.location.search.slice( 1 );
64 |   var parameters = qs.parse( search );
65 |   return parameters;
66 | };
67 | 
68 | module.exports = URLManager;
69 | 


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
 1 | Algolia Magic Kite
 2 | ==================
 3 | 
 4 |  - [x] Template in hits
 5 |  - [x] Pagination component
 6 |  - [x] SearchBox placeHolder
 7 |  - [x] Change dataset
 8 |  - [x] Disjunctive facets
 9 |  - [x] Slider
10 |  - [ ] Configuration of the search
11 |  - [ ] Refactor component definition
12 |  - [ ] Multi index selection
13 |  - [x] Sort on facet list
14 |  - [ ] History / URL
15 | 


--------------------------------------------------------------------------------