About icons and folder: acode.icons and acode.folders

[sebastianjnuwu]

Hello, I have an icon plugin in acode, but the way I add the icons is very annoying, in addition to the code being very ugly, I wanted to help other developers to do this:

const icons = acode.icons({
  astro: { // icon name
    icon: icons.astro, // Compressed website icon: https://dopiaza.org/tools/datauri/index.php
    extensions: ['.astro', '*.astro'] // .astro and <file>.astro files
  },
  readme: {
    icon: icons.readme,
    extensions: ['readme.*', 'readme']
  }
 // add more icons
});

const folder = acode.folders({
  github: { // icon name
    icon: icons.github, // Compressed website icon:  https://dopiaza.org/tools/datauri/index.php
    folder: ['.github', '.git']
  }
   // add more folder
});

with that way it would be much easier, would anyone be available to add?

[sebastianjnuwu]

Something like that similar to that visual studio extension

[sebastianjnuwu]

Well, looking at the logic, it works, but not the way it was supposed to:

import plugin from '../plugin.json';
import style from './file/style.scss';

const regex = {
  git: /\.git$/i,
};

class icons {

  async init() {
  
   this.check();
   this.style = <style textContent={style}></style>;
   document.head.append(this.style);
   
  };

  async check() {

  const list = document.querySelectorAll(".tile");

  list.forEach((e) => {

   const name = e.getAttribute("data-name");
   const type = e.getAttribute("data-type");
  
   const _type = Object.keys(regex).find((x) => regex[x].test(name));
  
   console.log(_type);
  
   if (type === "dir") (e.querySelector(".icon").classList.add(`.folder_type_${_type}`));
   
  });
  };
  
  async destroy() {
    this.style.remove();
  };
};

if (window.acode) {
   
  acode.setPluginInit(plugin.id, () => new icons().init());
 
  acode.setPluginUnmount(plugin.id, () => new icons().destroy());
  
};

$base: "https://localhost/__cdvfile_files-external__/plugins/sebastianjnuwu.material.icons/icons/";

$icons: (
  "git": "git.svg"
);

@each $class, $url in $icons {
 
 .list.collapsible.hidden .tile .icon.folder_type_#{$class}:before {
    display: inline-block;
    content: '';
    color: transparent;
    background-image: url(#{$base} + #{$url});
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    width: 1em;
}

.list.collapsible .tile .icon.folder_type_#{$class}:before {
    display: inline-block;
    content: '';
    background-image: url(#{$base} + #{$url});
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    width: 1em;
}

}

[sebastianjnuwu]

Is there an event I can host? I tried to click on it but the icon only appears when the person clicks on the folders and such.

[sebastianjnuwu]

@deadlyjack @bajrangCoder

[bajrangCoder]

I don't have Idea about it. And also i haven't tried it.

[sebastianjnuwu]

When you open a folder or log into the app there is some event because the get icon fos helps does something like this I don't know very well I used the click event it works but in the folder icon it only appears when the person clicks the same

The only alternative was for me to set interval for every second "-" which is not a good idea

[sebastianjnuwu]

https://github.com/deadlyjack/Acode/blob/5b35243f0423046cb6c0b0908f433df920ed5473/src/utils/helpers.js#L115

[Mirza-Glitch]

Hello, I have an icon plugin in acode, but the way I add the icons is very annoying, in addition to the code being very ugly, I wanted to help other developers to do this:

const icons = acode.icons({
  astro: { // icon name
    icon: icons.astro, // Compressed website icon: https://dopiaza.org/tools/datauri/index.php
    extensions: ['.astro', '*.astro'] // .astro and <file>.astro files
  },
  readme: {
    icon: icons.readme,
    extensions: ['readme.*', 'readme']
  }
 // add more icons
});

const folder = acode.folders({
  github: { // icon name
    icon: icons.github, // Compressed website icon:  https://dopiaza.org/tools/datauri/index.php
    folder: ['.github', '.git']
  }
   // add more folder
});

with that way it would be much easier, would anyone be available to add?

Nah bro, you can do this with vanilla javascript. Actually I tried similar to this approach for file icons in the first place and it worked...

Loop over an array of objects to return a string like:

let cssString = fileIcons.map((val)=>{
  return `.icons.${val.name}::before{
   background-image: url(${val.iconUrl});
}`
}).join("\n")

Now use that cssString as text content in style tag before appending to head.