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

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

On commence à gérer également les vignettes de documents en partant de l'image de départ

File size: 11.1 KB
Line 
1<div class='formulaire_spip formulaire_editer formulaire_editer_document formulaire_editer_document-#ENV{id_document,nouveau}'>
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        [(#ENV{erreurs}|table_valeur{message}|oui)
5                                <div class="notice">
6                                                [(#ENV{erreurs}|table_valeur{message}|=={previsu}|oui)
7                                                <span><:previsualisation:></span><br />
8                                                <:photospip:previsu:>]
9                                                [(#ENV{erreurs}|table_valeur{message}|=={sanstest}|oui)
10                                                <:photospip:sanstest:>]
11                                                [(#ENV{erreurs}|table_valeur{message}|=={sansfiltre}|oui)
12                                                <:photospip:sansfiltre:>]
13                                                [(#ENV{erreurs}|table_valeur{message}|=={sansconf}|oui)
14                                                <:photospip:sansconf:>]
15                                        </div>
16                                ]
17        <BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
18        [(#PLUGIN{fonctions_images}|oui)
19                [(#CONFIG{photospip/image_niveau_de_gris_auto}|=={on}|oui)#SET{fonctions_images,on}]
20                [(#CONFIG{photospip/image_sincity}|=={on}|oui)#SET{fonctions_images,on}]
21                [(#CONFIG{photospip/image_contour_alpha}|=={on}|oui)#SET{fonctions_images,on}]
22                [(#CONFIG{photospip/image_dispersion}|=={on}|oui)#SET{fonctions_images,on}]
23                [(#CONFIG{photospip/image_saturer}|=={on}|oui)#SET{fonctions_images,on}]
24        ]
25        <BOUCLE_document(DOCUMENTS){id_document}{tout}>
26        [(#REM)
27                Calcul du ratio entre notre image originale et la prévisualisation
28                Utile pour les opération de recadrage notamment
29        ]
30        #SET{largeur_max,#ENV{largeur_previsu,450}}
31        #SET{hauteur_max,#CONFIG{photospip/hauteur_previsu,450}}
32        [(#SET{largeur_reduit,[(#FICHIER|image_reduire{#GET{largeur_max},#GET{hauteur_max}}|extraire_attribut{width})]})]
33        #SET{ratio,#LARGEUR|div{#GET{largeur_reduit}}}
34        <form method='post' action='#ENV{action}' enctype='multipart/form-data'><div>
35                [(#REM) declarer les hidden qui declencheront le service du formulaire
36                parametre : url d'action ]
37                #ACTION_FORMULAIRE{#ENV{action}}
38                <input type='hidden' name='id_document' value='#ENV{id_document}' />
39                <div id="modifier_image">
40                        <div id="image-container">
41                                <div id="image_modifier" style="[width:(#GET{largeur_max})px;]">
42                               
43                                [(#ENV{erreurs}|table_valeur{filtre}|oui)
44                                [(#_document:FICHIER|image_reduire{[(#GET{largeur_max,450})],[(#GET{hauteur_max,450})]}|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{[(#ENV{largeur_max}|sinon{450})],[(#ENV{hauteur_max}|sinon{450})]}|inserer_attribut{alt,' '})]]
45                                [(#ENV{erreurs}|table_valeur{filtre}|non)
46                                [(#_document:FICHIER|image_reduire{#GET{largeur_max,450},#GET{hauteur_max,450}}|inserer_attribut{alt,' '})]]
47                        </div>
48                </div>
49                <div>
50                        <BOUCLE_modifiable(CONDITION){si #ENV{modifiable,oui}|oui}>
51                        <ul>
52                                #CHEMIN{formulaires/editer_image_format}
53                                [<li class="fieldset" id="fragment-format">
54                                        <h3 class="legend"><:photospip:legende_filtres_format:></h3>
55                                        <ul>
56                                        (#INCLURE{fond=formulaires/editer_image_format,env}|trim)
57                                        </ul>
58                                </li>]
59                               
60                                [<li class="fieldset" id="fragment-couleurs">
61                                        <h3 class="legend"><:photospip:legende_filtres_de_couleur:></h3>
62                                        <ul>
63                                                (#INCLURE{fond=formulaires/editer_image_couleurs,env}|trim)
64                                        </ul>
65                                </li>]
66                                <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}>
67                                <li>
68                                        <label><:photospip:label_type_modification:></label>
69                                        <BOUCLE_resultats(POUR){tableau #CONFIG{photospip/resultats,#ARRAY{0,remplacer_image,1,creer_nouvelle_image,2,creer_version_image}}}>
70                                        <div class="choix">
71                                                <input type="radio" id="#VALEUR" name="type_modification" value="#VALEUR"[(#ENV{type_modification,#CONFIG{photospip/resultats_defaut,creer_version_image}}|=={#VALEUR}|oui)checked="checked"] />
72                                                <label for="#VALEUR">[(#VAL{photospip:label_modif_}|concat{#VALEUR}|_T)]</label>
73                                        </div>
74                                        </BOUCLE_resultats>
75                                </li>
76                                </BOUCLE_resultats_sup_un>
77                        </ul>
78          [(#REM) ajouter les saisies supplementaires : extra et autre, a cet endroit ]
79          <!--extra-->
80          <p class="boutons">
81                <input type="submit" class="submit" name="tester" value="<:photospip:bouton_tester:>" />
82                <input type="submit" class="submit" name="validation" value="<:photospip:valider:>" />
83          </p>
84         <script type="text/javascript"><!--
85                        [(#CONFIG{photospip/image_recadre,on}|=={on}|oui)
86                                var x1, y1, x2, y2, w, h, ias,ratio;
87                                var ratio = parseFloat([(#GET{ratio})]);
88                                function crop_selectchange(img, selection){
89                                        // Le ratio est la relation entre notre image normale et la prévisualisation
90                                        if(!isNaN(parseFloat(selection.x1*ratio))){
91                                                x1.val(parseFloat(selection.x1*ratio).toFixed(0));
92                                                y1.val(parseFloat(selection.y1*ratio).toFixed(0));
93                                                x2.val(parseFloat(selection.x2*ratio).toFixed(0));
94                                                y2.val(parseFloat(selection.y2*ratio).toFixed(0));
95                                                w.val(parseFloat(selection.width*ratio).toFixed(0));
96                                                h.val(parseFloat(selection.height*ratio).toFixed(0));
97                                        }
98                                }
99
100                                var image_crop = function(){
101                                        if(typeof(ias) == 'object'){
102                                                image_crop_close();
103                                        }
104
105                                        ias = jQuery('#image_modifier img').imgAreaSelect(
106                                                {
107                                                        parent:jQuery('#modifier_image'),
108                                                        x1:[(#ENV{recadre_x1}|>{0}|?{[(#ENV{recadre_x1}|div{#GET{ratio}}|intval)],10})],
109                                                        y1:[(#ENV{recadre_y1}|>{0}|?{[(#ENV{recadre_y1}|div{#GET{ratio}}|intval)],10})],
110                                                        x2:[(#ENV{recadre_x2}|>{0}|?{[(#ENV{recadre_x2}|div{#GET{ratio}}|intval)],60})],
111                                                        y2:[(#ENV{recadre_y2}|>{0}|?{[(#ENV{recadre_y2}|div{#GET{ratio}}|intval)],60})],
112                                                        show:true,
113                                                        instance: true,
114                                                        handles: true,
115                                                        keys: true,
116                                                        fadeSpeed:400,
117                                                        enable:true,
118                                                        onInit: function(img, c) {
119                                                                crop_selectchange(img,c);
120                                                        },
121                                                        onSelectStart: function(img, c) {},
122                                                        onSelectEnd: function(img, c) {},
123                                                        onSelectChange: function(img, c) {
124                                                                crop_selectchange(img,c);
125                                                        }
126                                                }
127                                        );
128                                }
129                               
130                                var image_crop_close = function(){
131                                        ias.remove();
132                                }
133                        ]
134                       
135                        var activatesliders = function(){
136                                var slider_image_rotation = jQuery('#sliderrotation').slider({
137                                        min: -180,
138                                        max: 180,
139                                        value: #ENV{params_image_rotation,45},
140                                        slide: function( event, ui ) {
141                                                jQuery(this).parent().find('input').val(ui.value.toFixed(0));
142                                        }
143                                });
144                                $("#param_image_rotation").change(function() {
145                                        var val = parseInt($(this).val());
146                                        slider_image_rotation.slider("value", val);
147                                });
148                                var slider_image_gamma = jQuery('#slidergamma').slider({
149                                        min: -254,
150                                        max: 254,
151                                        value: #ENV{params_image_gamma,10},
152                                        slide: function( event, ui ) {
153                                                jQuery(this).parent().find('input').val(ui.value.toFixed(0));
154                                        }
155                                });
156                                $("#param_image_gamma").change(function() {
157                                        var val = parseInt($(this).val());
158                                        slider_image_gamma.slider("value", val);
159                                });
160                               
161                                var slider_image_flou = jQuery('#sliderflou').slider({
162                                        min: 1,
163                                        max: 11,
164                                        value : #ENV{param_image_flou,3},
165                                        slide: function( event, ui ) {
166                                                jQuery(this).parent().find('input').val(ui.value.toFixed(0));
167                                        }
168                                });
169                                $("#param_image_flou").change(function() {
170                                        var val = parseInt($(this).val());
171                                        slider_image_flou.slider("value", val);
172                                });
173                        }
174                       
175                        jQuery(document).ready(function() {
176                                activatesliders();
177                                jQuery('.cache').hide();
178                                jQuery('input[name=filtre]:checked').parent().find('.cache').show();
179                                jQuery('.version').hover(function(){
180                                        jQuery(this).find('label img').fadeTo('fast',.1,function(){
181                                                jQuery(this).parent().parent().find('input').attr({
182                                                        checked: "checked"
183                                                });
184                                                jQuery(this).parent().parent().find('.revenir_version, .delete_version').show();       
185                                        });     
186                                },function(){
187                                        jQuery(this).find('label img').fadeTo('fast',1,function(){
188                                                jQuery(this).parent().parent().find('.revenir_version, .delete_version').hide();
189                                        });     
190                                });
191                                jQuery('form input[type=radio]').not('.nocache').unbind().click(function(){
192                                        if(jQuery(this).next().next('.cache').is(':hidden')){
193                                                jQuery(".visible").slideUp().removeClass('visible')
194                                                jQuery(this).parent().find('.cache').slideDown().addClass('visible');
195                                                if(jQuery(this).attr('id') == 'image_recadre'){
196                                                        image_crop();
197                                                }
198                                                else{   
199                                                        image_crop_close();
200                                                }
201                                        }
202                                });
203                                [(#CONFIG{photospip/image_recadre,on}|oui)
204                                x1 = jQuery('#recadre_x1');
205                                x1.change(function(){
206                                        jQuery('#image_modifier img').imgAreaSelect({x1:#ENV{recadre_x1,20},y1:#ENV{recadre_y1,20},x2:#ENV{recadre_x2,70},y2:#ENV{recadre_y2,70},width:#ENV{recadre_width,50},height:#ENV{recadre_height,50},onSelectChange: crop_selectchange,show:true});
207                                });
208                                y1 = jQuery('#recadre_y1');
209                                x2 = jQuery('#recadre_x2');
210                                y2 = jQuery('#recadre_y2');
211                                w = jQuery('#recadre_width');
212                                h = jQuery('#recadre_height');
213                                if(jQuery('#image_recadre').is(':checked')){
214                                        image_crop();
215                                }]
216                                jQuery('#recadre_x1,#recadre_y1,#recadre_x2,#recadre_y2,#recadre_width,#recadre_height').change(function(){
217                                        if(typeof(ias) == 'object'){
218                                                var ias_selection = ias.getSelection();
219                                                if($(this).is('#recadre_width')){
220                                                        var width_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
221                                                        ias_selection.x2 = parseInt(ias_selection.x1)+parseInt(width_ratio);
222                                                }
223                                                else if($(this).is('#recadre_height')){
224                                                        var height_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
225                                                        ias_selection.y2 = parseInt(ias_selection.y1)+parseInt(height_ratio);
226                                                }
227                                                else{
228                                                        var width = parseFloat(ias_selection.x2)-parseFloat(ias_selection.x1);
229                                                        console.log(width);
230                                                        var height = parseFloat(ias_selection.y2)-parseFloat(ias_selection.y1);
231                                                        console.log(height);
232                                                        if($(this).is('#recadre_x1')){
233                                                                var x1_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
234                                                                ias_selection.x1 = parseInt(x1_ratio);
235                                                                ias_selection.x2 = parseInt(x1_ratio)+parseInt(width);
236                                                        }
237                                                        else if($(this).is('#recadre_y1')){
238                                                                var y1_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
239                                                                ias_selection.y1 = parseInt(y1_ratio);
240                                                        }
241                                                        else if($(this).is('#recadre_x2')){
242                                                                var x2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
243                                                                ias_selection.x2 = parseInt(x2_ratio);
244                                                        }
245                                                        else if($(this).is('#recadre_y2')){
246                                                                var y2_ratio = (parseFloat($(this).val())/ratio).toFixed(0);
247                                                                ias_selection.y2 = parseInt(y2_ratio);
248                                                        }
249                                                }
250                                                ias.setSelection(ias_selection.x1,ias_selection.y1,ias_selection.x2,ias_selection.y2);
251                                                ias.update();
252                                                var new_selection = ias.getSelection();
253                                                crop_selectchange($('image_modifier img'), new_selection);
254                                        }
255                                });
256                                jQuery('.image_recadre input[type=radio]').click(function(){
257                                        if (jQuery(this).val() != ''){
258                                                jQuery('#image_modifier img').imgAreaSelect({aspectRatio: jQuery(this).val()});
259                                        }
260                                        else{
261                                                jQuery('#image_modifier img').imgAreaSelect({aspectRatio: ''});
262                                        }
263                                });
264                        });
265                        // -->
266        </script>
267        </BOUCLE_modifiable>
268        </div></form>
269        </BOUCLE_document>
270        </BOUCLE_editable>
271</div>
Note: See TracBrowser for help on using the repository browser.