^^&&^^

Edit File: admin-theme-editor.js

/*******************************************************************************
 * Copyright (c) 2019, Code Atlantic LLC
 ******************************************************************************/
/* global PUM_Admin, jQuery, pum_google_fonts, pum_theme_settings_editor */
(function ($) {
    "use strict";

window.PUM_Admin = window.PUM_Admin || {};

window.pum_theme_settings_editor = window.pum_theme_settings_editor || {
        form_args: {},
        current_values: {}
    };

PUM_Admin.themeEditor = {
        preview_fixed_scroll: function () {
            var $preview = $('#pum_theme_preview'),
                $parent = $preview.parent(),
                startscroll = $preview.offset().top - 50;

$(window).on('scroll', function () {
                if ($('> .postbox:visible', $parent).index($preview) === ($('> .postbox:visible', $parent).length - 1) && $(window).scrollTop() >= startscroll) {
                    $preview.css({
                        left: $preview.offset().left,
                        width: $preview.width(),
                        height: $preview.height(),
                        position: 'fixed',
                        top: 50
                    });
                } else {
                    $preview.removeAttr('style');
                }
            });
        },
        update_font_options: function (prefix) {
            var $font_family_select = $('select[id="' + prefix + '_font_family"]'),
                $font_weight_select = $('select[id="' + prefix + '_font_weight"]'),
                $font_style_select = $('select[id="' + prefix + '_font_style"]'),
                $font_weight_options = $font_weight_select.find('option'),
                $font_style_options = $font_style_select.find('option'),
                font_weights = [400, 300, 700, 100, 200, 500, 600, 800, 900],
                font_styles = ['', 'italic'],
                chosen_font = $font_family_select.val(),
                chosen_weight = $font_weight_select.val(),
                chosen_style = $font_style_select.val(),
                font,
                i;

// Google Font Chosen
            if (pum_google_fonts[chosen_font] !== undefined) {

font = pum_google_fonts[chosen_font];

$font_weight_options.prop('disabled', true);
                $font_style_options.prop('disabled', true);

if (font.variants.length) {
                    for (i = 0; font.variants.length > i; i += 1) {
                        if (font.variants[i] === 'regular') {
                            $('option[value="400"]', $font_weight_select).prop('disabled', false);
                            $('option[value=""]', $font_style_select).prop('disabled', false);
                        } else {
                            if (font.variants[i].indexOf('italic') >= 0) {
                                $('option[value="italic"]', $font_style_select).prop('disabled', false);
                            }
                            $('option[value="' + parseInt(font.variants[i], 10) + '"]', $font_weight_select).prop('disabled', false);
                        }
                    }
                }
                // Standard Font Chosen
            } else {
                $font_weight_options.prop('disabled', false);
                $font_style_options.prop('disabled', false);
            }

if (chosen_weight === '' || $font_weight_options.filter('[value="' + chosen_weight + '"]').is(':disabled')) {
                for (i = 0; font_weights.length > i; i += 1) {
                    if (!$font_weight_options.filter('[value="' + font_weights[i] + '"]').is(':disabled')) {
                        $font_weight_select.val(font_weights[i]);
                        break;
                    }
                }
            }

if ($font_style_options.filter('[value="' + chosen_style + '"]').is(':disabled')) {
                for (i = 0; font_styles.length > i; i += 1) {
                    if (!$font_style_options.filter('[value="' + font_styles[i] + '"]').is(':disabled')) {
                        $font_style_select.val(font_styles[i]);
                        break;
                    }
                }
            }

// Update Select2 if enabled.
            $font_family_select.trigger('change.select2');
            $font_weight_select.trigger('change.select2');
            $font_family_select.trigger('change.select2');

$font_weight_select = $font_weight_select.parents('.pum-field');
            if ($font_weight_options.filter(':not(:disabled)').length > 1) {
                $font_weight_select.show();
            } else {
                $font_weight_select.hide();
            }

$font_family_select = $font_style_select.parents('.pum-field');
            if ($font_style_options.filter(':not(:disabled)').length > 1) {
                $font_family_select.show();
            } else {
                $font_family_select.hide();
            }
        },
        update_font_selectboxes: function () {
            return $('select[id$="_font_family"]').each(function () {
                PUM_Admin.themeEditor.update_font_options($(this).attr('id').replace('_font_family', ''));
            });
        },
        update_loaded_font: function (prefix) {
            var $font_family_select = $('select[id="' + prefix + '_font_family"]'),
                $font_weight_select = $('select[id="' + prefix + '_font_weight"]'),
                $font_style_select = $('select[id="' + prefix + '_font_style"]'),
                chosen_font = $font_family_select.val(),
                chosen_weight = $font_weight_select.val(),
                chosen_style = $font_style_select.val(),
                $link = $('link#pum-' + prefix + 'google-font'),
                $new_link = $('<link id="pum-' + prefix + 'google-font" rel="stylesheet" type="text/css">'),
                url;

if (typeof pum_google_fonts[chosen_font] !== 'undefined') {
                url = "//fonts.googleapis.com/css?family=" + chosen_font;

if (chosen_weight !== 'normal') {
                    url += ":" + chosen_weight;
                }

if (chosen_style === 'italic') {
                    if (url.indexOf(':') === -1) {
                        url += ":";
                    }
                    url += "italic";
                }

$new_link.attr('href', url);

if ($link.length) {
                    if ($link.attr('href') !== url) {
                        $link.replaceWith($new_link);
                    }
                } else {
                    $('body').append($new_link);
                }
            } else {
                $link.remove();
            }

},
        update_loaded_fonts: function() {
            return $('select[id$="_font_family"]').each(function () {
                PUM_Admin.themeEditor.update_loaded_font($(this).attr('id').replace('_font_family', ''));
            });
        },
        refresh_preview: function () {
            var form_values = $('#pum-theme-settings-container').pumSerializeObject(),
                theme_settings = form_values.theme_settings;

// Remap deprecated settings so they work.
            // Remove this after ATB updated.
            if (typeof window.PUM_ATB !== 'undefined') {
                delete form_values.theme_settings;

for (var old_setting in form_values) {
                    if (form_values.hasOwnProperty(old_setting))
                    theme_settings[old_setting.replace('popup_theme_','')] = form_values[old_setting];
                }
            }

PUM_Admin.themeEditor.restyle_preview(theme_settings);
        },
        restyle_preview: function (theme) {
            var $overlay = $('.pum-popup-overlay'),
                $container = $('.pum-popup-container'),
                $title = $('.pum-popup-title', $container),
                $content = $('.pum-popup-content', $container),
                $close = $('.pum-popup-close', $container),
                container_inset = theme.container_boxshadow_inset === 'yes' ? 'inset ' : '',
                close_inset = theme.close_boxshadow_inset === 'yes' ? 'inset ' : '',
                top, left, right, bottom;

PUM_Admin.themeEditor.update_loaded_fonts();

$overlay.removeAttr('style').css({
                backgroundColor: window.PUM_Admin.utils.convert_hex(theme.overlay_background_color, theme.overlay_background_opacity)
            });
            $container.removeAttr('style').css({
                padding: theme.container_padding + 'px',
                backgroundColor: window.PUM_Admin.utils.convert_hex(theme.container_background_color, theme.container_background_opacity),
                borderStyle: theme.container_border_style,
                borderColor: theme.container_border_color,
                borderWidth: theme.container_border_width + 'px',
                borderRadius: theme.container_border_radius + 'px',
                boxShadow: container_inset + theme.container_boxshadow_horizontal + 'px ' + theme.container_boxshadow_vertical + 'px ' + theme.container_boxshadow_blur + 'px ' + theme.container_boxshadow_spread + 'px ' + window.PUM_Admin.utils.convert_hex(theme.container_boxshadow_color, theme.container_boxshadow_opacity)
            });
            $title.removeAttr('style').css({
                color: theme.title_font_color,
                lineHeight: theme.title_line_height + 'px',
                fontSize: theme.title_font_size + 'px',
                fontFamily: theme.title_font_family,
                fontStyle: theme.title_font_style,
                fontWeight: theme.title_font_weight,
                textAlign: theme.title_text_align,
                textShadow: theme.title_textshadow_horizontal + 'px ' + theme.title_textshadow_vertical + 'px ' + theme.title_textshadow_blur + 'px ' + window.PUM_Admin.utils.convert_hex(theme.title_textshadow_color, theme.title_textshadow_opacity)
            });
            $content.removeAttr('style').css({
                color: theme.content_font_color,
                //fontSize: theme.content_font_size+'px',
                fontFamily: theme.content_font_family,
                fontStyle: theme.content_font_style,
                fontWeight: theme.content_font_weight
            });
            $close.html(theme.close_text).removeAttr('style').css({
                position: theme.close_position_outside ? 'fixed' : 'absolute',
                padding: theme.close_padding + 'px',
                height: theme.close_height > 0 ? theme.close_height + 'px' : 'auto',
                width: theme.close_width > 0 ? theme.close_width + 'px' : 'auto',
                backgroundColor: window.PUM_Admin.utils.convert_hex(theme.close_background_color, theme.close_background_opacity),
                color: theme.close_font_color,
                lineHeight: theme.close_line_height + 'px',
                fontSize: theme.close_font_size + 'px',
                fontFamily: theme.close_font_family,
                fontWeight: theme.close_font_weight,
                fontStyle: theme.close_font_style,
                borderStyle: theme.close_border_style,
                borderColor: theme.close_border_color,
                borderWidth: theme.close_border_width + 'px',
                borderRadius: theme.close_border_radius + 'px',
                boxShadow: close_inset + theme.close_boxshadow_horizontal + 'px ' + theme.close_boxshadow_vertical + 'px ' + theme.close_boxshadow_blur + 'px ' + theme.close_boxshadow_spread + 'px ' + window.PUM_Admin.utils.convert_hex(theme.close_boxshadow_color, theme.close_boxshadow_opacity),
                textShadow: theme.close_textshadow_horizontal + 'px ' + theme.close_textshadow_vertical + 'px ' + theme.close_textshadow_blur + 'px ' + window.PUM_Admin.utils.convert_hex(theme.close_textshadow_color, theme.close_textshadow_opacity)
            });

top = theme.close_position_top + (theme.close_position_outside ? $('#wpadminbar').outerHeight() : 0);
            left = theme.close_position_left + (theme.close_position_outside ? $('#adminmenuwrap').outerWidth() : 0);
            right = theme.close_position_right;
            bottom = theme.close_position_bottom;

switch (theme.close_location) {

case "topleft":
                $close.css({
                    top: top + 'px',
                    left: left + 'px'
                });
                break;

case "topcenter":
                $close.css({
                    top: top + 'px',
                    left: '50%',
                    transform: 'translateX(-50%)'
                    // left: 0,
                    // right: 0,
                    // left: 0,
                    // margin: 'auto'
                });
                break;

case "topright":
                $close.css({
                    top: top + 'px',
                    right: right + 'px'
                });
                break;

case 'middleleft':
                $close.css({
                    top: '50%',
                    left: left + 'px',
                    transform: 'translateY(-50%)'
                });
                break;

case 'middleright':
                $close.css({
                    top: '50%',
                    right: right + 'px',
                    transform: 'translateY(-50%)'
                });
                break;

case "bottomleft":
                $close.css({
                    bottom: bottom + 'px',
                    left: left + 'px'
                });
                break;

case "bottomcenter":
                $close.css({
                    bottom: bottom + 'px',
                    left: '50%',
                    transform: 'translateX(-50%)'
                    // left: 0,
                    // right: 0,
                    // left: 0,
                    // margin: 'auto'
                });
                break;

case "bottomright":
                $close.css({
                    bottom: bottom + 'px',
                    right: right + 'px'
                });
                break;
            }

/** @deprecated 1.8.0 */
            $(document).trigger('popmake-admin-retheme', [theme]);

$(document).trigger('pumRestylePreview', [theme]);
        }
    };

$(document)
        .on('change', 'select[id$="_font_family"]', function () {
            var prefix = $(this).attr('id').replace('_font_family', '');

PUM_Admin.themeEditor.update_font_options(prefix);
        })
        /**
         * Change to the appropriate tab when an element is clicked. IE click the close button in preview and trigger the close tab.
         */
        .on('click', '.pum-popup-overlay, .pum-popup-container, .pum-popup-title, .pum-popup-content, .pum-popup-close', function (event) {
            var $this = $(this),
                clicked_class = $this.attr('class');

event.preventDefault();
            event.stopPropagation();

switch (clicked_class) {
            case 'pum-popup-overlay':
                $('a[href="#pum-theme-settings_overlay"]')[0].click();
                break;
            case 'pum-popup-container':
                $('a[href="#pum-theme-settings_container"]')[0].click();
                break;
            case 'pum-popup-title':
                $('a[href="#pum-theme-settings_title"]')[0].click();
                break;
            case 'pum-popup-content':
                $('a[href="#pum-theme-settings_content"]')[0].click();
                break;
            case 'pum-popup-close':
                $('a[href="#pum-theme-settings_close"]')[0].click();
                break;
            }

$("html, body").animate({
                scrollTop: ($('#pum_theme_settings').offset().top - 40) + 'px'
            });
        })
        /**
         * Trigger preview update after any field change.
         */
        .on('change colorchange input focusout', '.pum-field select, .pum-field input', function () {
            PUM_Admin.themeEditor.refresh_preview();
        });

// Initiate when ready.
	$(function () {
		$(this).trigger('pum_init');

var $container = $('#pum-theme-settings-container'),
			args = pum_theme_settings_editor.form_args || {},
			values = pum_theme_settings_editor.current_values || {};

if ($container.length) {
			$container.find('.pum-no-js').hide();
			PUM_Admin.forms.render(args, values, $container);
		}

PUM_Admin.themeEditor.preview_fixed_scroll();
		PUM_Admin.themeEditor.refresh_preview();
	});

}(jQuery));