CDN for use a library KingBee.js - https://kingbeejs.vercel.app/bundle.js

<script src="https://kingbeejs.vercel.app/bundle.js"></script>

Adds the specified class className to the given element. Throws an error if the element is not a valid HTMLElement.

Parameters:

• element (HTMLElement) [Required]: The target element to add the class to.
• className (string) [Required]: The class name to be added to the element.

Example of use

const element = _selectById(elementId);

_setClass(element, 'new-class');

Removes the specified class className from the given element. Throws an error if the element is not a valid HTMLElement.

Parameters:

• element (HTMLElement) [Required]: The target element to remove the class from.
• className (string) [Required]: The class name to be removed from the element.

Example of use

const element = _selectById(elementId);

_unsetClass(element, 'new-class');

Performs an HTTP GET request to the specified url and returns a Promise. Resolves with the response if successful or rejects with an error message if the request fails.

Parameters:

• url (string) [Required]: The URL to make the GET request.

Example of use

const url = 'https://example.com';

_ppGet(url)
    .then(response => {
        console.log('Status:', response.status);
        console.log('Response:', response.response);
    })
    .catch(error => {
        console.error(error);
    });

Performs an HTTP POST request to the specified url with the given data (in JSON format) and returns a Promise. Resolves with the response if successful or rejects with an error message if the request fails.

Parameters:

• url (string) [Required]: The URL to make the POST request.
• data (object) [Required]: The data to be sent in the request body.

Example of use

const url = 'https://example.com';
const data = {
    title: 'Title',
    body: 'Example of message.',
    userId: 1
};

_ppPost(url, data)
    .then(response => {
        console.log('Status:', response.status);
        console.log('Response:', response.response);
    })
    .catch(error => {
        console.error(error);
    });

Executes the action function when the specified condition function returns true for the element. The function checks the condition at regular intervals (100ms) until it is met or the element is no longer valid.

Parameters:

• element (HTMLElement) [Required]: The target element to wait for.
• condition (function) [Required]: The condition function that returns true when the desired state is achieved.
• action (function) [Required]: The function to be executed when the condition is met.

Example of use

const element = _selectById(elementId);

_when(element, () => _classExists(element, 'new-class'), () => {
    console.log('Exist!');
});

Adds an event handler to the specified element for the given event.

Parameters:

• element (HTMLElement) [Required]: The target element to attach the event handler to.
• event (string) [Required]: The event type (e.g., "click", "keydown", etc.).
• handler (function) [Required]: The function to be executed when the event is triggered.

Example of use

const button = _selectById(buttonId);

_setEvent(button, 'click', onClickHandler);

Removes the event handler from the specified element for the given event.

Parameters:

• element (HTMLElement) [Required]: The target element to remove the event handler from.
• event (string) [Required]: The event type (e.g., "click", "keydown", etc.).
• handler (function) [Required]: The function to be removed from the event.

Example of use

const button = _selectById(buttonId);

_unsetEvent(button, 'click', onClickHandler);

Retrieves the value of the specified attribute attributeName from the given element. Returns null if the element is not a valid HTMLElement or does not have the specified attribute.

Parameters:

• element (HTMLElement) [Required]: The target element to get the attribute value from.
• attributeName (string) [Required]: The name of the attribute to retrieve.

Example of use

const link = _selectById(linkId);

_getAttr(link, 'href');

Sets the value of the specified attribute attributeName to attributeValue for the given element. Throws an error if the element is not a valid HTMLElement or does not support the setAttribute method.

Parameters:

• element (HTMLElement) [Required]: The target element to set the attribute value for.
• attributeName (string) [Required]: The name of the attribute to set.
• attributeValue (string) [Required]: The value to set for the attribute.

Example of use

const input = _selectById(inputId);

_setAttr(input, 'placeholder', 'newPlaceholder');

Checks if the given element contains the specified class className. Returns false if the element is not a valid HTMLElement or does not support the classList method.

Parameters:

