forked from CGM_Public/pretix_original
492 lines
28 KiB
HTML
492 lines
28 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" %}">
|
|
{% 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> </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> </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> </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>{% 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">
|
|
<div class="col-sm-6">
|
|
<label>{% 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>{% 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">
|
|
<div class="col-sm-12">
|
|
<label>{% 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 position">
|
|
<div class="col-sm-6">
|
|
<label>{% 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>{% 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>{% 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>{% 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>{% 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">
|
|
<label>{% 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>{% 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>{% trans "Text color" %}</label><br>
|
|
<input type="text" value="#000000" class="input-block-level form-control colorpickerfield"
|
|
id="toolbox-col">
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label> </label><br>
|
|
<div class="btn-group btn-group-justified" role="group">
|
|
<div class="btn-group" 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" 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" 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>
|
|
<label> </label><br>
|
|
<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>
|
|
<div class="row control-group text">
|
|
<div class="col-sm-12">
|
|
<label>{% 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>{% 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>{% 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 poweredby">
|
|
<div class="col-sm-12">
|
|
<label>{% 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>{% 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>{% 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>
|
|
</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-text" disabled>
|
|
<span class="fa fa-font"></span>
|
|
{% trans "Text" %}
|
|
</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>
|
|
</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 %}
|
|
|