caribouflex/caribou-timer

caribou-timer is a timer element, built using Polymer

<caribou-timer>

<caribou-timer> is a Polymer 2 element used to display a timer (Android style)

This element allow you to set a default time. This time can be edited with the plus and minus button. Or if the attribute 'input-time' is added, it can be edited with the keyboard and the arrow key.

A maximum and minimum limit can be set Moreover you can set the 'remaining-time' property. If set this property will automatically start the timer, a the specific point according to the whole-time value Example: '

Styling The following custom properties and mixins are available for styling:

Custom property	Description	Default
--editable-text-color	Time color on the editable field (inputTime=true)	#64B5F6
--editable-text-color-disabled	Time color on the editable field disabled (inputTime=true)	#64B5F6
--non-editable-text-color	Time color on the non editable field (inputTime=false)	#64B5F6
--time-button-color	Plus and minus button color	#64B5F6
--time-button-color-disabled	Disabled plus and disabled minus button color	#64B5F6
--time-button-color-hover	Plus and minus button color hover	#64B5F6
--circle-line-passed-color	Color of the passed circle line	#64B5F6
--circle-line-remaining-color	Color of the remaining circle line	#64B5F6
--circle-line-endpoint-fill-color	Fill color or the little circle at the edge of the progression line	#64B5F6
--circle-line-endpoint-stroke-color	Stroke color or the little circle at the edge of the progression line	#64B5F6
--button-start-color	Button start color	#64B5F6
--button-pause-color	Button pause color	#64B5F6
--button-start-color-hover	Button start color on hover	#64B5F6
--button-pause-color-hover	Button pause color on hover	#64B5F6

Usage

<caribou-timer input-time whole-time="60" max-time-limit="3600" min-time-limit="30"></caribou-timer>

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Running tests from the command line

When in the caribou-timer directory, run polymer test

License

Apache License 2.0

caribou-timer's Issues

Edge : Small circle doesn't follow the time circle line

IE11: Arrow key doesn't work to up and down values.

Firefox : The little circle that follow the line is not linear.

While the counter is going down, the circle follow the line but sometimes jump back and come back to the line.

Firefox : The input number arrows are not hide.

Edge - Changing time with the key are not set.

When the time is changed with the arrow key (up and down), the time isn't set and when the start button is clicked, the time start at the previous value saved.

IE11 : Circle is very small and the text overlapsed.

To fix that just add the Height=300 to the svg element.