/**
* DevExtreme (ui/themes.js)
* Version: 19.1.16
* Build date: Tue Oct 18 2022
*
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
var $ = require("../core/renderer");
var domAdapter = require("../core/dom_adapter");
var windowUtils = require("../core/utils/window");
var window = windowUtils.getWindow();
var Deferred = require("../core/utils/deferred").Deferred;
var errors = require("./widget/ui.errors");
var domUtils = require("../core/utils/dom");
var readyCallbacks = require("../core/utils/ready_callbacks");
var ready = readyCallbacks.add;
var each = require("../core/utils/iterator").each;
var devices = require("../core/devices");
var viewPortUtils = require("../core/utils/view_port");
var themeReadyCallback = require("./themes_callback");
var viewPort = viewPortUtils.value;
var Promise = require("../core/polyfills/promise");
var viewPortChanged = viewPortUtils.changeCallback;
var DX_LINK_SELECTOR = "link[rel=dx-theme]";
var THEME_ATTR = "data-theme";
var ACTIVE_ATTR = "data-active";
var DX_HAIRLINES_CLASS = "dx-hairlines";
var context;
var $activeThemeLink;
var knownThemes;
var currentThemeName;
var pendingThemeName;
var timerId;
var THEME_MARKER_PREFIX = "dx.";
function readThemeMarker() {
if (!windowUtils.hasWindow()) {
return null
}
var element = $("
", context).addClass("dx-theme-marker").appendTo(context.documentElement);
var result;
try {
result = element.css("fontFamily");
if (!result) {
return null
}
result = result.replace(/["']/g, "");
if (result.substr(0, THEME_MARKER_PREFIX.length) !== THEME_MARKER_PREFIX) {
return null
}
return result.substr(THEME_MARKER_PREFIX.length)
} finally {
element.remove()
}
}
function waitForThemeLoad(themeName) {
var waitStartTime;
pendingThemeName = themeName;
function handleLoaded() {
pendingThemeName = null;
themeReadyCallback.fire();
themeReadyCallback.empty()
}
if (isPendingThemeLoaded()) {
handleLoaded()
} else {
waitStartTime = Date.now();
timerId = setInterval(function() {
var isLoaded = isPendingThemeLoaded();
var isTimeout = !isLoaded && Date.now() - waitStartTime > 15e3;
if (isTimeout) {
errors.log("W0004", pendingThemeName)
}
if (isLoaded || isTimeout) {
clearInterval(timerId);
timerId = void 0;
handleLoaded()
}
}, 10)
}
}
function isPendingThemeLoaded() {
return !pendingThemeName || readThemeMarker() === pendingThemeName
}
function processMarkup() {
var $allThemeLinks = $(DX_LINK_SELECTOR, context);
if (!$allThemeLinks.length) {
return
}
knownThemes = {};
$activeThemeLink = $(domUtils.createMarkupFromString(""), context);
$allThemeLinks.each(function() {
var link = $(this, context);
var fullThemeName = link.attr(THEME_ATTR);
var url = link.attr("href");
var isActive = "true" === link.attr(ACTIVE_ATTR);
knownThemes[fullThemeName] = {
url: url,
isActive: isActive
}
});
$allThemeLinks.last().after($activeThemeLink);
$allThemeLinks.remove()
}
function resolveFullThemeName(desiredThemeName) {
var desiredThemeParts = desiredThemeName.split(".");
var result = null;
if (knownThemes) {
if (desiredThemeName in knownThemes) {
return desiredThemeName
}
each(knownThemes, function(knownThemeName, themeData) {
var knownThemeParts = knownThemeName.split(".");
if (knownThemeParts[0] !== desiredThemeParts[0]) {
return
}
if (desiredThemeParts[1] && desiredThemeParts[1] !== knownThemeParts[1]) {
return
}
if (desiredThemeParts[2] && desiredThemeParts[2] !== knownThemeParts[2]) {
return
}
if (!result || themeData.isActive) {
result = knownThemeName
}
if (themeData.isActive) {
return false
}
})
}
return result
}
function initContext(newContext) {
try {
if (newContext !== context) {
knownThemes = null
}
} catch (x) {
knownThemes = null
}
context = newContext
}
function init(options) {
options = options || {};
initContext(options.context || domAdapter.getDocument());
if (!context) {
return
}
processMarkup();
currentThemeName = void 0;
current(options)
}
function current(options) {
if (!arguments.length) {
currentThemeName = currentThemeName || readThemeMarker();
return currentThemeName
}
detachCssClasses(viewPort());
options = options || {};
if ("string" === typeof options) {
options = {
theme: options
}
}
var isAutoInit = options._autoInit;
var loadCallback = options.loadCallback;
var currentThemeData;
currentThemeName = options.theme || currentThemeName;
if (isAutoInit && !currentThemeName) {
currentThemeName = themeNameFromDevice(devices.current())
}
currentThemeName = resolveFullThemeName(currentThemeName);
if (currentThemeName) {
currentThemeData = knownThemes[currentThemeName]
}
if (loadCallback) {
themeReadyCallback.add(loadCallback)
}
if (currentThemeData) {
$activeThemeLink.attr("href", knownThemes[currentThemeName].url);
if ((themeReadyCallback.has() || options._forceTimeout) && !timerId) {
waitForThemeLoad(currentThemeName)
} else {
if (pendingThemeName) {
pendingThemeName = currentThemeName
}
}
} else {
if (isAutoInit) {
themeReadyCallback.fire();
themeReadyCallback.empty()
} else {
throw errors.Error("E0021", currentThemeName)
}
}
checkThemeDeprecation();
attachCssClasses(viewPortUtils.originalViewPort(), currentThemeName)
}
function themeNameFromDevice(device) {
var themeName = device.platform;
switch (themeName) {
case "ios":
return "ios7";
case "android":
case "win":
return "generic"
}
return themeName
}
function getCssClasses(themeName) {
themeName = themeName || current();
var result = [];
var themeNameParts = themeName && themeName.split(".");
if (themeNameParts) {
result.push("dx-theme-" + themeNameParts[0], "dx-theme-" + themeNameParts[0] + "-typography");
if (themeNameParts.length > 1) {
result.push("dx-color-scheme-" + themeNameParts[1] + (isMaterial(themeName) ? "-" + themeNameParts[2] : ""))
}
}
return result
}
var themeClasses;
function attachCssClasses(element, themeName) {
themeClasses = getCssClasses(themeName).join(" ");
$(element).addClass(themeClasses);
var activateHairlines = function() {
var pixelRatio = windowUtils.hasWindow() && window.devicePixelRatio;
if (!pixelRatio || pixelRatio < 2) {
return
}
var $tester = $("
");
$tester.css("border", ".5px solid transparent");
$("body").append($tester);
if (1 === $tester.outerHeight()) {
$(element).addClass(DX_HAIRLINES_CLASS);
themeClasses += " " + DX_HAIRLINES_CLASS
}
$tester.remove()
};
activateHairlines()
}
function detachCssClasses(element) {
$(element).removeClass(themeClasses)
}
function themeReady(callback) {
themeReadyCallback.add(callback)
}
function isTheme(themeRegExp, themeName) {
if (!themeName) {
themeName = currentThemeName || readThemeMarker()
}
return new RegExp(themeRegExp).test(themeName)
}
function isMaterial(themeName) {
return isTheme("material", themeName)
}
function isIos7(themeName) {
return isTheme("ios7", themeName)
}
function isGeneric(themeName) {
return isTheme("generic", themeName)
}
function checkThemeDeprecation() {
if (isIos7()) {
errors.log("W0010", "The 'ios7' theme", "19.1", "Use the 'generic' theme instead.")
}
}
function isWebFontLoaded(text, fontWeight) {
var testedFont = "Roboto, RobotoFallback, Arial";
var etalonFont = "Arial";
var document = domAdapter.getDocument();
var testElement = document.createElement("span");
testElement.style.position = "absolute";
testElement.style.top = "-9999px";
testElement.style.left = "-9999px";
testElement.style.visibility = "hidden";
testElement.style.fontFamily = etalonFont;
testElement.style.fontSize = "250px";
testElement.style.fontWeight = fontWeight;
testElement.innerHTML = text;
document.body.appendChild(testElement);
var etalonFontWidth = testElement.offsetWidth;
testElement.style.fontFamily = testedFont;
var testedFontWidth = testElement.offsetWidth;
testElement.parentNode.removeChild(testElement);
return etalonFontWidth !== testedFontWidth
}
function waitWebFont(text, fontWeight) {
var interval = 15;
var timeout = 2e3;
return new Promise(function(resolve) {
var check = function() {
if (isWebFontLoaded(text, fontWeight)) {
clear()
}
};
var clear = function() {
clearInterval(intervalId);
clearTimeout(timeoutId);
resolve()
};
var intervalId = setInterval(check, interval);
var timeoutId = setTimeout(clear, timeout)
})
}
var initDeferred = new Deferred;
function autoInit() {
init({
_autoInit: true,
_forceTimeout: true
});
if ($(DX_LINK_SELECTOR, context).length) {
throw errors.Error("E0022")
}
initDeferred.resolve()
}
if (windowUtils.hasWindow()) {
autoInit()
} else {
ready(autoInit)
}
viewPortChanged.add(function(viewPort, prevViewPort) {
initDeferred.done(function() {
detachCssClasses(prevViewPort);
attachCssClasses(viewPort)
})
});
devices.changed.add(function() {
init({
_autoInit: true
})
});
exports.current = current;
exports.ready = themeReady;
exports.init = init;
exports.attachCssClasses = attachCssClasses;
exports.detachCssClasses = detachCssClasses;
exports.themeNameFromDevice = themeNameFromDevice;
exports.waitForThemeLoad = waitForThemeLoad;
exports.isMaterial = isMaterial;
exports.isIos7 = isIos7;
exports.isGeneric = isGeneric;
exports.isWebFontLoaded = isWebFontLoaded;
exports.waitWebFont = waitWebFont;
exports.resetTheme = function() {
$activeThemeLink && $activeThemeLink.attr("href", "about:blank");
currentThemeName = null;
pendingThemeName = null
};
module.exports.default = module.exports;