mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 09:33:54 +01:00
styling and responsive solution for focal point chooser
This commit is contained in:
Dave Cranwell
parent
510e932ad4
commit
74a57077db
@ -24,12 +24,14 @@ legend{
|
||||
@include visuallyhidden();
|
||||
}
|
||||
|
||||
label{
|
||||
label, .label{
|
||||
text-transform:none;
|
||||
font-weight:bold;
|
||||
color:$color-grey-1;
|
||||
font-size:1.1em;
|
||||
display:block;
|
||||
padding:0 0 0.8em 0;
|
||||
margin:0;
|
||||
line-height:1.3em;
|
||||
|
||||
.checkbox &,
|
||||
|
||||
@ -29,6 +29,10 @@ h2{
|
||||
text-transform:none;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
a{
|
||||
outline:none;
|
||||
color:$color-link;
|
||||
|
||||
@ -1,48 +1,75 @@
|
||||
$(function() {
|
||||
var $chooser = $('div.focal-point-chooser');
|
||||
var $indicator = $('.current-focal-point-indicator', $chooser);
|
||||
var $image = $('img', $chooser);
|
||||
var $focalPointXField = $('input.focal_point_x');
|
||||
var $focalPointYField = $('input.focal_point_y');
|
||||
var $focalPointWidthField = $('input.focal_point_width');
|
||||
var $focalPointHeightField = $('input.focal_point_height');
|
||||
var jcropapi;
|
||||
|
||||
var originalWidth = $image.data('originalWidth');
|
||||
var originalHeight = $image.data('originalHeight');
|
||||
|
||||
var focalPointXOriginal = $chooser.data('focalPointX');
|
||||
var focalPointYOriginal = $chooser.data('focalPointY');
|
||||
var focalPointWidthOriginal = $chooser.data('focalPointWidth');
|
||||
var focalPointHeightOriginal = $chooser.data('focalPointHeight');
|
||||
|
||||
$image.Jcrop({
|
||||
trueSize: [originalWidth, originalHeight],
|
||||
function setupJcrop(image, original, focalPointOriginal, fields){
|
||||
image.Jcrop({
|
||||
trueSize: [original.width, original.height],
|
||||
onSelect: function(box) {
|
||||
var x = Math.floor((box.x + box.x2) / 2);
|
||||
var y = Math.floor((box.y + box.y2) / 2);
|
||||
var w = Math.floor(box.w);
|
||||
var h = Math.floor(box.h);
|
||||
|
||||
$focalPointXField.val(x);
|
||||
$focalPointYField.val(y);
|
||||
$focalPointWidthField.val(w);
|
||||
$focalPointHeightField.val(h);
|
||||
fields.x.val(x);
|
||||
fields.y.val(y);
|
||||
fields.width.val(w);
|
||||
fields.height.val(h);
|
||||
},
|
||||
onRelease: function() {
|
||||
$focalPointXField.val(focalPointXOriginal);
|
||||
$focalPointYField.val(focalPointYOriginal);
|
||||
$focalPointWidthField.val(focalPointWidthOriginal);
|
||||
$focalPointHeightField.val(focalPointHeightOriginal);
|
||||
fields.x.val(focalPointOriginal.x);
|
||||
fields.y.val(focalPointOriginal.y);
|
||||
fields.width.val(focalPointOriginal.width);
|
||||
fields.height.val(focalPointOriginal.height);
|
||||
},
|
||||
}, function(){
|
||||
jcropapi = this
|
||||
});
|
||||
}
|
||||
|
||||
var left = focalPointXOriginal - focalPointWidthOriginal / 2
|
||||
var top = focalPointYOriginal - focalPointHeightOriginal / 2
|
||||
var width = focalPointWidthOriginal;
|
||||
var height = focalPointHeightOriginal;
|
||||
$(function() {
|
||||
var $chooser = $('div.focal-point-chooser');
|
||||
var $indicator = $('.current-focal-point-indicator', $chooser);
|
||||
var $image = $('img', $chooser);
|
||||
|
||||
$indicator.css('left', (left * 100 / originalWidth) + '%');
|
||||
$indicator.css('top', (top * 100 / originalHeight) + '%');
|
||||
$indicator.css('width', (width * 100 / originalWidth) + '%');
|
||||
$indicator.css('height', (height * 100 / originalHeight) + '%');
|
||||
var original = {
|
||||
width: $image.data('originalWidth'),
|
||||
height: $image.data('originalHeight')
|
||||
}
|
||||
|
||||
var focalPointOriginal = {
|
||||
x: $chooser.data('focalPointX'),
|
||||
y: $chooser.data('focalPointY'),
|
||||
width: $chooser.data('focalPointWidth'),
|
||||
height: $chooser.data('focalPointHeight')
|
||||
}
|
||||
|
||||
var fields = {
|
||||
x: $('input.focal_point_x'),
|
||||
y: $('input.focal_point_y'),
|
||||
width: $('input.focal_point_width'),
|
||||
height: $('input.focal_point_height')
|
||||
}
|
||||
|
||||
var left = focalPointOriginal.x - focalPointOriginal.width / 2
|
||||
var top = focalPointOriginal.y - focalPointOriginal.height / 2
|
||||
var width = focalPointOriginal.width;
|
||||
var height = focalPointOriginal.height;
|
||||
|
||||
$indicator.css('left', (left * 100 / original.width) + '%');
|
||||
$indicator.css('top', (top * 100 / original.height) + '%');
|
||||
$indicator.css('width', (width * 100 / original.width) + '%');
|
||||
$indicator.css('height', (height * 100 / original.height) + '%');
|
||||
|
||||
var params = [$image, original, focalPointOriginal, fields];
|
||||
|
||||
setupJcrop.apply(this, params)
|
||||
|
||||
$(window).resize($.debounce(300, function(){
|
||||
// jcrop doesn't support responsive images so to cater for resizing the browser
|
||||
// we have to destroy() it, which doesn't properly do it,
|
||||
// so destory it some more, then re-apply it
|
||||
jcropapi.destroy();
|
||||
$image.removeAttr('style');
|
||||
$('.jcrop-holder').remove();
|
||||
setupJcrop.apply(this, params)
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,13 +1,22 @@
|
||||
div.focal-point-chooser {
|
||||
@import "../../wagtailadmin/static/wagtailadmin/scss/variables.scss";
|
||||
@import "../../wagtailadmin/static/wagtailadmin/scss/mixins.scss";
|
||||
|
||||
.focal-point-chooser {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.current-focal-point-indicator {
|
||||
position: absolute;
|
||||
border: 1px solid #FFF;
|
||||
opacity: 0.5;
|
||||
.current-focal-point-indicator {
|
||||
@include transition(opacity 0.2s ease);
|
||||
@include box-shadow(1px 1px 10px 0px rgba(0,0,0,1));
|
||||
position: absolute;
|
||||
border: 1px solid $color-teal;
|
||||
opacity: 0.5;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .current-focal-point-indicator{
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
@ -17,6 +17,7 @@
|
||||
{% include "wagtailadmin/shared/tag_field_js.html" %}
|
||||
|
||||
<!-- Focal point chooser -->
|
||||
<script src="{{ STATIC_URL }}wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}wagtailimages/js/vendor/jquery.Jcrop.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}wagtailimages/js/focal-point-chooser.js"></script>
|
||||
{% endblock %}
|
||||
@ -47,6 +48,8 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="col5">
|
||||
<h2 class="label">{% trans "Focal point (optional)" %}</h2>
|
||||
<p>{% trans "To define this image's most important region, drag a box over the image below." %} {% if image.focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
|
||||
<div class="focal-point-chooser"
|
||||
data-focal-point-x="{{ image.focal_point_x }}"
|
||||
data-focal-point-y="{{ image.focal_point_y }}"
|
||||
@ -58,7 +61,7 @@
|
||||
</div>
|
||||
|
||||
{% if url_generator_enabled %}
|
||||
<a href="{% url 'wagtailimages_url_generator' image.id %}" class="button bicolor icon icon-link">URL Generator</a>
|
||||
<a href="{% url 'wagtailimages_url_generator' image.id %}" class="button bicolor icon icon-link">{% trans "URL Generator" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user