avatar_crop.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. {% extends "cranefly/usercp/layout.html" %}
  2. {% import "_forms.html" as form_theme with context %}
  3. {% import "cranefly/macros.html" as macros with context %}
  4. {% block title %}{{ macros.page_title(title=_('Crop Avatar')) }}{% endblock %}
  5. {% block action %}
  6. <div class="form-container usercp-avatar-crop">
  7. <form action="{% if after_upload %}{% url 'usercp_avatar_upload_crop' %}{% else %}{% url 'usercp_avatar_crop' %}{% endif %}" method="post">
  8. <div class="form-header">
  9. <div class="avatar-crop-preview">
  10. <img src="{{ MEDIA_URL }}{{ source }}" id="preview" alt="{% trans %}Avatar Preview{% endtrans %}" class="jcrop-preview" />
  11. </div>
  12. <h1>{% trans %}Crop Avatar{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</small></h1>
  13. <a href="{% url 'usercp_avatar' %}" class="btn btn-inverse pull-right">{% trans %}Cancel{% endtrans %}</a>
  14. <button name="save" type="submit" class="btn btn-danger pull-right">{% trans %}Crop Avatar{% endtrans %}</button>
  15. </div>
  16. {% if message %}
  17. <div class="messages-list">
  18. {{ macros.draw_message(message) }}
  19. </div>
  20. {% endif %}
  21. <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
  22. <input type="hidden" id="crop-b" name="crop_b" value="">
  23. <input type="hidden" id="crop-w" name="crop_w" value="">
  24. <input type="hidden" id="crop-x" name="crop_x" value="">
  25. <input type="hidden" id="crop-y" name="crop_y" value="">
  26. <div class="avatar-crop-target"><img src="{{ MEDIA_URL }}{{ source }}" id="target" alt="{% trans %}Uploaded Image{% endtrans %}"></div>
  27. </form>
  28. </div>
  29. {% endblock %}
  30. {% block javascripts %}
  31. {{ super() }}
  32. <script src="{{ STATIC_URL }}cranefly/js/jquery.Jcrop.min.js"></script>
  33. <script type="text/javascript">
  34. $(function($){
  35. // Create variables (in this scope) to hold the API and image size
  36. var jcrop_api, boundx, boundy;
  37. var crop_b = $('#crop-b');
  38. var crop_w = $('#crop-w');
  39. var crop_x = $('#crop-x');
  40. var crop_y = $('#crop-y');
  41. var afx = $('.avatar-crop-preview').width() / {{ avatar_size }};
  42. $('#target').Jcrop({
  43. onChange: updatePreview,
  44. onSelect: updatePreview,
  45. aspectRatio: 1,
  46. minSize: [50, 50],
  47. setSelect: [ 0, 0, {{ avatar_size }}, {{ avatar_size }} ],
  48. },function(){
  49. // Use the API to get the real image size
  50. var bounds = this.getBounds();
  51. boundx = bounds[0];
  52. boundy = bounds[1];
  53. $('#crop-b').val(boundx);
  54. // Store the API in the jcrop_api variable
  55. jcrop_api = this;
  56. });
  57. function updatePreview(c)
  58. {
  59. if (parseInt(c.w) > 0)
  60. {
  61. var rx = {{ avatar_size }} / c.w;
  62. var ry = {{ avatar_size }} / c.h;
  63. $(crop_w).val(c.w);
  64. $(crop_x).val(c.x);
  65. $(crop_y).val(c.y);
  66. $('#preview').css({
  67. width: Math.round(rx * boundx * afx) + 'px',
  68. height: Math.round(ry * boundy * afx) + 'px',
  69. marginLeft: '-' + Math.round(rx * c.x * afx) + 'px',
  70. marginTop: '-' + Math.round(ry * c.y * afx) + 'px'
  71. });
  72. }
  73. };
  74. });
  75. </script>
  76. {% endblock %}