• element (HTMLElement) [Required]: The target element to check for the class.
• className (string) [Required]: The class name to check for.

Example of use

const element = _selectById(elementId);

_classExists(element, 'className');

Creates an HTML element with the specified tagName, attributes, content, and event listeners. Returns the newly created element.

Parameters:

• tagName (string) [Required]: The HTML tag name of the element to create.
• attributes (object) [Optional]: An object containing attribute-value pairs to set for the element.
• content (string or HTMLElement) [Optional]: The content to be inserted inside the element (as HTML or an HTMLElement).
• events (object) [Optional]: An object containing event-function pairs to add event listeners to the element.

Example of use

const tagName = 'button';
const attributes = {
    type: 'button',
    id: 'myButton',
    class: 'btn'
};
const content = 'Click';
const events = {
    click: function() {
        console.log('Clicked!');
    }
};;

_buildElement(tagName, attributes, content, events);

Selects elements based on the given selector. If the selector starts with '#', it selects by ID; otherwise, it selects elements by class or tag name. Returns a NodeList of matching elements.

Parameters:

• selector (string) [Required]: The CSS selector to search for.
• context (HTMLElement) [Optional]: The context in which to search for elements.

Example of use

const idSelector = '#myDiv';
const classSelector = '.my-button';

_select(idSelector);
_select(classSelector);

Selects all elements with the specified className within the given context (default is document). Returns a NodeList of the matched elements.

Parameters:

• className (string) [Required]: The class name to search for.
• context (HTMLElement) [Optional]: The context in which to search for elements.

Example of use

_selectByClass('my-class');

Selects the element with the specified id. Returns the matched element or null if not found.

Parameters:

• id (string) [Required]: The id attribute of the element to search for.

Example of use

_selectById('my-id');

Selects the child element within the parent element based on the parentSelector and childSelector data. Returns a list of matching children, or null if not found.

Parameters:

• parentSelector (string) [Required]: The selector for the parent element.
• childSelector (string) [Required]: The selector for the child element.

Example of use

_selectChild('parentSelector', 'childSelector');

Selects all elements with the specified attribute and value within the given context (default is document). Returns a NodeList of the matched elements.

Parameters:

• attribute (string) [Required]: The attribute name to search for.
• value (string) [Required]: The value of the attribute to match.
• context (HTMLElement) [Optional]: The context in which to search for elements.

Example of use

_selectByAttribute(attribute, value);

Selects all elements that match the given selector within the given context (default is document). Returns a NodeList of the matched elements.

Parameters:

• selector (string) [Required]: The CSS selector to search for.
• context (HTMLElement) [Optional]: The context in which to search for elements.

Example of use

const selector = '#myList li';

_selectAll(selector);

Selects the first element that matches the given selector within the given context (default is document). Returns the matched element or null if not found.

Parameters:

• selector (string) [Required]: The CSS selector to search for.
• context (HTMLElement) [Optional]: The context in which to search for elements.

Example of use

const selector = 'li';

_selectFirst(selector);

Adds a submit event to the form with the specified formId. When the form is submitted, the callback function is executed. It can also forward to a controller or route, which is defined by the controllerPath parameter.

Parameters:

• formId (string) [Required]: The ID attribute of the form element.
• callback (function) [Optional]: The function to be executed when the form is submitted.
• controllerPath (string) [Optional]: The controller or route where you will direct the send.

Example of use

_formSubmit('myForm', formSubmitCallback);
_formSubmit('myForm', formSubmitCallback, '/route/example');

Loads a resource (e.g., a CSS or JavaScript file) from the specified url. The type parameter should be either "script" or "link". Returns a Promise that resolves when the resource is successfully loaded or rejects if it fails.

Parameters:

• url (string) [Required]: The URL of the resource to load.
• type (string) [Required]: The type of the resource to load ("script" or "link").

Example of use

_load(scriptUrl, 'script')
    .then(() => {
        console.log('Script loaded!');
    })
    .catch((error) => {
        console.error(error);
    });

