Commit c35b7755 authored by S Anand's avatar S Anand
Browse files

WIP

parent 813b4eed
Pipeline #74924 passed with stage
in 3 minutes and 10 seconds
......@@ -26,16 +26,55 @@ This renders a dropdown with 3 options -- Red, Green, Blue.
`key` enables urlfilter for dropdown. If Red option is selected from dropdown, URL is appended with `?colors=Red`
If the labels are different from the values, you can use a list of
`{value: ..., label: ...}` objects.
```html
<div class="dropdown-object"></div>
<script>
$('.dropdown-object').dropdown({
data: [{ label: 'Red', value: 1 }, { label: 'Green', value: 2 }]
])
</script>
```
The data objects need not use `label:` and `value:` as keys. You can pick any
other key using the `label:` and `value:` options.
```html
<div class="dropdown-object"></div>
<script>
$('.dropdown-object').dropdown({
data: [{ x: 'Red', y: 1 }, { x: 'Green', y: 2 }],
label_key: 'x', // use data[*].x as the label, instead of data[*].label
value_key: 'y' // use data[*].y as the value, instead of data[*].value
])
</script>
```
You can set the default value of the dropdown using the `value:` key.
```html
<div class="dropdown-default"></div>
<script>
$('.dropdown-default').dropdown({
key: 'colors',
data: ['Red', 'Green', 'Blue'],
value: $('#color').val(url.searchKey.city) // Must match data string or .value
})
</script>
```
By default, the selected dropdown values are appended to URL query string. To append to the hash instead, use `target: '#'`.
```html
<div class="container3"></div>
<script>
$('.container3').dropdown(
{ key: 'colors',
data: ['Red', 'Green', 'Blue'],
target: '#'
})
$('.container3').dropdown({
key: 'colors',
data: ['Red', 'Green', 'Blue'],
target: '#'
})
</script>
```
......@@ -70,10 +109,15 @@ To use bootstrap-select options, use `options:`
## $.dropdown options
- `data`: Array of values.
- `data`: Array of values. Values may be strings, or objects. Objects have keys:
- `label`: text to display in the dropdown
- `value`: value to submit when item is selected
- `value`: default selected value. This must match the `value` key in the `data` object
- `url`: End point that returns the `data`. If `data:` is also given, `data` takes priority.
- `target`: defines how URL is updated. Can be `''` (Default), `#` or `pushState`
- `key`: key with which URL is updated.
- `value_key`: name of the key that defines the value in `data:` objects. Default: `"value"`
- `label_key`: name of the key that defines the label in `data:` objects. Default: `"label"`
- `multiple`: To render a dropdown that supports multi-select. Can be `true` or `false` (Default).
- `options`: Supports same options as [bootstrap-select options](https://developer.snapappointments.com/bootstrap-select/options/)
......@@ -98,58 +142,4 @@ To use bootstrap-select options, use `options:`
data: ['Red', 'Green', 'Blue']
})
</script>
```
key-value pairs as `data`:
```html
<div class="container6"></div>
<script>
var data_obj = [
{ value: 0, label: 'Hyderabad' },
{ value: 1, label: 'Delhi' },
{ value: 2, label: 'Mumbai' },
{ value: 3, label: 'Chennai' }
]
$('.container6').dropdown({
key: 'city',
data: data_obj,
target: '#'
})
</script>
```
To define keys to be used from `data_obj`:
```html
<div class="container7"></div>
<script>
var data_obj = [
{ city_code: 0, city_name: 'Hyderabad' },
{ city_code: 1, city_name: 'Delhi' },
{ city_code: 2, city_name: 'Mumbai' },
{ city_code: 3, city_name: 'Chennai' }
]
$('.container7').dropdown({
key: 'city',
data: data_obj,
value: 'city_code',
label: 'city_name',
target: '#'
})
</script>
```
To set dropdown value:
```html
<div class="container8"></div>
<script>
$('.container8').on('load', function() {
var url = g1.url.parse(location.hash.replace(/^#/, ''))
$('#flag').val(url.searchKey.city)
$('#flag').selectpicker('refresh')
}).dropdown({
key: 'city',
data: ['Afghanistan', 'Armenia', 'Angola', 'Austria'],
target: '#'
})
</script>
```
......@@ -4,8 +4,8 @@ import deepmerge from 'deepmerge'
var default_options = {
target: '',
multiple: false,
value: 'value',
label: 'label'
value_key: 'value',
label_key: 'label'
}
export function dropdown(js_options) {
......@@ -16,6 +16,9 @@ export function dropdown(js_options) {
if (options.data) {
render(options.data)
// Set the default
if (options.value)
self.find('.selectpicker').val(options.value).selectpicker('refresh')
// trigger 'load' event
self.trigger({type: 'load'})
}
......@@ -44,9 +47,11 @@ export function dropdown(js_options) {
remove: true
})
}
//re-render dropdown template options with fetched data
typeof data[0] == 'object' ? self.find('.selectpicker').html(_.template(default_templates['template_dropdown_object'])(options)) : self.find('.selectpicker').html(_.template(default_templates['template_dropdown_options'])(options))
self.find('.selectpicker').selectpicker(options.options)
// re-render dropdown template options with fetched data
var template = typeof data[0] == 'object' ? 'template_dropdown_object' : 'template_dropdown_options'
self.find('.selectpicker')
.html(_.template(default_templates[template])(options))
.selectpicker(options.options)
}
return this
......
......@@ -14,7 +14,7 @@ key = key ? key : '' %>
<!-- var template_dropdown_object -->
<% _.each(data, function(item) { %>
<option value="<%- item[value] %>" label="<%- item[label] %>"><%- item[label] %></option>
<option value="<%- item[value_key] %>" label="<%- item[label_key] %>"><%- item[label_key] %></option>
<% }) %>
<!-- end -->
......
......@@ -119,7 +119,6 @@ MapViewer.prototype.addLegend = function(options) {
return map_legend
}
/*
* @method cacheData(<String> datasetName, 'String' URL || <Object> data): <Object> data
* GETs data if not already there in this.gData
......
......@@ -26,6 +26,7 @@
<div class="container7 w-25 m-3"></div>
<div class="container8 w-25 m-3"></div>
<div class="container9 w-25 m-3"></div>
<div class="container10 w-25 m-3"></div>
</div>
<script>
......@@ -138,7 +139,7 @@
t.end()
})
tape('$().dropdown() supports objects in data', function(t) {
tape('$().dropdown() supports objects in data', function (t) {
var data_obj = [
{ value: 0, label: 'Hyderabad' },
{ value: 1, label: 'Delhi' },
......@@ -146,35 +147,58 @@
{ value: 3, label: 'Chennai' }
]
$('.container8')
.on('load', function() {
t.deepEquals($('.container8 option').get()
.map(function(item){ return item.text }), data_obj.map(function(row){ return row.label }))
t.end()
})
.dropdown({
key: 'city',
data: data_obj,
target: '#'
})
.on('load', function () {
t.deepEquals($('.container8 option').get()
.map(function (item) { return item.text }), data_obj.map(function (row) { return row.label }))
t.end()
})
.dropdown({
key: 'city',
data: data_obj,
target: '#'
})
})
tape('$().dropdown() set value from url', function(t) {
tape('$().dropdown() objects key-value names can be customized', function (t) {
var data_obj = [
{ x: 0, y: 'Hyderabad' },
{ x: 1, y: 'Delhi' },
{ x: 2, y: 'Mumbai' },
{ x: 3, y: 'Chennai' }
]
$('.container9')
.on('load', function() {
var url = g1.url.parse(location.hash.replace(/^#/, ''))
url.searchKey.flag = 'Armenia'
$('#flag').val(url.searchKey.flag)
$('#flag').selectpicker('refresh')
t.equals($('#flag').val(), 'Armenia')
t.end()
})
.dropdown({
data: ['Afghanistan', 'Armenia', 'Angola', 'Austria'],
key: 'flag',
target: '#'
})
.on('load', function () {
t.deepEquals($('.container9 option').get()
.map(function (item) { return item.text }), data_obj.map(function (row) { return row.y }))
t.end()
})
.dropdown({
key: 'city',
data: data_obj,
target: '#',
value_key: 'x',
label_key: 'y'
})
})
tape('$().dropdown() set value from url', function (t) {
$('.container10')
.on('load', function () {
t.equals($('.container10 select').val(), 'MUM')
t.end()
})
.dropdown({
data: [
{ value: 'HYD', label: 'Hyderabad' },
{ value: 'DEL', label: 'Delhi' },
{ value: 'MUM', label: 'Mumbai' },
{ value: 'CHE', label: 'Chennai' }
],
key: 'flag',
target: '#',
value: 'MUM'
})
})
</script>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment