Anxhelo Lushka
6 years ago
32 changed files with 464 additions and 254 deletions
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 24 KiB |
@ -0,0 +1,3 @@ |
|||||
|
<IfModule mod_headers.c> |
||||
|
Header set Cache-Control "max-age=15778476, public" |
||||
|
</IfModule> |
||||
@ -0,0 +1,301 @@ |
|||||
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; |
||||
|
|
||||
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; |
||||
|
|
||||
|
(function (global, factory) { |
||||
|
(typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.LazyLoad = factory(); |
||||
|
})(this, function () { |
||||
|
'use strict'; |
||||
|
|
||||
|
var getInstanceSettings = function getInstanceSettings(customSettings) { |
||||
|
var defaultSettings = { |
||||
|
elements_selector: "img", |
||||
|
container: document, |
||||
|
threshold: 300, |
||||
|
data_src: "src", |
||||
|
data_srcset: "srcset", |
||||
|
data_sizes: "sizes", |
||||
|
class_loading: "loading", |
||||
|
class_loaded: "loaded", |
||||
|
class_error: "error", |
||||
|
callback_load: null, |
||||
|
callback_error: null, |
||||
|
callback_set: null, |
||||
|
callback_enter: null |
||||
|
}; |
||||
|
|
||||
|
return _extends({}, defaultSettings, customSettings); |
||||
|
}; |
||||
|
|
||||
|
var dataPrefix = "data-"; |
||||
|
var processedDataName = "was-processed"; |
||||
|
var processedDataValue = "true"; |
||||
|
|
||||
|
var getData = function getData(element, attribute) { |
||||
|
return element.getAttribute(dataPrefix + attribute); |
||||
|
}; |
||||
|
|
||||
|
var setData = function setData(element, attribute, value) { |
||||
|
return element.setAttribute(dataPrefix + attribute, value); |
||||
|
}; |
||||
|
|
||||
|
var setWasProcessed = function setWasProcessed(element) { |
||||
|
return setData(element, processedDataName, processedDataValue); |
||||
|
}; |
||||
|
|
||||
|
var getWasProcessed = function getWasProcessed(element) { |
||||
|
return getData(element, processedDataName) === processedDataValue; |
||||
|
}; |
||||
|
|
||||
|
function purgeElements(elements) { |
||||
|
return elements.filter(function (element) { |
||||
|
return !getWasProcessed(element); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/* Creates instance and notifies it through the window element */ |
||||
|
var createInstance = function createInstance(classObj, options) { |
||||
|
var event; |
||||
|
var eventString = "LazyLoad::Initialized"; |
||||
|
var instance = new classObj(options); |
||||
|
try { |
||||
|
// Works in modern browsers
|
||||
|
event = new CustomEvent(eventString, { detail: { instance: instance } }); |
||||
|
} catch (err) { |
||||
|
// Works in Internet Explorer (all versions)
|
||||
|
event = document.createEvent("CustomEvent"); |
||||
|
event.initCustomEvent(eventString, false, false, { instance: instance }); |
||||
|
} |
||||
|
window.dispatchEvent(event); |
||||
|
}; |
||||
|
|
||||
|
/* Auto initialization of one or more instances of lazyload, depending on the |
||||
|
options passed in (plain object or an array) */ |
||||
|
function autoInitialize(classObj, options) { |
||||
|
if (!options.length) { |
||||
|
// Plain object
|
||||
|
createInstance(classObj, options); |
||||
|
} else { |
||||
|
// Array of objects
|
||||
|
for (var i = 0, optionsItem; optionsItem = options[i]; i += 1) { |
||||
|
createInstance(classObj, optionsItem); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) { |
||||
|
for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) { |
||||
|
if (childTag.tagName === "SOURCE") { |
||||
|
var attributeValue = getData(childTag, dataAttrName); |
||||
|
if (attributeValue) { |
||||
|
childTag.setAttribute(attrName, attributeValue); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value) { |
||||
|
if (!value) { |
||||
|
return; |
||||
|
} |
||||
|
element.setAttribute(attrName, value); |
||||
|
}; |
||||
|
|
||||
|
var setSources = function setSources(element, settings) { |
||||
|
var sizesDataName = settings.data_sizes, |
||||
|
srcsetDataName = settings.data_srcset, |
||||
|
srcDataName = settings.data_src; |
||||
|
|
||||
|
var srcDataValue = getData(element, srcDataName); |
||||
|
switch (element.tagName) { |
||||
|
case "IMG": |
||||
|
{ |
||||
|
var parent = element.parentNode; |
||||
|
if (parent && parent.tagName === "PICTURE") { |
||||
|
setSourcesInChildren(parent, "srcset", srcsetDataName); |
||||
|
} |
||||
|
var sizesDataValue = getData(element, sizesDataName); |
||||
|
setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue); |
||||
|
var srcsetDataValue = getData(element, srcsetDataName); |
||||
|
setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue); |
||||
|
setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); |
||||
|
break; |
||||
|
} |
||||
|
case "IFRAME": |
||||
|
setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); |
||||
|
break; |
||||
|
case "VIDEO": |
||||
|
setSourcesInChildren(element, "src", srcDataName); |
||||
|
setAttributeIfNotNullOrEmpty(element, "src", srcDataValue); |
||||
|
break; |
||||
|
default: |
||||
|
if (srcDataValue) { |
||||
|
element.style.backgroundImage = 'url("' + srcDataValue + '")'; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
var isBot = "onscroll" in window && !/glebot/.test(navigator.userAgent); |
||||
|
|
||||
|
var runningOnBrowser = typeof window !== "undefined"; |
||||
|
|
||||
|
var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window; |
||||
|
|
||||
|
var supportsClassList = runningOnBrowser && "classList" in document.createElement("p"); |
||||
|
|
||||
|
var addClass = function addClass(element, className) { |
||||
|
if (supportsClassList) { |
||||
|
element.classList.add(className); |
||||
|
return; |
||||
|
} |
||||
|
element.className += (element.className ? " " : "") + className; |
||||
|
}; |
||||
|
|
||||
|
var removeClass = function removeClass(element, className) { |
||||
|
if (supportsClassList) { |
||||
|
element.classList.remove(className); |
||||
|
return; |
||||
|
} |
||||
|
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); |
||||
|
}; |
||||
|
|
||||
|
var callCallback = function callCallback(callback, argument) { |
||||
|
if (callback) { |
||||
|
callback(argument); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
var loadString = "load"; |
||||
|
var errorString = "error"; |
||||
|
|
||||
|
var removeListeners = function removeListeners(element, loadHandler, errorHandler) { |
||||
|
element.removeEventListener(loadString, loadHandler); |
||||
|
element.removeEventListener(errorString, errorHandler); |
||||
|
}; |
||||
|
|
||||
|
var addOneShotListeners = function addOneShotListeners(element, settings) { |
||||
|
var onLoad = function onLoad(event) { |
||||
|
onEvent(event, true, settings); |
||||
|
removeListeners(element, onLoad, onError); |
||||
|
}; |
||||
|
var onError = function onError(event) { |
||||
|
onEvent(event, false, settings); |
||||
|
removeListeners(element, onLoad, onError); |
||||
|
}; |
||||
|
element.addEventListener(loadString, onLoad); |
||||
|
element.addEventListener(errorString, onError); |
||||
|
}; |
||||
|
|
||||
|
var onEvent = function onEvent(event, success, settings) { |
||||
|
var element = event.target; |
||||
|
removeClass(element, settings.class_loading); |
||||
|
addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
|
||||
|
callCallback(success ? settings.callback_load : settings.callback_error, element); |
||||
|
}; |
||||
|
|
||||
|
function revealElement(element, settings, force) { |
||||
|
if (!force && getWasProcessed(element)) { |
||||
|
return; // element has already been processed and force wasn't true
|
||||
|
} |
||||
|
callCallback(settings.callback_enter, element); |
||||
|
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { |
||||
|
addOneShotListeners(element, settings); |
||||
|
addClass(element, settings.class_loading); |
||||
|
} |
||||
|
setSources(element, settings); |
||||
|
setWasProcessed(element); |
||||
|
callCallback(settings.callback_set, element); |
||||
|
} |
||||
|
|
||||
|
/* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and |
||||
|
entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */ |
||||
|
var isIntersecting = function isIntersecting(element) { |
||||
|
return element.isIntersecting || element.intersectionRatio > 0; |
||||
|
}; |
||||
|
|
||||
|
var getObserverSettings = function getObserverSettings(settings) { |
||||
|
return { |
||||
|
root: settings.container === document ? null : settings.container, |
||||
|
rootMargin: settings.threshold + "px" |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
var LazyLoad = function LazyLoad(customSettings, elements) { |
||||
|
this._settings = getInstanceSettings(customSettings); |
||||
|
this._setObserver(); |
||||
|
this.update(elements); |
||||
|
}; |
||||
|
|
||||
|
LazyLoad.prototype = { |
||||
|
_setObserver: function _setObserver() { |
||||
|
var _this = this; |
||||
|
|
||||
|
if (!supportsIntersectionObserver) { |
||||
|
return; |
||||
|
} |
||||
|
var revealIntersectingElements = function revealIntersectingElements(entries) { |
||||
|
entries.forEach(function (entry) { |
||||
|
if (isIntersecting(entry)) { |
||||
|
var element = entry.target; |
||||
|
_this.load(element); |
||||
|
_this._observer.unobserve(element); |
||||
|
} |
||||
|
}); |
||||
|
_this._elements = purgeElements(_this._elements); |
||||
|
}; |
||||
|
this._observer = new IntersectionObserver(revealIntersectingElements, getObserverSettings(this._settings)); |
||||
|
}, |
||||
|
|
||||
|
loadAll: function loadAll() { |
||||
|
var _this2 = this; |
||||
|
|
||||
|
this._elements.forEach(function (element) { |
||||
|
_this2.load(element); |
||||
|
}); |
||||
|
this._elements = purgeElements(this._elements); |
||||
|
}, |
||||
|
|
||||
|
update: function update(elements) { |
||||
|
var _this3 = this; |
||||
|
|
||||
|
var settings = this._settings; |
||||
|
var nodeSet = elements || settings.container.querySelectorAll(settings.elements_selector); |
||||
|
|
||||
|
this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
|
||||
|
|
||||
|
if (isBot || !this._observer) { |
||||
|
this.loadAll(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this._elements.forEach(function (element) { |
||||
|
_this3._observer.observe(element); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
destroy: function destroy() { |
||||
|
var _this4 = this; |
||||
|
|
||||
|
if (this._observer) { |
||||
|
purgeElements(this._elements).forEach(function (element) { |
||||
|
_this4._observer.unobserve(element); |
||||
|
}); |
||||
|
this._observer = null; |
||||
|
} |
||||
|
this._elements = null; |
||||
|
this._settings = null; |
||||
|
}, |
||||
|
|
||||
|
load: function load(element, force) { |
||||
|
revealElement(element, this._settings, force); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
/* Automatic instances creation if required (useful for async script loading!) */ |
||||
|
var autoInitOptions = window.lazyLoadOptions; |
||||
|
if (runningOnBrowser && autoInitOptions) { |
||||
|
autoInitialize(LazyLoad, autoInitOptions); |
||||
|
} |
||||
|
|
||||
|
return LazyLoad; |
||||
|
}); |
||||
File diff suppressed because one or more lines are too long
@ -1,91 +0,0 @@ |
|||||
--- |
|
||||
layout: default |
|
||||
section_id: portfolio |
|
||||
title: LibOCon 2018 Visual Identity |
|
||||
--- |
|
||||
|
|
||||
<div style="background-color: #11a500;" class="full new"> |
|
||||
<div class="section-title new"> |
|
||||
<div class="row"> |
|
||||
<div class="medium-10 medium-centered columns"> |
|
||||
<h1 class="wow slideInUp" style="color: white; font-size: 2rem;">LibOCon 2018 Visual Identity</h1> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="full text"> |
|
||||
<div class="row"> |
|
||||
<div class="large-8 columns"> |
|
||||
<img src="../images/projects/libocon.png" alt=""> |
|
||||
<div class="spacing"></div> |
|
||||
<img src="../images/projects/libocon_totebag.png" alt=""> |
|
||||
<div class="spacing"></div> |
|
||||
</div> |
|
||||
<div class="large-4 columns"> |
|
||||
<div class="project-intro"> |
|
||||
<p>LibOCon is the annual gathering of the LibreOffice community. At LibOCon, LibreOffice users gather to network and meet key LibreOffice developers, designers, localizers, documenters, supporters and marketers, and to learn about the latest in LibreOffice development.</p> |
|
||||
<p>We worked on the conference visual identity as a sponsor of the event.</p> |
|
||||
<hr> |
|
||||
<div class="spacing"></div> |
|
||||
<h4>Date</h4> |
|
||||
<p><span>September, 2018</span></p> |
|
||||
<h4>Clients</h4> |
|
||||
<p><span><a href="https://libocon.org" target="_blank" rel="noopener">LibOCon</a></span></p> |
|
||||
<h4>Category</h4> |
|
||||
<p><span>Visual Identity</span></p> |
|
||||
<hr> |
|
||||
<a class="button boxed black" href="https://github.com/uracreative/works/tree/master/LibOCon 2018" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br /> |
|
||||
<a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img src="../images/projects/identihub.svg" > Identihub</a><br /> |
|
||||
<a class="button boxed libocon" href="https://libocon.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<hr> |
|
||||
<div class="full"> |
|
||||
<div class="section-title"> |
|
||||
<div class="row"> |
|
||||
<div class="medium-10 medium-centered columns"> |
|
||||
<h2>Related projects</h2> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="related-works"> |
|
||||
<div class="row"> |
|
||||
<div class="large-4 columns"> |
|
||||
<div class="work-wrapper"> |
|
||||
<a href="openlabs" class="work"> |
|
||||
<img src="../images/projects/openlabs.jpg" alt=""> |
|
||||
<div class="info"> |
|
||||
<h3>Open Labs</h3> |
|
||||
<p>Rebranding</p> |
|
||||
</div> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="large-4 columns"> |
|
||||
<div class="work-wrapper"> |
|
||||
<a href="tor-style-guide" class="work"> |
|
||||
<img src="../images/projects/tor_thumb.png" alt=""> |
|
||||
<div class="info"> |
|
||||
<h3>Tor Style Guide</h3> |
|
||||
<p>Style Guide</p> |
|
||||
</div> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="large-4 columns"> |
|
||||
<div class="work-wrapper"> |
|
||||
<a href="mozilla-l10n" class="work"> |
|
||||
<img src="../images/projects/mozilla-l10n.jpg" alt=""> |
|
||||
<div class="info"> |
|
||||
<h3>Mozilla L10N T-shirts</h3> |
|
||||
<p>Print</p> |
|
||||
</div> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
Loading…
Reference in new issue