grindstone v3.4.0

Grindstone.js

A lightweight jQuery alternative for modern browsers.

NPM:

npm install grindstone

Yarn:

yarn add grindstone

CDN:

<script type="text/javascript" src="https://unpkg.com/grindstone@latest/dist/grindstone.min.js"></script>

Table of Contents

• Goals
• Documentation
• Dev Instructions

Goals

For the average project, 87kb or so worth of jQuery - minified - is unnecessary. Grindstone.js handles many commonly used methods while weighing in at just 13kb (minified).

This library does not aim to replace jQuery.

Grindstone.js supports the following browsers:

Documentation

As is the case with jQuery, usage is as follows:

$(selector[, context]);

Extending Grindstone.js by adding new methods is as easy as well:

$.fn => Grindstone.prototype

$.fn.someNewMethod = function() {};

$(selector).someNewMethod();

Full documentation on all methods is below.

ajax()

Create an XMLHttpRequest.

Acceptable options include:

• method (GET, POST, PUT, etc.)
• url (data path)
• async (true or false)
• dataType (DOMString, blob, json, document, etc.)
• body (payload)
• headers (adds custom HTTP headers to the request)

$.ajax({
    method: 'GET',
    url: 'https://www.something.com/detail',
    dataType: 'json'
})
  .then((resp) => {})
  .catch((err) => {});

$.ajax({
  method: 'POST',
  url: 'https://www.something.com/api',
  body: { form: data },
  headers: { 'Content-Type': 'application/json' }
})
  .then((resp) => {})
  .catch((err) => {});

addClass()

Add a class or classes to the current set of elements.

$('#selector').addClass('example');
$('#selector').addClass('one two');

attr()

Set or return the value of the specified attribute.

$('#selector').addClass('example');
$('#selector').addClass('one two');

click()

Trigger a callback on click, or trigger the click itself.

$('#selector').click();
$('#selector').click(() => {});

data()

Assign a data-value attribute to a set of elements or return the current value of an element.

$('#selector').data('name');
$('#selector').data('name', 'value');

hasAttr()

Determine if the current element has the specified attribute.

$('#selector').hasAttr('example');

hasClass()

Determine if the elements have the specified class(es).

$('#selector').hasClass('example');
$('#selector').hasClass('one two');

removeAttr()

Remove the the specified attribute.

$('#selector').removeAttr('example');

removeClass()

Remove a class or classes from the current set of elements.

$('#selector').removeClass('example');
$('#selector').removeClass('one two');

removeData()

Remove a data-value attribute from a set of elements.

$('#selector').removeData('name');

toggleClass()

Toggle the specified class(es).

$('#selector').toggleClass('example');
$('#selector').toggleClass('one two');

each()

Iterate through each item in the set and execute the callback.

$('.selector').each((item, index, array) => {});

eq()

Return the DOM element at the specified index of the current as a new instance of Grindstone.

$('.selector').eq(2);

first()

Get the first element.

$('.selector').first();

get()

Return the DOM element at the specified index of the current set.

$('.selector').get(2);

last()

Get the last element.

$('.selector').last();

map()

Map each element to an array of values.

$(array).map((item, index, array) => {});

doubleTap()

Trigger a function by double-tapping or double-clicking.

$('#selector').doubleTap(() => {});

focus()

Focus on the first element in the set or trigger a callback when some element is focused on.

$('#selector').focus();
$('#selector').focus(() => {});

load()

Trigger a function on the load event.

$(window).load(() => {});

off()

Remove an event listener.

$('#selector').off('change', () => {});
$('#selector').off('click touchend', () => {});

on()

Assign an event listener.

$('#selector').on('change', () => {});
$('#selector').on('click touchend', () => {});

ready()

Trigger a function when the DOM content is loaded.

$(document).ready(() => {});

resize()

Capture the resize event from a set of elements and execute a function.

$(window).resize(() => {});

scroll()

Listen for the scroll event and trigger a function.

$(window).scroll(() => {});

scrollLeft()

Scroll an element to a specific left position relative to its another parent container.

Return the current left offset of an element, relative to its parent container.

$('#selector').scrollLeft();
$('#selector').scrollLeft(50);

