JSFiddle - React, Tailwind, and code Playground

by LeroyRon

HTML

<script>
var calendar = 
{
current: {year: 2017, month: 10, day: 13, hour: 12, minute: 0, second: 0, milli: 0 },
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
getDayName: function(i) {return this.dayNames[i]},
getMonthDays: function () {return new Date(calendar.current.year, calendar.current.month, 0).getDate()},
getMonthFirstDay: function () {return new Date(calendar.current.year + "-" + calendar.current.month + "-" + 1).getDay()}
}
</script>

<div id="timeline" class="TL">
    <div id="fullscale" class="FS dg">
        <div id="timecode">
        
        </div>
        <div class="left retract">
                
            </div>
        <div class="right retract">
            
        </div>
    </div>
</div>

CSS

body {
        margin: 0;
        padding: 0;
    }
    #timeline {
        height: 50px;
    }
    #timeline, .TL div {
        position: absolute; 
    }
    #fullscale {
        width: 100%;
        height: 20px; /* 30px */
        background: #333;
        border-bottom: #666;
        overflow: hidden;
    }
    #fullscale.FS div {
        float: left;
        position: relative; 
    }
    #fullscale.FS span {
        position: relative;
        display: inline-block;
    }
    #fullscale.FS .retract {
        width: 5px;
        height: 100%;
        background: #FFA218;
        cursor: pointer;
        z-index: 1;
    }
    #fullscale.FS .right.retract {
        right: 0;
        position: absolute;
    }
    #fullscale.FS #timecode {
        white-space: nowrap;
        position: absolute;
        left: 5px;
    }
    .dg {
        color: #eee;
        font: 11px 'Lucida Grande', sans-serif;
        text-shadow: 0 -1px 0 #111;
    }
    .span .freq div {
        height: 5px;
        border-left: #666 1px solid;
        margin-left: -1px;
    }
    .span .freq div.first {
        height: 8px;
        border-left: #FFF 1px solid;
    }
    .span div {
        width: 100%;
    }
    .track {
        position: absolute !important;
        height: 20px;
        width: 100%;
    }
    .locator {
        height: 100px;
        width: 1px;
        left: 50%;
        position: absolute !important;
        border-left: 1px solid #FFA218;
    }

JavaScript

var app =
{
    width: window.innerWidth,
    height: window.innerHeight
}								//[name,phase,bands,span,first]
var frequencies = ['year',7,14,50],['month',6,12,50],['day',5,calendar.getMonthDays,50,calendar.getMonthFirstDay],['hour',24,12,30],['minute',3,60,20],['second',2,60,20],['milli',1,100,5]
var scale = 
{
		precent: 100,
    centerFreq: 7,
    left_Offset: 0.0,
    right_Retract: 1.0,
    init: function () {
        this.freq = {} 
        var fLen = frequencies.length
        var changeRange = 100/(frequencies.length+1)// 14.28571428571429 percent scale interval change <->
        alert(changeRange)
        for (var f=0; f<fLen; f++) {
          this.freq[frequencies[f][0]] = {
          name: frequencies[f][0],
          phase: frequencies[f][1],
          bands: frequencies[f][2],
          span: frequencies[f][3],
          first: frequencies[f][4],
          generate: generateFreq,
          exec: enterTimespan,
          mod: changeRange*(f+1)
          }
        }
		}
}

scale.init()