source: spip-zone/_plugins_/photospip/trunk/formulaires/editer_image.html @ 61948

Last change on this file since 61948 was 61948, checked in by kent1@…, 8 years ago

Tentative de respect des proportions lorsqu'un ratio est sélectionné

On passe en version 0.4.2

File size: 30.7 KB
Line 
1<div class='formulaire_spip formulaire_editer formulaire_#FORM formulaire_#FORM-#ENV{id_document}' style="position:relative;overflow:auto;">
2        [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
3        [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
4        <BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
5        <BOUCLE_document(DOCUMENTS){id_document}{mode IN vignette,image,document}{tout}>
6        [(#REM)
7                Calcul du ratio entre notre image originale et la prévisualisation
8                Utile pour les opération de recadrage notamment
9        ]
10        #SET{largeur_max,#ENV{largeur_previsu,#ENV{erreurs}|table_valeur{largeur_previsu}|sinon{450}}}
11        #SET{hauteur_max,#CONFIG{photospip/hauteur_previsu,#ENV{erreurs}|table_valeur{hauteur_previsu}|sinon{450}}}
12        [(#SET{largeur_reduit,[(#FICHIER|image_reduire{#GET{largeur_max},#GET{hauteur_max}}|extraire_attribut{width})]})]
13        #SET{ratio,#LARGEUR|div{#GET{largeur_reduit}}}
14        #SET{ratio_image,#LARGEUR|div{#HAUTEUR}}
15        #SET{largeur_image,#LARGEUR}
16        #SET{hauteur_image,#HAUTEUR}
17        <form method='post' action='#ENV{action}' enctype='multipart/form-data'><div>
18                [(#REM) declarer les hidden qui declencheront le service du formulaire
19                parametre : url d'action ]
20                #ACTION_FORMULAIRE{#ENV{action}}
21                <input type='hidden' name='id_document' value='#ENV{id_document}' />
22                <input type="submit" class="submit" name="tester" style="display:none;" value="<:photospip:bouton_tester:>" />
23                <div id="modifier_image">
24                        <div id="image-container">
25                                <div id="image_modifier" class="spip_documents spip_documents_center">
26                                        [(#ENV{erreurs}|table_valeur{filtre}|oui)
27                                        [(#_document:FICHIER|photospip_appliquer_filtre{[(#ENV{erreurs}|table_valeur{filtre})],[(#ENV{erreurs}|table_valeur{param1})],[(#ENV{erreurs}|table_valeur{param2})],[(#ENV{erreurs}|table_valeur{param3})],[(#ENV{erreurs}|table_valeur{param})]}|image_reduire{#GET{largeur_max},#GET{hauteur_max}}|inserer_attribut{alt,' '})]]
28                                        [(#ENV{erreurs}|table_valeur{filtre}|non)
29                                        [(#_document:FICHIER|image_reduire{#GET{largeur_max},#GET{hauteur_max}}|inserer_attribut{alt,' '})]]
30                                </div>
31                        </div>
32                        [(#ENV{erreurs}|table_valeur{message}|oui)
33                        <div class="notice">
34                                [(#ENV{erreurs}|table_valeur{message}|=={previsu}|oui)
35                                <span><:previsualisation:></span><br />
36                                <:photospip:erreur_previsu:>]
37                                [(#ENV{erreurs}|table_valeur{message}|=={sanstest}|oui)
38                                <:photospip:sanstest:>]
39                                [(#ENV{erreurs}|table_valeur{message}|=={sansfiltre}|oui)
40                                <:photospip:sansfiltre:>]
41                                [(#ENV{erreurs}|table_valeur{message}|=={sansconf}|oui)
42                                <:photospip:sansconf:>]
43                        </div>]
44                </div>
45                <div class="editer_image_inputs">
46                        <BOUCLE_si_versions_et_vignettes(CONDITION){si #ENV{mode}|!={vignette}|ou{#ENV{mode}|=={vignette}|et{#ENV{vignette}|=={oui}}}|oui}>
47                        <B_interd_nb>
48                        <ul class="liste-versions">
49                                <li class="fieldset">
50                                        <h3 class="legend">[(#GRAND_TOTAL|singulier_ou_pluriel{photospip:info_nb_versions_une,photospip:info_nb_versions})]</h3>
51                                        <BOUCLE_interd_nb(DOCUMENTS_INTERS){id_document}{!par version}> </BOUCLE_interd_nb>
52                                        <ul>
53                                        <B_interd>
54                                                <li id="image-versions" class="editer editer_version">
55                                                <BOUCLE_interd(DOCUMENTS_INTERS){id_document}{!par version}>
56                                                <div class="photospip_version choix">
57                                                <label for="version_#VERSION" title="<:photospip:title_version{version=#VERSION}:>">
58                                                        [(#HAUTEUR|>{#LARGEUR}|non)
59                                                        [(#SET{fichier,[(#FICHIER|get_spip_doc)]})]
60                                                        [(#SET{miniature,[(#FICHIER|get_spip_doc|image_reduire{80,80}|inserer_attribut{alt,Version #VERSION})]})]]
61                                                        [(#HAUTEUR|>{#LARGEUR}|oui)
62                                                        [(#SET{fichier,[(#FICHIER|get_spip_doc)]})]
63                                                        [(#SET{miniature,[(#FICHIER|get_spip_doc|image_reduire{80,80}|inserer_attribut{alt,Version #VERSION}|inserer_attribut{style,'vertical-align:bottom;'})]})]]
64                                                        #GET{miniature}
65                                                </label>
66                                                <input type="radio" name="version" id="version_#VERSION" value="#VERSION" />
67                                                </div>
68                                                </BOUCLE_interd>
69                                                </li>
70                                                <li class="boutons">
71                                                        <input type="submit" class="submit" name="revenir_version" value="<:photospip:bouton_revenir_version:>" />
72                                                        <input type="submit" class="submit" name="supprimer_version" value="<:photospip:bouton_supprimer_version:>" />
73                                                </li>
74                                        </B_interd>
75                                        </ul>
76                                </li>
77                        </ul>
78                        </B_interd_nb>
79                        </BOUCLE_si_versions_et_vignettes>
80                        <BOUCLE_modifiable(CONDITION){si #ENV{modifiable,oui}|oui}>
81                        <ul>
82                                #CHEMIN{formulaires/editer_image_format}
83                                [<li class="fieldset" id="fragment-format">
84                                        <h3 class="legend"><:photospip:legende_filtres_format:></h3>
85                                        <ul>
86                                        (#INCLURE{fond=formulaires/editer_image_format,env}|trim)
87                                        </ul>
88                                </li>]
89                               
90                                [<li class="fieldset" id="fragment-couleurs">
91                                        <h3 class="legend"><:photospip:legende_filtres_de_couleur:></h3>
92                                        <ul>
93                                                (#INCLURE{fond=formulaires/editer_image_couleurs,env}|trim)
94                                        </ul>
95                                </li>]
96                                <BOUCLE_resultats_sup_un(CONDITION){si #ENV{mode}|!={vignette}|et{#CONFIG{photospip/resultats,#ARRAY{0,remplacer_image,1,creer_nouvelle_image,2,creer_version_image}}|count|>{1}}|oui}>
97                                <li>
98                                        <label><:photospip:label_type_modification:></label>
99                                        <BOUCLE_resultats(POUR){tableau #CONFIG{photospip/resultats,#ARRAY{0,remplacer_image,1,creer_nouvelle_image,2,creer_version_image}}}>
100                                        <div class="choix">
101                                                <input type="radio" id="#VALEUR" name="type_modification" value="#VALEUR"[(#ENV{type_modification,#CONFIG{photospip/resultats_defaut,creer_version_image}}|=={#VALEUR}|oui)checked="checked"] />
102                                                <label for="#VALEUR">[(#VAL{photospip:label_modif_}|concat{#VALEUR}|_T)]</label>
103                                        </div>
104                                        </BOUCLE_resultats>
105                                </li>
106                                </BOUCLE_resultats_sup_un>
107                                [(#REM)
108                               
109                                        Les résultats possible dans le cas d'une vignette.
110                                       
111                                        On affiche ce choix de résultat uniquement lorsque la vignette existe réellement
112                                       
113                                        Contrairement aux résultats du travail sur le document, seuls 2 résultats sont possibles :
114                                        -* Le remplacement de la vignette purement et simplement;
115                                        -* La création de versions de la vignette
116                                ]
117                                <BOUCLE_resultats_sup_vignette_un(CONDITION){si #ENV{mode}|=={vignette}|et{#ENV{vignette}|=={oui}}|et{#CONFIG{photospip/resultats_vignette,#ARRAY{0,remplacer_image,1,creer_version_image}}|count|>{1}}|oui}>
118                                <li>
119                                        <label><:photospip:label_type_modification:></label>
120                                        <BOUCLE_resultats_vignette(POUR){tableau #CONFIG{photospip/resultats_vignette,#ARRAY{0,remplacer_image,1,creer_version_image}}}>
121                                        <div class="choix">
122                                                <input type="radio" id="#VALEUR" name="type_modification" value="#VALEUR"[(#ENV{type_modification,#CONFIG{photospip/resultats_defaut_vignette,creer_version_image}}|=={#VALEUR}|oui)checked="checked"] />
123                                                <label for="#VALEUR">[(#VAL{photospip:label_modif_vignette_}|concat{#VALEUR}|_T)]</label>
124                                        </div>
125                                        </BOUCLE_resultats_vignette>
126                                </li>
127                                </BOUCLE_resultats_sup_vignette_un>
128                        </ul>
129                </div>
130          [(#REM) ajouter les saisies supplementaires : extra et autre, a cet endroit ]
131          <!--extra-->
132          <p class="boutons">
133                <input type="submit" class="submit" name="tester" value="<:photospip:bouton_tester:>" />
134                [(#ENV{mode}|=={vignette}|et{#ENV{vignette}|=={oui}}|oui)
135                <input type="submit" class="submit" name="supprimer_vignette" value="<:photospip:bouton_supprimer_vignette:>" />
136                ]
137                <input type="submit" class="submit" name="validation_continuer" value="<:photospip:bouton_valider_continuer:>" />
138                <input type="submit" class="submit" name="validation_fermer" value="<:photospip:bouton_valider_fermer:>" />
139          </p>
140         <script type="text/javascript"><!--
141                        var ratio, ratio_image,largeur,hauteur;
142                        ratio_image = parseFloat([(#GET{ratio_image})]);
143                        largeur = parseFloat(#GET{largeur_image});
144                        hauteur = parseFloat(#GET{hauteur_image});
145                        ratio = largeur/parseFloat($('#image-container img').width());
146                        [(#CONFIG{photospip/image_recadre,on}|=={on}|oui)
147                                var x1, y1, x2, y2, w, h, ias;
148                                function image_crop_selectchange(img, selection){
149                                        /**
150                                         *  Le ratio est la relation entre notre image normale et la prévisualisation
151                                         */
152                                        if(!isNaN(parseFloat(selection.x1*ratio))){
153                                                x1.val(parseFloat(selection.x1*ratio).toFixed(0));
154                                                y1.val(parseFloat(selection.y1*ratio).toFixed(0));
155                                                x2.val(parseFloat(selection.x2*ratio).toFixed(0));
156                                                y2.val(parseFloat(selection.y2*ratio).toFixed(0));
157                                                w.val(parseFloat(selection.width*ratio).toFixed(0));
158                                                h.val(parseFloat(selection.height*ratio).toFixed(0));
159                                        }
160                                }
161
162                                var image_crop = function(){
163                                        if(typeof(ias) == 'object'){
164                                                image_crop_close();
165                                        }
166
167                                        ias = jQuery('#image_modifier img').imgAreaSelect(
168                                                {
169                                                        parent:jQuery('#modifier_image'),
170                                                        x1:[(#ENV{recadre_x1}|>{0}|?{[(#ENV{recadre_x1}|div{#GET{ratio}}|intval)],10})],
171                                                        y1:[(#ENV{recadre_y1}|>{0}|?{[(#ENV{recadre_y1}|div{#GET{ratio}}|intval)],10})],
172                                                        x2:[(#ENV{recadre_x2}|>{0}|?{[(#ENV{recadre_x2}|div{#GET{ratio}}|intval)],60})],
173                                                        y2:[(#ENV{recadre_y2}|>{0}|?{[(#ENV{recadre_y2}|div{#GET{ratio}}|intval)],60})],
174                                                        show:true,
175                                                        instance: true,
176                                                        handles: true,
177                                                        keys: true,
178                                                        fadeSpeed:400,
179                                                        enable:true,
180                                                        onInit: function(img, c) {
181                                                                image_crop_selectchange(img,c);
182                                                        },
183                                                        onSelectStart: function(img, c) {},
184                                                        onSelectEnd: function(img, c) {},
185                                                        onSelectChange: function(img, c) {
186                                                                image_crop_selectchange(img,c);
187                                                        }
188                                                }
189                                        );
190                                }
191                               
192                                var image_crop_close = function(){
193                                        if(typeof(ias) == 'object')
194                                                ias.remove();
195                                }
196                        ]
197                        var activatesliders = function(){
198                                if(typeof($.fn.slider) == 'function'){
199                                        if(jQuery('#sliderrotation').size() > 0){
200                                                var slider_image_rotation = jQuery('#sliderrotation').slider({
201                                                        min: -180,
202                                                        max: 180,
203                                                        value: [(#ENV{params_image_rotation}|intval|sinon{45})],
204                                                        slide: function( event, ui ) {
205                                                                jQuery(this).parent().find('input').val(ui.value.toFixed(0));
206                                                        }
207                                                });
208                                                $("#param_image_rotation").change(function() {
209                                                        var val = parseInt($(this).val());
210                                                        slider_image_rotation.slider("value", val);
211                                                });
212                                        }
213                                        if(jQuery('#slidergamma').size() > 0){
214                                                var slider_image_gamma = jQuery('#slidergamma').slider({
215                                                        min: -254,
216                                                        max: 254,
217                                                        value: [(#ENV{params_image_gamma}|sinon{10}|intval)],
218                                                        slide: function(event, ui) {
219                                                                jQuery(this).parent().find('input').val(ui.value.toFixed(0));
220                                                        }
221                                                });
222                                                $("#param_image_gamma").change(function() {
223                                                        var val = parseInt($(this).val());
224                                                        slider_image_gamma.slider("value", val);
225                                                });
226                                        }
227                                        if(jQuery('#sliderflou').size() > 0){
228                                                var slider_image_flou = jQuery('#sliderflou').slider({
229                                                        min: 1,
230                                                        max: 11,
231                                                        value: [(#ENV{param_image_flou}|sinon{3}|intval)],
232                                                        slide: function(event, ui) {
233                                                                jQuery(this).parent().find('input').val(ui.value.toFixed(0));
234                                                        }
235                                                });
236                                                $("#param_image_flou").change(function() {
237                                                        var val = parseInt($(this).val());
238                                                        slider_image_flou.slider("value", val);
239                                                });
240                                        }
241                                        if(jQuery('#slider_image_reduire').size() > 0){
242                                                /**
243                                                 * On utilise qu'un slider pour les deux valeurs
244                                                 * car on fait dans le proportionnel ici
245                                                 */
246                                                var slider_image_reduire = jQuery('#slider_image_reduire').slider({
247                                                        min: 5,
248                                                        max: 100,
249                                                        value: [(#ENV{reduire_width,#LARGEUR}|div{#LARGEUR}|mult{100}|intval)],
250                                                        slide: function(event, ui) {
251                                                                jQuery(this).parent().find('input#reduire_width').val(((ui.value.toFixed(0)*#LARGEUR)/100).toFixed(0));
252                                                                jQuery(this).parent().find('input#reduire_height').val(((ui.value.toFixed(0)*#HAUTEUR)/100).toFixed(0));
253                                                        }
254                                                });
255                                                $("#reduire_width").change(function() {
256                                                        var val = (parseInt($(this).val())/parseInt(#LARGEUR))*100;
257                                                        slider_image_reduire.slider("value", val);
258                                                        var height = ((parseInt(#HAUTEUR)*val)/100).toFixed(0);
259                                                        $("#reduire_height").val(height);
260                                                });
261                                                $("#reduire_height").change(function() {
262                                                        var val = (parseInt($(this).val())/parseInt(#HAUTEUR))*100;
263                                                        slider_image_reduire.slider("value", val);
264                                                        var height = ((parseInt(#LARGEUR)*val)/100).toFixed(0);
265                                                        $("#reduire_width").val(height);
266                                                });
267                                        }
268                                }
269                        }
270                        if(typeof(jQuery) == 'function'){
271                                jQuery(document).ready(function() {
272                                        /**
273                                         * Cas où l'on se trouve dans une mediabox
274                                         */
275                                        if($('#cboxLoadedContent').is(':visible')){
276                                                $(document).bind('cbox_complete', function(){
277                                                        $('input[type=number]').spinner();
278                                                        if($('#modifier_image img').width() > $('#modifier_image').width()){
279                                                                $('#image-container img').attr('width','').attr('height','').width('100%').height('auto');
280                                                                ratio = largeur/parseFloat($('#image-container img').width());
281                                                        }
282                                                        jQuery('.cache').hide();
283                                                        var boxoffset = $('#cboxLoadedContent').offset();
284                                                        var container_offset = $('#image-container').offset().top-$('#cboxLoadedContent').offset().top;
285                                                        var container_width = $('#image-container').width();
286                                                        if($('#image-container').height() < $('#cboxLoadedContent').height()){
287                                                                $('#cboxLoadedContent').scroll(function() {
288                                                                        var limite_multilang = boxoffset.top;
289                                                                        var limite_bas = limite_multilang+$('#image-container').parents("form").height()-$('#image-container').parents("form").find(".boutons").height();
290                                                                        var pos_bas = $('#image-container').offset().top+$('#image-container').height();
291                                                                        if(($('#cboxLoadedContent').scrollTop() >= container_offset) && (pos_bas <= limite_bas) && ($('#cboxLoadedContent').scrollTop()+$('#image-container').offset().top < limite_bas)){
292                                                                                var margintop = $('#cboxLoadedContent').scrollTop() - container_offset+20;
293                                                                                if(!$('#image-container').hasClass("image_flottant"))
294                                                                                        $('#image-container').addClass("image_flottant");
295                                                                                $('#image-container').css({"margin-top": margintop+"px"});
296                                                                                if(typeof(ias) == 'object'){
297                                                                                        ias.update();
298                                                                                }
299                                                                        }
300                                                                        else if(($('cboxLoadedContent').scrollTop() < container_offset)||(pos_bas > limite_bas) ){
301                                                                                $('#image-container').removeClass("image_flottant").css({"margin-top": "0px", "width": "auto"});
302                                                                                if(typeof(ias) == 'object'){
303                                                                                        ias.update();
304                                                                                }
305                                                                        }
306                                                                });
307                                                        }
308                                                });
309                                                if($('#modifier_image').width() != 0){
310                                                        if($('#modifier_image img').width() > $('#modifier_image').width()){
311                                                                $('#image-container img').attr('width','').attr('height','').width('100%').height('auto');
312                                                        }
313                                                }
314                                        }else{
315                                                if($('#modifier_image img').width() > $('#modifier_image').width()){
316                                                        $('#image-container img').attr('width','').attr('height','').width('100%').height('auto');
317                                                        ratio = largeur/parseFloat($('#image-container img').width());
318                                                }
319                                                $('input[type=number]').spinner();
320                                                jQuery('.cache').hide();
321                                        }
322                                        if(typeof($.fn.scrollTo) == 'function'){
323                                                $('input[type=submit]').click(function(){
324                                                        $('#cboxLoadedContent').scrollTo( { top: 0, left:'0' });
325                                                });
326                                        }
327                                       
328                                        activatesliders();
329                                        /**
330                                         * On cache les options des filtres
331                                         */
332                                       
333                                        /**
334                                         * On affiche les options du filtre sélectionné
335                                         */
336                                        jQuery('input[name=filtre]:checked').parent().find('.cache').addClass('visible').show();
337                                        jQuery('form input[type=radio]').unbind().click(function(){
338                                                if(jQuery(this).next().next('.cache').is(':hidden')){
339                                                        jQuery(".visible").slideUp().removeClass('visible');
340                                                        jQuery(this).parent().find('.cache').slideDown().addClass('visible');
341                                                        if(jQuery(this).attr('id') == 'image_recadre'){
342                                                                image_crop();
343                                                        }
344                                                        else{   
345                                                                image_crop_close();
346                                                        }
347                                                }
348                                        });
349                                        <BOUCLE_si_image_reduire(CONDITION){si #CONFIG{photospip/image_recadre,on}|oui}>
350                                                x1 = jQuery('#recadre_x1');
351                                                y1 = jQuery('#recadre_y1');
352                                                x2 = jQuery('#recadre_x2');
353                                                y2 = jQuery('#recadre_y2');
354                                                w = jQuery('#recadre_width');
355                                                h = jQuery('#recadre_height');
356                                               
357                                                if(jQuery('#image_recadre').is(':checked')){
358                                                        image_crop();
359                                                }
360                                               
361                                                jQuery('#recadre_x1,#recadre_y1,#recadre_width,#recadre_height,#recadre_x2,#recadre_y2').change(function(){
362                                                        if(typeof(ias) == 'object'){
363                                                                var ias_selection = ias.getSelection();
364                                                                var ratio_selected = $('input[name=ratio]:checked').val();
365                                                                if($(this).is('#recadre_width')){
366                                                                        if($(this).val() <= largeur){
367                                                                                var width_ratio = parseInt(parseInt($(this).val())/ratio);
368                                                                                ias_selection.x2 = parseInt(ias_selection.x1)+width_ratio;
369                                                                                var height_new = $('#resize_height').val();
370                                                                                /**
371                                                                                 * Faire attention aux ratios
372                                                                                 */
373                                                                                if(ratio_selected == '1:1'){
374                                                                                        /**
375                                                                                         * Ratio 1:1
376                                                                                         * largeur = hauteur
377                                                                                         */
378                                                                                        height_new = parseInt($(this).val());
379                                                                                        $('#recadre_height').val(height_new);
380                                                                                        ias_selection.y2 = parseInt(ias_selection.y1)+width_ratio;
381                                                                                }else if(ratio_selected == '4:3'){
382                                                                                        /**
383                                                                                         * Ratio 4:3
384                                                                                         * largeur = hauteur
385                                                                                         */
386                                                                                        height_new = parseInt((parseInt($(this).val())*3)/4);
387                                                                                        $('#recadre_height').val(height_new);
388                                                                                        var height_ratio = parseInt((width_ratio*3)/4);
389                                                                                        ias_selection.y2 = parseInt(ias_selection.y1)+height_ratio;
390                                                                                }else if(ratio_selected == '16:9'){
391                                                                                        /**
392                                                                                         * Ratio 16:9
393                                                                                         * largeur = hauteur
394                                                                                         */
395                                                                                        height_new = parseInt(($(this).val()*9)/16);
396                                                                                        $('#recadre_height').val(height_new);
397                                                                                        var height_ratio = parseInt((width_ratio*9)/16);
398                                                                                        ias_selection.y2 = parseInt(ias_selection.y1)+height_ratio;
399                                                                                }
400                                                                                if(height_new <= hauteur){
401                                                                                        /**
402                                                                                         * La nouvelle hauteur en prenant compte du ratio est inférieur
403                                                                                         * à la hauteur maximale
404                                                                                         * Sinon on ne fait rien car on ne peut augmenter la taille
405                                                                                         */
406                                                                                        if((parseInt($('#recadre_x1').val())+parseInt($(this).val())) > parseInt(largeur)){
407                                                                                                /**
408                                                                                                 * Là on doit déplacer x2 à fond et x1 un petit peu
409                                                                                                 * sinon x2 se retrouverait hors zone
410                                                                                                 */
411                                                                                                $('#recadre_x2').val(largeur);
412                                                                                                ias_selection.x2 = parseInt(largeur/ratio);
413                                                                                                $('#recadre_x1').val(largeur-parseInt($(this).val()));
414                                                                                                ias_selection.x1 = (parseInt(largeur)-parseInt($(this).val()))/ratio;
415                                                                                        }else{
416                                                                                                /**
417                                                                                                 * Là on doit déplacer seulement x2
418                                                                                                 */
419                                                                                                var width = (parseInt($('#recadre_x1').val())+parseInt($(this).val()));
420                                                                                                $('#recadre_x2').val(width);
421                                                                                        }
422                                                                                        if(ratio_selected != ''){
423                                                                                                if((parseInt($('#recadre_y1').val())+height_new) > parseInt(hauteur)){
424                                                                                                        /**
425                                                                                                         * Là on doit déplacer y2 à fond et y1 un petit peu
426                                                                                                         * sinon y2 se retrouverait hors zone
427                                                                                                         */
428                                                                                                        $('#recadre_y2').val(hauteur);
429                                                                                                        ias_selection.y2 = parseInt(hauteur/ratio);
430                                                                                                        $('#recadre_y1').val(hauteur-height_new);
431                                                                                                        ias_selection.y1 = (parseInt(hauteur)-parseInt(height_new))/ratio;
432                                                                                                }else{
433                                                                                                        /**
434                                                                                                         * Là on doit déplacer seulement y2
435                                                                                                         */
436                                                                                                        var height = (parseInt($('#recadre_y1').val())+parseInt(height_new));
437                                                                                                        $('#recadre_y2').val(height);
438                                                                                                }
439                                                                                        }
440                                                                                }
441                                                                        }else{
442                                                                                /**
443                                                                                 * On occuper toute la largeur
444                                                                                 */
445                                                                                $(this).val(largeur);
446                                                                                ias_selection.x1 = 0;
447                                                                                $('#recadre_x1').val(0);
448                                                                                ias_selection.x2 = parseInt(largeur/ratio);
449                                                                                $('#recadre_x2').val(largeur);
450                                                                        }
451                                                                }
452                                                                else if($(this).is('#recadre_height')){
453                                                                        if($(this).val() < hauteur){
454                                                                                var height_ratio = parseInt(parseInt($(this).val())/ratio);
455                                                                                ias_selection.y2 = parseInt(ias_selection.y1)+height_ratio;
456                                                                                /**
457                                                                                 * Faire attention aux ratios
458                                                                                 */
459                                                                                if(ratio_selected == '1:1'){
460                                                                                        /**
461                                                                                         * Ratio 1:1
462                                                                                         * largeur = hauteur
463                                                                                         */
464                                                                                        width_new = parseInt($(this).val());
465                                                                                        $('#recadre_width').val(width_new);
466                                                                                        ias_selection.x2 = parseInt(ias_selection.x1)+height_ratio;
467                                                                                }else if(ratio_selected == '4:3'){
468                                                                                        /**
469                                                                                         * Ratio 4:3
470                                                                                         * largeur = hauteur
471                                                                                         */
472                                                                                        width_new = parseInt((parseInt($(this).val())*4)/3);
473                                                                                        $('#recadre_width').val(width_new);
474                                                                                        var width_ratio = parseInt((height_ratio*4)/3);
475                                                                                        ias_selection.x2 = parseInt(ias_selection.x1)+width_ratio;
476                                                                                }else if(ratio_selected == '16:9'){
477                                                                                        /**
478                                                                                         * Ratio 16:9
479                                                                                         * largeur = hauteur
480                                                                                         */
481                                                                                        width_new = parseInt(($(this).val()*16)/9);
482                                                                                        $('#recadre_width').val(width_new);
483                                                                                        var width_ratio = parseInt((height_ratio*16)/9);
484                                                                                        ias_selection.x2 = parseInt(ias_selection.x1)+width_ratio;
485                                                                                }
486                                                                                if(width_new <= largeur){
487                                                                                        if(parseInt($('#recadre_y2').val()) >= parseInt(hauteur)){
488                                                                                                /**
489                                                                                                 * Là on doit déplacer y2 à fond et y1 un petit peu
490                                                                                                 * sinon y2 se retrouverait hors zone
491                                                                                                 */
492                                                                                                $('#recadre_y2').val(hauteur);
493                                                                                                ias_selection.y2 = parseInt(hauteur/ratio);
494                                                                                                $('#recadre_y1').val(hauteur-parseInt($(this).val()));
495                                                                                                ias_selection.y1 = (parseInt(hauteur)-parseInt($(this).val()))/ratio;
496                                                                                        }else{
497                                                                                                /**
498                                                                                                 * Là on doit déplacer seulement y2
499                                                                                                 */
500                                                                                                var height = (parseInt($('#recadre_y1').val())+parseInt($(this).val()));
501                                                                                                $('#recadre_y2').val(height);
502                                                                                        }
503                                                                                        if(ratio_selected != ''){
504                                                                                                if((parseInt($('#recadre_x1').val())+width_new) > parseInt(largeur)){
505                                                                                                        /**
506                                                                                                         * Là on doit déplacer x2 à fond et x1 un petit peu
507                                                                                                         * sinon x2 se retrouverait hors zone
508                                                                                                         */
509                                                                                                        $('#recadre_x2').val(largeur);
510                                                                                                        ias_selection.x2 = parseInt(largeur/ratio);
511                                                                                                        $('#recadre_x1').val(largeur-width_new);
512                                                                                                        ias_selection.x1 = (parseInt(largeur)-parseInt(width_new))/ratio;
513                                                                                                }else{
514                                                                                                        /**
515                                                                                                         * Là on doit déplacer seulement x2
516                                                                                                         */
517                                                                                                        var width = (parseInt($('#recadre_x1').val())+parseInt(width_new));
518                                                                                                        $('#recadre_x2').val(width);
519                                                                                                }
520                                                                                        }
521                                                                                }
522                                                                        }else{
523                                                                                /**
524                                                                                 * On occuper toute la hauteur
525                                                                                 */
526                                                                                $(this).val(hauteur);
527                                                                                ias_selection.y1 = 0;
528                                                                                $('#recadre_y1').val(0);
529                                                                                ias_selection.y2 = parseInt(hauteur/ratio);
530                                                                                $('#recadre_y2').val(hauteur);
531                                                                        }
532                                                                }
533                                                                else{
534                                                                        var largeur_image = parseFloat($('#image-container img').width());
535                                                                        var width = parseInt($('#recadre_width').val());
536                                                                        var height = parseInt($('#recadre_height').val());
537                                                                        if($(this).is('#recadre_x1')){
538                                                                                var width_left = parseInt($(this).val()) + parseInt(width);
539                                                                                if(width_left >= largeur){
540                                                                                        $('#recadre_x2').val(largeur);
541                                                                                        ias_selection.x2 = parseInt(largeur)/ratio;
542                                                                                        $('#recadre_x1').val(largeur-width);
543                                                                                        ias_selection.x1 = parseInt(ias_selection.x2)-parseInt(width/ratio);
544                                                                                }else{
545                                                                                        var x1_ratio = (parseInt($(this).val())/ratio);
546                                                                                        ias_selection.x1 = x1_ratio;
547                                                                                        ias_selection.x2 = parseInt(x1_ratio)+parseInt(width/ratio);
548                                                                                        $('#recadre_x2').val(parseInt($(this).val())+width);
549                                                                                }
550                                                                        }
551                                                                        else if($(this).is('#recadre_y1')){
552                                                                                var height_top = parseInt($(this).val()) + parseInt(height);
553                                                                                if(height_top >= hauteur){
554                                                                                        $('#recadre_y2').val(hauteur);
555                                                                                        ias_selection.y2 = parseInt(hauteur)/ratio;
556                                                                                        $('#recadre_y1').val(hauteur-width);
557                                                                                        ias_selection.y1 = parseInt(ias_selection.y2)-parseInt(height/ratio);
558                                                                                }else{
559                                                                                        var y1_ratio = (parseInt($(this).val())/ratio);
560                                                                                        ias_selection.y1 = y1_ratio;
561                                                                                        ias_selection.y2 = y1_ratio+parseInt(height/ratio);
562                                                                                        $('#recadre_y2').val(parseInt($(this).val())+height);
563                                                                                }
564                                                                        }
565                                                                        else if($(this).is('#recadre_x2')){
566                                                                                var x2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
567                                                                                ias_selection.x2 = parseInt(x2_ratio);
568                                                                        }
569                                                                        else if($(this).is('#recadre_y2')){
570                                                                                var y2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
571                                                                                ias_selection.y2 = parseInt(y2_ratio);
572                                                                        }
573                                                                }
574                                                                /**
575                                                                 * On met à jour la sélection visuelle
576                                                                 */
577                                                                ias.setSelection(ias_selection.x1,ias_selection.y1,ias_selection.x2,ias_selection.y2);
578                                                                ias.update();
579                                                        }
580                                                });
581                                                jQuery('.image_recadre input[type=radio]').click(function(){
582                                                        if(typeof(ias) == "object"){
583                                                                if (jQuery(this).val() != ''){
584                                                                        /**
585                                                                         * On met l'option correct à l'objet
586                                                                         */
587                                                                        ias.setOptions({aspectRatio: jQuery(this).val()});
588                                                                        var ias_selection = ias.getSelection();
589                                                                       
590                                                                        /**
591                                                                         * On redimentionne la sélection en fonction du nouveau ratio
592                                                                         */
593                                                                        var largeur_image = #LARGEUR;
594                                                                        var hauteur_image = #HAUTEUR;
595                                                                        var largeur_actuelle = (parseInt($('#recadre_x2').val()) - parseInt($('#recadre_x1').val()));
596                                                                        var hauteur_actuelle = (parseInt($('#recadre_y2').val()) - parseInt($('#recadre_y1').val()));
597                                                                        var largeur_cadre = (ias_selection.x2 - ias_selection.x1);
598                                                                        var hauteur_cadre = (ias_selection.y2 - ias_selection.y1);
599                                                                       
600                                                                        if(jQuery(this).val() == '1:1'){
601                                                                                if(hauteur_image >= largeur_actuelle){
602                                                                                        /**
603                                                                                         * On transforme la hauteur en largeur
604                                                                                         */
605                                                                                        if((parseInt($('#recadre_y1').val()) + largeur_actuelle) > hauteur_image){
606                                                                                                /**
607                                                                                                 * On va devoir remonter l'image pour qu'elle rentre dans le cadre
608                                                                                                 */
609                                                                                                var y1 = hauteur_image - largeur_actuelle;
610                                                                                                var y2 = hauteur_image;
611                                                                                                $('#recadre_y1').val(y1)
612                                                                                                $('#recadre_y2').val(y2);
613                                                                                                ias_selection.y2 = $('#image_modifier img').height();
614                                                                                                ias_selection.y1 = ias_selection.y2-largeur_cadre;
615                                                                                        }else{
616                                                                                                /**
617                                                                                                 * L'image reste en place, on change les dimensions seulement
618                                                                                                 */
619                                                                                                var y2 = parseInt($('#recadre_y1').val()) + largeur_actuelle;
620                                                                                                $('#recadre_y2').val(y2);
621                                                                                                ias_selection.y2 = parseInt(ias_selection.y1)+largeur_cadre;
622                                                                                        }
623                                                                                        $('#recadre_height').val($('#recadre_width').val());
624                                                                                }else{
625                                                                                        /**
626                                                                                         * On transforme la largeur en hauteur
627                                                                                         */
628                                                                                        if((parseInt($('#recadre_x1').val()) + hauteur_actuelle) > largeur_image){
629                                                                                                /**
630                                                                                                 * On va devoir déplacer l'image
631                                                                                                 * pour qu'elle rentre dans le cadre
632                                                                                                 */
633                                                                                                var x1 = largeur_image - hauteur_actuelle;
634                                                                                                var x2 = largeur_image;
635                                                                                                $('#recadre_x1').val(x1)
636                                                                                                $('#recadre_x2').val(x2);
637                                                                                                ias_selection.x2 = $('#image_modifier img').width();
638                                                                                                ias_selection.x1 = ias_selection.x2-hauteur_cadre;
639                                                                                        }else{
640                                                                                                /**
641                                                                                                 * L'image reste en place, on change les dimensions seulement
642                                                                                                 */
643                                                                                                var x2 = parseInt($('#recadre_x1').val()) + hauteur_actuelle;
644                                                                                                $('#recadre_x2').val(x2);
645                                                                                                ias_selection.x2 = parseInt(ias_selection.x1)+hauteur_cadre;
646                                                                                        }
647                                                                                        $('#recadre_width').val($('#recadre_height').val());
648                                                                                }
649                                                                        }
650                                                                        else if((jQuery(this).val() == '4:3') || (jQuery(this).val() == '16:9')){
651                                                                                if(jQuery(this).val() == '4:3'){
652                                                                                        var ratio_l = 4;
653                                                                                        var ratio_h = 3;
654                                                                                }else if(jQuery(this).val() == '16:9'){
655                                                                                        var ratio_l = 16;
656                                                                                        var ratio_h = 9;
657                                                                                }
658                                                                                //var largeur_ratio = ((largeur_actuelle*ratio_l)/ratio_h);
659                                                                                var largeur_ratio = largeur_actuelle;
660                                                                                var hauteur_ratio = ((largeur_actuelle*ratio_h)/ratio_l);
661                                                                                //var largeur_cadre_ratio = (((ias_selection.x2 - ias_selection.x1)*ratio_l)/ratio_h);
662                                                                                var largeur_cadre_ratio = (ias_selection.x2 - ias_selection.x1);
663                                                                                var hauteur_cadre_ratio = (((ias_selection.x2 - ias_selection.x1)*ratio_h)/ratio_l);
664                                                                                if(hauteur_ratio <= hauteur_image){
665                                                                                        /**
666                                                                                         * On redimentionne la hauteur
667                                                                                         */
668                                                                                        if((parseInt($('#recadre_y1').val()) + hauteur_ratio) > hauteur_actuelle){
669                                                                                                /**
670                                                                                                 * On va devoir remonter l'image pour qu'elle rentre dans le cadre
671                                                                                                 */
672                                                                                                var y1 = hauteur_image - hauteur_ratio.toFixed(0);
673                                                                                                var y2 = hauteur_image.toFixed(0);
674                                                                                                $('#recadre_y1').val(y1)
675                                                                                                $('#recadre_y2').val(y2);
676                                                                                                ias_selection.y2 = $('#image_modifier img').height();
677                                                                                                ias_selection.y1 = (ias_selection.y2-hauteur_cadre_ratio).toFixed(0);
678                                                                                        }else{
679                                                                                                /**
680                                                                                                 * L'image reste en place, on change les dimensions seulement
681                                                                                                 */
682                                                                                                var y2 = (parseInt($('#recadre_y1').val()) + hauteur_ratio).toFixed(0);
683                                                                                                $('#recadre_y2').val(y2);
684                                                                                                ias_selection.y2 = (parseInt(ias_selection.y1)+hauteur_cadre_ratio).toFixed(0);
685                                                                                        }
686                                                                                        $('#recadre_height').val(((parseInt($('#recadre_width').val())*ratio_h)/ratio_l).toFixed(0));
687                                                                                }else{
688                                                                                        /**
689                                                                                         * On transforme la largeur car la hauteur sera trop grande
690                                                                                         */
691                                                                                        if((parseInt($('#recadre_x1').val()) + hauteur_ratio) > largeur_image){
692                                                                                                /**
693                                                                                                 * On va devoir déplacer l'image
694                                                                                                 * pour qu'elle rentre dans le cadre
695                                                                                                 */
696                                                                                                var x1 = largeur_image - hauteur_ratio;
697                                                                                                var x2 = largeur_image;
698                                                                                                $('#recadre_x1').val(x1)
699                                                                                                $('#recadre_x2').val(x2);
700                                                                                                ias_selection.x2 = $('#image_modifier img').width();
701                                                                                                ias_selection.x1 = (ias_selection.x2-hauteur_cadre_ratio).toFixed(0);
702                                                                                        }else{
703                                                                                                /**
704                                                                                                 * L'image reste en place, on change les dimensions seulement
705                                                                                                 */
706                                                                                                var x2 = parseInt($('#recadre_x1').val()) + hauteur_ratio;
707                                                                                                $('#recadre_x2').val(x2);
708                                                                                                ias_selection.x2 = (parseInt(ias_selection.x1)+hauteur_cadre_ratio).toFixed(0);
709                                                                                        }
710                                                                                        $('#recadre_width').val(((parseInt($('#recadre_width').val())*ratio_l)/ratio_h).toFixed(0));
711                                                                                }
712                                                                        }
713                                                                        ias.setSelection(ias_selection.x1,ias_selection.y1,ias_selection.x2,ias_selection.y2);
714                                                                        ias.update();
715                                                                }
716                                                                else{
717                                                                        ias.setOptions({aspectRatio: ''});
718                                                                }
719                                                        }
720                                                });
721                                        </BOUCLE_si_image_reduire>
722                                });
723                        }
724        // --></script>
725        </BOUCLE_modifiable>
726        </div></form>
727        </BOUCLE_document>
728        </BOUCLE_editable>
729</div>
Note: See TracBrowser for help on using the repository browser.