iggy

Browser search module to use with Backbone.js

Init

const myIggyInst = new Iggy( $facets, $options )

Example:

const options = {
  sortby: "name"
};

const facets = [
  {
    "type": "string",
    "name": "cmp",
    "label": "Company"
  },{
    "type": "array",
    "name": "tgs",
    "label": "Tags",
    "options": [ "IT", "Production", "Management" ]
  }
]
const myIggyInst = new Iggy( facets, options )

// results as event
myIggyInst.on( "change", function( coll ){
  coll.toJSON()
  /*
  [
    {
      "type": "string",
      "name": "cmp",
      "value": "Acme"
    },{
      "type": "array",
      "name": "tgs",
      "value": [ "IT", "Production" ]
    }
  ]
  */
});

// or function call `getQuery`
myIggyInst.getQuery().toJSON()
/*
[
  {
	"type": "string",
	"name": "cmp",
	"value": "Acme"
  },{
	"type": "array",
	"name": "tgs",
	"value": [ "IT", "Production" ]
  }
]
*/

Options

There are several options to customize the behavior of iggy.

• buttonsFirst ( Boolean optional; default = false ): Move the buttons + and search to the left side.
• sortby ( String optional; default = name ): Sorting is always first done by sort (desc). But it's possible to change second sorting element with this option.
• dir ( String optional; default = asc ): The sort direction of the sort key configured with option sortby. allowed are "asc" and "desc".
• searchButton ( Object ): Optional search button configuration. It will only displayed if searchButton.template is defined. To change the sytle you can use the css class .search-btn.
  • searchButton.template ( String ): A html string to display the search button
  • searchButton.event ( String; default = search ): A event name to fire when the button was clicked.
  • searchButton.pullright ( Boolean; default = false ): Display the search button on the right istead of adding it after the "+" button.
  • searchButton.debounce ( Number; default = 300 ): Debounce time on fire of the search event
  • searchButton.cssclass ( String ): You can define a custom class to add to the search button

Facets

These options are valid for all facets.

General Options

• type (String): The facet type. See the List below with the types.
• name (String): The facet name used asname for the results.
• label (String): The label to show as name within the GUI.
• value (String|Number|Array optional ): A predefined value to populate the facet on load. The type is specific top the facet type
• sort (String): The sorting within the facet selector results.
• pinned (Boolean optional; default: false): A pinned facet is always open and displayed to the GUI.
• active (Boolean optional; default: false): With active it's possible to define one facet as focused on load.
• labeltemplate (String optional): It's possible to change the html of the GUI inside the Facet selector result. Probably used to add an icon to the result.
• modify (Function optional): A function to modify the facet result on selection. Teh function arguments are value, facet and raw and it expects the
• cssclass (String): A optional css class added to the selection li to add a custom style.

Facet: string

Basic string facet to add a string.

• type (== string ): the type has to be string

• value (String optional ): A predefined string

Facet: number

Basic number facet to add a numeric value.

• type (== number ): the type has to be number

• value (Number optional ): A predefined number

• min (Number optional ): The minimal value allowed

• max (Number optional ): The maximum value allowed

• step (Number optional ): The numeric steps allowed

• operators (String[] optional ): an Array of operators to select. Something like >=, <=, ...

• operator (String optional ): Preselected operator

Facet: range

Define a numeric range.

• type (== range ): The type has to be range
• value ([Number,Number] optional ): A numeric range defined by an array of two numbers
• min (Number optional ): The minimal value allowed
• max (Number optional ): The maximum value allowed
• step (Number optional ): The numeric steps allowed

Facet: array

Select a value from a list of options or add custom list elements.

• type (== array ): the type has to be array
• value (String[] optional ): The predefined values.
• options (String[]|Object(value,label)[]|Function): The options to show as selection. Possible options:
  • Array of elements [ "pizza", "pasta", "carne" ]
  • Array ob objects [ { label: "Pizza", value: "p" }, { label: "Coke", value: "c" } ]
  • A Function to load the data: function( currSelection, facet, cb ){ cb( [ "a", "b" ] ) }
• count (Number optional): The max. allowed number of elements
• custom (Boolean optional; default: true): If true it's allowed to add Options on the fly. Otherwise only values within the options are allowed.

Facet: event

Define custom actions by using the event facet, catch the event and handle it.

• type (== event ): the type has to be event
• event (String ): An event name that will be fired on click/select to the IGGY instance.

Facet: daterange

The daterange facet uses the sub module Date Range Picker to define a date or a date range.

• type (== daterange ): the type has to be daterange
• value ([Date|Number|String,Date|Number|String] optional ): The predefined values as two values for start and end date.
• daterange (String optional): A date format to parse string values and display the date within the picker. Numeric values will be treated as timestamps (ms)
• opts (Object optional): An object of options passed directly to the date range picker module. Details see: Options

Facet: select

A Select2 interface to use it inside a facet.

• type (== select ): the type has to be select
• value (String[] optional ): The predefined values.
• options (String[]|Object(value,label)[]|Function, optional): The options to show as selection. You could also use the opts to pass your options directly to select2 e.g. as DataAdapter Possible options:
  • Array of elements [ "pizza", "pasta", "carne" ]
  • Array ob objects [ { label: "Pizza", value: "p" }, { label: "Coke", value: "c" } ]
  • A Function to load the data: function( currSelection, facet, cb ){ cb( [ "a", "b" ] ) }
• count (Number optional): The max. allowed number of elements
• multiple (Boolean optional; default true):Allow multiple selections. This will lead to a tag like view.
• opts (Object optional): An object of options passed directly to the date range picker module. Details see: Options

Release History

Initially Generated with generator-mpnodemodule

The MIT License (MIT)

Copyright © 2015 mpneuried, http://www.tcs.de

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.