daniel-llach/dw-filter

An filter components for darwined

dw-filter (under construction...)

A filter component for darwinEd© app of Foris.

• live example: http://daniel-llach.github.io/dw-filter/

Index:

1.- Install
2.- Use
3.- API
    3.1.- Init
      3.1.1.- Title
      3.1.2.- Type
      3.1.3.- Search
      3.1.4.- Height
      3.1.5.- Config
      3.1.6.- Data
    3.2.- Val
    3.3.- Destroy
4.- Listeners
5.- Demo
6.- Possible problems

1.- Install

1.1.- Install dependencies from bower into your project

  bower install --save dw-filter

1.2.- Include dependencies in your html:

<!-- dw-filter dependencies -->
<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script src="./component/dw-filter.js"></script>
<link rel="stylesheet" type="text/css" href="./component/dw-filter.css">

2.- Use

Execute the dwFilter class on a selector. It will be rendered a dw-filter element in this container inherit its position and width.

$('#id').dwFilter();

3.- API

3.1.- Init

If the dwFilter() class has an object the API interprets that is a new element and create it.

The API accepts the next configurations:

3.1.1.- title

3.1.2.- type

· checkbox: List of checkboxes

An example:

$('#id').dwFilter({
  title: 'Origen',
  type: 'checkbox',
  search: true,
  config: {
    key_attr: 'id',
    value_attr: 'content'
  },
  data: [
    {
      id: 4522,
      content: 'Real'
    },
    {
      id: 5645,
      content: 'Proyección 1'
    },
    {
      id: 2378,
      content: 'Proyección 2'
    }
  ]
});

· selectChain List of selects

An example:

$('#sample2').dwFilter({
  title: 'title2',
  type: 'selectChain',
  search: 'outer',
  config: {
    key_attr: 'id',
    name_attr: 'name',
    value_attr: 'content',
    options_key_attr: 'id',
    options_value_attr: 'content',
    options_active_attr: 'selected'
  },
  data: [
    {
      id: 1555,
      name: 'The select',
      content: [
        {
          id: 4565,
          content: 'The option 1',
          selected: false
        },
        {
          id: 1212,
          content: 'The option 2',
          selected: true
        }
      ]
    },
    {
      id: 3434,
      name: 'Super select',
      content: [
        {
          id: 4565,
          content: 'Super option 1',
          selected: false
        },
        {
          id: 1212,
          content: 'Super option 2',
          selected: false
        }
      ]
    },
    {
      id: 2211,
      name: 'What a select',
      content: [
        {
          id: 4565,
          content: 'What option 1',
          selected: false
        },
        {
          id: 1212,
          content: 'What option 2',
          selected: true
        }
      ]
    },
    {
      id: 4535,
      name: 'Original select',
      content: [
        {
          id: 4565,
          content: 'Original option 1',
          selected: false
        },
        {
          id: 1212,
          content: 'Original option 2',
          selected: true
        }
      ]
    }
  ]
});

3.1.3.- search

The possible options are:

· inner: Filter the options in the dw-filter element

· outer: Return the string into the search input when you realize a val methods

· If is not define this attribute no show the search input on the element template

3.1.4.- height

· auto: The element is high as its contents.

· number + px / %: A specific height in px or %. Example:

height: '250px'

· *if you not specified the value will be 132px

3.1.5.- config

3.1.6.- data

3.2.- Val

$('#id').dwFilter('val');

Return the follow structure:

{
  search: '',
  data: []
}

the search is the string of the outer .

The data property is specific by type as follow:

· chekbox: Array of change ids in options

{
  search: '',
  data: [23, 78, 44]
}

· selectChain: Array of change ids in options

{
  search: "text",
	data: [
		{
			name: 'The select',
			content: 1212 // id sede
		},
		{
			name: 'Supe select',
			content: null // no id select
		}
	]
}

3.3.- Destroy

This methods empty the container div and remove class too.

$('#id').dwFilter('destroy');

4.- Listeners

When change any value that affects the the filter data the selected div when w-filter has instantiated update and trigger a change events that you can listen as follow:

$('#id').on({
  change: function(event){
    var result = $('#id').data('result');
    console.log("sample1 data: ", result);
  }
});

5.- Demo

You can view a local demo installing the component and open /bower_components/dw-filter/index.html in your browser (localhost/your_rute).

You must change the bower_components dependencies rutes as follow:

<script src="../jquery/dist/jquery.min.js"></script>
<script src="../underscore/underscore-min.js"></script>

6.- Possible problems

6.1.- Don't show svg background-image:

Confirm that your server are serving well the svg files, add to your .htacces the follow:

AddType image/svg+xml .svg .svgz

dw-filter's Issues

get id from selected item when click de add button

create multiselect type

multiselect compounds by a view items area, a dw-typeahead component and a add button. The idea is choose a item in the dw-typeahead and add in to the itemview area with the add button.

bug when no select any items and press add btn

when remove an item from dw-list, this must reappears in the dw-typeahed

when select an item this disappears from dw-typeahed

include fonts !!

integrate dw-typeahead

pass selected items data from dw-typeahead to dw-list

integrate dw-list

icons for inner and outer search values

consolidate the get value from dw-list

create multiselect template structure

integrate the basic multiselect structure type template into the component

document multiselect type