docsearch.js - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="2.0.0"></a>
+# [2.0.0](https://github.com/algolia/docsearch/compare/v1.3.0...v2.0.0) (2016-06-14)
+
+
+### Features
+
+* **v2:** modification for v2 (#112) ([f0a7e6b](https://github.com/algolia/docsearch/commit/f0a7e6b))
+
+
+
 <a name="1.3.0"></a>
@@ -2,0 +12,0 @@ # [1.3.0](https://github.com/algolia/docsearch/compare/1.2.0...v1.3.0) (2016-06-12)

dev/app.js

@@ -7,7 +7,5 @@ import docsearch from '../index.js';
   inputSelector: '#search-input',
-  autocompleteOptions: {
-    debug: true
-  }
+  debug: true
 });
 
 document.getElementById('search-input').focus();

dist/npm/src/lib/DocSearch.js

@@ -75,6 +75,12 @@ 'use strict';
     } : _ref$autocompleteOptions;
+    var _ref$transformData = _ref.transformData;
+    var transformData = _ref$transformData === undefined ? false : _ref$transformData;
+    var _ref$enhancedSearchInput = _ref.enhancedSearchInput;
+    var enhancedSearchInput = _ref$enhancedSearchInput === undefined ? false : _ref$enhancedSearchInput;
+    var _ref$layout = _ref.layout;
+    var layout = _ref$layout === undefined ? 'collumns' : _ref$layout;
 
     _classCallCheck(this, DocSearch);
 
-    DocSearch.checkArguments({ apiKey: apiKey, indexName: indexName, inputSelector: inputSelector, debug: debug, algoliaOptions: algoliaOptions, autocompleteOptions: autocompleteOptions });
+    DocSearch.checkArguments({ apiKey: apiKey, indexName: indexName, inputSelector: inputSelector, debug: debug, algoliaOptions: algoliaOptions, autocompleteOptions: autocompleteOptions, transformData: transformData, enhancedSearchInput: enhancedSearchInput, layout: layout });
 
@@ -89,11 +95,21 @@ this.apiKey = apiKey;
     this.autocompleteOptions = autocompleteOptions;
+    this.autocompleteOptions.cssClasses = {
+      prefix: 'ds'
+    };
 
+    this.isSimpleLayout = layout === 'simple';
+
     this.client = (0, _algoliasearch2['default'])(this.appId, this.apiKey);
     this.client.addAlgoliaAgent('docsearch.js ' + _versionJs2['default']);
 
+    if (enhancedSearchInput) {
+      DocSearch.injectSearchBox(this.input);
+    }
+
     this.autocomplete = (0, _autocompleteJs2['default'])(this.input, autocompleteOptions, [{
-      source: this.getAutocompleteSource(),
+      source: this.getAutocompleteSource(transformData),
       templates: {
-        suggestion: DocSearch.getSuggestionTemplate(),
-        footer: _templatesJs2['default'].footer
+        suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
+        footer: _templatesJs2['default'].footer,
+        empty: DocSearch.getEmptyTemplate()
       }
@@ -122,3 +138,3 @@ }]);
      */
-    value: function getAutocompleteSource() {
+    value: function getAutocompleteSource(transformData) {
       var _this = this;
@@ -132,3 +148,7 @@
         }]).then(function (data) {
-          callback(DocSearch.formatHits(data.results[0].hits));
+          var hits = data.results[0].hits;
+          if (transformData) {
+            hits = transformData(hits) || hits;
+          }
+          callback(DocSearch.formatHits(hits));
         });
@@ -179,2 +199,8 @@ };
     }
