JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div id="container">
<div class="top-bar">
<div class="modal-title">Custom date
<span class="selected-input-type">range</span>
|
<a href="https://s.codepen.io/dannyblackstock/debug/pJBzRX?" target="_blank">period</a>
</div>
<div class="modal-close-button"></div>
</div>
<div class="panel" id="timeline-panel">
<div class="panel-title">
Timeline
</div>
<label><input id="select-year-radio" name="scale" type="radio">Year</label>
<label><input id="select-month-radio" name="scale" type="radio" checked>Month</label>
</div>
<div class="panel" id="selected-panel">
<div class="panel-title">Selected</div>
<div class= "not-set" id="selected-range">Not set <i class="fa fa-times"></i></div>
</div>
<div id="custom-scrollbar">
<div class="scrollbar-period" id="scrollbar-start"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period" id="scrollbar-end"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div>
</div>
<div id="range-selector">
<div class="period-block-container show-year"><div class="period-block"></div><div class="month">Aug</div><div class="year">2015</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2016</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2017</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2018</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2019</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2020</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div>
</div>
<div id="year-range-selector">
<div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2015</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2016</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2017</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2018</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2019</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2020</div></div>
</div>
<div class="bottom-bar">
<label id="multiple-rows-checkbox-label">
<input type="checkbox" /> Individual segments
</label>
<button class="positive">Add</button>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
@import "bourbon";
// ----- VARIABLES ----- //
$panel-title-color: #aaa;
$text-color: #444;
$hover-color: #f4f4f4;
$medium-grey: #ccc;
$light-selected-color: #E0EAFF;
$selected-click-color: #5A8BFF;
$default-button-color: #f5f5f5;
$period-block-color: #f0f4f9;
$border-radius: 4px;
$attributes-list-height: 300px;
$panel-width: 250px;
$exclude-link-width: 45px;
$deselect-member-button-width: 15px;
$deselect-member-button-padding: 5px;
// ----- GENERAL ----- //
* {
font-family: 'Open Sans', 'Helvetica', sans-serif;
font-size: 13px;
color: $text-color;
@include user-select(none);
}
html, body {
height: 100%;
overflow: hidden;
}
body {
text-align: center;
padding: 25px;
}
input {
// center the checkbox....
vertical-align: middle;
position: relative;
top: -1px;
}
#container {
width: 795px;
border: 1px solid $panel-title-color;
padding: 25px;
display: inline-block;
text-align: left;
box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
// ----- TOP BAR ----- //
.top-bar {
margin: 0 0 30px 10px;
@include display(flex);
justify-content: space-between;
}
.modal-title {
font-size: 24px;
font-weight: 300;
a {
font-size: 24px;
font-weight: 300;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.selected-input-type {
color: $selected-click-color;
font-size: 24px;
font-weight: 300;
}
}
.modal-close-button {
width: 18px;
height: 18px;
margin-top: 9px;
background-image: url('https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png');
background-size: 18px;
opacity: .5;
cursor: pointer;
@include transition(opacity .2s);
&:hover {
opacity: .7;
}
&:active {
opacity: 1;
}
}
// ----- PANELS ----- //
.panel {
width: $panel-width;
overflow: auto;
display: block;
float: left;
&:hover {
.panel-controls, .find-bar {
opacity: 1;
}
}
}
#timeline-panel {
overflow: hidden;
label {
margin-right: 10px;
}
input {
margin: 0 5px 0 2px;
}
}
#selected-panel {
float: right;
#selected-range {
background: $selected-click-color;
padding: 4px 10px;
border-radius: $border-radius;
color: white;
@include transition(background .2s, color .2s);
& .fa-times {
float: right;
margin-top: 2px;
color: white;
opacity: 1;
cursor: pointer;
@include transition(opacity .2s);
}
&.not-set {
background: $medium-grey;
color: darken($medium-grey, 25%);
& .fa-times {
opacity: 0;
cursor: default;
}
}
}
}
.panel-title {
padding: 5px 0px 5px 0px;
//margin: 0 0 0 10px;
color: $panel-title-color;
font-size: 10px;
text-transform: uppercase;
border-top: 1px solid $panel-title-color;
}
.list-container {
height: $attributes-list-height;
overflow: auto;
}
.list {
padding: 0 0 5px 0;
margin: 0;
cursor: pointer;
list-style-type: none;
overflow-x: hidden;
&:before {
content: '';
pointer-events: none;
width: 100%;
position: absolute;
bottom: 0;
height: 15px;
@include linear-gradient(transparent 0%, white 100%);
}
}
#custom-scrollbar {
float: left;
margin: 40px 0 5px 0;
clear: both;
padding: 0 2px;
cursor: ew-resize;
}
.scrollbar-period {
box-sizing: border-box;
display: inline-block;
width: 12px;
height: 24px;
margin-right: 1px;
background: $period-block-color;
border: 1px solid darken($period-block-color, 10%);
@include transition(background-color .15s);
&.hovered {
background-color: white;
}
&.selected {
background-color: lighten($selected-click-color, 15%);
border: 1px solid lighten($selected-click-color, 5%);
border-radius: $border-radius;
&.hovered {
background-color: lighten($selected-click-color, 20%);
}
}
}
#scrollbar-start {
border-left: 3px solid $selected-click-color;
}
#scrollbar-end {
border-right: 3px solid $selected-click-color;
}
#range-selector {
overflow-y: hidden;
overflow-x: hidden;
white-space: nowrap;
margin-bottom: 90px;
width: 780px;
}
#year-range-selector {
display: none;
overflow-y: hidden;
white-space: nowrap;
padding-top: 40px;
margin-bottom: 101px;
overflow-x: hidden;
width: 797px;
}
.period-block-container {
display: inline-block;
//cursor: ew-resize;
cursor: pointer;
vertical-align: top;
height: 58px;
margin-right: 0px;
padding: 2px;
border-top: 1px solid white;
//box-sizing: border-box;
@include transition(background-color .15s, border .15s);
&.selected {
background-color: $light-selected-color;
font-weight: 600;
border-top:1px solid $selected-click-color;
border-bottom:1px solid $selected-click-color;
.period-block {
border: 1px solid darken($selected-click-color, 5%);
background-color: $selected-click-color;
}
}
&.first-selected {
border-left:1px solid $selected-click-color;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&.last-selected {
border-right:1px solid $selected-click-color;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&:hover .period-block {
background-color: lighten($period-block-color, 5%);
}
&.selected:hover .period-block {
background-color: lighten($selected-click-color, 5%);
}
}
.period-block {
width: 54px;
height: 20px;
background: $period-block-color;
border: 1px solid darken($period-block-color, 10%);
border-radius: $border-radius;
@include transition(background-color .15s);
}
.year-period-block-container {
@extend .period-block-container;
height: auto;
}
.year-period-block {
@extend .period-block;
height: 60px;
width: 129px;
}
.bottom-bar {
text-align: right;
}
#multiple-rows-checkbox-label {
margin-right: 15px;
display: none;
}
// ----- BUTTONS ----- //
button {
padding: 0 20px;
height: 32px;
border: 1px solid darken($default-button-color, 25);
border-radius: $border-radius;
background-color: $default-button-color;
text-align: center;
cursor: pointer;
@include transition(background-color .2s);
&:hover {
background-color: darken($default-button-color, 10);
}
&:active {
background-color: darken($default-button-color, 25);
}
&.positive {
background-color: $selected-click-color;
color: white;
border: 0;
&:hover {
background-color: darken($selected-click-color, 10);
}
&:active {
background-color: darken($selected-click-color, 25);
}
}
}
var clickedScrollbar = false;
var clickedSelector = false;
var scrollWidth = 60;
var clickedYearSelector = false;
var startIndex = 0;
var endIndex = 0;
var startYearIndex = 0;
var endYearIndex = 0;
var initialX = 0;
var dragging = false;
var clickedPeriodIndex = 0;
var clickedYearPeriodIndex = 0;
var timeout;
var mouseX;
$('#year-range-selector').on('mousedown', '.year-period-block-container', function(e) {
clickedYearSelector = true;
clickedYearPeriodIndex = $(this).index();
});
// click detection
$('#range-selector').on('mousedown', '.period-block-container', function(e) {
clickedSelector = true;
clickedPeriodIndex = $(this).index();
// get range selector position
var rangeSelectorX = $('#range-selector').offset().left;
var rangeSelectorY = $('#range-selector').offset().top;
var rangeSelectorWidth = $('#range-selector').width();
timeout = setInterval(function(event) {
// select the period at the coordinates
var draggedElement = document.elementFromPoint(mouseX, rangeSelectorY);
// convert to jquery and get its index
var draggedIndex = $(draggedElement).index();
//change clicked element
clickedPeriodIndex = draggedIndex;
// change hovered element
$('.scrollbar-period').removeClass('hovered');
$('.scrollbar-period').eq(draggedIndex).addClass('hovered');
// scroll one period if near the edge every 350ms
if (mouseX > (rangeSelectorX + (rangeSelectorWidth - 30))) {
$('#range-selector').animate({
scrollLeft: $('#range-selector').scrollLeft() + scrollWidth
}, 0);
if (draggedIndex + 1 < 60) {
//clear the scrollbar IDs
$('.scrollbar-period').attr('id', '');
// add the IDs back
$('.scrollbar-period').eq(draggedIndex - 11).attr('id', 'scrollbar-start');
$('.scrollbar-period').eq(draggedIndex + 1).attr('id', 'scrollbar-end');
}
} else if ((mouseX < (rangeSelectorX + 30))) {
$('#range-selector').animate({
scrollLeft: $('#range-selector').scrollLeft() - scrollWidth
}, 0);
if (draggedIndex - 1 >= 0) {
//clear the scrollbar IDs
$('.scrollbar-period').attr('id', '');
// add the IDs back
$('.scrollbar-period').eq(draggedIndex - 1).attr('id', 'scrollbar-start');
$('.scrollbar-period').eq(draggedIndex + 11).attr('id', 'scrollbar-end');
}
}
if ($(draggedElement).hasClass('period-block-container')) {
//console.log()
if (draggedIndex < startIndex) {
startIndex = draggedIndex;
} else if (draggedIndex > endIndex) {
endIndex = draggedIndex;
}
selectElements();
}
}, 250);
return false;
});
$('#range-selector').on('mouseover', '.period-block-container', function(e) {
// hover in the scrollbar too
$('.scrollbar-period').removeClass('hovered');
var hoverededIndex = $(this).index();
$('.scrollbar-period').eq(hoverededIndex).addClass('hovered');
if (clickedSelector == true) {
var x = e.pageX - $('#range-selector').offset().left;
// if the user is not already dragging,
// and they move the mouse more than 4 pixels from the original point they clicked
if ((!dragging) && (Math.abs(initialX - x) > 5)) {
console.log('DRAG START');
dragging = true;
var draggedIndex = $(this).index();
//if ((draggedIndex > endIndex) || (draggedIndex < startIndex)) {
// set this as the starting and ending of the selection
startIndex = draggedIndex;
endIndex = draggedIndex;
//}
}
}
});
$('body').mousemove(function(e) {
// get x position of mouse
mouseX = e.pageX;
// get position and width of range selector
var rangeSelectorY = $('#range-selector').offset().top;
var rangeSelectorX = $('#range-selector').offset().left;
var rangeSelectorWidth = $('#range-selector').width();
// select the period at the coordinates
var draggedElement = document.elementFromPoint(mouseX, rangeSelectorY)
// convert to jquery and get its index
var draggedIndex = $(draggedElement).index();
var validDraggingElement = false;
if (clickedScrollbar == true) {
var scrollbarY = $('#custom-scrollbar').offset().top;
// select the scrollbar period at the coordinates
var scrollbarElement = document.elementFromPoint(mouseX, scrollbarY)
if ($(scrollbarElement).hasClass('scrollbar-period')) {
// convert to jquery and get its index
var scrollbarIndex = $(scrollbarElement).index();
//console.log(scrollbarIndex);
scrollbarClicked(scrollbarIndex);
}
} else if (dragging) {
if ($(draggedElement).hasClass('period-block-container')) {
//console.log()
if (draggedIndex < startIndex) {
startIndex = draggedIndex;
} else if (draggedIndex > endIndex) {
endIndex = draggedIndex;
}
validDraggingElement = true;
selectElements();
}
}
});
$('#custom-scrollbar').on('mousedown', '.scrollbar-period', function() {
clickedScrollbar = true;
scrollbarClicked($(this).index());
});
$('#custom-scrollbar').on('mousemove', '.scrollbar-period', function() {
if (clickedScrollbar == true) {
scrollbarClicked($(this).index());
}
});
$(document).mouseup(function(e) {
if (!dragging && !clickedScrollbar && clickedSelector) {
// if this is the initial selection
if ($('.period-block-container.selected').length <= 0) {
startIndex = clickedPeriodIndex;
endIndex = clickedPeriodIndex;
}
// if the user is clicking in the middle of their selection
if (((clickedPeriodIndex <= endIndex) && (startIndex <= clickedPeriodIndex))) {
// set the end of the selection to where the user clicked
endIndex = clickedPeriodIndex;
}
// but if the user clicks outside the selection, select those periods too
else if (clickedPeriodIndex < startIndex) {
startIndex = clickedPeriodIndex;
} else if (clickedPeriodIndex > endIndex) {
endIndex = clickedPeriodIndex;
}
initialX = e.pageX - $('#range-selector').offset().left;
// clear selections
// scroll one period if clicked near the edges
if (initialX > 760) {
$('#range-selector').animate({
scrollLeft: $('#range-selector').scrollLeft() + scrollWidth
}, 0);
// get the index of the scrollbar start
// add 1 to it and the end
var scrollbarStartIndex = $('#scrollbar-start').index();
var scrollbarEndIndex = scrollbarStartIndex + 12;
if (scrollbarStartIndex + 13 < 60) {
scrollbarStartIndex++;
scrollbarEndIndex++;
}
//clear the scrollbar IDs
$('.scrollbar-period').attr('id', '');
// add the IDs back
$('.scrollbar-period').eq(scrollbarStartIndex).attr('id', 'scrollbar-start');
$('.scrollbar-period').eq(scrollbarEndIndex).attr('id', 'scrollbar-end');
} else if (initialX < 30) {
$('#range-selector').animate({
scrollLeft: $('#range-selector').scrollLeft() - scrollWidth
}, 0);
// get the index of the scrollbar start
// add 1 to it and the end
var scrollbarStartIndex = $('#scrollbar-start').index();
var scrollbarEndIndex = scrollbarStartIndex + 12;
if (scrollbarStartIndex - 1 >= 0) {
scrollbarStartIndex--;
scrollbarEndIndex--;
}
//clear the scrollbar IDs
$('.scrollbar-period').attr('id', '');
// add the IDs back
$('.scrollbar-period').eq(scrollbarStartIndex).attr('id', 'scrollbar-start');
$('.scrollbar-period').eq(scrollbarEndIndex).attr('id', 'scrollbar-end');
}
// select all the periods between the indexes
selectElements();
}
else if (clickedYearSelector) {
// if this is the initial selection
if ($('.year-period-block-container.selected').length <= 0) {
startYearIndex = clickedYearPeriodIndex;
endYearIndex = clickedYearPeriodIndex;
}
// if the user is clicking in the middle of their selection
if (((clickedYearPeriodIndex <= endYearIndex) && (startYearIndex <= clickedYearPeriodIndex))) {
// set the end of the selection to where the user clicked
endYearIndex = clickedYearPeriodIndex;
}
// but if the user clicks outside the selection, select those periods too
else if (clickedYearPeriodIndex < startYearIndex) {
startYearIndex = clickedYearPeriodIndex;
} else if (clickedYearPeriodIndex > endYearIndex) {
endYearIndex = clickedYearPeriodIndex;
}
selectYearElements();
}
clickedYearSelector = false;
dragging = false;
clickedScrollbar = false;
clickedSelector = false;
clearInterval(timeout);
console.log(startIndex + ', ' + endIndex);
});
$('#range-selector').mouseleave(function() {
$('.scrollbar-period').removeClass('hovered');
});
// when clear "x" is pressed
$('#selected-range').on('mousedown', '.fa-times', function(e) {
// clear the selection or whatever
startIndex = 0;
endIndex = 0;
startYearIndex = 0;
endYearIndex = 0;
// clear selections
$('.period-block-container').removeClass('selected first-selected last-selected');
$('.scrollbar-period').removeClass('selected first-selected last-selected');
$('#selected-range').addClass('not-set');
$('#selected-range').html("Not set <i class=\"fa fa-times\"></i></div>");
// clear year selections
$('.year-period-block-container').removeClass('selected first-selected last-selected');
$('#multiple-rows-checkbox-label').fadeOut(200);
});
// radio buttons
$('#select-year-radio').click(function(){
$('#custom-scrollbar').hide();
$('#range-selector').hide();
$('#year-range-selector').show();
if (startYearIndex == endYearIndex) {
$('#multiple-rows-checkbox-label').fadeOut(200);
} else {
$('#multiple-rows-checkbox-label').fadeIn(200);
}
});
$('#select-month-radio').click(function(){
$('#year-range-selector').hide();
$('#custom-scrollbar').show();
$('#range-selector').show();
if (startIndex == endIndex) {
$('#multiple-rows-checkbox-label').fadeOut(200);
} else {
$('#multiple-rows-checkbox-label').fadeIn(200);
}
});
var scrollbarClicked = function(clickedIndex) {
var startScrollbarIndex, endScrollbarIndex;
var set = false;
if ((clickedIndex - 7) < 0) {
startScrollbarIndex = 0;
endScrollbarIndex = 12;
set = true;
} else {
startScrollbarIndex = clickedIndex - 6;
endScrollbarIndex = clickedIndex + 6;
}
if (set == false) {
if ((clickedIndex + 6) >= 60) {
startScrollbarIndex = 47;
endScrollbarIndex = 59;
} else {
startScrollbarIndex = clickedIndex - 6;
endScrollbarIndex = clickedIndex + 6;
}
}
// clear all scrollbar period IDs
$('.scrollbar-period').attr('id', '');
$('.scrollbar-period').eq(startScrollbarIndex).attr('id', 'scrollbar-start');
$('.scrollbar-period').eq(endScrollbarIndex).attr('id', 'scrollbar-end');
$('#range-selector').animate({
scrollLeft: startScrollbarIndex * scrollWidth
}, 0);
}
// variable for selecting all the periods between the start and end indexes
var selectElements = function() {
$('.period-block-container').removeClass('selected first-selected last-selected');
$('.scrollbar-period').removeClass('selected');
for (var i = startIndex; i <= endIndex; i++) {
$('.scrollbar-period').eq(i).addClass('selected');
$('.period-block-container').eq(i).addClass('selected');
// special styles for first and last selected periods
if (i == startIndex) {
$('.period-block-container').eq(i).addClass('first-selected');
}
if (i == endIndex) {
$('.period-block-container').eq(i).addClass('last-selected');
}
}
if (startIndex == endIndex) {
$('#multiple-rows-checkbox-label').fadeOut(200);
} else {
$('#multiple-rows-checkbox-label').fadeIn(200);
}
// get selected string......
var startText = $('.period-block-container').eq(startIndex).children('.month').text();
var nearestStartYear = '';
// if the current selected has year text, use that
if ($('.period-block-container').eq(startIndex).find('.year').length != 0) {
nearestStartYear = $('.period-block-container').eq(startIndex).children('.year').text();
}
// otherwise use the closest previous year text
else {
nearestStartYear = $('.period-block-container').eq(startIndex).prevAll(".period-block-container.show-year:first").text();
}
// trim the month out with regex
nearestStartYear = nearestStartYear.replace(/\D+/g, '');
startText = startText + ' ' + nearestStartYear;
//console.log(startText);
var endText = $('.period-block-container').eq(endIndex).children('.month').text();
var nearestEndYear = '';
if ($('.period-block-container').eq(endIndex).find('.year').length != 0) {
nearestEndYear = $('.period-block-container').eq(endIndex).children('.year').text();
} else {
nearestEndYear = $('.period-block-container').eq(endIndex).prevAll(".period-block-container.show-year:first").text();
}
nearestEndYear = nearestEndYear.replace(/\D+/g, '');
endText = endText + ' ' + nearestEndYear;
//console.log(endText);
$('#selected-range').removeClass('not-set');
// change text accordingly
if (startText != endText) {
$('#selected-range').html(startText + ' - ' + endText + "<i class=\"fa fa-times\"></i>");
} else {
$('#selected-range').html(startText + "<i class=\"fa fa-times\"></i>");
}
// use the year from the text to select on the year range selector
$('.year-period-block-container').removeClass('selected first-selected last-selected');
startYearIndex = $('.year-period-block-container:contains(\"'+nearestStartYear+'\")').index();
endYearIndex = $('.year-period-block-container:contains(\"'+nearestEndYear+'\")').index();
for (var i = startYearIndex; i <= endYearIndex; i++) {
$('.year-period-block-container').eq(i).addClass('selected');
// special styles for first and last selected periods
if (i == startYearIndex) {
$('.year-period-block-container').eq(i).addClass('first-selected');
}
if (i == endYearIndex) {
$('.year-period-block-container').eq(i).addClass('last-selected');
}
}
}
var selectYearElements = function(){
$('.year-period-block-container').removeClass('selected first-selected last-selected');
$('.period-block-container').removeClass('selected first-selected last-selected');
$('.scrollbar-period').removeClass('selected');
for (var i = startYearIndex; i <= endYearIndex; i++) {
$('.year-period-block-container').eq(i).addClass('selected');
// special styles for first and last selected periods
if (i == startYearIndex) {
$('.year-period-block-container').eq(i).addClass('first-selected');
}
if (i == endYearIndex) {
$('.year-period-block-container').eq(i).addClass('last-selected');
}
}
var startYear = $('.year-period-block-container').eq(startYearIndex).text();
var endYear = $('.year-period-block-container').eq(endYearIndex).text();
$('#selected-range').removeClass('not-set');
$('#selected-range').html('Jan ' + startYear + ' - Dec ' + endYear + "<i class=\"fa fa-times\"></i>");
// find element on month selector with matching years
startIndex = ($('.period-block-container').has('.year:contains("'+startYear+'")').index());
endIndex = ($('.period-block-container').has('.year:contains("'+endYear+'")').index());
if (endYear == 2015) {
endIndex = 4; // magic numberz
}
else if (endIndex + 11 < 60) {
endIndex += 11;
}
else {
var numToAdd = (endIndex+13) - 60;
endIndex += numToAdd;
}
for (var i = startIndex; i <= endIndex; i++) {
$('.scrollbar-period').eq(i).addClass('selected');
$('.period-block-container').eq(i).addClass('selected');
// special styles for first and last selected periods
if (i == startIndex) {
$('.period-block-container').eq(i).addClass('first-selected');
}
if (i == endIndex) {
$('.period-block-container').eq(i).addClass('last-selected');
}
}
// hide or show checkbox
if (startYearIndex == endYearIndex) {
$('#multiple-rows-checkbox-label').fadeOut(200);
} else {
$('#multiple-rows-checkbox-label').fadeIn(200);
}
}
Also see: Tab Triggers