Browser search module to use with Backbone.js
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" ]
}
]
*/There are several options to customize the behavior of iggy.
buttonsFirst(Booleanoptional; default =false): Move the buttons+andsearchto the left side.sortby(Stringoptional; default =name): Sorting is always first done bysort(desc). But it's possible to change second sorting element with this option.dir(Stringoptional; default =asc): The sort direction of the sort key configured with optionsortby. allowed are "asc" and "desc".searchButton(Object): Optional search button configuration. It will only displayed ifsearchButton.templateis defined. To change the sytle you can use the css class.search-btn.searchButton.template(String): A html string to display the search buttonsearchButton.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 eventsearchButton.cssclass(String): You can define a custom class to add to the search button
These options are valid for all facets.
type(String): The facet type. See the List below with the types.name(String): The facet name used asnamefor the results.label(String): The label to show as name within the GUI.value(String|Number|Arrayoptional ): A predefined value to populate the facet on load. The type is specific top the facettypesort(String): The sorting within the facet selector results.pinned(Booleanoptional; default:false): A pinned facet is always open and displayed to the GUI.active(Booleanoptional; default:false): Withactiveit's possible to define one facet as focused on load.labeltemplate(Stringoptional): 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(Functionoptional): A function to modify the facet result on selection. Teh function arguments arevalue,facetandrawand it expects thecssclass(String): A optional css class added to the selection li to add a custom style.
Basic string facet to add a string.
-
type(== string): the type has to bestring -
value(Stringoptional ): A predefined string
Basic number facet to add a numeric value.
-
type(== number): the type has to benumber -
value(Numberoptional ): A predefined number -
min(Numberoptional ): The minimal value allowed -
max(Numberoptional ): The maximum value allowed -
step(Numberoptional ): The numeric steps allowed -
operators(String[]optional ): an Array of operators to select. Something like>=,<=, ... -
operator(Stringoptional ): Preselected operator
Define a numeric range.
type(== range): The type has to berangevalue([Number,Number]optional ): A numeric range defined by an array of two numbersmin(Numberoptional ): The minimal value allowedmax(Numberoptional ): The maximum value allowedstep(Numberoptional ): The numeric steps allowed
Select a value from a list of options or add custom list elements.
type(== array): the type has to bearrayvalue(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" ] ) }
- Array of elements
count(Numberoptional): The max. allowed number of elementscustom(Booleanoptional; default:true): Iftrueit's allowed to add Options on the fly. Otherwise only values within the options are allowed.
Define custom actions by using the event facet, catch the event and handle it.
type(== event): the type has to beeventevent(String): An event name that will be fired on click/select to the IGGY instance.
The daterange facet uses the sub module Date Range Picker to define a date or a date range.
type(== daterange): the type has to bedaterangevalue([Date|Number|String,Date|Number|String]optional ): The predefined values as two values for start and end date.daterange(Stringoptional): A date format to parse stringvaluesand display the date within the picker. Numeric values will be treated as timestamps (ms)opts(Objectoptional): An object of options passed directly to the date range picker module. Details see: Options
A Select2 interface to use it inside a facet.
type(== select): the type has to beselectvalue(String[]optional ): The predefined values.options(String[]|Object(value,label)[]|Function, optional): The options to show as selection. You could also use theoptsto 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" ] ) }
- Array of elements
count(Numberoptional): The max. allowed number of elementsmultiple(Booleanoptional; defaulttrue):Allow multiple selections. This will lead to a tag like view.opts(Objectoptional): An object of options passed directly to the date range picker module. Details see: Options
| 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-01-25 | added edit for type array #46,fixed select2 display bug #45 |
| 0.1.4 | 2016-01-14 | fixed outerclick within daterange widget #44 |
| 0.1.3 | 2016-01-13 | fixed daterange facet #41, #42; Added two step exit on ESC #42 |
| 0.1.2 | 2015-10-29 | added facet sorting #38; facet type 'select' is now editable #40 |
| 0.1.1 | 2015-10-07 | Bugfix select2 and datepicker position #36; Optimized select2 to handle async DataAdapters #35; Added labeltemplate setting to design the labels #34;Type array can now used with async options #33 |
| 0.1.0 | 2015-08-07 | Abbiblity to change simple elements or add values to array types (cuurently not availible for select2 types); Added close on outerclick; added array features count:12 and `custom:false |
| 0.0.18 | 2015-07-22 | added modelId to handle the id attributes for Backbone 1.2.x |
| 0.0.17 | 2015-07-22 | fix css bug #27; removed unused tests, updated dependencies |
| 0.0.16 | 2015-06-17 | fixed select of last search element in facet search #26; changed handling of TAB and ENTER #25 |
| 0.0.15 | 2015-06-10 | removed console.log + added a bunch of error logs to detect bugs #23 #24 |
| 0.0.14 | 2015-05-03 | Fixed selection display bug created with select2 4.0.0. |
| 0.0.13 | 2015-05-02 | Every facet can be done by hitting "TAB". Added "event" facet to trigger a event on selection. |
| 0.0.12 | 2015-04-16 | Fixed bug for predefined select type |
| 0.0.11 | 2015-03-30 | Added facet option modifyKey to be able to change the target key of the modify method. If not set the regular value will be replaced. It also possible to define the default by setting the IGGI-option modifyKey. |
| 0.0.10 | 2015-03-30 | Optimized array selection result. |
| 0.0.9 | 2015-03-30 | Optimized select2 selection result. Nicer multi result design |
| 0.0.8 | 2015-03-30 | Automatic add of new facet after finished a selection. Style changes. Added distribution files |
| 0.0.7 | 2015-03-27 | Optimized modify arguments by passing the raw attributes as third argement; Optimized build. |
| 0.0.6 | 2015-03-27 | Optimized select2 groups |
| 0.0.5 | 2015-03-26 | Added optional value config to predefine the facets |
| 0.0.4 | 2015-03-26 | general changes. Added select2, range, switch to font-awsome, ... |
| 0.0.3 | 2015-03-24 | added daterange facet and optimized gui and code |
| 0.0.2 | 2015-03-23 | added option modify |
| 0.0.1 | 2015-03-05 | Initial commit |
Initially Generated with generator-mpnodemodule
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.