MyBB Community Forums

Full Version: MyBB JS Editor Error
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I am experiencing an error on my board which seems to be affecting my quick reply refreshing whenever creating a new post. I'm not sure what MyBBEditor.updateOriginal(); means exactly and how to fix this type of thing. Thank u very much for any support with this

[Image: unknown.png]


Line 359 shows;
 $('#quick_reply_submit').on('click', function () {
        if (typeof MyBBEditor === 'object') {
            MyBBEditor.updateOriginal();
        }

        return false;
    });
As I can understand, it should be relating to this spectral theme. MyBBEditor is defined as null for showthread pages that show a quick reply box, but MyBBEditor = $("#message").sceditor("instance"); for newtherad & newreply & editpost pages that show an SCEditor for default templates.
Try with the following content for jscripts/spectral_theme.js: https://gist.github.com/dvz/2a02952e6679...d7e01f2d7e (applied more modifications to normalize appearance of checkboxes and other visual elements when the page is not reloaded anymore; there may be one error left, but the quick reply should work for now).
(2019-09-23, 04:47 PM)Devilshakerz Wrote: [ -> ]Try with the following content for jscripts/spectral_theme.js: https://gist.github.com/dvz/2a02952e6679...d7e01f2d7e (applied more modifications to normalize appearance of checkboxes and other visual elements when the page is not reloaded anymore; there may be one error left, but the quick reply should work for now).

Thanks again! Works great. There is that one error left, but quick reply works flawless now and I do not seem to see any visual error

Uncaught TypeError: Cannot read property 'updateOriginal' of null
    at HTMLButtonElement.onclick (VM1692 Thread-RELEASE-Jailbreak-:1453)

Edit: I am receiving this in moderation.php (I can not check tick boxes to move thread)

jquery.js?ver=1820:2 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at HTMLDocument.<anonymous> (spectral_theme.js:224)
    at l (jquery.js?ver=1820:2)
    at c (jquery.js?ver=1820:2)

This also broke the sticky for header_welcomeblock_member (when scrolling on the forum, there is no header_welcomeblock_member stuck in the header)

My spectral_theme.js contents:
/* by Tomasz 'Devilshakerz' Mlynski [devilshakerz.com]; Copyright 2018 */

jQuery.fn.extend({
    // handles class="tooltip-(n|e|s|w|nw|ne|sw|se|nw-alt|ne-alt|se-alt)[-(px offset)]"
    tooltips: function () {
        $(this).each(function () {
            var classes = $(this).attr('class').split(' ');

            $.each(classes, function (index,value) {
                if (value.match('tooltip')) {
                    var value = value.replace('tooltip-','').replace('tooltip','');

                    if (value.match('-delay')) {
                        delay = true;
                        value = value.replace('-delay','');
                    } else {
                        delay = false;
                    }

                    offset = 8;

                    var offsetMatches = value.match(/-(-?[0-9]+)/);

                    if (offsetMatches) {
                        var customOffset = parseInt(offsetMatches[1]);
                        value = value.replace('-' + customOffset,'');
                        offset += customOffset;
                    }

                    position = value;
                    return;
                }
            });

            $(this).powerTip({
                offset: offset,
                placement: position,
                smartPlacement: true,
                mouseOnToPopup: $(this).attr('data-tooltip-hover') == '1',
            });
        });
    }
});

// DVZ Theme Options
function ThemeOptions(themeId)
{
    try {
        themeOptionCases = JSON.parse(themeOptionCases);
        this.active = true;
    } catch (e) {
        this.active = false;
    }

    this.setOptionCase = function (option, optionCase)
    {
        // set manually to save name with sqaure brackets
        document.cookie = cookiePrefix + 'theme_options[' + themeId + '][' + option + ']=' + optionCase + '; ' +
            (cookieDomain !== '' ? 'domain=' + cookieDomain + '; ' : '') +
            'path=' + cookiePath + '; ' +
            'max-age=31536000; ' +
            (cookieSecureFlag == true ? 'secure; ' : '');

        themeOptionCases[option] = optionCase;
    };

    this.getOptionCase = function (option)
    {
        return themeOptionCases[option];
    };

    this.fetchApplyProperties = function (callback)
    {
        $.getJSON(rootpath + '/xmlhttp.php', {
            action: 'theme_options_get_properties',
        }, function (data) {
            $('head link[rel="stylesheet"][data-theme-options="true"]').remove();
            $('head').append(data['stylesheetsRendered']);

            themeOptionCases = data['optionCases'];

            if (typeof callback === 'function') {
                callback(data);
            }
        });
    };
};

// theme
var Spectral = {
    helpers: {},
    schemes: {}
};

Spectral.helpers.rgbFromSpectrum = function (rgbStart, rgbEnd, position)
{
    var scaledR = Math.round( rgbStart[0] + ( (rgbEnd[0]-rgbStart[0]) * position ) );
    var scaledG = Math.round( rgbStart[1] + ( (rgbEnd[1]-rgbStart[1]) * position ) );
    var scaledB = Math.round( rgbStart[2] + ( (rgbEnd[2]-rgbStart[2]) * position ) );

    return [scaledR, scaledG, scaledB];
}