+  }, {
+    key: 'injectSearchBox',
+    value: function injectSearchBox(input) {
+      input.before(_templatesJs2['default'].searchBox);
+      input.remove();
+    }
 
@@ -256,7 +282,15 @@ /**
   }, {
+    key: 'getEmptyTemplate',
+    value: function getEmptyTemplate() {
+      return function (args) {
+        return _hoganJs2['default'].compile(_templatesJs2['default'].empty).render(args);
+      };
+    }
+  }, {
     key: 'getSuggestionTemplate',
-    value: function getSuggestionTemplate() {
+    value: function getSuggestionTemplate(isSimpleLayout) {
       var template = _hoganJs2['default'].compile(_templatesJs2['default'].suggestion);
       return function (suggestion) {
-        return template.render(suggestion);
+        isSimpleLayout = isSimpleLayout || false;
+        return template.render(_extends({ isSimpleLayout: isSimpleLayout }, suggestion));
       };
@@ -263,0 +297,0 @@ }

dist/npm/src/lib/templates.js

@@ -11,4 +11,6 @@ 'use strict';
 var templates = {
-  suggestion: '\n  <div class="' + suggestionPrefix + '\n    {{#isCategoryHeader}}' + suggestionPrefix + '__main{{/isCategoryHeader}}\n    {{#isSubCategoryHeader}}' + suggestionPrefix + '__secondary{{/isSubCategoryHeader}}\n  ">\n    <div class="' + suggestionPrefix + '--category-header">{{{category}}}</div>\n    <div class="' + suggestionPrefix + '--wrapper">\n      <div class="' + suggestionPrefix + '--subcategory-column {{#isSubcategoryDuplicate}}' + suggestionPrefix + '--duplicate-content{{/isSubcategoryDuplicate}}">\n        <span class="' + suggestionPrefix + '--subcategory-column-text">{{{subcategory}}}</span>\n      </div>\n      {{#isTextOrSubcatoryNonEmpty}}\n      <div class="' + suggestionPrefix + '--content">\n        <div class="' + suggestionPrefix + '--subcategory-inline {{#isSubcategoryDuplicate}}' + suggestionPrefix + '--duplicate-content{{/isSubcategoryDuplicate}}">{{{subcategory}}}</div>\n        <div class="' + suggestionPrefix + '--title {{#isDisplayTitleDuplicate}}' + suggestionPrefix + '--duplicate-content{{/isDisplayTitleDuplicate}}">{{{title}}}</div>\n        {{#text}}<div class="' + suggestionPrefix + '--text">{{{text}}}</div>{{/text}}\n      </div>\n      {{/isTextOrSubcatoryNonEmpty}}\n    </div>\n  </div>\n  ',
-  footer: '\n    <div class="' + footerPrefix + '">\n      Search by <a class="' + footerPrefix + '--logo" href="https://www.algolia.com/docsearch">Algolia</a>\n    </div>\n  '
+  suggestion: '\n  <div class="' + suggestionPrefix + '\n    {{#isCategoryHeader}}' + suggestionPrefix + '__main{{/isCategoryHeader}}\n    {{#isSubCategoryHeader}}' + suggestionPrefix + '__secondary{{/isSubCategoryHeader}}\n    {{#isSimpleLayout}}suggestion-layout-simple{{/isSimpleLayout}}\n  ">\n    <div class="' + suggestionPrefix + '--category-header">{{{category}}}</div>\n    <div class="' + suggestionPrefix + '--wrapper">\n      <div class="' + suggestionPrefix + '--subcategory-column {{#isSubcategoryDuplicate}}' + suggestionPrefix + '--duplicate-content{{/isSubcategoryDuplicate}}">\n        <span class="' + suggestionPrefix + '--subcategory-column-text">{{{subcategory}}}</span>\n      </div>\n      {{#isTextOrSubcatoryNonEmpty}}\n      <div class="' + suggestionPrefix + '--content">\n        <div class="' + suggestionPrefix + '--subcategory-inline {{#isSubcategoryDuplicate}}' + suggestionPrefix + '--duplicate-content{{/isSubcategoryDuplicate}}">{{{subcategory}}}</div>\n        <div class="' + suggestionPrefix + '--title {{#isDisplayTitleDuplicate}}' + suggestionPrefix + '--duplicate-content{{/isDisplayTitleDuplicate}}">{{{title}}}</div>\n        {{#text}}<div class="' + suggestionPrefix + '--text">{{{text}}}</div>{{/text}}\n      </div>\n      {{/isTextOrSubcatoryNonEmpty}}\n    </div>\n  </div>\n  ',
+  footer: '\n    <div class="' + footerPrefix + '">\n      Search by <a class="' + footerPrefix + '--logo" href="https://www.algolia.com/docsearch">Algolia</a>\n    </div>\n  ',
+  empty: '\n  <div class="' + suggestionPrefix + '">\n    <div class="' + suggestionPrefix + '--wrapper">\n        <div class="' + suggestionPrefix + '--content ' + suggestionPrefix + '--no-result">\n            <div class="' + suggestionPrefix + '--title">\n                <div class="' + suggestionPrefix + '--text">\n                    No results found for query <b>{{{query}}}</b>\n                </div>\n            </div>\n        </div>\n    </div>\n  </div>\n  ',
+  searchBox: '\n  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">\n    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-18" viewBox="0 0 40 40">\n      <path d="M30.776 27.146l-1.32-1.32-3.63 3.632 1.32 1.32 3.63-3.632zm1.368 1.368l6.035 6.035c.39.39.4 1.017.008 1.408l-2.23 2.23c-.387.387-1.015.387-1.41-.008l-6.035-6.035 3.63-3.63zm-8.11 1.392c-2.356 1.363-5.092 2.143-8.01 2.143C7.174 32.05 0 24.873 0 16.023S7.174 0 16.024 0c8.85 0 16.025 7.174 16.025 16.024 0 2.918-.78 5.654-2.144 8.01l8.96 8.962c1.175 1.174 1.184 3.07.008 4.246l-1.632 1.632c-1.17 1.17-3.067 1.173-4.247-.007l-8.96-8.96zm-8.01.54c7.965 0 14.422-6.457 14.422-14.422 0-7.965-6.457-14.422-14.422-14.422-7.965 0-14.422 6.457-14.422 14.422 0 7.965 6.457 14.422 14.422 14.422zm0-2.403c6.638 0 12.018-5.38 12.018-12.02 0-6.636-5.38-12.017-12.018-12.017-6.637 0-12.018 5.38-12.018 12.018 0 6.638 5.38 12.02 12.018 12.02zm0-1.402c5.863 0 10.616-4.752 10.616-10.616 0-5.863-4.753-10.616-10.616-10.616-5.863 0-10.616 4.753-10.616 10.616 0 5.864 4.753 10.617 10.616 10.617z"\n      fill-rule="evenodd" />\n    </symbol>\n    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-5" viewBox="0 0 20 20">\n      <path d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm1.35-10.123l3.567 3.568-1.225 1.226-3.57-3.568-3.567 3.57-1.226-1.227 3.568-3.568-3.57-3.57 1.227-1.224 3.568 3.568 3.57-3.567 1.224 1.225-3.568 3.57zM10 18.272c4.568 0 8.272-3.704 8.272-8.272S14.568 1.728 10 1.728 1.728 5.432 1.728 10 5.432 18.272 10 18.272z"\n      fill-rule="evenodd" />\n    </symbol>\n  </svg>\n\n  <form action="void(0);" novalidate="novalidate" class="searchbox sbx-custom">\n    <div role="search" class="sbx-custom__wrapper">\n      <input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">\n      <button type="submit" title="Submit your search query." class="sbx-custom__submit">\n        <svg role="img" aria-label="Search">\n          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-18"></use>\n        </svg>\n      </button>\n      <button type="reset" title="Clear the search query." class="sbx-custom__reset">\n        <svg role="img" aria-label="Reset">\n          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-5"></use>\n        </svg>\n      </button>\n    </div>\n  </form>\n  <!--Js: focus search input after reset-->\n  <script type="text/javascript">\n    //<![CDATA[\n             document.querySelector(\'.searchbox [type="reset"]\').addEventListener(\'click\', function() {\n               this.parentNode.querySelector(\'input\').focus();\n             });\n    //]]>\n  </script>\n  '
 };
@@ -15,0 +17,0 @@

dist/npm/src/lib/version.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports['default'] = '1.3.0';
+exports['default'] = '2.0.0';
 module.exports = exports['default'];

package.json

 {
   "name": "docsearch.js",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Add an autocomplete dropdown to your documentation",
@@ -5,0 +5,0 @@ "main": "dist/npm/index.js",

src/lib/DocSearch.js

@@ -43,5 +43,8 @@ import Hogan from 'hogan.js';
       autoselect: true
-    }
+    },
+    transformData = false,
+    enhancedSearchInput = false,
+    layout = 'collumns'
   }) {
-    DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions});
+    DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions, transformData, enhancedSearchInput, layout});
 
@@ -56,11 +59,21 @@ this.apiKey = apiKey;
     this.autocompleteOptions = autocompleteOptions;
+    this.autocompleteOptions.cssClasses = {
+      prefix: 'ds'
+    };
 
+    this.isSimpleLayout = (layout === 'simple');
+
     this.client = algoliasearch(this.appId, this.apiKey);
     this.client.addAlgoliaAgent('docsearch.js ' + version);
 
+    if (enhancedSearchInput) {
+      DocSearch.injectSearchBox(this.input);
+    }
+
     this.autocomplete = autocomplete(this.input, autocompleteOptions, [{
-      source: this.getAutocompleteSource(),
+      source: this.getAutocompleteSource(transformData),
       templates: {
-        suggestion: DocSearch.getSuggestionTemplate(),
-        footer: templates.footer
+        suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
+        footer: templates.footer,
+        empty: DocSearch.getEmptyTemplate()
       }
@@ -94,2 +107,7 @@ }]);
 
+  static injectSearchBox(input) {
+    input.before(templates.searchBox);
+    input.remove();
+  }
+
   /**
@@ -114,3 +132,3 @@ * Returns the matching input from a CSS selector, null if none matches
    */
-  getAutocompleteSource() {
+  getAutocompleteSource(transformData) {
     return (query, callback) => {
@@ -122,3 +140,7 @@ this.client.search([{
       }]).then((data) => {
-        callback(DocSearch.formatHits(data.results[0].hits));
+        let hits = data.results[0].hits;
+        if (transformData) {
+          hits = transformData(hits) || hits;
+        }
+        callback(DocSearch.formatHits(hits));
       });
@@ -195,6 +217,13 @@ };
 
-  static getSuggestionTemplate() {
+  static getEmptyTemplate() {
+    return (args) => {
+      return Hogan.compile(templates.empty).render(args);
+    };
+  }
+
+  static getSuggestionTemplate(isSimpleLayout) {
     const template = Hogan.compile(templates.suggestion);
     return (suggestion) => {
-      return template.render(suggestion);
+      isSimpleLayout = isSimpleLayout || false;
+      return template.render({isSimpleLayout, ...suggestion});
     };
@@ -201,0 +230,0 @@ }

src/lib/templates.js

@@ -10,2 +10,3 @@ let prefix = 'algolia-docsearch';
     {{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
+    {{#isSimpleLayout}}suggestion-layout-simple{{/isSimpleLayout}}
   ">
@@ -31,2 +32,51 @@ <div class="${suggestionPrefix}--category-header">{{{category}}}</div>
     </div>
+  `,
+  empty: `
+  <div class="${suggestionPrefix}">
+    <div class="${suggestionPrefix}--wrapper">
+        <div class="${suggestionPrefix}--content ${suggestionPrefix}--no-result">
+            <div class="${suggestionPrefix}--title">
+                <div class="${suggestionPrefix}--text">
+                    No results found for query <b>{{{query}}}</b>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+  `,
+  searchBox: `
+  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-18" viewBox="0 0 40 40">
+      <path d="M30.776 27.146l-1.32-1.32-3.63 3.632 1.32 1.32 3.63-3.632zm1.368 1.368l6.035 6.035c.39.39.4 1.017.008 1.408l-2.23 2.23c-.387.387-1.015.387-1.41-.008l-6.035-6.035 3.63-3.63zm-8.11 1.392c-2.356 1.363-5.092 2.143-8.01 2.143C7.174 32.05 0 24.873 0 16.023S7.174 0 16.024 0c8.85 0 16.025 7.174 16.025 16.024 0 2.918-.78 5.654-2.144 8.01l8.96 8.962c1.175 1.174 1.184 3.07.008 4.246l-1.632 1.632c-1.17 1.17-3.067 1.173-4.247-.007l-8.96-8.96zm-8.01.54c7.965 0 14.422-6.457 14.422-14.422 0-7.965-6.457-14.422-14.422-14.422-7.965 0-14.422 6.457-14.422 14.422 0 7.965 6.457 14.422 14.422 14.422zm0-2.403c6.638 0 12.018-5.38 12.018-12.02 0-6.636-5.38-12.017-12.018-12.017-6.637 0-12.018 5.38-12.018 12.018 0 6.638 5.38 12.02 12.018 12.02zm0-1.402c5.863 0 10.616-4.752 10.616-10.616 0-5.863-4.753-10.616-10.616-10.616-5.863 0-10.616 4.753-10.616 10.616 0 5.864 4.753 10.617 10.616 10.617z"
+      fill-rule="evenodd" />
+    </symbol>
+    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-5" viewBox="0 0 20 20">
+      <path d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm1.35-10.123l3.567 3.568-1.225 1.226-3.57-3.568-3.567 3.57-1.226-1.227 3.568-3.568-3.57-3.57 1.227-1.224 3.568 3.568 3.57-3.567 1.224 1.225-3.568 3.57zM10 18.272c4.568 0 8.272-3.704 8.272-8.272S14.568 1.728 10 1.728 1.728 5.432 1.728 10 5.432 18.272 10 18.272z"
+      fill-rule="evenodd" />
+    </symbol>
+  </svg>
+
+  <form action="void(0);" novalidate="novalidate" class="searchbox sbx-custom">
+    <div role="search" class="sbx-custom__wrapper">
+      <input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">
+      <button type="submit" title="Submit your search query." class="sbx-custom__submit">
+        <svg role="img" aria-label="Search">
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-18"></use>
+        </svg>
+      </button>
+      <button type="reset" title="Clear the search query." class="sbx-custom__reset">
+        <svg role="img" aria-label="Reset">
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-5"></use>
+        </svg>
+      </button>
+    </div>
+  </form>
+  <!--Js: focus search input after reset-->
+  <script type="text/javascript">
+    //<![CDATA[
+             document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
+               this.parentNode.querySelector('input').focus();
+             });
+    //]]>
+  </script>
   `
@@ -33,0 +83,0 @@ };

src/lib/version.js

@@ -1,1 +0,1 @@
-export default '1.3.0';
+export default '2.0.0';

test/DocSearch-test.js

@@ -171,3 +171,3 @@ /* eslint-env mocha */
       expect(actual.algoliaOptions.anOption).toEqual(42);
-      expect(actual.autocompleteOptions).toEqual({debug: false,   anOption: 44});
+      expect(actual.autocompleteOptions).toEqual({debug: false, "cssClasses": { "prefix": "ds" }, anOption: 44});
     });
@@ -209,3 +209,3 @@ it('should instantiate algoliasearch with the correct values', () => {
       expect(AutoComplete.calledOnce).toBe(true);
-      expect(AutoComplete.calledWith($input, {anOption: '44', debug: false})).toBe(true);
+      expect(AutoComplete.calledWith($input, {anOption: '44', "cssClasses": { "prefix": "ds" }, debug: false})).toBe(true);
     });
@@ -985,7 +985,7 @@ it('should listen to the selected and shown event of autocomplete', () => {
         // When
-        actual('foo');
+        actual({'foo': 'bar'});
 
         // Then
         expect(render.calledOnce).toBe(true);
-        expect(render.calledWith('foo')).toBe(true);
+        expect(render.args[0][0]).toEqual({'isSimpleLayout': false, 'foo': 'bar'});
       });
@@ -992,0 +992,0 @@ });

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5713224

increased by0.46%

Lines of code

13638

increased by1.46%

Worsened metrics

Number of low supply chain risk alerts

11

increased by10%

No dependency changes