@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
146 lines (145 loc) • 8.71 kB
JavaScript
/**
* CodeAnalizerComment: Updated 4 imports on 2024-09-21 23:07:24
* Update:: import { IEasyIcons } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/eiTypes;'
* Update:: import { IEasyIconGroup } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/eiTypes;'
* Update:: import { IEasyIconGroups } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/eiTypes;'
* Update:: import { EasyIconLocation } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/EasyIconLocation;'
*/
import * as React from 'react';
import { EasyIconLocation } from "@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/interfaces/EasyIconLocation";
import { Icon, } from '@fluentui/react/lib/Icon';
/**
*
* @param EasyIcons
* @param variation
* Base: Just the icon with hover zoom and title text in image title
*
* 5:
* @returns
*/
export function getEasyIconElement(EasyIcons, variation) {
let title = 'Base';
if (variation === '1')
title = 'Variation 1';
if (variation === '2')
title = 'Variation 2 - Background image';
if (variation === '3')
title = 'Variation 3 - Double Image';
if (variation === '4')
title = 'Variation 4 - Double Image Card v2';
if (variation === '5')
title = 'Variation 5 - Double Image v3';
if (variation === 'fly')
title = 'Variation 6 - flyingcar - https://codepen.io/flyingcar/pen/jmvLqG';
if (variation === 'hero')
title = 'Variation 7 - w3 schools hero https://www.w3schools.com/cssref/tryit.php?filename=trycss3_background_hero';
if (variation === 'geek')
title = 'Variation 8 - geek img https://www.geeksforgeeks.org/how-to-set-the-div-height-to-auto-adjust-to-background-size/';
const Icons = React.createElement("div", null,
React.createElement("div", { style: { overflow: '' } },
"If you see a ",
React.createElement("b", null, "box with text"),
" instead of an image, the text indicates ",
React.createElement("b", null, "where there should be an image"),
". Please contact IT and request they add a suitable image for that Icon. You can click the folder Icon to the right and go directly to that folder to verify image file names which must be .PNG format."),
React.createElement("div", { className: 'easy-icons-grid', style: { display: 'grid' } }, Object.keys(EasyIcons.Groups).map((group) => {
const EGroup = EasyIcons.Groups[group];
// https://github.com/mikezimm/pivottiles7/issues/351
const GroupUrl = `${EasyIconLocation}${EGroup.Folder}`;
const OpenFolderLink = React.createElement(Icon, { title: "Open Folder in New Tab", iconName: "OpenFolderHorizontal", onClick: () => { window.open(GroupUrl, '_blank'); } });
return (React.createElement("div", { className: 'easy-icons-group', key: group },
React.createElement("div", { className: 'easy-icons-group-title' },
React.createElement("div", null, EGroup.Folder),
" ",
OpenFolderLink),
React.createElement("div", { className: 'easy-icons-group-icons' }, EGroup.Icons.map((icon) => {
const imageUrl = `${EasyIconLocation}${EGroup.Folder}/${icon}.png`;
if (!icon) {
return null;
}
// Look at this example for cards: https://codepen.io/flyingcar/pen/jmvLqG
// Or maybe this one: https://ehtmlu.com/blog/simple-css-image-grid/ ==>> https://codepen.io/eHtmlu/pen/BaodGVp has Hover Text
// Or possibly this one although maybe not: https://codepen.io/knyttneve/pen/YgZbLO
else if (variation === 'Base') {
return easyIconDiv(EGroup, icon, imageUrl);
}
else if (variation === '2') {
return easyIconDiv2(EGroup, icon, imageUrl);
}
else if (variation === '3') {
return easyIconDiv3(EGroup, icon, imageUrl);
}
else if (variation === '4') {
return easyIconDiv4(EGroup, icon, imageUrl);
}
else if (variation === '5') {
return easyIconDivCard(EGroup, icon, imageUrl);
}
else if (variation === 'fly') {
return easyIconDivfly(EGroup, icon, imageUrl);
}
else if (variation === 'hero') {
return easyIconDivhero(EGroup, icon, imageUrl);
}
else if (variation === 'geek') {
return easyIconDivgeek(EGroup, icon, imageUrl);
}
}))));
})));
return Icons;
}
export function easyIconDiv(EGroup, icon, src) {
const img = React.createElement("img", { key: icon, className: 'easy-icons-image', src: src, style: {}, title: `${EGroup.Folder}/${icon}` });
return img;
}
export function easyIconDiv2(EGroup, icon, src) {
const img = React.createElement("div", { className: 'bg-image', style: { backgroundImage: `url(${src})` }, key: icon },
React.createElement("span", { className: 'bg-image-caption' }, "This is some span text"));
return img;
}
export function easyIconDiv3(EGroup, icon, src) {
const img = React.createElement("div", { className: 'bg-image', style: { backgroundImage: `url(${src})` } },
React.createElement("img", { key: icon, className: 'easy-icons-image', src: `${src}`, style: { visibility: 'hidden' }, title: `${EGroup.Folder}/${icon}` }),
React.createElement("span", { className: 'bg-image-caption' }, "This is some span text"));
return img;
}
export function easyIconDiv4(EGroup, icon, src) {
const img = React.createElement("div", { className: 'bg-image-card' },
React.createElement("div", { className: 'bg-image', style: { backgroundImage: `url(${src})` } },
React.createElement("img", { key: icon, className: 'easy-icons-image', src: `${src}`, style: { visibility: 'hidden' }, title: `${EGroup.Folder}/${icon}` }),
React.createElement("span", { className: 'bg-image-caption' }, "This is some span text")));
return img;
}
export function easyIconDivCard(EGroup, icon, src) {
const img = React.createElement("div", { className: 'bg-image-card' },
React.createElement("div", { className: 'bg-image', style: { backgroundImage: `url(${src})` } },
React.createElement("img", { key: icon, className: 'easy-icons-image', src: `${src}`, style: { visibility: 'hidden' }, title: `${EGroup.Folder}/${icon}` })),
React.createElement("div", { className: 'bg-image-caption' },
React.createElement("span", null, "This is some span text")));
return img;
}
export function easyIconDivhero(EGroup, icon, src) {
const img = React.createElement("div", { className: "hero-image", style: { backgroundImage: `url(${src})` } },
React.createElement("img", { src: src, style: { visibility: 'hidden' } }),
React.createElement("div", { className: "hero-text" },
React.createElement("h1", { className: "font-size:50px" }, "Link Title"),
React.createElement("h3", null, "Link Desc"),
React.createElement("button", null, "Hire me")));
return img;
}
export function easyIconDivfly(EGroup, icon, src) {
const img = React.createElement("div", { className: "fly-img-box", key: icon },
React.createElement("div", { className: "inner", style: { backgroundImage: `url(${src})` } },
React.createElement("a", { href: src, className: "fly_click", target: '_blank' },
React.createElement("div", { className: "flex_this" },
React.createElement("h1", { className: "fly_title" }, EGroup.Folder),
React.createElement("span", { className: "fly_link" }, "Link")))));
return img;
}
export function easyIconDivgeek(EGroup, icon, src) {
const img = React.createElement("div", { className: 'geekwrap', style: { backgroundImage: `url(${src})` } },
React.createElement("h1", { className: 'geekh1' }, "GeeksforGeeks"),
React.createElement("img", { className: 'geekimg', src: src, alt: "Image" }));
return img;
}
//# sourceMappingURL=eiHelpIcons.js.map