Spectral.helpers.hexToRgbArray = function (hex)
{
    hex = hex.trim();

    if (hex.substr(0, 1) == '#') {
        hex = hex.substr(1, 6);
    }

    var r = parseInt(hex.substr(0,2), 16),
        g = parseInt(hex.substr(2,2), 16),
        b = parseInt(hex.substr(4,2), 16);
    return [r, g, b];
}

Spectral.helpers.getScrollProgress = function ()
{
    return $(window).scrollTop() / ($(document).height() - $(window).height());
};

Spectral.warp = function (name, options)
{
    var $contentContainers = $('[data-warp="' + name + '"]');

    if ($contentContainers.length) {
        $contentContainers.each(function () {
            if ($(this).attr('data-warp-replace') == 'true') {
                var method = 'html';
            } else {
                var method = 'append';
            }

            var $targetContainer = $('[data-warp-target="' + name + '"]');

            if (typeof options.dropmenu !== 'undefined') {
                $targetContainer.removeClass('empty no-body');
                $targetContainer.children('.body')[method]($(this).html());
            } else {
                $targetContainer[method]($(this).html());
            }

            if (typeof options.tooltipClass !== 'undefined') {
                $targetContainer.children('a').removeClass('tooltip-s').addClass(options.tooltipClass).powerTip('destroy').tooltips();
            }

            if (typeof options.incrementIndicatorNumber !== 'undefined') {
                var $indicator = $targetContainer.find('.indicator');
                $indicator.attr('data-number', parseInt($indicator.attr('data-number')) + 1);
            }

            if ($targetContainer.attr('data-warp-target') == 'search') {
                var $opener = $targetContainer.closest('.dropmenu').find('.opener');
                $opener.attr('warped-content', '1');
            }
        });
    }
}

Spectral.setIndicatorColor = function (rgb)
{
    return $('.uninav .indicator').css({ 'background-color': 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')' });
}

Spectral.schemes.markAs = function (scheme)
{
    if (scheme == 'dark') {
        var newClass = 'scheme-switcher__status--off';
    } else {
        var newClass = 'scheme-switcher__status--on';
    }

    $('.scheme-switcher__status').removeClass('scheme-switcher__status--off scheme-switcher__status--on').addClass(newClass);
}

Spectral.schemes.set = function (scheme)
{
    themeOptions.setOptionCase('scheme', scheme);
    themeOptions.fetchApplyProperties(function (data) {
        Spectral.schemes.markAs(data['optionCases']['scheme']);

        $('#container').attr('data-scheme', data['optionCases']['scheme']);
    });
}

