iggy

<!--DOCSSTART-->

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

| Version | Date | Description | | :-----: | :--------: | :--------------------------------------- | | 0.4.1 | 2017-10-26 | Fixed long selections by wrapping lines #75 | | 0.4.0 | 2017-10-19 | Added option buttonsFirst to move the buttons to the left side #73; fixed handling of very long array elements #72; fixed compatibility with font-awesome 5 #74 | | 0.3.0 | 2017-04-03 | The search Button is now before the add "+" button. So the order is now ( facet_1, facet_2, ... , facet_n, search_btn, add_btn ) | | 0.2.8 | 2017-04-03 | Fixed daterange facet locale option overwrite #71 | | 0.2.7 | 2017-02-02 | Fixed load if no options are passed #70 | | 0.2.6 | 2017-02-02 | Fixed doubled search event on mouse click | | 0.2.5 | 2017-02-01 | #69 tried to reduce jumping ui + optimized ux | | 0.2.4 | 2017-01-28 | #68 Tab fixes and reactivate search button on ENTER | | 0.2.3 | 2017-01-27 | #67 fixed date range input if used date format option and input as number | | 0.2.2 | 2017-01-27 | #65 fixed search button handling; #66 filter empty elements; array facet respect array max count on click | | 0.2.1 | 2017-01-26 | #58 Changed style of search button; #63 Optimized display of array facet gui; #61 Fixed pinned facets, added active and optimized tab navigation. | | 0.2.0 | 2017-01-25 | #55 fixed date range picker and added option dateformat; #58 added search button; #59 The "+" is hidden if the facet select is open; Facets can be pinned:true to be always displayed and be undeletable. | | 0.1.13 | 2016-08-11 | handle select2 jQuery text option texts #57 | | 0.1.12 | 2016-05-06 | fixed array results editable #53; fixed remove of option for non custom options #56 | | 0.1.11 | 2016-04-01 | fixed date range picker by setting startDate and enDate #55 | | 0.1.10 | 2016-03-22 | FF bugfix for Select2 facet #54; Added a sorting option sortby #52; Made array results editable #53 | | 0.1.9 | 2016-02-11 | fixed predefined select2 with adapter #51 | | 0.1.8 | 2016-02-09 | fixed deleting facet on empty select2 selection #49; sort predefined results by facet definition #50 | | 0.1.7 | 2016-01-28 | another fix for #45 | | 0.1.6 | 2016-01-27 | fixed select2 options on edit #48 | | 0.1.5 | 2016-0