@pushword/js-helper 0.0.91 → 0.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/HorizontalScroll.js +119 -0
- package/src/app.js +3 -0
- package/src/helpers.js +271 -271
package/package.json
CHANGED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
|
|
2
|
+
class HorizontalScroll {
|
|
3
|
+
constructor(selectorToFindElementToScroll, scrollerSelectorOrContainer = null) {
|
|
4
|
+
this.elementToScroll = document.querySelector(selectorToFindElementToScroll);
|
|
5
|
+
this.scrollContainer = this.elementToScroll.querySelector('div:nth-child(2)');
|
|
6
|
+
this.scroller =
|
|
7
|
+
scrollerSelectorOrContainer instanceof HTMLElement
|
|
8
|
+
? scrollerSelectorOrContainer
|
|
9
|
+
: document.querySelector(
|
|
10
|
+
scrollerSelectorOrContainer || selectorToFindElementToScroll + '-scroller'
|
|
11
|
+
);
|
|
12
|
+
this.scrollWidth =
|
|
13
|
+
this.scrollContainer.offsetWidth +
|
|
14
|
+
parseInt(window.getComputedStyle(this.scrollContainer).marginLeft);
|
|
15
|
+
this.scrollContainerWidth =
|
|
16
|
+
this.elementToScroll.scrollWidth - this.elementToScroll.clientWidth;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
init() {
|
|
20
|
+
if (!('ontouchstart' in document.documentElement)) {
|
|
21
|
+
this.elementToScroll.classList.add('overflow-x-hidden');
|
|
22
|
+
this.scroller.classList.toggle('hidden');
|
|
23
|
+
}
|
|
24
|
+
return this;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
activateWheelScroll() {
|
|
28
|
+
this.elementToScroll.addEventListener('wheel', (evt) => {
|
|
29
|
+
evt.preventDefault();
|
|
30
|
+
this.elementToScroll.classList.toggle('scroll-smooth');
|
|
31
|
+
this.elementToScroll.scrollLeft += evt.deltaY;
|
|
32
|
+
this.elementToScroll.classList.toggle('scroll-smooth');
|
|
33
|
+
});
|
|
34
|
+
return this;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
scroll(scrollerClassToToggle = 'opacity-50') {
|
|
38
|
+
const isRightScroll =
|
|
39
|
+
window.event.target == this.scroller.children[1] ||
|
|
40
|
+
window.event.target.parentNode == this.scroller.children[1];
|
|
41
|
+
const scrollPos = isRightScroll
|
|
42
|
+
? (this.elementToScroll.scrollLeft += this.scrollWidth)
|
|
43
|
+
: (this.elementToScroll.scrollLeft -= this.scrollWidth);
|
|
44
|
+
|
|
45
|
+
this.scroller.children[1].classList.toggle(
|
|
46
|
+
scrollerClassToToggle,
|
|
47
|
+
scrollPos >= this.scrollContainerWidth
|
|
48
|
+
);
|
|
49
|
+
this.scroller.children[1].classList.toggle(
|
|
50
|
+
'cursor-pointer',
|
|
51
|
+
scrollPos < this.scrollContainerWidth
|
|
52
|
+
);
|
|
53
|
+
this.scroller.children[0].classList.toggle(scrollerClassToToggle, scrollPos <= 0);
|
|
54
|
+
this.scroller.children[0].classList.toggle('cursor-pointer', scrollPos > 0);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
/*
|
|
60
|
+
* Demo : https://codepen.io/PiedWeb/pen/ExrNWvP
|
|
61
|
+
*
|
|
62
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
63
|
+
|
|
64
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
65
|
+
|
|
66
|
+
<div class="group/scroll relative max-w-[900px] m-3">
|
|
67
|
+
<div id="toScroll" class="flex flex-nowrap space-x-3 overflow-x-hidden scroll-smooth">
|
|
68
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
69
|
+
<div class="flex w-full items-center justify-center bg-red-500 p-4">-</div>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
72
|
+
<div class="flex w-full items-center justify-center bg-orange-500 p-4">-</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
75
|
+
<div class="flex w-full items-center justify-center bg-blue-500 p-4">-</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
78
|
+
<div class="flex w-full items-center justify-center bg-green-500 p-4">-</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="mt-3 flex group-hover/scroll:flex justify-end" onclick="(new HorizontalScroll('#toScroll', this)).scroll('#toScroll')">
|
|
82
|
+
<div class="cursor-default bg-slate-500 px-3 py-1 text-2xl text-white opacity-50">❮</div>
|
|
83
|
+
<div class="cursor-default cursor-pointer ml-1 bg-slate-500 px-3 py-1 text-2xl text-white">❯</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<hr>
|
|
88
|
+
|
|
89
|
+
<div class="relative m-3 max-w-[500px]">
|
|
90
|
+
<div id="toScroll2" class="flex flex-nowrap space-x-3 scroll-smooth overflow-auto">
|
|
91
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
92
|
+
<div class="flex w-full items-center justify-center bg-red-500 p-4">-</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
95
|
+
<div class="flex w-full items-center justify-center bg-orange-500 p-4">-</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
98
|
+
<div class="flex w-full items-center justify-center bg-blue-500 p-4">-</div>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="w-[250px] flex-none last:pr-8">
|
|
101
|
+
<div class="flex w-full items-center justify-center bg-green-500 p-4">-</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div id="toScroll2-scroller" class="hidden" onclick="(new HorizontalScroll('#toScroll2', this)).scroll('hidden')">
|
|
105
|
+
<div class="hidden cursor-default cursor-pointer bg-white px-2 text-2xl text-gray-600 white bg-opacity-50
|
|
106
|
+
absolute h-full top-0 left-0 flex items-center"><span>❮</span></div>
|
|
107
|
+
<div class="cursor-default cursor-pointer bg-white px-2 text-2xl text-gray-600
|
|
108
|
+
absolute h-full top-0 right-0 flex items-center bg-opacity-50"><span>❯</span></div>
|
|
109
|
+
</div>
|
|
110
|
+
<script>document.addEventListener('DOMContentLoaded', function() {
|
|
111
|
+
(new HorizontalScroll('#toScroll2')).init().activateWheelScroll();
|
|
112
|
+
|
|
113
|
+
})
|
|
114
|
+
</script>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<h1>test</h1>
|
|
118
|
+
<p class="h-[2000px] bg-slate-50">Lorem</p>
|
|
119
|
+
*/
|
package/src/app.js
CHANGED
|
@@ -10,6 +10,9 @@ import {
|
|
|
10
10
|
} from '@pushword/js-helper/src/helpers.js';
|
|
11
11
|
import { allClickable } from '@pushword/js-helper/src/clickable.js';
|
|
12
12
|
|
|
13
|
+
//import { HorizontalScroll } from '@pushword/js-helper/src/horizontalScroll.js';
|
|
14
|
+
//window.HorizontalScroll = HorizontalScroll;
|
|
15
|
+
|
|
13
16
|
function onDomChanged() {
|
|
14
17
|
liveBlock();
|
|
15
18
|
convertImageLinkToWebPLink();
|
package/src/helpers.js
CHANGED
|
@@ -7,7 +7,7 @@ import 'regenerator-runtime/runtime';
|
|
|
7
7
|
* - liveForm(attr)
|
|
8
8
|
*
|
|
9
9
|
* - seasonedBackground
|
|
10
|
-
* - responsiveImage(string)
|
|
10
|
+
* - responsiveImage(string) Relative to Liip filters
|
|
11
11
|
* - uncloakLinks(attr)
|
|
12
12
|
* - convertFormFromRot13(attr)
|
|
13
13
|
* - readableEmail(attr)
|
|
@@ -22,99 +22,99 @@ import 'regenerator-runtime/runtime';
|
|
|
22
22
|
* @param {string} attribute
|
|
23
23
|
*/
|
|
24
24
|
export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '.live-form') {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
var btnToBlock = function (event, btn) {
|
|
26
|
+
btn.setAttribute(liveBlockAttribute, btn.getAttribute('src-' + liveBlockAttribute));
|
|
27
|
+
getLiveBlock(btn);
|
|
28
|
+
};
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
30
|
+
var getLiveBlock = function (item) {
|
|
31
|
+
var url = item.getAttribute(liveBlockAttribute);
|
|
32
|
+
url = url.startsWith('e:') ? convertShortchutForLink(rot13ToText(url.substring(2))) : url;
|
|
33
|
+
fetch(url, {
|
|
34
|
+
//headers: { "Content-Type": "application/json", Accept: "text/plain" },
|
|
35
|
+
method: 'POST',
|
|
36
|
+
credentials: 'include',
|
|
37
|
+
})
|
|
38
|
+
.then(function (response) {
|
|
39
|
+
return response.text();
|
|
40
|
+
})
|
|
41
|
+
.then(function (body) {
|
|
42
|
+
item.removeAttribute(liveBlockAttribute);
|
|
43
|
+
item.outerHTML = body;
|
|
44
|
+
})
|
|
45
|
+
.then(function () {
|
|
46
|
+
document.dispatchEvent(new Event('DOMChanged'));
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
const spinner =
|
|
51
|
+
'<span style="border-top-color: transparent" class="inline-block w-5 h-5 border-4 border-gray-50 border-solid rounded-full animate-spin"></span>';
|
|
52
|
+
const htmlLoader = '<div>' + spinner.replace('border-gray-50', 'border-gray-800') + '</div>';
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
var setLoader = function (form) {
|
|
55
|
+
var $submitButton = getSubmitButton(form);
|
|
56
|
+
if ($submitButton !== undefined) {
|
|
57
|
+
//var initialButton = $submitButton.outerHTML;
|
|
58
|
+
$submitButton.innerHTML = '';
|
|
59
|
+
$submitButton.outerHTML = htmlLoader;
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
var sendForm = function (form, liveFormBlock) {
|
|
64
|
+
setLoader(form);
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
66
|
+
var formData = new FormData(form.srcElement);
|
|
67
|
+
fetch(form.srcElement.action, {
|
|
68
|
+
method: 'POST',
|
|
69
|
+
body: formData,
|
|
70
|
+
credentials: 'include',
|
|
71
|
+
})
|
|
72
|
+
.then(function (response) {
|
|
73
|
+
return response.text();
|
|
74
|
+
})
|
|
75
|
+
.then(function (body) {
|
|
76
|
+
liveFormBlock.outerHTML = body;
|
|
77
|
+
})
|
|
78
|
+
.then(function () {
|
|
79
|
+
document.dispatchEvent(new Event('DOMChanged'));
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
82
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
83
|
+
var getSubmitButton = function (form) {
|
|
84
|
+
if (form.srcElement.querySelector('[type=submit]') !== null) {
|
|
85
|
+
return form.srcElement.querySelector('[type=submit]');
|
|
86
|
+
}
|
|
87
|
+
if (form.srcElement.getElementsByTagName('button') !== null) {
|
|
88
|
+
return form.srcElement.getElementsByTagName('button')[0];
|
|
89
|
+
}
|
|
90
|
+
return null;
|
|
91
|
+
};
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
// Listen data-live
|
|
94
|
+
document.querySelectorAll('[' + liveBlockAttribute + ']').forEach((item) => {
|
|
95
|
+
getLiveBlock(item);
|
|
96
|
+
});
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
});
|
|
98
|
+
// Listen button src-data-live
|
|
99
|
+
document.querySelectorAll('[src-' + liveBlockAttribute + ']').forEach((item) => {
|
|
100
|
+
item.addEventListener('click', (event) => {
|
|
101
|
+
if (item.tagName == 'BUTTON') {
|
|
102
|
+
item.innerHTML = spinner;
|
|
103
|
+
item.setAttribute('disabled', true);
|
|
104
|
+
}
|
|
105
|
+
btnToBlock(event, item);
|
|
107
106
|
});
|
|
107
|
+
});
|
|
108
108
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
109
|
+
// Listen live-form
|
|
110
|
+
document.querySelectorAll(liveFormSelector).forEach((item) => {
|
|
111
|
+
if (item.querySelector('form') !== null) {
|
|
112
|
+
item.querySelector('form').addEventListener('submit', (e) => {
|
|
113
|
+
e.preventDefault();
|
|
114
|
+
sendForm(e, item);
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
/**
|
|
@@ -122,36 +122,36 @@ export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '
|
|
|
122
122
|
* On $event on element find via $attribute, set attribute's content in element.innerHTML
|
|
123
123
|
*/
|
|
124
124
|
export function replaceOn(attribute = 'replaceBy', eventName = 'click') {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
125
|
+
var loadVideo = function (element) {
|
|
126
|
+
var content = element.getAttribute(attribute);
|
|
127
|
+
if (
|
|
128
|
+
element.classList.contains('hero-banner-overlay-lg') &&
|
|
129
|
+
element.querySelector('picture') &&
|
|
130
|
+
window.innerWidth < 992
|
|
131
|
+
) {
|
|
132
|
+
element.querySelector('picture').outerHTML = content;
|
|
133
|
+
element.querySelector('.btn-play').outerHTML = ' ';
|
|
134
|
+
} else {
|
|
135
|
+
element.innerHTML = content;
|
|
136
|
+
}
|
|
137
|
+
if (element.classList.contains('hero-banner-overlay-lg')) {
|
|
138
|
+
element.style.zIndex = '2000';
|
|
139
|
+
}
|
|
140
|
+
element.removeAttribute(attribute);
|
|
141
|
+
document.dispatchEvent(new Event('DOMChanged'));
|
|
142
|
+
};
|
|
143
143
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
144
|
+
document.querySelectorAll('[' + attribute + ']:not([listen])').forEach(function (element) {
|
|
145
|
+
element.setAttribute('listen', '');
|
|
146
|
+
element.addEventListener(
|
|
147
|
+
eventName,
|
|
148
|
+
function (event) {
|
|
149
|
+
loadVideo(event.currentTarget); //event.currentTarget;
|
|
150
|
+
element.removeAttribute('listen');
|
|
151
|
+
},
|
|
152
|
+
{ once: true }
|
|
153
|
+
);
|
|
154
|
+
});
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
/**
|
|
@@ -159,16 +159,16 @@ export function replaceOn(attribute = 'replaceBy', eventName = 'click') {
|
|
|
159
159
|
*
|
|
160
160
|
*/
|
|
161
161
|
export function seasonedBackground() {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
162
|
+
document.querySelectorAll('[x-hash]').forEach(function (element) {
|
|
163
|
+
if (window.location.hash) {
|
|
164
|
+
if (element.getAttribute('x-hash') == window.location.hash.substring(1)) {
|
|
165
|
+
element.parentNode.parentNode.querySelectorAll('img').forEach(function (img) {
|
|
166
|
+
img.style = 'display:none';
|
|
167
|
+
});
|
|
168
|
+
element.style = 'display:block';
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
/**
|
|
@@ -177,40 +177,40 @@ export function seasonedBackground() {
|
|
|
177
177
|
* @param {string} src
|
|
178
178
|
*/
|
|
179
179
|
export function responsiveImage(src) {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
180
|
+
var screenWidth = window.innerWidth;
|
|
181
|
+
if (screenWidth <= 576) {
|
|
182
|
+
src = src.replace('/default/', '/xs/');
|
|
183
|
+
} else if (screenWidth <= 768) {
|
|
184
|
+
src = src.replace('/default/', '/sm/');
|
|
185
|
+
} else if (screenWidth <= 992) {
|
|
186
|
+
src = src.replace('/default/', '/md/');
|
|
187
|
+
} else if (screenWidth <= 1200) {
|
|
188
|
+
src = src.replace('/default/', '/lg/');
|
|
189
|
+
} else {
|
|
190
|
+
// 1200+
|
|
191
|
+
src = src.replace('/default/', '/xl/');
|
|
192
|
+
}
|
|
193
193
|
|
|
194
|
-
|
|
194
|
+
return src;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
export function addClassForNormalUser(attribute = 'data-acinb') {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}
|
|
211
|
-
});
|
|
198
|
+
var startScrolling = 0;
|
|
199
|
+
document.addEventListener('scroll', function () {
|
|
200
|
+
if (startScrolling < 5) {
|
|
201
|
+
startScrolling++;
|
|
202
|
+
}
|
|
203
|
+
if (startScrolling === 4) {
|
|
204
|
+
[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
|
|
205
|
+
var classToAdd = element.getAttribute(attribute).split(' ');
|
|
206
|
+
element.removeAttribute(attribute);
|
|
207
|
+
element.classList.add(...classToAdd);
|
|
208
|
+
if (classToAdd.includes('block')) {
|
|
209
|
+
element.classList.remove('hidden');
|
|
212
210
|
}
|
|
213
|
-
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
214
|
}
|
|
215
215
|
/**
|
|
216
216
|
* Convert elements wich contain attribute (data-href) in normal link (a href)
|
|
@@ -219,73 +219,73 @@ export function addClassForNormalUser(attribute = 'data-acinb') {
|
|
|
219
219
|
* @param {string} attribute
|
|
220
220
|
*/
|
|
221
221
|
export async function uncloakLinks(attribute = 'data-rot', when = 'onEvent') {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
222
|
+
var convertLink = function (element) {
|
|
223
|
+
// fix "bug" with img
|
|
224
|
+
if (element.getAttribute(attribute) === null) {
|
|
225
|
+
var element = element.closest('[' + attribute + ']');
|
|
226
|
+
}
|
|
227
|
+
if (element === null || element.getAttribute(attribute) === null) return;
|
|
228
|
+
var link = document.createElement('a');
|
|
229
|
+
var href = element.getAttribute(attribute);
|
|
230
|
+
element.removeAttribute(attribute);
|
|
231
|
+
for (var i = 0, n = element.attributes.length; i < n; i++) {
|
|
232
|
+
link.setAttribute(element.attributes[i].nodeName, element.attributes[i].nodeValue);
|
|
233
|
+
}
|
|
234
|
+
link.innerHTML = element.innerHTML;
|
|
235
|
+
link.setAttribute('href', responsiveImage(convertShortchutForLink(rot13ToText(href))));
|
|
236
|
+
element.parentNode.replaceChild(link, element);
|
|
237
|
+
return link;
|
|
238
|
+
};
|
|
239
239
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
240
|
+
var convertThemAll = function (attribute) {
|
|
241
|
+
[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
|
|
242
|
+
convertLink(element);
|
|
243
|
+
});
|
|
244
|
+
};
|
|
245
245
|
|
|
246
|
-
|
|
247
|
-
|
|
246
|
+
var fireEventLinksBuilt = async function (element, event) {
|
|
247
|
+
await document.dispatchEvent(new Event('DOMChanged'));
|
|
248
248
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
249
|
+
var clickEvent = new Event(event.type);
|
|
250
|
+
element.dispatchEvent(clickEvent);
|
|
251
|
+
};
|
|
252
252
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
253
|
+
var convertLinkOnEvent = async function (event) {
|
|
254
|
+
// convert them all if it's an image (thanks this bug), permit to use gallery (baguetteBox)
|
|
255
|
+
if (event.target.tagName == 'IMG') {
|
|
256
|
+
await convertThemAll(attribute);
|
|
257
|
+
var element = event.target;
|
|
258
|
+
} else {
|
|
259
|
+
var element = convertLink(event.target);
|
|
260
|
+
}
|
|
261
|
+
if (element) fireEventLinksBuilt(element, event);
|
|
262
|
+
};
|
|
263
263
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
264
|
+
if (when == 'onEvent') {
|
|
265
|
+
[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
|
|
266
|
+
element.addEventListener(
|
|
267
|
+
'touchstart',
|
|
268
|
+
function (e) {
|
|
269
|
+
convertLinkOnEvent(e);
|
|
270
|
+
},
|
|
271
|
+
{ once: true, passive: true }
|
|
272
|
+
);
|
|
273
|
+
element.addEventListener(
|
|
274
|
+
'click',
|
|
275
|
+
function (e) {
|
|
276
|
+
convertLinkOnEvent(e);
|
|
277
|
+
},
|
|
278
|
+
{ once: true }
|
|
279
|
+
);
|
|
280
|
+
element.addEventListener(
|
|
281
|
+
'mouseover',
|
|
282
|
+
function (e) {
|
|
283
|
+
convertLinkOnEvent(e);
|
|
284
|
+
},
|
|
285
|
+
{ once: true }
|
|
286
|
+
);
|
|
287
|
+
});
|
|
288
|
+
} else convertThemAll(attribute);
|
|
289
289
|
}
|
|
290
290
|
|
|
291
291
|
/**
|
|
@@ -294,24 +294,24 @@ export async function uncloakLinks(attribute = 'data-rot', when = 'onEvent') {
|
|
|
294
294
|
* @param {string} attribute
|
|
295
295
|
*/
|
|
296
296
|
export function convertFormFromRot13(attribute = 'data-frot') {
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
297
|
+
[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
|
|
298
|
+
var action = element.getAttribute(attribute);
|
|
299
|
+
element.removeAttribute(attribute);
|
|
300
|
+
element.setAttribute('action', convertShortchutForLink(rot13ToText(action)));
|
|
301
|
+
});
|
|
302
302
|
}
|
|
303
303
|
|
|
304
304
|
export function convertShortchutForLink(str) {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
305
|
+
if (str.charAt(0) == '-') {
|
|
306
|
+
return 'http://' + str.substring(1);
|
|
307
|
+
}
|
|
308
|
+
if (str.charAt(0) == '_') {
|
|
309
|
+
return 'https://' + str.substring(1);
|
|
310
|
+
}
|
|
311
|
+
if (str.charAt(0) == '@') {
|
|
312
|
+
return 'mailto:' + str.substring(1);
|
|
313
|
+
}
|
|
314
|
+
return str;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
/**
|
|
@@ -320,14 +320,14 @@ export function convertShortchutForLink(str) {
|
|
|
320
320
|
* @param {string} text
|
|
321
321
|
*/
|
|
322
322
|
export function readableEmail(selector) {
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
323
|
+
document.querySelectorAll(selector).forEach(function (item) {
|
|
324
|
+
var mail = rot13ToText(item.textContent).trim();
|
|
325
|
+
item.classList.remove('hidden');
|
|
326
|
+
item.innerHTML = '<a href="mailto:' + mail + '">' + mail + '</a>';
|
|
327
|
+
if (selector.charAt(0) == '.') {
|
|
328
|
+
item.classList.remove(selector.substring(1));
|
|
329
|
+
}
|
|
330
|
+
});
|
|
331
331
|
}
|
|
332
332
|
|
|
333
333
|
/**
|
|
@@ -336,36 +336,36 @@ export function readableEmail(selector) {
|
|
|
336
336
|
* @param {string} str
|
|
337
337
|
*/
|
|
338
338
|
export function rot13ToText(str) {
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
339
|
+
return str.replace(/[a-zA-Z]/g, function (c) {
|
|
340
|
+
return String.fromCharCode(
|
|
341
|
+
(c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26
|
|
342
|
+
);
|
|
343
|
+
});
|
|
344
344
|
}
|
|
345
345
|
|
|
346
346
|
export function testWebPSupport() {
|
|
347
|
-
|
|
347
|
+
var elem = document.createElement('canvas');
|
|
348
348
|
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
349
|
+
if (elem.getContext && elem.getContext('2d')) {
|
|
350
|
+
return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
|
|
351
|
+
}
|
|
352
352
|
|
|
353
|
-
|
|
353
|
+
return false;
|
|
354
354
|
}
|
|
355
355
|
|
|
356
356
|
/**
|
|
357
357
|
* Used in ThemeComponent
|
|
358
358
|
*/
|
|
359
359
|
export function convertImageLinkToWebPLink() {
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
360
|
+
var switchToWebP = function () {
|
|
361
|
+
[].forEach.call(document.querySelectorAll('a[dwl]'), function (element) {
|
|
362
|
+
var href = responsiveImage(element.getAttribute('dwl'));
|
|
363
|
+
element.setAttribute('href', href);
|
|
364
|
+
element.removeAttribute('dwl');
|
|
365
|
+
});
|
|
366
|
+
};
|
|
367
367
|
|
|
368
|
-
|
|
368
|
+
if (testWebPSupport()) switchToWebP();
|
|
369
369
|
}
|
|
370
370
|
|
|
371
371
|
/**
|
|
@@ -385,20 +385,20 @@ export function convertImageLinkToWebPLink() {
|
|
|
385
385
|
* still used in piedvert. To remove ?!
|
|
386
386
|
*/
|
|
387
387
|
export function imgLazyLoad(attribute = 'data-img') {
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
388
|
+
[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (img) {
|
|
389
|
+
var newDomImg = document.createElement('img');
|
|
390
|
+
var src = img.getAttribute(attribute);
|
|
391
|
+
img.removeAttribute(attribute);
|
|
392
|
+
for (var i = 0, n = img.attributes.length; i < n; i++) {
|
|
393
|
+
newDomImg.setAttribute(img.attributes[i].nodeName, img.attributes[i].nodeValue);
|
|
394
|
+
}
|
|
395
|
+
if (newDomImg.getAttribute('alt') === null && img.textContent != '') {
|
|
396
|
+
newDomImg.setAttribute('alt', img.textContent);
|
|
397
|
+
}
|
|
398
|
+
newDomImg.setAttribute(
|
|
399
|
+
'src',
|
|
400
|
+
typeof responsiveImage === 'function' ? responsiveImage(src) : src
|
|
401
|
+
);
|
|
402
|
+
img.outerHTML = newDomImg.outerHTML;
|
|
403
|
+
});
|
|
404
404
|
}
|