README

jNet

JavaScript Framework

// todo: description jNetFramework

jNetFramework includes others frameworks

Used [1] framework in jNet Framework can with halped constraction

var fetch = jNet.fetch;

Used [2] ...

var cookies = jNet.cookies;

Used [3] ...

var dynamics = jNet.dynamics;

todo list

parent
parents
text
append
appendTo
prepend
prependTo
innerHTML (alias html)
outerHTML
after
before

Changelog

10/6/16, 18:15

Implement tests for methods jNetObject/jNet (Feature #23)

Implement parents (Feature #3)

Implement parent (Feature #2)

now the get method at the undefined index returns array

Fixed more bugs

parent
parents

Example (parents):

<div>
    <p>hello</p>
    <ul id="test1">
        <li class="boo"><a href="">1</a></li>
        <li class="foo"><a href="">2</a></li>
        <li class="bar"><a href="">3</a></li>
    </ul>
    <div>
        <p>hello</p>
        <ul id="test2">
            <li class="boo"><a href="">1</a></li>
            <li class="foo"><a href="">2</a></li>
            <li class="bar"><a href="">3</a></li>
        </ul>
    </div>
</div>

jNet('li').parents('ul'); // #test1, #test2
jNet('li').parents('div'); // div, div 

jNet('li').parents(); // ul#test2, div, ul#test1, div, body, html

jNet('li').parents('*', 2); // ul#test2, div, ul#test1, div
jNet('li').parents('*', 3); // ul#test2, div, ul#test1, div, body
jNet('li').parents('*', 4); // ul#test2, div, ul#test1, div, body, html

jNet('div').parents(); // div, body, html

Example (parent):

<div>
    <p>hello</p>
    <ul id="test1">
        <li class="boo"><a href="">1</a></li>
        <li class="foo"><a href="">2</a></li>
        <li class="bar"><a href="">3</a></li>
    </ul>
    <div>
        <p>hello</p>
        <ul id="test2">
            <li class="boo"><a href="">1</a></li>
            <li class="foo"><a href="">2</a></li>
            <li class="bar"><a href="">3</a></li>
        </ul>
    </div>
</div>

jNet('li').parent(); // #test1, #test2
jNet('li').parent('p'); // jNetObject {length: 0}
jNet('div').parent(); // body, div
jNet('div').parent('div'); // div

10/6/16, 16:40

remove alias jNet.oFn

add global jNetObject

add new method jNet.addMethod (author: John Resig, http://ejohn.org/blog/javascript-method-overloading/)

test toString is fixed

Example (Overload method jNetObject):

jNetObject.fn.append = (function () {
    var parentMethod = jNetObject.fn.append;
    return function (selector) {
        console.log([this, selector]);
        return parentMethod.call(this, selector);
    };
})();

Example (jNet.Event):

<ul id="test1">
    <li class="boo"><a href="">1</a></li>
    <li class="foo"><a href="">2</a></li>
    <li class="bar"><a href="">3</a></li>
</ul>

var $ = jNet;

// modification, add method from jNet.Event
$.Event(jNetObject); 

jNetObject.fn.append = (function () {
    var parentMethod = jNetObject.fn.append;
    return function (selector) {
        this.trigger('append:selector', selector);
        return parentMethod.call(this, selector);
    };
})();

var $ul = $('ul');

var index = $ul.find('li').length + 1;

$ul.bind('append:selector', (function () {
    var consoleMethods = ['info', 'warn'];
    return function (selector) {
        console[consoleMethods[index % consoleMethods.length]](
            'the element "' + selector + '" has been added to the "ul" element'
        );
    }
})());

setInterval(function () {
    var newLi = $('<li>' + ++index + '</li>');
    newLi.hide(0);
    newLi.show(450);
    $ul.append(newLi);
}, 900);

Example (jNet.addMethod):

// Here’s the function in question:

jNet.addMethod

// and here is how you might use it:

function Users(){
  jNet.addMethod(this, "find", function(){
    // Find all users...
  });
  jNet.addMethod(this, "find", function(name){
    // Find a user by name
  });
  jNet.addMethod(this, "find", function(first, last){
    // Find a user by first and last name
  });
}

// Or, if you wanted to use it with an object prototype:

function Users(){}
jNet.addMethod(Users.prototype, "find", function(){
  // Find all users...
});
jNet.addMethod(Users.prototype, "find", function(name){
  // Find a user by name
});
jNet.addMethod(Users.prototype, "find", function(first, last){
  // Find a user by first and last name
});

var users = new Users();
users.find(); // Finds all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name
users.find("John", "E", "Resig"); // Does nothing

10/6/16, 15:44

Implement jNet.Event

Example:

var Model = jNet.Event(function (options) {

    this.id = null;
    this.firstname = null;
    this.lastname = null;
    
    if (typeof options !== "undefined") {
        var self = this;
        jNet.each(options, function (key, value) {
            self[key] = value;
        });
    }
    
    return this;

});

var man = new Model({
    firstname: 'Alex',
    lastname: 'Ivanov',
    changeId: function (id) {
        this.id = id;
        this.trigger('change:id', id);
    }
});

man.bind('change:id', function (id) {
    console.warn('ID changed to: ' + id);
});

man.changeId(1); // ID changed to: 1
man.changeId(2); // ID changed to: 2
man.changeId(3); // ID changed to: 3
man.changeId(4); // ID changed to: 4

console.info(man);

10/6/16, 15:40

jNet.each is Fixed for Object's. { a: "hello", b: "world" } if key in object is finite, then callback in first parameter get number, else string

start developer box

start developer laoder

start developer event (bind, unbind, trigger, one)

test jNet.each added

8/6/16, 22:20

I have replaced "superagent" with "fetch-polyfill" as there was a naydna a big mistake in work of a framework

https://github.com/undozen/fetch

8/6/16, 10:15

closest is fixed bug

added method matchesSelector

8/6/16, 09:33

the method prepend is fixed

the method prependTo is fixed

new build

8/6/16, 08:51

Implement offsetHeight, offsetWidth

Implement isHidden (used offsetHeight, offsetWidth)

add test for hide method (used isHidden)

add test for show method (used isHidden, css)

returnList is fixed

offsetHeight
offsetWidth
isHidden

Example (offsetHeight):

jNet('div').offsetHeight() // int or array [10, 10, 10..]..

Example (offsetWidth):

jNet('div').offsetWidth() // int or array [10, 10, 10..]..

Example (isHidden):

jNet('div').isHidden() // true or false, or array [true, false, false]...

7/6/16, 16:45

Optimization indexOf

7/6/16, 13:08

add method get

fixed small bugs

7/6/16, 12:56

Implement index (Feature #22)

index

Example:

%ul
  %li 1
  %li.foo 2
  %li 3

jNet('.foo').index() // 1
jNet('li').index() // [0, 1, 2]

6/6/16, 22:55

Implement appendTo (Feature #18)

Implement prepend (Feature #17)

appendTo
prependTo

Example (appendTo):

%ul
    %li 1
    %li 2
    %li 3

jNet('body').append('<hr/>')
// jNetObject {0: body, length: 1}

jNet('body').append('<ul/>')
// jNetObject {0: body, length: 1}

jNet('li').appendTo(jNet('ul').last())
// jNetObject {0: ul, length: 1}

%ul
%hr
%ul
    %li 1
    %li 2
    %li 3

jNet('<li>4</li>').appendTo(jNet('ul').last())
// jNetObject {0: ul, length: 1}

%ul
%hr
%ul
    %li 1
    %li 2
    %li 3
    %li 4

Example (prependTo):

%ul
    %li 1
    %li 2
    %li 3

jNet('<li>0</li>').prependTo(jNet('ul'))
// jNetObject {0: ul, length: 1}

%ul
    %li 0
    %li 1
    %li 2
    %li 3

6/6/16, 22:15

Implement clientHeight, clientWidth (Feature #21)

clientHeight
clientWidth

fixed height, width (Feature #20)

fixed off (Feature #19)

Example (clientHeight, clientWidth):

%nav
  %ul
    %li 1
    %li 2
    %li 3

jNet('nav').clientHeight(); // element
jNet('nav').clientWidth(); // element

jNet('li').clientHeight(); // returns array
jNet('li').clientWidth(); // returns array

6/6/16, 19:49

Implement prepend (Feature #16)

Implement append (Feature #15)

Implement text (Feature #13)

Implement insertAfter, insertBefore (Feature #14)

prepend
append
text
after (old name is insertAfter)
before (old name is insertBefore)

rename insertAfter to after

rename insertBefore to before

Example (prepend):

<div id="myProjects">
    <a href="https://fktpm.ru">fktpm.ru</a>
</div>

jNet('#myProjects').prepend('<a href="https://babichev.net">Babichev</a>');

<div id="myProjects">
    <a href="https://babichev.net">Babichev</a>
    <a href="https://fktpm.ru">fktpm.ru</a>
</div>

Example (text):

<div id="myProjects">
    <a href="https://babichev.net">Babichev</a>
    <a href="https://fktpm.ru">fktpm.ru</a>
</div>

jNet('#myProjects').text(); // Babichev fktpm.ru
jNet('#myProjects a').text(); // ["Babichev", "fktpm.ru"]

jNet('#myProjects a').text(function (content, element) {
  console.log([content, element]); // no modification text in element a
});

jNet('#myProjects a').text(function (content, element) {
  return content + '!'; // result: "Babichev!", "fktpm.ru!"
});

Example (after):

<ul id="test1">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
</ul>

jNet('li').after('<li>' + jNet('ul').outerHTML() + '</li>')

<ul id="test1">
    <li><a href="">1</a></li>
    <li>
        <ul id="test1">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
    <li><a href="">2</a></li>
    <li>
        <ul id="test1">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
    <li><a href="">3</a></li>
    <li>
        <ul id="test1">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
</ul>

Example (before):

<ul id="test1">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
</ul>

jNet('li').before('<li>' + jNet('ul').outerHTML() + '</li>')

<ul id="test1">
    <li>
        <ul id="test1">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
    <li><a href="">1</a></li>
    <li>
        <ul id="test1">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
    <li><a href="">2</a></li>
    <li>
        <ul id="test1">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
    <li><a href="">3</a></li>
</ul>

6/6/16, 11:12

fixed bug hide/show (Feature #12)

hide
show

6/6/16, 11:12

Implement valid

jNet('<ul></ul>')

with find, and preview element (without document-fragment) (Feature #11)

6/5/16, 00:05

Optimization jNet(selector, dom) (Feature #10)

5/5/16, 22:25

Implement innerHTML (alias html), outerHTML (Feature #9)

innerHTML [alias] html
outerHTML

Example:

// ["<a href="">1</a>", "<a href="">2</a>", "<a href="">3</a>"]
jNet('li').html()

//["<li><a href="">1</a></li>", "<li><a href="">2</a></li>", "<li><a href="">3</a></li>"]
jNet('li').outerHTML()

// console.log 1
// console.log 2
// console.log 3
// jNetObject [li, li, li], values (3, 6, 9)
jNet('li').html(function (html, element) {
  var newObject = jNet(html).find('*');
  var integer = newObject[0].innerText;
  console.log(integer);
  return integer * 3;
});

5/5/16, 21:55

possibilities of selection are expanded. at the moment doesn't support: string, jNetObject...

Example:

jNet('*', document.body)

5/5/16, 20:33

the new feature is added in Implement attributes (attr) (Feature #5), an opportunity to transfer callback by the second parameter

Example:

jNet('a:not([alt])').attr("alt", function (altText, element) {
   console.log([altText, element]);
   return 'hello';
});

5/5/16, 16:42

Implement closest (Feature #8)

clisest

5/5/16, 15:15

Implement hasClass, addClass, removeClass, toggleClass (Feature #7)

hasClass
addClass
removeClass
toggleClass

Example:

jNet('p').addClass('hello') // p.hello

jNet('p').toggleClass('world') // p.hello.world
jNet('p').toggleClass('hello') // p.world

jNet('p').hasClass('hello') // false
jNet('p').hasClass('world') // true

jNet('p').removeClass('world') // p

jNet('li').hasClass('hello') // [false, false, false]

jNet('li').addClass('hello') // [li.hello, li.hello, li.hello]

jNet('li').hasClass('hello') // [true, true, true]

5/5/16, 13:56

css (todo: style), Implement css (Feature #6)

attr (without data), Implement attributes (attr) (Feature #5)

remove 'class' jNetPrivate

methods jNetPrivate moved in global namespace

jNetPrivate.isHTML to isHTML
jNetPrivate.parseXML to parseXML
jNetPrivate.trim to trim
jNetPrivate.parseHTML to parseHTML

Example (css):

jNet('li').css('color', null) // remove
jNet('li').css('color', 'yellow') // set
jNet('li').css('color') // get

Example (attr):

jNet('li').attr('style', null) // remove
jNet('li').attr('style', 'color: blue;') // set
jNet('li').attr('style') // get

5/5/16, 12:40

Implement width, height (Feature #4)

width
height

Example:

jNet('div').width() // 100
jNet('div').height() // 100
jNet('li').height() // [20, 20]

5/5/16, 11:21

show/hide (with dymanics.js) ++

remove ++ used standard method remove for elements

closest ++

forEach rewrite on while
fixed more bugs

4/5/16

rewrite js to cs

jNetPrivate

jNetPrivate.fn

isHTML
parseXML
trim
parseHTML

jNetObject

jNetObject.fn

eq
first
last
odd
even
clone
toString
each
find
on
off
ready

jNet (jNetFramework)

jNet.fn

each
toString

jNet.oFn [alias] jNetObject.fn

jNet -- public

jNetObject -- private

jNetPrivate -- private

jNet.toString = jNet.fn.toString

jNet.clone = jNet.oFn.clone

jNet.each = jNet.fn.each

event's

click
contextmenu
dblclick
mouseup
mousedown
mouseout
mouseover
mousemove
keyup
keydown
keypress
copy
selectstart
selectionchange
select

jNet.fetch = require? "fetch-polyfill"

jNet.cookies = require? "js-cookie"

jNet.dynamics = require? "dynamics.js"

jnet

Usage no npm install needed!

README

jNet

todo list

Changelog

10/6/16, 18:15

10/6/16, 16:40

10/6/16, 15:44

10/6/16, 15:40

8/6/16, 22:20

8/6/16, 10:15

8/6/16, 09:33

8/6/16, 08:51

7/6/16, 16:45

7/6/16, 13:08

7/6/16, 12:56

6/6/16, 22:55

6/6/16, 22:15

6/6/16, 19:49

6/6/16, 11:12

6/6/16, 11:12

6/5/16, 00:05

5/5/16, 22:25

5/5/16, 21:55

5/5/16, 20:33

5/5/16, 16:42

5/5/16, 15:15

5/5/16, 13:56

5/5/16, 12:40

5/5/16, 11:21

4/5/16