Resets the content of the element with the specified elementId. If the element is a form, it will be reset to its initial state. Otherwise, its innerHTML will be cleared.

Parameters:

• elementId (string) [Required]: The ID attribute of the element to reset.

Example of use

 _reset(divId); - reset div content;
 _reset(formId); - reset form content;

Adds the childElement as a child of the element with the specified parentId.

Parameters:

• parentId (string) [Required]: The ID attribute of the parent element.
• childElement (HTMLElement) [Required]: The element to be added as a child.

Example of use

_setChild(parentId, childElement);

Removes the childElement from the element with the specified parentId.

Parameters:

• parentId (string) [Required]: The ID attribute of the parent element.
• childElement (HTMLElement) [Required]: The element to be removed as a child.

Example of use

_unsetChild(parentId, childElement);

Sets the content of the element with the specified elementId. The content can be either a string (to set innerHTML) or an HTMLElement (to append as a child).

Parameters:

• elementId (string) [Required]: The ID attribute of the element to set the content for.
• content (string or HTMLElement) [Required]: The content to be set or appended to the element.

Example of use

_setContent(divId, newContent);

Gets the content of the element with the specified elementId and checks if it includes the given content.

Parameters:

• elementId (string) [Required]: The ID attribute of the element to get the content from.
• content (string) [Required]: The content to check for.

Example of use

_getContent(divId, 'newContent');

Searches for the item in the given array. If update is true and the item is not found, it will be added to the array. Returns true if the item is found (or added), otherwise false.

Parameters:

• array (Array) [Required]: The array to search and potentially update.
• item (any) [Required]: The item to look for in the array.
• update (boolean) [Required]: Whether to add the item to the array if not found.

Example of use

_findUpdateArray(myArray, newItem, true); - for find and update;
_findUpdateArray(myArray, newItem, false); or _findUpdateArray(myArray, newItem); - for just find; 

Searches for the item in the given array. If it returns true it found and removed the item, if it returns false it did not find the item in the array

Parameters:

• array (Array) [Required]: The array to search.
• item (any) [Required]: The item to remove for in the array.

Example of use

_findRemoveArray(myArray, itemToRemove);

Function that takes a parentSelector and childSelector and transforms the structure into a drag and drop, the function adds the necessary events to enable the "drag and drop" functionality on the child elements inside the parent element.

Parameters:

• parentSelector (string) [Required]: The parent selector.
• childSelector (string) [Required]: The children selector.

Example of use

_makeDrop("div", "p"); - using HTMLElement;
_makeDrop('#dragContainer', '.draggable'); - using id and class;

Function to define delay in the execution of a function, performing the execution only once. The delay parameter has a default of 1000 (1 second).

Parameters:

• function (function) [Required]: The function to be performed.
• delay (number) [Optinal]: The expected time to run.

Example of use

function sayHello() {
   console.log('Hello!');
}

const debouncedSayHello = _debounce(sayHello, 3000);
debouncedSayHello(); // Will run console.log after 3 seconds;

Function to perform a deep cloning of an object.

Parameters:

• obj (object) [Required]: The object to be cloned.

Example of use

 const originalObj = {
      name: 'John',
      age: 30,
      address: {
        city: 'New York',
        country: 'USA',
      },
};

const clonedObj = _deepClone(originalObj);
console.log(clonedObj); // Should display an object equal to the original;

Function to transform a multidimensional array into a simple array.

Parameters:

• arr (array) [Required]: The Array that will be handled.

Example of use

const nestedArray = [1, [2, [3, [4]], 5]];
const flattenedArray = _flatten(nestedArray);
console.log(flattenedArray); // It should display [1, 2, 3, 4, 5];

Function for merging two or more objects. It is necessary to pass more than one parameter.

Parameters:

• ...objects (objects) [Required]: The objects to be merged.

Example of use

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = _merge(obj1, obj2);
console.log(mergedObject); // It should display { a: 1, b: 2, c: 3, d: 4 };

The KingBee.js library is free software for use. Copyright© 2023-present Bruno Duarte [email protected]