ember-timerange-picker v0.1.0

Ember-timerange-picker

##WIP

{{timerange-picker
	interval="15"
	minTime="06:00"
	maxTime="12:00"
	class="time-range-picker"
	afterDrag=(action "getTimeRange") 
	initFromValue="08:00"
	initToValue="10:00"
}}

Supported attrs:

• Interval: minimal amount of minutes needed to change value (default: 15)
• maxTime: Maximal time (default: 24:00)
• minTime: Minimal time (defualt: 00:00)
• minDuration: Minimal duration that can be picked (defaults to Interval, setting this to 0 is not reccomended)
• maxDuration: Maximum duration that can be picked - WIP
• class: Applied to the whole element
• containerClass: Applied to the internal container element
• afterDrag(fromTime, toTime): Action called after the dragging has ended
• onChange(fromTime, toTime): Action called whenever any value changed
• initFromValue: starting value of the "from" marker // binding not supported atm
• initToValue: starting value of the "to" marker // binding not supported atm

Features

• control + drag for synchronous dragging of both markers (TODO: make it work with cmd button for mac)

The addon does not currently come with styling, feel free to grab this SCSS

* {box-sizing:border-box;}
$red:#DB2828; 

.time-range-picker {
	width: 100%;
	height: 75px;
	position: relative;
	border: 1px solid transparentize(grey, 0.8);
	border-radius: 5px;
	background: transparentize(grey, 0.9);
	user-select:none;
	-webkit-user-select:none;
	padding: 25px 30px;

	.tp-container {
		width: 96%;
		margin: 2%;
		position: relative;
	}

	.marker {
		position: absolute;
		width: 28px;
		height: 28px;
		background: transparentize($red, 0.5);
		border: 2px solid $red;
		border-radius:50%;
		cursor: pointer;
		top: -14px;
		z-index: 2;
		transition: 0.2s background;

		&.from {

			background: transparentize(green, 0.5);
			border: 2px solid green;

			&.dragging {
				background: transparentize(green, 0);
			}

			&:hover {
				z-index: 3;
			}
		}

		&.to {
			&.dragging {
				background: transparentize($red, 0);
			}
		}
	}

	.icon {
		font-size:2rem;
	}

	.line {
		width: 100%;
		height: 5px;
		position: absolute;
		left: 0;
		top: 0;
		transform: translate(0,-50%);	
		background: gray;
		border-radius: 5px;
	}
}

ToDO

• require chronology
• implement container to provide whitespace
• sync marker movement on ctrlKey
• settable min and max time
• touch support
• improve the code quality of the mouseMove function
• interval set by a param
• set marker width on didInsertElement
• AM/PM format
• minutes format
• onChange function
• write tests
• test the onChange and afterDrag function
• test the interval
• test resize functionality
• test ctrlKey dragging
• test dragging out of range
• test min and max duration
• render into SVG (optionally?)
• settable minDuration
• settable maxDuration
• basic functionality
• sync dragging if limits are reached
• make sure X = limit if limit is reached
• update chronology check when ctrlKey is pressed
• write custom computed macros
• synchronous dragging when dragging space between markers
• styles
• functionality