almet/ihatemoney
1
0
Fork 0
mirror of https://github.com/spiral-project/ihatemoney.git synced 2025-05-06 21:11:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Load photoswipe JS and CSS only if needed

Browse source
This commit is contained in:
Jojo144 2020-05-06 18:01:48 +02:00
parent 0da8ffecab
commit 9fd5063b25
3 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ihatemoney/static/css/main.css
View file

@ -534,3 +534,7 @@ footer .icon svg {
text-align: right; text-align: right;
width: 200px; width: 200px;
} }
.hiddenpswp {
display: none;
}

7
ihatemoney/templates/layout.html
View file

@ -17,13 +17,6 @@
<script src="{{ url_for("static", filename="js/datatables.min.js") }}"></script> <script src="{{ url_for("static", filename="js/datatables.min.js") }}"></script>
{%- endif %} {%- endif %}
{% if g.lang == 'fr' %}
<link rel="stylesheet" href="{{ url_for("static", filename="photoswipe/photoswipe.css") }}">
<link rel="stylesheet" href="{{ url_for("static", filename="photoswipe/default-skin/default-skin.css") }}">
<script src="{{ url_for("static", filename="photoswipe/photoswipe.min.js")}}"></script>
<script src="{{ url_for("static", filename="photoswipe/photoswipe-ui-default.min.js")}}"></script>
{% endif %}
{% block head %}{% endblock %} {% block head %}{% endblock %}
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready(function(){ $(document).ready(function(){

24
ihatemoney/templates/showcase.html
View file

@ -1,4 +1,4 @@
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div id="pswp" class="hiddenpswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div> <div class="pswp__bg"></div>
<div class="pswp__scroll-wrap"> <div class="pswp__scroll-wrap">
<div class="pswp__container"> <div class="pswp__container">
@ -32,7 +32,7 @@
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var pswpElement = document.querySelectorAll('.pswp')[0]; var pswpElement = document.getElementById('pswp');
var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.jpg", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.jpg", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.jpg", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.jpg", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.jpg", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.jpg", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.jpg", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.jpg", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.jpg", "w": 2602}]'); var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.jpg", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.jpg", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.jpg", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.jpg", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.jpg", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.jpg", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.jpg", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.jpg", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.jpg", "w": 2602}]');
var options = { var options = {
index: 0, index: 0,
@ -40,8 +40,28 @@ var options = {
}; };
function showGallery(){ function showGallery(){
/* the CSS and JS for photoswipe is loaded dynamically
* so that they are not loaded if the gallery is not open */
$('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/default-skin/default-skin.css") }}">');
$('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/photoswipe.css") }}">');
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "{{ url_for('static', filename='photoswipe/photoswipe.min.js')}}";
script.onload = function(){
var script2 = document.createElement("script");
script2.type = "text/javascript";
script2.src = "{{ url_for('static', filename='photoswipe/photoswipe-ui-default.min.js')}}";
script2.onload = function(){
pswpElement.className="pswp";
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init(); gallery.init();
};
document.body.appendChild(script2);
};
document.body.appendChild(script);
} }
</script> </script>