Skip to content

Commit 7f09460

Browse files
anujsianujsi
committed
code changes
0 parents  commit 7f09460

8 files changed

+2887
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
.history

‎.prettierignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
# Ignore artifacts:
3+
build
4+
coverage

‎.prettierrc.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
semi: true,
3+
trailingComma: "all",
4+
singleQuote: true,
5+
printWidth: 120,
6+
tabWidth: 4,
7+
spaces: 4,
8+
arrowParens: "always",
9+
};

‎package-lock.json

+2,572
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "website-webcomponent",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"start": "webpack serve --mode development --open"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"dependencies": {
14+
"html-webpack-plugin": "^5.5.0",
15+
"path": "^0.12.7",
16+
"webpack": "^5.77.0",
17+
"webpack-cli": "^5.0.1",
18+
"webpack-dev-server": "^4.13.2"
19+
}
20+
}

‎src/custom.html

+203
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Patternfly elements Project</title>
6+
<script type="module" src="https://jspm.dev/@patternfly/elements"></script>
7+
<link
8+
rel="stylesheet"
9+
href="https://unpkg.com/@patternfly/patternfly/patternfly.css"
10+
crossorigin="anonymous"
11+
/>
12+
</head>
13+
<body>
14+
<div class="pf-c-page" id="dashboard-demo">
15+
<header class="pf-c-masthead" id="dashboard-demo-masthead">
16+
<span class="pf-c-masthead__toggle">
17+
<pf-button id="expandCollapseButton" plain
18+
><i class="fas fa-bars" aria-hidden="true"></i
19+
></pf-button>
20+
</span>
21+
<div class="pf-c-masthead__main">
22+
<a class="pf-c-masthead__brand" href="#">
23+
<picture
24+
class="pf-c-brand pf-m-picture"
25+
style="
26+
--pf-c-brand--Width: 180px;
27+
--pf-c-brand--Width-on-md: 180px;
28+
--pf-c-brand--Width-on-2xl: 220px;
29+
"
30+
>
31+
<source
32+
media="(min-width: 768px)"
33+
srcset="
34+
https://www.patternfly.org/v4/assets/images/logo__pf--reverse-on-md.svg
35+
"
36+
/>
37+
<source
38+
srcset="
39+
https://www.patternfly.org/v4/assets/images/logo__pf--reverse--base.svg
40+
"
41+
/>
42+
<img
43+
src="https://www.patternfly.org/v4/assets/images/logo__pf--reverse--base.png"
44+
alt="Fallback patternFly default logo"
45+
/>
46+
</picture>
47+
</a>
48+
</div>
49+
</header>
50+
<div id="sidebarList" class="pf-c-page__sidebar pf-m-expanded">
51+
<div class="pf-c-page__sidebar-body">
52+
<nav
53+
class="pf-c-nav"
54+
id="dashboard-demo-primary-nav"
55+
aria-label="Global"
56+
>
57+
<ul class="pf-c-nav__list">
58+
<li class="pf-c-nav__item">
59+
<a href="#" class="pf-c-nav__link">System panel</a>
60+
</li>
61+
<li class="pf-c-nav__item">
62+
<a
63+
href="#"
64+
class="pf-c-nav__link pf-m-current"
65+
aria-current="page"
66+
>Policy</a
67+
>
68+
</li>
69+
<li class="pf-c-nav__item">
70+
<a href="#" class="pf-c-nav__link">Authentication</a>
71+
</li>
72+
<li class="pf-c-nav__item">
73+
<a href="#" class="pf-c-nav__link">Network services</a>
74+
</li>
75+
<li class="pf-c-nav__item">
76+
<a href="#" class="pf-c-nav__link">Server</a>
77+
</li>
78+
</ul>
79+
</nav>
80+
</div>
81+
</div>
82+
<main
83+
class="pf-c-page__main"
84+
tabindex="-1"
85+
id="main-content-dashboard-demo"
86+
>
87+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
88+
<div class="pf-c-page__main-body">
89+
<div class="pf-c-content">
90+
<h1>Main title</h1>
91+
<p>This is a full page demo.</p>
92+
<pf-label color="blue">Blue</pf-label>
93+
<pf-label color="green">Green</pf-label>
94+
</div>
95+
</div>
96+
</section>
97+
<section class="pf-c-page__main-section pf-m-limit-width">
98+
<div class="pf-c-page__main-body">
99+
<div class="pf-l-grid pf-m-gutter">
100+
<pf-card size="compact">
101+
<h3 slot="header">
102+
<div class="pf-c-card__header">
103+
<div class="pf-c-card__header-toggle">
104+
<pf-button id="cardExpandButton" plain
105+
><span class="pf-c-card__header-toggle-icon">
106+
<i
107+
class="fas fa-angle-down"
108+
id="cardExpandButtonIcon"
109+
aria-hidden="true"
110+
></i> </span
111+
></pf-button>
112+
</div>
113+
<div
114+
class="pf-c-card__title"
115+
id="dashboard-demo-expandable-status-card-1-title"
116+
>
117+
<h2 class="pf-c-title pf-m-xl">
118+
Improve recommended pathways
119+
</h2>
120+
</div>
121+
</div>
122+
</h3>
123+
<div id="expandCollapseCardBody" class="pf-c-card__body">
124+
<div
125+
class="pf-l-flex pf-m-column pf-u-h-100 pf-m-space-items-sm"
126+
>
127+
<div class="pf-l-flex__item pf-m-spacer-md">
128+
<p>
129+
Upgrade your kernel version to remediate ntpd time sync
130+
issues, kernel panics, network instabilities and issues
131+
with system performance
132+
</p>
133+
</div>
134+
</div>
135+
</div>
136+
<pf-modal
137+
id="confirmationModal"
138+
variant="small"
139+
slot="footer"
140+
trigger="usage-trigger"
141+
>
142+
<p>Are you sure to confirm this information</p>
143+
<pf-button slot="footer" data-action="confirm">Yes</pf-button>
144+
<pf-button
145+
variant="secondary"
146+
slot="footer"
147+
data-action="cancel"
148+
data-action1="anuj"
149+
>No</pf-button
150+
>
151+
</pf-modal>
152+
<pf-button id="usage-trigger">Open modal</pf-button>
153+
</pf-card>
154+
</div>
155+
</div>
156+
</section>
157+
158+
<section class="pf-c-page__main-section pf-m-limit-width">
159+
<div class="pf-c-page__main-body">
160+
<div class="pf-l-grid pf-m-gutter">
161+
<pf-card size="compact">
162+
<h3 slot="header">Header</h3>
163+
<div class="pf-c-card__body">
164+
<pf-accordion>
165+
<pf-accordion-header>
166+
<h3>
167+
Laboris sunt qui dolor consectetur excepteur in aliqua
168+
ipsum?
169+
</h3>
170+
</pf-accordion-header>
171+
<pf-accordion-panel>
172+
<p>
173+
Culpa adipisicing sunt dolor ullamco dolor duis in ad
174+
commodo.
175+
</p>
176+
<a href="#">Call to action</a>
177+
</pf-accordion-panel>
178+
<pf-accordion-header>
179+
<h3>
180+
Anim est tempor fugiat pariatur laborum deserunt ex
181+
mollit aliquip?
182+
</h3>
183+
</pf-accordion-header>
184+
<pf-accordion-panel>
185+
<p>
186+
<a href="#">Ullamco ullamco sint</a> ex id magna elit
187+
deserunt dolore nostrud eu et dolore est Lorem. Esse
188+
laborum do ut consectetur occaecat proident et nostrud
189+
ut nostrud veniam officia Lorem.
190+
</p>
191+
</pf-accordion-panel>
192+
</pf-accordion>
193+
</div>
194+
195+
<p slot="footer">footer</p>
196+
</pf-card>
197+
</div>
198+
</div>
199+
</section>
200+
</main>
201+
</div>
202+
</body>
203+
</html>