scrollTop()

Scroll an element to a specific top position relative to its another parent container.

Return the current top offset of an element, relative to its parent container.

$('#selector').scrollTop();
$('#selector').scrollTop(50);

trigger()

Dispatch a custom event.

$('#selector').trigger('example');

filter()

Filter the elements by the selector or callback function.

$('.selector').filter('.visible');

is()

Check if any of the elements match the given selector or callback function.

$('.selector').is('.visible');

not()

Exclude matching elements and includes non-matching elements.

$('.selector').not('.hidden');

submit()

Submit a form or trigger a function when a form is submitted.

$('#selector').submit();
$('#selector').submit(() => {});

val()

Return or assign the value of an element.

$('#selector').val();
$('#selector').val('7');

after()

Insert new content after a target element.

$('#selector').after('<p>Hello World</p>');

append()

Append a new element or new content.

$('#selector').append('#element');
$('#selector').append('<p>Hello World</p>');

before()

Insert new content before a target element.

$('#selector').before('<p>Hello World</p>');

clone()

Clone the elements in the set.

$('#selector').clone();

css()

Adjust the styles of selected elements or return the requested value.

$('#selector').style('display');
$('#selector').style('display', 'block');
$('#selector').style({ display: 'block', color: 'red' });

empty()

Remove all child nodes of all elements in the set.

$('.selector').empty();

height()

Adjust the height of the selected elements or return the current height value of the first element in the set.

$('#selector').height();
$('#selector').height(30);

hide()

Hide a set of elements.

$('#selector').hide();
$('#selector').hide(100);

html()

Replace an element's innerHTML or return the current innerHTML.

$('#selector').html();
$('#selector').html('<p>Hello World</p>');

prepend()

Prepend a new element or new content.

$('#selector').prepend('#element');
$('#selector').prepend('<p>Hello World</p>');

remove()

Remove elements from the DOM.

$('#selector').remove();
$('#selector').remove('.selector');

replaceWith()

Replace an element with some other content.

$('#selector').replaceWith('<p>Hello World</p>');

show()

Show a set of hidden elements.

$('#selector').show();
$('#selector').show(100);

width()

Adjust the width of the selected elements or return the current width value of the first element in the set.

$('#selector').width();
$('#selector').width(30);

wrap()

Wrap the outer structure of the set of elements.

$('#selector').wrap('<div class="outer"><div class="inner">');

wrapInner()

Wrap the inner structure of the set of elements.

$('#selector').wrapInner('<div class="outer"><div class="inner">');

debounce()

Rate-limit a given function.

$.debounce(() => {}, 300);

extend()

Merge properties from one or more objects into a target object.

Existing properties in the target object will be overwritten if they exist in any of the argument objects.

$.extend({}, { foo: 'bar' });
$.extend(obj1, obj2, obj3, obj4);

mouseable()

Assign hover and active classes.

$('#selector').mouseable();
$('#selector').mouseable({ hoverClass: 'stuff', activeClass: 'things' });

offset()

Return the left or top value of the selector, relative to the document.

$('#selector').offset('left');
$('#selector').offset('top');

children()

Get the child elements as a new collection.

$('#selector').children();
$('#selector').children('.selector');

contents()

Get all the children as a new collection, including text and comments.

$('#selector').contents();

next()

Get the next element as a new collection.

$('#selector').next();
$('#selector').next('.selector');

parent()

Get the parent element as a new collection.

$('#selector').parent();
$('#selector').parent('.selector');

prev()

Get the previous element as a new collection.

$('#selector').prev();
$('#selector').prev('.selector');

Dev Instructions

Install Dependencies

npm install

Run Continuous Build for Development

npm start

Compile

npm run build

Generate Documentation

npm run docs

Run Lint

npm run lint

Run Lint With Fix

npm run lint:fix

Run Unit Tests

npm test

Remove All Build Directories

npm run clean

Run All Checks Before Publish

npm run test:all

Technical Requirements

The runtime environment for this library requires Node >= 13.6.0 and NPM >= 6.4.1.

Configuration

This library makes use of ESLint and EditorConfig. Each of these features requires an extension be installed in order to work properly with IDEs and text editors such as VSCode.