gramex-ui
Gramex library
Last updated 2 years ago by sanand0 .
UNLICENSED · Repository · Original npm · Tarball · package.json
$ cnpm install gramex-ui 
SYNC missed versions from official npm registry.

Usage

First, read the documentation at https://learn.gramener.com/docs/g

You can install via:

npm install gmin

G.min.js is bundled with Gramex 0.x. Add these lines to the end of your code:

<script src="{{ static_url('/js/jquery2.min.js') }}">
<script src="{{ static_url('/js/G.min.js') }}">

NOTE: jQuery 2.0 or above is required to work with SVG elements.

Testing

Visit https://learn.gramener.com/docs/g.test/mocha/ to run unit tests. Or...

  • Install nodejs. Note: On Cygwin, re-save the npm .sh files with UNIX line-endings
  • npm install -g uglify-js mocha
  • Clone this repo and go to the test folder
  • Run a web server, e.g. python -mSimpleHTTPServer
  • Visit http://127.0.0.1:8888/mocha/

Selenium tests

The test/ui folder has UI test cases. To run them, go to the test folder and run:

python -mSimpleHTTPServer

Then open ui/index.html in Selenium IDE > File > Open Test Suite.

Interaction

  1. Click to filter
    • TODO: Handle URL filtering for multiple values of the same key.
  2. Hover to highlight
  3. Search as you type
    • TODO: debounce to be implemented
    • TODO: search refresh event to be exposed
  4. Click to reveal
  5. Pan & Zoom
    • TODO: smooth viewbox animation
    • TODO: pinch to zoom on touch devices
    • TODO: slide to pan on touch devices
    • TODO: mousewheel to increase / decrease level of zoom on desktops
    • TODO: hover to pan or drag to pan on desktops
    • TODO: click on control to toggle zoom behaviour
  6. ZoomTo: Smoothly zoom to an element
  7. Brush to filter. (This is a 2D slider. With custom draggable handles, one can mimic horizontal sliders, vertical sliders AND rectangle selections. This will interact in exactly the same way that a rectangle in PowerPoint interacts.)
  8. Drag to re-position / re-size / rotate. Move / resize an element anywhere on the page, apply an arbitrary transformation, AND STORE IT
  9. Formula-based refresh of content / attributes, like AngularJS / MoneyFlicks

Layouts

  1. Preserve aspect ratio on resize
  2. Equal height columns

Components

  1. Slider.
  2. Timeline
  3. Loading indicator
  4. Dropdown
    • TODO: Search as you type
    • TODO: Multiselect
    • TODO: Hierarchy
    • TODO: Select all (clear all), Show selected (show all)
  5. Gradient picker
  6. Color picker

Common TODO

  • If there is a clash, e.g. multiple highlights acting on the same element, how to resolve it?
  • How should highlights be used as persistent filters across operations?
  • Implement namespaces so that interactions can be toggled independently
  • Events thrown by all of these

Publishing

To publish this on npm, run:

git push --follow-tags
npm publish               # as sanand0

Current Tags

  • 0.0.1                                ...           latest (2 years ago)

1 Versions

  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 2
This Month 2
Last Day 0
Last Week 0
Last Month 1
Dependencies (4)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |