source: extensions/thumbCropper/thumbcropper.tpl @ 13484

{include file='include/colorbox.inc.tpl'}
{combine_script id='jquery.jcrop' load='footer' require='jquery' path='plugins/thumbCropper/js/jquery.Jcrop.min.js'}
{combine_css path="plugins/thumbCropper/thumbcropper.css"}

{footer_script}
// Create variables (in this scope) to hold the API and image size
var jcrop_api;
var ws_data = {ldelim}
        'width':{$IMG_WIDTH},
        'height':{$IMG_HEIGHT},
        'ratio': {$IMG_WIDTH}/{$IMG_HEIGHT}
{rdelim};
var tc_pwg_token = '{$TC_PWG_TOKEN}';
var img_id={$IMG_ID};
var max_width, max_height;
var thumb_data = {ldelim}
        'x1': {$thumb_data.x1},
        'y1': {$thumb_data.y1},
        'x2': {$thumb_data.x2},
        'y2': {$thumb_data.y2},
{rdelim};
var ratio;
{literal}
jQuery(document).ready(function() {
        
        jQuery(".cbinline").colorbox({
                inline:true, 
                width:"80%",
                onComplete: function() {
                  $('#target').Jcrop({
                        setSelect : [thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2],
                        boxWidth: 800,
                        boxHeight: 500,
                        onChange: set_thumb_data,
                        onSelect: set_thumb_data,
                  },function(){
                        $("#websize_image").css("width",$(".jcrop-holder").css("width"));
                        this.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
                        // Store the API in the jcrop_api variable
                        jcrop_api = this;
                  });
                }
        });
        
        function update_thumb_size() {
                max_width =  parseInt($("#maxwidth").val());
                max_height = parseInt($("#maxheight").val());
                var dx = thumb_data.x2-thumb_data.x1;
                var dy = thumb_data.y2-thumb_data.y1;
                
                var nwidth = max_width;
                var nheight = Math.round(max_width/dx*dy);
                
                if (nheight > max_height) {
                        nheight = max_height;
                        nwidth = Math.round(max_height/dy*dx);
                }
                thumb_data.width = nwidth;
                thumb_data.height = nheight;

        var rx = thumb_data.width / dx;
        var ry = thumb_data.height / dy;

                $('#div_preview').css({
                width: thumb_data.width,
                height: thumb_data.height,
                margin: "0 auto"
                });
                $('#preview_max').css({
                width: max_width,
                height: max_height
                });
                $('#preview').css({
                        width: Math.round(rx * ws_data.width) + 'px',
                        height: Math.round(ry * ws_data.height) + 'px',
                        marginLeft: '-' + Math.round(rx * thumb_data.x1) + 'px',
                        marginTop: '-' + Math.round(ry * thumb_data.y1) + 'px'
                });
                
        }
        
        function set_thumb_data(c) {
                thumb_data.x1 = c.x;
                thumb_data.x2 = c.x2;
                thumb_data.y1 = c.y;
                thumb_data.y2 = c.y2;
                update_thumb_size();
        }
        
        function max_thub_size_changed() {
                if ($("select[name=ratio]").val()=='thumb') {
                                max_width =  parseInt($("#maxwidth").val());
                                max_height = parseInt($("#maxheight").val());
                                jcrop_api.setOptions({'aspectRatio':max_width/max_height});
                }
        update_thumb_size();
        }
        
        $("#maxwidth").change(max_thub_size_changed);
        $("#maxheight").change(max_thub_size_changed);

        $("#center").click(function(e) {
                var dx = thumb_data.x2 - thumb_data.x1;
                var dy = thumb_data.y2 - thumb_data.y1;
                thumb_data.x1 = Math.round((ws_data.width-dx)/2);
                thumb_data.y1 = Math.round((ws_data.height-dy)/2);
                thumb_data.x2 = thumb_data.x1+dx;
                thumb_data.y2 = thumb_data.y1+dy;
                jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
                update_thumb_size();
        });

        $("#reset").click(function(e) {
                thumb_data.x1 = 0;
                thumb_data.y1 = 0;
                thumb_data.x2 = ws_data.width;
                thumb_data.y2 = ws_data.height;
                jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]);
                update_thumb_size();
        });

        $("select[name=ratio]").click(function(e) {
                switch ($(this).val()) {
                case "none" :
                        jcrop_api.setOptions({'aspectRatio':0});
                        break;
                case "image" :
                        jcrop_api.setOptions({'aspectRatio':ws_data.ratio});
                        break;
                case "thumb" :
                        jcrop_api.setOptions({'aspectRatio':max_width/max_height});
                        break;
                }
        });
        

        $("#create").click(function(e) {
                $.ajax({
                        type: 'GET', 
                        url: 'ws.php', 
                        data: {
                                method: "pwg.image.thumbcrop",
                                format: 'json',
                                image_id: img_id,
                                x1: thumb_data.x1,
                                y1: thumb_data.y1,
                                x2: thumb_data.x2,
                                y2: thumb_data.y2,
                                width: thumb_data.width,
                                height: thumb_data.height,
                                pwg_token: tc_pwg_token,

                        },
                        dataType: 'json',
                        success: ( function(data) {
                                var th = $("img.Thumbnail");
                                var uri=th.attr('src');
                                th.attr('src',uri+"?"+(new Date().getTime()));
                                $.colorbox.close();
                        }),
                        error: ( function(data) { 
                        })}
                );
                e.stopPropagation();
                return false;
                
        });
        $("#tc_form").keypress(function(e){
                if (e.which == 13) {
                        e.stopPropagation();
                        return false;
                }
        });

});

{/literal}
{/footer_script}
<div style="display: none;">
        <div id="thumbcropper">

                <h2>{'Thumbnail customization'|@translate}</h1>
                        <form id="tc_form">
                                <table>
                                <tr><td rowspan="2">
                                <div id="websize_image" style="margin:0 auto;width: 800px">
                                        <img src="{$IMG_SRC}" id="target" alt="image"/>
                                </div>
                                </td>
                                <td>
                                <fieldset><legend>{'Preview'|@translate}</legend>
                                        <div id="preview_max" style="padding:0 auto;">
                                        <div id="div_preview" style="width:100px;height:100px;overflow:hidden;">
                                                <img src="{$IMG_SRC}" id="preview" alt="{'Preview'|@translate}" />
                                        </div>
                                        </div>
                                </fieldset>
                                </td>
                                </tr>
                                <tr>
                                <td class="tcfields">
                                <fieldset><legend>{'Settings'|@translate}</legend>
                                <p>{'Max width'|@translate} :
                                <input type="text" name="maxwidth" id="maxwidth" value="{$thumb_data.width}" size="4" maxlength="4" /> {'px'|@translate}</p>
                                <p>{'Max height'|@translate} :
                                <input type="text" name="maxheight" id="maxheight" value="{$thumb_data.height}" size="4" maxlength="4" /> {'px'|@translate}</p>
                                <p>{'Thumbnail ratio'|@translate} :
                                <select name="ratio">
                                        <option value="none" selected="selected">{'No constraint'|@translate}</option>
                                        <option value="image">{'Original image ratio'|@translate}</option>
                                        <option value="thumb">{'Thumbnail max size ratio'|@translate}</option>
                                </select><p>
                                <p><input type="button" id="center" value="{'Center'|@translate}" /></p>
                                <p><input type="button" id="reset" value="{'Reset'|@translate}" /></p>
                                <p><input type="button" id="create" value="{'Create thumbnail'|@translate}" /></p>
                                </fieldset>
                                </td>
                                </tr>
                                </table>
                        </form>

        </div>
</div>