Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
sorting demo
<div class="sorting-demo">
<div class="sorting-demo__wrapper">
<span class="sorting-demo__corner top-left">
<span data-name="top left" class="sorting-demo__progress"></span>
</span>
<span class="sorting-demo__corner top-right">
<span data-name="top right" class="sorting-demo__progress"></span>
</span>
<span class="sorting-demo__corner bottom-left">
<span data-name="bottom left" class="sorting-demo__progress"></span>
</span>
<span class="sorting-demo__corner bottom-right">
<span data-name="bottom right" class="sorting-demo__progress"></span>
</span>
<span class="sorting-demo__sortable one"></span>
<span class="sorting-demo__sortable two"></span>
<span class="sorting-demo__sortable three"></span>
<span class="sorting-demo__sortable four"></span>
</div>
</div>
let displaceInstances;
function initSortingDemo(){
// clear any existing displace instances
try {
displaceInstances.forEach(d => d.destroy());
} catch (e){}
const circleSize = 40;
const positions = {};
const progress = {};
// setup corner coordinates
['.top-left', '.top-right', '.bottom-left', '.bottom-right'].map(corner => {
const el = document.querySelector(corner);
const position = {
top: el.offsetTop,
left: el.offsetLeft,
// ensure that circle is completely in the box
bottom: el.offsetTop + el.offsetHeight - circleSize,
right: el.offsetLeft + el.offsetWidth - circleSize
};
const key = corner.replace(/\./, '').replace(/-/, ' ');
progress[key] = 0;
return positions[key] = position;
});
// update corner progress text
updateCorners();
// set up circles
displaceInstances = ['.one', '.two', '.three', '.four'].map(selector => {
const el = document.querySelector(selector);
el.style.left = genPos(105, 445) + 'px';
el.style.top = genPos(105, 245) + 'px';
el.className = el.className.replace('inactive', '');
return displace(el, {
onMouseDown: function(el){
el.className += ' active';
},
onMouseUp: function(el){
el.className = el.className.replace('active', '');
checkPosition(el);
},
});
function genPos(min, max){
return Math.floor(Math.random()*(max-min+1)+min);
}
});
function checkPosition(el){
const x = el.offsetLeft;
const y = el.offsetTop;
Object.keys(positions).forEach(key => {
const vals = positions[key];
if ( between(x, vals.left, vals.right) && between(y, vals.top, vals.bottom) ){
progress[key] = progress[key] + 1;
updateCorners();
// disable element
el.className += ' inactive';
const d = displaceInstances.find(d => {
return d.el === el;
});
d.destroy();
}
});
function between(val, min, max){
return val >= min && val <= max;
}
}
function updateCorners(){
Object.keys(positions).forEach(key => {
const query = `[data-name='${key}']`;
const el = document.querySelector(query);
el.innerHTML = `Contains: <strong>${progress[key]}</strong>`;
});
}
}
initSortingDemo();
.sorting-demo {
width: 600px;
background: rgba(255, 193, 7, 0.17);
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
}
&__wrapper {
height: 400px;
position: relative;
border-radius: 2px;
}
&__corner {
width: 100px;
height: 100px;
display: inline-block;
position: absolute;
background: $c1;
border: 2px solid $c2;
border-radius: 2px;
&.top-left {
top: 0;
left: 0;
}
&.top-right {
top: 0;
right: 0;
}
&.bottom-left {
bottom: 0;
left: 0;
}
&.bottom-right {
bottom: 0;
right: 0;
}
}
&__sortable {
$size: 40px;
width: $size;
height: $size;
display: inline-block;
border-radius: 99px;
position: absolute;
top: 0;
left: 0;
cursor: move;
transition: transform 0.1s ease-out,
opacity 0.3s ease-out,
background 0.3s ease-out;
border: 4px solid;
&.active {
transform: scale(1.1);
z-index: 5;
border-style: dotted;
}
&.inactive {
cursor: not-allowed;
background: $b6 !important;
border-color: $b5 !important;
}
&.one {
background: #2196f3;
border-color: #1380d8;
}
&.two {
background: #00BCD4;
border-color: #03a3b7;
}
&.three {
background: #4CAF50;
border-color: #3a983e;
}
&.four {
background: #8BC34A;
border-color: #78ad3b;
}
}
&__progress {
font-size: 1.3rem;
width: 100%;
display: inline-block;
text-align: center;
margin-top: 6px;
}
&__options {
margin-top: 1em;
width: 600px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment