135 lines
6.5 KiB
HTML
135 lines
6.5 KiB
HTML
{% extends 'layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/filepond_cdn_css.html" %}
|
|
{% include "cdn_through_html/quill_cdn_css.html" %}
|
|
{% include "cdn_through_html/tagify_cdn_css.html" %}
|
|
{{form.media}}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<h3>{{operation}} {{page_name}}</h3>
|
|
</div>
|
|
<div class="col text-end">
|
|
<button class="btn btn-dark mb-2 me-4" onclick="history.back()">
|
|
<i class="fa fa-arrow-left"></i>
|
|
Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
|
|
<form method="POST" novalidate>
|
|
{% csrf_token %}
|
|
{% include 'includes/dynamic_template_form.html' with form=form %}
|
|
<div class="mt-4 mb-0">
|
|
<div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
|
|
</div>
|
|
{% comment %} <div class="mb-3">
|
|
<label for="title" class="form-label">Title</label>
|
|
<input type="text" class="form-control" id="title" aria-describedby="title">
|
|
<div id="emailHelp" class="form-text" style="color: grey;">We'll never share your email with anyone else.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Description</label>
|
|
<div id="description"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="product-images">Image</label>
|
|
<div class="multiple-file-upload">
|
|
<div class="filepond--root filepond file-upload-multiple filepond--hopper" id="images" data-style-button-remove-item-position="left" data-style-button-process-item-position="right" data-style-load-indicator-position="right" data-style-progress-indicator-position="right" data-style-button-remove-item-align="false" style="height: 57px;"><input class="filepond--browser" type="file" id="filepond--browser-feeq8o6dj" name="filepond" aria-controls="filepond--assistant-feeq8o6dj" aria-labelledby="filepond--drop-label-feeq8o6dj" multiple=""><a class="filepond--credits" aria-hidden="true" href="https://pqina.nl/" target="_blank" rel="noopener noreferrer" style="transform: translateY(49px);">Powered by PQINA</a><div class="filepond--drop-label" style="transform: translate3d(0px, 0px, 0px); opacity: 1;"><label for="filepond--browser-feeq8o6dj" id="filepond--drop-label-feeq8o6dj" aria-hidden="true">Drag & Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span></label></div><div class="filepond--list-scroller" style="transform: translate3d(0px, 41px, 0px);"><ul class="filepond--list" role="list"></ul></div><div class="filepond--panel filepond--panel-root" data-scalable="true"><div class="filepond--panel-top filepond--panel-root"></div><div class="filepond--panel-center filepond--panel-root" style="transform: translate3d(0px, 8px, 0px) scale3d(1, 0.41, 1);"></div><div class="filepond--panel-bottom filepond--panel-root" style="transform: translate3d(0px, 49px, 0px);"></div></div><span class="filepond--assistant" id="filepond--assistant-feeq8o6dj" role="status" aria-live="polite" aria-relevant="additions"></span><div class="filepond--drip"></div><fieldset class="filepond--data"></fieldset></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="tags">Tags</label>
|
|
<input id="tags" class="tags" value="">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button> {% endcomment %}
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/filepond_cdn_js.html" %}
|
|
{% include "cdn_through_html/quill_cdn_js.html" %}
|
|
{% include "cdn_through_html/tagify_cdn_js.html" %}
|
|
|
|
|
|
<script>
|
|
/**
|
|
* ===================================
|
|
* Blog Description Editor
|
|
* ===================================
|
|
*/
|
|
var quill = new Quill('#description', {
|
|
modules: {
|
|
toolbar: [
|
|
[{ header: [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['image', 'code-block']
|
|
]
|
|
},
|
|
placeholder: 'Write description...',
|
|
theme: 'snow' // or 'bubble'
|
|
});
|
|
|
|
|
|
/**
|
|
* ====================
|
|
* File Pond
|
|
* ====================
|
|
*/
|
|
|
|
// We want to preview images, so we register
|
|
// the Image Preview plugin, We also register
|
|
// exif orientation (to correct mobile image
|
|
// orientation) and size validation, to prevent
|
|
// large files from being added
|
|
FilePond.registerPlugin(
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginImageExifOrientation,
|
|
FilePondPluginFileValidateSize,
|
|
// FilePondPluginImageEdit
|
|
);
|
|
|
|
// Select the file input and use
|
|
// create() to turn it into a pond
|
|
var ecommerce = FilePond.create(document.querySelector('.file-upload-multiple'));
|
|
|
|
|
|
/**
|
|
* =====================
|
|
* Blog Tags
|
|
* =====================
|
|
*/
|
|
// The DOM element you wish to replace with Tagify
|
|
var input = document.querySelector('#id_tags');
|
|
|
|
// initialize Tagify on the above input node reference
|
|
new Tagify(input,{
|
|
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(', ')
|
|
})
|
|
|
|
</script>
|
|
{% endblock %} |