442 lines
13 KiB
JavaScript
442 lines
13 KiB
JavaScript
/* eslint-disable consistent-return */
|
|
/* eslint-disable valid-jsdoc */
|
|
/* eslint-disable func-names */
|
|
/**
|
|
* @name PequeJS
|
|
* @description A small Javascript library for manipulate DOM and send AJAX requests
|
|
* @author Alfonso Saavedra "Son Link"
|
|
* @license GPL-3.0-or-later
|
|
* @url https://son-link.github.io
|
|
* @param {string|object} selector The CSS selector to use or DOM object.
|
|
* @returns {object} PequeJS object.
|
|
* @example $(document)
|
|
* @example $('input#username')
|
|
*/
|
|
var $ = (function () {
|
|
'use strict';
|
|
|
|
/**
|
|
* Create the constructor
|
|
*
|
|
* @param {string} selector The selector to .
|
|
*/
|
|
var Constructor = function (selector) {
|
|
if (selector === 'document') {
|
|
this.elements = [document];
|
|
} else if (selector === 'window') {
|
|
this.elements = [window];
|
|
} else {
|
|
this.elements = (typeof selector === 'object') ? [selector] : document.querySelectorAll(selector);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Create a new instance of the constructor
|
|
*
|
|
* @param {string} selector The selector to use.
|
|
* @returns {object} The instance of the library.
|
|
*/
|
|
var instance = function (selector) {
|
|
return new Constructor(selector);
|
|
};
|
|
|
|
/**
|
|
* Return the HTML of the firs element or set the HTML for one or more elements.
|
|
*
|
|
* @param {string} [html] If set change the HTML of the elements.
|
|
* If not return the HTML of the first element.
|
|
* @returns {string} the HTML of the firts element found if html variable is not set.
|
|
* @example $('p').html();
|
|
* $('p#title').html('<strong>PequeJS</strong>');
|
|
*/
|
|
Constructor.prototype.html = function (html) {
|
|
if (!html) return this.elements[0].innerHTML;
|
|
this.each(function (ele) {
|
|
ele.innerHTML = html;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Return the text of the firs element or set the text for one or more elements.
|
|
*
|
|
* @param {string} [txt] If set change the text of the elements.
|
|
* If not return the text of the first element found.
|
|
* @returns {string} the HTML of the found element if html variable is not set.
|
|
* @example console.log($('span').text());
|
|
* $('span#username').text('Son Link');
|
|
*/
|
|
Constructor.prototype.text = function (txt) {
|
|
if (!txt) return this.elements[0].textContent;
|
|
this.each(function (ele) {
|
|
ele.textContent = txt;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Add event to the elements.
|
|
*
|
|
* @param {string} event event (click, change, keyup, etc).
|
|
* @param {Function} callback The callback function.
|
|
* @returns {undefined} Returns undefined if event and callback parameters are empty.
|
|
* @example $('button').on('click', function() {
|
|
* alert('You clicked');
|
|
* });
|
|
*/
|
|
Constructor.prototype.on = function (event, selector, callback = null) {
|
|
/* if (!event && !selector) return 'undefined';
|
|
this.each(function (ele) {
|
|
ele.addEventListener(event, callback);
|
|
});
|
|
*/
|
|
if (typeof selector === 'string' && typeof callback === 'function') {
|
|
document.addEventListener(event, function (e) {
|
|
for (var target = e.target; target && target !== this; target = target.parentNode) {
|
|
if (target.matches(selector)) {
|
|
callback.call(target, e);
|
|
break;
|
|
}
|
|
}
|
|
}, false);
|
|
} else if (typeof selector === 'function') {
|
|
this.each(function (ele) {
|
|
ele.addEventListener(event, selector);
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Display the element(s).
|
|
*
|
|
* @param {string} [display] Set the display [block, flex, inline-block, etc] (by default is block)
|
|
*
|
|
* @example $('#modal').show();
|
|
* @example $('.blocks').show('flex');
|
|
*/
|
|
Constructor.prototype.show = function (display) {
|
|
this.each(function (ele) {
|
|
ele.style.display = (display) ? display : 'block';
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Hide the element(s).
|
|
*
|
|
* @example $('#modal').hide();
|
|
*/
|
|
Constructor.prototype.hide = function () {
|
|
this.each(function (ele) {
|
|
ele.style.display = 'none';
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Set a element attribute or return the attribute of the firts element found.
|
|
*
|
|
* @param {string} name The attribute name
|
|
* @param {string|number} [value] The value for the attribute.
|
|
* @returns {string} The attribute value of the first element found if value is not set.
|
|
* @example $('#mylink').attr('href', 'https://google.es');
|
|
* link = $('#mylink').attr('href');
|
|
*/
|
|
Constructor.prototype.attr = function (name, value = null) {
|
|
if (value === null) return this.elements[0].getAttribute(name);
|
|
this.each(function (ele) {
|
|
ele.setAttribute(name, value);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Remove a element(s) attribute.
|
|
*
|
|
* @param {string} name The attribute name
|
|
* @example $('input#name').removeAttr('disabled');
|
|
*/
|
|
Constructor.prototype.removeAttr = function (name) {
|
|
this.each(function (ele) {
|
|
ele.removeAttribute(name);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Append a text or HTML to element(s).
|
|
*
|
|
* @param {string} ele The text or HTML to append
|
|
* @example $('ul#series').append('<li>The Rookie</li>');
|
|
*/
|
|
Constructor.prototype.append = function (ele) {
|
|
this.each(function (e) {
|
|
e.innerHTML += ele;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Clear all content of the element(s).
|
|
*
|
|
* @example $('#series').empty();
|
|
*/
|
|
Constructor.prototype.empty = function () {
|
|
this.each(function (el) {
|
|
while (el.firstChild) {
|
|
el.removeChild(el.firstChild);
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Return if any element have the class name.
|
|
*
|
|
* @param {string} className The class name.
|
|
* @returns {boolean} true if any element has the class or false if not.
|
|
* @example $('#modal').hasClass('show');
|
|
*/
|
|
Constructor.prototype.hasClass = function (className) {
|
|
var has = false;
|
|
this.each( function (ele) {
|
|
if (ele.classList.contains(className)) {
|
|
has = true;
|
|
return has;
|
|
}
|
|
});
|
|
return has;
|
|
};
|
|
|
|
/**
|
|
* Add class(es) to each element(s). You can add more than one separated by spaces.
|
|
*
|
|
* @param {string} className The class(es) name.
|
|
* @example $('#modal').addClass('show');
|
|
* $('span#username').addClass('bold color-red');
|
|
*/
|
|
Constructor.prototype.addClass = function (className) {
|
|
this.each(function (ele) {
|
|
ele.classList.add.apply(ele.classList, className.split(' '));
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Remove class(es) on each element. You can remove more than one separated by spaces.
|
|
*
|
|
* @param {string} className The class(es) name
|
|
* @example $('#modal').removeClass('show');
|
|
* $('span#username').removeClass('bold color-red');
|
|
*/
|
|
Constructor.prototype.removeClass = function (className) {
|
|
this.each( function (ele) {
|
|
ele.classList.remove.apply(ele.classList, className.split(' '));
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Toggle class on each element.
|
|
*
|
|
* @param {string} className The class name to toggle.
|
|
* @example $('#modal').toggleClass('show');
|
|
*/
|
|
Constructor.prototype.toggleClass = function (className) {
|
|
this.each( function (ele) {
|
|
if ($(ele).hasClass(className)) {
|
|
$(ele).removeClass(className);
|
|
} else {
|
|
$(ele).addClass(className);
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Get or set the value for input, textarea or select.
|
|
*
|
|
* @param {string|number} value If set change the value of the firts find element. If not return her value.
|
|
* @example $('#modal').toggleClass('show');
|
|
*/
|
|
Constructor.prototype.val = function (value) {
|
|
if (value) {
|
|
this.elements[0].value = value;
|
|
} else {
|
|
return this.elements[0].value;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Checks if the current set of elements match a selector and returns true if at least one of these elements matches the given arguments.
|
|
* @param {String} selector The CSS selector
|
|
* @returns Bool
|
|
* @example $('input').is(':valid')
|
|
* @example $('#accept-terms').is(':checked')
|
|
*/
|
|
Constructor.prototype.is = function (selector) {
|
|
var ele = this.elements[0];
|
|
return (ele.matches || ele.matchesSelector || ele.msMatchesSelector || ele.mozMatchesSelector || ele.webkitMatchesSelector || ele.oMatchesSelector).call(ele, selector);
|
|
};
|
|
|
|
/**
|
|
* Trigger a event for the element.
|
|
* @param {eventname} event The event to trigger
|
|
* @example $('#myform').trigger('submit')
|
|
*/
|
|
Constructor.prototype.trigger = function (eventname) {
|
|
var ele = this.elements[0];
|
|
var myevent = new Event(eventname);
|
|
ele.dispatchEvent(myevent);
|
|
};
|
|
|
|
/**
|
|
* Iterate through every element of the collection.
|
|
* The callback function receive the current element.
|
|
*
|
|
* @param {Function} callback The callback function
|
|
* @returns {object} The actual element
|
|
* @example $('ul#series').each(function(ele) {
|
|
* series.push($(ele).text());
|
|
* });
|
|
*/
|
|
Constructor.prototype.each = function (callback) {
|
|
if (typeof callback !== 'function') return 'undefined';
|
|
this.elements.forEach( function (ele) {
|
|
if (callback.call(this, ele) === false) return false;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Perform an Ajax request.
|
|
*
|
|
* @param {string} url The URL to send the request.
|
|
* @param {array} opts A array to set the options. See below.
|
|
* @param {Fuction} opts.success A callback function when the request was successful.
|
|
* @param {boolean} opts.async [true] Set to false to block execution until you finish receiving the response.
|
|
* @param {object} opts.contentType [application/x-www-form-urlencoded; charset=UTF-8] The content type for the request.
|
|
* @param {object} opts.data [] A object with the variables and her values to send.
|
|
* @param {string} opts.dataType [json] What kind of data do you expect to receive (json, text, html).
|
|
* @param {Function} opts.error [] The callback when the request fail.
|
|
* @param {string} opts.type [GET] The HTTP request method (GET, POST, etc).
|
|
* @example $().ajax('http://localhost/api', {
|
|
* data: {
|
|
* user: 'myuser',
|
|
* passwd: '123456'
|
|
* },
|
|
* type: 'POST',
|
|
* success: function(response) {
|
|
* console.dir(response);
|
|
* }
|
|
* });
|
|
*/
|
|
Constructor.prototype.ajax = function (url, opts) {
|
|
if (!url && !opts) return false;
|
|
if (!opts.success) return false;
|
|
|
|
// Set default options variables
|
|
if (!opts.type) opts.type = 'GET';
|
|
else opts.type = opts.type.toUpperCase();
|
|
if (!opts.dataType) opts.dataType = 'json';
|
|
if (!opts.async) opts.async = true;
|
|
|
|
var _url = url;
|
|
var data = [];
|
|
if (opts.data) {
|
|
if (opts.type == 'GET') {
|
|
Object.keys(opts.data).map(function (key) {
|
|
data.push(key + '=' + encodeURIComponent(opts.data[key]));
|
|
});
|
|
data = data.join('&');
|
|
} else {
|
|
data = opts.data;
|
|
}
|
|
}
|
|
|
|
var request = new XMLHttpRequest();
|
|
if (opts.type === 'GET') _url += '?' + data;
|
|
request.open(opts.type, _url, opts.async);
|
|
if (opts.contentType) request.setRequestHeader('Content-Type', opts.contentType);
|
|
|
|
request.onload = function () {
|
|
if (this.status >= 200 && this.status < 400) {
|
|
if (opts.dataType === 'json') data = JSON.parse(this.response);
|
|
else if (opts.dataType === 'text' || opts.dataType === 'html') data = this.responseText;
|
|
else data = this.response;
|
|
opts.success(data);
|
|
} else if (opts.error) opts.error(this.status, this.statusText);
|
|
};
|
|
|
|
request.onerror = function () {
|
|
if (opts.error) opts.error(this.status, this.statusText);
|
|
};
|
|
|
|
if (data && opts.type !== 'GET') request.send(data);
|
|
else request.send();
|
|
};
|
|
|
|
/**
|
|
* Perform an GET request. This is a alias for $().ajax.
|
|
*
|
|
* @param {string} url The URL to send the request.
|
|
* @param {object|Function} data A object with the variables and her values to send. If is a function take this as the callback.
|
|
* @param {function} callback [] The callback function when the request success or error.
|
|
*
|
|
* @example $().get('http://localhost/api?key=123456789',
|
|
* function(response) {
|
|
* console.dir(response);
|
|
* }
|
|
* );
|
|
* @example $().get('http://localhost/api', {key: '123456789'},
|
|
* function(response) {
|
|
* console.dir(response);
|
|
* }
|
|
* );
|
|
*/
|
|
Constructor.prototype.get = function (url, data, callback) {
|
|
var opts = {
|
|
type: 'GET'
|
|
};
|
|
if (typeof (data) === 'function') {
|
|
opts.success = function (resp) {
|
|
return data(resp);
|
|
};
|
|
opts.error = function () {
|
|
return data(false);
|
|
};
|
|
} else {
|
|
opts.data = data;
|
|
opts.success = function (resp) {
|
|
if (typeof (callback) === 'function') callback(resp);
|
|
};
|
|
opts.error = function () {
|
|
if (typeof (callback) === 'function') callback(false);
|
|
};
|
|
}
|
|
this.ajax(url, opts);
|
|
};
|
|
|
|
/**
|
|
* Perform an POST request. This is a alias for $().ajax.
|
|
*
|
|
* @param {string} url The URL to send the request.
|
|
* @param {object} data A object with the variables and her values to send. If is a function take this as the callback.
|
|
* @param {function} callback [] The callback function when the request success or error.
|
|
* @example $().post('http://localhost/api', {key: '123456789'},
|
|
* function(response) {
|
|
* console.dir(response);
|
|
* }
|
|
* );
|
|
*/
|
|
Constructor.prototype.post = function (url, data, callback) {
|
|
if (!url || !data || !callback) return false;
|
|
var opts = {
|
|
type: 'POST',
|
|
data: data,
|
|
success: function (resp) {
|
|
if (typeof (callback) === 'function') callback(resp);
|
|
},
|
|
error: function () {
|
|
if (typeof (callback) === 'function') callback(false);
|
|
}
|
|
};
|
|
this.ajax(url, opts);
|
|
};
|
|
|
|
/**
|
|
* Return the constructor instantiation
|
|
*/
|
|
return instance;
|
|
})();
|