@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
228 lines (227 loc) • 8.44 kB
JavaScript
import "./kendo.core-B45DfgdW.js";
import "./kendo.icons.js";
import "./kendo.html.button.js";
import "./kendo.popup.js";
import "./kendo.chip.js";
//#region ../src/kendo.citation.js
const __meta__ = {
id: "citation",
name: "Citation",
category: "web",
description: "The Citation component.",
depends: [
"core",
"html.button",
"chip",
"icons",
"popup"
]
};
(function($, undefined) {
const kendo = window.kendo;
const Widget = kendo.ui.Widget;
const encode = kendo.htmlEncode;
const NS = ".kendoCitation";
const OPEN = "open";
const CLICK = "click";
const Citation = Widget.extend({
init: function(element, options) {
const that = this;
Widget.fn.init.call(that, element, options);
that._hostElement = that.element;
that._docNS = ".kendoCitation." + kendo.guid().replace(/-/g, "");
that._isOpen = false;
that._currentPage = 0;
that._render();
that._bindEvents();
kendo.notify(that);
},
options: {
name: "Citation",
sources: [],
label: null,
svgIcon: "globe",
showAdditionalCount: true,
showOn: "hover",
sourceIcon: "globe",
sourceSVGIcon: null,
popoverWidth: 318,
bodyTemplate: null,
messages: {
previousSourceAction: "Previous source",
nextSourceAction: "Next source"
}
},
events: [OPEN],
_render: function() {
const that = this;
const opts = that.options;
const label = opts.label !== null ? opts.label : that._deriveLabel();
const count = opts.showAdditionalCount === true ? opts.sources.length > 1 ? opts.sources.length - 1 : 0 : 0;
const labelText = [label, count > 0 ? `+${count}` : null].filter(Boolean).join(" ");
that.element.empty();
that._chip = new kendo.ui.Chip(that.element, {
attributes: {
"aria-pressed": "false",
class: "k-citation"
},
fillMode: "outline",
icon: opts.svgIcon,
label: encode(labelText),
rounded: "full",
size: "small"
});
that.wrapper = that._chip.wrapper;
that._chipElement = that._chip.element;
that.element = that.wrapper;
that._popoverContent = $(`<div class="k-popover k-citation-popover" aria-hidden="true"></div>`);
that._popup = new kendo.ui.Popup(that._popoverContent, {
anchor: that.wrapper,
origin: "bottom left",
position: "top left",
collision: "fit flip",
animation: false
});
if (opts.popoverWidth) that._popoverContent.css("width", opts.popoverWidth);
that._renderPopover();
},
_deriveLabel: function() {
const sources = this.options.sources;
if (sources && sources.length > 0 && sources[0].url) try {
return new URL(sources[0].url).hostname;
} catch (e) {
return "";
}
return "";
},
_renderPopover: function() {
const that = this;
const opts = that.options;
if (opts.bodyTemplate !== null) {
const tmpl = opts.bodyTemplate;
that._popoverContent.html(tmpl({ sources: opts.sources }));
return;
}
const headerHtml = `<div class="k-popover-header k-citation-popover-header"><span class="k-citation-pages"></span><div class="k-button-group k-button-group-flat" role="group">${kendo.html.renderButton(`<button class="k-group-start k-citation-prev" aria-label="${encode(opts.messages.previousSourceAction)}"></button>`, {
fillMode: "flat",
icon: "arrow-left",
size: "small"
})}${kendo.html.renderButton(`<button class="k-group-end k-citation-next" aria-label="${encode(opts.messages.nextSourceAction)}"></button>`, {
fillMode: "flat",
icon: "arrow-right",
size: "small"
})}</div></div>`;
const bodyHtml = `<div class="k-popover-body">` + opts.sources.map((s) => `<div class="k-citation-popover-view">${that._sourceHtml(s)}</div>`).join("") + `</div>`;
that._popoverContent.html(headerHtml + bodyHtml);
that._updatePage();
},
_updatePage: function() {
const that = this;
const currentPage = that._currentPage;
const total = that.options.sources.length;
that._popoverContent[0].style.setProperty("--kendo-citation-popover-view-current", String(currentPage + 1));
that._popoverContent.find(".k-citation-pages").text(`${currentPage + 1}/${total}`);
that._popoverContent.find(".k-citation-prev").prop("disabled", currentPage === 0).toggleClass("k-disabled", currentPage === 0);
that._popoverContent.find(".k-citation-next").prop("disabled", currentPage >= total - 1).toggleClass("k-disabled", currentPage >= total - 1);
},
_sourceHtml: function(source) {
const opts = this.options;
const titleHtml = source.title ? `<div class="k-citation-popover-view-title">${encode(source.title)}</div>` : "";
const iconName = opts.sourceSVGIcon || opts.sourceIcon;
const urlHtml = source.url ? `<a href="${kendo.sanitizeLink(source.url)}" class="k-citation-popover-view-source" target="_blank" rel="noopener noreferrer">${kendo.ui.icon({ icon: iconName })}${encode(source.url)}</a>` : "";
const descHtml = source.description ? `<span class="k-citation-popover-view-body">${encode(source.description)}</span>` : "";
return titleHtml + urlHtml + descHtml;
},
_bindEvents: function() {
const that = this;
if (that.options.showOn === "click") {
that.wrapper.on("click.kendoCitation", that._onChipClick.bind(that));
$(document).on(CLICK + that._docNS, function(e) {
if (that._isOpen && !that._popoverContent.is(e.target) && !$.contains(that._popoverContent[0], e.target) && !that.wrapper.is(e.target) && !$.contains(that.wrapper[0], e.target)) that.close();
});
} else {
that.wrapper.on("mouseenter.kendoCitation", that.open.bind(that));
that.wrapper.on("mouseleave.kendoCitation", function(e) {
if (!that._popoverContent.is(e.relatedTarget) && !$.contains(that._popoverContent[0], e.relatedTarget)) that.close();
});
that._popoverContent.on("mouseleave.kendoCitation", function(e) {
if (!that.wrapper.is(e.relatedTarget) && !$.contains(that.wrapper[0], e.relatedTarget)) that.close();
});
that.wrapper.on("focusin.kendoCitation", that.open.bind(that));
that.wrapper.on("focusout.kendoCitation", function(e) {
if (!that.wrapper.is(e.relatedTarget) && !$.contains(that.wrapper[0], e.relatedTarget) && !that._popoverContent.is(e.relatedTarget) && !$.contains(that._popoverContent[0], e.relatedTarget)) that.close();
});
}
that._popoverContent.on("click.kendoCitation", ".k-citation-prev", function() {
that._navigate("prev");
});
that._popoverContent.on("click.kendoCitation", ".k-citation-next", function() {
that._navigate("next");
});
},
_onChipClick: function() {
const that = this;
if (that._isOpen) that.close();
else that.open();
},
open: function() {
const that = this;
if (!that.trigger(OPEN, { sources: that.options.sources })) {
that._currentPage = 0;
that._updatePage();
that._popup.open();
that._popoverContent.attr("aria-hidden", "false");
that.wrapper.addClass("k-chip-selected").attr("aria-pressed", "true");
that._isOpen = true;
}
},
close: function() {
const that = this;
that._popup.close();
that._popoverContent.attr("aria-hidden", "true");
that.wrapper.removeClass("k-chip-selected").attr("aria-pressed", "false");
that._isOpen = false;
},
_navigate: function(direction) {
const that = this;
const total = that.options.sources.length;
if (direction === "prev") that._currentPage = Math.max(0, that._currentPage - 1);
else that._currentPage = Math.min(total - 1, that._currentPage + 1);
that._updatePage();
},
setOptions: function(options) {
const that = this;
that.close();
$(document).off(CLICK + that._docNS);
that.wrapper.off(NS);
if (that._popup) that._popup.destroy();
that._chip.destroy();
that._chipElement.insertBefore(that.wrapper);
that.wrapper.remove();
that.element = that._chipElement;
Widget.fn.setOptions.call(that, options);
that._render();
that._bindEvents();
},
destroy: function() {
const that = this;
that.wrapper.off(NS);
$(document).off(CLICK + that._docNS);
that._popoverContent.off(NS);
if (that._popup) {
that._popup.destroy();
that._popup = null;
}
if (that._chip) {
that._chip.destroy();
that._chip = null;
}
that.element = that._hostElement;
Widget.fn.destroy.call(that);
}
});
kendo.ui.plugin(Citation);
})(window.kendo.jQuery);
var kendo_citation_default = kendo;
//#endregion
export { __meta__, kendo_citation_default as default };