Commit 55646525 authored by Ale's avatar Ale

feat: Add lazyload

parent 3d5c23f2
......@@ -36,6 +36,36 @@ class TestimonyCategory(Category):
null = True,
blank = True,
)
# image_small = ImageSpecField(
# source='image',
# processors=[
# ResizeToFill(400, 400)
# ],
# format='JPEG',
# options={
# 'quality': 90
# }
# )
# image_medium = ImageSpecField(
# source='image',
# processors=[
# ResizeToFill(400, 400)
# ],
# format='JPEG',
# options={
# 'quality': 90
# }
# )
# image_small = ImageSpecField(
# source='image',
# processors=[
# ResizeToFill(400, 400)
# ],
# format='JPEG',
# options={
# 'quality': 90
# }
# )
class Testimony(Publishable):
......
......@@ -2,15 +2,17 @@
from django.shortcuts import render
from django.views.generic import TemplateView
# project
from .models import TestimonyCategory
from .models import Testimony, TestimonyCategory
from .forms import TestimonyForm
class Map(TemplateView):
template_name = 'pages/map.html'
def get_context_data(self, *args, **kwargs):
context = super(Map, self).get_context_data(*args, **kwargs)
context['items'] = Testimony.objects.order_by('-creation_date')
context['categories'] = TestimonyCategory.objects.all()
context['form'] = TestimonyForm()
context['form'] = TestimonyForm()
return context
This diff is collapsed.
This diff is collapsed.
......@@ -19,6 +19,7 @@
"dayjs": "^1.9.3",
"leaflet": "^1.6.0",
"lorem-ipsum": "^2.0.3",
"slugify": "^1.4.5"
"slugify": "^1.4.5",
"vanilla-lazyload": "^17.1.3"
}
}
......@@ -406,7 +406,6 @@ const load_data = function(endpoint)
items = create_items(data);
items_lookup = items;
init_map( items );
init_timeline( items );
init_legend( items );
});
} else {
......@@ -440,4 +439,13 @@ const load_data = function(endpoint)
window.onload = ()=>{
load_data('/api/1.0/testimonies/');
var videos = document.querySelectorAll('video');
videos.forEach( function(video){
video.addEventListener('play', function(e){
videos.forEach(function(i){
if(i != e.target) i.pause();
});
});
});
};
......@@ -656,6 +656,12 @@ select:hover {
position: relative;
top: 3.2rem; }
video {
filter: blur(20px);
transition: filter 1s ease; }
video[data-ll-status="loaded"] {
filter: none; }
.form__field {
margin-bottom: 3.2rem; }
......
This diff is collapsed.
......@@ -39,3 +39,9 @@
font-size: 1.6rem
position: relative
top: $m*2
video
filter: blur(20px)
transition: filter 1s ease
&[data-ll-status="loaded"]
filter: none
......@@ -24,6 +24,31 @@
</div>
<div class="timeline-wrapper">
<div class="timeline">
{% for item in items %}
<div class="timeline-item item-{{ item.pk }}">
<div class="timeline-item__date">
{{ item.creation_date }}
</div>
<div class="timeline-item__video">
<video
class="lazy"
preload="none"
data-src="{{ item.video.url }}"
controls
type="video/mp4"
>
<source data-src="{{ item.video.url}}">
</video>
</div>
<h3 class="timeline-item__name">
{{ item.name }}
</h3>
<div class="timeline-item__terms">
{{ item.category }}{% if item.other_categories %}, {% for cat in item.other_categories.all %}{{ cat }}{% if not forloop.last %},{% endif %} {% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
......@@ -105,4 +130,8 @@
{% if form %}
<script type="text/javascript" src="{% static '/admin/js/vendor/jquery/jquery.min.js' %}"></script>
{% endif %}
<script src="{% static 'map/js/node_modules/vanilla-lazyload/dist/lazyload.min.js' %}"></script>
<script>
var lazyLoadInstance = new LazyLoad({});
</script>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment