Changeset 92757 in spip-zone


Ignore:
Timestamp:
Nov 8, 2015, 8:44:11 PM (4 years ago)
Author:
bystrano@…
Message:

ré-ordonne le code javascript

On en profite pour corriger quelques petits bugs…

File:
1 edited

Legend:

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

    r92756 r92757  
    2121        }),
    2222        img = $('.image-massicot img'),
    23         imgAreaSelector,
    2423        initialWidth = img.attr('width'),
    2524        zoom = options.zoom,
     
    2726           le zoom, pour pouvoir zoomer-dézoomer perdre de la
    2827           précision à cause d'erreurs d'arrondi. */
    29         selection_nozoom = {};
     28        selection_nozoom = {},
     29        selection_actuelle = ($('input[name=x1]').attr('value') !== '') ?
     30            {
     31                x1: parseInt($('input[name=x1]').attr('value'),10),
     32                x2: parseInt($('input[name=x2]').attr('value'),10),
     33                y1: parseInt($('input[name=y1]').attr('value'),10),
     34                y2: parseInt($('input[name=y2]').attr('value'),10)
     35            } :
     36            {
     37                x1: 0,
     38                x2: parseInt(img.attr('width'),10),
     39                y1: 0,
     40                y2: parseInt(img.attr('height'),10)
     41            },
     42        imgAreaSelector = img.imgAreaSelect({
     43            instance: true,
     44            handles: true,
     45            show: true,
     46            onSelectEnd: maj_formulaire,
     47            onSelectChange: function () {
     48                selection_nozoom = {};
     49            },
     50            x1: selection_actuelle.x1,
     51            x2: selection_actuelle.x2,
     52            y1: selection_actuelle.y1,
     53            y2: selection_actuelle.y2,
     54        });
    3055
    31     /* Mise à jour du formulaire */
    32     function maj_formulaire (img, selection) {
    33         $('input[name=x1]').attr('value', selection.x1);
    34         $('input[name=x2]').attr('value', selection.x2);
    35         $('input[name=y1]').attr('value', selection.y1);
    36         $('input[name=y2]').attr('value', selection.y2);
    37 
    38         $('.dimensions').html((selection.x2 - selection.x1) + ' x ' + (selection.y2 - selection.y1));
    39     }
    40 
    41     /* Une fonction qui agrandi ou rapetisse l'image */
    42     function maj_image (zoom) {
    43 
    44         img
    45             .css('width', zoom * initialWidth + 'px')
    46             .css('height', 'auto')
    47             .css('margin-left', '-' + (Math.max((zoom*initialWidth - 780),0) / 2) + 'px' );
    48 
    49     }
    50 
    51     /* Une fonction pour mettre à jour la sélection lorsqu'on zoom */
    52     function maj_selection (new_zoom, zoom) {
    53 
    54         var selection_actuelle = {},
    55             nouvelle_selection = {};
    56 
    57         if ( ! $('input[name=x1]').attr('value')) {
    58             selection_actuelle = {
    59                 x1: 0,
    60                 x2: img.attr('width'),
    61                 y1: 0,
    62                 y2: img.attr('height')
    63             };
    64         } else {
    65             selection_actuelle = {
    66                 x1: $('input[name=x1]').attr('value'),
    67                 x2: $('input[name=x2]').attr('value'),
    68                 y1: $('input[name=y1]').attr('value'),
    69                 y2: $('input[name=y2]').attr('value')
    70             };
    71         }
    72 
    73         if ( ! selection_nozoom.x1) {
    74             selection_nozoom = {
    75                 x1: selection_actuelle.x1 / zoom,
    76                 x2: selection_actuelle.x2 / zoom,
    77                 y1: selection_actuelle.y1 / zoom,
    78                 y2: selection_actuelle.y2 / zoom,
    79             }
    80         }
    81 
    82         if ( ! imgAreaSelector) {
    83 
    84             imgAreaSelector = img.imgAreaSelect({
    85                 instance: true,
    86                 handles: true,
    87                 show: true,
    88                 onSelectEnd: maj_formulaire,
    89                 onSelectChange: function () {
    90                     selection_nozoom = {};
    91                 },
    92                 x1: selection_actuelle.x1,
    93                 x2: selection_actuelle.x2,
    94                 y1: selection_actuelle.y1,
    95                 y2: selection_actuelle.y2,
    96             });
    97             maj_formulaire(img, selection_actuelle);
    98 
    99         } else {
    100 
    101             nouvelle_selection.x1 = Math.round(selection_nozoom.x1 * new_zoom);
    102             nouvelle_selection.x2 = Math.round(selection_nozoom.x2 * new_zoom);
    103             nouvelle_selection.y1 = Math.round(selection_nozoom.y1 * new_zoom);
    104             nouvelle_selection.y2 = Math.round(selection_nozoom.y2 * new_zoom);
    105 
    106             nouvelle_selection.x1 = Math.max(0, nouvelle_selection.x1);
    107             nouvelle_selection.y1 = Math.max(0, nouvelle_selection.y1);
    108             nouvelle_selection.x2 = Math.min(nouvelle_selection.x2, img.width());
    109             nouvelle_selection.y2 = Math.min(nouvelle_selection.y2, img.height());
    110 
    111             imgAreaSelector.setSelection(
    112                 nouvelle_selection.x1,
    113                 nouvelle_selection.y1,
    114                 nouvelle_selection.x2,
    115                 nouvelle_selection.y2
    116             );
    117             imgAreaSelector.update();
    118 
    119             maj_formulaire(img, nouvelle_selection);
    120         }
    121     }
     56    /* On initialise le formulaire. On ne le fait pas en php parce que
     57       c'est plus facile de trouver les dimensions de l'image en js… */
     58    maj_formulaire(img, selection_actuelle);
    12259
    12360    /* la valeur du zoom agit sur l'image */
     
    14380
    14481        maj_formulaire(img, {x1:0, y1:0, x2:img.width(), y2:img.height()});
     82        selection_nozoom = {};
    14583
    14684        e.preventDefault();
     
    14886    });
    14987
     88
     89    /* Mise à jour du formulaire */
     90    function maj_formulaire (img, selection) {
     91        $('input[name=x1]').attr('value', selection.x1);
     92        $('input[name=x2]').attr('value', selection.x2);
     93        $('input[name=y1]').attr('value', selection.y1);
     94        $('input[name=y2]').attr('value', selection.y2);
     95
     96        $('.dimensions').html((selection.x2 - selection.x1) + ' x ' + (selection.y2 - selection.y1));
     97    }
     98
     99    /* Une fonction qui agrandi ou rapetisse l'image */
     100    function maj_image (zoom) {
     101
     102        img
     103            .css('width', zoom * initialWidth + 'px')
     104            .css('height', 'auto')
     105            .css('margin-left', '-' + (Math.max((zoom*initialWidth - 780),0) / 2) + 'px' );
     106    }
     107
     108    /* Une fonction pour mettre à jour la sélection lorsqu'on zoom */
     109    function maj_selection (new_zoom, zoom) {
     110
     111        var nouvelle_selection = {};
     112
     113        if ( ! selection_nozoom.hasOwnProperty('x1')) {
     114            selection_actuelle = imgAreaSelector.getSelection();
     115            selection_nozoom = {
     116                x1: selection_actuelle.x1 / zoom,
     117                x2: selection_actuelle.x2 / zoom,
     118                y1: selection_actuelle.y1 / zoom,
     119                y2: selection_actuelle.y2 / zoom,
     120            }
     121        }
     122
     123        nouvelle_selection.x1 = Math.round(selection_nozoom.x1 * new_zoom);
     124        nouvelle_selection.x2 = Math.round(selection_nozoom.x2 * new_zoom);
     125        nouvelle_selection.y1 = Math.round(selection_nozoom.y1 * new_zoom);
     126        nouvelle_selection.y2 = Math.round(selection_nozoom.y2 * new_zoom);
     127
     128        nouvelle_selection.x1 = Math.max(0, nouvelle_selection.x1);
     129        nouvelle_selection.y1 = Math.max(0, nouvelle_selection.y1);
     130        nouvelle_selection.x2 = Math.min(nouvelle_selection.x2, img.width());
     131        nouvelle_selection.y2 = Math.min(nouvelle_selection.y2, img.height());
     132
     133        imgAreaSelector.setSelection(
     134            nouvelle_selection.x1,
     135            nouvelle_selection.y1,
     136            nouvelle_selection.x2,
     137            nouvelle_selection.y2
     138        );
     139        imgAreaSelector.update();
     140
     141        maj_formulaire(img, nouvelle_selection);
     142        selection_actuelle = nouvelle_selection;
     143    }
    150144}
Note: See TracChangeset for help on using the changeset viewer.