Coveo Search UI framework
Switch branches/tags
Clone or download
Travis CI Travis CI
Travis CI and Travis CI Automatically created by Travis CI
Latest commit f31700c Sep 19, 2018
Permalink
Failed to load latest commit information.
.github update pull request template Jul 25, 2016
accessibilityTest Fix couple of issue on ErrorReport accessibility features (#894) Aug 15, 2018
chunkTesters Change pretty typescript to prettier (#607) Sep 11, 2017
docs Update npm key Jul 30, 2018
environments No more error on gulp dev when the link directory exists (#115) Jul 29, 2016
filetypes Remove many "shouldDisplayLabel" + use more precise icons (#832) May 30, 2018
gulpTasks Add post-build test to check if docgen.json is generated correctly (#908 Sep 6, 2018
hooks Release 2.x (#434) Apr 21, 2017
image Import all icons from lightning for standard and doctypes (#820) May 17, 2018
legacy/prebuilt re-commit old css spritesheet (#791) Apr 19, 2018
lib JSUI-2153 Adding BackOff module with queuing logic (#862) Jul 17, 2018
licenses Relevance Inspector (#757) Apr 3, 2018
pages remove categoryfacet component from index.html, comment out jsdoc (#849) Jun 21, 2018
plop Refactor URL manipulation into a single unified module (#706) Jan 12, 2018
sass Use popper.js for quickview tooltip (#910) Sep 10, 2018
src JSUI-2234 Improving labels for layout selector and result sort button… Sep 18, 2018
strings JSUI-2234 Improving labels for layout selector and result sort button… Sep 18, 2018
templates Tweaks feed comment template (#817) May 10, 2018
testsFramework/lib Add tests framework for accessibility (#836) Jun 7, 2018
unitTests JSUI-2234 Improving labels for layout selector and result sort button… Sep 18, 2018
.env Add .env file May 26, 2016
.gitattributes use yarn (#679) Nov 20, 2017
.gitignore JSUI-2153 Adding BackOff module with queuing logic (#862) Jul 17, 2018
.snyk fix: .snyk & package.json to reduce vulnerabilities (#876) Jul 17, 2018
.travis.yml Upload to veracode from travis (#903) Aug 28, 2018
LICENSE Update LICENSE Mar 22, 2018
README.md Update readme links (#911) Sep 10, 2018
app.json fade out animation for transparent background when facets are opened Jun 27, 2016
deploy.beta.js Change deploy-beta script for new major version Apr 21, 2017
deploy.doc.sh Fix docs site job to make it check package version before (#602) Sep 6, 2017
docs.tsconfig.json Port to Typescript 2.0 (#320) Feb 8, 2017
gulpfile.js JSUI-2120 Converting display:box to display:flex (#842) Jun 11, 2018
index.js Deploy on heroku for beta build for QA tests (#628) Oct 5, 2017
invalidate.cloudfront.js Add build step to clear CloudFront cache on official build (#682) Nov 24, 2017
karma.accessibility.test.conf.js Accessible Buttons (#866) Jul 9, 2018
karma.unit.test.conf.js Add tests framework for accessibility (#836) Jun 7, 2018
package.json Automatically created by Travis CI Sep 19, 2018
read.version.sh Upload to CDN from travis (#384) Mar 7, 2017
readme.png Updated README.md (#263) Dec 22, 2016
style.transform.js do not use fat arrow for style loader transform Aug 21, 2017
tsconfig.json CategoryFacet component (#839) Jun 12, 2018
webpack.accessibility.test.config.js Add tests framework for accessibility (#836) Jun 7, 2018
webpack.config.js Move magicbox to search-ui (#847) Jun 20, 2018
webpack.playground.config.js Fix some issues in the playground + some refactor (#675) Nov 2, 2017
webpack.tsonly.config.js Configure the Define plugin (#483) Jun 2, 2017
webpack.unit.test.config.js Fixing build issues related to case sensitive types import Aug 1, 2018
yarn.lock Re-export all types for magic box under the correct module/namespace (#… Aug 15, 2018

README.md

Search UI Build Status Coverage Status CodeFactor TypeScript

Coveo JavaScript Search UI Framework

Installation

You should install the Coveo JavaScript Search UI Framework as an npm package:

npm install --save coveo-search-ui

All resources will be available under node_modules/coveo-search-ui/bin. You can include those in your pages with <script> tags. This will make the variable Coveo globally available in your page.

If you are using a module bundler (Browserify, Webpack, rollup, etc.), you can use require('coveo-search-ui') or import * as Coveo from 'coveo-search-ui'.

Alternatively, you can download the latest version of the Coveo JavaScript Search UI Framework here.

Including the Resources from a CDN

Since the April 2017 release, it is possible to access the resources of any specific Coveo JavaScript Search Framework official release (from version 1.2537 on) through a content delivery network (CDN).

You can simply use a URL such as https://static.cloud.coveo.com/searchui/v[VERSION]/[PATH_TO_FILE], where you replace [VERSION] by the actual release version number you wish to use and [PATH_TO_FILE] by the path of the file you require.

Example:

The following tags include the 1.2537 version (April 2017 release) of the CoveoJsSearch.min.js, templateNew.js and CoveoFullSearchNewDesign.css files.

<head>

  [ ... ]

  <script src="https://static.cloud.coveo.com/searchui/v1.2537/js/CoveoJsSearch.min.js"></script>
  <script src="https://static.cloud.coveo.com/searchui/v1.2537/js/templates/templatesNew.js"></script>
  <link rel="stylesheet" href="https://static.cloud.coveo.com/searchui/v1.2537/css/CoveoFullSearchNewDesign.css" />

  [ ... ]

 </head>

Basic Usage

<!-- Include the library scripts. -->
<script src="js/CoveoJsSearch.js"></script>
<script src="js/templates/templates.js"></script>

<!-- Each DOM element with a class starting with "Coveo" (uppercase) will instantiate a component. -->
<body id="search" class='CoveoSearchInterface'>

    <!-- Each DOM element with a class starting with "coveo-" (lowercase) is strictly for CSS/alignment purpose. -->
    <div class='coveo-search-section'>

        <!-- Any Coveo component can be removed (or added); none is actually required for the page to "load". -->
        <div class="CoveoSearchbox"></div>
    </div>

    <!-- The "data-" attributes of each component allow you to pass options to this specific component instance. -->
    <div class="CoveoFacet" data-title="Author" data-field="@author" data-tab="All"></div>
    <div class="CoveoFacet" data-title="Year" data-field="@year" data-tab="All"></div>
    <script>
        // The following line shows you how you could configure an endpoint against which to perform your search.
        // Coveo.SearchEndpoint.configureCloudEndpoint('MyCoveoCloudEnpointName', 'my-authentification-token');

        // We provide a sample endpoint with public sources for demo purposes.
        Coveo.SearchEndpoint.configureSampleEndpoint();

        // Initialize the framework by targeting the root in the interface.
        // It does not have to be the document body.
        Coveo.init(document.body);
    </script>
</body>

You can find more examples of fully configured pages in the ./pages folder.

A tutorial is available to help you get started (see Coveo JavaScript Search UI Framework Getting Started Tutorial).

Build

You should have node 9.5.0 (or later) installed to build this project.

npm install -g yarn
yarn global add gulp
yarn install
gulp

Important Gulp Tasks

  • gulp default: Builds the entire project (CSS, templates, TypeScript, etc.)
  • gulp compile: Builds only the TypeScript code and generates its output in the ./bin folder.
  • gulp css: Builds only the Sass code and generates its output in the ./bin folder.
  • gulp sprites: Regenerates the sprites image as well as the generated Sass/CSS code.
  • gulp test: Builds and runs the unit tests.
  • gulp doc: Generates the documentation website for the project.
  • gulp dev: Starts a webpack dev server for the project.
  • gulp devTest: Starts a webpack dev server for the unit tests.

Dev Server

Make sure you were able to run gulp entirely without any errors first. Then you can start the dev-server:

gulp dev

This will start a webpack-dev-server instance (see Webpack Dev Server).

You can now load http://localhost:8080/index.html in a web browser.

Any time you hit Save in a source file, the bundle will be recompiled and the dev page will reload.

If you need to modify the content of the search page (i.e., the markup itself, not the TypeScript code), modify the index.html page under ./bin. This page is not committed to the repository, so you do not have to worry about breaking anything. However, if you feel like you have a good reason to modify the original index.html, feel free to do so.

You might need to assign more memory to Webpack if you see errors about heap out of memory. To do so, use this command :

node --max_old_space_size=8192 ./node_modules/gulp/bin/gulp.js dev;

Tests

Tests are written using Jasmine. You can use npm run test to run the tests in Chrome Headless.

If you wish to write new unit tests, you can do so by starting a new webpack-dev-server instance.

To start the server, run gulp devTest.

Load http://localhost:8081/tests/SpecRunner.html.

Every time you hit Save in a source file, the dev server will reload and re-run your tests.

Code coverage will be reported in ./bin/coverage

Documentation

General reference documentation is generated using TypeDoc (see Coveo JavaScript Search UI Framework - Reference Documentation). The generated reference documentation lists and describes all available options and public methods for each component.

Handwritten documentation with more examples is also available (see Coveo JavaScript Search UI Framework Home).

A tutorial is available (see Coveo JavaScript Search UI Framework Getting Started Tutorial). If you are new to the Coveo JavaScript Search UI Framework, you should definitely consult this tutorial, as it contains valuable information.

You can also use Coveo Search to find answers to any specific issues/questions (see search.coveo.com).