diff --git a/src/app/services/rendering/article.ts b/src/app/services/rendering/article.ts index a3419a0..0e75283 100644 --- a/src/app/services/rendering/article.ts +++ b/src/app/services/rendering/article.ts @@ -2,10 +2,22 @@ import util from "../utils"; import { RenderingService, HTMLHighlightedCodeElement, INavigationOptions } from "../../types";; import anchors from 'anchor-js'; import hljs from "../highlight-custom"; -import type { IgniteUIPlatform} from '../../types'; +import type { IgniteUIPlatform } from '../../types'; import { onSampleIframeContentLoaded, onXPlatSampleIframeContentLoaded } from "../../handlers"; import { Router } from "../router"; +const LOGO_PATH = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg'; +const SIGN_UP = 'Sign Up For A Trial'; +const TRY_NOW = 'Try Now For Free'; + +const ANGULAR_GENERIC_COPY = 'Ignite UI for Angular contains over 60+ components, flexible API, powerful theming and branding capabilities, and a rich feature set that will let you build Angular apps with the speed and functionalities you require.' +const ANGULAR_GRID_COPY = 'Ignite UI for Angular Data Grid is the fastest and feature-rich component, offering paging, sorting, filtering, grouping, exporting to PDF and Excel, and more. It`s everything you need for the ultimate app building experience and data manipulation.' +const ANGULAR_CHARTS_COPY = 'Render millions of data points and build your visualizations with 60+ real-time Angular charts by Ignite UI for Angular. This is the most extensive chart library, fitting any application scenario.' + +const BLAZOR_GENERIC_COPY = 'Build modern web experiences with Ignite UI for Blazor - the most comprehensive UI library on the market today. Packing a full set of ready-to-use features, 60+ reusable components, including the fastest Data Grid, high-performance Charts, and others.' +const BLAZOR_GRID_COPY = 'Ignite UI for Blazor Data Grid delivers a full set of ready-to-use features, covering everything from paging, sorting, filtering, editing, grouping to virtualization on rows and columns, and beyond, without limiting .NET developers.' +const BLAZOR_CHARTS_COPY = 'Transform raw data into stunning visualizations with Ignite UI for Blazor Charts and ensure the best user experience. The Component includes 60+ high-performance charts and graphs optimized for Blazor WebAssembly and Blazor Server.' + const IGNITE_UI_TEMPLATE_BANNER = 'https://static.infragistics.com/marketing/Blog-in-content-ads/Ignite-UI-PlatformPath/ignite-ui-Platform-you-get-ad.gif'; const REACT_CTA_BANNER = 'https://static.infragistics.com/marketing/Blog-in-content-ads/Ignite-UI-React/ignite-ui-react-you-get.gif'; const WEB_COPONENTS_CTA_BANNER = 'https://static.infragistics.com/marketing/Blog-in-content-ads/Ignite-UI-Web-Components/ignite-ui-web-components.gif'; @@ -341,7 +353,7 @@ export class ArticleRenderingService extends RenderingService { imagePath = languageVersion === 'en' ? INDIGO_DESIGN_CTA_BANNER : JP_INDIGO_DESIGN_CTA_BANNER; } else if (productLink.includes("appbuilder")) { action = 'Learn More'; - productLink = "https://www.appbuilder.dev/help"; + productLink = "https://www.appbuilder.dev"; imagePath = languageVersion === 'en' ? APP_BUILDER_CTA_BANNER : JP_APP_BUILDER_CTA_BANNER; } else if (productLink.includes("web-components")) { imagePath = languageVersion === 'en' ? WEB_COPONENTS_CTA_BANNER : JP_WEB_COPONENTS_CTA_BANNER; @@ -356,22 +368,21 @@ export class ArticleRenderingService extends RenderingService { } if (productLink.includes("angular") && $(".article-container h2")[2]){ - this.appendBanner(2, productLink, imagePath, action, productTitle); - + this.createCtaBanner(0, TRY_NOW, productLink, true); if ($(".article-container h2")[4]){ const builderImagePath = languageVersion === 'en' ? APP_BUILDER_CTA_BANNER : JP_APP_BUILDER_CTA_BANNER; - const аppbuilderLink = 'https://www.appbuilder.dev/help'; + const appbuilderLink = 'https://www.appbuilder.dev'; action = 'Learn More'; - this.appendBanner(4, аppbuilderLink, builderImagePath, action, 'App Builder | CTA Banner'); + this.createCtaImageBanner(4, appbuilderLink, builderImagePath, action, 'App Builder | CTA Banner'); } - } else if(productLink.includes("blazor") || productLink.includes("react")){ - this.appendBanner($(".article-container h2").length - 1, productLink, imagePath, action, productTitle); + } else if(productLink.includes("blazor")){ + this.createCtaBanner(0, TRY_NOW, productLink); } else if($(".article-container h2")[2]){ - this.appendBanner(2, productLink, imagePath, action, productTitle); + this.createCtaImageBanner(2, productLink, imagePath, action, productTitle); } } - private appendBanner(headerIndex: number, productLink: string, imagePath: string, action: string, label: string){ + private createCtaImageBanner(headerIndex: number, productLink: string, imagePath: string, action: string, label: string){ const header = $(".article-container h2")[headerIndex], divTag = $('
'); divTag.addClass('dfx-seo-banner'); const imgTag = $('').css('width', '100%'); @@ -384,6 +395,50 @@ export class ArticleRenderingService extends RenderingService { $(header).before(divTag); } + private createCtaBanner(headerIndex: number, actionText: string, productLink: string, isAngular: boolean = false) { + const currentHref = window.location.href; + let content = ''; + + if (currentHref.includes("grid")) { + isAngular ? content = ANGULAR_GRID_COPY : content = BLAZOR_GRID_COPY; + } else if (currentHref.includes("chart")) { + isAngular ? content = ANGULAR_CHARTS_COPY : content = BLAZOR_CHARTS_COPY; + } else { + isAngular ? content = ANGULAR_GENERIC_COPY : content = BLAZOR_GENERIC_COPY; + headerIndex = 1; + } + const header = $(".article-container h2")[headerIndex], divTag = $('
'); + divTag.addClass('row banner-wrapper'); + + divTag.append( + $('
').addClass('col-md-2').append( + $('
').addClass('cta-image').append( + $('').attr({ + 'loading': 'lazy', + 'src': LOGO_PATH, + 'alt': 'IgniteUI' + }).addClass('logo') + ) + ), + $('
').addClass('col-md-7').append( + $('
').addClass('cta-title-desc text-center text-md-left').append( + $('
').addClass('cta-desc').append( + $('

').addClass('text-margin').text(content) + ) + ) + ), + $('

').addClass('col-md-3').append( + $('
').addClass('cta-button-wrapper').append( + $('').addClass('cta-button') + .attr('href', productLink) + .text(actionText) + ) + ) + ); + + $(header).before(divTag); + } + private anchorJs() { $(".anchorjs-link").on("click", (evt) => { evt.preventDefault(); diff --git a/src/styles/shared/_global.scss b/src/styles/shared/_global.scss index 885e607..080d3fe 100644 --- a/src/styles/shared/_global.scss +++ b/src/styles/shared/_global.scss @@ -168,6 +168,77 @@ $sg-items-gap: rem(8px); } } +.banner-wrapper { + display: flex; + justify-content: center; + align-items: center; + margin: 20px auto; + border-width: 1px; + border-style: solid; + border-radius: 2px; + border-color: #dedede; +} + +.cta-button-wrapper { + display: flex; + justify-content: center; +} + +.cta-button { + cursor: pointer; + color: #fff; + background-color: #0099FF; + text-transform: uppercase; + font-weight: bold; + font-size: 0.8rem; + margin-left: 10px; + padding: 0.5em 1.5em; + border: 1px solid #0099FF; + border-radius: 0; + transition: all 250ms ease-in-out; + white-space: nowrap; +} + +.text-margin { + margin-left: 2rem; + margin-top: rem(24px); +} + +.logo { + max-width: rem(200px); +} + +@media (min-width: 1200px) { + .cta-image { + margin-left: rem(16px); + } +} + +@media (max-width: 991px) { + .logo { + max-height: rem(48px); + } + .cta-image { + display: flex; + justify-content: center; + margin-top: rem(32px); + } + .cta-button-wrapper { + margin-bottom: rem(16px) + } + .banner-wrapper { + display: block; + } +} + +@media (max-width: 1200px) and (min-width: 992px) { + .cta-button { + display: inline-block; + max-width: 100%; + font-size: 0.7rem !important; + } +} + .form-control { border-radius: $header-search-radius; }