Changeset 61874 in spip-zone


Ignore:
Timestamp:
May 31, 2012, 7:29:26 AM (7 years ago)
Author:
kent1@…
Message:

On règle les problèmes de js sur image_recadre...

Ce js sera quand même à revoir complètement lors du passage à SPIP 3.0

version 0.4.1

Location:
_plugins_/photospip/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/photospip/trunk/formulaires/editer_image.html

    r61852 r61874  
    140140         <script type="text/javascript"><!--
    141141                        var ratio, ratio_image,largeur,hauteur;
    142                         ratio = parseFloat([(#GET{ratio})]);
    143142                        ratio_image = parseFloat([(#GET{ratio_image})]);
    144                         largeur = #GET{largeur_image};
    145                         hauteur = #GET{hauteur_image};
    146                        
     143                        largeur = parseFloat(#GET{largeur_image});
     144                        hauteur = parseFloat(#GET{hauteur_image});
     145                        ratio = largeur/parseFloat($('#image-container img').width());
    147146                        [(#CONFIG{photospip/image_recadre,on}|=={on}|oui)
    148147                                var x1, y1, x2, y2, w, h, ias;
     
    278277                                         * Cas où l'on se trouve dans une mediabox
    279278                                         */
    280                                         if($('#cboxLoadedContent').size() > 0){
     279                                        if($('#cboxLoadedContent').is(':visible')){
    281280                                                $(document).bind('cbox_complete', function(){
    282281                                                        $('input[type=number]').spinner();
    283282                                                        if($('#modifier_image img').width() > $('#modifier_image').width()){
    284283                                                                $('#image-container img').attr('width','').attr('height','').width('100%').height('auto');
     284                                                                ratio = largeur/parseFloat($('#image-container img').width());
    285285                                                        }
    286286                                                        jQuery('.cache').hide();
     
    317317                                                }
    318318                                        }else{
     319                                                if($('#modifier_image img').width() > $('#modifier_image').width()){
     320                                                        $('#image-container img').attr('width','').attr('height','').width('100%').height('auto');
     321                                                        ratio = largeur/parseFloat($('#image-container img').width());
     322                                                }
    319323                                                $('input[type=number]').spinner();
    320324                                                jQuery('.cache').hide();
     
    347351                                                }
    348352                                        });
    349                                         [(#CONFIG{photospip/image_recadre,on}|oui)
    350                                         x1 = jQuery('#recadre_x1');
    351                                         x1.change(function(){
    352                                                 jQuery('#image_modifier img').imgAreaSelect({
    353                                                         x1:#ENV{recadre_x1,20},
    354                                                         y1:#ENV{recadre_y1,20},
    355                                                         x2:#ENV{recadre_x2,70},
    356                                                         y2:#ENV{recadre_y2,70},
    357                                                         width:#ENV{recadre_width,50},
    358                                                         height:#ENV{recadre_height,50},
    359                                                         onSelectChange: image_crop_selectchange,show:true
     353                                        <BOUCLE_si_image_reduire(CONDITION){si #CONFIG{photospip/image_recadre,on}|oui}>
     354                                                x1 = jQuery('#recadre_x1');
     355                                                y1 = jQuery('#recadre_y1');
     356                                                x2 = jQuery('#recadre_x2');
     357                                                y2 = jQuery('#recadre_y2');
     358                                                w = jQuery('#recadre_width');
     359                                                h = jQuery('#recadre_height');
     360                                               
     361                                                if(jQuery('#image_recadre').is(':checked')){
     362                                                        image_crop();
     363                                                }
     364                                               
     365                                                jQuery('#recadre_x1,#recadre_y1,#recadre_width,#recadre_height').change(function(){
     366                                                        //,#recadre_x2,#recadre_y2
     367                                                        if(typeof(ias) == 'object'){
     368                                                                var ias_selection = ias.getSelection();
     369                                                                if($(this).is('#recadre_width')){
     370                                                                        if($(this).val() < largeur){
     371                                                                                var width_ratio = parseInt(parseInt($(this).val())/ratio);
     372                                                                                ias_selection.x2 = parseInt(ias_selection.x1)+width_ratio;
     373                                                                                if(parseInt($('#recadre_x2').val()) >= parseInt(largeur)){
     374                                                                                        /**
     375                                                                                         * Là on doit déplacer x2 à fond et x1 un petit peu
     376                                                                                         * sinon x2 se retrouverait hors zone
     377                                                                                         */
     378                                                                                        $('#recadre_x2').val(largeur);
     379                                                                                        ias_selection.x2 = parseInt(largeur/ratio);
     380                                                                                        $('#recadre_x1').val(largeur-parseInt($(this).val()));
     381                                                                                        ias_selection.x1 = (parseInt(largeur)-parseInt($(this).val()))/ratio;
     382                                                                                }else{
     383                                                                                        /**
     384                                                                                         * Là on doit déplacer seulement x2
     385                                                                                         */
     386                                                                                        var width = (parseInt($('#recadre_x1').val())+parseInt($(this).val()));
     387                                                                                        $('#recadre_x2').val(width);
     388                                                                                }
     389                                                                        }else{
     390                                                                                /**
     391                                                                                 * On occuper toute la largeur
     392                                                                                 */
     393                                                                                $(this).val(largeur);
     394                                                                                ias_selection.x1 = 0;
     395                                                                                $('#recadre_x1').val(0);
     396                                                                                ias_selection.x2 = parseInt(largeur/ratio);
     397                                                                                $('#recadre_x2').val(largeur);
     398                                                                        }
     399                                                                }
     400                                                                else if($(this).is('#recadre_height')){
     401                                                                        if($(this).val() < hauteur){
     402                                                                                var height_ratio = parseInt(parseInt($(this).val())/ratio);
     403                                                                                ias_selection.y2 = parseInt(ias_selection.y1)+height_ratio;
     404                                                                                if(parseInt($('#recadre_y2').val()) >= parseInt(hauteur)){
     405                                                                                        /**
     406                                                                                         * Là on doit déplacer y2 à fond et y1 un petit peu
     407                                                                                         * sinon y2 se retrouverait hors zone
     408                                                                                         */
     409                                                                                        $('#recadre_y2').val(hauteur);
     410                                                                                        ias_selection.y2 = parseInt(hauteur/ratio);
     411                                                                                        $('#recadre_y1').val(hauteur-parseInt($(this).val()));
     412                                                                                        ias_selection.y1 = (parseInt(hauteur)-parseInt($(this).val()))/ratio;
     413                                                                                }else{
     414                                                                                        /**
     415                                                                                         * Là on doit déplacer seulement y2
     416                                                                                         */
     417                                                                                        var height = (parseInt($('#recadre_y1').val())+parseInt($(this).val()));
     418                                                                                        $('#recadre_y2').val(height);
     419                                                                                }
     420                                                                        }else{
     421                                                                                /**
     422                                                                                 * On occuper toute la hauteur
     423                                                                                 */
     424                                                                                $(this).val(hauteur);
     425                                                                                ias_selection.y1 = 0;
     426                                                                                $('#recadre_y1').val(0);
     427                                                                                ias_selection.y2 = parseInt(hauteur/ratio);
     428                                                                                $('#recadre_y2').val(hauteur);
     429                                                                        }
     430                                                                }
     431                                                                else{
     432                                                                        var largeur_image = parseFloat($('#image-container img').width());
     433                                                                        var width = parseInt($('#recadre_width').val());
     434                                                                        var height = parseInt($('#recadre_height').val());
     435                                                                        if($(this).is('#recadre_x1')){
     436                                                                                var width_left = parseInt($(this).val()) + parseInt(width);
     437                                                                                if(width_left >= largeur){
     438                                                                                        $('#recadre_x2').val(largeur);
     439                                                                                        ias_selection.x2 = parseInt(largeur)/ratio;
     440                                                                                        $('#recadre_x1').val(largeur-width);
     441                                                                                        ias_selection.x1 = parseInt(ias_selection.x2)-parseInt(width/ratio);
     442                                                                                }else{
     443                                                                                        var x1_ratio = (parseInt($(this).val())/ratio);
     444                                                                                        ias_selection.x1 = x1_ratio;
     445                                                                                        ias_selection.x2 = parseInt(x1_ratio)+parseInt(width/ratio);
     446                                                                                        $('#recadre_x2').val(parseInt($(this).val())+width);
     447                                                                                }
     448                                                                        }
     449                                                                        else if($(this).is('#recadre_y1')){
     450                                                                                var height_top = parseInt($(this).val()) + parseInt(height);
     451                                                                                if(height_top >= hauteur){
     452                                                                                        $('#recadre_y2').val(hauteur);
     453                                                                                        ias_selection.y2 = parseInt(hauteur)/ratio;
     454                                                                                        $('#recadre_y1').val(hauteur-width);
     455                                                                                        ias_selection.y1 = parseInt(ias_selection.y2)-parseInt(height/ratio);
     456                                                                                }else{
     457                                                                                        var y1_ratio = (parseInt($(this).val())/ratio);
     458                                                                                        ias_selection.y1 = y1_ratio;
     459                                                                                        ias_selection.y2 = y1_ratio+parseInt(height/ratio);
     460                                                                                        $('#recadre_y2').val(parseInt($(this).val())+height);
     461                                                                                }
     462                                                                        }
     463                                                                        else if($(this).is('#recadre_x2')){
     464                                                                                var x2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
     465                                                                                ias_selection.x2 = parseInt(x2_ratio);
     466                                                                        }
     467                                                                        else if($(this).is('#recadre_y2')){
     468                                                                                var y2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
     469                                                                                ias_selection.y2 = parseInt(y2_ratio);
     470                                                                        }
     471                                                                }
     472                                                                /**
     473                                                                 * On met à jour la sélection visuelle
     474                                                                 */
     475                                                                ias.setSelection(ias_selection.x1,ias_selection.y1,ias_selection.x2,ias_selection.y2);
     476                                                                ias.update();
     477                                                        }
    360478                                                });
    361                                         });
    362                                         y1 = jQuery('#recadre_y1');
    363                                         x2 = jQuery('#recadre_x2');
    364                                         y2 = jQuery('#recadre_y2');
    365                                         w = jQuery('#recadre_width');
    366                                         h = jQuery('#recadre_height');
    367                                         if(jQuery('#image_recadre').is(':checked')){
    368                                                 image_crop();
    369                                         }]
    370                                         jQuery('#recadre_x1,#recadre_y1,#recadre_x2,#recadre_y2,#recadre_width,#recadre_height').change(function(){
    371                                                 if(typeof(ias) == 'object'){
    372                                                         var ias_selection = ias.getSelection();
    373                                                         if($(this).is('#recadre_width')){
    374                                                                 if($(this).val() <= largeur){
    375                                                                         var width_ratio = (parseInt($(this).val()/ratio));
    376                                                                         ias_selection.x2 = parseInt(ias_selection.x1)+width_ratio;
    377                                                                         if(ias_selection.x2 > (parseInt(largeur/ratio))){
    378                                                                                 ias_selection.x1 = parseInt((parseInt(largeur)/ratio) - parseInt(width_ratio));
    379                                                                                 ias_selection.x2 = parseInt(parseInt(ias_selection.x1)+parseInt(width_ratio));
    380                                                                         }
    381                                                                 }
    382                                                         }
    383                                                         else if($(this).is('#recadre_height')){
    384                                                                 if($(this).val() <= hauteur){
    385                                                                         var height_ratio = parseInt($(this).val()/ratio);
    386                                                                         ias_selection.y2 = parseInt(ias_selection.y1)+height_ratio;
    387                                                                         if(ias_selection.y2 > (parseInt(hauteur/ratio))){
    388                                                                                 ias_selection.y1 = parseInt((parseInt(hauteur)/ratio) - parseInt(height_ratio));
    389                                                                                 ias_selection.y2 = parseInt(parseInt(ias_selection.y1)+parseInt(height_ratio));
    390                                                                         }
    391                                                                 }
     479                                                jQuery('.image_recadre input[type=radio]').click(function(){
     480                                                        if (jQuery(this).val() != ''){
     481                                                                jQuery('#image_modifier img').imgAreaSelect({aspectRatio: jQuery(this).val()});
    392482                                                        }
    393483                                                        else{
    394                                                                 var width = parseFloat(ias_selection.x2)-parseFloat(ias_selection.x1);
    395                                                                 var height = parseFloat(ias_selection.y2)-parseFloat(ias_selection.y1);
    396                                                                 if($(this).is('#recadre_x1')){
    397                                                                         var x1_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
    398                                                                         ias_selection.x1 = parseInt(x1_ratio);
    399                                                                         ias_selection.x2 = parseInt(x1_ratio)+parseInt(width);
    400                                                                 }
    401                                                                 else if($(this).is('#recadre_y1')){
    402                                                                         var y1_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
    403                                                                         ias_selection.y1 = parseInt(y1_ratio);
    404                                                                 }
    405                                                                 else if($(this).is('#recadre_x2')){
    406                                                                         var x2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
    407                                                                         ias_selection.x2 = parseInt(x2_ratio);
    408                                                                 }
    409                                                                 else if($(this).is('#recadre_y2')){
    410                                                                         var y2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
    411                                                                         ias_selection.y2 = parseInt(y2_ratio);
    412                                                                 }
    413                                                         }
    414                                                         ias.setSelection(ias_selection.x1,ias_selection.y1,ias_selection.x2,ias_selection.y2);
    415                                                         ias.update();
    416                                                         var new_selection = ias.getSelection();
    417                                                         image_crop_selectchange($('image_modifier img'), new_selection);
    418                                                 }
    419                                         });
    420                                         jQuery('.image_recadre input[type=radio]').click(function(){
    421                                                 if (jQuery(this).val() != ''){
    422                                                         jQuery('#image_modifier img').imgAreaSelect({aspectRatio: jQuery(this).val()});
    423                                                 }
    424                                                 else{
    425                                                         jQuery('#image_modifier img').imgAreaSelect({aspectRatio: ''});
    426                                                 }
    427                                         });
     484                                                                jQuery('#image_modifier img').imgAreaSelect({aspectRatio: ''});
     485                                                        }
     486                                                });
     487                                        </BOUCLE_si_image_reduire>
    428488                                });
    429489                        }
  • _plugins_/photospip/trunk/plugin.xml

    r61852 r61874  
    44_ © 2008-2012 - Distribué sous licence GNU/GPL
    55        </auteur>
    6         <version>0.4.0</version>
     6        <version>0.4.1</version>
    77        <version_base>0.4</version_base>
    88        <prefix>photospip</prefix>
  • _plugins_/photospip/trunk/prive/style_prive_plugin_photospip.html

    r61849 r61874  
    2121#SET{right,#ENV{ltr}|choixsiegal{left,right,left}}
    2222
     23#modifier_imag;{
     24        width:100%;
     25}
    2326#image-container{
    2427        position:relative;
Note: See TracChangeset for help on using the changeset viewer.