Add Question.valid_file_portrait as well as crop editor for images

2026-05-06 15:24:02 +00:00 · 2021-04-19 15:39:38 +02:00
parent 638b856f42
commit 24bccf8b9c
24 changed files with 4239 additions and 21 deletions
--- a/src/pretix/static/cropper/cropper.js
+++ b/src/pretix/static/cropper/cropper.js
--- a/src/pretix/static/cropper/cropper.scss
+++ b/src/pretix/static/cropper/cropper.scss
@@ -0,0 +1,304 @@
+/*!
+ * Cropper.js v1.5.11
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-02-17T11:53:21.992Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
--- a/src/pretix/static/pretixcontrol/js/ui/main.js
+++ b/src/pretix/static/pretixcontrol/js/ui/main.js
@@ -567,6 +567,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);
 };

 $(function () {
--- a/src/pretix/static/pretixcontrol/js/ui/question.js
+++ b/src/pretix/static/pretixcontrol/js/ui/question.js
@@ -105,6 +105,7 @@ $(function () {
        $("#valid-date").toggle($("#id_type").val() == "D");
        $("#valid-datetime").toggle($("#id_type").val() == "W");
        $("#valid-number").toggle($("#id_type").val() == "N");
+        $("#valid-file").toggle($("#id_type").val() == "F");

        show = $("#id_type").val() == "B" && $("#id_required").prop("checked");
        $(".alert-required-boolean").toggle(show);
--- a/src/pretix/static/pretixcontrol/scss/_forms.scss
+++ b/src/pretix/static/pretixcontrol/scss/_forms.scss
@@ -318,6 +318,21 @@ input[type=number].short {
  }
 }

+.photo-initial {
+  margin-bottom: 5px;
+}
+.photo-preview {
+  max-width: 550px;
+  width: 100%;
+  height: auto;
+  margin-top: 10px;
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+}
+
 .propagated-settings-box {
  position: relative;

--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/src/pretix/static/pretixcontrol/scss/main.scss
@@ -4,6 +4,7 @@
@import "../../pretixbase/scss/_theme.scss";
@import "../../typeahead/typeahead.scss";
@import "../../charts/morris.scss";
+@import "../../cropper/cropper.scss";
@import "../../datetimepicker/_bootstrap-datetimepicker.scss";
@import "_sb-admin-2.scss";
@import "_forms.scss";
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/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);
 };


--- a/src/pretix/static/pretixpresale/js/ui/questions.js
+++ b/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])
+        })
    });
 }
--- a/src/pretix/static/pretixpresale/scss/_cart.scss
+++ b/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;
+}
--- a/src/pretix/static/pretixpresale/scss/_forms.scss
+++ b/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;
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/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";