Noah Petherbridge
8a2d6a7c04
All modules are now plugins. The config.py calls load_plugin for each plugin it needs (some plugins may load others automatically). Also each plugin keeps its own template folder which gets added to the template search path, so i.e. if the photo plugin is unloaded completely, the URL endpoints won't work either (with the old system, since the HTML templates still existed in the default root the endpoints would still serve pages, just without any Python logic behind them).
107 satır
3.6 KiB
HTML
107 satır
3.6 KiB
HTML
{% extends "layout.html" %}
|
|
{% block title %}Crop Photo{% endblock %}
|
|
{% block content %}
|
|
|
|
<h1>Crop Photo</h1>
|
|
|
|
All versions of your photo except the largest one are cropped into a square
|
|
shape. You can use this page to modify the region of the photo you want to
|
|
crop.<p>
|
|
|
|
<table border="0" cellspacing="4" cellpadding="2">
|
|
<tr>
|
|
<td align="center" valign="middle">
|
|
<img src="{{ app['photo_url'] }}/{{ preview }}" id="cropbox">
|
|
</td>
|
|
<td align="center" valign="top">
|
|
<strong>Preview:</strong><br>
|
|
<div style="width: 100px; height: 100px; overflow: hidden">
|
|
<img src="{{ app['photo_url'] }}/{{ preview }}" id="preview" style="max-width: none">
|
|
</div>
|
|
<p>
|
|
|
|
<form name="crop" action="{{ url_for('photo.crop', photo=photo) }}" method="POST">
|
|
<input type="hidden" name="token" value="{{ csrf_token() }}">
|
|
<input type="hidden" name="x" id="x" value="0">
|
|
<input type="hidden" name="y" id="y" value="0">
|
|
<input type="hidden" name="length" id="length" value="0">
|
|
|
|
<button type="submit">Crop Photo!</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/js/jquery.Jcrop.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/css/jquery.Jcrop.css">
|
|
<script>
|
|
$(document).ready(function() {
|
|
var $cropbox = $("#cropbox"),
|
|
$preview = $("#preview"),
|
|
$x = $("#x"),
|
|
$y = $("#y"),
|
|
$length = $("#length");
|
|
|
|
// Find the shortest side.
|
|
var len;
|
|
if ($cropbox.width() > $cropbox.height()) {
|
|
len = $cropbox.height();
|
|
}
|
|
else {
|
|
len = $cropbox.width();
|
|
}
|
|
|
|
// Jcrop handler.
|
|
var showPreview = function(coords) {
|
|
if (parseInt(coords.w) > 0) {
|
|
var rx = 100 / coords.w;
|
|
var ry = 100 / coords.h;
|
|
var ht = $cropbox.height();
|
|
var wt = $cropbox.width();
|
|
|
|
// Make the coords into percentages, so it works on mobile.
|
|
|
|
// Get the true dimensions of the image from PIL.
|
|
var trueW = {{ true_width }};
|
|
var trueH = {{ true_height }};
|
|
|
|
// The actual (possibly scaled) image shown on the page is hereby called
|
|
// the "display image"... turn our "display coords" into percentages
|
|
// across the image.
|
|
var percentX = coords.x / wt;
|
|
var percentY = coords.y / ht;
|
|
var percentLen = coords.w / wt;
|
|
|
|
// Now get our true coords by multiplying those percentages against the
|
|
// true dimensions of the image from PIL.
|
|
var trueX = trueW * percentX;
|
|
var trueY = trueH * percentY;
|
|
var trueLen = trueW * percentLen;
|
|
|
|
// Update the preview.
|
|
$preview.css({
|
|
width: Math.round(rx * wt) + "px",
|
|
height: Math.round(ry * ht) + "px",
|
|
marginLeft: "-" + Math.round(rx * coords.x) + "px",
|
|
marginTop: "-" + Math.round(ry * coords.y) + "px"
|
|
})
|
|
|
|
// Update the form.
|
|
$x.val(parseInt(trueX));
|
|
$y.val(parseInt(trueY));
|
|
$length.val(parseInt(trueLen));
|
|
}
|
|
}
|
|
|
|
$cropbox.Jcrop({
|
|
onChange: showPreview,
|
|
onSelect: showPreview,
|
|
aspectRatio: 1,
|
|
setSelect: [ 0, 0, len, len ],
|
|
})
|
|
});
|
|
</script>
|
|
{% endblock %} |