Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 19, 2016 18:07
Show Gist options
  • Save anonymous/d0ead83d8cbe01a65fdc20a070f09536 to your computer and use it in GitHub Desktop.
Save anonymous/d0ead83d8cbe01a65fdc20a070f09536 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin time slots selection // source https://jsbin.com/lufufe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="time slots selection">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.bitmap {
width: 300px;
height: auto;
}
.labels {
margin: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bit {
float: left;
height:20px;
width: 2px;
border: 0;
background-color: #555;
}
/**
.container {
border: 1px solid;
}
**/
.centered {
text-align: center;
margin: auto;
}
.selected {
background-color: #5CB85C;
}
.selecting {
background-color: #5BC0DE;
}
</style>
</head>
<body>
<div class="container">
<div class="bitmap container">
<div class="labels">
<label class="label label-default">Last selected:&nbsp;</label>
<label class="label label-success" id="start">N/A</label>
<label class="label label-danger" id="end"></label>
<label class="label label-info" id="count"></label>
</div>
<div class="bits">
<div class="bit" id="1"></div>
<div class="bit" id="2"></div>
<div class="bit" id="3"></div>
<div class="bit" id="4"></div>
<div class="bit" id="5"></div>
<div class="bit" id="6"></div>
<div class="bit" id="7"></div>
<div class="bit" id="8"></div>
<div class="bit" id="9"></div>
<div class="bit" id="10"></div>
<div class="bit" id="11"></div>
<div class="bit" id="12"></div>
<div class="bit" id="13"></div>
<div class="bit" id="14"></div>
<div class="bit" id="15"></div>
<div class="bit" id="16"></div>
<div class="bit" id="17"></div>
<div class="bit" id="18"></div>
<div class="bit" id="19"></div>
<div class="bit" id="20"></div>
<div class="bit" id="21"></div>
<div class="bit" id="22"></div>
<div class="bit" id="23"></div>
<div class="bit" id="24"></div>
<div class="bit" id="25"></div>
<div class="bit" id="26"></div>
<div class="bit" id="27"></div>
<div class="bit" id="28"></div>
<div class="bit" id="29"></div>
<div class="bit" id="30"></div>
<div class="bit" id="31"></div>
<div class="bit" id="32"></div>
<div class="bit" id="33"></div>
<div class="bit" id="34"></div>
<div class="bit" id="35"></div>
<div class="bit" id="36"></div>
<div class="bit" id="37"></div>
<div class="bit" id="38"></div>
<div class="bit" id="39"></div>
<div class="bit" id="40"></div>
<div class="bit" id="41"></div>
<div class="bit" id="42"></div>
<div class="bit" id="43"></div>
<div class="bit" id="44"></div>
<div class="bit" id="45"></div>
<div class="bit" id="46"></div>
<div class="bit" id="47"></div>
<div class="bit" id="48"></div>
<div class="bit" id="49"></div>
<div class="bit" id="50"></div>
<div class="bit" id="51"></div>
<div class="bit" id="52"></div>
<div class="bit" id="53"></div>
<div class="bit" id="54"></div>
<div class="bit" id="55"></div>
<div class="bit" id="56"></div>
<div class="bit" id="57"></div>
<div class="bit" id="58"></div>
<div class="bit" id="59"></div>
<div class="bit" id="60"></div>
<div class="bit" id="61"></div>
<div class="bit" id="62"></div>
<div class="bit" id="63"></div>
<div class="bit" id="64"></div>
<div class="bit" id="65"></div>
<div class="bit" id="66"></div>
<div class="bit" id="67"></div>
<div class="bit" id="68"></div>
<div class="bit" id="69"></div>
<div class="bit" id="70"></div>
<div class="bit" id="71"></div>
<div class="bit" id="72"></div>
<div class="bit" id="73"></div>
<div class="bit" id="74"></div>
<div class="bit" id="75"></div>
<div class="bit" id="76"></div>
<div class="bit" id="77"></div>
<div class="bit" id="78"></div>
<div class="bit" id="79"></div>
<div class="bit" id="80"></div>
<div class="bit" id="81"></div>
<div class="bit" id="82"></div>
<div class="bit" id="83"></div>
<div class="bit" id="84"></div>
<div class="bit" id="85"></div>
<div class="bit" id="86"></div>
<div class="bit" id="87"></div>
<div class="bit" id="88"></div>
<div class="bit" id="89"></div>
<div class="bit" id="90"></div>
<div class="bit" id="91"></div>
<div class="bit" id="92"></div>
<div class="bit" id="93"></div>
<div class="bit" id="94"></div>
<div class="bit" id="95"></div>
<div class="bit" id="96"></div>
</div>
</div>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
var getTime, toHHMM;
toHHMM = function(data) {
var hours, minutes;
hours = Math.floor(data / 60);
minutes = data - Math.floor(data / 60) * 60;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours + ':' + minutes;
};
getTime = function(id) {
id = parseInt(id.replace('#', ''));
return toHHMM((id - 1) * 15) + '-' + toHHMM(id * 15);
};
$(document).on('mousedown', '.bit', function(e) {
window.first_selection = '#' + $(e.target).attr('id');
window.last_selection = window.first_selection;
window.mouseX = e.clientX;
$(window.first_selection).addClass('selecting');
return $('#start').text(getTime(window.first_selection).split('-')[0]);
});
$(document).on('mouseleave', '.bit', function(e) {
return $(this).add($(this).prev()).add($(this).prev().prev()).add($(this).prev().prev()).add($(this).next()).add($(this).next().next()).add($(this).next().next()).stop().animate({
'width': '2px',
'height': '20px'
}, 600).css({
'border-right': '0'
});
});
$(document).on('mouseover', '.bit', function(e) {
var selection;
$(this).attr('title', getTime($(this).attr('id')));
$(this).add($(this).prev()).add($(this).prev().prev()).add($(this).prev().prev()).add($(this).next()).add($(this).next().next()).add($(this).next().next()).stop().animate({
'width': '10px',
'height': '40px'
}).css({
'border-right': '1px solid #fff'
});
window.last_selection = '#' + $(e.target).attr('id');
if (e.buttons === 1 && e.clientX > window.mouseX) {
selection = $(window.first_selection).nextUntil($(window.last_selection)).andSelf().add(window.last_selection);
$('.selecting').removeClass('selecting');
selection.addClass('selecting');
$('#end').text(getTime(window.last_selection).split('-')[1]);
} else if (e.buttons === 1 && e.clientX < window.mouseX) {
selection = $(window.first_selection).prevUntil($(window.last_selection)).andSelf().add(window.last_selection);
$('.selecting').removeClass('selecting');
selection.addClass('selecting');
$('#end').text(getTime(window.last_selection).split('-')[1]);
}
window.selection_count = selection.length;
$('#start').text(getTime(window.first_selection).split('-')[0]);
return $('#end').text(getTime(window.last_selection).split('-')[1]);
});
return $(document).on('mouseup', function(e) {
var selection;
if (typeof window.first_selection === 'undefined' || typeof window.last_selection === 'undefined') {
return;
}
if (window.first_selection === window.last_selection) {
$('.selecting').removeClass('selecting').toggleClass('selected');
} else if ($(window.first_selection).hasClass('selected')) {
if (e.clientX > window.mouseX) {
selection = $(window.first_selection).nextUntil($(window.last_selection)).andSelf().add(window.last_selection);
selection.removeClass('selecting selected');
} else if (e.clientX < window.mouseX) {
selection = $(window.first_selection).prevUntil($(window.last_selection)).andSelf().add(window.last_selection);
selection.removeClass('selecting selected');
}
} else {
$('.selecting').removeClass('selecting').addClass('selected');
}
$('#end').text(getTime(window.last_selection).split('-')[1]);
$('#count').text(window.selection_count);
window.last_selection = null;
window.first_selection = null;
window.mouseX = null;
return window.selection_count = null;
});
});
</script>
<script id="jsbin-source-css" type="text/css">.bitmap {
width: 300px;
height: auto;
}
.labels {
margin: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bit {
float: left;
height:20px;
width: 2px;
border: 0;
background-color: #555;
}
/**
.container {
border: 1px solid;
}
**/
.centered {
text-align: center;
margin: auto;
}
.selected {
background-color: #5CB85C;
}
.selecting {
background-color: #5BC0DE;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready ->
toHHMM = (data) ->
hours = Math.floor(data / 60)
minutes = data - Math.floor(data / 60) * 60
hours = if hours < 10 then '0' + hours else hours
minutes = if minutes < 10 then '0' + minutes else minutes
hours + ':' + minutes
getTime = (id) ->
id = parseInt(id.replace('#', ''))
toHHMM((id - 1) * 15) + '-' + toHHMM(id * 15)
$(document).on 'mousedown', '.bit', (e) ->
window.first_selection = '#' + $(e.target).attr('id')
window.last_selection = window.first_selection
window.mouseX = e.clientX
$(window.first_selection).addClass('selecting')
$('#start').text getTime(window.first_selection).split('-')[0]
$(document).on 'mouseleave', '.bit', (e) ->
$(this)
.add($(this).prev()).add($(this).prev().prev()).add($(this).prev().prev())
.add($(this).next()).add($(this).next().next()).add($(this).next().next())
.stop()
.animate { 'width': '2px', 'height': '20px' }, 600
.css { 'border-right': '0' }
$(document).on 'mouseover', '.bit', (e) ->
$(this).attr 'title', getTime($(this).attr('id'))
$(this)
.add($(this).prev()).add($(this).prev().prev()).add($(this).prev().prev())
.add($(this).next()).add($(this).next().next()).add($(this).next().next())
.stop()
.animate { 'width': '10px', 'height': '40px' }
.css { 'border-right': '1px solid #fff' }
window.last_selection = '#' + $(e.target).attr('id')
if e.buttons == 1 and e.clientX > window.mouseX
selection = $(window.first_selection)
.nextUntil($(window.last_selection))
.andSelf().add(window.last_selection)
$('.selecting').removeClass 'selecting'
selection.addClass 'selecting'
$('#end').text getTime(window.last_selection).split('-')[1]
else if e.buttons == 1 and e.clientX < window.mouseX
selection = $(window.first_selection)
.prevUntil($(window.last_selection))
.andSelf().add(window.last_selection)
$('.selecting').removeClass 'selecting'
selection.addClass 'selecting'
$('#end').text getTime(window.last_selection).split('-')[1]
window.selection_count = selection.length
$('#start').text getTime(window.first_selection).split('-')[0]
$('#end').text getTime(window.last_selection).split('-')[1]
$(document).on 'mouseup', (e) ->
return if typeof window.first_selection == 'undefined' or
typeof window.last_selection == 'undefined'
if window.first_selection == window.last_selection
$('.selecting')
.removeClass('selecting')
.toggleClass('selected')
else if $(window.first_selection).hasClass('selected')
if e.clientX > window.mouseX
selection = $(window.first_selection)
.nextUntil($(window.last_selection))
.andSelf().add(window.last_selection)
selection.removeClass 'selecting selected'
else if e.clientX < window.mouseX
selection = $(window.first_selection)
.prevUntil($(window.last_selection))
.andSelf().add(window.last_selection)
selection.removeClass 'selecting selected'
else
$('.selecting')
.removeClass('selecting')
.addClass('selected')
$('#end').text getTime(window.last_selection).split('-')[1]
$('#count').text window.selection_count
window.last_selection = null
window.first_selection = null
window.mouseX = null
window.selection_count = null</script></body>
</html>
Raw
jsbin.lufufe.css
.bitmap {
width: 300px;
height: auto;
}
.labels {
margin: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bit {
float: left;
height:20px;
width: 2px;
border: 0;
background-color: #555;
}
/**
.container {
border: 1px solid;
}
**/
.centered {
text-align: center;
margin: auto;
}
.selected {
background-color: #5CB85C;
}
.selecting {
background-color: #5BC0DE;
}
Raw
jsbin.lufufe.js
$(document).ready(function() {
var getTime, toHHMM;
toHHMM = function(data) {
var hours, minutes;
hours = Math.floor(data / 60);
minutes = data - Math.floor(data / 60) * 60;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours + ':' + minutes;
};
getTime = function(id) {
id = parseInt(id.replace('#', ''));
return toHHMM((id - 1) * 15) + '-' + toHHMM(id * 15);
};
$(document).on('mousedown', '.bit', function(e) {
window.first_selection = '#' + $(e.target).attr('id');
window.last_selection = window.first_selection;
window.mouseX = e.clientX;
$(window.first_selection).addClass('selecting');
return $('#start').text(getTime(window.first_selection).split('-')[0]);
});
$(document).on('mouseleave', '.bit', function(e) {
return $(this).add($(this).prev()).add($(this).prev().prev()).add($(this).prev().prev()).add($(this).next()).add($(this).next().next()).add($(this).next().next()).stop().animate({
'width': '2px',
'height': '20px'
}, 600).css({
'border-right': '0'
});
});
$(document).on('mouseover', '.bit', function(e) {
var selection;
$(this).attr('title', getTime($(this).attr('id')));
$(this).add($(this).prev()).add($(this).prev().prev()).add($(this).prev().prev()).add($(this).next()).add($(this).next().next()).add($(this).next().next()).stop().animate({
'width': '10px',
'height': '40px'
}).css({
'border-right': '1px solid #fff'
});
window.last_selection = '#' + $(e.target).attr('id');
if (e.buttons === 1 && e.clientX > window.mouseX) {
selection = $(window.first_selection).nextUntil($(window.last_selection)).andSelf().add(window.last_selection);
$('.selecting').removeClass('selecting');
selection.addClass('selecting');
$('#end').text(getTime(window.last_selection).split('-')[1]);
} else if (e.buttons === 1 && e.clientX < window.mouseX) {
selection = $(window.first_selection).prevUntil($(window.last_selection)).andSelf().add(window.last_selection);
$('.selecting').removeClass('selecting');
selection.addClass('selecting');
$('#end').text(getTime(window.last_selection).split('-')[1]);
}
window.selection_count = selection.length;
$('#start').text(getTime(window.first_selection).split('-')[0]);
return $('#end').text(getTime(window.last_selection).split('-')[1]);
});
return $(document).on('mouseup', function(e) {
var selection;
if (typeof window.first_selection === 'undefined' || typeof window.last_selection === 'undefined') {
return;
}
if (window.first_selection === window.last_selection) {
$('.selecting').removeClass('selecting').toggleClass('selected');
} else if ($(window.first_selection).hasClass('selected')) {
if (e.clientX > window.mouseX) {
selection = $(window.first_selection).nextUntil($(window.last_selection)).andSelf().add(window.last_selection);
selection.removeClass('selecting selected');
} else if (e.clientX < window.mouseX) {
selection = $(window.first_selection).prevUntil($(window.last_selection)).andSelf().add(window.last_selection);
selection.removeClass('selecting selected');
}
} else {
$('.selecting').removeClass('selecting').addClass('selected');
}
$('#end').text(getTime(window.last_selection).split('-')[1]);
$('#count').text(window.selection_count);
window.last_selection = null;
window.first_selection = null;
window.mouseX = null;
return window.selection_count = null;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment