Commit c52f149b authored by Mirko Vucicevich's avatar Mirko Vucicevich

Merge branch 'slide-overlay' into 'master'

Slide overlay

See merge request !59
parents 338576f5 43f09ff1
......@@ -187,7 +187,7 @@ class SlideLayerForm(forms.ModelForm):
class SlideshowForm(forms.ModelForm):
class Meta:
model = Slideshow
fields = ['title', 'description']
fields = ['title', 'description', 'overlay']
def __init__(self, *args, **kwargs):
super(SlideshowForm, self).__init__(*args, **kwargs)
......
# Generated by Django 2.2.7 on 2020-03-04 07:27
from django.db import migrations, models
import django.db.models.deletion
class Migration(migrations.Migration):
dependencies = [
('layers', '0037_auto_20191204_0137'),
]
operations = [
migrations.AddField(
model_name='slideshow',
name='overlay',
field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='layers.Slide'),
),
]
# Generated by Django 2.2.7 on 2020-03-26 15:27
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('layers', '0038_auto_20200304_0227'),
('layers', '0038_auto_20200219_1720'),
]
operations = [
]
......@@ -468,6 +468,7 @@ class Slideshow(TrashableMixin):
description = models.TextField(blank=True)
creation_date = models.DateTimeField(auto_now_add=True)
edit_date = models.DateTimeField(auto_now=True, blank=True, null=True)
overlay = models.ForeignKey(Slide, on_delete=models.CASCADE, null=True, blank=True)
last_edit = models.ForeignKey(
User,
......
......@@ -883,6 +883,7 @@ def fieldValidation(request):
@cache_page(60*15)
def viewSlide(request, slide_id):
preview = request.GET.get('preview', False)
preview = request.GET.get('overlay', False)
cache_key = 'slide_cache_{}'.format(slide_id)
if not preview:
content = cache.get(cache_key)
......@@ -1114,7 +1115,19 @@ def viewSlideshow(request, slideshow_id):
else:
dimensions = [100, 56.25]
return render(request, 'slideshows/slideshow_no_slides_found.html')
return render(request, 'slideshows/slideshowrender.html', {'dimensions': dimensions, 'slideshow': slideshow, 'fs_src': '/slides/view/%s/' % first_slide.slide.id, 'fs_time': first_slide.length * 1000})
context = {
'dimensions': dimensions,
'slideshow': slideshow,
'fs_src': '/slides/view/%s/' % first_slide.slide.id,
'fs_time': first_slide.length * 1000,
}
if slideshow.overlay:
context['overlay_src'] = '/slides/view/%s/?overlay=true' % slideshow.overlay.id
return render(
request,
'slideshows/slideshowrender.html',
context
)
def nextSlide(request, slideshow_id, current_index):
......
......@@ -4,6 +4,9 @@
body{
margin:0;
padding:0;
{% if request.GET.overlay %}
background-color: transparent !important;
{% endif %}
{% if request.GET.preview %}
background-color: black;
overflow: auto;
......
......@@ -45,6 +45,15 @@
.addbuttoncontainer{
display: block;
}
#overlay-info {
margin-bottom: 60px;
}
#overlay-info .addbuttoncontainer {
width: 200px !important;
}
#overlay-info .itemContainer {
height: 190px;
}
</style>
{% endblock %}
......@@ -60,6 +69,10 @@
</div>
<div class="col-lg-6 col-lg-pull-6 col-xs-12">
{% crispy form %}
<p>New! Add a slide as an overlay and it will appear on top of all the slides in a slideshow</p>
<div id="overlay-info" class="col-sm-8">
<button type="button" class=" btn btn-block btn-primary addslidebutton">Add an overlay</button>
</div>
</div>
</div>
<div class="btn-group" style="margin-bottom: 5px;">
......@@ -75,6 +88,17 @@
</form>
<div id="slideOverlayModal" class="modal fade" style="z-index:2000;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="slidesModal" class="modal fade" style="z-index:2000;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
......@@ -109,12 +133,55 @@
icon.find('.slideContent').prepend(search.find('.info').html())
}
})
initOverlay();
})
function reorder(){
$('#slidelist>.activeIcon').each(function(index){
$(".slideForm>.order", this).val(index);
})
}
function initOverlay() {
// Fill overlay modal with content
$('#slideOverlayModal .modal-body').html($('#listSlidesLoader').html());
$('#slideOverlayModal .slideItem .addbuttoncontainer .addslidebutton').text('Change');
$('#id_overlay').hide();
onOverlayChange();
}
function onOverlayChange() {
// Run when overlay value changes
let $overlayIdField = $('#id_overlay');
let selectedSlideId = $overlayIdField.find(':selected').attr('value');
if (selectedSlideId) {
let $selectedSlide = $(`#slideOverlayModal .slideItem[data-id=${selectedSlideId}]`);
$('#overlay-info').html($selectedSlide.html());
$('#overlay-info .addbuttoncontainer').append('<button type="button" class=" btn btn-block btn-danger removebutton">Remove</button>');
$('#overlay-info .addbuttoncontainer .removebutton').click(function(evt){
evt.preventDefault();
$overlayIdField.val([]);
onOverlayChange();
});
} else {
$('#overlay-info').html('<button type="button" class=" btn btn-block btn-primary addslidebutton">Add an overlay</button>');
}
// Show overlay slides modal
$('#overlay-info .addslidebutton').click(function(evt){
evt.preventDefault();
$('#slideOverlayModal').modal('show');
});
// Change the overlay value
$('#slideOverlayModal .addslidebutton').click(function(evt){
evt.preventDefault();
var slideItem = $(this).closest('.slideItem');
$overlayIdField.val(slideItem.attr('data-id'));
$('#slideOverlayModal').modal('hide');
onOverlayChange();
});
}
$('#slidelist').each(function(){
var $this = $(this);
$this.append($this.find('.activeIcon').get().sort(function(a, b) {
......
......@@ -46,6 +46,11 @@
</head>
<body>
<div id="element-wrapper">
{% comment %} iFrame for overlay {% endcomment %}
<iframe src="{{overlay_src}}" class="element" style=" z-index:10;" allowtransparency="true"
scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" sandbox="allow-scripts allow-same-origin">
</iframe>
<div id="bg" class="element fade" style="z-index:5; background-color: #000000;"></div>
......
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