magnetiqJS

MagnetiqJS is a library that creates fast and interactive user operations without being dependent to any third-party libraries.

Installation

Include the compiled files in your page.

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

Usage

Firstly create a new magnetiqJS object and then create a variable, array, object or lists over it.

var mq = new magnetiq();
mq.$var.welcomeDescription = "Welcome to MagnetiqJS";

Then use a block like below to display variables, arrays, objects or lists created with magnetiqJS directly in HTML.

<div>
  <h1>{{ welcomeDescription }}</h1>
</div>

The output of this variable created with magnetiqJS will be as follows.

Variable

Variables created with magnetiqJS can be changed interactive.

mq.$var.counter = 0;

After creating magnetiq variable named as counter add its HTML block.

    <button onclick="counterFunction()" id="counter">Click Me</button>
    <b>This is counter: {{ counter }}</b>

Then, as an example, create a function called counterFunction and set it to increase counter value with every click.

       function counterFunction() {
            mq.$var.counter++;
        }

The output of this process will be as follows.

mq-for

If you want to display an array or your list in HTML, first create an array or list using magnetiqJS.

mq.$var.nations = ["Turkey","England","USA","Germany","France"];

Then to use it in HTML, add its mq-for attribute.

    <div mq-for="nation in nations">
        <i>{{ nation }}</b> <br>
    </div>

If you want to sort the array, you can use the mq-sort attribute.

    <div mq-for="nation in nations" mq-sort="nation:desc">
        <i>{{ nation }}</b> <br>
    </div>

As another example, you can use it as a nested loop.

mq.$var.persons = [
            {
                name:"Fatih",
                hobbies: ["PC","Football"]
            },
            {
                name:"Caner",
                hobbies: ["PC","Volleyball"]
            },
            {
                name:"Ahmet",
                hobbies: ["PC","Car"]
            }
        ]

<h3>Persons</h3>
    <ul>
        <li mq-for="person in persons">
            <div>{{ person.name }}</div>
            <div>
                <div><b>Hobbies:</b></div>
                <span mq-for="hobby in person.hobbies">
                    <i>{{ hobby }}</i> 
                </span>
            </div>
        </li>
    </ul>

mq-if

If you want an HTML tag to run when certain transaction lines are met, you can use the mq-if attribute.

<div mq-if="5 > 4">
        "Ne söylediğini unutabilirler, ama onlara nasıl hissettirdiğini asla unutmayacaklar."<br>
        <b>Carl W. Buechner</b>
</div>

The mq-if condition applies not only to magnetiqJs but also to standard variables.

var currentNumber = 5;

<div mq-if="currentNumber > 4">
        "Ne söylediğini unutabilirler, ama onlara nasıl hissettirdiğini asla unutmayacaklar."<br>
        <b>Carl W. Buechner</b>
</div>