@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
230 lines (229 loc) • 6.49 kB
JavaScript
//#region ../src/kendo.badge.js
const __meta__ = {
id: "badge",
name: "Badge",
category: "web",
description: "The Badge decorates avatars, navigation menus, or other components in the application when visual notification is needed",
depends: ["core", "icons"]
};
(function($, undefined) {
var kendo = window.kendo;
var Widget = kendo.ui.Widget;
var ui = kendo.ui;
var HIDDEN = "k-hidden";
var iconTemplate = ({ icon }) => kendo.ui.icon($(`<span class='k-badge-icon'></span>`), { icon });
var svgIconTemplate = ({ icon }) => `<span class='k-badge-icon k-svg-icon k-icon'>${icon}</span>`;
var Badge = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that._content();
that._appearance();
kendo.notify(that);
},
destroy: function() {
var that = this;
Widget.fn.destroy.call(that);
},
options: {
name: "Badge",
cutoutBorder: false,
data: {},
fillMode: undefined,
icon: "",
max: Infinity,
position: "inline",
align: "",
rounded: undefined,
roundings: {
"small": "sm",
"medium": "md",
"large": "lg",
"full": "full"
},
sizes: {
"small": "sm",
"medium": "md",
"large": "lg"
},
size: undefined,
template: null,
text: "",
themeColor: undefined,
visible: true,
_classNames: []
},
_content: function() {
var that = this;
var text = that.options.text;
var template = that.options.template;
var data = that.options.data;
var icon = that.options.icon;
if (template !== null) {
that._text = text;
that._template = kendo.template(template).bind(that);
that.element.html(that._template(data));
return;
}
if (icon !== "") {
that.icon(icon);
return;
}
if (text !== "") {
that.text(text);
return;
}
that.text(that.element.html());
},
_appearance: function() {
var that = this;
that._themeColor = that.options.themeColor;
that._shape = that.options.shape;
that._sizes = that.options.sizes;
that._size = that.options.size;
that._fillMode = that.options.fillMode;
that._rounded = that.options.rounded;
that._roundings = that.options.roundings;
that._cutoutBorder = that.options.cutoutBorder;
that._align = that.options.align;
that._position = that.options.position;
that._visible = that.options.visible;
that._updateClassNames();
},
_updateClassNames: function() {
var that = this;
var classNames = ["k-badge"];
var keepClassNames = that.options._classNames;
var themeColor = that._themeColor;
var shape = that._shape;
var sizes = that._sizes;
var size = that._size;
var sizeAbbr = sizes[size] === undefined ? size : sizes[size];
var fillMode = that._fillMode;
var rounded = that._rounded;
var roundings = that._roundings;
var roundedAbbr = roundings[rounded] === undefined ? rounded : roundings[rounded];
var cutoutBorder = that._cutoutBorder;
var align = that._align;
var position = that._position;
var visible = that._visible;
that.element.removeClass(function(index, className) {
if (className.indexOf("k-") === 0 && keepClassNames.indexOf(className) === -1) {
that.element.removeClass(className);
}
});
if (typeof fillMode === "string" && fillMode !== "") {
classNames.push("k-badge-" + fillMode);
}
if (typeof themeColor === "string" && themeColor !== "") {
classNames.push("k-badge-" + themeColor);
}
if (typeof size === "string" && size !== "") {
classNames.push("k-badge-" + sizeAbbr);
}
if (typeof rounded === "string" && rounded !== "") {
classNames.push("k-rounded-" + roundedAbbr);
}
if (typeof shape === "string" && shape !== "") {
classNames.push("k-badge-" + shape);
}
if (typeof cutoutBorder === "boolean" && cutoutBorder === true) {
classNames.push("k-badge-border-cutout");
}
if (typeof position === "string" && position !== "") {
classNames.push("k-badge-" + position);
}
if (typeof position === "string" && position !== "" && position !== "inline" && typeof align === "string" && align.split(" ").length == 2) {
classNames.push("k-" + align.replace(" ", "-"));
}
if (visible === false) {
classNames.push(HIDDEN);
}
that.element.addClass(classNames.join(" "));
},
setOptions: function(options) {
var that = this;
that.element.removeClass(function(index, className) {
if (className.indexOf("k-") >= 0) {
that.element.removeClass(className);
}
});
Widget.fn.setOptions.call(that, options);
that._content();
that._appearance();
},
text: function(text) {
var that = this;
var max = that.options.max;
if (arguments.length === 0 || text === undefined) {
return that._text;
}
that._text = text;
if (text === true || text === false || text === null) {
that.element.html("");
return;
}
if (typeof text === "string") {
that.element.html(text);
return;
}
if (typeof text === "number") {
if (text > max) {
that.element.html(max + "+");
} else {
that.element.html(text);
}
return;
}
if (typeof text === "object" && "toString" in text) {
that.element.html(text.toString());
return;
}
},
icon: function(icon) {
var that = this;
var iconTemplateFunction;
if (arguments.length === 0 || icon === undefined) {
return that._icon;
}
that._icon = icon;
if (icon.indexOf("<svg") === 0) {
iconTemplateFunction = kendo.template(svgIconTemplate);
that.element.html(iconTemplateFunction({ icon }));
return;
}
iconTemplateFunction = kendo.template(iconTemplate);
that.element.html(iconTemplateFunction({ icon }));
},
themeColor: function(color) {
var that = this;
if (arguments.length === 0 || color === undefined) {
return that._themeColor;
}
that._themeColor = color;
that._updateClassNames();
},
rounded: function(rounded) {
var that = this;
if (arguments.length === 0 || rounded === undefined) {
return that._rounded;
}
that._rounded = rounded;
that._updateClassNames();
},
hide: function() {
var that = this;
that._visible = false;
that._updateClassNames();
},
show: function() {
var that = this;
that._visible = true;
that._updateClassNames();
}
});
ui.plugin(Badge);
})(window.kendo.jQuery);
var kendo_badge_default = kendo;
//#endregion
export { kendo_badge_default as n, __meta__ as t };