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.sections.js
/**
 * SECTIONS HANDLING
 * 
 * Script for creating sections.
 *
 */

(function ($) {

    CMA.sectionIndex = 0;

    /**
     * Set initial section id based on current sections
     *
     */
    CMA.setInitialSectionId = function () {
        var maxId = 0;
        if (typeof (CMA.layout) !== "null" && CMA.layout) {
            if (typeof (CMA.layout.rows) !== "undefined") {

                for (var val in CMA.layout.rows) {
                    var row = CMA.layout.rows;

                    if (row[val]['section'] > maxId)
                        maxId = row[val]['section'];
                }
                CMA.sectionIndex = maxId;

                if (typeof (CMA.layout.sections) == "undefined") {
                    CMA.layout.sections = [];
                }
            }
            else {
                CMA.layout.sections = [];
                CMA.sectionIndex = 1;
            }
        }
    }



    /**
     * Update section classes like first and last class.
     *
     */
    $.fn.refreshSectionsClasses = function () {
        var elementsContainer = $(this);

        $(this).find('.in-section').removeClass('first last');
        $(this).find('.row-container').each(function () {
            var gridContainer = $(this);
            if (gridContainer.hasClass('in-section')) {
                if (!gridContainer.prev().hasClass('in-section')) {
                    gridContainer.addClass('first');
                } else {
                    if (gridContainer.hasClass('force-new-section')) {
                        gridContainer.addClass('first');
                    }
                }

                if (!gridContainer.next().hasClass('in-section')) {
                    gridContainer.addClass('last');
                } else {
                    if (gridContainer.next().hasClass('force-new-section')) {
                        gridContainer.addClass('last');
                    }
                }

            }
        });

        return elementsContainer;
    }

    $.fn.refreshSectionIds = function (oldPosition) {
        var currentRowContainer = $(this);
        var elementsContainer = currentRowContainer.parent();

        if (currentRowContainer.index() < oldPosition) {
            if (!elementsContainer.find('.row-container').eq(oldPosition).next().hasClass('in-section'))
                elementsContainer.find('.row-container').eq(oldPosition).updateSectionNumbers(++CMA.sectionIndex, false);
        } else {
            if (!elementsContainer.find('.row-container').eq(oldPosition).hasClass('in-section'))
                currentRowContainer.updateSectionNumbers(++CMA.sectionIndex, true);
        }

        return currentRowContainer;
    }



    /**
     * Update section numbers from current section to all sections after,
     * until the first empty
     *
     * @param sectionId
     */
    $.fn.updateSectionNumbers = function (sectionId, includeCurrent) {
        var currentRowContainer = $(this);

        // get all rows that are in section until current section
        var allRows = currentRowContainer.nextUntil(':not(".in-section"), .force-new-section');

        if (includeCurrent) {
            allRows = allRows.add(currentRowContainer);
        }

        allRows.each(function () {
            // set new section id
            var rowPos = CMA.getElementPosition($(this));

            CMA.layout.rows[rowPos['rowId']].section = sectionId;
        });

        currentRowContainer.parent().refreshSectionsClasses();
        CMA.saveLayoutDataInHTML();

        return currentRowContainer;
    }


    /**
     * Adding row to section.
     *
     * @param move
     * @param id
     */
    $.fn.rowToSection = function (move, id) {

        if (typeof (move) === 'undefined')
            move = false;
        if (typeof (id) === 'undefined')
            var load = false;
        else
            load = true;

        var rowContainer = $(this);

        // we want to add selected row in section
        if (!rowContainer.hasClass('in-section') || move) {
            var sectionId, rowIndex;
            if (!move)
                rowContainer.addClass('in-section').rowsResizeGrids();

            // check if previous or next row is in section
            var prevRowInSection = rowContainer.prev().hasClass('in-section');
            var nextRowInSection = rowContainer.next().hasClass('in-section');

            // both previous and next are in section
            if (prevRowInSection && nextRowInSection) {

                // if id isn't available current row will have 
                // same id as previous row
                if (typeof (id) === 'undefined') {
                    rowIndex = rowContainer.prev().index();
                    sectionId = CMA.layout.rows[rowIndex].section;
                } else {
                    rowIndex = rowContainer.prev().index();
                    sectionId = CMA.layout.rows[rowIndex].section;

                    if (sectionId != id) {
                        rowContainer.addClass('force-new-section');
                    }

                    var sectionId = id;
                }

                rowContainer.updateSectionNumbers(sectionId);
            }
            // only previous row is in section
            else if (prevRowInSection) {
                if (typeof (id) === 'undefined') {
                    // get id of previous row
                    rowIndex = rowContainer.prev().index();
                    sectionId = CMA.layout.rows[rowIndex].section;
                } else {
                    rowIndex = rowContainer.prev().index();
                    sectionId = CMA.layout.rows[rowIndex].section;

                    if (sectionId != id) {
                        rowContainer.addClass('force-new-section');
                    }

                    var sectionId = id;
                }

            }
            // only next row is in section
            else if (nextRowInSection) {
                // get id of next row
                rowIndex = rowContainer.next().index();
                sectionId = CMA.layout.rows[rowIndex].section;
            }
            // previous and next rows are not in section
            else {
                if (!move) {
                    // if id isn't available get last sectionIndex and increase it
                    if (typeof (id) === 'undefined') {
                        var sectionId = ++CMA.sectionIndex;
                    } else {
                        var sectionId = id;
                    }
                }

            }

            rowIndex = rowContainer.index();

            if (typeof (sectionId) == 'undefined') {
                CMA.layout.rows[rowIndex].section = ++CMA.sectionIndex;
            } else {
                CMA.layout.rows[rowIndex].section = sectionId;
            }



        }
        // removing rows from section
        else if (rowContainer.hasClass('in-section')) {
            // check if previous or next row is in section
            var prevRowInSection = rowContainer.prev().hasClass('in-section');
            var nextRowInSection = rowContainer.next().hasClass('in-section');

            // both previous and next are in section
            if (prevRowInSection && nextRowInSection) {
                var sectionId = ++CMA.sectionIndex;
                rowContainer.updateSectionNumbers(sectionId);
            }

            rowContainer.removeClass('in-section force-new-section').rowsResizeGrids();
            rowIndex = rowContainer.index();
            CMA.layout.rows[rowIndex].section = "";
        }

        CMA.saveLayoutDataInHTML();
        return this;
    }

    /**
     * Add event handlers for section options
     *
     * @param load
     */
    $.fn.prepareSectionOptions = function (load) {

        var $row = $(this);
        $(this)
                .find('.row-overlay')
                .on('click', function () {
                    $row.rowToSection().parent().refreshSectionsClasses();
                })
                .end()
                .find('.section-options-button')
                .on('click', function () {
                    // get row position
                    var rowPos = CMA.getElementPosition($(this).closest('.row-container'));
                    // get section id from Layout object
                    var sectionId = CMA.layout.rows[rowPos['rowId']].section;
                    // create dialog
                    var dialog = CMA.createSectionDialog(sectionId, load);

                    // open the dialog
                    dialog.dialog('open');
                })
                .end()
                .find('.new-section-button')
                .on('click', function () {
                    $row.updateSectionNumbers(++CMA.sectionIndex, true).addClass('force-new-section');
                    $row.parent().refreshSectionsClasses();
                });
    }



    /**
     * Setup a section container after its been created.
     *
     * @param load
     */
    CMA.activateSectionMode = function (load) {
        if (typeof (load) === 'undefined')
            load = false;
        var dialog;
        var $contentManager = $('#content-maker');
        var dialogButtons = {};

        if ($contentManager.hasClass('section-mode')) {
            $contentManager.removeClass('section-mode');
            $contentManager.find('.row-container .row-overlay').css('display', 'none');
        } else {
            if (!load) {
                $contentManager.addClass('section-mode');
                $contentManager.find('.row-container .row-overlay').css('display', 'block');
            }

        }

    }



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

        if (typeof (CMA.sections[sectionId]) != "undefined" && CMA.sections[sectionId])
            return CMA.sections[sectionId];
        var promise;
        // Create the section dialog
        var dialog = $('<div class="cma-section-dialog"></div>').show()
                .dialog({
                    dialogClass: 'cma-admin-dialog cma-section-dialog',
                    autoOpen: false,
                    resizable: false,
                    draggable: false,
                    modal: false,
                    title: CMA.i10n.templates.section['editSection'],
                    minWidth: 760,
                    maxHeight: Math.round($(window).height() * 0.8),
                    create: function () {
                        var currentDialog = $(this);
                        var data = {action: 'cma_section_options_form', id: sectionId};
                        promise = CMA.fetchHTMLForms(data, $(this));

                        // fill in fields when results are returned
                        promise.done(function (response) {
                            var data = {};

                            if (typeof (CMA.layout.sections && CMA.layout.sections[sectionId]) != "undefined") {
                                data.options = CMA.layout.sections[sectionId];
                                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('sectionsdialogcreated');
                        });

                        // save sectionId in dialog data attribute
                        $(this).data('id', sectionId);
                    },
                    open: function () {
                        var currentDialog = $(this);

                        promise.done(function (response) {
                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('sectionsdialogopen');
                        });

                        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);

                        // initialize section array if not created before
                        if (typeof (CMA.layout.sections) == "undefined") {
                            CMA.layout.sections = [];
                        }

                        // trigger event so we can hook up onto it and change form
                        currentDialog.trigger('sectionsdialogclose');

                        // get section id from dialog data attribute
                        var sectionId = $(this).data('id');

                        // save new options
                        var sectionOptions = CMA.getDialogOptions($(this));

                        CMA.layout.sections[sectionId] = sectionOptions;

                        CMA.saveLayoutDataInHTML();

                        $(this).data('overlay').remove();
                        $('#cma-elements-container .element.new-element').show().removeClass('new-element');
                        
                        // trigger event so we can hook up onto it and change form
                        currentDialog.trigger('sectionsdialogcloseafter');

                    },
                    buttons: [{text: CMA.i10n.buttons['done'], click: function () {
                                dialog = CMA.sections[sectionId];
                                dialog.dialog('close');
                            }}]
                })
                .on('keydown', function (e) {
                    if (e.keyCode === $.ui.keyCode.ESCAPE) {
                        dialog = CMA.sections[sectionId];
                        dialog.dialog('close');
                    }
                });

        dialog
                .find('.element').disableSelection();

        dialog.find('input[name^="sections"]').each(function () {
            var attrName = $(this).attr('name');
            var nameWithId = attrName.replace(/\{\$id\}/g, sectionId);
            $(this).attr('name', nameWithId);
        });

        // save dialog for later use
        CMA.sections[sectionId] = dialog;

        return dialog;
    }

})(jQuery);