Current File : /home/obaba/public_html/admin/assets/js/form-image-cropping.js

var ImageCropping = function () {
    // function to initiate Jcrop
    // Create variables (in this scope) to hold the API and image size
    var jcrop_api, boundx, boundy;
    var runBasicHandler = function () {
        $('#target').Jcrop({
            onChange: showCoords,
            onSelect: showCoords,
            onRelease: clearCoords
        }, function () {
            jcrop_api = this;
        });
        $('#coords').on('change', 'input', function (e) {
            var x1 = $('#x1').val(),
                x2 = $('#x2').val(),
                y1 = $('#y1').val(),
                y2 = $('#y2').val();
            jcrop_api.setSelect([x1, y1, x2, y2]);
        });
    };
    // Simple event handler, called from onChange and onSelect
    // event handlers, as per the Jcrop invocation above
   var showCoords = function(c) {
        $('#x1').val(c.x);
        $('#y1').val(c.y);
        $('#x2').val(c.x2);
        $('#y2').val(c.y2);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };

    var clearCoords = function() {
        $('#coords input').val('');
    };
    var runPreviewPane = function () {
        // Grab some information about the preview pane
        var $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();
        $('#target2').Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: xsize / ysize
        }, function () {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };
    };
    var runAnimationsTransitions = function () {
        $('#target3').Jcrop({
            bgFade: true,
            bgOpacity: .2,
            setSelect: [60, 70, 540, 330]
        }, function () {
            jcrop_api = this;
        });
        $('#fadetog').on('ifChecked', function (event) {
            jcrop_api.setOptions({
                bgFade: true
            });
        });
        $('#fadetog').on('ifUnchecked', function (event) {
            jcrop_api.setOptions({
                bgFade: false
            });
        });
        $('#shadetog').on('ifUnchecked', function (event) {
            $('#shadetxt').slideUp();
        });
        $('#shadetog').on('ifChecked', function (event) {
            $('#shadetxt').slideDown();
        });
        // Define page sections
        var sections = {
            bgc_buttons: 'Change bgColor',
            bgo_buttons: 'Change bgOpacity',
            anim_buttons: 'Animate Selection'
        };
        // Define animation buttons
        var ac = {
            anim1: [217, 122, 382, 284],
            anim2: [20, 20, 580, 380],
            anim3: [24, 24, 176, 376],
            anim4: [347, 165, 550, 355],
            anim5: [136, 55, 472, 183]
        };
        // Define bgOpacity buttons
        var bgo = {
            Low: .2,
            Mid: .5,
            High: .8,
            Full: 1
        };
        // Define bgColor buttons
        var bgc = {
            R: '#900',
            B: '#4BB6F0',
            Y: '#F0B207',
            G: '#46B81C',
            W: 'white',
            K: 'black'
        };
        // Create fieldset targets for buttons
        for (i in sections) insertSection(i, sections[i]);

        function create_btn(c) {
            var $o = $('<button />').addClass('btn btn-sm');
            if (c)
                $o.append(c);
            return $o;
        }
        var a_count = 1;
        // Create animation buttons
        for (i in ac) {
            $('#anim_buttons .btn-group').append(create_btn(a_count++).click(animHandler(ac[i])), ' ');
        }
        $('#anim_buttons .btn-group').append(create_btn('Bye!').click(function (e) {
            $(e.target).addClass('active');
            jcrop_api.animateTo([300, 200, 300, 200], function () {
                this.release();
                $(e.target).closest('.btn-group').find('.active').removeClass('active');
            });
            return false;
        }));
        // Create bgOpacity buttons
        for (i in bgo) {
            $('#bgo_buttons .btn-group').append(create_btn(i).click(setoptHandler('bgOpacity', bgo[i])), ' ');
        }
        // Create bgColor buttons
        for (i in bgc) {
            $('#bgc_buttons .btn-group').append(create_btn(i).css({
                background: bgc[i],
                color: ((i == 'K') || (i == 'R')) ? 'white' : 'black'
            }).click(setoptHandler('bgColor', bgc[i])), ' ');
        }
        // Function to insert named sections into interface
        function insertSection(k, v) {
            $('#interface').prepend($('<fieldset></fieldset>').attr('id', k).append($('<legend></legend>').append(v), '<div class="btn-toolbar"><div class="btn-group"></div></div>'));
        };
        // Handler for option-setting buttons
        function setoptHandler(k, v) {
            return function (e) {
                $(e.target).closest('.btn-group').find('.active').removeClass('active');
                $(e.target).addClass('active');
                var opt = {};
                opt[k] = v;
                jcrop_api.setOptions(opt);
                return false;
            };
        };
        // Handler for animation buttons
        function animHandler(v) {
            return function (e) {
                $(e.target).addClass('active');
                jcrop_api.animateTo(v, function () {
                    $(e.target).closest('.btn-group').find('.active').removeClass('active');
                });
                return false;
            };
        };
        $('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
        $('#interface').show();
    };
    return {
        init: function () {
            runBasicHandler();
            runPreviewPane();
            runAnimationsTransitions();
        }
    };
}();