Coverage for ivatar/ivataraccount/templates/crop_photo.html: 100%

1{% extends 'base.html' %}  

2{% load i18n %} 

3{% load static %} 

4  

5{% block title %}{% trans 'Crop photo' %}{% endblock title %} 

6  

7{% block header %}<link rel="prefetch" href="{% static 'css/jcrop.css' %}">{% endblock header %} 

8  

9{% block content %} 

10<style> 

11</style> 

12<h1>{% trans 'Crop photo' %}</h1> 

13  

14<p>{% trans 'Draw a square around the portion of the image you want to use:' %}</p> 

15  

16<form action="{% url 'crop_photo' photo.pk %}" method="post">{% csrf_token %} 

17 {% if email %}<input type="hidden" name="email" value="{{email}}">{% endif %} 

18 {% if openid %}<input type="hidden" name="openid" value="{{openid}}">{% endif %} 

19<div class="form-group"> 

20 <img src='{% url 'raw_image' photo.pk %}' id='cropbox'> 

21</div> 

22 <input type='hidden' id='x' name='x' value='0'/> 

23 <input type='hidden' id='y' name='y' value='0'/> 

24 <input type='hidden' id='w' name='w' value='0'/> 

25 <input type='hidden' id='h' name='h' value='0'/> 

26<div class="form-group"> 

27 <button type="submit" class="button" onsubmit="return checkCoords();">{% trans 'Crop' %}</button> 

28 &nbsp; 

29 <a href="{% url 'profile' %}" class="button" title="{% trans 'May lead to wrong aspect ratio!' %}">{% trans 'Skip cropping' %}</a> 

30</div> 

31</form> 

32  

33<script src="{% static '/js/jcrop.js' %}"></script> 

34<script type="text/javascript"> 

35function updateCoords(c) { 

36 $('#x').val(c.x); 

37 $('#y').val(c.y); 

38 $('#w').val(c.w); 

39 $('#h').val(c.h); 

40}; 

41  

42function checkCoords() { 

43 if (parseInt($('#w').val())) return true; 

44 alert('Please select a crop region then press submit.'); 

45 return false; 

46}; 

47</script> 

48<script type="text/javascript"> 

49 /// TODO: This needs to be reworked! 

50 /// Should be some reasonable function of distance of the image to the 

51 /// left and right screen border or so. 

52 var windowwidth = $(window).width(); 

53 var usewidth = windowwidth - 60; 

54 if(windowwidth < 400) { 

55 usewidth = windowwidth - 60; 

56 } 

57 if(windowwidth > 800) { 

58 usewidth = windowwidth - 100; 

59 } 

60 if(windowwidth > 1200) { 

61 usewidth = windowwidth - 400; 

62 } 

63  

64 jQuery(function($){ 

65 $('#cropbox').Jcrop({ 

66 onSelect: updateCoords, 

67 bgOpacity: .2, 

68 bgColor: 'transparent', 

69 boxWidth: usewidth, 

70 aspectRatio: 80 / 80, 

71 }); 

72 }); 

73</script> 

74<div style="height:40px"></div> 

75{% endblock content %}