Skip to content

Commit

Permalink
Merge pull request #441 from IgniteUI/dTsvetkov/improve-pages-perform…
Browse files Browse the repository at this point in the history 
…ance

Improve pages performance
  • Loading branch information
@hanastasov
hanastasov authored May 24, 2023
2 parents 37dc622 + 23f1814 commit 0ab879d
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 57 deletions.
3 changes: 2 additions & 1 deletion src/app/services/code-view/code-view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export class CodeView implements ICodeViewEvents, ICodeViewMembers {
$sampleContainer: JQuery<HTMLElement>,
$exampleTab: JQuery<HTMLElement>,
$fullscreenButton: JQuery<HTMLElement>;
let frameSrc = $(this.element).attr('iframe-src');

//Init the main elements
$iframe = $(this.element.find('iframe'));
Expand Down Expand Up @@ -61,7 +62,7 @@ export class CodeView implements ICodeViewEvents, ICodeViewMembers {

//Create fullscreen button and add it to the code view navbar
$fullscreenButton = $((util.isIE ? "<span class='fs-button-container' style='width: 35px'><i class='material-icons code-view-fullscreen'>open_in_full</i></span>" : "<span class='fs-button-container' title='Expand to fullscreen'></span>"));
$fullscreenButton.on('click', function () { window.open($iframe.attr("src") || $iframe.attr("data-src")) });
$fullscreenButton.on('click', function () { window.open($iframe.attr("src") || $iframe.attr("data-src") || frameSrc ) });
$fullscreenButton.appendTo($navbar);

//Render the code view widget
Expand Down
134 changes: 78 additions & 56 deletions src/app/services/rendering/article.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,28 +70,28 @@ export class ArticleRenderingService extends RenderingService {
// Removes the html extension of the anchors and adds event listeners for internal routing
private configureInternalNavigation() {
$('.article-container a:not([href^="http"])')
.each( (index, anchor) => {
let $anchor = $(anchor).is("a") ? $(anchor) : $(anchor).closest("a");
let anchorHref = $anchor.attr('href');

$anchor.on('click', (e) => {
e.preventDefault();

$("#toc a.active").closest("li").addClass("active");
if($anchor.attr("href")?.startsWith("#")) {
util.scroll($anchor.attr("href"));
if($anchor.attr("href") !== location.hash)
history.pushState({scrollPosition: $(window).scrollTop()}, "", $anchor.attr("href"));
} else {
this.router.navigateTo($anchor.attr("href")!, this.navigationOptions);

.each( (index, anchor) => {
let $anchor = $(anchor).is("a") ? $(anchor) : $(anchor).closest("a");
let anchorHref = $anchor.attr('href');

$anchor.on('click', (e) => {
e.preventDefault();

$("#toc a.active").closest("li").addClass("active");
if ($anchor.attr("href")?.startsWith("#")) {
util.scroll($anchor.attr("href"));
if ($anchor.attr("href") !== location.hash)
history.pushState({scrollPosition: $(window).scrollTop()}, "", $anchor.attr("href"));
} else {
this.router.navigateTo($anchor.attr("href")!, this.navigationOptions);

}
});

if (util.removeHTMLExtensionFromUrl && anchorHref) {
$anchor.attr('href', anchorHref.replace(".html", ""));
}
});

if (util.removeHTMLExtensionFromUrl && anchorHref) {
$anchor.attr('href', anchorHref.replace(".html", ""));
}
});
}

private addGtmButtons() {
Expand Down Expand Up @@ -265,42 +265,63 @@ export class ArticleRenderingService extends RenderingService {

let views = $("code-view");
for (let i = 0; i < views.length; i++) {
const currentView = views[i];
const style = $(currentView).attr("style")!;
const iframeSrc = $(currentView).attr("iframe-src")!;
const alt = $(currentView).attr("alt");
const themable = $(currentView).is("[no-theming]") ? true : false;

$(currentView).removeAttr("style");

let sampleContainer = $('<div>').attr("style",style).addClass("sample-container code-view-tab-content loading");
let iframe = $<HTMLIFrameElement>('<iframe>', {
id: 'sample-iframe-id-' + i,
frameborder: 0,
seamless: ""
}).width("100%").height("100%");

if (i === 0){
if (platform === "angular" ){
iframe.on("load", (event: JQuery.Event & {target: HTMLIFrameElement}) => onSampleIframeContentLoaded(event.target));
const currentView = views[i];
const style = $(currentView).attr("style")!;
const iframeSrc = $(currentView).attr("iframe-src")!;
const alt = $(currentView).attr("alt");
const imgSrc = $(currentView).attr("img-src");
const themable = $(currentView).is("[no-theming]") ? true : false;

$(currentView).removeAttr("style");

let sampleContainer = $('<div>').attr("style",style).addClass("sample-container code-view-tab-content loading");
let iframe = $<HTMLIFrameElement>('<iframe>', {
id: 'sample-iframe-id-' + i,
frameborder: 0,
seamless: "",
title: alt
}).width("100%").height("100%");

if (i === 0) {
if (imgSrc) {
const img = $('<img>').attr({'src': imgSrc, "alt": alt!}).width("100%").height("100%");
sampleContainer.append(img);
sampleContainer.removeClass("loading");
sampleContainer.attr("style", "")

// Replace image with iframe on mouse enter
img.on("mouseenter", function () {
if (i === 0) {
img.replaceWith(iframe);
sampleContainer.attr("style", style)
sampleContainer.addClass("loading");
}
});
}
if (platform === "angular") {
iframe.on("load", (event: JQuery.Event & { target: HTMLIFrameElement }) => onSampleIframeContentLoaded(event.target));
} else {
iframe.on("load", (event: JQuery.Event & { target: HTMLIFrameElement }) => onXPlatSampleIframeContentLoaded(event.target));
}

iframe.attr("src", iframeSrc);

if (!imgSrc) {
iframe.appendTo(sampleContainer);
}
}else {
iframe.on("load", (event: JQuery.Event & {target: HTMLIFrameElement}) => onXPlatSampleIframeContentLoaded(event.target));
iframe.attr("class","lazyload");
iframe.attr("data-src", iframeSrc);
iframe.appendTo(sampleContainer);
}

iframe.attr("src", iframeSrc);
}else {
iframe.attr("class","lazyload");
iframe.attr("data-src", iframeSrc);
}
if (alt) iframe.attr("alt", alt);
if (themable) iframe.addClass("no-theming");

if (alt) iframe.attr("alt", alt);
if (themable) iframe.addClass("no-theming");

iframe.appendTo(sampleContainer);
sampleContainer.appendTo(currentView);
$(currentView).codeView({iframeId : i});
sampleContainer.appendTo(currentView);
$(currentView).codeView({iframeId : i});
}
}
}

private addCtaBanners() {
const languageVersion: string = $('html')[0].lang;
Expand Down Expand Up @@ -353,8 +374,9 @@ export class ArticleRenderingService extends RenderingService {
const header = $(".article-container h2")[headerIndex], divTag = $('<div>');
divTag.addClass('dfx-seo-banner');
const imgTag = $('<img>').css('width', '100%');
$(imgTag).attr("src", imagePath)
$(imgTag).attr("loading", "lazy")
$(imgTag).attr("src", imagePath);
$(imgTag).attr("alt", label);
$(imgTag).attr("loading", "lazy");
const link = this.appendLinkAttributes(action, label, productLink);
link.append(imgTag);
$(divTag).append(link);
Expand All @@ -365,7 +387,7 @@ export class ArticleRenderingService extends RenderingService {
$(".anchorjs-link").on("click", (evt) => {
evt.preventDefault();
util.scroll($(evt?.target)?.attr("href")!);
if($(evt?.target)?.attr("href")! !== location.hash)
if ($(evt?.target)?.attr("href")! !== location.hash)
history.pushState({scrollPosition: $(window).scrollTop()}, "", $(evt?.target)?.attr("href")!);
});
}
Expand All @@ -384,9 +406,9 @@ export class ArticleRenderingService extends RenderingService {
accContentd.on("click", (e: JQuery.Event & {target: HTMLElement}) => {
let el;
if(!$(e.target).is(".faqs-accordion-content")) {
el = $(e.target).closest(".faqs-accordion-content");
el = $(e.target).closest(".faqs-accordion-content");
} else {
el = $(e.target);
el = $(e.target);
}
el.toggleClass("active");
let panel = el.find(".faqs-accordion-panel")[0];
Expand Down

0 comments on commit 0ab879d

Please sign in to comment.