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