@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
222 lines (220 loc) • 6.48 kB
JavaScript
//#region ../src/kendo.html.icon.js
const __meta__ = {
id: "html.icon",
name: "Html.Icon",
category: "web",
description: "HTML font icon rendering utility for Kendo UI for jQuery.",
depends: ["html.base"]
};
(function($, undefined) {
var kendo = window.kendo, extend = $.extend, HTMLBase = kendo.html.HTMLBase;
var KFONTICON = "k-icon k-font-icon";
var KI_PREFFIX = "k-i-";
var KSVGICON = "k-icon k-svg-icon";
var KSVG_PREFFIX = "k-svg-i-";
var FLIP_PREFIX = "k-flip-";
var FLIP_HORIZONTAL = `${FLIP_PREFIX}h`;
var FLIP_VERTICAL = `${FLIP_PREFIX}v`;
var THEME_COLOR_PREFIX = "k-color-";
var ICON_TYPES = {
"svg": (element, options) => new HTMLSvgIcon(element, options),
"font": (element, options) => new HTMLFontIcon(element, options)
};
var FLIP_CLASSES = {
default: "",
horizontal: FLIP_HORIZONTAL,
vertical: FLIP_VERTICAL,
both: `${FLIP_HORIZONTAL} ${FLIP_VERTICAL}`
};
var renderIcon = function(element, options) {
if (!element || $.isPlainObject(element) || kendo.isString(element)) {
options = element;
element = $("<span></span>");
}
if (kendo.isString(options)) {
options = { icon: options };
}
if (!kendo.isPresent(options.type)) {
options.type = kendo.defaults.iconType ? kendo.defaults.iconType : "svg";
}
if (kendo.isFunction(options.type)) {
return options.type(element, options);
}
if (!kendo.isFunction(ICON_TYPES[options.type])) {
return null;
}
return ICON_TYPES[options.type](element, options).html();
};
var HTMLBaseIcon = HTMLBase.extend({
init: function(element, options) {
var that = this;
HTMLBase.fn.init.call(that, element, options);
that._wrapper();
},
options: {
name: "HTMLIcon",
size: "none",
themeColor: "none",
flip: "default",
iconClass: "",
stylingOptions: [
"size",
"themeColor",
"fill"
]
},
_wrapper: function() {
var that = this;
that._addClasses();
},
_addClasses: function() {
var that = this, options = that.options, stylingOptions = options.stylingOptions, previouslyAddedClasses = that.wrapper.data("added-classes");
stylingOptions = stylingOptions.map(function(option) {
if (option === "themeColor") {
return kendo.cssProperties.getValidClass({
widget: options.name,
propName: option,
value: options[option],
prefix: THEME_COLOR_PREFIX
});
}
if (option === "fill") {
return FLIP_CLASSES[options.flip];
}
return kendo.cssProperties.getValidClass({
widget: options.name,
propName: option,
value: options[option],
fill: options.fillMode
});
});
if (previouslyAddedClasses) {
that.wrapper.removeClass(previouslyAddedClasses.filter((x) => x !== that._className).join(" "));
}
that.wrapper.data("added-classes", stylingOptions.concat([that._className]));
that.wrapper.addClass(stylingOptions.join(" "));
}
});
var HTMLFontIcon = HTMLBaseIcon.extend({
init: function(element, options) {
HTMLBaseIcon.fn.init.call(this, element, options);
},
options: extend({}, HTMLBaseIcon.fn.options, {
name: "HTMLFontIcon",
icon: null
}),
_wrapper: function() {
var that = this, currentIconClass = that.element[0].className.split(" ").find((x) => x.includes(KI_PREFFIX)), className = that.options.icon ? `${that.options.icon.startsWith(KI_PREFFIX) ? "" : KI_PREFFIX}${that.options.icon}` : "";
that._className = className;
that.wrapper = that.element.addClass(KFONTICON).removeClass(currentIconClass).addClass(className).addClass(that.options.iconClass || "");
HTMLBaseIcon.fn._wrapper.call(this);
}
});
var HTMLSvgIcon = HTMLBaseIcon.extend({
init: function(element, options) {
element.empty();
HTMLBaseIcon.fn.init.call(this, element, options);
},
options: extend({}, HTMLBaseIcon.fn.options, {
name: "HTMLSVGIcon",
icon: null
}),
_wrapper: function() {
var that = this, icon = that.options.icon, iconClass = that.options.iconClass, currentIconClass = that.element[0].className.split(" ").find((x) => x.includes(KSVG_PREFFIX)), svgElm = $("<svg></svg>"), className;
if (!icon && iconClass) {
const regex = /k-i-(\w+(?:-\w+)*)/;
let iconNameMatch = iconClass.match(regex);
if (iconNameMatch) {
icon = iconNameMatch[1];
iconClass = iconClass.replace(iconNameMatch[0], "");
}
}
if (kendo.isString(icon)) {
icon = icon.replace("k-i-", "").replace(/-./g, (x) => x[1].toUpperCase());
icon = kendo.ui.svgIcons[icon] || kendo.ui.svgIcons[`${icon}Icon`];
}
className = icon && icon.name ? `${KSVG_PREFFIX}${icon.name}` : "";
that._className = className;
that.wrapper = that.element.addClass(KSVGICON).removeClass(currentIconClass).addClass(className).addClass(iconClass || "");
if ($.isPlainObject(icon)) {
svgElm.attr("viewBox", icon.viewBox || "").attr({
"viewBox": icon.viewBox || "",
"focusable": "false",
"xmlns": "http://www.w3.org/2000/svg"
}).html(icon.content || "");
that.wrapper.append(svgElm[0].outerHTML);
}
HTMLBaseIcon.fn._wrapper.call(this);
}
});
$.extend(kendo.html, {
renderIcon,
HTMLFontIcon,
HTMLSvgIcon,
getIconRenderer: (type) => ICON_TYPES[type]
});
kendo.cssProperties.registerPrefix("HTMLFontIcon", "k-icon-");
kendo.cssProperties.registerValues("HTMLFontIcon", [{
prop: "size",
values: kendo.cssProperties.sizeValues.concat([
["xsmall", "xs"],
["xlarge", "xl"],
["xxlarge", "xxl"],
["xxxlarge", "xxxl"]
])
}, {
prop: "themeColor",
values: [
"primary",
"secondary",
"tertiary",
"inherit",
"info",
"success",
"warning",
"error",
"dark",
"light",
"inverse"
]
}]);
kendo.cssProperties.registerPrefix("HTMLSVGIcon", "k-icon-");
kendo.cssProperties.registerValues("HTMLSVGIcon", [{
prop: "size",
values: kendo.cssProperties.sizeValues.concat([
["xsmall", "xs"],
["xlarge", "xl"],
["xxlarge", "xxl"],
["xxxlarge", "xxxl"]
])
}, {
prop: "themeColor",
values: [
"primary",
"secondary",
"tertiary",
"inherit",
"info",
"success",
"warning",
"error",
"dark",
"light",
"inverse"
]
}]);
})(window.kendo.jQuery);
var kendo_html_icon_default = kendo;
//#endregion
Object.defineProperty(exports, '__meta__', {
enumerable: true,
get: function () {
return __meta__;
}
});
Object.defineProperty(exports, 'kendo_html_icon_default', {
enumerable: true,
get: function () {
return kendo_html_icon_default;
}
});