(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');
});