Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

POC of removing jquery #27

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+64 −90
Open

POC of removing jquery #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,6 @@ Put files in following places:
- /static/js/load-photoswipe.js
- /static/css/hugo-easy-gallery.css

**NB `load-photoswipe.html` loads jQuery from `cdnjs.cloudflare.com`.**

- If your template already loads jQuery in the header, you can delete the jQuery link in `load-photoswipe.html`.
- If your template already loads jQuery in the footer, you should `load-photoswipe.js` from the footer instead of in `load-photoswipe.html`.

If you want, you could (depending on a front matter param) conditionally load `load-photoswipe.html` or its contents from the footer of your template. But I've consciously chosen to load PhotoSwipe using a shortcode so that you don't have to modify your template if you don't want to.

## Theme integration
Expand All @@ -56,12 +51,9 @@ Rename `/layouts/shortcodes/load-photoswipe-theme.html` to `/layouts/shortcodes/

Add the following lines to the footer of your template, just before `</body>`:

(Omit the jQuery line if jQuery is already loaded elsewhere in your template; just make sure that jQuery is loaded **before** this code.)

```html
<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
{{ if ($.Scratch.Get "photoswipeloaded") }}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
Expand Down
6 changes: 0 additions & 6 deletions layouts/shortcodes/load-photoswipe-theme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,7 @@
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}

<!--
*** jQuery must be loaded before load-photoswipe.js ***
- If your template already loads jQuery in the header then you don't need to load it again here.
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
-->
<!-- these files are loaded in the theme footer
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
-->

Expand Down
6 changes: 0 additions & 6 deletions layouts/shortcodes/load-photoswipe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}

<!--
*** jQuery must be loaded before load-photoswipe.js ***
- If your template already loads jQuery in the header then you don't need to load it again here.
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>

<!-- Photoswipe css/js libraries -->
Expand Down
134 changes: 64 additions & 70 deletions static/js/load-photoswipe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,73 @@
Put this file in /static/js/load-photoswipe.js
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
*/

/* Show an alert if this js file has been loaded twice */
if (window.loadphotoswipejs) {
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
}
var loadphotoswipejs = 1

/* TODO: Make the share function work */
$( document ).ready(function() {
/*
Initialise Photoswipe
*/
var items = []; // array of slide objects that will be passed to PhotoSwipe()
// for every figure element on the page:
$('figure').each( function() {
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
// get properties from child a/img/figcaption elements,
var $figure = $(this),
$a = $figure.find('a'),
$img = $figure.find('img'),
$src = $a.attr('href'),
$title = $img.attr('alt'),
$msrc = $img.attr('src');
// if data-size on <a> tag is set, read it and create an item
if ($a.data('size')) {
var $size = $a.data('size').split('x');
var item = {
src : $src,
w : $size[0],
h : $size[1],
title : $title,
msrc : $msrc
};
console.log("Using pre-defined dimensions for " + $src);
// if not, set temp default size then load the image to check actual size
} else {
var item = {
src : $src,
w : 800, // temp default size
h : 600, // temp default size
title : $title,
msrc : $msrc
};
console.log("Using default dimensions for " + $src);
// load the image to check its dimensions
// update the item as soon as w and h are known (check every 30ms)
var img = new Image();
img.src = $src;
var wait = setInterval(function() {
var w = img.naturalWidth,
h = img.naturalHeight;
if (w && h) {
clearInterval(wait);
item.w = w;
item.h = h;
console.log("Got actual dimensions for " + img.src);
}
}, 30);
}
// Save the index of this image then add it to the array
var index = items.length;
items.push(item);
// Event handler for click on a figure
$figure.on('click', function(event) {
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
// Get the PSWP element and initialise it with the desired options
var $pswp = $('.pswp')[0];
var options = {
index: index,
bgOpacity: 0.8,
showHideOpacity: true
}
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
});
});
});

document.addEventListener('DOMContentLoaded', function() {
var items = []; // array of slide objects that will be passed to PhotoSwipe()
// for every figure element on the page:
document.querySelectorAll('figure').forEach(function($figure, index) {
if ($figure.className == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
var $a = $figure.querySelector('a'),
$img = $figure.querySelector('img'),
$src = $a.href,
$title = $img.alt,
$msrc = $img.src;
// if data-size on <a> tag is set, read it and create an item
if ($a.dataset.size) {
var $size = $a.dataset.size.split('x');
var item = {
src : $src,
w : $size[0],
h : $size[1],
title : $title,
msrc : $msrc
};
console.log("Using pre-defined dimensions for " + $src);
// if not, set temp default size then load the image to check actual size
} else {
var item = {
src : $src,
w : 400, // temp default size
h : 300, // temp default size
title : $title,
msrc : $msrc
};
console.log("Using default dimensions for " + $src);
// load the image to check its dimensions
// update the item as soon as w and h are known (check every 30ms)
var img = new Image();
img.src = $src;
var wait = setInterval(function() {
var w = img.naturalWidth,
h = img.naturalHeight;
if (w && h) {
clearInterval(wait);
item.w = w;
item.h = h;
console.log("Got actual dimensions for " + img.src);
}
}, 30);
}
// Save the index of this image then add it to the array
items.push(item);
// Event handler for click on a figure
$figure.addEventListener('click', function(event) {
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
// Get the PSWP element and initialize it with the desired options
var $pswp = document.querySelector('.pswp');
var options = {
index: index,
bgOpacity: 0.8,
showHideOpacity: true
}
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
}, false);
});
}, false);