Add landing page
This commit is contained in:
isUnknown
parent
9439de0603
commit
aaf1aa7890
603 changed files with 637 additions and 1 deletions
555
private/assets/js/main.js
Normal file
555
private/assets/js/main.js
Normal file
|
|
@ -0,0 +1,555 @@
|
|||
"use strict";
|
||||
|
||||
var view;
|
||||
window.scrollTo(0, 0);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.onpopstate = function () {
|
||||
window.location.href = window.location.href;
|
||||
};
|
||||
|
||||
var mySwiper;
|
||||
/* ====================
|
||||
=======================
|
||||
VIEW OBJECT
|
||||
=======================
|
||||
==================== */
|
||||
|
||||
view = {
|
||||
transTime: 250,
|
||||
title: document.querySelector('title').textContent,
|
||||
url: document.querySelector('title').dataset.url,
|
||||
description: document.querySelector('meta[description]').getAttribute('description'),
|
||||
device: '',
|
||||
state: 'grid',
|
||||
scrollPos: 0,
|
||||
prevState: {
|
||||
type: 'none',
|
||||
url: '',
|
||||
title: ''
|
||||
},
|
||||
header: {
|
||||
container: document.querySelector('.header'),
|
||||
logo: document.querySelector('.header__logo'),
|
||||
logoOriginSize: parseInt(window.getComputedStyle(document.querySelector('.header__logo')).getPropertyValue('font-size')),
|
||||
logoBtn: document.querySelector('.logoBtn'),
|
||||
size: 'big',
|
||||
btns: {
|
||||
enable: true,
|
||||
container: document.querySelector('.header__views'),
|
||||
size: document.querySelectorAll('.views__btn--smaller, .views__btn--bigger'),
|
||||
smaller: document.querySelector('.views__btn--smaller'),
|
||||
bigger: document.querySelector('.views__btn--bigger'),
|
||||
close: document.querySelector('.views__btn--close'),
|
||||
list: document.querySelector('.views__btn--mobile'),
|
||||
toClose: function toClose() {
|
||||
if (window.innerWidth > 800) {
|
||||
view.header.btns.size.forEach(function (btn) {
|
||||
btn.classList.add('hide');
|
||||
setTimeout(function () {
|
||||
btn.style.display = 'none';
|
||||
}, view.transTime);
|
||||
});
|
||||
} else {
|
||||
view.header.btns.list.classList.add('hide');
|
||||
setTimeout(function () {
|
||||
view.header.btns.list.style.display = 'none';
|
||||
}, view.transTime);
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
view.header.btns.close.style.display = 'block';
|
||||
view.header.btns.close.classList.remove('hide');
|
||||
}, view.transTime);
|
||||
},
|
||||
toSize: function toSize() {
|
||||
view.header.btns.close.classList.remove('hide');
|
||||
setTimeout(function () {
|
||||
view.header.btns.close.style.display = 'none';
|
||||
view.header.btns.size.forEach(function (btn) {
|
||||
btn.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
btn.classList.remove('hide');
|
||||
}, 50);
|
||||
});
|
||||
}, view.transTime);
|
||||
},
|
||||
toMobileSize: function toMobileSize() {
|
||||
view.header.btns.close.classList.remove('hide');
|
||||
setTimeout(function () {
|
||||
view.header.btns.close.style.display = 'none';
|
||||
view.header.btns.list.style.display = 'block';
|
||||
|
||||
if (view.scrollPos !== 0) {
|
||||
setTimeout(function () {
|
||||
view.header.btns.list.classList.remove('hide');
|
||||
}, 50);
|
||||
}
|
||||
}, view.transTime);
|
||||
}
|
||||
},
|
||||
reduce: function reduce() {
|
||||
if (view.header.size === 'big') {
|
||||
view.header.size = 'normal';
|
||||
view.header.logo.classList.remove('header__logo--big');
|
||||
view.header.container.classList.remove('header--big');
|
||||
setTimeout(function () {
|
||||
view.grid.container.classList.remove('grid--distant');
|
||||
}, 100);
|
||||
setTimeout(function () {
|
||||
view.header.btns.container.classList.remove('header__views--unvisible');
|
||||
view.header.size = 'normal';
|
||||
}, view.transTime);
|
||||
}
|
||||
},
|
||||
toInfo: function toInfo() {
|
||||
view.header.logo.textContent = 'INFO';
|
||||
},
|
||||
toName: function toName() {
|
||||
view.header.logo.textContent = 'DATA';
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
container: document.querySelector('.grid'),
|
||||
blocks: document.querySelectorAll('.block'),
|
||||
images: document.querySelectorAll('.block__image'),
|
||||
showBlocks: function showBlocks(block) {
|
||||
var image = block.querySelector('.block__image');
|
||||
|
||||
if (image.complete) {
|
||||
setTimeout(function () {
|
||||
block.parentNode.classList.remove('toProject--wait');
|
||||
setTimeout(function () {
|
||||
block.classList.remove('hide');
|
||||
}, view.transTime);
|
||||
}, 100);
|
||||
} else {
|
||||
image.addEventListener('load', function () {
|
||||
block.parentNode.classList.remove('toProject--wait');
|
||||
setTimeout(function () {
|
||||
block.classList.remove('hide');
|
||||
}, view.transTime);
|
||||
});
|
||||
}
|
||||
},
|
||||
smaller: function smaller() {
|
||||
if (view.state === 'grid' && view.header.btns.enable === true) {
|
||||
if (view.grid.container.classList.contains('grid--0')) {
|
||||
view.grid.container.classList.remove('grid--full');
|
||||
view.grid.blocks.forEach(function (block) {
|
||||
block.querySelector('.block__image').classList.remove('block__image--full');
|
||||
});
|
||||
view.grid.container.classList.remove('grid--0');
|
||||
view.grid.container.classList.add('grid--1');
|
||||
} else if (view.grid.container.classList.contains('grid--1')) {
|
||||
view.grid.container.classList.remove('grid--1');
|
||||
view.grid.container.classList.add('grid--2');
|
||||
} else if (view.grid.container.classList.contains('grid--2')) {
|
||||
view.grid.container.classList.remove('grid--2');
|
||||
view.grid.container.classList.add('grid--3');
|
||||
} else if (view.grid.container.classList.contains('grid--3')) {
|
||||
view.grid.container.classList.remove('grid--3');
|
||||
view.grid.container.classList.add('grid--4');
|
||||
} else if (view.grid.container.classList.contains('grid--4')) {
|
||||
view.grid.container.classList.remove('grid--4');
|
||||
view.grid.container.classList.add('grid--5');
|
||||
} else if (view.grid.container.classList.contains('grid--5')) {
|
||||
view.grid.container.classList.remove('grid--5');
|
||||
view.grid.container.classList.add('list');
|
||||
view.list.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
bigger: function bigger() {
|
||||
if (view.state !== 'project' && view.header.btns.enable === true) {
|
||||
view.header.btns.enable = false; // if (view.grid.container.classList.contains('grid--0') !== true) {
|
||||
// view.grid.container.classList.add('hide')
|
||||
// view.list.container.classList.add('hide')
|
||||
// }
|
||||
|
||||
if (view.grid.container.classList.contains('list')) {
|
||||
view.list.toGrid();
|
||||
} else if (view.grid.container.classList.contains('grid--5')) {
|
||||
view.grid.container.classList.remove('grid--5');
|
||||
view.grid.container.classList.add('grid--4');
|
||||
} else if (view.grid.container.classList.contains('grid--4')) {
|
||||
view.grid.container.classList.remove('grid--4');
|
||||
view.grid.container.classList.add('grid--3');
|
||||
} else if (view.grid.container.classList.contains('grid--3')) {
|
||||
view.grid.container.classList.remove('grid--3');
|
||||
view.grid.container.classList.add('grid--2');
|
||||
} else if (view.grid.container.classList.contains('grid--2')) {
|
||||
view.grid.container.classList.remove('grid--2');
|
||||
view.grid.container.classList.add('grid--1');
|
||||
} else if (view.grid.container.classList.contains('grid--1')) {
|
||||
view.grid.container.classList.remove('grid--1');
|
||||
view.grid.container.classList.add('grid--0');
|
||||
view.grid.blocks.forEach(function (block) {
|
||||
view.grid.container.classList.add('grid--full');
|
||||
block.querySelector('.block__image').classList.add('block__image--full');
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
view.grid.container.classList.remove('hide');
|
||||
view.header.btns.enable = true;
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
projects: document.querySelectorAll('.toProject')
|
||||
},
|
||||
project: {
|
||||
container: document.querySelector('.project'),
|
||||
init: function init(link, title, toHide, toFill) {
|
||||
view.prevState.type = view.state;
|
||||
view.prevState.url = '';
|
||||
view.prevState.title = '';
|
||||
view.state = 'project';
|
||||
history.pushState(null, title, link);
|
||||
toHide.classList.add('hide');
|
||||
fetch(link).then(function (res) {
|
||||
return res.text();
|
||||
}).then(function (html) {
|
||||
var domElement = document.createElement('div');
|
||||
domElement.classList.add('test-container');
|
||||
domElement.innerHTML = html;
|
||||
var projectContent = domElement.querySelector('.projectContainer').innerHTML;
|
||||
toFill.innerHTML = projectContent;
|
||||
view.project.swiper.init();
|
||||
}).then(function () {
|
||||
document.querySelector('.toProjectDesc').addEventListener('click', function () {
|
||||
console.log(document.querySelectorAll('.swiper-slide').length - 2);
|
||||
mySwiper.slideTo(document.querySelectorAll('.swiper-slide').length - 2);
|
||||
});
|
||||
setTimeout(function () {
|
||||
toFill.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
view.project.fadeIn(toHide, toFill);
|
||||
}, 50);
|
||||
}, view.transTime);
|
||||
});
|
||||
},
|
||||
fadeIn: function fadeIn(toHide, toFill) {
|
||||
toHide.style.display = 'none';
|
||||
toFill.style.display = 'block';
|
||||
toFill.classList.remove('hide');
|
||||
toHide.removeEventListener('transitionend', view.project.fadeIn());
|
||||
},
|
||||
close: function close() {
|
||||
history.pushState(null, view.title, view.url);
|
||||
console.log("view.state : ".concat(view.state));
|
||||
console.log("prevState : ".concat(view.prevState.type));
|
||||
view.project.container.classList.add('hide');
|
||||
setTimeout(function () {
|
||||
view.project.container.style.display = 'none';
|
||||
|
||||
if (view.prevState.type === 'list') {
|
||||
var toShow = window.innerWidth > 800 ? view.list.container : view.list.mobileContainer;
|
||||
toShow.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
toShow.classList.remove('hide');
|
||||
view.state = 'list';
|
||||
}, 50);
|
||||
} else if (view.prevState.type === 'grid' || view.prevState.type === 'agency') {
|
||||
if (view.grid.container.classList.contains('list')) {
|
||||
window.innerWidth > 800 ? view.list.container.style.display = 'block' : view.list.mobileContainer.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
window.innerWidth > 800 ? view.list.container.classList.remove('hide') : view.list.mobileContainer.classList.remove('hide');
|
||||
view.state = 'list';
|
||||
}, 50);
|
||||
} else {
|
||||
window.innerWidth > 800 ? view.grid.container.style.display = 'grid' : view.grid.container.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
view.grid.container.classList.remove('hide');
|
||||
view.state = 'grid';
|
||||
}, 50);
|
||||
}
|
||||
} else if (view.prevState.type === 'project') {
|
||||
view.project.swiper.destroy();
|
||||
view.project.init(view.prevState.url, view.prevState.title, document.querySelector('.project'), document.querySelector('.project'));
|
||||
}
|
||||
}, view.transTime);
|
||||
},
|
||||
swiper: {
|
||||
init: function init() {
|
||||
mySwiper = new Swiper('.swiper-container', {
|
||||
// Optional parameters
|
||||
direction: 'horizontal',
|
||||
loop: true,
|
||||
observer: true,
|
||||
observeSlideChildren: true,
|
||||
observeParents: true,
|
||||
speed: 300,
|
||||
autoplay: {
|
||||
delay: 2000
|
||||
},
|
||||
// Responsive
|
||||
breakpoints: {
|
||||
800: {
|
||||
speed: 500,
|
||||
autoplay: false
|
||||
}
|
||||
},
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
},
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
},
|
||||
destroy: function destroy() {
|
||||
mySwiper.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
agency: {
|
||||
init: function init(link, title, toHide, toFill) {
|
||||
view.prevState.type = view.state;
|
||||
|
||||
if (view.state === 'grid' || view.state === 'list') {
|
||||
view.prevState.url = '';
|
||||
view.prevState.title = '';
|
||||
} else if (view.state === 'project') {
|
||||
view.prevState.url = window.location.href;
|
||||
view.prevState.title = title;
|
||||
}
|
||||
|
||||
view.state = 'agency';
|
||||
history.pushState(null, title, link);
|
||||
toHide.classList.add('hide');
|
||||
fetch(link).then(function (res) {
|
||||
return res.text();
|
||||
}).then(function (html) {
|
||||
var domElement = document.createElement('div');
|
||||
domElement.classList.add('test-container');
|
||||
domElement.innerHTML = html;
|
||||
var pageContent = domElement.querySelector('.wrapper').innerHTML;
|
||||
setTimeout(function () {
|
||||
toFill.innerHTML = pageContent;
|
||||
toFill.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
view.project.fadeIn(toHide, toFill);
|
||||
}, 50);
|
||||
}, view.transTime);
|
||||
});
|
||||
}
|
||||
},
|
||||
list: {
|
||||
container: document.querySelector('.list'),
|
||||
mobileContainer: document.querySelector('.list--mobile'),
|
||||
init: function init() {
|
||||
var list = view.device === 'desktop' ? view.list.container : view.list.mobileContainer;
|
||||
view.prevState.type = view.state;
|
||||
view.prevState.url = '';
|
||||
view.prevState.title = '';
|
||||
view.state = 'list';
|
||||
view.grid.container.style.display = 'none';
|
||||
list.style.display = 'block';
|
||||
setTimeout(function () {
|
||||
list.classList.remove('hide');
|
||||
}, 50);
|
||||
},
|
||||
toGrid: function toGrid() {
|
||||
view.prevState.type = view.state;
|
||||
view.state = 'grid';
|
||||
view.grid.container.classList.remove('list');
|
||||
view.grid.container.classList.add('grid--5');
|
||||
window.innerWidth > 800 ? view.list.container.style.display = 'none' : view.list.mobileContainer.style.display = 'none';
|
||||
view.grid.container.style.display = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
/* ====================
|
||||
=======================
|
||||
INTERACTIONS
|
||||
=======================
|
||||
==================== */
|
||||
// =========================================== BLOCK FADE IN ON LOAD
|
||||
|
||||
if (window.innerWidth > 800) {
|
||||
view.device = 'desktop';
|
||||
} else {
|
||||
view.device = 'mobile';
|
||||
}
|
||||
|
||||
view.grid.blocks.forEach(function (block) {
|
||||
view.grid.showBlocks(block);
|
||||
}); // =========================================== LOGO STRETCHING
|
||||
|
||||
view.header.logo.style.fontSize = view.header.logoOriginSize;
|
||||
var prevScrollPos = 0;
|
||||
window.addEventListener('scroll', function (event) {
|
||||
if (window.scrollY * -1.007 + view.header.logoOriginSize >= 40 && view.state !== 'agency' && view.state !== 'project') {
|
||||
view.header.logo.style.fontSize = "".concat(window.scrollY * -1.007 + view.header.logoOriginSize, "px");
|
||||
|
||||
if (!view.header.btns.list.classList.contains('hide')) {
|
||||
view.header.btns.list.classList.add('hide');
|
||||
}
|
||||
} else {
|
||||
if (view.header.logo.style.fontSize !== '40 px') {
|
||||
view.header.logo.style.fontSize = '40px';
|
||||
view.header.btns.list.classList.remove('hide');
|
||||
}
|
||||
}
|
||||
}); // =========================================== VIEW BUTTON
|
||||
|
||||
view.header.btns.smaller.addEventListener('click', function () {
|
||||
view.grid.smaller();
|
||||
});
|
||||
view.header.btns.bigger.addEventListener('click', function () {
|
||||
view.grid.bigger();
|
||||
}); // =========================================== CLOSE BTN
|
||||
|
||||
view.header.btns.close.addEventListener('click', function () {
|
||||
if (view.header.btns.enable === true) {
|
||||
if (view.state === 'agency') {
|
||||
view.header.toName();
|
||||
}
|
||||
|
||||
if (view.state === 'project' || view.prevState.type === 'grid' || view.prevState.type === 'list') {
|
||||
if (view.scrollPos === 0) {
|
||||
view.header.logo.style.fontSize = view.header.logoOriginSize + 'px';
|
||||
setTimeout(function () {
|
||||
view.header.logo.style.transition = '';
|
||||
}, 300);
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
window.scrollTo(0, view.scrollPos);
|
||||
setTimeout(function () {
|
||||
view.header.logo.style.transition = '';
|
||||
}, 300);
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
view.project.close();
|
||||
|
||||
if (view.prevState.type !== 'project') {
|
||||
if (window.innerWidth > 800) {
|
||||
view.header.btns.toSize();
|
||||
} else {
|
||||
view.header.btns.toMobileSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
view.header.btns.list.addEventListener('click', function () {
|
||||
if (view.state === 'grid') {
|
||||
view.state === 'list';
|
||||
view.header.btns.list.querySelector('h1').textContent = 'images';
|
||||
view.grid.container.classList.add('list');
|
||||
view.list.init();
|
||||
} else {
|
||||
view.state === 'grid';
|
||||
view.header.btns.list.querySelector('h1').textContent = 'liste';
|
||||
view.grid.container.classList.remove('list');
|
||||
view.list.toGrid();
|
||||
}
|
||||
});
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (view.state === 'project' && view.header.btns.enable === true && event.code === 'Escape') {
|
||||
if (view.header.btns.enable === true) {
|
||||
if (view.state === 'agency') {
|
||||
view.header.toName();
|
||||
}
|
||||
|
||||
if (view.state === 'project' || view.prevState.type === 'grid' || view.prevState.type === 'list') {
|
||||
if (view.scrollPos === 0) {
|
||||
view.header.logo.style.fontSize = view.header.logoOriginSize + 'px';
|
||||
setTimeout(function () {
|
||||
view.header.logo.style.transition = '';
|
||||
}, 300);
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
window.scrollTo(0, view.scrollPos);
|
||||
setTimeout(function () {
|
||||
view.header.logo.style.transition = '';
|
||||
}, 300);
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
view.project.close();
|
||||
|
||||
if (view.prevState.type !== 'project') {
|
||||
if (window.innerWidth > 800) {
|
||||
view.header.btns.toSize();
|
||||
} else {
|
||||
view.header.btns.toMobileSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
document.querySelector('.grid, grid--mobile').addEventListener('click', function () {
|
||||
if (view.header.size === 'big') {
|
||||
view.header.reduce();
|
||||
}
|
||||
});
|
||||
view.header.logo.addEventListener('mouseenter', function () {
|
||||
if (view.state !== 'agency') {
|
||||
view.header.toInfo();
|
||||
}
|
||||
});
|
||||
view.header.logo.addEventListener('mouseleave', function () {
|
||||
if (view.state !== 'agency') {
|
||||
view.header.toName();
|
||||
}
|
||||
}); // /* ====================
|
||||
// =======================
|
||||
// --------- SPA ---------
|
||||
// =======================
|
||||
// ==================== */
|
||||
|
||||
document.querySelectorAll('.toProject, .list__project, .list__project--mobile').forEach(function (project) {
|
||||
project.addEventListener('click', function (e) {
|
||||
view.scrollPos = window.scrollY;
|
||||
e.preventDefault();
|
||||
view.header.logo.style.transition = 'font-size .3s ease-in-out';
|
||||
setTimeout(function () {
|
||||
view.header.logo.style.fontSize = '2.5rem';
|
||||
}, 10);
|
||||
view.header.btns.toClose();
|
||||
var link = project.getAttribute('href');
|
||||
var title = project.dataset.title;
|
||||
var description = project.dataset.description;
|
||||
|
||||
if (view.state === 'list') {
|
||||
window.innerWidth > 800 ? view.project.init(link, title, view.list.container, view.project.container) : view.project.init(link, title, view.list.mobileContainer, view.project.container);
|
||||
} else {
|
||||
view.project.init(link, title, view.grid.container, view.project.container);
|
||||
}
|
||||
});
|
||||
}); // =========================================== LOGO BTN AGENCE
|
||||
|
||||
view.header.logoBtn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
view.scrollPos = window.scrollY;
|
||||
view.header.logo.style.transition = 'font-size .3s ease-in-out';
|
||||
setTimeout(function () {
|
||||
view.header.logo.style.fontSize = '2.5rem';
|
||||
}, 10);
|
||||
view.header.btns.toClose();
|
||||
var link = view.header.logoBtn.getAttribute('href');
|
||||
var title = view.header.logoBtn.dataset.title;
|
||||
setTimeout(function () {
|
||||
window.scrollTo(0, 0);
|
||||
}, 300);
|
||||
|
||||
if (view.state === 'list') {
|
||||
window.innerWidth > 800 ? view.agency.init(link, title, view.list.container, view.project.container) : view.agency.init(link, title, view.list.mobileContainer, view.project.container);
|
||||
} else if (view.state === 'project') {
|
||||
view.agency.init(link, title, view.project.container, view.project.container);
|
||||
} else if (view.state === 'grid') {
|
||||
view.agency.init(link, title, view.grid.container, view.project.container);
|
||||
}
|
||||
});
|
||||
/* ====================
|
||||
=======================
|
||||
END
|
||||
=======================
|
||||
==================== */
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue