Add uglify plugin and bundle scripts into index.js; Add minify html layout;

main
Bruno Carrión 6 months ago
parent fff4c07c5b
commit 2923740b36
  1. 4
      Gemfile
  2. 4
      Gemfile.lock
  3. 3
      _config.yml
  4. 3
      _includes/contact.html
  5. 1
      _includes/footer.html
  6. 10
      _layouts/compress.html
  7. 20
      _layouts/default.html
  8. 9
      _plugins/uglify.rb
  9. 440
      assets/js/components/contact.js
  10. 9
      assets/js/components/footer.js
  11. 199
      assets/js/components/header.js
  12. 21
      assets/js/index.js
  13. 10
      assets/js/main.js
  14. 77
      assets/js/pages/products.js
  15. 11
      assets/js/pages/projects.js
  16. 11
      assets/js/pages/workshops.js
  17. 801
      assets/js/utils/SectionScroller.js
  18. 6
      assets/js/utils/easees.js
  19. 4
      assets/js/utils/loader.js

@ -6,12 +6,12 @@ git_source(:github) { |repo_name| "https://github.com/#{repo_name}" }
gem "jekyll"
gem "webrick"
gem 'jekyll-postcss'
group :jekyll_plugins do
gem 'jekyll-sitemap'
gem 'jekyll-feed'
gem 'jekyll-seo-tag'
gem 'jekyll-paginate'
# gem 'jekyll-postcss'
gem 'jekyll-postcss'
gem "uglifier"
end

@ -9,6 +9,7 @@ GEM
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7)
execjs (2.8.1)
ffi (1.15.5)
forwardable-extended (2.6.0)
http_parser.rb (0.8.0)
@ -63,6 +64,8 @@ GEM
ffi (~> 1.9)
terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1)
uglifier (4.2.0)
execjs (>= 0.3.0, < 3)
unicode-display_width (1.8.0)
webrick (1.7.0)
@ -76,6 +79,7 @@ DEPENDENCIES
jekyll-postcss
jekyll-seo-tag
jekyll-sitemap
uglifier
webrick
BUNDLED WITH

@ -40,8 +40,9 @@ plugins:
- jekyll-seo-tag
- jekyll-paginate
- jekyll-postcss
- uglifier
sass:
sourcemap: never
style: compressed

@ -58,9 +58,8 @@
</div>
<div id="contactSubmit" class="contact__submit-field field">
<div class="control">
<button class="button is-danger">Enviar</button>
<button class="button">Enviar</button>
</div>
</div>
</form>
</div>
<script src="{{ base.url | prepend: site.url }}/assets/js/components/contact.js"></script>

@ -4,4 +4,3 @@
<div class="footer__contact">
{% include contact.html %}
</div>
<script src="{{ base.url | prepend: site.url }}/assets/js/components/footer.js"></script>

@ -0,0 +1,10 @@
---
# Jekyll layout that compresses HTML
# v3.1.0
# http://jch.penibelst.de/
# © 2014–2015 Anatol Broder
# MIT License
---
{% capture _LINE_FEED %}
{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

@ -1,3 +1,7 @@
---
layout: compress
---
<!DOCTYPE html>
<html>
<head>
@ -26,11 +30,7 @@
<script src="my-analytics-script.js"></script>
{% endif %}
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/device-detect.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/background-patterns.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/viewport.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/easees.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/SectionScroller.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/index.js"></script>
<style>
#loader {
@ -57,15 +57,5 @@
<footer id="pageFooter">{% include footer.html %}</footer>
{% endif %}
<div id="loader"></div>
<script src="{{ base.url | prepend: site.url }}/assets/js/main.js" ></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/components/header.js" ></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("loader").style.opacity = 0;
setTimeout(function () {
document.getElementById("loader").style.display = "none";
}, 500);
});
</script>
</body>
</html>

@ -0,0 +1,9 @@
module Jekyll
module Uglify
def uglify(input)
Uglifier.new(harmony: true).compile(input)
end
end
end
Liquid::Template.register_filter(Jekyll::Uglify)

