Skip to content
This repository has been archived by the owner on Jun 8, 2018. It is now read-only.

Commit

Permalink
Merge pull request #13 from nolikob/preview
Browse files Browse the repository at this point in the history 
Added examples page and readme into docs folder Fixes #10
  • Loading branch information
@VojtechKlos
VojtechKlos authored Dec 20, 2017
2 parents ec3d86d + 34b873b commit 8138bd1
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 0 deletions.
76 changes: 76 additions & 0 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# Pickathing
Simple select written in Vanilla JS

[Examples](examples.html)

Just do `var select = new Pickathing('your-id', true/false)`

true /false is for the searchfield to show or not.

If you want multiple select it is easy! Just create normal multiple select:

`<select multiple> ...`

and initialization is the same as with normal select.

There is an option to filter one select by the other. To do that simply add options object as a third parameter like so:

`new Pickathing('your-id', true/false, {filterAttr: 'data-filter', filter: select})`

The select needs to be instance of Pickathing class.

## More docs:

`new Pickathing('element-id', hasSearch, options)`

### Parameters

#### element-id
(String) Id of the select you want to activate

#### hasSearch
(Boolean) true/false determines if the searchfield is added or not

#### options __(optional)__
(Object) key: value pairs of other options

##### options.filter
(Instance) Instance of already initialized Pickathing select which gets filtered BY this select

##### options.filterAttr
(String) Attribute for which to look when filtering another select __(Has to be present if you use options.filter)__

##### options.searchLabel
(String) Sets the placeholder in the search field

##### options.focusDelay
(Number) Sets delay after the search field or the first item is selected. Should match transition of opening the dropdown. If you did not change transition in CSS you do not have to change this value

#### options.ignoreDiacritics
(Boolean) true/false determines if the searchfield ignores diacritics or not

### Methods

#### Pickathing.reset(fireOnChange)
Resets the filter to initial state. Accepts `fireOnChange` (true or false) to trigger the onChange method or not

#### Pickathing.onChange()
You can fire the onChange event manually with this method, or you can set what function should be executed
```javascript
let select = new Pickathing(...);
select.onChange = () => {
...
}
```
By default this method is blank and does not do anything.

### Events

#### Pickathing.onChange
By default it is blank and serves as a method as well. Fire after the select has changed its value (e.g. clicking on option). Has to be set after initialization:
```javascript
let select = new Pickathing(...);
select.onChange = () => {
...
}
```
107 changes: 107 additions & 0 deletions docs/examples.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pickathing</title>

<link rel="stylesheet" href="../dist/pickathing.css">

<style>
.container {
width: 300px;
}
</style>
</head>
<body>
<h1>Pickathing functionality preview</h1>
<div class="container">
Classic select
<select name="demo-select" id="demo-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7" disabled>Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<br></br>
Classic select that ignores diacritics in search
<select name="demo-select" id="demo-select-ignore-diacritics">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7" disabled>Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
Multiple select
<select name="demo-select-multiple" tabindex="2" id="demo-select-multiple" multiple>
<option value="ahoj" selected>Option 1</option>
<option value="cusik" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7" disabled>Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<br></br>
Filtered selects
<select name="demo-select-filter-2" tabindex="3" id="demo-select-filter-2">
<option value=" ">Select Universe</option>
<option value="1" data-universe="marvel">Marvel</option>
<option value="2" data-universe="dc">DC</option>
</select>
<select name="demo-select-filter-1" tabindex="4" id="demo-select-filter-1" multiple>
<option value=" ">Select a hero</option>
<option value="1" data-universe="dc">Batman</option>
<option value="2" data-universe="dc">Superman</option>
<option value="3" data-universe="dc">Aquaman</option>
<option value="4" data-universe="marvel">Iron Man</option>
<option value="5" data-universe="marvel">Spider Man</option>
<option value="6" data-universe="marvel">Thor</option>
</select>
</div>
<div class="container">
<form action="" method="POST">
<hr>
<p>
This is a form test!
</p>
<select name="demo-select-multiple-form" tabindex="5" id="demo-select-multiple-form" multiple>
<option value="ahoj" selected>Option 1</option>
<option value="cusik">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<button type="submit">Submit</button>
</form>
</div>
<script src="../src/pickathing.js"></script>
<script>
var demoSelect = new Pickathing('demo-select', true, {searchLabel: 'Search for options...'});
var demoSelect2 = new Pickathing('demo-select-ignore-diacritics', true, {searchLabel: 'Search for options...', ignoreDiacritics: true});

var demoSelectMultiple = new Pickathing('demo-select-multiple', true);
var demoSelectFilter1 = new Pickathing('demo-select-filter-1', false);
var demoSelectFilter2 = new Pickathing('demo-select-filter-2', false, {filterAttr: 'data-universe', filter: demoSelectFilter1});
var demoSelectMultipleForm = new Pickathing('demo-select-multiple-form', false);
</script>
</body>
</html>

0 comments on commit 8138bd1

Please sign in to comment.