cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic pdf embedding

Browse Source
This commit is contained in:
vabene1111
2020-02-19 00:08:32 +01:00
parent 42e09fcae9
commit fc1cc70870
2 changed files with 86 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.idea/jsLibraryMappings.xml generated
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptLibraryMappings"> <component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1}" /> <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1, pdf, pretty-checkbox}" />
</component> </component>
</project> </project>

110
cookbook/templates/recipe_view.html
View File

@ -20,8 +20,10 @@
<div class="col col-md-3 d-print-none" style="text-align: right"> <div class="col col-md-3 d-print-none" style="text-align: right">
<button class="btn btn-success" onclick="$('#bookmarkModal').modal({'show':true})"><i <button class="btn btn-success" onclick="$('#bookmarkModal').modal({'show':true})"><i
class="fas fa-bookmark"></i></button> class="fas fa-bookmark"></i></button>
<a class="btn btn-warning" href="{% url 'view_shopping' %}?r={{ recipe.pk }}"><i {% if ingredients %}
class="fas fa-shopping-cart"></i></a> <a class="btn btn-warning" href="{% url 'view_shopping' %}?r={{ recipe.pk }}"><i
class="fas fa-shopping-cart"></i></a>
{% endif %}
<a class="btn btn-info" href="{% url 'new_plan' %}?recipe={{ recipe.pk }}"><i <a class="btn btn-info" href="{% url 'new_plan' %}?recipe={{ recipe.pk }}"><i
class="fas fa-calendar"></i></a> class="fas fa-calendar"></i></a>
</div> </div>
@ -130,30 +132,88 @@
{% if recipe.storage %} {% if recipe.storage %}
<a href='#' onClick='openRecipe({{ recipe.id }}, true)' class="d-print-none">{% trans 'View external recipe' %} <div class="row">
<i {% if recipe.internal %}
class="fas fa-external-link-alt"></i></a> <a href='#' onClick='openRecipe({{ recipe.id }}, true)'
{% endif %} class="d-print-none">{% trans 'View external recipe' %} <i class="fas fa-external-link-alt"></i></a>
{% else %}
{% if not recipe.internal %} <canvas id="id_pdf_canvas" class="border"></canvas>
<br/>
<br/> <br/>
<br/> <br/>
<div class="card border-info"> <br/>
<div class="card-body text-info"> <div class="card border-info">
<h5 class="card-title">{% trans 'External recipe' %}</h5> <div class="card-body text-info">
<p class="card-text"> <h5 class="card-title">{% trans 'External recipe' %}</h5>
{% blocktrans %} <p class="card-text">
This is an external recipe, which means you can only view it by opening the link above. {% blocktrans %}
You can convert this recipe to a fancy recipe by pressing the convert button. The original file This is an external recipe, which means you can only view it by opening the link above.
will still be accessible. You can convert this recipe to a fancy recipe by pressing the convert button. The
{% endblocktrans %}. original
<br/> file
<br/> will still be accessible.
<a href="{% url 'edit_convert_recipe' recipe.pk %}" {% endblocktrans %}.
class="card-link btn btn-info">{% trans 'Convert now!' %}</a> <br/>
</p> <br/>
</div> <a href="{% url 'edit_convert_recipe' recipe.pk %}"
class="card-link btn btn-info">{% trans 'Convert now!' %}</a>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.min.js"
integrity="sha256-J4Z8Fhj2MITUakMQatkqOVdtqodUlwHtQ/ey6fSsudE="
crossorigin="anonymous"></script>
<script type="text/javascript">
var url = "{% url 'api_get_external_file_link' recipe_id=12345 %}".replace(/12345/, {{ recipe.id }});
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
var url = this.responseText;
var loadingTask = pdfjsLib.getDocument(url.replace('www.dropbox.', 'dl.dropboxusercontent.'));
loadingTask.promise.then(function (pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: scale*0.8});
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('id_pdf_canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
}
};
xhttp.open("GET", url, true);
xhttp.send();
</script>
{% endif %}
</div> </div>
{% endif %} {% endif %}