PDF editor: Allow to easily change the page size

src/pretix/control/templates/pretixcontrol/pdf/index.html

@@ -175,22 +175,33 @@
                     <div class="row control-group pdf-info">
                         <div class="col-sm-6">
                             <label>{% trans "Width (mm)" %}</label><br>
-                            <input type="number" id="pdf-info-width" class="input-block-level form-control" disabled>
+                            <input type="number" id="pdf-info-width" class="input-block-level form-control">
                         </div>
                         <div class="col-sm-6">
                             <label>{% trans "Height (mm)" %}</label><br>
-                            <input type="number" id="pdf-info-height" class="input-block-level form-control" disabled>
+                            <input type="number" id="pdf-info-height" class="input-block-level form-control">
                         </div>
                     </div>
                     <div class="row control-group pdf-info">
                         <div class="col-sm-12">
                             <label>{% trans "Background PDF" %}</label><br>
-                            <span class="btn btn-default fileinput-button">
+                            <p>
+                                <button class="btn btn-default background-button" id="pdf-empty">
+                                    {% trans "Create empty background" %}
+                                </button>
+                            </p>
+                            <span class="btn btn-default fileinput-button background-button">
                                 <i class="fa fa-upload"></i>
-                                <span>{% trans "Upload new background" %}</span>
+                                <span>{% trans "Upload custom background" %}</span>
                                 <input id="fileupload" type="file" name="background">
                             </span>
                         </div>
+                        <div class="col-sm-12 help-inline">
+                            <p>
+                                After you changed the page size, you need to create a new empty background. If you
+                                want to use a custom background, it already needs to have the correct size.
+                            </p>
+                        </div>
                     </div>
                     <div class="row control-group position">
                         <div class="col-sm-6">

src/pretix/control/views/pdf.py

@@ -2,8 +2,10 @@ import json
 import logging
 import mimetypes
 from datetime import timedelta
+from io import BytesIO
 
 from django.core.files import File
+from django.core.files.base import ContentFile
 from django.core.files.storage import default_storage
 from django.http import (
     FileResponse, HttpResponse, HttpResponseBadRequest, JsonResponse,
@@ -14,6 +16,8 @@ from django.utils.crypto import get_random_string
 from django.utils.timezone import now
 from django.utils.translation import ugettext as _
 from django.views.generic import TemplateView
+from PyPDF2 import PdfFileWriter
+from reportlab.lib.units import mm
 
 from pretix.base.i18n import language
 from pretix.base.models import CachedFile, InvoiceAddress, OrderPosition
@@ -117,6 +121,33 @@ class BaseEditorView(EventPermissionRequiredMixin, TemplateView):
         self.request.event.settings.set(self.get_background_settings_key(), 'file://' + newname)
 
     def post(self, request, *args, **kwargs):
+        if "emptybackground" in request.POST:
+            p = PdfFileWriter()
+            p.addBlankPage(
+                width=float(request.POST.get('width')) * mm,
+                height=float(request.POST.get('height')) * mm,
+            )
+            buffer = BytesIO()
+            p.write(buffer)
+            buffer.seek(0)
+            c = CachedFile()
+            c.expires = now() + timedelta(days=7)
+            c.date = now()
+            c.filename = 'background_preview.pdf'
+            c.type = 'application/pdf'
+            c.save()
+            c.file.save('empty.pdf', ContentFile(buffer.read()))
+            c.refresh_from_db()
+            return JsonResponse({
+                "status": "ok",
+                "id": c.id,
+                "url": reverse('control:pdf.background', kwargs={
+                    'event': request.event.slug,
+                    'organizer': request.organizer.slug,
+                    'filename': str(c.id)
+                })
+            })
+
         if "background" in request.FILES:
             error, fileobj = self.process_upload()
             if error:

src/pretix/static/pretixcontrol/js/ui/editor.js

@@ -717,6 +717,30 @@ var editor = {
         $("#source-container").hide();
     },
 
+    _create_empty_background: function () {
+        $("#loading-container, #loading-upload").show();
+        $("#loading-upload .progress").show();
+        $('#loading-upload .progress-bar').css('width', 0);
+        $("#fileupload").prop('disabled', true);
+        $(".background-button").addClass("disabled");
+        $.post(window.location.href, {
+            'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val(),
+            'emptybackground': 'true',
+            'width': $("#pdf-info-width").val(),
+            'height': $("#pdf-info-height").val(),
+        }, function (data) {
+            if (data.status === "ok") {
+                editor.uploaded_file_id = data.id;
+                editor._replace_pdf_file(data.url);
+            } else {
+                alert(data.result.error || gettext("Error while uploading your PDF file, please try again."));
+                $("#loading-container, #loading-upload").hide();
+            }
+            $("#fileupload").prop('disabled', false);
+            $(".background-button").removeClass("disabled");
+        }, 'json');
+    },
+
     init: function () {
         editor.$pdfcv = $("#pdf-canvas");
         editor.pdf_url = editor.$pdfcv.attr("data-pdf-url");
@@ -738,6 +762,7 @@ var editor = {
         $("#source-container").hide();
 
 
+        $("#pdf-empty").on("click", editor._create_empty_background);
         $('#fileupload').fileupload({
             url: location.href,
             dataType: 'json',
@@ -750,7 +775,7 @@ var editor = {
                     $("#loading-container, #loading-upload").hide();
                 }
                 $("#fileupload").prop('disabled', false);
-                $(".fileinput-button").removeClass("disabled");
+                $(".background-button").removeClass("disabled");
             },
             add: function (e, data) {
                 data.formData = {
@@ -760,7 +785,7 @@ var editor = {
                 $("#loading-upload .progress").show();
                 $('#loading-upload .progress-bar').css('width', 0);
                 $("#fileupload").prop('disabled', true);
-                $(".fileinput-button").addClass("disabled");
+                $(".background-button").addClass("disabled");
                 data.process().done(function () {
                     data.submit();
                 });

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -466,3 +466,6 @@ table td > .checkbox input[type="checkbox"] {
   }
 }
 
+.help-inline {
+  color: lighten($text-color, 25%); // lighten the text some for contrast
+}

src/pretix/static/pretixcontrol/scss/pdfeditor.css

@@ -61,3 +61,7 @@ body {
     width: 100%;
     height: 250px;
 }
+.pdf-info .help-inline p {
+    margin-top: 10px;
+    margin-bottom: 0;
+}