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 search (filter) for an specific Integration on Homepage's Integrations section #1807

Closed
wants to merge 11 commits into from
Closed

Add search (filter) for an specific Integration on Homepage's Integrations section #1807

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
929ee30
Fixes #1798
shubhusion Jul 6, 2024
0f11b6d
Publish meshery-operator-v0.7.79.tgz meshery-v0.7.79.tgz
l5io Jul 5, 2024
734f93e
Updated meshery.json with new discussion posts
leecalcote Jul 6, 2024
98ea2b5
[Docs] Generated documentation for Integration
MUzairS15 Jul 6, 2024
1817174
[Catalog] Update Catalog items
leecalcote Jul 6, 2024
25293a5
Merge branch 'master' into patch-1
shubhusion Jul 6, 2024
a0c137a
Fixes #1798
shubhusion Jul 6, 2024
4571455
Merge branch 'patch-1' of https://github.com/shubhusion/meshery.io in…
shubhusion Jul 6, 2024
5f663c3
Merge branch 'master' into patch-1
shubhusion Jul 6, 2024
e85188e
Merge branch 'master' into patch-1
shubhusion Jul 13, 2024
24ef911
Merge branch 'master' into patch-1
vishalvivekm Jul 14, 2024
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
254 changes: 194 additions & 60 deletions _includes/partials/homePage-integrations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,217 @@
<div class="integrations-heading" style="padding-top: 2rem;">
<style>
.sorting-options {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
max-width: 600px;
/* Adjust max-width as needed */
}

#sort {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 10px top 50%;
margin-right: 10px;
}

#search-container {
display: flex;
align-items: center;
width: 100%;
max-width: 500px;
/* Adjust max-width as needed */
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 10px;
overflow: hidden;
}

#search {
flex-grow: 1;
height: 40px;
/* Increased height */
padding: 10px 40px 10px 10px;
/* Adjust padding as needed */
border: none;
font-size: 16px;
box-sizing: border-box;
outline: none;
/* Remove outline on focus */
}

#search-btn {
width: 80px;
/* Adjust width as needed */
height: 40px;
/* Match height of input */
background-color: green;
border: none;
color: #fff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
/* Convert text to uppercase */
margin-left: 10px;
/* Add margin to separate from input */
}

#search-btn svg {
fill: #fff;
width: 20px;
height: 20px;
margin-right: 5px;
/* Add margin to separate icon from text */
}

#integContainer {
/* Add padding after integContainer */
column-gap: max(2vh, 2vw);
row-gap: 1.5rem;
display: flex;
flex-wrap: wrap;
padding-bottom: 3.5rem;
}

@media (max-width: 506px) {
.sorting-options {
text-align: center;
flex-direction: column;
}

#sort, #search-container, #search-btn {
margin: 5px 0;
}

#search-container {
max-width: 100%;
}
}
</style>

<div class="integrations-heading">
<div class="parallel-left"></div>
<div class="parallel-right"></div>
<h1 id="integration-heading"></h1>
<h2>
for your Cloud Native Infrastructure and Apps
</h2>
<p style="margin: auto 10vw;">
<h2>for your Cloud Native Infrastructure and Apps</h2>
<p>
Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters.
</p>
</div>
<div id="integContainer" class="integrations-container container"
style="column-gap: max(2vh, 2vw); row-gap: 1.5rem; display: flex; flex-wrap: wrap; padding-bottom: 3.5rem;">
</div>
<div class="integrations-3d-link">
<div class="button-container" style="display: flex; align-items: center; justify-content: center; row-gap: 18px; column-gap: 32px; flex-wrap: wrap;">
<a class="highlight show-all-button toggle-text"
style="display: inline-block; width: fit-content; cursor:pointer;">Show More
Integrations</a>
<a class="highlight show-all-button" href="/integrations"
style="display: inline-block; width: fit-content;">View
Integrations in 3D</a>

<!-- Search Bar Container -->
<div class="sorting-options">
<select id="sort">
<option disabled selected value>Sort by</option>
<option value="asc">Alphabetically (A-Z)</option>
<option value="desc">Alphabetically (Z-A)</option>
</select>

<div id="search-container">
<input type="text" id="search" placeholder="Search..." />
</div>

