Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new angular and blazor cta banners #463

Merged
merged 1 commit into from
Apr 25, 2024
Merged

Add new angular and blazor cta banners #463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 65 additions & 10 deletions src/app/services/rendering/article.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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 = $('<div>');
divTag.addClass('dfx-seo-banner');
const imgTag = $('<img>').css('width', '100%');
Expand All @@ -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 = $('<div>');
divTag.addClass('row banner-wrapper');

divTag.append(
$('<div>').addClass('col-md-2').append(
$('<div>').addClass('cta-image').append(
$('<img>').attr({
'loading': 'lazy',
'src': LOGO_PATH,
'alt': 'IgniteUI'
}).addClass('logo')
)
),
$('<div>').addClass('col-md-7').append(
$('<div>').addClass('cta-title-desc text-center text-md-left').append(
$('<div>').addClass('cta-desc').append(
$('<p>').addClass('text-margin').text(content)
)
)
),
$('<div>').addClass('col-md-3').append(
$('<div>').addClass('cta-button-wrapper').append(
$('<a>').addClass('cta-button')
.attr('href', productLink)
.text(actionText)
)
)
);

$(header).before(divTag);
}

private anchorJs() {
$(".anchorjs-link").on("click", (evt) => {
evt.preventDefault();
Expand Down
71 changes: 71 additions & 0 deletions src/styles/shared/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading