JSLib

Write normal JavaScript - in normal JavaScript.

Download .zip Download .tar.gz View on GitHub

What is JSLib?

JSLib is a new library of methods which aim to help you write beautiful and more functional code.

How to start using JSLib

JSLib is just another JavaScript file so it can be imported to your web pages via the HTML script tag, like so:

<script src="jslib.min.js"></script>

For now, only the minified version of JSLib is available for use. The original, uncompressed version is being updated with comments so you can understand what is going on at each line.

Meet the functions/methods

load
The load method is a wrapper for the onload event handler, to be used to run code whilst the current web page is being loaded to the user's web browser, i.e. images and files are being downloaded from a server somewhere.

Example
```
document.load(function() {
console.log("I'm being loaded!");
});
```
ready
If you're familiar with the jQuery JavaScript library, you'd know when or how to use the ready event handler. You would use the ready method in JSLib in (almost) exactly the same way. You should use this method if you're writing JavaScript code that's going to make use of HTML elements within the HTML head tag, like so:

Example
```
document.ready(function() {
console.log("I'm ready");
});
```
press
The press method is a wrapper around JavaScript's onclick event handler, which is run whenever a targeted element is clicked with a mouse (or tapped on a touchscreen device). Here's how you might use this method:

Example
```
document.ready(function() {
var body = document.search("body");
body.press(function() {
alert("I'm clicked!");
// You'd be better off not alerting everytime the page is clicked.
});
});
```
html
The html method will retrieve and return the innerHTML value of the linked element. That's pretty much it. Here's how you may go about using this method:

Example
```
document.ready(function() {
var h1 = document.search("h1");
console.log(h1.html());
});
```
addCSS
The addCSS method quite literally serves to do what it's called: to add CSS, i.e. to the linked element. The method accepts one parameter which is an object. In jQuery, for example, you provide an object to the css method to supply multiple properties to the linked object. Here's how you may use this method at its basic form:

Example
```
document.ready(function() {
var body = document.search("body");
body.addCSS({
background: "red",
padding: "5px 10px"
});
});
```
When the page has been loaded, in this case, the background colour of it will be red and it will have its padding set to 5px top and bottom, and 10px left and right. However, this method has been built to be more functional that what it seems.

Meet pipe nesting

A great feature of many CSS preprocessors (such as Sass) is nesting sub-properties in one block to avoid repetition, thus enforcing the rule of DRY (don't repeat yourself). Here's an example:
```
font: {
  family: sans-serif;
  size: 20px;
}
```
The generated CSS file will append font before each sub-property name, which is valid CSS. The addCSS method also provides this cool functionality in its own way. Here's a demonstration, continuing on from the previous example:
```
document.ready(function() {
var body = document.search("body");
body.addCSS({
background: "red",
padding: "5px 10px",
"font: family | size | weight":"sans-serif | 20px | lighter"
});
});
```
Once the webpage loads, font will be appended to each sub-property name, in this case: family becomes font-family, size becomes font-size and weight becomes font-weight. This is the syntax:

property: sub-property-one | sub-property-two | etc...

toggle
This method toggles the display of the linked element. If the property is shown on the page, it'll be hidden, and vice versa. Here's how you may go about using this method.

document.ready(function() {
var toggle_button = document.search("#toggle-button");
var elem_to_toggle = document.search("#elem-to-toggle");
toggle_button.press(function() {
elem_to_toggle.toggle();
}); 
});

hover
The hover method replicates the onmouseover event handler, which lets you perform certain tasks when the mouse is over the targeted element. Here's how you may use this method:
```
document.ready(function() {
var body = document.search("body");
body.hover(function() {
console.log("The user has moved their mouse over the page.");
});
});
```
leave
The leave method replicates the onmouseleave event handler of JavaScript, which lets you perform certain tasks when the mouse is moved away from the targeted element. Here's how you may use this method:
```
document.ready(function() {
var body = document.search("body");
body.leave(function() {
console.log("The user has moved their mouse away from the page.");
});
});
```
setAttr
As you may have guessed, the setAttr method of JSLib sets an attribute to the linked element. In its basic form, it replicates the JavaScript setAttribute method. However, the setAttr method is actually more powerful than that. It lets you provide any number of attributes and write it in the way you'd write it in HTML, through the use of the = symbol, like this:
```
document.ready(function() {
var paragraph = document.search("p"); // Let's imagine there's only one tag on the page
paragraph.press(function() {
this.setAttr("title=You've hovered over me!|class=hover|disabled=false");
});
});
```
Once the mouse clicks on the paragraph element, the function will assign the three attributes to it, resulting in:
```
Paragraph tag here!
```
Here's the syntax: attribute=value|another_attribute=another_value
However, do make sure that there's no spacing between the pipe symbol and attributes.
removeAttr
The removeAttr method removes attributes from the targeted element. Similarly to setAttr, it's able to work differently than what might be expected. Following on from the previous example for setAttr, where three attributes (title, class, disabled) had been set to a  tag, here's how the removeAttr method would be used to remove those attributes from the  tag:
```
document.ready(function() {
var paragraph = document.search("p"); // Let's imagine there's only one tag on the page
paragraph.press(function() {
this.removeAttr("title|class|disabled");
});
});
```
Quite simply, you'd provide the name of attributes you want to remove and separate them with the pipe symbol. If it's the matter of removing one attribute, don't provide any pipes! :)

getAttr
The getAttr method really has no special algorithm behind it to make it any special, so what it does, frankly, is return the value of the attribute that you selected from the targeted element. Following on from the previous examples, here's how you may use this method:

document.ready(function() {
var paragraph = document.search("p"); // Let's imagine there's only one <p> tag on the page
paragraph.press(function() {
alert(this.getAttr("title"));
// Of course, attempt to get the attribute of an element once you've actually set it!
});
});

search
The search method is essentially document.querySelectorAll, document.getElementsByName and document.getElementsByTagName working together to make it easier for you to manipulate HTML elements on the web page. As you may have noted from previous examples, just provide the name of the tag that you want to manipulate and you'll get it returned. Just like jQuery, you can supply #id or .class to target elements by their ID or class attributes.

Let's imagine that our one  tag has the class hover assigned to it, maybe because it's been clicked on. Because of that, we can reference the  tag via the hover class, like this:

document.ready(function() {
var new_p_not = document.search(".hover");
});

If there's only one instance of the .hover class in the DOM, like in this example, JSLib will bring the matched element out of the Array which document.querySelectorAll returns it in. Also note that if a search for an element returns many instances, you will have to loop through them to manipulate them. This can be done through while and for loops.

13 . trim
The trim method will remove any whitespace from the start and end of the linked string. That's basically it. Here's how you may use it:

document.ready(function() {
var lots_of_spaces = "               Wow, look at the whitespace!                       ";
alert(lots_of_spaces.trim());
});

Once the webpage is loaded, you'd get "Wow, look at the whitespace!" alerted without any spaces before and after (does the alert function even show whitespace?!).

What is JSLib?

How to start using JSLib

Meet the functions/methods

Example

Example

Example

Example

Example

Meet pipe nesting