chadokruse / algolia-materialize-jekyll Goto Github PK

Currently we do not use Materialize styling for the sortBySelector widget as the Materialize widget needs to be initialized AFTER the element is rendered by Instantsearch.

As a interim hack, we simply adjust the styling of the select element and do not use the Materialize select plugin.

The TODO is to figure out how best to initialize the Materialize plugin in the normal Instantsearch flow.

Other widgets have the templates API which can take a function, but the sortBySelector does not.

Adding a full custom widget seems unnecessary, though as of last November it was the recommended method.

Instantsearch does provide the render method, but haven't yet figured out how to implement.

Have attempted initializing via a partial custom widget, but that simply renders another widget which has no interactivity with Instantsearch.

search.addWidget({
    render: function(options) {
      $('select').material_select();
    }
  });

Have also tried forcing init into the normal Instantsearch addWidget workflow:

search.addWidget(
    {
      init: function(options) {
        $('select').material_select();
      }
    },
    instantsearch.widgets.sortBySelector({
      container: '#ais-widget-sort-by',
      cssClasses: {
        root: 'input-field'
      },
      indices: [
        {name: 'demo', label: 'Most relevant'},
        {name: 'demo_amount_desc', label: 'Grant size'},
      ]
    })
  );

Docs: http://materializecss.com/side-nav.html

Instantsearch does not appear to allow for use of CSS classes to target the creation of two similar, but separate HTML widgets from one addWidget initialization (only CSS IDs)

Possible solution(s)

1. Create two JS initializations to target each HTML template, hiding the HTML elements as appropriate using Materialize grid helpers (seems too verbose)
2. ???

Goal is to enable non-technical users to create grants tables

Consider narrowing scope of automation to just Refinement headers

templates: {
    header: getHeader('Type')
}
function getHeader(title) {
    return '<h5>' + title + '</h5>';
}

Inspiration
https://github.com/squilliams/squilliams.github.io/blob/ac5519bb3409b5c4ab07f8f068efbe40996dbe16/_site/searching/app.js

Materialize 1.0 no longer depends on jQuery.

• Convert jQuery references in search.js

Currently the stylized checkbox is hidden due to this Materialize bug.

Indications are a fix will come with Materialize 1.0 release.

Reproduction:
https://codepen.io/anon/pen/GMBzjX

• Integrate forms feature with a new feedback FAB
• Integrate Netlify deploy button

Docs: https://community.algolia.com/instantsearch.js/v2/widgets/infiniteHits.html

Existing implementation of hits template uses allItems feature to display Materialize table-based hits view.

May need to replicate table view using custom HTML/CSS and/or other Materialize helpers to allow for use of a single items template (thus, removing dependency on allItems)

• Use IRS 990PF data or foundation-specific, public data source? (e.g. Open Philanthropy xls or Good Ventures csv)??
• Add sortBySelector widget
• Add priceRanges widget

To reproduce:
Open site in Chrome or Safari on an iOS device.
Start entering text in search box (prior to the search box becoming pinned to the top)
Search box disappears after typing first letter

Works normally if the typing begins AFTER pushpin applies the pinned class

Confirmed on iOS Chrome + iOS Safari
Able to reproduce via Simulator