214 lines
7.1 KiB
JavaScript
214 lines
7.1 KiB
JavaScript
// output css
|
|
|
|
|
|
const burgers = 180;
|
|
|
|
var index = 0;
|
|
|
|
function randomBetween(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
}
|
|
|
|
class Hamburger {
|
|
constructor() {
|
|
this.count = randomBetween(2, 3); // How many lines does the icon have
|
|
this.height = randomBetween(2, 4);
|
|
this.width = randomBetween(18, 26);
|
|
this.originalWidth = this.width;
|
|
this.borderRadius = randomBetween(0, this.height - 1);
|
|
this.gap = randomBetween(1, 2);
|
|
this.border = randomBetween(1, 2);
|
|
this.opacity = randomBetween(100, 100) / 100;
|
|
this.transitionSpeed = randomBetween(10, 30) / 100 + 's';
|
|
this.rotation = randomBetween(0, 1) * 180;
|
|
this.menuRotation = randomBetween(0, 1) * 180;
|
|
this.scale = (randomBetween(0, 30) / 100) + 1;
|
|
this.left = (-randomBetween(0, 20) + randomBetween(0, 20));
|
|
this.easing = `cubic-bezier(${randomBetween(4, 8) / 10}, ${randomBetween(0, 1) / 10}, ${randomBetween(0, 4) / 10}, ${randomBetween(8, 20) / 10})`;
|
|
this.type = randomBetween(1, 4)
|
|
|
|
if(this.rotation > 179) {
|
|
this.transitionSpeed = randomBetween(30, 60) / 100 + 's';
|
|
}
|
|
|
|
if(this.count == 3 && this.type == 2) {
|
|
this.height += 2;
|
|
this.width = this.height;
|
|
this.borderRadius = this.height;
|
|
this.gap += 1;
|
|
}
|
|
|
|
let partStyles = `
|
|
width: ${this.width}px;
|
|
height: ${this.height}px;
|
|
position: absolute;
|
|
background: #313d44;
|
|
right: 0;
|
|
margin: auto;
|
|
left: 0;
|
|
border-radius: ${this.borderRadius}px;
|
|
transition: all ${this.transitionSpeed} ${this.easing};
|
|
`;
|
|
|
|
let checkedStyle = '';
|
|
let center = (((this.count * this.height) + ((this.count - 1) * this.gap)) / 2) - (this.height / 2);
|
|
|
|
if(this.count == 2) {
|
|
checkedStyle = `
|
|
input#menu-${index}:checked + label .menu {
|
|
transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
|
|
}
|
|
|
|
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
|
|
transform: rotate(${45 + this.rotation}deg);
|
|
top: calc(50% - (${this.height / 2}px))!important;
|
|
width: ${this.originalWidth}px !important;
|
|
}
|
|
|
|
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
|
|
transform: rotate(${-45 - this.rotation}deg);
|
|
top: calc(50% - (${this.height / 2}px))!important;
|
|
width: ${this.originalWidth}px !important;
|
|
}
|
|
`
|
|
} else {
|
|
|
|
checkedStyle = `
|
|
input#menu-${index}:checked + label .menu {
|
|
transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
|
|
}
|
|
|
|
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
|
|
transform: rotate(45deg);
|
|
width: ${this.originalWidth}px !important;
|
|
top: calc(50% - (${this.height / 2}px))!important;
|
|
}
|
|
|
|
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
|
|
left: ${this.left}px !important;
|
|
opacity: 0;
|
|
}
|
|
|
|
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(3) {
|
|
transform: rotate(-45deg);
|
|
width: ${this.originalWidth}px!important;
|
|
top: calc(50% - (${this.height / 2}px))!important;
|
|
}
|
|
`
|
|
}
|
|
if(this.border == 1) {
|
|
checkedStyle += `input#menu-${index}:checked + label .menu {transform:scale(${this.scale}) rotate(${this.menuRotation}deg); border: 2px solid black;}`
|
|
}
|
|
|
|
var style = document.createElement('style');
|
|
style.type = 'text/css';
|
|
style.classList.add(`menu-${index}`);
|
|
style.appendChild(document.createTextNode(checkedStyle));
|
|
document.head.appendChild(style);
|
|
|
|
let partMarkup = '';
|
|
let partMarkupOutput = '';
|
|
var iteration = 0;
|
|
|
|
for(var i = 0; i < this.count; i++) {
|
|
if(this.type == 3) {
|
|
partMarkup += `<div class="menu_part" style="${partStyles}width: ${this.width - (6 * iteration)}px;
|
|
top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);
|
|
"></div>`;
|
|
|
|
} else {
|
|
partMarkup += `<div class="menu_part" style="${partStyles}width:${this.originalWidth};top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);"></div>`;
|
|
}
|
|
iteration++;
|
|
partMarkupOutput += `\t\t\t<div class="menu_part"></div>\n`;
|
|
}
|
|
|
|
this.generatedMarkup = `<input id="menu-${index}" type="checkbox" style="display: none"><label for="menu-${index}"><div class="menu" style="transition: all ${this.transitionSpeed};position: relative;width: ${this.originalWidth + 20}px;height: ${this.originalWidth + 20}px;border-radius: 100%;cursor: pointer;">${partMarkup}</div></label>`;
|
|
|
|
this.outputMarkup = `<input id="menu-${index}" type="checkbox">\n<label for="menu-${index}">\n\t<div class="menu">\n${partMarkupOutput}\t</div>\n</label>`
|
|
|
|
|
|
|
|
$('.grid').append(`<div class="grid_item"><span>.0${index + 1}</span><i class="fa fa-code" data-index="${index}"></i><div class="grid_item__inner" style="width:${this.originalWidth + 20}px; height: ${this.width + 20}px; ">${this.generatedMarkup}</div></div>`);
|
|
|
|
index++;
|
|
}
|
|
|
|
build() {
|
|
|
|
}
|
|
}
|
|
|
|
burgerArray = [];
|
|
|
|
for(var i = 0; i < burgers; i++) {
|
|
hamburger = new Hamburger();
|
|
burgerArray.push(hamburger);
|
|
}
|
|
|
|
|
|
$('.panel').click(function(){
|
|
//$('body').toggleClass('open');
|
|
})
|
|
|
|
$('.close').click(function(){
|
|
$('body').toggleClass('open');
|
|
})
|
|
|
|
$('.grid_item i').click(function() {
|
|
$('body').toggleClass('open');
|
|
|
|
|
|
$('.panel .markup').text(burgerArray[$(this).data('index')].outputMarkup);
|
|
|
|
var part = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
|
|
var partStyles = part.attr('style').split(';');
|
|
var partStyleFinal = partStyles.join(';')
|
|
|
|
console.log(partStyles)
|
|
|
|
var partOne = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
|
|
|
|
var test = partOne.attr('style').split(';')[10];
|
|
console.log(test)
|
|
var partOneStyles = `&:nth-of-type(1) {\n\t${partOne.attr('style').split(';')[10]};\n\twidth: ${partOne.css('width')}\n}\n\n`;
|
|
|
|
var partTwo = $(this).next().find('.menu').find('.menu_part:nth-of-type(2)');
|
|
var partTwoStyles = `&:nth-of-type(2) {\n\t${partTwo.attr('style').split(';')[10]};\n\twidth: ${partTwo.css('width')}\n}\n\n`;
|
|
|
|
if($(this).next().find('.menu').find('.menu_part').length != 2) {
|
|
var partThree = $(this).next().find('.menu').find('.menu_part:nth-of-type(3)');
|
|
var partThreeStyles = `&:nth-of-type(3) {\n\t${partThree.attr('style').split(';')[10]};\n\twidth: ${partThree.css('width')}\n}\n\n`;
|
|
|
|
} else {
|
|
var partThree = '';
|
|
var partThreeStyles = '';
|
|
}
|
|
|
|
|
|
var menu = $(this).next().find('.menu');
|
|
var menuStyles = menu.attr('style').split(';');
|
|
var menuFinal = `#menu-${$(this).data('index')} {\n\tdisplay: none;\n}\n\n.menu {
|
|
${menuStyles.join(';\n')}
|
|
\t&_part {
|
|
\t\t${partStyleFinal}
|
|
\t\t${partOneStyles}
|
|
\t\t${partTwoStyles}
|
|
\t\t${partThreeStyles}
|
|
}\n
|
|
|
|
|
|
}\n${$('style.menu-' + $(this).data('index'))[0].innerHTML}`
|
|
console.log($('style.menu-1')[0])
|
|
$('.panel .css').text(menuFinal);
|
|
})
|
|
|
|
|
|
|
|
function autoToggle() {
|
|
setInterval(function(){
|
|
$('input').click();
|
|
},1000)
|
|
}
|
|
|
|
//autoToggle();
|