Skip to content

Commit 2bb18fd

Browse files
thednpthednp
committed
Changes:
* More modular scripting makes more flexible usage in ES6/ES7 * some README.md typo * demo updates
1 parent 1053d88 commit 2bb18fd

File tree

13 files changed

+301
-64
lines changed

13 files changed

+301
-64
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Double Lazy Load | dll.js
22
Double Lazy Load for videos, images and background images.
33

4-
[![NPM Version](https://img.shields.io/npm/v/dll.js.svg?style=flat-square)](https://www.npmjs.com/package/navbar.js)
4+
[![NPM Version](https://img.shields.io/npm/v/dll.js.svg?style=flat-square)](https://www.npmjs.com/package/dll.js)
55
[![NPM Downloads](https://img.shields.io/npm/dm/dll.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=dll.js)
66
[![jsDeliver](https://data.jsdelivr.com/v1/package/npm/dll.js/badge)](https://www.jsdelivr.com/package/npm/dll.js)
77

‎assets/css/prism.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
2+
/**
3+
* okaidia theme for JavaScript, CSS and HTML
4+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
5+
* @author ocodia
6+
*/
7+
8+
code[class*="language-"],
9+
pre[class*="language-"] {
10+
color: #cccccc;
11+
background: none;
12+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
line-height: 1.5;
20+
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
/* Code blocks */
32+
pre[class*="language-"] {
33+
padding: 1em;
34+
margin: .5em 0;
35+
overflow: auto;
36+
border-radius: 0.3em;
37+
}
38+
39+
:not(pre) > code[class*="language-"],
40+
pre[class*="language-"] {
41+
background: rgba(0,0,0,0.7);
42+
}
43+
44+
/* Inline code */
45+
:not(pre) > code[class*="language-"] {
46+
padding: .1em;
47+
border-radius: .3em;
48+
white-space: normal;
49+
}
50+
51+
.token.comment,
52+
.token.prolog,
53+
.token.doctype,
54+
.token.cdata {
55+
color: slategray;
56+
}
57+
58+
.token.punctuation {
59+
color: #dc9872;
60+
}
61+
62+
.namespace {
63+
opacity: .7;
64+
}
65+
66+
.token.property,
67+
.token.tag,
68+
.token.constant,
69+
.token.symbol,
70+
.token.deleted {
71+
color: #dc9872;
72+
}
73+
74+
.token.boolean,
75+
.token.number {
76+
color: #ab8cda;
77+
}
78+
79+
.token.selector,
80+
.token.attr-name,
81+
.token.string,
82+
.token.char,
83+
.token.builtin,
84+
.token.inserted {
85+
color: #b7a756;
86+
}
87+
88+
.token.operator,
89+
.token.entity,
90+
.token.url,
91+
.language-css .token.string,
92+
.style .token.string,
93+
.token.variable {
94+
color: #f8f8f2;
95+
}
96+
97+
.token.atrule,
98+
.token.attr-value,
99+
.token.function {
100+
color: #4dbec3;
101+
}
102+
103+
.token.keyword {
104+
color: #66d9ef;
105+
}
106+
107+
.token.regex,
108+
.token.important {
109+
color: #fd971f;
110+
}
111+
112+
.token.important,
113+
.token.bold {
114+
font-weight: bold;
115+
}
116+
.token.italic {
117+
font-style: italic;
118+
}
119+
120+
.token.entity {
121+
cursor: help;
122+
}
123+

‎assets/img/apple-touch-icon.png

3.93 KB
Loading

‎assets/img/favicon.ico

262 KB
Binary file not shown.

‎assets/js/prism.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/scripts.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,10 @@ function scrollExample(){
129129
//scroll top?
130130
var toTop = document.getElementById('toTop'),
131131
toTopTween = KUTE.to( 'window', { scroll: 0 }, { easing: 'easingQuarticOut', duration : 1500 } );
132-
toTop.addEventListener('click',topHandler,false);
133132

134133
function topHandler(e){
135134
e.preventDefault();
136135
toTopTween.start();
137-
}
136+
}
137+
138+
toTop.addEventListener('click',topHandler,false);

‎dist/dll.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*!
2+
* DLL.js v1.5.1 (https://thednp.github.io/dll.js/)
3+
* Copyright 2020 © thednp
4+
* Licensed under MIT (https://github.com/thednp/dll.js/blob/master/LICENSE)
5+
*/
6+
(function (global, factory) {
7+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
8+
typeof define === 'function' && define.amd ? define(factory) :
9+
(global = global || self, global.dll = factory());
10+
}(this, (function () { 'use strict';
11+
12+
function queryElement (selector, parent) {
13+
var lookUp = parent && parent instanceof Element ? parent : document;
14+
return selector instanceof Element ? selector : lookUp.querySelector(selector);
15+
}
16+
17+
function tryWrapper (fn,origin){
18+
try{ fn(); }
19+
catch(e){
20+
console.error((origin + ": " + e));
21+
}
22+
}
23+
24+
function on (element, event, handler, options) {
25+
options = options || false;
26+
element.addEventListener(event, handler, options);
27+
}
28+
29+
function off (element, event, handler, options) {
30+
options = options || false;
31+
element.removeEventListener(event, handler, options);
32+
}
33+
34+
function one (element, event, handler, options) {
35+
on(element, event, function handlerWrapper(e){
36+
if (e.target === element) {
37+
handler(e);
38+
off(element, event, handlerWrapper, options);
39+
}
40+
}, options);
41+
}
42+
43+
function loadMedia(mediaElement, imageCallback) {
44+
var isVideo = mediaElement.tagName === 'SOURCE',
45+
loadEvent = isVideo ? 'loadstart' : 'load',
46+
newVideo = isVideo ? document.createElement('VIDEO') : 0,
47+
mediaObject = isVideo ? document.createElement('SOURCE') : new Image(),
48+
loadTarget = isVideo ? newVideo : mediaObject,
49+
src = mediaElement.getAttribute('data-src');
50+
one(loadTarget,loadEvent,function (){
51+
if (mediaElement.tagName === 'IMG') { mediaElement.src=src; }
52+
else if (mediaElement.tagName === 'SOURCE') {
53+
mediaElement.src=src;
54+
mediaElement.parentNode.load();
55+
}
56+
else {mediaElement.style.backgroundImage = 'url("'+src+'")'; }
57+
mediaElement.removeAttribute('data-src');
58+
imageCallback && imageCallback();
59+
});
60+
mediaObject.src = src;
61+
newVideo && ( newVideo.appendChild(mediaObject) );
62+
}
63+
64+
function getMediaElements(source) {
65+
var queue, mediaItems = [],
66+
matchedSelectors = source.querySelectorAll('[data-src]'),
67+
elementSRC = source ? source.getAttribute('data-src') : null;
68+
if ( elementSRC && !matchedSelectors) {
69+
queue = [source];
70+
} else if ( !elementSRC && matchedSelectors ) {
71+
queue = matchedSelectors;
72+
} else if ( elementSRC && matchedSelectors ){
73+
queue = matchedSelectors;
74+
mediaItems.unshift(source);
75+
} else if ( !elementSRC && !matchedSelectors ){
76+
queue = document.querySelectorAll('[data-src]');
77+
}
78+
Array.from(queue).map(function (x){ return mediaItems.push(x); });
79+
return mediaItems;
80+
}
81+
82+
function DLL (element,callbackFn){
83+
tryWrapper(function (){
84+
element = queryElement(element);
85+
callbackFn = typeof callbackFn === 'function' ? callbackFn : null;
86+
var mediaTargets = getMediaElements(element),
87+
elementSRC = element ? element.getAttribute('data-src') : null;
88+
if (elementSRC || element.querySelector('[data-src]') !== null) {
89+
mediaTargets.map(function (x,i){
90+
if ( i === mediaTargets.length-1 && callbackFn) {
91+
loadMedia(x,callbackFn);
92+
} else {
93+
loadMedia(x);
94+
}
95+
});
96+
}
97+
},'DLL.js:');
98+
}
99+
100+
function initComponent() {
101+
var DLLImages = Array.from(document.querySelectorAll('[data-src]'));
102+
DLLImages.map(function (x){ return new DLL(x); });
103+
}
104+
document.body ? initComponent() : one(document, 'DOMContentLoaded', initComponent);
105+
106+
return DLL;
107+
108+
})));

0 commit comments

Comments
 (0)