source: extensions/thumbCropper/thumbcropper.tpl @ 15907

Revision 12501, 6.3 KB checked in by Dsls, 8 years ago (diff)

Thumb Cropper v0.4 commit

Line 
1{include file='include/colorbox.inc.tpl'}
2{combine_script id='jquery.jcrop' load='footer' require='jquery' path='plugins/thumbCropper/js/jquery.Jcrop.min.js'}
3{combine_css path="plugins/thumbCropper/thumbcropper.css"}
4
5{footer_script}
6// Create variables (in this scope) to hold the API and image size
7var jcrop_api;
8var ws_data = {ldelim}
9        'width':{$IMG_WIDTH},
10        'height':{$IMG_HEIGHT},
11        'ratio': {$IMG_WIDTH}/{$IMG_HEIGHT}
12{rdelim};
13var tc_pwg_token = '{$TC_PWG_TOKEN}';
14var img_id={$IMG_ID};
15var max_width, max_height;
16var thumb_data = {ldelim}
17        'x1': {$thumb_data.x1},
18        'y1': {$thumb_data.y1},
19        'x2': {$thumb_data.x2},
20        'y2': {$thumb_data.y2},
21{rdelim};
22var ratio;
23{literal}
24jQuery(document).ready(function() {
25       
26        jQuery(".cbinline").colorbox({
27                inline:true,
28                width:"80%",
29                onComplete: function() {
30                  $('#target').Jcrop({
31                        setSelect : [thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2],
32                        boxWidth: 800,
33                        boxHeight: 500,
34                        onChange: set_thumb_data,
35                        onSelect: set_thumb_data,
36                  },function(){
37                        $("#websize_image").css("width",$(".jcrop-holder").css("width"));
38                        this.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
39                        // Store the API in the jcrop_api variable
40                        jcrop_api = this;
41                  });
42                }
43        });
44       
45        function update_thumb_size() {
46                max_width =  parseInt($("#maxwidth").val());
47                max_height = parseInt($("#maxheight").val());
48                var dx = thumb_data.x2-thumb_data.x1;
49                var dy = thumb_data.y2-thumb_data.y1;
50               
51                var nwidth = max_width;
52                var nheight = Math.round(max_width/dx*dy);
53               
54                if (nheight > max_height) {
55                        nheight = max_height;
56                        nwidth = Math.round(max_height/dy*dx);
57                }
58                thumb_data.width = nwidth;
59                thumb_data.height = nheight;
60
61        var rx = thumb_data.width / dx;
62        var ry = thumb_data.height / dy;
63
64                $('#div_preview').css({
65                width: thumb_data.width,
66                height: thumb_data.height,
67                margin: "0 auto"
68                });
69                $('#preview_max').css({
70                width: max_width,
71                height: max_height
72                });
73                $('#preview').css({
74                        width: Math.round(rx * ws_data.width) + 'px',
75                        height: Math.round(ry * ws_data.height) + 'px',
76                        marginLeft: '-' + Math.round(rx * thumb_data.x1) + 'px',
77                        marginTop: '-' + Math.round(ry * thumb_data.y1) + 'px'
78                });
79               
80        }
81       
82        function set_thumb_data(c) {
83                thumb_data.x1 = c.x;
84                thumb_data.x2 = c.x2;
85                thumb_data.y1 = c.y;
86                thumb_data.y2 = c.y2;
87                update_thumb_size();
88        }
89       
90        function max_thub_size_changed() {
91                if ($("select[name=ratio]").val()=='thumb') {
92                                max_width =  parseInt($("#maxwidth").val());
93                                max_height = parseInt($("#maxheight").val());
94                                jcrop_api.setOptions({'aspectRatio':max_width/max_height});
95                }
96        update_thumb_size();
97        }
98       
99        $("#maxwidth").change(max_thub_size_changed);
100        $("#maxheight").change(max_thub_size_changed);
101
102        $("#center").click(function(e) {
103                var dx = thumb_data.x2 - thumb_data.x1;
104                var dy = thumb_data.y2 - thumb_data.y1;
105                thumb_data.x1 = Math.round((ws_data.width-dx)/2);
106                thumb_data.y1 = Math.round((ws_data.height-dy)/2);
107                thumb_data.x2 = thumb_data.x1+dx;
108                thumb_data.y2 = thumb_data.y1+dy;
109                jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
110                update_thumb_size();
111        });
112
113        $("#reset").click(function(e) {
114                thumb_data.x1 = 0;
115                thumb_data.y1 = 0;
116                thumb_data.x2 = ws_data.width;
117                thumb_data.y2 = ws_data.height;
118                jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
119                update_thumb_size();
120        });
121
122        $("select[name=ratio]").click(function(e) {
123                switch ($(this).val()) {
124                case "none" :
125                        jcrop_api.setOptions({'aspectRatio':0});
126                        break;
127                case "image" :
128                        jcrop_api.setOptions({'aspectRatio':ws_data.ratio});
129                        break;
130                case "thumb" :
131                        jcrop_api.setOptions({'aspectRatio':max_width/max_height});
132                        break;
133                }
134        });
135       
136
137        $("#create").click(function(e) {
138                $.ajax({
139                        type: 'GET',
140                        url: 'ws.php',
141                        data: {
142                                method: "pwg.image.thumbcrop",
143                                format: 'json',
144                                image_id: img_id,
145                                x1: thumb_data.x1,
146                                y1: thumb_data.y1,
147                                x2: thumb_data.x2,
148                                y2: thumb_data.y2,
149                                width: thumb_data.width,
150                                height: thumb_data.height,
151                                pwg_token: tc_pwg_token,
152
153                        },
154                        dataType: 'json',
155                        success: ( function(data) {
156                                var th = $("img.Thumbnail");
157                                var uri=th.attr('src');
158                                th.attr('src',uri+"?"+(new Date().getTime()));
159                                $.colorbox.close();
160                        }),
161                        error: ( function(data) {
162                        })}
163                );
164                e.stopPropagation();
165                return false;
166               
167        });
168        $("#tc_form").keypress(function(e){
169                if (e.which == 13) {
170                        e.stopPropagation();
171                        return false;
172                }
173        });
174
175});
176
177{/literal}
178{/footer_script}
179<div style="display: none;">
180        <div id="thumbcropper">
181
182                <h2>{'Thumbnail customization'|@translate}</h1>
183                        <form id="tc_form">
184                                <table>
185                                <tr><td rowspan="2">
186                                <div id="websize_image" style="margin:0 auto;width: 800px">
187                                        <img src="{$IMG_SRC}" id="target" alt="image"/>
188                                </div>
189                                </td>
190                                <td>
191                                <fieldset><legend>{'Preview'|@translate}</legend>
192                                        <div id="preview_max" style="padding:0 auto;">
193                                        <div id="div_preview" style="width:100px;height:100px;overflow:hidden;">
194                                                <img src="{$IMG_SRC}" id="preview" alt="{'Preview'|@translate}" />
195                                        </div>
196                                        </div>
197                                </fieldset>
198                                </td>
199                                </tr>
200                                <tr>
201                                <td class="tcfields">
202                                <fieldset><legend>{'Settings'|@translate}</legend>
203                                <p>{'Max width'|@translate} :
204                                <input type="text" name="maxwidth" id="maxwidth" value="{$thumb_data.width}" size="4" maxlength="4" /> {'px'|@translate}</p>
205                                <p>{'Max height'|@translate} :
206                                <input type="text" name="maxheight" id="maxheight" value="{$thumb_data.height}" size="4" maxlength="4" /> {'px'|@translate}</p>
207                                <p>{'Thumbnail ratio'|@translate} :
208                                <select name="ratio">
209                                        <option value="none" selected="selected">{'No constraint'|@translate}</option>
210                                        <option value="image">{'Original image ratio'|@translate}</option>
211                                        <option value="thumb">{'Thumbnail max size ratio'|@translate}</option>
212                                </select><p>
213                                <p><input type="button" id="center" value="{'Center'|@translate}" /></p>
214                                <p><input type="button" id="reset" value="{'Reset'|@translate}" /></p>
215                                <p><input type="button" id="create" value="{'Create thumbnail'|@translate}" /></p>
216                                </fieldset>
217                                </td>
218                                </tr>
219                                </table>
220                        </form>
221
222        </div>
223</div>
224
225
Note: See TracBrowser for help on using the repository browser.