Skip to content

Commit 0ab879d

Browse files
hanastasovhanastasov
authored
Merge pull request #441 from IgniteUI/dTsvetkov/improve-pages-performance
Improve pages performance
2 parents 37dc622 + 23f1814 commit 0ab879d

File tree

2 files changed

+80
-57
lines changed

2 files changed

+80
-57
lines changed

‎src/app/services/code-view/code-view.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class CodeView implements ICodeViewEvents, ICodeViewMembers {
3434
$sampleContainer: JQuery<HTMLElement>,
3535
$exampleTab: JQuery<HTMLElement>,
3636
$fullscreenButton: JQuery<HTMLElement>;
37+
let frameSrc = $(this.element).attr('iframe-src');
3738

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

6263
//Create fullscreen button and add it to the code view navbar
6364
$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>"));
64-
$fullscreenButton.on('click', function () { window.open($iframe.attr("src") || $iframe.attr("data-src")) });
65+
$fullscreenButton.on('click', function () { window.open($iframe.attr("src") || $iframe.attr("data-src") || frameSrc ) });
6566
$fullscreenButton.appendTo($navbar);
6667

6768
//Render the code view widget

‎src/app/services/rendering/article.ts

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -70,28 +70,28 @@ export class ArticleRenderingService extends RenderingService {
7070
// Removes the html extension of the anchors and adds event listeners for internal routing
7171
private configureInternalNavigation() {
7272
$('.article-container a:not([href^="http"])')
73-
.each( (index, anchor) => {
74-
let $anchor = $(anchor).is("a") ? $(anchor) : $(anchor).closest("a");
75-
let anchorHref = $anchor.attr('href');
76-
77-
$anchor.on('click', (e) => {
78-
e.preventDefault();
79-
80-
$("#toc a.active").closest("li").addClass("active");
81-
if($anchor.attr("href")?.startsWith("#")) {
82-
util.scroll($anchor.attr("href"));
83-
if($anchor.attr("href") !== location.hash)
84-
history.pushState({scrollPosition: $(window).scrollTop()}, "", $anchor.attr("href"));
85-
} else {
86-
this.router.navigateTo($anchor.attr("href")!, this.navigationOptions);
87-
73+
.each( (index, anchor) => {
74+
let $anchor = $(anchor).is("a") ? $(anchor) : $(anchor).closest("a");
75+
let anchorHref = $anchor.attr('href');
76+
77+
$anchor.on('click', (e) => {
78+
e.preventDefault();
79+
80+
$("#toc a.active").closest("li").addClass("active");
81+
if ($anchor.attr("href")?.startsWith("#")) {
82+
util.scroll($anchor.attr("href"));
83+
if ($anchor.attr("href") !== location.hash)
84+
history.pushState({scrollPosition: $(window).scrollTop()}, "", $anchor.attr("href"));
85+
} else {
86+
this.router.navigateTo($anchor.attr("href")!, this.navigationOptions);
87+
88+
}
89+
});
90+
91+
if (util.removeHTMLExtensionFromUrl && anchorHref) {
92+
$anchor.attr('href', anchorHref.replace(".html", ""));
8893
}
8994
});
90-
91-
if (util.removeHTMLExtensionFromUrl && anchorHref) {
92-
$anchor.attr('href', anchorHref.replace(".html", ""));
93-
}
94-
});
9595
}
9696

9797
private addGtmButtons() {
@@ -265,42 +265,63 @@ export class ArticleRenderingService extends RenderingService {
265265

266266
let views = $("code-view");
267267
for (let i = 0; i < views.length; i++) {
268-
const currentView = views[i];
269-
const style = $(currentView).attr("style")!;
270-
const iframeSrc = $(currentView).attr("iframe-src")!;
271-
const alt = $(currentView).attr("alt");
272-
const themable = $(currentView).is("[no-theming]") ? true : false;
273-
274-
$(currentView).removeAttr("style");
275-
276-
let sampleContainer = $('<div>').attr("style",style).addClass("sample-container code-view-tab-content loading");
277-
let iframe = $<HTMLIFrameElement>('<iframe>', {
278-
id: 'sample-iframe-id-' + i,
279-
frameborder: 0,
280-
seamless: ""
281-
}).width("100%").height("100%");
282-
283-
if (i === 0){
284-
if (platform === "angular" ){
285-
iframe.on("load", (event: JQuery.Event & {target: HTMLIFrameElement}) => onSampleIframeContentLoaded(event.target));
268+
const currentView = views[i];
269+
const style = $(currentView).attr("style")!;
270+
const iframeSrc = $(currentView).attr("iframe-src")!;
271+
const alt = $(currentView).attr("alt");
272+
const imgSrc = $(currentView).attr("img-src");
273+
const themable = $(currentView).is("[no-theming]") ? true : false;
274+
275+
$(currentView).removeAttr("style");
276+
277+
let sampleContainer = $('<div>').attr("style",style).addClass("sample-container code-view-tab-content loading");
278+
let iframe = $<HTMLIFrameElement>('<iframe>', {
279+
id: 'sample-iframe-id-' + i,
280+
frameborder: 0,
281+
seamless: "",
282+
title: alt
283+
}).width("100%").height("100%");
284+
285+
if (i === 0) {
286+
if (imgSrc) {
287+
const img = $('<img>').attr({'src': imgSrc, "alt": alt!}).width("100%").height("100%");
288+
sampleContainer.append(img);
289+
sampleContainer.removeClass("loading");
290+
sampleContainer.attr("style", "")
291+
292+
// Replace image with iframe on mouse enter
293+
img.on("mouseenter", function () {
294+
if (i === 0) {
295+
img.replaceWith(iframe);
296+
sampleContainer.attr("style", style)
297+
sampleContainer.addClass("loading");
298+
}
299+
});
300+
}
301+
if (platform === "angular") {
302+
iframe.on("load", (event: JQuery.Event & { target: HTMLIFrameElement }) => onSampleIframeContentLoaded(event.target));
303+
} else {
304+
iframe.on("load", (event: JQuery.Event & { target: HTMLIFrameElement }) => onXPlatSampleIframeContentLoaded(event.target));
305+
}
306+
307+
iframe.attr("src", iframeSrc);
308+
309+
if (!imgSrc) {
310+
iframe.appendTo(sampleContainer);
311+
}
286312
}else {
287-
iframe.on("load", (event: JQuery.Event & {target: HTMLIFrameElement}) => onXPlatSampleIframeContentLoaded(event.target));
313+
iframe.attr("class","lazyload");
314+
iframe.attr("data-src", iframeSrc);
315+
iframe.appendTo(sampleContainer);
288316
}
289317

290-
iframe.attr("src", iframeSrc);
291-
}else {
292-
iframe.attr("class","lazyload");
293-
iframe.attr("data-src", iframeSrc);
294-
}
318+
if (alt) iframe.attr("alt", alt);
319+
if (themable) iframe.addClass("no-theming");
295320

296-
if (alt) iframe.attr("alt", alt);
297-
if (themable) iframe.addClass("no-theming");
298-
299-
iframe.appendTo(sampleContainer);
300-
sampleContainer.appendTo(currentView);
301-
$(currentView).codeView({iframeId : i});
321+
sampleContainer.appendTo(currentView);
322+
$(currentView).codeView({iframeId : i});
302323
}
303-
}
324+
}
304325

305326
private addCtaBanners() {
306327
const languageVersion: string = $('html')[0].lang;
@@ -353,8 +374,9 @@ export class ArticleRenderingService extends RenderingService {
353374
const header = $(".article-container h2")[headerIndex], divTag = $('<div>');
354375
divTag.addClass('dfx-seo-banner');
355376
const imgTag = $('<img>').css('width', '100%');
356-
$(imgTag).attr("src", imagePath)
357-
$(imgTag).attr("loading", "lazy")
377+
$(imgTag).attr("src", imagePath);
378+
$(imgTag).attr("alt", label);
379+
$(imgTag).attr("loading", "lazy");
358380
const link = this.appendLinkAttributes(action, label, productLink);
359381
link.append(imgTag);
360382
$(divTag).append(link);
@@ -365,7 +387,7 @@ export class ArticleRenderingService extends RenderingService {
365387
$(".anchorjs-link").on("click", (evt) => {
366388
evt.preventDefault();
367389
util.scroll($(evt?.target)?.attr("href")!);
368-
if($(evt?.target)?.attr("href")! !== location.hash)
390+
if ($(evt?.target)?.attr("href")! !== location.hash)
369391
history.pushState({scrollPosition: $(window).scrollTop()}, "", $(evt?.target)?.attr("href")!);
370392
});
371393
}
@@ -384,9 +406,9 @@ export class ArticleRenderingService extends RenderingService {
384406
accContentd.on("click", (e: JQuery.Event & {target: HTMLElement}) => {
385407
let el;
386408
if(!$(e.target).is(".faqs-accordion-content")) {
387-
el = $(e.target).closest(".faqs-accordion-content");
409+
el = $(e.target).closest(".faqs-accordion-content");
388410
} else {
389-
el = $(e.target);
411+
el = $(e.target);
390412
}
391413
el.toggleClass("active");
392414
let panel = el.find(".faqs-accordion-panel")[0];

0 commit comments

Comments
 (0)