Files
pretix_cgo/src/pretix/control/templates/pretixcontrol/pdf/index.html
T
Raphael MichelandRichard Schreiber 022f44ad00 PDF editor: New text element implementation (#4246)
* draft

* almost working

* Widgth adjustment

* Fix crash on empty text

* Change default layouts

* Fix editor bugs

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

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Show deprecated text on old text

* lockScalingFlip

* Regroup editor controls

* Update src/pretix/static/pretixcontrol/js/ui/main.js

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Update src/pretix/static/pretixcontrol/js/ui/main.js

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Update src/pretix/static/pretixcontrol/js/ui/main.js

Co-authored-by: Richard Schreiber <schreiber@rami.io>

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

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Increase default height even further

* Add a small version warning

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

Co-authored-by: Richard Schreiber <schreiber@rami.io>

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

Co-authored-by: Richard Schreiber <schreiber@rami.io>

---------

Co-authored-by: Richard Schreiber <schreiber@rami.io>
2024-08-07 11:26:47 +02:00

552 lines
32 KiB
HTML

{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% load static %}
{% load compress %}
{% block title %}{% trans "PDF Editor" %}{% endblock %}
{% block custom_header %}
{{ block.super }}
{% compress css %}
<link type="text/css" rel="stylesheet" href="{% static "pretixcontrol/scss/pdfeditor.css" %}">
{% endcompress %}
<link type="text/css" rel="stylesheet" href="{% url "control:pdf.css" organizer=request.organizer.slug event=request.event.slug %}">
{% endblock %}
{% block content %}
<h1>
{% trans "PDF Editor" %}
{% if title %}
<small>{{ title }}</small>
{% endif %}
</h1>
<script type="application/json" id="editor-data">
{{ layout|safe }}
</script>
<div class="row">
<div class="col-md-9">
<div class="panel panel-default panel-pdf-editor">
<div class="panel-heading">
<div class="pull-right flip">
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs" id="toolbox-source"
title="{% trans "Code" %}">
<span class="fa fa-code"></span>
</button>
<button type="button" class="btn btn-default btn-xs" id="toolbox-paste"
title="{% trans "Paste" %}">
<span class="fa fa-paste"></span>
</button>
<button type="button" class="btn btn-default btn-xs" id="toolbox-undo"
title="{% trans "Undo" %}">
<span class="fa fa-undo"></span>
</button>
<button type="button" class="btn btn-default btn-xs" id="toolbox-redo"
title="{% trans "Redo" %}">
<span class="fa fa-repeat"></span>
</button>
</div>
</div>
{% trans "Editor" %}
</div>
<div class="panel-body">
<ul class="nav nav-pills" id="page_nav">
</ul>
<div id="editor-canvas-area">
<canvas id="pdf-canvas"
data-pdf-url="{{ pdf }}"
data-worker-url="{% static "pdfjs/pdf.worker.js" %}">
</canvas>
<div id="fabric-container">
<canvas id="fabric-canvas">
</canvas>
</div>
<div id="source-container">
<div class="alert alert-warning">
<strong>
{% blocktrans trimmed %}
This feature is only intended for advanced users. We recommend to only use it
to copy and share ticket designs, not to modify the design source code.
{% endblocktrans %}
</strong>
</div>
<p>
<textarea id="source-textarea" class="form-control"></textarea>
</p>
<p class="text-right flip">
<button class="btn btn-default" id="source-close">
{% trans "Cancel" %}
</button>
<button class="btn btn-default" id="source-save">
{% trans "Apply" %}
</button>
</p>
</div>
<div id="loading-container">
<div id="loading-upload">
<span class="fa fa-cog big-rotating-icon"></span>
<p>
{% trans "Uploading new PDF background…" %}
</p>
<div class="progress">
<div class="progress-bar" style="width: 0%;">
</div>
</div>
</div>
<div id="loading-initial">
<h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
<p>
{% blocktrans trimmed %}
This editor allows you to create a design for the PDF tickets of your event.
You can upload a background PDF and then use this tool to place texts and
a QR code on the ticket.
{% endblocktrans %}
</p>
<p>&nbsp;</p>
<p>
<span class="fa fa-eye fa-2x"></span>
</p>
<p>
{% blocktrans trimmed %}
Please note that the editor can only provide a rough preview. Some details,
for example in text rendering, might look slightly different in the final
tickets. You can use the "Preview" button on the right for a more precise
preview.
{% endblocktrans %}
</p>
<p>&nbsp;</p>
<p>
<span class="fa fa-chrome fa-2x"></span>
<span class="fa fa-firefox fa-2x"></span>
<span class="fa fa-opera fa-2x"></span>
</p>
<p>
{% blocktrans trimmed %}
The editor is tested with recent versions of Google Chrome, Mozilla Firefox
and Opera. Other browsers, especially Internet Explorer or Microsoft Edge, might
have problems displaying your background PDF or loading the correct fonts.
{% endblocktrans %}
</p>
<noscript>
<div class="alert alert-danger">
{% blocktrans trimmed %}
The editor requires JavaScript to work. Please enable JavaScript in your
browser to continue.
{% endblocktrans %}
</div>
</noscript>
<p>&nbsp;</p>
<p>
<em id="editor-loading">
<span class="fa fa-cog fa-spin"></span>
{% trans "Loading…" %}
</em>
<button id="editor-start" class="btn btn-primary sr-only">
{% trans "Start editing" %}
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3" id="editor-toolbox-area">
<div class="panel panel-default" id="toolbox">
<div class="panel-heading">
<div class="pull-right object-buttons flip">
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs" id="toolbox-cut"
title="{% trans "Cut" %}">
<span class="fa fa-cut"></span>
</button>
<button type="button" class="btn btn-default btn-xs" id="toolbox-copy"
title="{% trans "Copy" %}">
<span class="fa fa-copy"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" id="toolbox-delete"
title="{% trans "Delete" %}">
<span class="fa fa-trash"></span>
</button>
</div>
</div>
<span id="toolbox-heading">
{% trans "Loading…" %}
</span>
</div>
<div class="panel-body" id="toolbox-body">
{% if name %}
<div class="row control-group pdf-info">
<div class="col-sm-12">
<label for="pdf-info-name">{% trans "Layout name" %}</label><br>
<input type="text" id="pdf-info-name" class="input-block-level form-control" name="name" value="{{ name }}">
</div>
</div>
{% endif %}
<div class="row control-group pdf-info">
<hr/>
<div class="col-sm-6">
<label for="pdf-info-width">{% trans "Width (mm)" %}</label><br>
<input type="number" id="pdf-info-width" class="input-block-level form-control">
</div>
<div class="col-sm-6">
<label for="pdf-info-height">{% trans "Height (mm)" %}</label><br>
<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>
<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 custom background" %}</span>
<input id="fileupload" type="file" name="background" accept="application/pdf">
</span>
</div>
<div class="col-sm-12 help-inline">
<p>
{% blocktrans trimmed %}
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.
{% endblocktrans %}
</p>
</div>
<div class="col-sm-12">
<p>
<a class="btn btn-default background-download-button" href="{{ pdf }}" target="_blank">
<i class="fa fa-download"></i>
<span>{% trans "Download current background" %}</span>
</a>
</p>
</div>
</div>
<div class="row control-group pdf-info">
<hr/>
<div class="col-sm-12">
<label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
<select class="form-control" id="pdf-info-locale">
<option value="">{% trans "Order locale" %}</option>
{% for l in locales %}
<option value="{{ l.0 }}">{{ l.1 }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row control-group poweredby">
<div class="col-sm-12">
<label for="toolbox-poweredby-style">{% trans "Style" %}</label><br>
<select class="input-block-level form-control" id="toolbox-poweredby-style">
<option value="dark">{% trans "Dark" %}</option>
<option value="white">{% trans "Light" %}</option>
</select>
</div>
</div>
<div class="row control-group imagecontent">
<div class="col-sm-12">
<label for="toolbox-imagecontent">{% trans "Image content" %}</label><br>
<select class="input-block-level form-control" id="toolbox-imagecontent">
<option value="">{% trans "Empty" %}</option>
{% for varname, var in images.items %}
<option value="{{ varname }}">{{ var.label }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row control-group text textcontent">
<div class="col-sm-12">
<label for="toolbox-content">{% trans "Content" %}</label><br>
<select class="input-block-level form-control" id="toolbox-content">
{% for varname, var in variables.items %}
{% if not var.hidden %}
<option data-sample="{{ var.editor_sample }}" {% if var.migrate_from %}data-old-value="{{ var.migrate_from }}"{% endif %} value="{{ varname }}">{{ var.label }}</option>
{% endif %}
{% endfor %}
{% for p in request.organizer.meta_properties.all %}
<option value="meta:{{ p.name }}">
{% trans "Event attribute:" %} {{ p.name }}
</option>
{% endfor %}
{% for p in request.event.item_meta_properties.all %}
<option value="itemmeta:{{ p.name }}">
{% trans "Item attribute:" %} {{ p.name }}
</option>
{% endfor %}
<option value="other_i18n">{% trans "Other… (multilingual)" %}</option>
<option value="other">{% trans "Other…" %}</option>
</select>
<textarea type="text" value="" class="input-block-level form-control"
id="toolbox-content-other"></textarea>
<div class="i18n-form-group" id="toolbox-content-other-i18n">
{% for l in request.event.settings.locales %}
<textarea id="toolbox-content-other-{{ l }}" rows="3" class="input-block-level form-control" title="{{ l }}" lang="{{ l }}"></textarea>
{% endfor %}
</div>
<p class="help-block" id="toolbox-content-other-help">
<a href="?placeholders=true" target="_blank">{% trans "Show available placeholders" %}</a>
</p>
</div>
</div>
<div class="row control-group position">
<hr/>
<div class="col-sm-6">
<label for="toolbox-position-x">{% trans "x (mm)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.01"
id="toolbox-position-x">
</div>
<div class="col-sm-6">
<label for="toolbox-position-y">{% trans "y (mm)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.01"
id="toolbox-position-y">
</div>
</div>
<div class="row control-group rectsize">
<div class="col-sm-6">
<label for="toolbox-width">{% trans "Width (mm)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.01"
id="toolbox-width">
</div>
<div class="col-sm-6">
<label for="toolbox-height">{% trans "Height (mm)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.01"
id="toolbox-height">
</div>
</div>
<div class="row control-group squaresize poweredby">
<div class="col-sm-12">
<label for="toolbox-squaresize">{% trans "Size (mm)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.01"
id="toolbox-squaresize">
</div>
</div>
<div class="row control-group squaresize">
<div class="col-sm-12">
<div class="checkbox">
<label class="">
<input type="checkbox" value="off" class="checkbox"
id="toolbox-qrwhitespace">
{% trans "Render without whitespace" %}
</label><br>
<span class="text-muted">{% trans "Required for consistent size across platforms. Supported on Android starting with pretixPRINT 2.3.3 and on Desktop with pretixSCAN 1.9.3." %}</span>
</div>
</div>
</div>
<div class="row control-group text">
<div class="col-sm-6 textarea">
<label for="toolbox-textwidth">{% trans "Width (mm)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.01"
id="toolbox-textwidth">
</div>
<div class="col-sm-6">
<label for="toolbox-textrotation">{% trans "Rotation (°)" %}</label><br>
<input type="number" value="0" class="input-block-level form-control" step="0.1"
id="toolbox-textrotation">
</div>
</div>
<div class="row control-group text">
<hr/>
<div class="col-sm-12">
<label for="toolbox-fontfamily">{% trans "Font" %}</label><br>
<select class="input-block-level form-control" id="toolbox-fontfamily">
<option>Open Sans</option>
{% for family in fonts.keys %}
<option>{{ family }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row control-group text">
<div class="col-sm-6">
<label for="toolbox-fontsize">{% trans "Font size (pt)" %}</label><br>
<input type="number" value="13" class="input-block-level form-control" step="0.1"
id="toolbox-fontsize">
</div>
<div class="col-sm-6">
<label for="toolbox-lineheight">{% trans "Line height" %}</label><br>
<input type="number" value="1" class="input-block-level form-control" step="0.1"
id="toolbox-lineheight">
</div>
</div>
<div class="row control-group text">
<div class="col-sm-6">
<label for="toolbox-col">{% trans "Text color" %}</label><br>
<div class="input-group">
<input type="text" value="#000000" class="input-block-level form-control colorpickerfield"
id="toolbox-col">
<span class="input-group-addon contrast-icon">
</span>
</div>
</div>
<div class="col-sm-6">
<label>&nbsp;</label><br>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group text" role="group">
<button type="button" class="btn btn-default toggling" data-action="bold">
<span class="fa fa-bold"></span>
</button>
</div>
<div class="btn-group text" role="group">
<button type="button" class="btn btn-default toggling" data-action="italic">
<span class="fa fa-italic"></span>
</button>
</div>
<div class="btn-group textarea" role="group">
<button type="button" class="btn btn-default toggling" data-action="downward"
data-toggle="tooltip" title="{% trans "Flow multiple lines downward from specified position" %}">
<span class="fa fa-caret-square-o-down"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row control-group text">
<div class="col-sm-6">
<div class="btn-group btn-group-justified" id="toolbox-align">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default option toggling" data-action="left">
<span class="fa fa-align-left"></span>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default option toggling" data-action="center">
<span class="fa fa-align-center"></span>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default option toggling" data-action="right">
<span class="fa fa-align-right"></span>
</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="textcontainer">
<div class="btn-group btn-group-justified" id="toolbox-verticalalign">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default option toggling" data-action="top">
<span class="fa fa-toggle-down"></span>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default option toggling" data-action="middle">
<span class="fa fa-sort"></span>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default option toggling" data-action="bottom">
<span class="fa fa-toggle-up"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row control-group textcontainer">
<div class="col-sm-6">
<div class="btn-group btn-group-justified">
<div class="btn-group textcontainer" role="group">
<button type="button" class="btn btn-default toggling" data-action="autoresize"
data-toggle="tooltip" title="{% trans "Automatically reduce font size to fit content" %}">
<span class="fa fa-text-height"></span>
</button>
</div>
<div class="btn-group textcontainer" role="group">
<button type="button" class="btn btn-default toggling" data-action="splitlongwords"
data-toggle="tooltip" title="{% trans "Allow long words to be split (preview is not accurate)" %}">
<span class="fa fa-scissors fa-rotate-90"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="editor-toolbox-text panel panel-default">
<div class="panel-heading">
{% trans "Add a new object" %}
</div>
<div class="panel-body add-buttons">
<button class="btn btn-default btn-block" id="editor-add-textcontainer" disabled>
<span class="fa fa-font"></span>
{% trans "Text box" %}
</button>
<button class="btn btn-default btn-block" id="editor-add-text" disabled>
<span class="fa fa-font"></span>
{% trans "Text (deprecated)" %}
</button>
<button class="btn btn-default btn-block" id="editor-add-qrcode" data-content="secret" disabled>
<span class="fa fa-qrcode"></span>
{% trans "QR code for Check-In" %}
</button>
<button class="btn btn-default btn-block" id="editor-add-qrcode-lead"
data-content="pseudonymization_id"
disabled>
<span class="fa fa-qrcode"></span>
{% trans "QR code for Lead Scanning" %}
</button>
<button class="btn btn-default btn-block" id="editor-add-qrcode-other"
data-content="secret"
disabled>
<span class="fa fa-qrcode"></span>
{% trans "Other QR code" %}
</button>
<button class="btn btn-default btn-block" id="editor-add-poweredby"
data-content="dark"
disabled>
<span class="fa fa-image"></span>
{% trans "pretix Logo" %}
</button>
<button class="btn btn-default btn-block" id="editor-add-image" disabled
data-toggle="tooltip" title="{% trans "You can use this to add user-uploaded pictures from questions or pictures generated by plugins. If you want to embed a logo or other images, use a custom background instead." %}">
<span class="fa fa-image"></span>
{% trans "Dynamic image" %}
</button>
</div>
</div>
<form method="post" action="" id="preview-form" target="_blank">
<div class="form-group submit-group">
{% csrf_token %}
<input type="hidden" value="" name="data">
<input type="hidden" value="" name="background">
<input type="hidden" value="true" name="preview">
<button type="submit" class="btn btn-default btn-lg" id="editor-preview">
{% trans "Preview" %}
</button>
<button type="submit" class="btn btn-primary btn-save" id="editor-save">
<span class="fa fa-fw fa-save"></span>
{% trans "Save" %}
</button>
</div>
</form>
<p>&nbsp;</p>
<div class="alert alert-info" id="version-notice">
{% blocktrans trimmed with print_version="2.18" scan_version="1.22" %}
This layout uses new features. If you print from your device, make sure you use pretixPRINT version
{{ print_version }} (or newer) or pretixSCAN Desktop version {{ scan_version }} (or newer).
{% endblocktrans %}
</div>
</div>
</div>
<script type="text/plain" id="schema-url">{% static "schema/pdf-layout.schema.json" %}</script>
<script type="text/javascript" src="{% static "pdfjs/pdf.js" %}"></script>
<script type="text/javascript" src="{% static "ajv/ajv2020.bundle.min.js" %}"></script>
<script type="text/javascript" src="{% static "fabric/fabric.min.js" %}"></script>
<script type="text/javascript" src="{% static "pretixcontrol/js/ui/editor.js" %}"></script>
<img src="{% static 'pretixpresale/pdf/powered_by_pretix_dark.png' %}" id="poweredby-dark" class="sr-only">
<img src="{% static 'pretixpresale/pdf/powered_by_pretix_white.png' %}" id="poweredby-white" class="sr-only">
{% for family, styles in fonts.items %}
{% for style, formats in styles.items %}
{% if "sample" not in style %}
<span class="preload-font" data-family="{{ family }}" data-style="{{ style }}">
giItT1WQy@!-/#
{% if "sample" in styles %}{{ styles.sample }}{% endif %}
</span>
{% endif %}
{% endfor %}
{% endfor %}
{% endblock %}