You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
2 months ago
|
$(document).ready(function () {
|
||
|
const resizer = $('#resizer');
|
||
|
const leftSide = resizer.prev();
|
||
|
const rightSide = resizer.next();
|
||
|
let x = 0;
|
||
|
let leftWidth = 0;
|
||
|
|
||
|
const mouseDownHandler = function (e) {
|
||
|
x = e.clientX;
|
||
|
leftWidth = leftSide.width();
|
||
|
|
||
|
$(document).on('mousemove', mouseMoveHandler);
|
||
|
$(document).on('mouseup', mouseUpHandler);
|
||
|
};
|
||
|
|
||
|
const mouseMoveHandler = function (e) {
|
||
|
const dx = e.clientX - x;
|
||
|
const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parent().width();
|
||
|
leftSide.css('width', `${newLeftWidth}%`);
|
||
|
};
|
||
|
|
||
|
const mouseUpHandler = function () {
|
||
|
$(document).off('mousemove', mouseMoveHandler);
|
||
|
$(document).off('mouseup', mouseUpHandler);
|
||
|
};
|
||
|
|
||
|
resizer.on('mousedown', mouseDownHandler);
|
||
|
|
||
|
// Tab and content handling
|
||
|
const contents = $('.content-tab');
|
||
|
const tab = $('.tab');
|
||
|
|
||
|
tab.on('click', function () {
|
||
|
const id = $(this).data('content');
|
||
|
tab.removeClass('active');
|
||
|
$(this).addClass('active');
|
||
|
contents.removeClass('active');
|
||
|
$(`#${id}`).addClass('active');
|
||
|
|
||
|
|
||
|
|
||
|
if (id === 'about') {
|
||
|
$.when(
|
||
|
$.getScript('sketch.js'),
|
||
|
$.getScript('box.js')
|
||
|
).done(function () {
|
||
|
initMatterJS();
|
||
|
createBoxes();
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
const subtab = $('.subtab');
|
||
|
subtab.on('click', function () {
|
||
|
const id = $(this).data('content');
|
||
|
$(this).addClass('active');
|
||
|
contents.removeClass('active');
|
||
|
$(`#${id}`).addClass('active');
|
||
|
|
||
|
});
|
||
|
|
||
|
// Initially show the about tab
|
||
|
$('.tab[data-content="about"]').click();
|
||
|
});
|
||
|
|