Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@rinoreji
rinoreji authored Aug 19, 2024
1 parent a164dc1 commit ab41bfe
Showing 1 changed file with 69 additions and 51 deletions.
120 changes: 69 additions & 51 deletions index.html → fullset.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<html lang="en" class="notranslate" translate="no">

<head>
<meta name="google" content="notranslate" />
<title>Full Icon Set</title>
Expand All @@ -10,21 +11,26 @@
padding: 0;
margin: 0;
}

.bg-0 {
background-image: url("https:/rinoreji/icon-collection/raw/master/_tools/background.png")
}

.bg-1 {
background-color: #333;
}

.bg-2 {
background-color: #fff;
}
.imgbox img {

.imgbox img {
width: 10.5rem;
height: 10.5rem;
object-fit: contain;
cursor: pointer;
}

.imgbox {
margin: 0.6rem;
padding: 0.5rem;
Expand All @@ -33,80 +39,91 @@
height: 12rem;
background-color: #e0e0e0;
}

h1 {
font-size: 1.8rem;
}
.find, .find input {

.find,
.find input {
font-size: 1.1rem;
}

.top {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: rgb(211, 211, 211);
padding: 0.2rem;
padding-top: 0;
box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
box-shadow: 0px 5px 18px 3px rgba(0, 0, 0, 0.59);
}

.top button {
float: right;
position: absolute;
top: 0.2rem;
float: right;
position: absolute;
top: 0.2rem;
right: 0.2rem;
font-size: 1rem;
border-radius: 4px;
}

.pngbox {
position: absolute;
top: 2rem;
position: absolute;
top: 2rem;
right: 1rem;
font-size: 0.9rem;
}

input[type="checkbox"] {
width: 1.6em;
height: 1.6em;
}

.label {
height: 2.5em;
line-height: 1em;
overflow: hidden;
font-size: 0.9rem;
}

.grid {
display: flex;
flex-wrap: wrap;
width: 100%;
}

h1 {
display:inline;
display: inline;
}

.home {
font-size: 2rem;
text-decoration: none;
color:rgb(99, 99, 99);
color: rgb(99, 99, 99);
}
</style>
</style>
</head>

<body>

<div class="top">
<a href=".." class="home">&#129093;</a> &nbsp; <h1>Official Azure Icon Set</h1>
<br/>
<span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span>
<a href=".." class="home">&#129093;</a> &nbsp; <h1>Full Icon Set</h1>
<br />
<span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span>
<div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
<button onclick="toggleBg()">Toggle Background</button>
</div>

<div class="grid" id="main_grid">
<!-- <div id="ai-studio.svg" class="imgbox"><img src="AI-Studio.svg" class="bg-0" onclick="download('AI-Studio.svg', this)"/><div class="label">AI-Studio.svg</div></div> -->
<!-- <div id="ai-studio.svg" class="imgbox"><img src="AI-Studio.svg" class="bg-0" onclick="download('AI-Studio.svg', this)"/><div class="label">AI-Studio.svg</div></div> -->
</div>

<script>
var bgSetting = 0;

function showIcons(icons_data){
let elements = icons_data.slice(0,50).map(ico=>
function showIcons(icons_data) {
let elements = icons_data.slice(0, 50).map(ico =>
`<div id="${ico.name}" class="imgbox"><img src="${ico.path}" class="bg-0" onclick="download('${ico.path}', this)"/><div class="label">${ico.name}</div></div>`
);
let div = document.getElementById("main_grid");
Expand All @@ -117,19 +134,19 @@

function toggleBg() {
bgSetting++
if(bgSetting > 2) bgSetting = 0;
for(let img of document.getElementsByTagName("img")) {
if (bgSetting > 2) bgSetting = 0;
for (let img of document.getElementsByTagName("img")) {
img.className = `bg-${bgSetting}`;
}
}

function search() {
let query = document.getElementById('finder').value.trim().toLowerCase()
if(query.length > 0) {
if (query.length > 0) {
console.log('search', query);
let icons_data = json_data.filter(ico=>ico.name.toLowerCase().indexOf(query) !== -1);
let icons_data = json_data.filter(ico => ico.name.toLowerCase().indexOf(query) !== -1);
showIcons(icons_data);
}else{
} else {
showIcons([]);
}
// if(query.length <= 0) {
Expand All @@ -144,9 +161,9 @@
// }
// }
}

function download(f, e) {
if(document.getElementById("pngcheck").checked) {
if (document.getElementById("pngcheck").checked) {
var data = getBase64Image(e);
let a = document.createElement('a')
a.href = "data:application/octet-stream;base64," + data
Expand All @@ -159,53 +176,54 @@
a.click()
}
}

// Actual magic
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
console.log(canvas.width , canvas.height)
console.log(canvas.width, canvas.height)
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

function updateCount() {
document.querySelector('#count').innerHTML = ''+document.querySelectorAll(".imgbox").length
document.querySelector('#count').innerHTML = '' + document.querySelectorAll(".imgbox").length
}

let json_data = [];

function fetchJSONData() {
const icons_url = "https://rinoreji.github.io/icon-collection/icons.json"
fetch(icons_url)
.then((res) => {
if (!res.ok) {
throw new Error
(`HTTP error! Status: ${res.status}`);
}
return res.json();
const icons_url = "https://rinoreji.github.io/icon-collection/icons.json"
fetch(icons_url)
.then((res) => {
if (!res.ok) {
throw new Error
(`HTTP error! Status: ${res.status}`);
}
return res.json();
})
.then((data) => {
data.forEach(element => {
let imgs = element.images.map(f => {
const img = {};
img.name = f;
img.path = `.${element.dir}/${f}`;
json_data.push(img);
return img;
})
.then((data) => {
data.forEach(element => {
let imgs = element.images.map(f=>{
const img = {};
img.name=f;
img.path=`.${element.dir}/${f}`;
json_data.push(img);
return img;
})
//json_data.push(...imgs);
});
showIcons(json_data);
})
.catch((error) => console.error("Unable to fetch data:", error));
//json_data.push(...imgs);
});
showIcons(json_data);
})
.catch((error) => console.error("Unable to fetch data:", error));
}

fetchJSONData();
updateCount();
</script>
</body>

</html>

0 comments on commit ab41bfe

Please sign in to comment.