Working on the code that I completely don’t understand

The issue I chose is here

For this issue, they want to add icons next to files name. Like

screenshot1.jpg

To do this issue, I broke down into many steps:

  1. Add the same icon for each file.
  2. Use different icons for different file base on the extension name.
  3. Improve the code to make easier to add a new icon.

For the first step, I used chrome inspector to locate CSS file that I need to edit. Then I got the icon.

image

For the second step, I got the element ID ‘jstree-icon’ by the inspector tool, and search (ctrl + shift + h) in a new browser. Then I numbered all the keywords as ‘jstree-icon-1, jstree-icon-2’ and jstree-icon-3. After I refresh the browser, I can locate the code that I need to edit with the number. After that, I use ‘git checkout — file’ to easily restore other files.

Now, I know where I should edit, and I want to use different CSS classes base on the extension name. So I code this line.

insClassName = "jstree-icon-" + extension.toLowerCase();

And CSS file code:

ins.jstree-icon-css {

    left: @jstree-icon-backindent !important;

    background: url("images/icons/css.gif") center center no-repeat !important;

}

ins.jstree-icon-html{

    left: @jstree-icon-backindent !important;

    background: url("images/icons/html.gif") center center no-repeat !important;

}

The last step, improve the code.

For the CSS file, if I want to add more icons, I need to copy the block and edit for each icon. It takes time.

For this file, I see something like ‘@jstree-icon-backindent’. This should be a variable. And it should support for loop.  Then I google what less file is, and I make sure less must support it. So I search ‘less for loop’, and I get a lot of examples.

Before

ins.jstree-icon-css {

    left: @jstree-icon-backindent !important;

    background: url("images/icons/css.gif") center center no-repeat !important;

}

ins.jstree-icon-html{

    left: @jstree-icon-backindent !important;

    background: url("images/icons/html.gif") center center no-repeat !important;

}

After

.for(@extensionName, {
 ins.jstree-icon-@{value} {
 left: @jstree-icon-backindent 8px !important;
 top: 8px;
 background: @bg;
 }
 });

.for(@list, @code) {
 & {
 .loop(@i:1) when (@i =< length(@list)) {
 @value: extract(@list, @i);
 @bg : url("images/icons/@{value}.gif") center center no-repeat !important;
 @code();
 .loop (@i 1);
 }
 .loop();
 }
 }

After this modification, I can just add new icon here:

@extensionName: gif, html, svg;

Conclusion

Even though I don’t understand how the program generates each file in the file tree, I learn how to locate quickly to the code that I need to change. This is a very good experience for me to work on a big project in the future.

I also learn what less file is by adding this feature.c0246632-12d7-11e7-9dba-cd5d13037d04.png

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s