README.md 3.42 KB
Newer Older
1
# g1
S Anand's avatar
S Anand committed
2

3
`g1` is library of interaction patterns in [Gramex](https://learn.gramener.com/guide/g1/).
S Anand's avatar
S Anand committed
4

5
Install using:
S Anand's avatar
S Anand committed
6

7
8
9
10
```bash
yarn install g1
# ... OR ...
npm install --save g1
11
12
```

13
To use all features, add this to your HTML:
14
15

```html
16
<script src="node_modules/g1/dist/g1.min.js"></script>
17
18
19
<script src="node_modules/g1/dist/mapviewer.min.js"></script>
```

20
## Interactions
21

22
23
- [$.urlfilter](docs/urlfilter.md) changes URL query parameters when clicked. Used to filter data.
- [$.urlchange](docs/urlchange.md) listens to hash changes and routes events
S Anand's avatar
S Anand committed
24
- [$.search](docs/search.md) highlights elements as you type in a search box
25
- [$.highlight](docs/highlight.md) toggles classes on elements when clicked or hover
26

27
## Components
28

29
30
31
- [$.formhandler](docs/formhandler.md) renders a HTML table from a [FormHandler URL](https://learn.gramener.com/guide/formhandler/)
- [$.template](docs/template.md) renders lodash templates. Requires [lodash](https://lodash.com/)
- [$.dropdown](docs/dropdown.md) renders a Bootstrap dropdown. Requires [Bootstrap](https://getbootstrap.com/docs/4.2/)
32
- [$.translate](docs/translate.md) translates text to other languages using [Gramex translate](https://learn.gramener.com/guide/translate/)
33
34
35
- [g1.sanddance](docs/sanddance.md) moves DOM elements smoothly based on data
- [g1.mapviewer](docs/mapviewer.md) renders leaflet maps and simplifies adding layers from data.
    - Note: Mapviewer is not included in [g1.min.js](dist/g1.min.js). Include [mapviewer.min.js](dist/mapviewer.min.js)
36

37
## Utilities
38

39
40
41
42
43
44
45
46
- [g1.url.parse](docs/url.md) parses a URL into a structured object
    - [url.join](docs/url.md#urljoin) joins two URLs
    - [url.update](docs/url.md#urlupdate) updates a URL's query parameters
- [$.ajaxchain](docs/ajaxchain.md) chains AJAX requests, loading multiple items in sequence
- [L.TopoJSON](docs/topojson.md) loads TopoJSON files just like GeoJSON. Requires [topojson](https://github.com/topojson/topojson)
- [$.dispatch](docs/dispatch.md) is like [trigger](https://api.jquery.com/trigger/) but sends a native event (triggers non-jQuery events too)
- [g1.datafilter](docs/datafilter.md) filters the data based on the options
- [g1.types](docs/types.md) returns the data types of columns in a DataFrames
47

48
## Libraries
49

50
51
You can import either [g1.min.js](dist/g1.min.js) -- which has all of these functions --
or one of the individual libraries below:
52

53
54
55
- [ajax.min.js](dist/ajax.min.js)
- [datafilter.min.js](dist/datafilter.min.js)
- [event.min.js](dist/event.min.js)
56
- [formhandler.min.js](dist/formhandler.min.js)
57
58
- [highlight.min.js](dist/highlight.min.js)
- [leaflet.min.js](dist/leaflet.min.js)
59
- [sanddance.min.js](dist/sanddance.min.js)
60
- [search.min.js](dist/search.min.js)
61
- [template.min.js](dist/template.min.js)
62
- [translate.min.js](dist/translate.min.js)
63
- [types.min.js](dist/types.min.js)
64
65
- [urlchange.min.js](dist/urlchange.min.js)
- [urlfilter.min.js](dist/urlfilter.min.js)
66

67
[mapviewer.min.js](dist/mapviewer.min.js) is not part of [g1.min.js](dist/g1.min.js).
68

69
For debugging, use [g.js](dist/g.js) -- an un-minified version.
70

71
72
73
74
75
## Browser support

Every release is tested on the current versions of Chrome, Edge and Firefox.
Internet Explorer is not explicitly tested, but many components work on IE.

S Anand's avatar
S Anand committed
76
77
## Contributing

78
79
80
81
- [Add an issue](https://code.gramener.com/cto/g1/issues)
- [Browse the source code](https://code.gramener.com/cto/g1)
- [Set up g1 for development locally](CONTRIBUTING.md#set-up)
- [Release g1 on npm](CONTRIBUTING.md#release)