HOME

Mini Shell 1.0
DIR:/home/psrcpvtltd.com/www/wp-content/plugins/content-maker/js/
Current File : //home/psrcpvtltd.com/www/wp-content/plugins/content-maker/js/cma.rows-grids.js
/**
 * ROWS AND GRIDS
 * 
 * Script for creating rows and grids.
 *
 */

(function ($) {

    var rowId = 0;
    var gridId = 0;
    var sectionId = 0;
    CMA.sections = new Array();
    CMA.gridSize = 0;



    /**
     * Visually resize all the grids
     */
    $.fn.rowsResizeGrids = function () {

        return $(this).each(function () {
            var $$ = $(this);
            $$.find('.row, .row .grid, .row .grid .grid-wrapper').css('height', 'auto');

            if ($$.hasClass('in-section')) {
                var totalWidth = $$.parent().outerWidth() - 63;
            } else {
                var totalWidth = $$.parent().outerWidth() - 43;
            }

            CMA.gridSize = Math.floor(totalWidth / 12);

            var left = 0;
            var maxHeight = 0;
            var elementWidth = 0;
            $$.find('.row .grid').each(function () {
                elementWidth = CMA.gridSize * Number($(this).attr('data-size'));
                maxHeight = Math.max(maxHeight, $(this).height());

                $(this).width(elementWidth).css('left', left);
                left += elementWidth;
            });
            // Resize all the grids and cell wrappers
            $$.find('.row, .row .grid, .row .grid .grid-wrapper').css('height', Math.max(maxHeight, 107));

            // set row width without controls on the right
            var rowWidth = CMA.gridSize * 12;

            $$.find('.row').width(rowWidth);

            // set dynamic height
            var controlsHeight = Math.max(maxHeight, 107) + 10;
            $$.find('.controls-container').css({
                height: controlsHeight
            });
        });
    };



    /**
     * Create a new row
     *
     * @param grids
     * @param sizes
     * @param load
     *
     * @return {*}
     */
    CMA.createRow = function (grids, sizes, load) {
        var layout = {};
        layout.grids = [];
        var data = {};
        data.grids = [];
        data.translations = {};

        if (typeof (CMA.layout.rows) == "undefined")
            CMA.layout.rows = [];

        if (sizes == null || sizes.length == 0) {
            sizes = [];
            gridSizes = [];
            for (var i = 0; i < grids; i++) {
                sizes[i] = 12 / grids;
            }
        }

        // prepare data for template
        for (var i = 0; i < sizes.length; i++) {
            var grid = {};
            var percentage = Math.round((sizes[i] / 12) * 100, 2);
            var position = '';
            if (i == 0)
                position = 'first';
            else if (position == (sizes.length - 1))
                position = 'last';

            grid.size = sizes[i];
            grid.percentage = percentage;
            grid.position = position;

            data.grids.push(grid);
        }

        // add translations to the object
        data.translations.move = CMA.i10n.templates.row['move'];
        data.translations.options = CMA.i10n.templates.row['options'];
        data.translations['delete'] = CMA.i10n.templates.row['delete'];
        data.translations.sectionOptions = CMA.i10n.templates.row['sectionOptions'];
        data.translations.sectionStart = CMA.i10n.templates.row['sectionStart'];
        data.translations.sectionStartHint = CMA.i10n.templates.row['sectionStartHint'];

        // fetch and render template
        var rowTemplate = $("#cma-tpl-row").html();
        var row = _.template(rowTemplate, data, CMA.templatesOptions);
        var $row = $(row);

        // save rowID to data attribute for later use
        $row.data('id', rowId);

        $row.find('.cma-row-options').on('click', function () {
            var $this = $(this).closest('.row-container');
            if (typeof ($this.data('dialog')) != "undefined" || $this.data('dialog')) {
                $this.data('dialog').dialog('open');
                return;
            }

            var promise;
            var dialog = $('<div class="rows-dialog"></div>')
                    .dialog({
                        dialogClass: 'cma-admin-dialog rows-admin-dialog',
                        autoOpen: false,
                        resizable: false,
                        draggable: false,
                        modal: false,
                        title: CMA.i10n.templates.row['editRow'],
                        minWidth: 760,
                        maxHeight: Math.round($(window).height() * 0.8),
                        create: function () {
                            var currentDialog = $(this);
                            var rowId = $this.data('id');

                            var data = {action: 'cma_row_options_form', id: rowId};
                            promise = CMA.fetchHTMLForms(data, currentDialog);
                            promise.done(function (response) {
                                var data = {};

                                var elPos = CMA.getElementPosition($this);
                                data.options = CMA.layout.rows[elPos.rowId].options;

                                if (!_.isEmpty(data))
                                    CMA.fillDialogOptionFields(currentDialog, data);

                                // calculate new vertical position for dialog
                                CMA.setDialogVerticalPosition(currentDialog);

                                // trigger event so we can hook up onto it and change form
                                currentDialog.trigger('rowsdialogcreated', [$row, $(this)]);
                            });

                        },
                        open: function () {
                            var currentDialog = $(this);

                            promise.done(function (response) {
                                // trigger event so we can hook up onto it and change form
                                currentDialog.trigger('rowsdialogopen', [$row, $(this)]);
                            });

                            var overlay = $('<div class="cma-ui-widget-overlay ui-front"></div>').css('z-index', 1000);
                            $(this).data('overlay', overlay).closest('.ui-dialog').before(overlay);
                        },
                        close: function () {
                            var currentDialog = $(this);

                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('rowsdialogclose', [$row, $(this)]);

                            var elementPos = CMA.getElementPosition($this);
                            var elementOptions = CMA.getDialogOptions($(this));

                            CMA.layout.rows[elementPos['rowId']].options = elementOptions;

                            $(this).data('overlay').remove();
                            $('#cma-elements-container .element.new-element').show().removeClass('new-element');

                            CMA.saveLayoutDataInHTML();

                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('rowsdialogcloseafter', [$row, $(this)]);
                        },
                        buttons: [{text: CMA.i10n.buttons['done'], click: function () {
                                    dialog.dialog('close');
                                    $(this).trigger('rowsdialogdone', [$row]);
                                }}]
                    })
                    .on('keydown', function (e) {
                        if (e.keyCode === $.ui.keyCode.ESCAPE) {
                            dialog = CMA.sections[sectionId];
                            dialog.dialog('close');
                        }
                    });

            // save dialog for later usage
            $this.data('dialog', dialog);
            dialog.dialog('open');

        }).end().find('.cma-remove-row').on('click', function () {
            var confirm = window.confirm("Are you sure you want to delete the row?");
            if (confirm == true) {
                // hide row
                $row.hide();

                // get position of row
                var rowPos = CMA.getElementPosition($row);

                // remove it from layout object
                CMA.changeRowPosition(rowPos.rowId);

                // remove row html from grid
                $row.remove();
            }
            return false;

        }).end().appendTo('#cma-elements-container');

        $row.find('.grid .grid-options').on('click', function () {
            var grid = $(this).closest('.grid');
            
            var dialog = CMA.createGridDialog(grid);
            dialog.dialog('open');
        });

        // call function that will prepare section options
        $row.prepareSectionOptions(load);

        // store grids data in temp object
        $row.find('.grid').each(function (i) {
            layout.grids[i] = {};
            layout.grids[i].elements = [];
            layout.grids[i].size = sizes[i];
            layout.grids[i].options = {};

            // Store gridId to object so we can access it later
            $(this).data('gridId', gridId)

            gridId++;
        });

        if (typeof (load) == "undefined" || !load) {
            var rowSize = CMA.layout.rows.length;
            // store grids data
            CMA.layout.rows[rowSize] = layout;
            CMA.layout.rows[rowSize].section = null;
            CMA.saveLayoutDataInHTML();
        }

        rowId++;

        // Setup the grid
        CMA.setupRow($row);

        return $row;
    }

    /**
     * Create dialog for section with defined section ID
     *
     * @param sectionId
     * @param load
     */
    CMA.createGridDialog = function (grid) {

        var $this = grid
        if (typeof ($this.data('dialog')) != "undefined" || $this.data('dialog')) {
            return $this.data('dialog');
        }

        var promise;
        var dialog = $('<div class="grids-dialog"></div>')
                .dialog({
                    dialogClass: 'cma-admin-dialog grid-admin-dialog',
                    autoOpen: false,
                    resizable: false,
                    draggable: false,
                    modal: false,
                    title: CMA.i10n.templates.grid['editGrid'],
                    minWidth: 760,
                    maxHeight: Math.round($(window).height() * 0.8),
                    create: function () {
                        var currentDialog = $(this);
                        var gridId = $this.data('gridId');

                        var data = {action: 'cma_grid_options_form', id: gridId};
                        promise = CMA.fetchHTMLForms(data, currentDialog);
                        promise.done(function (response) {
                            var data = {};

                            var elPos = CMA.getElementPosition($this);
                            data.options = CMA.layout.rows[elPos.rowId].grids[elPos.gridId].options;

                            if (!_.isEmpty(data))
                                CMA.fillDialogOptionFields(currentDialog, data);

                            // calculate new vertical position for dialog
                            CMA.setDialogVerticalPosition(currentDialog);

                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('gridsdialogcreated', [$this, $(this)]);
                        });

                    },
                    open: function () {
                        var currentDialog = $(this);

                        promise.done(function (response) {
                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('gridsdialogopen', [$this, $(this)]);
                        });

                        var overlay = $('<div class="cma-ui-widget-overlay ui-front"></div>').css('z-index', 1000);
                        $(this).data('overlay', overlay).closest('.ui-dialog').before(overlay);
                    },
                    close: function () {
                        var currentDialog = $(this);

                        // trigger event so we can hook up onto it and change form
                        currentDialog.trigger('gridsdialogclose', [$this, $(this)]);

                        var elementPos = CMA.getElementPosition($this);
                        var elementOptions = CMA.getDialogOptions($(this));

                        CMA.layout.rows[elementPos['rowId']].grids[elementPos['gridId']].options = elementOptions;

                        $(this).data('overlay').remove();
                        $('#cma-elements-container .element.new-element').show().removeClass('new-element');

                        CMA.saveLayoutDataInHTML();

                        // trigger event so we can hook up onto it and change form
                        currentDialog.trigger('gridsdialogcloseafter', [$this, $(this)]);
                    },
                    buttons: [{text: CMA.i10n.buttons['done'], click: function () {
                                dialog.dialog('close');
                                $(this).trigger('gridsdialogdone', [$this]);
                            }}]
                })
                .on('keydown', function (e) {
                    if (e.keyCode === $.ui.keyCode.ESCAPE) {
                        dialog = CMA.sections[sectionId];
                        dialog.dialog('close');
                    }
                });

        // save dialog for later usage
        $this.data('dialog', dialog);        

        return dialog;
    }



    /**
     * Change grid size
     * 
     * @param container
     * @param newSize
     * @param inSection
     */
    CMA.changeGridsNumber = function (container, newSize, inSection, event) {
        var data = {};

        // get position and number of grids for current row
        var rowPos = CMA.getElementPosition(container);
        var gridSize = CMA.layout.rows[rowPos.rowId].grids.length;

        // if size isn't changed, stop executing script
        if (gridSize == newSize)
            return;

        // get options and dialog for current row
        data.options = CMA.layout.rows[rowPos.rowId].options;
        data.options.grid_number = newSize;
        var dialog = container.data('dialog');
        var tmpRow = CMA.layout.rows[rowPos.rowId].grids;
        var current = $('#cma-elements-container .row-container').eq(rowPos.rowId);

        // create new row
        var newContainer = window.CMA.createRow(newSize);
        var newIndex = newContainer.index();

        // insert new row in layout
        newContainer.insertBefore(current);

        // move elements from current row to new one
        container.find('.grid').each(function (index, val) {
            if (index >= newSize)
                return;

            var elements = $(this).find('.element');
            var elementsContainer = newContainer.find('.grid').eq(index).find('.elements-container');
            CMA.addElementToGrid(elements, elementsContainer, null, true);
        });

        // if old row has more grids then new, remove grids
        // otherwise add new grids
        if (gridSize > newSize) {
            tmpRow = _.first(tmpRow, newSize);
            _.each(tmpRow, function (element, index, list) {
                tmpRow[index].size = (12 / newSize);
            });
        } else {
            for (var i = gridSize; i < newSize; i++) {
                tmpRow.push({elements: new Array()});
            }

            _.each(tmpRow, function (element, index, list) {
                tmpRow[index].size = (12 / newSize);
            });
        }

        // replace old grids with new ones and remove newly created row in object
        CMA.layout.rows[rowPos.rowId].grids = tmpRow;
        CMA.layout.rows.splice(newIndex, 1);

        // remove dialog and container
        dialog.dialog('destroy');
        container.remove();

        CMA.saveLayoutDataInHTML();
    }



    /**
     * Change row position
     * 
     * @param oldPosition
     * @param newPosition
     */
    CMA.changeRowPosition = function (oldPosition, newPosition) {
        var rows = CMA.layout.rows;
        var oldRow = rows[oldPosition];
        rows.splice(oldPosition, 1);
        if (typeof (newPosition) != "undefined") {
            rows.splice(newPosition, 0, oldRow);
            CMA.layout.rows = rows;
        }

        CMA.saveLayoutDataInHTML();
    }



    /**
     * Setup a row container after its been created.
     *
     * @param $$
     */
    CMA.setupRow = function ($$) {
        $$.rowsResizeGrids();
        $$.find('.row .grid').not('.first').each(function () {
            $(this).resizable({
                handles: 'w',
                containment: 'parent',
                grid: CMA.gridSize,
                minWidth: CMA.gridSize,
                start: function (event, ui) {
                    var maxWidth = ui.element.width() + ui.element.prev().width() - CMA.gridSize;
                    ui.element.resizable({maxWidth: maxWidth, height: "68"});
                },
                stop: function (event, ui) {
                    $$.find('.row .grid').not('.first').resizable('disable').resizable('enable');
                    var gridPos = CMA.getElementPosition($$.find('.row'));

                    $$.find('.grid').each(function (i, val) {
                        var gridSize = Math.round($(this).width() / CMA.gridSize);
                        CMA.layout.rows[gridPos.rowId].grids[i].size = gridSize;
                    });
                    CMA.saveLayoutDataInHTML();
                },
                resize: function (event, ui) {
                    var totalWidth = 0;
                    var current = $(this);
                    var prev = $(this).prev();

                    $(this).resizable({
                        grid: CMA.gridSize,
                        minWidth: CMA.gridSize
                    });

                    prev.css('width', current.position().left - prev.position().left);

                    $$.find('.row .grid')
                            .each(function () {
                                totalWidth += $(this).width();
                            })
                            .each(function () {
                                var percent = $(this).width() / totalWidth;
                                var gridSize = Math.round($(this).width() / CMA.gridSize);

                                var gridDesc = Math.round(percent * 1000 / 10) + '% (' + gridSize + ')';
                                $(this).find('.grid-width-value span').html(gridDesc);
                                $(this).attr('data-size', gridSize);
                            });

                    $$.rowsResizeGrids();
                    CMA.saveLayoutDataInHTML();
                }
            });
        });

        $$.find('.row .grid')
                .click(function () {
                    $('.row .grid').removeClass('grid-selected');
                    $(this).addClass('grid-selected');
                })
                .each(function () {
                    var rowPos = CMA.getElementPosition($(this));
                    var gridSize = CMA.layout.rows[rowPos.rowId].grids[rowPos.gridId].size;
                    $(this).find('.grid-width-value span').html(Math.round((gridSize / 12) * 100) + '% (' + gridSize + ')');
                })
                .find('.elements-container')
                // This sortable handles the widgets inside the grid
                .sortable({
                    placeholder: "ui-state-highlight",
                    connectWith: ".elements-container",
                    tolerance: 'pointer',
                    start: function (event, ui) {
                        // store in DOM what was old position
                        var elPos = CMA.getElementPosition(ui.item);
                        ui.item.data('prev-pos', elPos);
                    },
                    change: function (ui) {
                        var thisContainer = $('#cma-elements-container .ui-state-highlight').closest('.grid').get(0);
                        if (typeof this.lastContainer != 'undefined' && this.lastContainer != thisContainer) {
                            // Resize the new and the last containers
                            $(this.lastContainer).closest('.row-container').rowsResizeGrids();
                            $(thisContainer).closest('.row-container').rowsResizeGrids();
                            thisContainer.click();
                        }

                        // Refresh all the grid sizes after we stop sorting
                        this.lastContainer = thisContainer;
                    },
                    helper: function (ui, el) {
                        return el.clone().css('opacity', 1).addClass('element-dragged');
                    },
                    stop: function (event, ui) {
                        // get old and new positions
                        var newRowIndex = ui.item.closest('.row-container').index();
                        var newGridIndex = ui.item.closest('.grid').index();
                        var prevPosition = ui.item.data('prev-pos');

                        // if we are sorting in same row and grid then call setElementPosition
                        if ((prevPosition.rowId == newRowIndex) && (prevPosition.gridId == newGridIndex)) {
                            CMA.setElementPosition(ui.item, null, ui.item.index(), null);
                        }

                        $('#cma-elements-container .row-container').each(function () {
                            $(this).rowsResizeGrids();
                        });

                        CMA.saveLayoutDataInHTML();

                    },
                    receive: function (event, ui) {
                        // TODO: FINISH DISABLING SORTING ON CERTAIN GRIDS
                        /*
                         var elementName = $(ui.item).data('name');
                         var gridsExclude = CMA.availableElements[elementName].grids_exclude;
                         var gridSize = Number($(event.target).parent().attr('data-size'));
                         
                         if (!_.isEmpty(gridsExclude)) {
                         if (_.isArray(gridsExclude)) {
                         if (_.contains(gridsExclude, gridSize)) {
                         $(ui.sender).sortable('cancel');
                         
                         return false;
                         }
                         } else if (_.isNumber(gridsExclude)) {
                         
                         }
                         } else {
                         // if sender isn't set that means we are sorting in same row
                         var sender = ui.sender.closest('.grid');
                         CMA.setElementPosition(ui.item, null, ui.item.index(), sender);
                         }
                         */
                        // if sender isn't set that means we are sorting in same row
                        var sender = ui.sender.closest('.grid');
                        CMA.setElementPosition(ui.item, null, ui.item.index(), sender);

                    }

                })
                .bind('refreshcells', function () {
                    // Refresh all the grid sizes after we stop sorting
                    $('#cma-elements-container .row-container').each(function () {
                        $(this).rowsResizeGrids(true);
                    });

                })
                .disableSelection();

        if ($('#content-maker').hasClass('section-mode')) {
            $$.find('.row-overlay').show();
        }
    }

    /**
     * Clear all rows in layout.
     *
     */

    CMA.clearRows = function () {
        $('#cma-elements-container .row-container').remove();
        CMA.layout.rows = [];
    }

})(jQuery);