$(function () {
    $('label input[type="checkbox"]').each(function () {
        var $label = $(this).closest('label');

        $label.addClass('custom-checkbox');

        if ($(this).is(':checked')) {
            $label.addClass('custom-checkbox--checked');
        }
    });

    $(document).on('change', 'label input[type="checkbox"]', function () {
        var $label = $(this).closest('label');

        if ($(this).is(':checked')) {
            $label.addClass('custom-checkbox--checked');
        } else {
            $label.removeClass('custom-checkbox--checked');
        }
    });

    $('label input[type="radio"]').each(function () {
        var $label = $(this).closest('label');

        $label.addClass('custom-radio');

        if ($(this).is(':checked')) {
            $label.addClass('custom-radio--checked');
        }
    });

    $(document).on('change', '.custom-radio input[type="radio"]', function (e) {
        var $siblings = $('.custom-radio input[name="' + $(this).attr('name') + '"]');

        $siblings.closest('label').removeClass('custom-radio--checked');
        $(e.target).closest('label').addClass('custom-radio--checked');
    });

    $('[class^="tooltip-"],[class*=" tooltip-"]').tooltips();

    // transformations
    $('.mini-title p').each(function () {
        if ($(this).length && $(this).html().substr(-1) == ':') {
            $(this).html( $(this).html().substr(0, $(this).html().length - 1) );
        }
    });

    $('.tcat_menu .expcolimage').each(function () {
        if ($(this).find('.fa').length == 0) {
            $(this).append('<i class="fa"></i>');
        }
    });

    $('.side-menu tbody:even').each(function () {
        var $contentTbody = $(this).closest('tbody').next('tbody');

        var $wideMenuElement = $('<div class="dropmenu" />');
        var $wideMenuElementHead = $('<a class="opener" href="javascript:void(0)" />');
        var $wideMenuElementBody = $('<div class="body" rid="' + $contentTbody.attr('id') + '" />');
        var $wideMenuElementBodyList = $('<ul />');

        $(this).find('.smalltext').contents().clone().appendTo($wideMenuElementHead);

        if (
            $contentTbody.find('a').hasClass('usercp_nav_home') ||
            $contentTbody.find('a').hasClass('modcp_nav_home')
        ) {
            $('.wide-menu .home-link').attr('href', $contentTbody.find('a').attr('href'));
            return;
        }

        $contentTbody.find('a').each(function () {
            var $wideMenuElementBodyListItem = $('<li />');
            $(this).clone().appendTo($wideMenuElementBodyListItem);
            $wideMenuElementBodyListItem.appendTo($wideMenuElementBodyList);
        });

        $wideMenuElementBodyList.appendTo($wideMenuElementBody);
        $wideMenuElementHead.appendTo($wideMenuElement);
        $wideMenuElementBody.appendTo($wideMenuElement);

        $wideMenuElement.appendTo('.wide-menu .wrapper');
    });

    $('#section-table-marker').prev('table').remove();
    $('.side-menu').remove();
    $('.wide-menu').removeClass('empty');

    // content warp
    Spectral.warp('content-tools', {
        tooltipClass: 'tooltip-e',
        dropmenu: true,
    });
    Spectral.warp('sort', {
        tooltipClass: 'tooltip-e',
        dropmenu: true,
    });
    Spectral.warp('privatemessages', {
        tooltipClass: 'tooltip-e',
        dropmenu: true,
    });
    Spectral.warp('acp', {
        tooltipClass: 'tooltip-e',
        dropmenu: true,
        incrementIndicatorNumber: true,
    });
    Spectral.warp('mcp', {
        tooltipClass: 'tooltip-e',
        dropmenu: true,
        incrementIndicatorNumber: true,
    });
    Spectral.warp('search', {
        tooltipClass: 'tooltip-e',
    });
    Spectral.warp('search-buttons', {
        tooltipClass: 'tooltip-s',
    });

    var bodyComputedStyle = window.getComputedStyle(document.body);
    var startHex = bodyComputedStyle.getPropertyValue('--theme-attention-color');
    var endHex   = bodyComputedStyle.getPropertyValue('--theme-attention2-color');

    Spectral.indicatorSpectrumStart = Spectral.helpers.hexToRgbArray(startHex);
    Spectral.indicatorSpectrumEnd = Spectral.helpers.hexToRgbArray(endHex);

    var $activeIndicators = $('.uninav .indicator').filter(function () {
        return $(this).attr('data-number') > 0;
    });
    if ($activeIndicators.length) {
        $('.uninav').addClass('active-indicators');
    }

    // :focus-within polyfill
    $('.dropmenu .body').on('focus', 'a', function () {
        $(this).closest('.dropmenu').addClass('focus-within');

        $(this).on('blur', function () {
            $(this).closest('.dropmenu').removeClass('focus-within');
        });
    });

    // schemes
    themeOptions = new ThemeOptions('spectral');

    if (themeOptions.active) {
        if (themeOptions.getOptionCase('scheme') == 'dark') {
            Spectral.schemes.markAs('dark');
            $('#container').addClass('scheme--dark');
        }

        $('.scheme-switcher').on('click', function () {
        if (themeOptions.getOptionCase('scheme') == 'light') {
                var newScheme = 'dark';
            } else {
                var newScheme = 'light';
            }

            Spectral.schemes.set(newScheme);
        });
    } else {
        $('.scheme-switcher').remove();
    }

    // restack position:sticky elements
    postZIndex = 1;

    $($('.post').get().reverse()).each(function () {
        $(this).css('z-index', postZIndex++);
    });

    $('#quick_reply_submit').on('click', function () {
        if (typeof MyBBEditor === 'object') {
            MyBBEditor.updateOriginal();
        }

        return false;
    });

    if ($('.uninav-holder').length) {
        var headerEndPosition = $('.uninav-holder').offset().top;
        var bbiconStartPosition = $('.uninav .bbicon-container').offset().top;

        $(window).on('load scroll resize', function () {

            if ($(window).scrollTop() > headerEndPosition) {
                $('.uninav').addClass('sticky');
            } else {
                $('.uninav').removeClass('sticky');
            }

            if ($(window).scrollTop() > bbiconStartPosition) {
                $('.uninav .bbicon-container').addClass('bbicon-sticky');
            } else {
                $('.uninav .bbicon-container').removeClass('bbicon-sticky');
            }

            var scrollProgress = Spectral.helpers.getScrollProgress();
            var rgb = Spectral.helpers.rgbFromSpectrum(Spectral.indicatorSpectrumStart, Spectral.indicatorSpectrumEnd, scrollProgress);

            Spectral.setIndicatorColor(rgb);
        });
    }

    // finish
    $('body').addClass('js--ready');
});
(2019-09-24, 10:53 AM)Devilshakerz Wrote: [ -> ]Here's a correction: https://gist.github.com/dvz/2a02952e6679...48cac031c9

My spectral_theme.js seems to be much different than the one showing in the correction (modification has been done with the theme and js file to make things flow better with how it is on my website)

What route should I take with what I currently have on my forum?

Thanks for your help dvz
You can use a diff tool, such as https://www.diffchecker.com/diff to compare your file with the original one to know where you made modifications, or with the development version https://gist.github.com/dvz/2a02952e6679...d7e01f2d7e (which should fix the menu issues on Safari and make quick reply work).