<button class = "highlight" aria-label="Search">
Next
</button>
</div>

<div id="integContainer" class="integrations-container container"></div>

<div class="integrations-3d-link">
<div class="button-container">
<a class="highlight show-all-button toggle-text">Show More Integrations</a>
<a class="highlight show-all-button" href="/integrations">View Integrations in 3D</a>
</div>
</div>
</div>

<script type="module">
// integrations.js
import data from '../../integrations/data.js';
<script type="module">
// integrations.js
import data from '../../integrations/data.js';

const integHeading = document.getElementById("integration-heading");
const roundedIntegNumber = Math.floor(data.length / 10) * 10;
integHeading.textContent = `${roundedIntegNumber}+ Built-In Integrations`;
const integHeading = document.getElementById("integration-heading");
const roundedIntegNumber = Math.floor(data.length / 10) * 10;
integHeading.textContent = `${ roundedIntegNumber } + Built - In Integrations`;

const integContainer = document.getElementById("integContainer");
const integContainer = document.getElementById("integContainer");

let allDataShown = false;
let allDataShown = false;

function renderIntegrationCards(data, showAll) {
const cardsToShow = showAll ? data.length : 40;
return data.slice(0, cardsToShow).map(item => {
const iconURL = item.color.split('/').slice(1).join('/');
function renderIntegrationCards(data, showAll) {

return `
<a href="${item.permalink}" class="integrations-card">
<div class="integrations-card-inner">
const cardsToShow = showAll ? data.length : 40;
return data
.slice(0, cardsToShow)
.map(
(item) => `
<a href="${item.permalink}" class="integrations-card">
<div class="integrations-card-inner">
<div class="card-front">
<img src="${iconURL}" loading="lazy" id="logo-dark-light"
data-logo-for-dark="${iconURL}"
data-logo-for-light="${iconURL}" />
<img src="${item.color}" loading="lazy" id="logo-dark-light"
data-logo-for-dark="${item.color}"
data-logo-for-light="${item.color}" />
</div>
<div class="card-back">
<p> ${item.name} </p>
</div>
<p>${item.name}</p>
</div>
</a>`;
}).join('');
}
</div>
</a>`
)
.join('');
}

const scrollOptions = { behavior: "smooth" };
const scrollOptions = { behavior: "smooth" };

integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
integContainer.innerHTML = renderIntegrationCards(data, allDataShown);

document.querySelector('.show-all-button').addEventListener('click', () => {
allDataShown = !allDataShown;
document.querySelector(".show-all-button").addEventListener("click", () => {
allDataShown = !allDataShown;

const button = document.querySelector('.toggle-text');

if (allDataShown) {
button.textContent = 'See Less Integrations'; // Change button text when allDataShown is true
} else {
button.textContent = 'See All Integrations'; // Change button text when allDataShown is false
}
const button = document.querySelector(".toggle-text");

if (allDataShown) {
button.textContent = "See Less Integrations"; // Change button text when allDataShown is true
} else {
button.textContent = "Show More Integrations"; // Change button text when allDataShown is false
}

integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
integContainer.innerHTML = renderIntegrationCards(data, allDataShown);

// Scroll to the <h2> tag
if (!allDataShown) {
const h2Tag = document.querySelector('h2');
h2Tag.scrollIntoView(scrollOptions);
}
});
</script>
// Scroll to the <h2> tag
if (!allDataShown) {
const h2Tag = document.querySelector("h2");
h2Tag.scrollIntoView(scrollOptions);
}
});

document.getElementById("sort").addEventListener("change", function () {
var sortValue = this.value;
var sortedData = [...data];

if (sortValue === "asc") {
sortedData.sort((a, b) => a.name.localeCompare(b.name));
} else if (sortValue === "desc") {
sortedData.sort((a, b) => b.name.localeCompare(a.name));
}

integContainer.innerHTML = renderIntegrationCards(sortedData, allDataShown);
});

document.getElementById("search").addEventListener("input", function () {
var searchValue = this.value.toLowerCase();
var filteredData = data.filter((item) =>
item.name.toLowerCase().includes(searchValue)
);

integContainer.innerHTML = renderIntegrationCards(filteredData, allDataShown);
});
</script>
</style>
Loading