host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit slider custom cursor

Browse source
This commit is contained in:
Paul Nicoué 2022-12-19 14:24:51 +01:00
parent 20cc18d234
commit ccce322045
6 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

12
assets/js/app.js
View file

@ -124,7 +124,11 @@ function editColorTheme(slide) {
cursorColor = 'dark';
}
if (body && cursorOrientation && cursorColor) {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 0 16, auto`;
if (cursorOrientation === 'previous') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 0 12, auto`;
} else if (cursorOrientation === 'next') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 24 12, auto`;
}
}
}
}
@ -154,7 +158,11 @@ function setCursorOnMove() {
cursorOrientation = 'previous';
}
if (cursorOrientation && cursorColor) {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 0 16, auto`;
if (cursorOrientation === 'previous') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 0 12, auto`;
} else if (cursorOrientation === 'next') {
body.style.cursor = `url('/images/cursor-${cursorOrientation}-${cursorColor}.svg') 24 12, auto`;
}
}
});
}

2
public/build/app.js
View file

File diff suppressed because one or more lines are too long

5
public/images/cursor-next-dark.svg
View file

@ -1,3 +1,4 @@
<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 1.061 30.921 C 0.698 30.471 0.507 29.972 0.483 29.429 C 0.461 28.887 0.654 28.412 1.061 28.006 L 12.999 16.068 L 0.992 4.062 C 0.631 3.701 0.461 3.213 0.483 2.604 C 0.507 1.993 0.698 1.507 1.061 1.146 C 1.511 0.694 1.999 0.479 2.518 0.502 C 3.038 0.525 3.501 0.738 3.909 1.146 L 17.406 14.643 C 17.633 14.87 17.791 15.095 17.882 15.321 C 17.971 15.547 18.018 15.795 18.018 16.068 C 18.018 16.338 17.971 16.588 17.882 16.815 C 17.791 17.04 17.633 17.266 17.406 17.492 L 3.978 30.921 C 3.57 31.328 3.095 31.521 2.553 31.498 C 2.01 31.476 1.511 31.284 1.061 30.921 Z" style="fill: #000; stroke: #fff;"/>
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 19.777 L 7.543 19.705 C 7.397 19.384 7.629 19 8 19 L 13.5 19 L 13.5 0.5 C 13.5 0.224 13.724 0 14 0 L 18 0 L 18.09 0.008 C 18.323 0.05 18.5 0.255 18.5 0.5 L 18.5 19 L 24 19 C 24.399 19 24.638 19.445 24.416 19.777 L 16.416 31.777 C 16.218 32.074 15.782 32.074 15.584 31.777 L 7.584 19.777 Z" fill="#000" transform="matrix(0, -1, 1, 0, 0.000012, 31.999764)"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 715 B

After

Width:  |  Height:  |  Size: 511 B

Before After
Before After

5
public/images/cursor-next-light.svg
View file

@ -1,3 +1,4 @@
<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 1.061 30.921 C 0.698 30.471 0.507 29.972 0.483 29.429 C 0.461 28.887 0.654 28.412 1.061 28.006 L 12.999 16.068 L 0.992 4.062 C 0.631 3.701 0.461 3.213 0.483 2.604 C 0.507 1.993 0.698 1.507 1.061 1.146 C 1.511 0.694 1.999 0.479 2.518 0.502 C 3.038 0.525 3.501 0.738 3.909 1.146 L 17.406 14.643 C 17.633 14.87 17.791 15.095 17.882 15.321 C 17.971 15.547 18.018 15.795 18.018 16.068 C 18.018 16.338 17.971 16.588 17.882 16.815 C 17.791 17.04 17.633 17.266 17.406 17.492 L 3.978 30.921 C 3.57 31.328 3.095 31.521 2.553 31.498 C 2.01 31.476 1.511 31.284 1.061 30.921 Z" style="fill: #fff; stroke: #000;"/>
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 19.777 L 7.543 19.705 C 7.397 19.384 7.629 19 8 19 L 13.5 19 L 13.5 0.5 C 13.5 0.224 13.724 0 14 0 L 18 0 L 18.09 0.008 C 18.323 0.05 18.5 0.255 18.5 0.5 L 18.5 19 L 24 19 C 24.399 19 24.638 19.445 24.416 19.777 L 16.416 31.777 C 16.218 32.074 15.782 32.074 15.584 31.777 L 7.584 19.777 Z" fill="#fff" transform="matrix(0, -1, 1, 0, 0.000012, 31.999764)"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 715 B

After

Width:  |  Height:  |  Size: 512 B

Before After
Before After

5
public/images/cursor-previous-dark.svg
View file

@ -1,3 +1,4 @@
<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 14.433 30.889 L 1.106 17.458 C 0.881 17.232 0.724 17.006 0.635 16.78 C 0.545 16.554 0.5 16.305 0.5 16.034 C 0.5 15.763 0.545 15.514 0.635 15.288 C 0.724 15.062 0.881 14.836 1.106 14.609 L 14.499 1.111 C 14.903 0.704 15.386 0.5 15.947 0.5 C 16.508 0.5 16.99 0.704 17.394 1.111 C 17.798 1.518 17.988 2.015 17.966 2.603 C 17.943 3.191 17.73 3.688 17.326 4.095 L 5.481 16.034 L 17.394 28.04 C 17.798 28.447 18 28.922 18 29.465 C 18 30.008 17.798 30.482 17.394 30.889 C 16.99 31.297 16.497 31.5 15.913 31.5 C 15.33 31.5 14.837 31.297 14.433 30.889 Z" style="fill: #000; stroke: #fff;"/>
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 12.223 L 7.543 12.295 C 7.397 12.616 7.629 13 8 13 L 13.5 13 L 13.5 31.5 C 13.5 31.776 13.724 32 14 32 L 18 32 L 18.09 31.992 C 18.323 31.95 18.5 31.745 18.5 31.5 L 18.5 13 L 24 13 C 24.399 13 24.638 12.555 24.416 12.223 L 16.416 0.223 C 16.218 -0.074 15.782 -0.074 15.584 0.223 L 7.584 12.223 Z" fill="#000" transform="matrix(0, -1, 1, 0, -0.000237, 32.000013)"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 696 B

After

Width:  |  Height:  |  Size: 519 B

Before After
Before After

5
public/images/cursor-previous-light.svg
View file

@ -1,3 +1,4 @@
<svg height="32px" width="18.5px" viewBox="0 0 18.5 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 14.433 30.889 L 1.106 17.458 C 0.881 17.232 0.724 17.006 0.635 16.78 C 0.545 16.554 0.5 16.305 0.5 16.034 C 0.5 15.763 0.545 15.514 0.635 15.288 C 0.724 15.062 0.881 14.836 1.106 14.609 L 14.499 1.111 C 14.903 0.704 15.386 0.5 15.947 0.5 C 16.508 0.5 16.99 0.704 17.394 1.111 C 17.798 1.518 17.988 2.015 17.966 2.603 C 17.943 3.191 17.73 3.688 17.326 4.095 L 5.481 16.034 L 17.394 28.04 C 17.798 28.447 18 28.922 18 29.465 C 18 30.008 17.798 30.482 17.394 30.889 C 16.99 31.297 16.497 31.5 15.913 31.5 C 15.33 31.5 14.837 31.297 14.433 30.889 Z" style="fill: #fff; stroke: #000;"/>
<?xml version="1.0" encoding="utf-8"?>
<svg width="24px" height="24px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 7.584 12.223 L 7.543 12.295 C 7.397 12.616 7.629 13 8 13 L 13.5 13 L 13.5 31.5 C 13.5 31.776 13.724 32 14 32 L 18 32 L 18.09 31.992 C 18.323 31.95 18.5 31.745 18.5 31.5 L 18.5 13 L 24 13 C 24.399 13 24.638 12.555 24.416 12.223 L 16.416 0.223 C 16.218 -0.074 15.782 -0.074 15.584 0.223 L 7.584 12.223 Z" fill="#fff" transform="matrix(0, -1, 1, 0, -0.000237, 32.000013)"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 696 B

After

Width:  |  Height:  |  Size: 520 B

Before After
Before After