galette/templates/default/elements/js/photo_dnd.js.twig

   1 {% if member.id %}
   2     //Photo dnd
   3     // Check if window.FileReader exists to make
   4     // sure the browser supports file uploads
   5     if ( typeof(window.FileReader) ) {
   6         var _dz = $('#photo_adh');
   7
   8         if (_dz[0]) {
   9             // Add a nice drag effect
  10             _dz[0].ondragover = function() {
  11                 _dz.css({ opacity: 0.4 });
  12                 _dz.transition('pulsating');
  13                 return false;
  14             };
  15
  16             // Remove the drag effect when leaving the dropping zone
  17             _dz[0].ondragleave = function() {
  18                 _dz.css({ opacity: 1 });
  19                 _dz.transition('stop all');
  20                 return false;
  21             };
  22
  23             // The drop event handles the file sending
  24             _dz[0].ondrop = function(event) {
  25                 // Stop the browser from opening the file in the window
  26                 event.preventDefault();
  27                 _dz.css({ opacity: 1 });
  28                 _dz.transition('stop all');
  29                 $('.message').remove();
  30
  31                 var file = event.dataTransfer.files[0];
  32
  33     {% if preferences.pref_force_picture_ratio == 1 %}
  34                 {% set system_ratio = (preferences.pref_member_picture_ratio == 'square_ratio') ? _T("Square (1:1)") : (preferences.pref_member_picture_ratio == 'portrait_ratio') ? _T("Portrait (3:4)") : (preferences.pref_member_picture_ratio == 'landscape_ratio') ? _T("Landscape (4:3)") %}
  35
  36                 var cropping = { ratio: '{{ preferences.pref_member_picture_ratio }}' };
  37                 var focus_select = '<div class="ui basic horizontally fitted segment form"><div class="field">';
  38                     focus_select += '<select name="crop_focus_ajax" id="crop_focus_ajax" class="ui dropdown nochosen">';
  39                     focus_select += '<option value="center">{{ _T("Center") }}</option>';
  40                     focus_select += '<option value="top">{{ _T("Top") }}</option>';
  41                     focus_select += '<option value="bottom">{{ _T("Bottom") }}</option>';
  42                     focus_select += '<option value="left">{{ _T("Left") }}</option>';
  43                     focus_select += '<option value="right">{{ _T("Right") }}</option>';
  44                     focus_select += '</select>';
  45                     focus_select += '</div></div>';
  46
  47                 {% include "elements/js/modal.js.twig" with {
  48                     modal_title_twig: _T("Cropping focus")|e("js"),
  49                     modal_content_twig: _T("Choose the area of the original image to preserve after cropping to the final ratio defined in the settings : %ratio")|replace({"%ratio": system_ratio})|e('js'),
  50                     modal_class: "tiny",
  51                     modal_other_options: {
  52                         closable: false
  53                     },
  54                     modal_onshow: "$(this).find('.content').append(focus_select);$('#crop_focus_ajax').dropdown();",
  55                     modal_onapprove: "cropping.focus=$(this).find('#crop_focus_ajax').val();_fileLoad(file, cropping);"
  56                 } %}
  57     {% else %}
  58                 _fileLoad(file);
  59     {% endif %}
  60             }
  61
  62             var _fileLoad = function(file, cropping_settings) {
  63                 var reader = new FileReader();
  64                 reader.readAsDataURL(file);
  65
  66                 var cropping = false;
  67                 if (cropping_settings) {
  68                     var cropping = cropping_settings;
  69                 }
  70
  71                 reader.onload = function(evt) {
  72                     $.ajax({
  73                             type: 'POST',
  74                             dataType: 'json',
  75                             url : '{{ url_for("photoDnd") }}',
  76                             data: {
  77                                 member_id: {{ member.id }},
  78                                 filename: file.name,
  79                                 filesize: file.size,
  80                                 file: evt.target.result,
  81                                 cropping: cropping
  82                             },
  83                             {% include "elements/js/loader.js.twig" with {
  84                                 selector: '#member_card'
  85                             } %},
  86                             success: function(res){
  87                                 window.location.reload(true);
  88                             },
  89                         error: function() {
  90                             {% include "elements/js/modal.js.twig" with {
  91                                 modal_title_twig: _T("An error occurred sending photo :(")|e("js"),
  92                                 modal_without_content: true,
  93                                 modal_class: "tiny",
  94                                 modal_deny_only: true,
  95                                 modal_cancel_text: _T("Close")|e("js"),
  96                                 modal_classname: "redalert",
  97                             } %}
  98                         }
  99                     });
 100                 }
 101             }
 102         }
 103     }
 104 {% endif %}