Permalink
Browse files

feat(1.0.0): release of omni-slider

  • Loading branch information...
chrisrng committed Jun 2, 2016
1 parent e8e9d43 commit 9202fc59d65c65210e56b707cf68978ef39275cf
Showing with 1,942 additions and 0 deletions.
  1. +20 −0 .gitignore
  2. +200 −0 README.md
  3. +22 −0 bower.json
  4. +28 −0 demo/fly.css
  5. +253 −0 demo/index.html
  6. +87 −0 gulp/build.js
  7. +16 −0 gulp/core/modules.js
  8. +18 −0 gulp/core/style-engine.js
  9. +37 −0 gulp/gulp-config.js
  10. +8 −0 gulp/test.js
  11. +8 −0 gulpfile.babel.js
  12. +50 −0 omni-slider.css
  13. +531 −0 omni-slider.js
  14. +1 −0 omni-slider.min.css
  15. +1 −0 omni-slider.min.js
  16. +52 −0 package.json
  17. +532 −0 src/omni-slider.js
  18. +78 −0 src/omni-slider.scss
@@ -0,0 +1,20 @@
._*
.~lock.*
.buildpath
.idea
.project
.settings
# Ignore node stuff
node_modules/
npm-debug.log
libpeerconnection.log
# OS-specific
.DS_Store
# Bower
bower_components
# Build
tmp
200 README.md
@@ -0,0 +1,200 @@
# omni-slider
This is a javascript implementation of a two way / one way slider.
Details:
- Vanilla JS
- 12 KB minified
- 20 KB unminified.
Expects an ES5 shimmed environment when it is used (i.e. `bind`, `forEach`)
## Features
- Two way or one way slider
- Left to right sliding
- Touch and mouse capability
- Cross user agent support
- Currency (`typeof Number`) or Date (`typeof Date`)
- Custom max and min
- Pub/sub implementation for each state in the process
- Overlap and touching each other for final state
- Preset the initial location of the handles
- Theme-able
- Disable-able
- Push data into slider (setting the value)
## Supports
- IE8
- IE9
- IE11
- Chrome
- Safari
- Mobile Safari
- Android Default Browser
## Installation
To Start:
```html
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="omni-slider.css">
<script type="text/javascript" src="es5-shim.js"></script>
<script type="text/javascript" src="omni-slider.js"></script>
<scipt>
var slider = new Slider(<elementContainer>, <options>);
</script>
```
`<elementContainer>` - is the `div` container element
`<options>` - to go beyond the default options
## API
### new Slider(elementContainer, options)
`<elementContainer>`
- expects a `div` DOM element or node
- this acts as a wrapper for the slider, all of the sliders DOM elements will be transcluded inside the `<element>` provided
`<options>`
- must be of type `object`
- contains the options for the slider
- Currently supported options:
- `isOneWay` - Boolean, denotes if slider only has one handle
- `isDate` - Boolean, denotes if returning a date object
- `overlap` - Boolean, denotes if handles will overlap or just sit next to each other
- `min` - Lower bounds of the slider (if isDate ? typeof String [yyyy-mm-ddThh:mm] : typeof Number)
- `max` - Upper bounds of the slider (if isDate ? typeof String [yyyy-mm-ddThh:mm] : typeof Number)
- `start` - Initial starting position of the left hand slider (if isDate ? typeof String [yyyy-mm-ddThh:mm] : typeof Number)
- `end` - Initial starting position of the right hand slider (if isDate ? typeof String [yyyy-mm-ddThh:mm] : typeof Number)
Example:
```javascript
var element = document.getElementById('harryPotter');
var options = {
isDate: false,
min: 3,
max: 1980,
start: 7,
end: 31,
overlap: false
}
var mySlider = new Slider(element, options);
```
### Slider.prototype.subscribe(topic, listener)
`topic` (type String)
- `start` - triggers when the handle is selected
- `moving` - triggers when the handle is being moved
- `stop` - triggers when the handle is released
`listener` (type Function)
- will receive the result of `Slider.prototype.getInfo()` as an agrument
- will be called with the argument (above) once the topic has been fired/published
`returns`
- an object with accessor method `remove()` which removes the listner from binding to the topic
Example:
```javascript
var mySlider = new Slider(element, options);
var harry = mySlider.subscribe('start', function(data) {
console.log("harry " + data.left);
});
var potter = mySlider.subscribe('moving', function(data) {
console.log("potter " + data.right);
});
var data = mySlider.subscribe('start', function(data) {
console.log(data);
});
potter.remove();
var hermione = mySlider.subscribe('moving', function(data) {
console.log("hermione " + data.right + data.left);
});
```
### Slider.prototype.getInfo()
Essentially the data for the slider is *always* available since the `slider-fill` is made up of percentages. `slider.getInfo()` merely extracts the said percentages and makes it readable based on the context of the application (either date or value).
Returns an object with `left` and `right` properties.
`left`
- value of the left handle of the slider
- can be a date object if slider `isDate` === true or a floating point number otherwise
`right`
- value of the right handle of the slider
- can be a date object if slider `isDate` === true or a floating point number otherwise
Example:
```javascript
var mySlider = new Slider(...);
var data = mySlider.getInfo();
console.log(data.left); // left handle value
console.log(data.right); // right handle value
```
If it is a one way slider, then it will return just the value rather than an object.
Note: on the one way slider, the value is calculated from the left handle rather than the fill.
### Slider.prototype.move(data, preventPublish)
`data`
- type `object` for two way sliders or `number` for one way sliders
- if it is an object it should be constructed:
`left`
- value of the left handle of the slider
- can be a date object if slider `isDate` === true or a floating point number otherwise
`right`
- value of the right handle of the slider
- can be a date object if slider `isDate` === true or a floating point number otherwise
`preventPublish`
- type `boolean`
- if true then it won't publish the `moving` topic otherwise it will
Reverse of `Slider.prototype.getInfo()` in terms of data provided. If you are setting a two way slider then you pass in an object otherwise if it is a one way slider you only pass in a value.
This API does all the checks for overlapping and other built-in features so you know the slider is always valid.
Example:
```javascript
// Two Way
var mySlider = new Slider(... , {isOneWay: false});
var data = {
left: 7,
right: 31
}
mySlider.move(data);
// One Way
var myOneWaySlider = new Slider(... , {isDate: true, isOneWay: true});
myOneWaySlider.move(new Date('1980-07-31'));
```
## Development
```
npm install
npm start
```
## Known Issues
- Chrome Device Emulator does not allow us to bind `touchmove` to the `document` (i.e. `document.addEventListener('touchmove', this.movingHandler, true);`). **Workaround: disable emulate touch screen under Emulation at the bottom tabs of dev tools**
- Provided style sheet is a `.css` file not a `.scss` file so if the build process does not import `.css` it won't get taken. **Workaround: rename the `.css` file into `.scss`**
## License
omni-slider is released under the MIT license.
@@ -0,0 +1,22 @@
{
"name": "omni-slider",
"main": "omni-slider.js",
"version": "1.0.0",
"authors": [
"Chris Ng"
],
"description": "A two (or one) way vanilla js slider that runs from ie8 to *",
"keywords": [
"slider",
"priceline"
],
"license": "MIT",
"homepage": "priceline.com",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
@@ -0,0 +1,28 @@
.fly .slider-circle {
display: none;
}
.fly .slider {
height: 1px;
background: #999;
border: none;
}
.fly .slider-fill {
height: 5px;
top: -2.5px;
}
.fly .handle {
width: 22px;
height: 22px;
border-radius: 22px;
border-color: #999;
}
.fly .handle:active {
border-color: #0a84c1;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
Oops, something went wrong.

0 comments on commit 9202fc5

Please sign in to comment.