Add Question.valid_file_portrait as well as crop editor for images

src/pretix/static/pretixpresale/js/ui/main.js

@@ -133,6 +133,7 @@ var form_handlers = function (el) {
 
     el.find("input[name*=question], select[name*=question]").change(questions_toggle_dependent);
     questions_toggle_dependent();
+    questions_init_photos(el);
 };
 
 

src/pretix/static/pretixpresale/js/ui/questions.js

@@ -70,6 +70,46 @@ function questions_toggle_dependent(ev) {
                 $(this).prop("required", false).addClass("required-hidden");
             });
         }
-
+    });
+}
+
+function questions_init_photos(el) {
+    if (!FileReader) {
+        // No browser support
+        return
+    }
+
+    el.find("input[data-portrait-photo]").each(function () {
+        var $inp = $(this)
+        var $container = $inp.parent().parent()
+
+        $container.find(".photo-input").addClass("hidden")
+        $container.find(".photo-buttons").removeClass("hidden")
+
+        $container.find("button[data-action=upload]").click(function () {
+            $inp.click();
+        })
+
+        var cropper = new Cropper($container.find(".photo-preview img").get(0), {
+            aspectRatio: 3 / 4,
+            viewMode: 1,
+            zoomable: false,
+            crop(event) {
+                $container.find("input[type=hidden]").val(JSON.stringify(cropper.getData(true)));
+            },
+        });
+        /* This rule is very important, please don't ignore this */
+
+        $inp.on("change", function () {
+            if (!$inp.get(0).files[0]) return
+            $container.find("button[data-action=upload]").append("<span class='fa fa-spin fa-cog'></span>")
+            var fr = new FileReader()
+            fr.onload = function () {
+                cropper.replace(fr.result)
+                $container.find(".photo-preview").removeClass("hidden")
+                $container.find("button[data-action=upload] .fa-spin").remove()
+            }
+            fr.readAsDataURL($inp.get(0).files[0])
+        })
     });
 }

src/pretix/static/pretixpresale/scss/_cart.scss

@@ -142,3 +142,11 @@
 .btn-invisible {
     opacity: 0 !important;
 }
+
+.answer-thumb img {
+    width: auto;
+    height: auto;
+    max-height: 100px;
+    max-width: 100%;
+    margin-top: 5px;
+}

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -102,6 +102,22 @@ a.btn, button.btn {
   }
 }
 
+.photo-initial {
+  margin-bottom: 5px;
+}
+.photo-preview {
+  max-width: 550px;
+  width: 100%;
+  height: auto;
+  margin-top: 10px;
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+}
+
+
 @media(max-width: $screen-xs-max) {
   .nameparts-form-group {
     display: block;

src/pretix/static/pretixpresale/scss/main.scss

@@ -2,6 +2,7 @@
 @import "../../bootstrap/scss/_bootstrap_reduced.scss";
 @import "../../pretixbase/scss/_theme.scss";
 @import "../../lightbox/css/lightbox.scss";
+@import "../../cropper/cropper.scss";
 @import "../../datetimepicker/_bootstrap-datetimepicker.scss";
 @import "../../slider/_bootstrap-slider.scss";
 @import "../../fontawesome/scss/font-awesome.scss";