Package Exports

kanime
kanime/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (kanime) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

KAnime.js

KAnime is a lightweight JavaScript micro-library for DOM manipulation, animations, event handling, and AJAX — all with zero dependencies.

A minimalist utility belt for working with the DOM, styling, events, and forms. Lightweight, chainable, and written in pure JavaScript.

🚀 Installation

npm install kanime

Or CDN

<script src="https://cdn.jsdelivr.net/gh/Guilherme-fagundes/kanime@1.0.4/dist/kanime.min.js"></script>

📦 Importing

import KAnime from 'kanime';

const el = new KAnime('.selector');

📚 Examples of Usage

The KAnime library can be used in two ways: the traditional way by instantiating the KAnime class, or the simplified way using the global $ method. Below are examples for both approaches.

Traditional Usage

1. Animation with `fadeIn`

// Instantiate KAnime and apply the fadeIn effect
const element = new KAnime('.my-element');
element.fadeIn();

2. Animation with `slideDown`

// Instantiate KAnime and apply the slideDown effect
const element = new KAnime('.my-element');
element.slideDown();

3. Form Handling

// Serialize form data and send it via AJAX
const form = new KAnime('form');
form.submit((data, formElement) => {
  console.log('Form data:', data);
  // Send the data via AJAX
  new KAnime(formElement).ajaxSubmit({
    method: 'POST',
    url: '/submit',
    data,
  });
});

4. Style Manipulation

// Change the style of an element
const element = new KAnime('.my-element');
element.css('color', 'red');

Simplified Usage

1. Animation with `fadeIn`

// Select an element and apply the fadeIn effect
$('.my-element').fadeIn();

2. Animation with `slideDown`

// Select an element and apply the slideDown effect
$('.my-element').slideDown();

3. Form Handling

// Serialize form data and send it via AJAX
$('form').submit((data, form) => {
  console.log('Form data:', data);
  // Send the data via AJAX
  $(form).ajaxSubmit({
    method: 'POST',
    url: '/submit',
    data,
  });
});

4. Style Manipulation

// Change the style of an element
$('.my-element').css('color', 'red');

✨ Features

Below is a comprehensive list of all methods available in the KAnime class, along with their usage:

Method	Description	Usage
`append(content)`	Appends content to each selected element.	`$('.my-element').append('<div>New Content</div>');`
`prepend(content)`	Prepends content to each selected element.	`$('.my-element').prepend('<div>New Content</div>');`
`before(content)`	Inserts content before each selected element.	`$('.my-element').before('<div>Before Content</div>');`
`after(content)`	Inserts content after each selected element.	`$('.my-element').after('<div>After Content</div>');`
`remove()`	Removes all selected elements from the DOM.	`$('.my-element').remove();`
`clone(deep)`	Clones the selected elements.	`const clone = $('.my-element').clone();`
`wrap(wrapper)`	Wraps each selected element with the specified HTML structure.	`$('.my-element').wrap('<div class="wrapper"></div>');`
`unwrap()`	Removes the parent of each selected element, keeping the elements in the DOM.	`$('.my-element').unwrap();`
`on(event, handler)`	Adds an event listener to the selected elements.	`$('.my-element').on('click', () => console.log('Clicked!'));`
`off(event, handler)`	Removes an event listener from the selected elements.	`$('.my-element').off('click', handler);`
`fadeIn()`	Applies a fade-in effect using CSS transitions.	`$('.my-element').fadeIn();`
`fadeOut()`	Applies a fade-out effect using CSS transitions.	`$('.my-element').fadeOut();`
`slideUp()`	Applies a slide-up effect using CSS transitions.	`$('.my-element').slideUp();`
`slideDown()`	Applies a slide-down effect using CSS transitions.	`$('.my-element').slideDown();`
`serialize()`	Serializes form data into a string.	`const data = $('form').serialize();`
`ajaxSubmit(options)`	Submits a form via AJAX with support for file uploads.	`$('form').ajaxSubmit({ method: 'POST', url: '/submit' });`
`css(property, value)`	Gets or sets the style of the selected elements.	`$('.my-element').css('color', 'red');`
`addClass(className)`	Adds a CSS class to all selected elements.	`$('.my-element').addClass('active');`
`removeClass(className)`	Removes a CSS class from all selected elements.	`$('.my-element').removeClass('active');`
`toggleClass(className)`	Toggles a CSS class on all selected elements.	`$('.my-element').toggleClass('active');`
`attr(attribute, value)`	Gets or sets an attribute of the selected elements.	`$('.my-element').attr('data-id', '123');`
`width(value)`	Gets or sets the width of the selected elements.	`$('.my-element').width(300);`
`height(value)`	Gets or sets the height of the selected elements.	`$('.my-element').height(200);`
`scroll(x, y)`	Gets or sets the scroll position of the selected elements.	`$('.my-element').scroll(0, 100);`
`offset()`	Gets the offset of the first selected element relative to the document.	`const offset = $('.my-element').offset();`
`play()`	Plays the selected video or audio elements.	`$('video').play();`
`pause()`	Pauses the selected video or audio elements.	`$('video').pause();`
`currentTime(time)`	Gets or sets the current playback time of the selected video or audio.	`$('video').currentTime(10);`
`volume(value)`	Gets or sets the volume of the selected video or audio elements.	`$('video').volume(0.5);`
`mute(mute)`	Mutes or unmutes the selected video or audio elements.	`$('video').mute(true);`
`isPlaying()`	Checks if the selected video or audio elements are currently playing.	`const playing = $('video').isPlaying();`
`loadSource(src)`	Loads a new source into the selected video or audio elements.	`$('video').loadSource('video.mp4');`
`playbackRate(rate)`	Gets or sets the playback rate of the selected video or audio elements.	`$('video').playbackRate(1.5);`

