node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

astatine

Astatine

Astatine - A Small Ajax and HTML Form Library. Library entry point. Globally available by using Astatine or At.

Overview

  • 3KB uncompressed
  • Install npm install astatine
  • Link astatine.min.js
  • ES5 browsers and up. (Probably older ones but who cares about those)

TODO

  • File Upload

API

Astatine.setup.spinner

Sets up spinner color, thickness, and size. Defaults are listed bellow. Do this before any Astatine or At operations.

Example
Astatine.setup.spinner.size = '3px';
Astatine.setup.spinner.thickness = '15px';
Astatine.setup.spinner.colorTop = 'darkgray';
Astatine.setup.spinner.colorBottom = 'lightgray';

Astatine.submit(options)

Listens on a form element for submit event to be fired.

Special Features
  • radio will only appear if it is checked.
  • checkbox will either be true or false.
  • type="submit" will automatically hide. And a spinner will show on submit.
  • .spinner will automatically created and make visible a spinner.
Options

The options object accepts all items form the Astatine.ajax method. Please review that section for more detail.

  • action: String Resource action url. Required

  • query: String | Element Query selector or element. Required

  • method: String Valid methods get, post, put, delete. Required

  • reset: Boolean Resets form after submit success. Defaults to true.

  • complete: Function Parameters are the XHR. Required

    • error An xhr object
    • success An xhr object
  • prepare: Function Allows the ability to edit/validate the option.data object before complete/post.

    • data: Object The form data object.
    • resolve: Function Async resolve function requires the data as a parameter.
    • reject: Function Async reject passes its parameter to the complete function as an error.
Example
<form class="form" method="post" action="/post/path">
    <input type="text" name="name" placeholder="Name" required>
    <input type="submit" value="Submit"/>
</form>
Astatine.submit({
    query: '.form',
    prepare: function (data, resolve, reject) {
        data.foo = 'bar'; // manipulate data before send
 
        // return data;
 
        setTimeout(function () {
            if (true) resolve(data); // async resolve
            else reject({ response: 'rejected' }); // async reject
        }, 1000);
 
    },
    complete: function (error, success) {
        if (error) console.log(error);
        else console.log(success);
    }
});

Astatine.ajax(options)

Ajax is a lower level utility function that allows for more control but less features than the submit method.

Options
  • action: String Resource action url. Required

  • method: String Valid methods get, post, put, delete. Required

  • success: Function Required

  • error: Function Required

  • data: Object If method is GET than data is concatenated to the action/url as parameters.

  • requestType: String Converts the request data before sending.

    • script 'text/javascript, application/javascript, application/x-javascript'
    • json 'application/json' stringify options.data
    • xml 'application/xml, text/xml'
    • html 'text/html'
    • text 'text/plain'
    • DEFAULT 'application/x-www-form-urlencoded' serialized options.data
  • responseType: String Converts the response data after sending.

    • script 'text/javascript, application/javascript, application/x-javascript'
    • json 'application/json'
    • xml 'application/xml, text/xml'
    • html 'text/html'
    • text 'text/plain'
  • contentType: String Short hand to set the Content-Type Headers. (For request)

  • accept: String Short hand to set the Accept Headers. (For response)

  • mimeType: String Overwrites return type.

  • username: String

  • password: String

  • withCredentials: Boolean

  • headers: Object A low level headers object it will map directly to the XHR header. The Will overwrite any above options.

Example
Astatine.ajax({
    method: 'get',
    action: '/examples/index.html',
    data: { name: 'stuff' },
    success: function (xhr) {
        console.log(xhr);
    },
    error: function (xhr) {
        console.log(xhr);
    }
});

Astatine.formData(element)

Parameter
  • Object DOM element
Example
var objectData = Astatine.formData(element);

Astatine.serialize(data)

Parameter
  • Object Single level deep key value pare
Example
var stringData = Astatine.serialize(data);

License

Licensed Under MPL 2.0 Copyright 2016 Alexander Elias