Changeset 111547 in spip-zone


Ignore:
Timestamp:
Sep 11, 2018, 8:10:33 AM (7 months ago)
Author:
bystrano@…
Message:

On continue la re-écriture, initialisation du selecteur et du slider

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/massicot/trunk/javascripts/formulaireMassicoterImage.js

    r111546 r111547  
    1111
    1212        var self = this,
    13                 img = self.parent().find('.image-massicot img');
     13                conteneur = self.parent().find('.image-massicot .conteneur'),
     14                // l'image
     15                img = self.parent().find('.image-massicot img'),
     16                largeur_image = parseInt(img.attr('width'), 10),
     17                hauteur_image = parseInt(img.attr('height'), 10),
     18                // options
     19                dimensions_forcees = options.forcer_dimensions instanceof Object,
     20                largeur_forcee = dimensions_forcees ? parseInt(options.forcer_dimensions.largeur, 10) : NaN,
     21                hauteur_forcee = dimensions_forcees ? parseInt(options.forcer_dimensions.hauteur, 10) : NaN,
     22                // On garde en mémoire la sélection telle qu'elle serait sans le zoom,
     23                // pour pouvoir zoomer-dézoomer perdre de la précision à cause d'erreurs
     24                // d'arrondi.
     25                selection_nozoom,
     26                // widgets
     27                imgAreaSelector,
     28                slider,
     29                selecteur_format = self.find('select[name=format]');
    1430
    1531        form_init();
     32        GUI_init();
     33
     34        selection_nozoom = form_get();
     35        img_set(form_get());
    1636
    1737        /**
     
    2444
    2545                var valeurs_form = form_get();
    26                 console.log(valeurs_form);
     46                // console.log(valeurs_form);
    2747
    2848                if (isNaN(valeurs_form.x1)) {
     
    4161         */
    4262        function form_get () {
    43 
    44                 console.log('form_get');
     63                // console.log('form_get');
    4564
    4665                return {
     
    5675         * Mettre à jour les valeurs du formulaire
    5776         */
    58         function form_set(valeurs) {
    59                 console.log('form_set');
    60                 console.log(valeurs);
     77        function form_set (valeurs) {
     78                // console.log('form_set');
     79                // console.log(valeurs);
    6180
    62                 self.find('input#champ_zoom').attr('value', valeurs.zoom);
    6381                self.find('input[name=x1]').attr('value', valeurs.x1);
    6482                self.find('input[name=x2]').attr('value', valeurs.x2);
    6583                self.find('input[name=y1]').attr('value', valeurs.y1);
    6684                self.find('input[name=y2]').attr('value', valeurs.y2);
     85                self.find('input[name=zoom]').attr('value', valeurs.zoom);
     86        }
     87
     88        /**
     89         * Initialisation du widget de sélection
     90         */
     91        function GUI_init () {
     92
     93                var selection = form_get();
     94
     95                imgAreaSelector = conteneur.imgAreaSelect({
     96                        instance: true,
     97                        handles: true,
     98                        show: true,
     99                        x1: selection.x1,
     100                        x2: selection.x2,
     101                        y1: selection.y1,
     102                        y2: selection.y2,
     103                        /* On fait toutes les initialisations des autres widgets dans ce
     104                         * callback, pour être certain de pouvoir utiliser
     105                         * imgAreaSelector.setOptions sans faire planter le widget. */
     106                        onInit: function () {
     107
     108                                if (dimensions_forcees) {
     109
     110                                        imgAreaSelector.setOptions({
     111                                                aspectRatio: largeur_forcee + ':' + hauteur_forcee,
     112                                                minWidth: Math.round(largeur_forcee * selection.zoom),
     113                                                minHeight: Math.round(hauteur_forcee * selection.zoom)
     114                                        });
     115
     116                                        imgAreaSelector.update();
     117                                }
     118
     119                                slider_init(selection);
     120                                // init_selecteur_format();
     121                                // init_bouton_reinit();
     122                        },
     123                        onSelectChange: function (img, selection) {
     124
     125                                selection_nozoom = selection;
     126                                form_set(selection);
     127                        }
     128                });
     129        }
     130
     131        /**
     132         * Mettre à jour le widget de sélection
     133         */
     134        function selector_set (selection) {
     135
     136                imgAreaSelector.setSelection(
     137                        selection.x1,
     138                        selection.y1,
     139                        selection.x2,
     140                        selection.y2
     141                );
     142                imgAreaSelector.update();
     143        }
     144
     145        /**
     146         * Initialisation du slider
     147         */
     148        function slider_init (selection) {
     149
     150                slider = self.find('#zoom-slider').slider({
     151                        max: 1,
     152                        min: 0.01,
     153                        value: selection.zoom,
     154                        step: 0.01,
     155                        create: function () {
     156
     157                                // if (dimensions_forcees) {
     158                                //      selection.zoom = zoom_min_get();
     159                                //      $(this).slider('option', 'value', selection.zoom);
     160                                //      maj_image(selection.zoom);
     161                                //      selection_initiale = forcer_dimensions_selection({
     162                                //              x1: 0,
     163                                //              x2: Math.round(img.width()),
     164                                //              y1: 0,
     165                                //              y2: Math.round(img.height())
     166                                //      }, zoom);
     167                                // } else {
     168                                //      maj_image(zoom);
     169                                // }
     170                                // maj_formulaire(selection_initiale, zoom);
     171                        },
     172                        slide: function (event, ui) {
     173
     174                                var selection = form_get();
     175                                selection.zoom = ui.value;
     176
     177                                form_set(selection);
     178                                img_set(selection);
     179                        }
     180                });
     181        }
     182
     183        /**
     184         * Zoomer l'image et met à jour la sélection
     185         */
     186        function img_set (selection) {
     187
     188                conteneur
     189                        .css('width', selection.zoom * largeur_image + 'px')
     190                        .css('height', selection.zoom * hauteur_image + 'px')
     191                        .css('margin-left', '-' + (Math.max((selection.zoom*largeur_image - 780),0) / 2) + 'px' );
     192
     193                img
     194                        .css('width', Math.min(1, selection.zoom) * largeur_image + 'px')
     195                        .css('padding-top', (Math.max(1, selection.zoom) - 1) / 2 * hauteur_image);
     196
     197                selector_set(selection);
    67198        }
    68199};
Note: See TracChangeset for help on using the changeset viewer.