heating-timeline
This README outlines the details of collaborating on this Ember addon.
Adding to existing project
- Install private addon
npm install https://bitbucket.org/sauceio/heating-timeline#tag --save
- Install Hammer.js
bower install hammerjs --save
- Add hammer js file to ember-cli-build.js
app.import('bower_components/hammerjs/hammer.min.js');
- Add css styles (currently found in tests/dummy/app/styles/app.scss)
Component
Add the following component to you hbs views.
{{heating-timeline}}
Attributes
Model
A collection of ember models representing heating periods. Each period must have the following attributes:
- start - A decimal number between 0 and - 24 using .25 increments
- end - A decimal number between 0 and - 24 using .25 increments
- temp - A decimal number between 10 - 30 using .5 increments
Minimized
The timeline has two modes, expanded (default) and minimized. Pass false to this attributes to display the minimized view.
{{heating-timeline minimized=true}}
Actions
periodSelected
This action is called when a period is selected. The action is passed the period object as a parameter
emptyPeriodSelected
This action is called when an empty period is selected. The action is passed an empty period object as a parameter. This object has start and end properties which will represent the whole of the empty period.
panDisabled
Whnce set to true the timeline can not be panned by swiping along the x axis
Service
The heating timeline comes with an ember service which you should use to control the scale and offset from your routes or other components.
timeline: Ember.inject.service(),
Methods
Go to period
Zoom the timeline to a given period defined by the start and end params. The timeline will zoom in so the given period takes the middle 50% of the x axis. In the following example the time line will scale to 3x and the x axis will start at 15:00.
this.get('timeline').goToPeriod(17, 21)
Reset
This is the same as setting the scale to 1 & offset to 0. It will reset the timeline to the 24 hour view.
this.get('timeline').reset()
Active Period
Set a period as active so it's temperature can be adjusted.
this.get('timeline').set('activePeriod', period);
Scale
Sets the scale of the timelines x axis. This default is 1 and will display 24 hours along the x axis. 2 will display 12 hours etc.
this.get('timeline').set('scale', 2);
Offset
Combined with scale this offsets the x axis by a number of hours. The defaut is 0 so the x axis starts at 00:00. 8 will offset the x axis so it starts at 08:00 etc.
this.get('timeline').set('offset', 8);
Installation
git clone https://bitbucket.org/sauceio/heating-timeline
this repositorycd heating-timeline
npm install
bower install
Running
ember serve
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit https://ember-cli.com/.