Lightweight Fuzzy Search

A search is always needed in editor to search for a particular file or directory so for this we are using Fuse.js.
Fuse.js is a javascript library for lightweight Fuzzy search.
Now How I implemented in my app.

var files = {
keys: ['filename']
};

This will include all the files name;

var fuse = new Fuse(list, option);

and here’ we give input with options.
You can check fuse for more details.

Beautify Code

Coding should be done in a neat and clean way. Also, the code should be reusable

understandable and simple. Rails have a great feature to organize code in a very productive way in augmenting of this The atom editor is doing really a great job in Beautifying code.

Also in rails, Their is a gem named as Rubocop

To install this add

gem 'rubocop', '~> 0.49.0', require: false

then go to ur project directory and run

$rubocop

And see the maggic!

Integrating Github api

What an energetic day! Today I started with completing previous work that is upload a repository from github to the app so that we can edit the contents of file or folder.
What I exactly do is?
First of all add Github api in Gemfile

gem 'github_api'

then fetch the repository content in my controller file using


repo = Github::Client::Repos.new
@gitcontent=repo.find user: user,repo: reponame

from here I fetched Github clone URL


@gitcontent.clone_url

and then clone the repository


puts %x{git clone #{@gitcontent.clone_url}}

Yay! we done it!
Any Queries? comment below?
stay in touch and keep rocking ๐Ÿ˜€

Tab implementation using Jquery

This is the most interesting task I ever had. Every editor must have tabs so that we can open more than one file and then we can switch from one file to other and get the content of another file.
like this.Screenshot from 2017-05-29 18-22-54

How to do this?

This is the HTML Structure needed for this
Screenshot from 2017-05-29 18-30-57

So, the usage should go like this: When I click on Document1 link, a new tab will be shown with the title โ€œDocument1โ€ and content โ€œThis is the content of Document1โ€. It will contain a red cross on the right side of the tab title which will remove the tab and its content.

$("#documents a").click(function() {
addTab($(this));
});

This code will add a click event on each document link, and will pass the link itself to addTab function.

function addTab(link) {
// hide other tabs
$("#tabs li").removeClass("current");
$("#content p").hide();

// add new tab and related content
$(“#tabs”).append(”

ย 

“);
$(“#content”).append(”

” +
$(link).attr(“title”) + “

“);
// set the newly added tab as curren
$(“#” + $(link).attr(“rel”) + “_content”).show();
}

The addTab function will first hide all tabs (if there are any) and remove class current from all tabs. This class sets a different color for the current tab. Then, it will create a new tab (li element) that will contain a link for tab title and another one for removing the tab. The content is added in a similar way. At the end, the code will set the new tab as current.

So far so good, but this will be pretty much static โ€“ we have to add functionality to tabs. When tab header is clicked related content should be shown. Also, when red cross is clicked tab with its content should be removed. For these two scenarios, we will use on method that will bind events to existing elements, but also to all elements that will be added later to HTML dom.

$('#tabs a.tab').on('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').on('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
});

The first function will add the content while the second will remove tab content. Now, there are a few more things to do. First, we need to implement a constraint which says that one document can only be opened once. To do so, we will extend addTab function with this code:

// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;

The last thing we need to handle is the case when a tab is removed. With the current code, no tab will be the current one, and no content will be displayed. What should be done next?
We need to extend the function that removes the tab with this code (put it at the end of the function):

// if there is no current tab and if there are still tabs left, show the first one
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// find the first tab
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// get its link name and show related content
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}

That’s it if you find any problem comment below! ๐Ÿ™‚