‎src/index.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
console.log("test");
2+
3+
function SidebarExpandCollase() {
4+
const expandCollapseButton = document.getElementById("expandCollapseButton");
5+
const sidebarList = document.getElementById("sidebarList");
6+
7+
expandCollapseButton.addEventListener("click", function (event) {
8+
if (sidebarList.classList.contains("pf-m-expanded")) {
9+
sidebarList.classList.add("pf-m-collapsed");
10+
sidebarList.classList.remove("pf-m-expanded");
11+
} else if (sidebarList.classList.contains("pf-m-collapsed")) {
12+
sidebarList.classList.remove("pf-m-collapsed");
13+
sidebarList.classList.add("pf-m-expanded");
14+
}
15+
});
16+
}
17+
18+
SidebarExpandCollase();
19+
20+
function CardExpandCollapseButton() {
21+
const cardExpandButton = document.getElementById("cardExpandButton");
22+
const cardExpandButtonIcon = document.getElementById("cardExpandButtonIcon");
23+
const expandCollapseCardBody = document.getElementById(
24+
"expandCollapseCardBody"
25+
);
26+
27+
cardExpandButton.addEventListener("click", function (event) {
28+
if (cardExpandButtonIcon.classList.contains("fa-angle-down")) {
29+
cardExpandButtonIcon.classList.add("fa-angle-right");
30+
cardExpandButtonIcon.classList.remove("fa-angle-down");
31+
expandCollapseCardBody.hidden = true;
32+
} else if (cardExpandButtonIcon.classList.contains("fa-angle-right")) {
33+
cardExpandButtonIcon.classList.add("fa-angle-down");
34+
cardExpandButtonIcon.classList.remove("fa-angle-right");
35+
expandCollapseCardBody.hidden = false;
36+
}
37+
});
38+
}
39+
CardExpandCollapseButton();
40+
41+
const confirmationModal = document.getElementById("confirmationModal");
42+
43+
confirmationModal.addEventListener("click", function (event) {
44+
console.log("confirmationModal");
45+
if (event.target.localName === "pf-button") {
46+
const button = event.target;
47+
confirmationModal.close(button.dataset.action);
48+
}
49+
});
50+
51+
confirmationModal.addEventListener("close", function (event) {
52+
if (confirmationModal.returnValue === "confirm") {
53+
console.log("confirm button clicked");
54+
} else if (confirmationModal.returnValue === "cancel") {
55+
console.log("cancel button clicked");
56+
}
57+
});

‎webpack.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const path = require("path");
2+
const HtmlWebpackPlugin = require("html-webpack-plugin");
3+
4+
module.exports = {
5+
entry: "./src/index.js",
6+
output: {
7+
filename: "bundle.js",
8+
path: path.resolve(__dirname, "dist"),
9+
},
10+
devServer: {
11+
static: path.join(__dirname, "dist"),
12+
port: 3000,
13+
},
14+
plugins: [
15+
new HtmlWebpackPlugin({
16+
title: "Patternfly elements Project",
17+
template: "src/custom.html",
18+
}),
19+
],
20+
};

0 commit comments

Comments
 (0)