@ -1,232 +1,250 @@
function ContactForm($el) {
var self = this;
this.fields = Array.apply(null, $el.getElementsByClassName("contact__field"));
this.fields.forEach(function(el) {
Object.defineProperty(el, "warn", {
set: function(message) {
var input = el.getElementsByTagName("input")[0] || el.getElementsByTagName("textarea")[0];
var help = el.getElementsByClassName("help")[0];
if (!message) {
input.classList.remove("is-warning");
help.classList.remove("is-warning");
help.innerText = "";
} else {
input.classList.add("is-warning");
help.classList.add("is-warning");
input.classList.remove("is-success");
help.classList.remove("is-success");
help.innerText = message;
}
}
});
Object.defineProperty(el, "success", {
set: function(message) {
var input = el.getElementsByTagName("input")[0] || el.getElementsByTagName("textarea")[0];
var help = el.getElementsByClassName("help")[0];
if (!message) {
help.classList.remove("is-success");
help.innerText = "";
} else {
input.classList.add("is-success");
help.classList.add("is-success");
input.classList.remove("is-warning");
help.classList.remove("is-warning");
help.innerText = message;
}
}
});
});
this.inputs = this.fields.map(function(el) {
return Array.apply(null, el.getElementsByTagName("input"))
.concat(Array.apply(null, el.getElementsByTagName("textarea")));
});
this.submitBtn = $el.getElementsByClassName("contact__submit-field")[0]
.getElementsByTagName("button")[0];
this.submit = this.submit.bind(this);
this.onSent = this.onSent.bind(this);
this.submitBtn.addEventListener("click", function(ev) {
ev.stopPropagation();
ev.preventDefault();
self.submit(ev)
.then(self.onSent)
.catch(function(err) {
console.error(err);
});
});
for (var i = 0; i < this.inputs.length; i++) {
for (var j = 0; j < this.inputs[i].length; j++) {
var input = this.inputs[i][j];
switch (input.type) {
case "text":
this.bindText(input, i);
break;
case "email":
this.bindEmail(input, i);
break;
case "radio":
this.bindRadio(input, i);
break;
case "checkbox":
this.bindCheckbox(input, i);
break;
default:
this.bindText(input, i);
}
var self = this;
this.fields = Array.apply(null, $el.getElementsByClassName("contact__field"));
this.fields.forEach(function (el) {
Object.defineProperty(el, "warn", {
set: function (message) {
var input =
el.getElementsByTagName("input")[0] ||
el.getElementsByTagName("textarea")[0];
var help = el.getElementsByClassName("help")[0];
if (!message) {
input.classList.remove("is-warning");
help.classList.remove("is-warning");
help.innerText = "";
} else {
input.classList.add("is-warning");
help.classList.add("is-warning");
input.classList.remove("is-success");
help.classList.remove("is-success");
help.innerText = message;
}
}
Object.defineProperty(this, "values", {
get: function() {
return self.fields.reduce(function(acum, el, i) {
acum[el.id.replace(/^contact/, "").toLowerCase()] = {
value: el._value,
required: el.hasAttribute("required")
};
return acum;
}, {});
},
});
Object.defineProperty(el, "success", {
set: function (message) {
var input =
el.getElementsByTagName("input")[0] ||
el.getElementsByTagName("textarea")[0];
var help = el.getElementsByClassName("help")[0];
if (!message) {
help.classList.remove("is-success");
help.innerText = "";
} else {
input.classList.add("is-success");
help.classList.add("is-success");
input.classList.remove("is-warning");
help.classList.remove("is-warning");
help.innerText = message;
}
},
});
});
this.notification = $el.getElementsByClassName("contact__notification")[0];
this.notification.getElementsByClassName("delete")[0].addEventListener("click", function() {
self.notification.classList.add("is-hidden");
});
}
this.inputs = this.fields.map(function (el) {
return Array.apply(null, el.getElementsByTagName("input")).concat(
Array.apply(null, el.getElementsByTagName("textarea"))
);
});
ContactForm.prototype.bindInput = function(input, fieldIdx, callback) {
var self = this;
this.submitBtn = $el
.getElementsByClassName("contact__submit-field")[0]
.getElementsByTagName("button")[0];
function onInput(ev) {
var field = self.fields[fieldIdx];
try {
field.warn = null;
field._value = callback(ev);
} catch (err) {
field.warn = err.message;
}
this.submit = this.submit.bind(this);
this.onSent = this.onSent.bind(this);
this.submitBtn.addEventListener("click", function (ev) {
ev.stopPropagation();
ev.preventDefault();
self
.submit(ev)
.then(self.onSent)
.catch(function (err) {
console.error(err);
});
});
for (var i = 0; i < this.inputs.length; i++) {
for (var j = 0; j < this.inputs[i].length; j++) {
var input = this.inputs[i][j];
switch (input.type) {
case "text":
this.bindText(input, i);
break;
case "email":
this.bindEmail(input, i);
break;
case "radio":
this.bindRadio(input, i);
break;
case "checkbox":
this.bindCheckbox(input, i);
break;
default:
this.bindText(input, i);
}
}
input.addEventListener("input", onInput);
}
ContactForm.prototype.bindText = function(input, fieldIdx) {
var self = this;
this.bindInput(input, fieldIdx, function() {
if (input.value === "" && self.fields[fieldIdx].hasAttribute("required")) {
throw new Error("Aquest camp és obligatori");
}
return input.value
}
Object.defineProperty(this, "values", {
get: function () {
return self.fields.reduce(function (acum, el, i) {
acum[el.id.replace(/^contact/, "").toLowerCase()] = {
value: el._value,
required: el.hasAttribute("required"),
};
return acum;
}, {});
},
});
this.notification = $el.getElementsByClassName("contact__notification")[0];
this.notification
.getElementsByClassName("delete")[0]
.addEventListener("click", function () {
self.notification.classList.add("is-hidden");
});
}
ContactForm.prototype.bindEmail = function(input, fieldIdx) {
var self = this;
var validationRe = /^[a-zA-Z0-9\.]+@[a-zA-Z0-9_\.]+?\.(?=[a-zA-Z]+)[a-zA-Z]{2,}$/;
this.bindInput(input, fieldIdx, function() {
var field = self.fields[fieldIdx];
if (!input.value.match(validationRe)) {
field.success = null;
throw new Error("Correu electrònic no vàlid");
} else if (input.value === "") {
field.success = null;
throw new Error("Aquest camp és obligatori");
}
field.success = "Correu electrònic validat";
return input.value;
});
}
ContactForm.prototype.bindInput = function (input, fieldIdx, callback) {
var self = this;
ContactForm.prototype.bindCheckbox = function(input, fieldIdx) {
var self = this;
this.bindInput(input, fieldIdx, function() {
var field = self.fields[fieldIdx]
if (field._value && !input.checked && field.hasAttribute("required")) {
throw new Error("Aquest camp és obligatori");
}
function onInput(ev) {
var field = self.fields[fieldIdx];
try {
field.warn = null;
field._value = callback(ev);
} catch (err) {
field.warn = err.message;
}
}
return input.checked;
});
}
input.addEventListener("input", onInput);
};
ContactForm.prototype.bindRadio = function(input, fieldIdx) {
var self = this;
this.bindInput(input, fieldIdx, function() {
return input.value === "true" || input.value === "1";
});
}
ContactForm.prototype.bindText = function (input, fieldIdx) {
var self = this;
this.bindInput(input, fieldIdx, function () {
if (input.value === "" && self.fields[fieldIdx].hasAttribute("required")) {
throw new Error("Aquest camp és obligatori");
}
return input.value;
});
};
ContactForm.prototype.bindEmail = function (input, fieldIdx) {
var self = this;
var validationRe =
/^[a-zA-Z0-9\.]+@[a-zA-Z0-9_\.]+?\.(?=[a-zA-Z]+)[a-zA-Z]{2,}$/;
this.bindInput(input, fieldIdx, function () {
var field = self.fields[fieldIdx];
if (!input.value.match(validationRe)) {
field.success = null;
throw new Error("Correu electrònic no vàlid");
} else if (input.value === "") {
field.success = null;
throw new Error("Aquest camp és obligatori");
}
ContactForm.prototype.submit = function(ev) {
ev.preventDefault();
ev.stopPropagation();
field.success = "Correu electrònic validat";
return input.value;
});
};
ContactForm.prototype.bindCheckbox = function (input, fieldIdx) {
var self = this;
this.bindInput(input, fieldIdx, function () {
var field = self.fields[fieldIdx];
if (field._value && !input.checked && field.hasAttribute("required")) {
throw new Error("Aquest camp és obligatori");
}
var self = this;
var values = this.values;
return new Promise(function(res, rej) {
var isFullfilled = Object.keys(values).reduce(function(isFullfilled, key) {
var isValid = (values[key].value !== void 0 && values[key].value !== "") || values[key].required !== true;
if (!isValid) {
var field = self.fields.find(function(el) {
return el.id === "contact" + key[0].toUpperCase() + key.slice(1);
});
field.warn = "Aquest camp és obligatori";
}
return isFullfilled && isValid;
}, true);
if (isFullfilled) {
var form = Object.keys(values).map(function(key) {
var value = values[key].value === true ? 1 : values[key].value === false ? 0 : values[key].value;
return encodeURIComponent(key) + "=" + encodeURIComponent(value);
}).join("&");
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
res(JSON.parse(this.responseText));
} else {
rej({
status: this.status,
text: this.responseText
});
}
}
}
req.onerror = function() {
rej({
status: this.status,
text: this.responseText
});
}
req.open("POST", "https://codeccoop.org/api/email_form.php");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Accept", "application/json");
req.send(form);
} else {
rej("Not fullfilled");
return input.checked;
});
};
ContactForm.prototype.bindRadio = function (input, fieldIdx) {
var self = this;
this.bindInput(input, fieldIdx, function () {
return input.value === "true" || input.value === "1";
});
};
ContactForm.prototype.submit = function (ev) {
ev.preventDefault();
ev.stopPropagation();
var self = this;
var values = this.values;
return new Promise(function (res, rej) {
var isFullfilled = Object.keys(values).reduce(function (isFullfilled, key) {
var isValid =
(values[key].value !== void 0 && values[key].value !== "") ||
values[key].required !== true;
if (!isValid) {
var field = self.fields.find(function (el) {
return el.id === "contact" + key[0].toUpperCase() + key.slice(1);
});
field.warn = "Aquest camp és obligatori";
}
return isFullfilled && isValid;
}, true);
if (isFullfilled) {
var form = Object.keys(values)
.map(function (key) {
var value =
values[key].value === true
? 1
: values[key].value === false
? 0
: values[key].value;
return encodeURIComponent(key) + "=" + encodeURIComponent(value);
})
.join("&");
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
res(JSON.parse(this.responseText));
} else {
rej({
status: this.status,
text: this.responseText,
});
}
}
});
}
};
ContactForm.prototype.onSent = function(res) {
if (res.success) {
this.inputs.forEach(function(inputs) {
inputs.forEach(function(input) {
input.value = "";
input.checked = false;
});
req.onerror = function () {
rej({
status: this.status,
text: this.responseText,
});
this.notification.classList.remove("is-hidden");
};
req.open("POST", "https://codeccoop.org/api/email_form.php");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Accept", "application/json");
req.send(form);
} else {
rej("Not fullfilled");
}
}
});
};
ContactForm.prototype.onSent = function (res) {
if (res.success) {
this.inputs.forEach(function (inputs) {
inputs.forEach(function (input) {
input.value = "";
input.checked = false;
});
});
this.notification.classList.remove("is-hidden");
}
};

@ -1,5 +1,6 @@
document.addEventListener("DOMContentLoaded", function() {
var $el = document.getElementById("pageFooter") || document.getElementById("contact");
(function () {
var $el =
document.getElementById("pageFooter") || document.getElementById("contact");
var contactForm = new ContactForm($el);
});
var contactForm = new ContactForm($el);
})();

@ -1,116 +1,121 @@
document.addEventListener("DOMContentLoaded", function() {
var $el = document.getElementById("pageHeader");
var burger = document.querySelectorAll(".navbar-burger")[0];
(function () {
var $el = document.getElementById("pageHeader");
var burger = document.querySelectorAll(".navbar-burger")[0];
burger.addEventListener("click", function() {
if (!burger.classList.contains("is-active")) {
var targetId = burger.dataset.target;
var targetEl = document.getElementById(targetId);
burger.addEventListener("click", function () {
if (!burger.classList.contains("is-active")) {
var targetId = burger.dataset.target;
var targetEl = document.getElementById(targetId);
burger.classList.add("is-active");
targetEl.classList.add("is-active");
document.addEventListener("click", onClickOut, true);
}
});
burger.classList.add("is-active");
targetEl.classList.add("is-active");
document.addEventListener("click", onClickOut, true);
}
});
function onClickOut(ev) {
if (!$el.contains(ev.target)) {
ev.preventDefault();
}
function onClickOut(ev) {
if (!$el.contains(ev.target)) {
ev.preventDefault();
}
ev.stopPropagation();
burger.classList.remove("is-active");
document
.getElementById(burger.dataset.target)
.classList.remove("is-active");
document.removeEventListener("click", onClickOut, true);
ev.stopPropagation();
burger.classList.remove("is-active");
document
.getElementById(burger.dataset.target)
.classList.remove("is-active");
document.removeEventListener("click", onClickOut, true);
if (!isMobile()) {
scrollNavHandler(ev);
}
if (!isMobile()) {
scrollNavHandler(ev);
}
}
function setActiveLink(id) {
var items = Array.apply(null, this.getElementsByClassName("navbar-item"));
var item = items.filter(function(item) {
if (item.classList.contains("has-dropdown")) {
item.children[0].classList.remove("is-active");
} else {
item.classList.remove("is-active");
}
return item.dataset.id == id;
})[0];
if (!item) return;
if (item.classList.contains("has-dropdown")) {
item.children[0].classList.add("is-active");
} else {
item.classList.add("is-active");
}
function setActiveLink(id) {
var items = Array.apply(null, this.getElementsByClassName("navbar-item"));
var item = items.filter(function (item) {
if (item.classList.contains("has-dropdown")) {
item.children[0].classList.remove("is-active");
} else {
item.classList.remove("is-active");
}
return item.dataset.id == id;
})[0];
if (!item) return;
if (item.classList.contains("has-dropdown")) {
item.children[0].classList.add("is-active");
} else {
item.classList.add("is-active");
}
}
$el.setActiveLink = setActiveLink.bind($el);
$el.setActiveLink = setActiveLink.bind($el);
var currentPage;
var match = location.pathname.match(/\/(.*)(?=\.html)/);
if (match) {
var isPost = location.pathname.match(
/\/[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}\//
);
var 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";
}
var currentPage;
var match = location.pathname.match(/\/(.*)(?=\.html)/);
if (match) {
var isPost = location.pathname.match(
/\/[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}\//
);
var 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";
}
$el.setActiveLink(currentPage);
$el.setActiveLink(currentPage);
function scrollNavHandler(ev) {
var landingSections = ["home", "work", "team", "projects"];
if (landingSections.includes(currentPage)) {
if (ev.target.classList.contains("navbar-item") || ev.target.classList.contains("navbar-link")) {
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 = scrollRoot.getElementsByClassName("scroll-viewport")[0]
scrollRoot.scrollBy({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: "smooth"
});
scrollViewport.scrollBy({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: "smooth"
});
function scrollNavHandler(ev) {
var landingSections = ["home", "work", "team", "projects"];
if (landingSections.includes(currentPage)) {
if (
ev.target.classList.contains("navbar-item") ||
ev.target.classList.contains("navbar-link")
) {
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 =
scrollRoot.getElementsByClassName("scroll-viewport")[0];
scrollRoot.scrollBy({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: "smooth",
});
scrollViewport.scrollBy({
top: document.getElementById(id).getBoundingClientRect().top,
left: 0,
behavior: "smooth",
});
var delayed;
function whileScroll () {
clearTimeout(delayed);
delayed = setTimeout(onScrollEnds, 50);
}
var delayed;
function onScrollEnds () {
location.hash = id;
scrollRoot.removeEventListener("scroll", whileScroll);
}
function whileScroll() {
clearTimeout(delayed);
delayed = setTimeout(onScrollEnds, 50);
}
scrollRoot.addEventListener("scroll", whileScroll);
}
}
function onScrollEnds() {
location.hash = id;
scrollRoot.removeEventListener("scroll", whileScroll);
}
scrollRoot.addEventListener("scroll", whileScroll);
}
}
}
}
if (!isMobile()) {
var links = $el.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", scrollNavHandler);
}
if (!isMobile()) {
var links = $el.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", scrollNavHandler);
}
});
}
})();

@ -0,0 +1,21 @@
---
layout: none
---
{% capture scripts %}
{% include_relative utils/device-detect.js %}
{% include_relative utils/SectionScroller.js %}
{% include_relative utils/easees.js %}
{% include_relative utils/viewport.js %}
document.addEventListener("DOMContentLoaded", function () {
{% include_relative main.js %}
{% include_relative utils/loader.js %}
{% include_relative components/header.js %}
{% include_relative components/contact.js %}
{% include_relative components/footer.js %}
});
{% endcapture %}
{{ scripts | uglify | strip }}

@ -1,6 +1,4 @@
document.addEventListener("DOMContentLoaded", function () {
if (isMobile()) {
document.documentElement.classList.add("is-mobile");
document.body.classList.add("is-mobile");
}
});
if (isMobile()) {
document.documentElement.classList.add("is-mobile");
document.body.classList.add("is-mobile");
}

@ -1,46 +1,43 @@
document.addEventListener("DOMContentLoaded", function() {
var $el = document.getElementsByTagName("main")[0];
document.addEventListener("DOMContentLoaded", function () {
var $el = document.getElementsByTagName("main")[0];
/* setTimeout(function () {
var background = new BackgroundPatterns("products", {
isMobile: isMobile()
});
background.bind($el);
}, 200); */
var description
var descriptions = document.getElementsByClassName("products__product-toggle");
for (var i = 0; i < descriptions.length; i++) {
function toggleVisibility(ev) {
if (ev.target.classList.contains("products__product-contact")) {
window.scrollBy(
0,
document.getElementById("pageFooter")
.getBoundingClientRect().top
);
} else {
if (!ev.target.classList.contains("products__product-description")) {
ev.currentTarget.classList.toggle("open");
if (ev.currentTarget.classList.contains("open")) {
ev.currentTarget.setAttribute("aria-pressed", "true");
ev.currentTarget.setAttribute("aria-expanded", "true");
} else {
ev.currentTarget.setAttribute("aria-pressed", "false");
ev.currentTarget.setAttribute("aria-expanded", "false");
}
}
}
var description;
var descriptions = document.getElementsByClassName(
"products__product-toggle"
);
for (var i = 0; i < descriptions.length; i++) {
function toggleVisibility(ev) {
if (ev.target.classList.contains("products__product-contact")) {
window.scrollBy(
0,
document.getElementById("pageFooter").getBoundingClientRect().top
);
} else {
if (!ev.target.classList.contains("products__product-description")) {
ev.currentTarget.classList.toggle("open");
if (ev.currentTarget.classList.contains("open")) {
ev.currentTarget.setAttribute("aria-pressed", "true");
ev.currentTarget.setAttribute("aria-expanded", "true");
} else {
ev.currentTarget.setAttribute("aria-pressed", "false");
ev.currentTarget.setAttribute("aria-expanded", "false");
}
}
}
}
function bindToEnter(fn, keyCode) {
return function(ev) {
if (ev.keyCode === keyCode) {
fn(ev);
}
}
function bindToEnter(fn, keyCode) {
return function (ev) {
if (ev.keyCode === keyCode) {
fn(ev);
}
descriptions[i].addEventListener("click", toggleVisibility);
descriptions[i].addEventListener("keydown", bindToEnter(toggleVisibility, 13));
};
}
descriptions[i].addEventListener("click", toggleVisibility);
descriptions[i].addEventListener(
"keydown",
bindToEnter(toggleVisibility, 13)
);
}
});

@ -1,10 +1,3 @@
document.addEventListener("DOMContentLoaded", function() {
var $el = document.getElementsByTagName("main")[0];
setTimeout(function () {
var background = new BackgroundPatterns("arxiu", {
isMobile: isMobile()
});
background.bind($el);
}, 200);
document.addEventListener("DOMContentLoaded", function () {
var $el = document.getElementsByTagName("main")[0];
});

@ -1,10 +1,3 @@
document.addEventListener("DOMContentLoaded", function() {
var $el = document.getElementsByTagName("main")[0];
setTimeout(function() {
var background = new BackgroundPatterns("workshops", {
isMobile: isMobile()
});
background.bind($el);
}, 200);
document.addEventListener("DOMContentLoaded", function () {
var $el = document.getElementsByTagName("main")[0];
});

@ -1,436 +1,461 @@
var SectionSnapScroller = (function() {
/* PRIVATE INTERFACE */
function _smoothScrolling($el, order) {
var delta = 0;
var offset = Math.abs(order.top);
var direction = order.top > 0 ? 1 : -1;
return Easeer.debounce(
function(progress) {
var move = offset * progress * direction - delta;
$el.scrollBy(0, move);
delta += move;
},
7,
(offset / 20) * 7,
"out"
);
var SectionSnapScroller = (function () {
/* PRIVATE INTERFACE */
function _smoothScrolling($el, order) {
var delta = 0;
var offset = Math.abs(order.top);
var direction = order.top > 0 ? 1 : -1;
return Easeer.debounce(
function (progress) {
var move = offset * progress * direction - delta;
$el.scrollBy(0, move);
delta += move;
},
7,
(offset / 20) * 7,
"out"
);
}
function _setupScrollViewport(getContentHeight) {
var viewport = document.createElement("div");
viewport.classList.add("scroll-viewport");
var span = document.createElement("div");
span.classList.add("scroll-span");
var height = getContentHeight();
window.addEventListener("resize", function () {
if (isMobile()) {
return;
}
height = getContentHeight();
span.style.height = height + "px";
});
screen.orientation.addEventListener("change", function () {
height = getContentHeight();
span.style.height = height + "px";
});
span.style.height = height + "px";
viewport.appendChild(span);
return viewport;
}
function _createStylesheet() {
var styles = "html, body { overscroll-behavior-y: contain; }";
if (isMobile()) {
styles +=
".scroll-root { overflow-y: scroll; height: 100vh; scroll-behavior: smooth; }";
styles +=
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); scroll-snap-align: start; }";
styles +=
".scroll-root .scroll-section:last-child { height: 0px; min-height: 0px; scroll-snap-align: end; }";
} else {
styles +=
".scroll-root { overflow: hidden; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overscroll-behavior-y: contain; }";
styles +=
".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-logger { position: fixed; bottom: 15px; right: 30px; z-index: 10; background: white; border-radius: 5px; padding: .5em 1em; box-shadow: 2px 2px 6px #0003; }";
}
function _setupScrollViewport(getContentHeight) {
var viewport = document.createElement("div");
viewport.classList.add("scroll-viewport");
var span = document.createElement("div");
span.classList.add("scroll-span");
var height = getContentHeight();
window.addEventListener("resize", function() {
if (isMobile()) {
return;
}
height = getContentHeight();
span.style.height = height + "px";
});
screen.orientation.addEventListener("change", function() {
height = getContentHeight();
span.style.height = height + "px";
});
var css = document.createElement("style");
css.type = "text/css";
span.style.height = height + "px";
viewport.appendChild(span);
return viewport;
if (css.styleSheet) {
css.styleSheet.cssText = styles;
} else {
css.appendChild(document.createTextNode(styles));
}
function _createStylesheet() {
var styles = "html, body { overscroll-behavior-y: contain; }";
if (isMobile()) {
styles += ".scroll-root { overflow-y: scroll; height: 100vh; scroll-behavior: smooth; }";
styles +=
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); scroll-snap-align: start; }";
styles += ".scroll-root .scroll-section:last-child { height: 0px; min-height: 0px; scroll-snap-align: end; }";
} else {
styles +=
".scroll-root { overflow: hidden; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overscroll-behavior-y: contain; }";
styles +=
".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-logger { position: fixed; bottom: 15px; right: 30px; z-index: 10; background: white; border-radius: 5px; padding: .5em 1em; box-shadow: 2px 2px 6px #0003; }";
document.getElementsByTagName("head")[0].appendChild(css);
}
}
function _setupLogger() {
logger = document.createElement("div");
logger.classList.add("scroll-logger");
logger.log = function (message) {
logger.innerText = message;
};
return logger;
}
var css = document.createElement("style");
css.type = "text/css";
var onScroll = (function () {
var self, direction, overflow, delayed;
var scrolling = false;
if (css.styleSheet) {
css.styleSheet.cssText = styles;
function _onScrollEnds() {
overflow = self.getCurrentSectionOverflow(direction);
if (overflow * direction < 0) {
if (self.behavior === "mandatory") {
self.currentSection =
self.sections.indexOf(self.currentSection) + direction;
} else {
css.appendChild(document.createTextNode(styles));
self.currentSection = self.getVisibleSection().id;
}
document.getElementsByTagName("head")[0].appendChild(css);
}
self.afterScroll(self.currentSection);
scrolling = false;
}
function _setupLogger() {
logger = document.createElement("div");
logger.classList.add("scroll-logger");
logger.log = function(message) {
logger.innerText = message;
};
return logger;
return function (ev) {
self = this;
if (this._delayed === true) return;
if (scrolling === false) {
this.beforeScroll(this.currentSection);
scrolling = true;
}
var offset = ev.deltaY;
direction = ev.deltaY < 0 ? -1 : 1;
var nextSection =
this.sections[
Math.max(
0,
Math.min(
this.sections.length - 1,
this.sections.indexOf(this.currentSection) + direction
)
)
];
var nextSectionOverflow = getSectionOverflow(nextSection, direction);
if (this.behavior === "mandatory") {
offset =
Math.abs(offset) > Math.abs(nextSectionOverflow)
? nextSectionOverflow
: offset;
}
this.$el.scrollBy(0, offset);
this.$viewport.scrollBy(0, offset);
this.onScroll(this.currentSection);
clearTimeout(delayed);
delayed = setTimeout(_onScrollEnds, 50);
};
})();
function getSectionOverflow(id, direction) {
if (direction === void 0) {
console.warn(
"getSectionOverflow needs a direction to compute the sections overflow. Direction mus't be a positive integer like 1 to get descending overflow, and negative integer, like -1, to get ascending overflow. When no direction is informed, then it uses 1 as a fallback value."
);
direction = 1;
}
var overflow;
var $el = document.getElementById(id);
var box = $el.getBoundingClientRect();
if (direction > 0) {
overflow = Math.floor(box.height + box.top - window.innerHeight);
} else {
overflow = Math.floor(box.top);
}
var onScroll = (function() {
var self, direction, overflow, delayed;
var scrolling = false;
function _onScrollEnds() {
overflow = self.getCurrentSectionOverflow(direction);
if (overflow * direction < 0) {
if (self.behavior === "mandatory") {
self.currentSection =
self.sections.indexOf(self.currentSection) + direction;
} else {
self.currentSection = self.getVisibleSection().id;
}
}
self.afterScroll(self.currentSection);
scrolling = false;
}
return function(ev) {
self = this;
if (this._delayed === true) return;
if (scrolling === false) {
this.beforeScroll(this.currentSection);
scrolling = true;
}
return Math.abs(overflow) <= 5 ? 0 : overflow;
}
var offset = ev.deltaY;
direction = ev.deltaY < 0 ? -1 : 1;
var onTouchScroll = (function () {
var self;
var debounced;
var nextSection = this.sections[Math.max(0, Math.min(
this.sections.length - 1,
this.sections.indexOf(this.currentSection) + direction
))];
var nextSectionOverflow = getSectionOverflow(nextSection, direction);
function onScrollEnds() {
var $el = self.getVisibleSection();
if ($el) {
location.hash = "#" + $el.id;
}
}
if (this.behavior === "mandatory") {
offset = Math.abs(offset) > Math.abs(nextSectionOverflow) ?
nextSectionOverflow : offset;
}
return function (ev) {
self = this;
clearTimeout(debounced);
debounced = setTimeout(onScrollEnds, 50);
};
})();
/* PUBLIC INTERFACE */
function SectionSnapScroller(scrollEl, settings) {
var self = this;
settings = settings || {};
this.behavior = settings.behavior || "mandatory";
_createStylesheet();
if (typeof scrollEl === "string") {
this.$el = document.querySelector(scrollEl);
if (this.$el === void 0) {
throw new Error(
"SectionSnapScroller can't find their root HTMLElement"
);
}
} else if (HTMLElement.prototype.isPrototypeOf(scrollEl)) {
this.$el = scrollEl;
} else {
throw new Error(
"SecttionSnapScroller initialization needs a root HTMLElement to be attached on"
);
}
this.$el.scrollBy(0, offset);
this.$viewport.scrollBy(0, offset);
this.onScroll(this.currentSection);
this.$el.classList.add("scroll-root");
this._sectionClass = "scroll-section";
this._delayed = false;
var sections;
if (settings.sectionClass) {