Compare commits

...

2 Commits

  1. 13
      .eslintrc.js
  2. 14
      .prettierrc.json
  3. 13
      assets/css/pages/products.scss
  4. 15
      assets/css/pages/workshops.scss
  5. 46
      assets/js/components/header.js
  6. 77
      assets/js/utils/SectionScroller.js
  7. 8
      assets/js/utils/device-detect.js
  8. 8
      index.html
  9. 1195
      package-lock.json
  10. 6
      package.json
  11. 16
      postcss.config.js

@ -0,0 +1,13 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['airbnb-base'],
parserOptions: {
ecmaVersion: 'latest',
},
rules: {
arrowParens: false,
},
};

@ -0,0 +1,14 @@
{
"parser": "babel",
"printWidth": 90,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"rangeStart": 0,
"rangeEnd": null
}

@ -43,6 +43,19 @@ main.products {
display: flex;
align-items: center;
justify-content: center;
picture {
display: flex;
justify-content: center;
> img {
max-width: 60%;
@include m-media(sm) {
max-width: 100%;
}
}
}
}
.products__product {

@ -41,9 +41,18 @@ main.workshops {
align-items: center;
justify-content: center;
> img {
max-height: 300px;
}
picture {
display: flex;
justify-content: center;
> img {
max-width: 50%;
@include m-media(sm) {
max-width: 100%;
}
}
}
}
.workshops__items {

@ -1,11 +1,11 @@
(function () {
var $el = document.getElementById("pageHeader");
var burger = document.querySelectorAll(".navbar-burger")[0];
const $el = document.getElementById("pageHeader");
const burger = document.querySelectorAll(".navbar-burger")[0];
burger.addEventListener("click", function () {
burger.addEventListener("click", () => {
if (!burger.classList.contains("is-active")) {
var targetId = burger.dataset.target;
var targetEl = document.getElementById(targetId);
const targetId = burger.dataset.target;
const targetEl = document.getElementById(targetId);
burger.classList.add("is-active");
targetEl.classList.add("is-active");
@ -31,8 +31,8 @@
}
function setActiveLink(id) {
var items = Array.apply(null, this.getElementsByClassName("navbar-item"));
var item = items.filter(function (item) {
const items = Array.apply(null, this.getElementsByClassName("navbar-item"));
const item = items.filter(item => {
if (item.classList.contains("has-dropdown")) {
item.children[0].classList.remove("is-active");
} else {
@ -50,27 +50,25 @@
$el.setActiveLink = setActiveLink.bind($el);
var currentPage;
var match = location.pathname.match(/\/(.*)(?=\.html)/);
let currentPage;
const match = location.pathname.match(/\/(.*)(?=\.html)/);
if (match) {
var isPost = location.pathname.match(
const isPost = location.pathname.match(
/\/[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}\//
);
var isWorkshop = location.pathname.match(/\/workshops\/.*\.html$/);
const isWorkshop = location.pathname.match(/\/workshops\/.*\.html$/);
if (isPost) currentPage = "blog";
else if (isWorkshop) currentPage = "workshops";
else currentPage = match[1];
} else if (location.hash !== "") {
currentPage = location.hash.replace(/\#/, "");
} else {
if (location.pathname.match(/^\/blog\//)) currentPage = "blog";
else currentPage = "home";
}
} else if (location.pathname.match(/^\/blog\//)) currentPage = "blog";
else currentPage = "home";
$el.setActiveLink(currentPage);
function scrollNavHandler(ev) {
var landingSections = ["home", "work", "team", "projects"];
const landingSections = ["home", "work", "team", "projects"];
if (landingSections.includes(currentPage)) {
if (
ev.target.classList.contains("navbar-item") ||
@ -79,22 +77,22 @@
if (ev.target.href.match(/\/#/)) {
ev.preventDefault();
ev.stopPropagation();
var id = ev.target.href.match(/\/#((.(?!\/))+[A-Za-z])/)[1];
var scrollRoot = document.getElementsByClassName("scroll-root")[0];
var scrollViewport =
const id = ev.target.href.match(/\/#((.(?!\/))+[A-Za-z])/)[1];
const scrollRoot = document.getElementsByClassName("scroll-root")[0];
const scrollViewport =
scrollRoot.getElementsByClassName("scroll-viewport")[0];
scrollRoot.scrollBy({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: "smooth",
behavior: "smooth"
});
scrollViewport.scrollBy({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: "smooth",
behavior: "smooth"
});
var delayed;
let delayed;
function whileScroll() {
clearTimeout(delayed);
@ -113,8 +111,8 @@
}
if (!isMobile()) {
var links = $el.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
const links = $el.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", scrollNavHandler);
}
}

@ -25,7 +25,7 @@ var SectionSnapScroller = (function () {
var height = getContentHeight();
window.addEventListener("resize", function () {
if (isMobile()) {
if (isMobile() || isTouchEnabled()) {
return;
}
height = getContentHeight();
@ -59,7 +59,7 @@ var SectionSnapScroller = (function () {
function _createStylesheet() {
var styles = "html, body { overscroll-behavior-y: contain; }";
if (isMobile()) {
if (isMobile() || isTouchEnabled()) {
styles +=
".scroll-root { overflow-y: scroll; height: 100vh; scroll-behavior: smooth; }";
styles +=
@ -73,8 +73,7 @@ var SectionSnapScroller = (function () {
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); }";
styles +=
".scroll-viewport { position: absolute; z-index: 90; pointer-events: none; top: 0px; left: 0px; width: 100vw; width: calc(var(--vw, 1vw) * 100); height: 100vh; height: calc(var(--vh, 1vh) * 100); overflow-x: hidden; overflow-y: auto; }";
styles +=
".scroll-viewport .scroll-span { width: 100%; background: transparent; }";
styles += ".scroll-viewport .scroll-span { width: 100%; background: transparent; }";
styles +=
".scroll-viewport .scroll-logger { position: fixed; bottom: 15px; right: 30px; z-index: 10; background: white; border-radius: 5px; padding: .5em 1em; box-shadow: 2px 2px 6px #0003; }";
}
@ -110,8 +109,7 @@ var SectionSnapScroller = (function () {
overflow = self.getCurrentSectionOverflow(direction);
if (overflow * direction < 0) {
if (self.behavior === "mandatory") {
self.currentSection =
self.sections.indexOf(self.currentSection) + direction;
self.currentSection = self.sections.indexOf(self.currentSection) + direction;
} else {
self.currentSection = self.getVisibleSection().id;
}
@ -145,9 +143,7 @@ var SectionSnapScroller = (function () {
if (this.behavior === "mandatory") {
offset =
Math.abs(offset) > Math.abs(nextSectionOverflow)
? nextSectionOverflow
: offset;
Math.abs(offset) > Math.abs(nextSectionOverflow) ? nextSectionOverflow : offset;
}
this.$el.scrollBy(0, offset);
@ -206,9 +202,7 @@ var SectionSnapScroller = (function () {
if (typeof scrollEl === "string") {
this.$el = document.querySelector(scrollEl);
if (this.$el === void 0) {
throw new Error(
"SectionSnapScroller can't find their root HTMLElement"
);
throw new Error("SectionSnapScroller can't find their root HTMLElement");
}
} else if (HTMLElement.prototype.isPrototypeOf(scrollEl)) {
this.$el = scrollEl;
@ -258,8 +252,7 @@ var SectionSnapScroller = (function () {
if (section !== _currentSection) {
var direction =
self.sections.indexOf(section) -
self.sections.indexOf(_currentSection);
self.sections.indexOf(section) - self.sections.indexOf(_currentSection);
_currentSection = section;
function afterScroll() {
@ -295,7 +288,7 @@ var SectionSnapScroller = (function () {
},
});
if (isMobile()) {
if (isMobile() || isTouchEnabled()) {
var lastChild = document.createElement("div");
lastChild.classList.add(this._sectionClass);
this.$el.appendChild(lastChild);
@ -304,12 +297,11 @@ var SectionSnapScroller = (function () {
function setupInlineStyles() {
self.$el.style.scrollSnapType = "y mandatory";
Array.apply(
null,
self.$el.getElementsByClassName(self._sectionClass)
).forEach(function ($section) {
$section.style.scrollSnapStop = "always";
});
Array.apply(null, self.$el.getElementsByClassName(self._sectionClass)).forEach(
function ($section) {
$section.style.scrollSnapStop = "always";
}
);
}
var currentSection = location.hash.split("/").pop().replace(/#/, "");
if (currentSection && currentSection !== this.sections[0]) {
@ -317,8 +309,7 @@ var SectionSnapScroller = (function () {
self.$el.scrollBy({
behavior: "smooth",
left: 0,
top: document.getElementById(currentSection).getBoundingClientRect()
.top,
top: document.getElementById(currentSection).getBoundingClientRect().top,
});
var delayed;
function whileScroll() {
@ -345,8 +336,7 @@ var SectionSnapScroller = (function () {
self.$el.appendChild(self.$viewport);
var hashId = location.hash.replace(/#/, "");
var visibleSection =
document.getElementById(hashId) || self.getVisibleSection();
var visibleSection = document.getElementById(hashId) || self.getVisibleSection();
_currentSection = visibleSection.id;
location.hash = _currentSection;
@ -363,7 +353,7 @@ var SectionSnapScroller = (function () {
_currentSection = location.hash.replace(/#/, "");
var section = document.getElementById(_currentSection);
var box = section.getBoundingClientRect();
if (!isMobile()) {
if (!(isMobile() || isTouchEnabled())) {
self.$viewport.scrollTo(1, section.offsetTop);
}
self.onSectionUpdate(_currentSection);
@ -374,8 +364,7 @@ var SectionSnapScroller = (function () {
// this.$logger = _setupLogger();
/* SCROLL HOOKS */
if (settings.onSectionUpdate)
this.onSectionUpdate = settings.onSectionUpdate;
if (settings.onSectionUpdate) this.onSectionUpdate = settings.onSectionUpdate;
if (settings.beforeScroll) this.beforeScroll = settings.beforeScroll;
if (settings.onScroll) this.onScroll = settings.onScroll;
if (settings.afterScroll) this.afterScroll = settings.afterScroll;
@ -395,26 +384,22 @@ var SectionSnapScroller = (function () {
};
SectionSnapScroller.prototype.getVisibleSection = function () {
return Array.apply(
null,
document.getElementsByClassName(this._sectionClass)
).reduce(function (focused, sectionEl) {
var acum_top = focused
? focused.getBoundingClientRect().top
: window.innerHeight;
var n_top = sectionEl.getBoundingClientRect().top;
if (Math.abs(n_top) < Math.abs(acum_top)) {
return sectionEl;
} else {
return focused;
}
}, null);
return Array.apply(null, document.getElementsByClassName(this._sectionClass)).reduce(
function (focused, sectionEl) {
var acum_top = focused ? focused.getBoundingClientRect().top : window.innerHeight;
var n_top = sectionEl.getBoundingClientRect().top;
if (Math.abs(n_top) < Math.abs(acum_top)) {
return sectionEl;
} else {
return focused;
}
},
null
);
};
SectionSnapScroller.prototype.getCurrentSectionOverflow = function (
direction
) {
SectionSnapScroller.prototype.getCurrentSectionOverflow = function (direction) {
return getSectionOverflow(this.currentSection, direction);
};

@ -7,3 +7,11 @@ function isMobile() {
/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform)
);
}
function isTouchEnabled() {
return (
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
}

@ -77,10 +77,10 @@ page: home
</div>
<div class="home__section-column column is-6">
<div class="home__profiles-wrapper">
<picture class="home__team-picture">
<source srcset="{{ base.url }}/assets/images/nosaltres.png" type="image/png" />
<img src="{{ base.url }}/assets/images/nosaltres.webp" type="image/webp" alt="Fotografia de l'equip" />
</picture>
<picture class="home__team-picture">
<source srcset="{{ base.url }}/assets/images/nosaltres.png" type="image/png" />
<img src="{{ base.url }}/assets/images/nosaltres.webp" type="image/webp" alt="Fotografia de l'equip" />
</picture>
<div class="home__profiles">
<div class="home__profile lucas">
<h5 class="title is-5">Lucas García</h4>

1195
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -10,7 +10,11 @@
"postcss-cli": "^9.1.0",
"postcss-scss": "^4.0.3"
},
"devDependencies": {},
"devDependencies": {
"eslint": "^8.12.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

@ -1,9 +1,9 @@
module.exports = {
parser: "postcss-scss",
plugins: [
require("autoprefixer"),
...(process.env.JEKYLL_ENV == "production"
? [require("cssnano")({ preset: "default" })]
: [])
]
}
parser: "postcss-scss",
plugins: [
require("autoprefixer"),
...(process.env.JEKYLL_ENV == "production"
? [require("cssnano")({ preset: "default" })]
: []),
],
};

Loading…
Cancel
Save