rophako/rophako/modules/photo/templates/photos/crop.html
Noah Petherbridge 8a2d6a7c04 Refactor modules into a plugin-based system
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).
2014-07-23 14:21:53 -07:00

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 %}