forked from CGM_Public/pretix_original
402 lines
22 KiB
HTML
402 lines
22 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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
</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>
|
|
<div class="row control-group pdf-info">
|
|
<div class="col-sm-12">
|
|
<label>{% trans "Prefered 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 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">
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
The final QR code will be slightly smaller because some whitespace is required
|
|
for proper scanning.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</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> </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>
|
|
</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" 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-12">
|
|
<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>
|
|
<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 text">
|
|
<div class="col-sm-12">
|
|
<label>{% trans "Text content" %}</label><br>
|
|
<select class="input-block-level form-control" id="toolbox-content">
|
|
{% for varname, var in variables.items %}
|
|
<option data-sample="{{ var.editor_sample }}" value="{{ varname }}">{{ var.label }}</option>
|
|
{% endfor %}
|
|
{% for p in request.organizer.meta_properties.all %}
|
|
<option value="meta:{{ p.name }}">
|
|
{% trans "Event attribute:" %} {{ p.name }}
|
|
</option>
|
|
{% endfor %}
|
|
<option value="other">{% trans "Other…" %}</option>
|
|
</select>
|
|
<textarea type="text" value="" class="input-block-level form-control"
|
|
id="toolbox-content-other"></textarea>
|
|
</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-poweredby"
|
|
data-content="dark"
|
|
disabled>
|
|
<span class="fa fa-image"></span>
|
|
{% trans "pretix Logo" %}
|
|
</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">
|
|
{% trans "Save" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="{% static "pdfjs/pdf.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 %}
|
|
<span class="preload-font" data-family="{{ family }}" data-style="{{ style }}">
|
|
giItT1WQy@!-/#
|
|
</span>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|