This table provides a quick reference for all available methods and their usage examples.

📚 API Reference

▶️ Initialization

const el = new KAnime('.my-class');

🎨 Style & Class Methods

el.css('color', 'red');             // Set style
el.css('width');                    // Get style
el.addClass('active');              // Add class
el.removeClass('active');           // Remove class
el.toggleClass('active');           // Toggle class

✍️ Content & Attributes

el.text('Hello world');             // Set text
el.html('<strong>Bold</strong>');   // Set HTML
el.attr('data-id', '123');          // Set attribute
el.attr('data-id');                 // Get attribute
el.removeAttr('data-id');           // Remove attribute

🎬 Effects & Animations

el.fadeIn();                        // Fade in
el.fadeOut();                       // Fade out
el.slideUp();                       // Slide up
el.slideDown();                     // Slide down

// Custom animation with easing
el.animate({ width: 300, height: 150 }, 600, 'ease-in-out', () => {
  console.log('Animation completed!');
});

🧠 Events

el.on('click', () => console.log('Clicked!'));
el.on('mouseenter', () => console.log('Hovered!'));
el.on('keydown', e => console.log('Key:', e.key));
el.off('click', handler);           // Remove event listener
el.trigger('customEvent');          // Trigger custom event

✅ Utility Methods

el.isVisible();                     // Returns true/false
el.hasClass('active');              // Returns true/false
el.hasAttr('data-id');              // Returns true/false
el.isChecked();                     // For checkboxes/radios
el.isEnabled();                     // true if not disabled
el.isDisabled();                    // true if disabled

📧 Forms

Submit normally

new KAnime('#myForm').submit();

Submit via AJAX (supports file uploads)

new KAnime('#myForm').ajaxSubmit({
  url: '/submit-endpoint',
  method: 'POST',
  success: (data) => console.log('Success:', data),
  error: (err) => console.error('Error:', err)
});

📏 Dimensions & Positioning

el.width(300);                      // Set width
el.height(200);                     // Set height
el.scroll(0, 100);                  // Set scroll position
const offset = el.offset();         // Get offset relative to document

🎥 Media Methods

el.play();                          // Play video/audio
el.pause();                         // Pause video/audio
el.currentTime(10);                 // Set playback time
el.volume(0.5);                     // Set volume
el.mute(true);                      // Mute/unmute
el.isPlaying();                     // Check if playing
el.loadSource('video.mp4');         // Load new source
el.playbackRate(1.5);               // Set playback rate

🔄 DOM Manipulation

el.append('<div>New Content</div>'); // Append content
el.prepend('<div>New Content</div>');// Prepend content
el.before('<div>Before Content</div>'); // Insert before
el.after('<div>After Content</div>');   // Insert after
el.remove();                          // Remove element
el.clone();                           // Clone element
el.wrap('<div class="wrapper"></div>'); // Wrap element
el.unwrap();                          // Unwrap parent

🔍 Traversal

el.parent();                         // Get parent
el.children();                       // Get children
el.siblings();                       // Get siblings
el.find('.child');                   // Find descendants
el.closest('.parent');               // Find closest ancestor
el.next();                           // Get next sibling
el.prev();                           // Get previous sibling

What's New

Support for Advanced Selectors

Static method select to create KAnime instances with advanced CSS selectors.

Virtual DOM Manipulation

Static method createVirtualElement to create DOM elements virtually before adding them to the document.

Plugin Support

API for registering and using plugins with the use and callPlugin methods.

Internationalization (i18n) Support

Support for string translation with the static method i18n.translate and language configuration with i18n.setLocale.

🤝 Contributing

Pull requests, suggestions, and feedback are welcome.
Feel free to open an issue if you find bugs or want to propose new features!

kanime

Package Exports

Readme

KAnime.js

🚀 Installation

📦 Importing

📚 Examples of Usage

Traditional Usage

1. Animation with fadeIn

2. Animation with slideDown

3. Form Handling

4. Style Manipulation

Simplified Usage

1. Animation with fadeIn

2. Animation with slideDown

3. Form Handling

4. Style Manipulation

✨ Features

📚 API Reference

▶️ Initialization

🎨 Style & Class Methods

✍️ Content & Attributes

🎬 Effects & Animations

🧠 Events

✅ Utility Methods

📧 Forms

Submit normally

Submit via AJAX (supports file uploads)

📏 Dimensions & Positioning

🎥 Media Methods

🔄 DOM Manipulation

🔍 Traversal

What's New

Support for Advanced Selectors

Virtual DOM Manipulation

Plugin Support

Internationalization (i18n) Support

🤝 Contributing

📄 License

1. Animation with `fadeIn`

2. Animation with `slideDown`

1. Animation with `fadeIn`

2. Animation with `slideDown`