Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
174 lines (131 sloc) 4.81 KB

Slab

Slab is a JavaScript component that handles search filters and queries.

Getting Started

Demo

A demo of the library in action can be found here.

Supported Browsers

So far tested on Chrome, Firefox, Safari and Opera.

Dependencies

Slab has 1 dependency – and that is Complete Me.

To Run

$ git clone git@github.com:callum-hart/Slab.git
$ cd Slab
$ npm install
$ grunt watch

To Use

Include CSS and JavaScript from Complete Me. Both need to be included before the CSS and JavaScript for Slab:

<!-- CSS -->
<link href="complete-me.min.css" rel="stylesheet">
<link href="slab.min.css" rel="stylesheet">

<!-- JavaScript -->
<script type="text/javascript" src="complete-me.min.js"></script>
<script type="text/javascript" src="slab.min.js"></script>

Create an instance:

var instance = new Slab(element, { options });

element can be a selector or a DOM element.

Configuration

firstComplete

  • Details
  • Type Object
  • Required Yes

secondComplete

  • Details
  • Type Object
  • Required Yes

withButton

  • Details
    • Give the Slab input a submit button.
  • Type Boolean
  • Default False

buttonClass

  • Details
    • Change what class is applied to the button.
  • Type String
  • Default ss-button
  • Condition

firstComplete.defaultKey

  • Details
    • Key that should be taken as the search filter if Slab is submitted when no filter has been selected by the user. The key is a reference to an object in the data option from Complete Me. data type for firstComplete will need to be Array <Object>.
  • Type String

Callbacks

onSubmit

onSubmit: (searchKey, searchValue) {}

  • Details
    • When the Slab input is submitted.
  • Arguments (searchKey, searchValue)
  • Condition
    • Only called when the search filter and query are valid.

Markup

Generated HTML

The HTML generated by Slab is:

<div class="sb-container">
  <span class="sb-label"></span>
  <div class="sb-complete first-complete-me cm-container">
    <div class="cm-input-wrap">
      <input type="text" class="cm-input">
      <input type="text" class="cm-suggestion">
    </div>
    <div class="cm-results-wrap">
      <ul class="cm-results">
        <li><a href="#"></a></li>
      </ul>
    </div>
  </div>
  <div class="sb-complete second-complete-me cm-container">
    <div class="cm-input-wrap">
      <input type="text" class="cm-input">
      <input type="text" class="cm-suggestion">
    </div>
    <div class="cm-results-wrap">
      <ul class="cm-results">
        <li><a href="#"></a></li>
      </ul>
    </div>
  </div>
  <span class="ss-tab"></span>
</div>

Conditional CSS Classes

Classes that are applied when a certain condition is true.

label-showing

.label-showing

  • Condition
    • Applied when the search filter is selected.
  • Element
    • Applied to .sb-container

focussed

.focussed

  • Condition
    • Applied when the Slab input is focussed.
  • Element
    • Applied to .sb-container

Conditional classes are applied to the Complete Me's rendered inside Slab. These can be found here.

You can’t perform that action at this time.