@pushword/js-helper 0.0.115 → 0.0.116
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/README.md +3 -3
- package/package.json +50 -50
- package/src/ScrollEnhancer.js +29 -19
- package/src/app.js +16 -24
- package/src/clickable.js +27 -34
- package/src/encore.js +91 -90
- package/src/helpers.js +10 -38
- package/src/tailwind.helpers.js +54 -62
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Some js helpers for Pushword front end.
|
|
|
6
6
|
[](LICENSE)
|
|
7
7
|
[](https://github.com/Pushword/Pushword/actions)
|
|
8
8
|
[](https://scrutinizer-ci.com/g/pushword/pushword)
|
|
9
|
-
[](https://codecov.io/gh/Pushword/Pushword/
|
|
9
|
+
[](https://codecov.io/gh/Pushword/Pushword/tree/main)
|
|
10
10
|
[](https://shepherd.dev/github/pushword/pushword)
|
|
11
11
|
[](https://packagist.org/packages/pushword/core)
|
|
12
12
|
|
|
@@ -20,8 +20,8 @@ If you're interested in contributing to Pushword, please read our [contributing
|
|
|
20
20
|
|
|
21
21
|
## Credits
|
|
22
22
|
|
|
23
|
-
-
|
|
24
|
-
-
|
|
23
|
+
- [PiedWeb](https://piedweb.com)
|
|
24
|
+
- [All Contributors](https://github.com/Pushword/Core/graphs/contributors)
|
|
25
25
|
|
|
26
26
|
## License
|
|
27
27
|
|
package/package.json
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
2
|
+
"name": "@pushword/js-helper",
|
|
3
|
+
"version": "0.0.116",
|
|
4
|
+
"description": "Pushword front end helpers. ",
|
|
5
|
+
"author": "Robin@PiedWeb <contact@piedweb.com>",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"prettier": "prettier ./src/*.{js,scss} --write"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"140.css": "^1.0.1",
|
|
12
|
+
"@babel/core": "^7.23",
|
|
13
|
+
"@babel/preset-env": "^7.22.20",
|
|
14
|
+
"@symfony/webpack-encore": "^4.6",
|
|
15
|
+
"@tailwindcss/aspect-ratio": "^0.4",
|
|
16
|
+
"@tailwindcss/forms": "^0.5",
|
|
17
|
+
"@tailwindcss/typography": "^0.5",
|
|
18
|
+
"ace-builds": "^1.28",
|
|
19
|
+
"autoprefixer": "^10.4",
|
|
20
|
+
"babel-preset-stage-2": "^6.24.1",
|
|
21
|
+
"codemirror": "^6.0",
|
|
22
|
+
"core-js": "^3.36",
|
|
23
|
+
"easymde": "^2.18",
|
|
24
|
+
"file-loader": "^6.0",
|
|
25
|
+
"fslightbox": "^3.2.2",
|
|
26
|
+
"postcss": "^8.4.30",
|
|
27
|
+
"postcss-import": "^16",
|
|
28
|
+
"postcss-loader": "^7",
|
|
29
|
+
"sass": "^1.68",
|
|
30
|
+
"sass-loader": "^14",
|
|
31
|
+
"simple-jekyll-search": "^1.9.1",
|
|
32
|
+
"tailwindcss": "^3",
|
|
33
|
+
"tailwindcss-animated": "^1.0.1",
|
|
34
|
+
"tailwindcss-hero-patterns": "^0.1",
|
|
35
|
+
"tailwindcss-multi-column": "^1.0.2",
|
|
36
|
+
"webpack": "^5.65",
|
|
37
|
+
"webpack-cli": "^4.9.1 || ^5.0.1",
|
|
38
|
+
"webpack-watch-files-plugin": "^1.1.0"
|
|
39
|
+
},
|
|
40
|
+
"repository": {
|
|
41
|
+
"type": "git",
|
|
42
|
+
"url": "git+https://github.com/Pushword/js-helper.git"
|
|
43
|
+
},
|
|
44
|
+
"keywords": [
|
|
45
|
+
"native"
|
|
46
|
+
],
|
|
47
|
+
"bugs": {
|
|
48
|
+
"url": "https://github.com/Pushword/Pushword/issues"
|
|
49
|
+
},
|
|
50
|
+
"homepage": "https://pushword.piedweb.com",
|
|
51
|
+
"gitHead": "242ec54483dca1be93d7a62d8d554c9c08008c28"
|
|
52
52
|
}
|
package/src/ScrollEnhancer.js
CHANGED
|
@@ -134,30 +134,33 @@ class ScrollYEnhancer {
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
+
/**
|
|
138
|
+
* <div
|
|
139
|
+
* data-arrowleft='<div class="scroll-left relative left-[22px] top-1/3 z-20 h-[36px] w-[36px] cursor-pointer select-none rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">‹</div>'
|
|
140
|
+
* data-arrowright='<div class="scroll-right relative left-[calc(100vw-62px)] -mt-[36px] top-1/3 z-20 h-[36px] w-[36px] cursor-pointer select-none rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">›</div>'
|
|
141
|
+
* data-arrowhiddenclass="opacity-30"
|
|
142
|
+
* data-scrolly=600 // before toscroll
|
|
143
|
+
* >...</div>
|
|
144
|
+
*/
|
|
137
145
|
class ScrollXEnhancer {
|
|
138
|
-
constructor(
|
|
139
|
-
selector = '.enhance-scroll-x',
|
|
140
|
-
arrowRight = '<div class="scroll-right relative left-[calc(100vw-62px)] -mt-[36px] top-1/3 z-20 h-[36px] w-[36px] cursor-pointer select-none rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">›</div>',
|
|
141
|
-
arrowLeft = '<div class="scroll-left relative left-[22px] top-1/3 z-20 h-[36px] w-[36px] cursor-pointer select-none rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">‹</div>',
|
|
142
|
-
) {
|
|
146
|
+
constructor() {
|
|
143
147
|
window.scrollLeft = this.scrollLeft
|
|
144
148
|
window.scrollX = this.scrollX
|
|
145
149
|
window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility
|
|
146
150
|
window.isScrolling = false
|
|
147
151
|
|
|
148
|
-
document.querySelectorAll(
|
|
152
|
+
document.querySelectorAll('.enhance-scroll-x').forEach((element) => {
|
|
149
153
|
if (element.scrollWidth <= element.clientWidth + 12) {
|
|
150
154
|
// 20 = padding-bottom
|
|
151
155
|
element.classList.remove('enhance-scroll-x')
|
|
152
156
|
return
|
|
153
157
|
}
|
|
154
158
|
|
|
155
|
-
|
|
156
|
-
this.arrowRight = element.dataset.arrowright ?? arrowRight
|
|
157
|
-
element.classList.remove(selector)
|
|
159
|
+
element.classList.remove('.enhance-scroll-x')
|
|
158
160
|
this.enhanceScrollX(element)
|
|
159
161
|
this.mouseSliderX(element)
|
|
160
162
|
this.wheelScrollX(element)
|
|
163
|
+
manageScrollXControllerVisibility(element)
|
|
161
164
|
element.onscroll = function () {
|
|
162
165
|
manageScrollXControllerVisibility(this)
|
|
163
166
|
}
|
|
@@ -180,13 +183,19 @@ class ScrollXEnhancer {
|
|
|
180
183
|
const before = element.scrollLeft
|
|
181
184
|
element.scrollLeft += evt.deltaY
|
|
182
185
|
|
|
186
|
+
if (element.dataset.scrolly === 0) {
|
|
187
|
+
window.isScrolling = false
|
|
188
|
+
return
|
|
189
|
+
}
|
|
190
|
+
|
|
183
191
|
if (before === element.scrollLeft) {
|
|
184
192
|
if (new Date().getTime() - window.lastScrollTime > 200) {
|
|
185
193
|
window.lastScrollTime = new Date().getTime()
|
|
186
|
-
const toScrollHeight = element.dataset.
|
|
194
|
+
const toScrollHeight = element.dataset.scrolly ?? 600
|
|
187
195
|
window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
|
|
188
196
|
}
|
|
189
197
|
} else window.lastScrollTime = new Date().getTime()
|
|
198
|
+
|
|
190
199
|
window.isScrolling = false
|
|
191
200
|
},
|
|
192
201
|
{ passive: false },
|
|
@@ -195,33 +204,34 @@ class ScrollXEnhancer {
|
|
|
195
204
|
|
|
196
205
|
enhanceScrollX(element) {
|
|
197
206
|
if (element.scrollWidth <= element.clientWidth) return
|
|
198
|
-
element.insertAdjacentHTML('beforebegin',
|
|
207
|
+
element.insertAdjacentHTML('beforebegin', element.dataset.arrowleft + element.dataset.arrowright)
|
|
199
208
|
}
|
|
200
209
|
|
|
201
|
-
scrollX(scroller,
|
|
210
|
+
scrollX(scroller, scrollDistance = null) {
|
|
202
211
|
if (!scroller) return
|
|
203
|
-
const element = scroller.parentNode.querySelector(
|
|
212
|
+
const element = scroller.parentNode.querySelector('.enhance-scroll-x')
|
|
204
213
|
if (!element) return
|
|
205
214
|
|
|
206
215
|
const scrollToRight = scroller.classList.contains('scroll-right')
|
|
207
216
|
|
|
208
217
|
const nextElementToScroll = element.children[3] // work only with equal width block
|
|
209
|
-
const toScrollWidth = nextElementToScroll.offsetWidth + parseInt(window.getComputedStyle(nextElementToScroll).marginLeft)
|
|
218
|
+
const toScrollWidth = scrollDistance ?? nextElementToScroll.offsetWidth + parseInt(window.getComputedStyle(nextElementToScroll).marginLeft)
|
|
210
219
|
const before = element.scrollLeft
|
|
211
220
|
element.scrollLeft += scrollToRight ? toScrollWidth : -toScrollWidth
|
|
212
221
|
return before !== element.scrollLeft
|
|
213
222
|
}
|
|
214
223
|
|
|
215
224
|
manageScrollXControllerVisibility(element) {
|
|
225
|
+
const arrowHiddenClass = element.dataset.arrowhiddenclass ?? 'opacity-30'
|
|
216
226
|
const scrollLeftElement = element.parentNode.querySelector('.scroll-left')
|
|
217
227
|
const scrollRightElement = element.parentNode.querySelector('.scroll-right')
|
|
218
|
-
if (!scrollLeftElement || !scrollRightElement) return
|
|
219
|
-
scrollRightElement.classList.remove(
|
|
220
|
-
scrollLeftElement.classList.remove(
|
|
228
|
+
if (!scrollLeftElement || !scrollRightElement || !arrowHiddenClass) return
|
|
229
|
+
scrollRightElement.classList.remove(arrowHiddenClass)
|
|
230
|
+
scrollLeftElement.classList.remove(arrowHiddenClass)
|
|
221
231
|
|
|
222
232
|
const isAtMaxScroll = element.scrollLeft >= element.scrollWidth - element.clientWidth
|
|
223
|
-
if (isAtMaxScroll) scrollRightElement.classList.add(
|
|
224
|
-
if (element.scrollLeft === 0) scrollLeftElement.classList.add(
|
|
233
|
+
if (isAtMaxScroll) scrollRightElement.classList.add(arrowHiddenClass)
|
|
234
|
+
if (element.scrollLeft === 0) scrollLeftElement.classList.add(arrowHiddenClass)
|
|
225
235
|
}
|
|
226
236
|
|
|
227
237
|
mouseSliderX(toSlide, speed = 1) {
|
package/src/app.js
CHANGED
|
@@ -1,34 +1,26 @@
|
|
|
1
|
-
require('fslightbox')
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
addClassForNormalUser,
|
|
5
|
-
readableEmail,
|
|
6
|
-
convertImageLinkToWebPLink,
|
|
7
|
-
replaceOn,
|
|
8
|
-
liveBlock,
|
|
9
|
-
convertFormFromRot13,
|
|
10
|
-
} from '@pushword/js-helper/src/helpers.js';
|
|
11
|
-
import { allClickable } from '@pushword/js-helper/src/clickable.js';
|
|
1
|
+
require('fslightbox')
|
|
2
|
+
import { uncloakLinks, addClassForNormalUser, readableEmail, convertImageLinkToWebPLink, replaceOn, liveBlock, convertFormFromRot13 } from './helpers.js'
|
|
3
|
+
import { allClickable } from './clickable.js'
|
|
12
4
|
|
|
13
5
|
//import { HorizontalScroll } from '@pushword/js-helper/src/horizontalScroll.js';
|
|
14
6
|
//window.HorizontalScroll = HorizontalScroll;
|
|
15
7
|
|
|
16
8
|
function onDomChanged() {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
9
|
+
liveBlock()
|
|
10
|
+
convertImageLinkToWebPLink()
|
|
11
|
+
uncloakLinks()
|
|
12
|
+
readableEmail('.cea')
|
|
13
|
+
replaceOn()
|
|
14
|
+
refreshFsLightbox()
|
|
15
|
+
allClickable('.clickable')
|
|
16
|
+
addClassForNormalUser()
|
|
17
|
+
convertFormFromRot13()
|
|
26
18
|
}
|
|
27
19
|
|
|
28
20
|
function onPageLoaded() {
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
onDomChanged()
|
|
22
|
+
new FsLightbox()
|
|
31
23
|
}
|
|
32
24
|
|
|
33
|
-
document.addEventListener('DOMContentLoaded', onPageLoaded())
|
|
34
|
-
document.addEventListener('DOMChanged', onDomChanged)
|
|
25
|
+
document.addEventListener('DOMContentLoaded', onPageLoaded())
|
|
26
|
+
document.addEventListener('DOMChanged', onDomChanged)
|
package/src/clickable.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { uncloakLinks } from
|
|
1
|
+
import { uncloakLinks } from './helpers'
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* transform an element containing a link (a href) in a clickable element
|
|
@@ -6,20 +6,17 @@ import { uncloakLinks } from "./helpers";
|
|
|
6
6
|
* @param {Object} element
|
|
7
7
|
*/
|
|
8
8
|
export async function clickable(element) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
) {
|
|
16
|
-
if (typeof smoothScroll === "function") {
|
|
17
|
-
smoothScroll(link);
|
|
18
|
-
}
|
|
19
|
-
return false;
|
|
9
|
+
if (!element.querySelector('a') && !element.querySelector('span[data-rot]')) return false
|
|
10
|
+
if (element.querySelector('span[data-rot]')) await uncloakLinks('data-rot', false)
|
|
11
|
+
var link = element.querySelectorAll('a')[0]
|
|
12
|
+
if (window.location.pathname.replace(/^\//, '') == link.pathname.replace(/^\//, '') && window.location.hostname == link.hostname) {
|
|
13
|
+
if (typeof smoothScroll === 'function') {
|
|
14
|
+
smoothScroll(link)
|
|
20
15
|
}
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
return false
|
|
17
|
+
}
|
|
18
|
+
window.location = link.getAttribute('href') === null ? '' : link.getAttribute('href')
|
|
19
|
+
return false
|
|
23
20
|
}
|
|
24
21
|
|
|
25
22
|
/**
|
|
@@ -28,11 +25,11 @@ export async function clickable(element) {
|
|
|
28
25
|
* @param {string} selector
|
|
29
26
|
*/
|
|
30
27
|
export function allClickable(selector) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
document.querySelectorAll(selector).forEach(function (item) {
|
|
29
|
+
item.addEventListener('click', function () {
|
|
30
|
+
clickable(item)
|
|
31
|
+
})
|
|
32
|
+
})
|
|
36
33
|
}
|
|
37
34
|
|
|
38
35
|
/**
|
|
@@ -42,20 +39,16 @@ export function allClickable(selector) {
|
|
|
42
39
|
* @param {Object} link
|
|
43
40
|
*/
|
|
44
41
|
export function smoothScroll(link, event = null) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
behavior: "smooth",
|
|
56
|
-
left: 0,
|
|
57
|
-
top: target.offsetTop,
|
|
58
|
-
});
|
|
59
|
-
}
|
|
42
|
+
if (location.pathname.replace(/^\//, '') == link.pathname.replace(/^\//, '') && location.hostname == link.hostname && link.hash != '') {
|
|
43
|
+
var target = document.querySelector(link.hash)
|
|
44
|
+
target = target !== null ? target : document.querySelector('[name=' + link.hash.slice(1) + ']')
|
|
45
|
+
if (target !== null) {
|
|
46
|
+
if (event !== null) event.preventDefault()
|
|
47
|
+
window.scrollTo({
|
|
48
|
+
behavior: 'smooth',
|
|
49
|
+
left: 0,
|
|
50
|
+
top: target.offsetTop,
|
|
51
|
+
})
|
|
60
52
|
}
|
|
53
|
+
}
|
|
61
54
|
}
|
package/src/encore.js
CHANGED
|
@@ -1,107 +1,108 @@
|
|
|
1
|
-
const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default
|
|
2
|
-
const
|
|
3
|
-
const
|
|
1
|
+
const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default
|
|
2
|
+
const tailwindcss = require('tailwindcss')
|
|
3
|
+
const postcssImport = require('postcss-import')
|
|
4
|
+
const autoprefixer = require('autoprefixer')
|
|
4
5
|
|
|
5
6
|
function getFilesToWatch(basePath = './..') {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
return [
|
|
8
|
+
basePath + '/vendor/pushword/core/src/templates/**/*.html.twig',
|
|
9
|
+
basePath + '/vendor/pushword/conversation/src/templates/**/*.html.twig',
|
|
10
|
+
basePath + '/vendor/pushword/admin-block-editor/src/templates/**/*.html.twig',
|
|
11
|
+
basePath + '/vendor/pushword/advanced-main-image/src/templates/**/*.html.twig',
|
|
12
|
+
basePath + '/templates/**/*.html.twig',
|
|
13
|
+
basePath + '/var/TailwindGeneratorCache/*',
|
|
14
|
+
basePath + '/src/Twig/AppExtension.php',
|
|
15
|
+
]
|
|
15
16
|
}
|
|
17
|
+
|
|
16
18
|
function getTailwindConfig(watchFiles = null) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
if (watchFiles === null) watchFiles = getFilesToWatch()
|
|
20
|
+
var tailwindConfig = require('./tailwind.config.js')
|
|
21
|
+
tailwindConfig.content = watchFiles
|
|
22
|
+
return tailwindConfig
|
|
21
23
|
}
|
|
22
24
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
)
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
25
|
+
function getEncore(
|
|
26
|
+
Encore,
|
|
27
|
+
watchFiles = null, // default: getFilesToWatch()
|
|
28
|
+
tailwindConfig = null, // default : getTailwindConfig()
|
|
29
|
+
outputPath = null, // default : './../public/assets/'
|
|
30
|
+
publicPath = null, // default: '/assets'
|
|
31
|
+
manifestKeyPrefix = null, // default: null
|
|
32
|
+
filesToCopy = null, // default :: ... from: /favicons. ...
|
|
33
|
+
entries = null, // [{ name: 'app', file: '/node_modules/@pushword/js-helper/src/app.js' }];
|
|
34
|
+
styleEntries = null, // [{ name: 'style', file: '/node_modules/@pushword/js-helper/src/app.css' }];
|
|
35
|
+
) {
|
|
36
|
+
if (watchFiles === null) {
|
|
37
|
+
watchFiles = getFilesToWatch()
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (tailwindConfig === null) {
|
|
41
|
+
tailwindConfig = getTailwindConfig(watchFiles)
|
|
42
|
+
}
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
if (entries === null) {
|
|
45
|
+
entries = [{ name: 'app', file: __dirname + '/app.js' }]
|
|
46
|
+
} else if (typeof entries === 'string') {
|
|
47
|
+
entries = [{ name: 'app', file: entries }]
|
|
48
|
+
}
|
|
43
49
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
];
|
|
51
|
-
}
|
|
50
|
+
if (styleEntries === null) {
|
|
51
|
+
styleEntries = [{ name: 'style', file: __dirname + '/app.css' }]
|
|
52
|
+
} else if (typeof styleEntries === 'string') {
|
|
53
|
+
styleEntries = [{ name: 'style', file: styleEntries }]
|
|
54
|
+
}
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
} else if (typeof entries === 'string') {
|
|
56
|
-
entries = [{ name: 'app', file: entries }];
|
|
57
|
-
}
|
|
56
|
+
outputPath = outputPath ? outputPath : './../public/assets/'
|
|
57
|
+
publicPath = publicPath ? publicPath : '/assets'
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
|
|
60
|
+
.setOutputPath(outputPath)
|
|
61
|
+
.setPublicPath(publicPath)
|
|
62
|
+
.cleanupOutputBeforeBuild()
|
|
63
|
+
.enableSassLoader()
|
|
64
|
+
.enableSourceMaps(false)
|
|
65
|
+
.enableVersioning(false)
|
|
66
|
+
.addPlugin(
|
|
67
|
+
new WatchExternalFilesPlugin({
|
|
68
|
+
files: watchFiles,
|
|
69
|
+
}),
|
|
70
|
+
)
|
|
71
|
+
.enablePostCssLoader((options) => {
|
|
72
|
+
options.postcssOptions = {
|
|
73
|
+
plugins: [postcssImport, tailwindcss(tailwindConfig), autoprefixer],
|
|
74
|
+
}
|
|
75
|
+
})
|
|
76
|
+
.disableSingleRuntimeChunk()
|
|
64
77
|
|
|
65
|
-
|
|
66
|
-
|
|
78
|
+
if (filesToCopy === null) {
|
|
79
|
+
filesToCopy = [
|
|
80
|
+
{
|
|
81
|
+
from: './favicons',
|
|
82
|
+
to: '[name].[ext]',
|
|
83
|
+
},
|
|
84
|
+
]
|
|
85
|
+
}
|
|
67
86
|
|
|
87
|
+
filesToCopy.forEach(function (toCopy) {
|
|
88
|
+
Encore.copyFiles(toCopy)
|
|
89
|
+
})
|
|
68
90
|
|
|
69
|
-
|
|
70
|
-
.setOutputPath(outputPath)
|
|
71
|
-
.setPublicPath(publicPath)
|
|
72
|
-
.cleanupOutputBeforeBuild()
|
|
73
|
-
.enableSassLoader()
|
|
74
|
-
.enableSourceMaps(false)
|
|
75
|
-
.enableVersioning(false)
|
|
76
|
-
.addPlugin(
|
|
77
|
-
new WatchExternalFilesPlugin({
|
|
78
|
-
files: watchFiles,
|
|
79
|
-
})
|
|
80
|
-
)
|
|
81
|
-
.enablePostCssLoader((options) => {
|
|
82
|
-
options.postcssOptions = {
|
|
83
|
-
plugins: [
|
|
84
|
-
require('postcss-import'),
|
|
85
|
-
tailwindcss(tailwindConfig),
|
|
86
|
-
require('autoprefixer'),
|
|
87
|
-
],
|
|
88
|
-
};
|
|
89
|
-
})
|
|
90
|
-
.disableSingleRuntimeChunk();
|
|
91
|
-
filesToCopy.forEach(function (toCopy) {
|
|
92
|
-
Encore.copyFiles(toCopy);
|
|
93
|
-
});
|
|
91
|
+
if (manifestKeyPrefix !== null) Encore.setManifestKeyPrefix(manifestKeyPrefix)
|
|
94
92
|
|
|
95
|
-
|
|
93
|
+
entries.forEach(function (entry) {
|
|
94
|
+
Encore.addEntry(entry.name, entry.file)
|
|
95
|
+
})
|
|
96
96
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
97
|
+
styleEntries.forEach(function (entry) {
|
|
98
|
+
Encore.addStyleEntry(entry.name, entry.file)
|
|
99
|
+
})
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
});
|
|
101
|
+
return Encore
|
|
102
|
+
}
|
|
104
103
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
module.exports = {
|
|
105
|
+
getFilesToWatch: getFilesToWatch,
|
|
106
|
+
getTailwindConfig: getTailwindConfig,
|
|
107
|
+
getEncore: getEncore,
|
|
108
|
+
}
|
package/src/helpers.js
CHANGED
|
@@ -23,6 +23,10 @@ import 'regenerator-runtime/runtime'
|
|
|
23
23
|
*/
|
|
24
24
|
export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '.live-form') {
|
|
25
25
|
var btnToBlock = function (event, btn) {
|
|
26
|
+
if (btn.hasAttribute('data-target') && btn.getAttribute('data-target') == 'parent') {
|
|
27
|
+
btn = btn.parentElement ?? btn
|
|
28
|
+
}
|
|
29
|
+
|
|
26
30
|
btn.setAttribute(liveBlockAttribute, btn.getAttribute('src-' + liveBlockAttribute))
|
|
27
31
|
getLiveBlock(btn)
|
|
28
32
|
}
|
|
@@ -224,7 +228,7 @@ export function addClassForNormalUser(attribute = 'data-acinb') {
|
|
|
224
228
|
*
|
|
225
229
|
* @param {string} attribute
|
|
226
230
|
*/
|
|
227
|
-
export async function uncloakLinks(attribute = 'data-rot',
|
|
231
|
+
export async function uncloakLinks(attribute = 'data-rot', onClickMouseoverOrTouchstart = true) {
|
|
228
232
|
var convertLink = function (element) {
|
|
229
233
|
// fix "bug" with img
|
|
230
234
|
if (element.getAttribute(attribute) === null) {
|
|
@@ -239,11 +243,11 @@ export async function uncloakLinks(attribute = 'data-rot', when = 'onEvent') {
|
|
|
239
243
|
}
|
|
240
244
|
link.innerHTML = element.innerHTML
|
|
241
245
|
link.setAttribute('href', responsiveImage(convertShortchutForLink(rot13ToText(href))))
|
|
242
|
-
element.
|
|
246
|
+
element.replaceWith(link)
|
|
243
247
|
return link
|
|
244
248
|
}
|
|
245
249
|
|
|
246
|
-
var
|
|
250
|
+
var convertAll = function (attribute) {
|
|
247
251
|
;[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
|
|
248
252
|
convertLink(element)
|
|
249
253
|
})
|
|
@@ -259,7 +263,7 @@ export async function uncloakLinks(attribute = 'data-rot', when = 'onEvent') {
|
|
|
259
263
|
var convertLinkOnEvent = async function (event) {
|
|
260
264
|
// convert them all if it's an image (thanks this bug), permit to use gallery (baguetteBox)
|
|
261
265
|
if (event.target.tagName == 'IMG') {
|
|
262
|
-
await
|
|
266
|
+
await convertAll(attribute)
|
|
263
267
|
var element = event.target
|
|
264
268
|
} else {
|
|
265
269
|
var element = convertLink(event.target)
|
|
@@ -267,7 +271,7 @@ export async function uncloakLinks(attribute = 'data-rot', when = 'onEvent') {
|
|
|
267
271
|
if (element) fireEventLinksBuilt(element, event)
|
|
268
272
|
}
|
|
269
273
|
|
|
270
|
-
if (
|
|
274
|
+
if (onClickMouseoverOrTouchstart) {
|
|
271
275
|
;[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
|
|
272
276
|
element.addEventListener(
|
|
273
277
|
'touchstart',
|
|
@@ -291,7 +295,7 @@ export async function uncloakLinks(attribute = 'data-rot', when = 'onEvent') {
|
|
|
291
295
|
{ once: true },
|
|
292
296
|
)
|
|
293
297
|
})
|
|
294
|
-
} else
|
|
298
|
+
} else convertAll(attribute)
|
|
295
299
|
}
|
|
296
300
|
|
|
297
301
|
/**
|
|
@@ -371,35 +375,3 @@ export function convertImageLinkToWebPLink() {
|
|
|
371
375
|
|
|
372
376
|
if (testWebPSupport()) switchToWebP()
|
|
373
377
|
}
|
|
374
|
-
|
|
375
|
-
/**
|
|
376
|
-
* Simple Image Lazy Loader
|
|
377
|
-
* original from : https://davidwalsh.name/lazyload-image-fade
|
|
378
|
-
*
|
|
379
|
-
* @param {string} attribute
|
|
380
|
-
*
|
|
381
|
-
* @example
|
|
382
|
-
* imgLazyLoad()
|
|
383
|
-
* <span data-img=/img/me.png>Tagada</span> or <img data-img=/img/me.png alt=Tagada>
|
|
384
|
-
*
|
|
385
|
-
* will be converted to
|
|
386
|
-
*
|
|
387
|
-
* <img src=/img/me.png alt=Tagada />
|
|
388
|
-
*
|
|
389
|
-
* still used in piedvert. To remove ?!
|
|
390
|
-
*/
|
|
391
|
-
export function imgLazyLoad(attribute = 'data-img') {
|
|
392
|
-
;[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (img) {
|
|
393
|
-
var newDomImg = document.createElement('img')
|
|
394
|
-
var src = img.getAttribute(attribute)
|
|
395
|
-
img.removeAttribute(attribute)
|
|
396
|
-
for (var i = 0, n = img.attributes.length; i < n; i++) {
|
|
397
|
-
newDomImg.setAttribute(img.attributes[i].nodeName, img.attributes[i].nodeValue)
|
|
398
|
-
}
|
|
399
|
-
if (newDomImg.getAttribute('alt') === null && img.textContent != '') {
|
|
400
|
-
newDomImg.setAttribute('alt', img.textContent)
|
|
401
|
-
}
|
|
402
|
-
newDomImg.setAttribute('src', typeof responsiveImage === 'function' ? responsiveImage(src) : src)
|
|
403
|
-
img.outerHTML = newDomImg.outerHTML
|
|
404
|
-
})
|
|
405
|
-
}
|
package/src/tailwind.helpers.js
CHANGED
|
@@ -1,65 +1,57 @@
|
|
|
1
1
|
module.exports = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
'span[data-rot]': {
|
|
16
|
-
color: 'var(--primary)',
|
|
17
|
-
fontWeight: 500,
|
|
18
|
-
borderBottom: '1px solid;',
|
|
19
|
-
'&:hover': {
|
|
20
|
-
opacity: '.75',
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
},
|
|
2
|
+
extendTailwindTypography: function () {
|
|
3
|
+
return {
|
|
4
|
+
DEFAULT: {
|
|
5
|
+
css: {
|
|
6
|
+
'a, span[data-rot], .link': {
|
|
7
|
+
textDecoration: 'none',
|
|
8
|
+
color: 'var(--primary)',
|
|
9
|
+
fontWeight: 500,
|
|
10
|
+
borderBottom: '1px solid;',
|
|
11
|
+
'&:hover': {
|
|
12
|
+
opacity: '.75',
|
|
24
13
|
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
addVariant('first-letter', ({ modifySelectors, separator }) => {
|
|
29
|
-
modifySelectors(({ className }) => {
|
|
30
|
-
return `.${e(`first-letter${separator}${className}`)}:first-letter`;
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
},
|
|
34
|
-
twFirstChildPlugin: function ({ addVariant, e }) {
|
|
35
|
-
addVariant('first-child', ({ modifySelectors, separator }) => {
|
|
36
|
-
modifySelectors(({ className }) => {
|
|
37
|
-
return `.${e(`first-child${separator}${className}`)}:first-child`;
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
},
|
|
41
|
-
twBleedPlugin: function ({ addUtilities }) {
|
|
42
|
-
addUtilities({
|
|
43
|
-
'.bleed': {
|
|
44
|
-
width: '100vw',
|
|
45
|
-
'margin-inline-start': '50%',
|
|
46
|
-
'margin-inline-end': 'unset',
|
|
47
|
-
transform: 'translateX(-50%)',
|
|
48
|
-
'max-width': 'none',
|
|
49
|
-
},
|
|
50
|
-
'.bleed-disable': {
|
|
51
|
-
width: 'inherit',
|
|
52
|
-
'margin-inline-start': 'inherit',
|
|
53
|
-
'margin-inline-end': 'inherit',
|
|
54
|
-
transform: 'default',
|
|
55
|
-
},
|
|
56
|
-
});
|
|
57
|
-
},
|
|
58
|
-
justifySafeCenterPlugin: function({addUtilities}) {
|
|
59
|
-
addUtilities({
|
|
60
|
-
'.justify-safe-center': {
|
|
61
|
-
'justify-content': 'safe center',
|
|
62
|
-
},
|
|
63
|
-
})
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
64
17
|
}
|
|
65
|
-
}
|
|
18
|
+
},
|
|
19
|
+
twFirstLetterPlugin: function ({ addVariant, e }) {
|
|
20
|
+
addVariant('first-letter', ({ modifySelectors, separator }) => {
|
|
21
|
+
modifySelectors(({ className }) => {
|
|
22
|
+
return `.${e(`first-letter${separator}${className}`)}:first-letter`
|
|
23
|
+
})
|
|
24
|
+
})
|
|
25
|
+
},
|
|
26
|
+
twFirstChildPlugin: function ({ addVariant, e }) {
|
|
27
|
+
addVariant('first-child', ({ modifySelectors, separator }) => {
|
|
28
|
+
modifySelectors(({ className }) => {
|
|
29
|
+
return `.${e(`first-child${separator}${className}`)}:first-child`
|
|
30
|
+
})
|
|
31
|
+
})
|
|
32
|
+
},
|
|
33
|
+
twBleedPlugin: function ({ addUtilities }) {
|
|
34
|
+
addUtilities({
|
|
35
|
+
'.bleed': {
|
|
36
|
+
width: '100vw',
|
|
37
|
+
'margin-inline-start': '50%',
|
|
38
|
+
'margin-inline-end': 'unset',
|
|
39
|
+
transform: 'translateX(-50%)',
|
|
40
|
+
'max-width': 'none',
|
|
41
|
+
},
|
|
42
|
+
'.bleed-disable': {
|
|
43
|
+
width: 'inherit',
|
|
44
|
+
'margin-inline-start': 'inherit',
|
|
45
|
+
'margin-inline-end': 'inherit',
|
|
46
|
+
transform: 'default',
|
|
47
|
+
},
|
|
48
|
+
})
|
|
49
|
+
},
|
|
50
|
+
justifySafeCenterPlugin: function ({ addUtilities }) {
|
|
51
|
+
addUtilities({
|
|
52
|
+
'.justify-safe-center': {
|
|
53
|
+
'justify-content': 'safe center',
|
|
54
|
+
},
|
|
55
|
+
})
|
|
56
|
+
},
|
|
57
|
+
}
|