{#
/**
 * Copyright © 2003-2024 The Galette Team
 *
 * This file is part of Galette (https://galette.eu).
 *
 * Galette is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Galette is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Galette. If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% if member.id %}
    //Photo dnd
    // Check if window.FileReader exists to make
    // sure the browser supports file uploads
    if ( typeof(window.FileReader) ) {
        var _dz = $('#photo_adh');

        if (_dz[0]) {
            // Add a nice drag effect
            _dz[0].ondragover = function() {
                _dz.css({ opacity: 0.4 });
                _dz.transition('pulsating');
                return false;
            };

            // Remove the drag effect when leaving the dropping zone
            _dz[0].ondragleave = function() {
                _dz.css({ opacity: 1 });
                _dz.transition('stop all');
                return false;
            };

            // The drop event handles the file sending
            _dz[0].ondrop = function(event) {
                // Stop the browser from opening the file in the window
                event.preventDefault();
                _dz.css({ opacity: 1 });
                _dz.transition('stop all');
                $('.message').remove();

                var file = event.dataTransfer.files[0];

    {% if preferences.pref_force_picture_ratio == 1 %}
                {% 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)") %}

                var cropping = { ratio: '{{ preferences.pref_member_picture_ratio }}' };
                var focus_select = '<div class="ui basic horizontally fitted segment form"><div class="field">';
                    focus_select += '<select name="crop_focus_ajax" id="crop_focus_ajax" class="ui dropdown">';
                    focus_select += '<option value="center">{{ _T("Center") }}</option>';
                    focus_select += '<option value="top">{{ _T("Top") }}</option>';
                    focus_select += '<option value="bottom">{{ _T("Bottom") }}</option>';
                    focus_select += '<option value="left">{{ _T("Left") }}</option>';
                    focus_select += '<option value="right">{{ _T("Right") }}</option>';
                    focus_select += '</select>';
                    focus_select += '</div></div>';

                {% include "elements/js/modal.js.twig" with {
                    modal_title_twig: _T("Cropping focus")|e("js"),
                    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'),
                    modal_class: "tiny",
                    modal_other_options: {
                        closable: false
                    },
                    modal_onshow: "$(this).find('.content').append(focus_select);$('#crop_focus_ajax').dropdown();",
                    modal_onapprove: "cropping.focus=$(this).find('#crop_focus_ajax').val();_fileLoad(file, cropping);"
                } %}
    {% else %}
                _fileLoad(file);
    {% endif %}
            }

            var _fileLoad = function(file, cropping_settings) {
                var reader = new FileReader();
                reader.readAsDataURL(file);

                var cropping = false;
                if (cropping_settings) {
                    var cropping = cropping_settings;
                }

                reader.onload = function(evt) {
                    $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            url : '{{ url_for("photoDnd") }}',
                            data: {
                                member_id: {{ member.id }},
                                filename: file.name,
                                filesize: file.size,
                                file: evt.target.result,
                                cropping: cropping
                            },
                            {% include "elements/js/loader.js.twig" with {
                                selector: '#member_card'
                            } %},
                            success: function(res){
                                window.location.reload(true);
                            },
                        error: function() {
                            {% include "elements/js/modal.js.twig" with {
                                modal_title_twig: _T("An error occurred sending photo :(")|e("js"),
                                modal_without_content: true,
                                modal_class: "tiny",
                                modal_deny_only: true,
                                modal_cancel_text: _T("Close")|e("js"),
                                modal_classname: "redalert",
                            } %}
                        }
                    });
                }
            }
        }
    }
{% endif %}
