@k37z3r/jbase 2.0.1 → 2.0.3

package/wiki/EFFECTS-Slide-(vertical).md

@@ -0,0 +1,75 @@
+
+* [`slideDown`](#usage-slideDown) | [`slideUp`](#usage-slideUp) | [`slideToggleBox`](#usage-slideToggleBox)
+
+---
+
+## <a id="usage-slideDown"></a>.slideDown
+
+**Description**
+Display the matched elements with a sliding motion (expanding height downwards).
+
+**Parameters**
+
+* `duration` (Number, optional): Duration in milliseconds.
+* `callback` (Function, optional): A function to call once the animation is complete.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+// Reveal a dropdown menu
+$('.dropdown-menu').slideDown(200);
+
+```
+
+---
+
+## <a id="usage-slideUp"></a>.slideUp
+
+**Description**
+Hide the matched elements with a sliding motion (collapsing height upwards).
+
+**Parameters**
+
+* `duration` (Number, optional): Duration in milliseconds.
+* `callback` (Function, optional): A function to call once the animation is complete.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.dropdown-menu').slideUp(200);
+
+```
+
+---
+
+## <a id="usage-slideToggleBox"></a>.slideToggleBox
+
+**Description**
+Display or hide the matched elements with a vertical sliding motion. Ideal for accordions or collapsible boxes.
+
+**Parameters**
+
+* `duration` (Number, optional): Duration in milliseconds.
+* `callback` (Function, optional): A function to call once the animation is complete.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.accordion-header').click(function() {
+    // Slide toggle the next element (the body)
+    $(this).next().slideToggleBox(300);
+});
+
+```

package/wiki/EVENTS-Bindings.md

@@ -0,0 +1,55 @@
+* [`on`](#usage-on) | [`off`](#usage-off)
+
+---
+
+## <a id="usage-on"></a>.on
+
+**Description**
+Attach an event handler function for one or more events to the selected elements.
+
+**Parameters**
+
+* `event` (String): One or more event types separated by space (e.g., "click" or "click keydown").
+* `handler` (Function): A function to execute when the event is triggered.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('button').on('click', function(e) {
+    console.log('Button clicked!', e);
+});
+
+```
+
+---
+
+## <a id="usage-off"></a>.off
+
+**Description**
+Remove an event handler.
+
+**Parameters**
+
+* `event` (String): The event type.
+* `handler` (Function, optional): The specific handler function to remove. If omitted, all handlers for that event type might be removed (depending on implementation).
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+function handleClick() { console.log('Clicked'); }
+
+// Bind
+$('button').on('click', handleClick);
+
+// Unbind
+$('button').off('click', handleClick);
+
+```

package/wiki/EVENTS-Form.md

@@ -0,0 +1,122 @@
+* [`submit`](#usage-submit) | [`change`](#usage-change) | [`input`](#usage-input) | [`focus`](#usage-focus) | [`blur`](#usage-blur)
+
+---
+
+## <a id="usage-submit"></a>.submit
+
+**Description**
+Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
+
+**Parameters**
+
+* `handler` (Function, optional): A function to execute when the event is triggered. If omitted, the event is triggered manually.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```js
+$('#myForm').submit(function(e) {
+    e.preventDefault();
+    // Validate form...
+});
+
+```
+
+---
+
+## <a id="usage-change"></a>.change
+
+**Description**
+Bind an event handler to the "change" JavaScript event (fires when value is committed), or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```js
+$('select').change(function() {
+    console.log('New selection: ' + $(this).val());
+});
+
+```
+
+---
+
+## <a id="usage-input"></a>.input
+
+**Description**
+Bind an event handler to the "input" JavaScript event (fires immediately when value changes), or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```js
+$('#search').input(function() {
+    console.log('Typing: ' + $(this).val());
+});
+
+```
+
+---
+
+## <a id="usage-focus"></a>.focus
+
+**Description**
+Bind an event handler to the "focus" JavaScript event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```js
+$('input').focus(function() {
+    $(this).addClass('focused');
+});
+
+```
+
+---
+
+## <a id="usage-blur"></a>.blur
+
+**Description**
+Bind an event handler to the "blur" JavaScript event (lost focus), or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```js
+$('input').blur(function() {
+    $(this).removeClass('focused');
+});
+
+```

package/wiki/EVENTS-Keyboard.md

@@ -0,0 +1,98 @@
+* [`keydown`](#usage-keydown) | [`keyup`](#usage-keyup) | [`keypress`](#usage-keypress) | [`pressedKey`](#usage-pressedKey)
+
+---
+
+## <a id="usage-keydown"></a>.keydown
+
+**Description**
+Bind an event handler to the "keydown" event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$(document).keydown(function(e) {
+    console.log('Key pressed:', e.key);
+});
+
+```
+
+---
+
+## <a id="usage-keyup"></a>.keyup
+
+**Description**
+Bind an event handler to the "keyup" event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('#input').keyup(function() {
+    console.log('Key released');
+});
+
+```
+
+---
+
+## <a id="usage-keypress"></a>.keypress
+
+**Description**
+Bind an event handler to the "keypress" event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$(document).keypress(function(e) {
+    // Logic here
+});
+
+```
+
+---
+
+## <a id="usage-pressedkey"></a>.pressedkey
+
+**Description**
+A specialized helper method. It attaches a listener that only executes the handler if a specific key matches.
+
+**Parameters**
+
+* `key` (String): The key value to check for (e.g., 'Enter', 'Escape').
+* `handler` (Function): Function to execute if the key matches.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('#search').pressedkey('Enter', function() {
+    console.log('Enter key was pressed, submitting search...');
+});
+
+```

package/wiki/EVENTS-Lifecycle.md

@@ -0,0 +1,25 @@
+* [`ready`](#usage-ready)
+
+---
+
+## <a id="usage-ready"></a>.ready
+
+**Description**
+Specify a function to execute when the DOM is fully loaded.
+
+**Parameters**
+
+* `handler` (Function): A function to execute after the DOM is ready.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$(document).ready(function() {
+    console.log('DOM is ready!');
+});
+
+```

package/wiki/EVENTS-Mouse.md

@@ -0,0 +1,218 @@
+* [`click`](#usage-click) | [`dblclick`](#usage-dblclick)
+* [`mouseenter`](#usage-mouseenter) | [`mouseleave`](#usage-mouseleave) | [`mousemove`](#usage-mousemove) | [`mousedown`](#usage-mousedown) | [`mouseup`](#usage-mouseup)
+
+---
+
+## <a id="usage-click"></a>.click
+
+**Description**
+Bind an event handler to the "click" event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('#btn').click(function() {
+    alert('Clicked!');
+});
+
+```
+
+---
+
+## <a id="usage-dblclick"></a>.dblclick
+
+**Description**
+Bind an event handler to the "dblclick" event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.item').dblclick(function() {
+    $(this).toggleClass('expanded');
+});
+
+```
+
+---
+
+## <a id="usage-mousedown"></a>.mousedown
+
+**Description**
+Bind an event handler to the "mousedown" event (mouse button is pressed), or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.btn').mousedown(function() {
+    $(this).addClass('active-state');
+});
+
+```
+
+---
+
+## <a id="usage-mouseup"></a>.mouseup
+
+**Description**
+Bind an event handler to the "mouseup" event (mouse button is released), or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.btn').mouseup(function() {
+    $(this).removeClass('active-state');
+});
+
+```
+
+---
+
+## <a id="usage-mouseenter"></a>.mouseenter
+
+**Description**
+Bind an event handler to be fired when the mouse enters an element. This event does not bubble (unlike `mouseover`).
+
+**Parameters**
+
+* `handler` (Function): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.card').mouseenter(function() {
+    $(this).addClass('hover-effect');
+});
+
+```
+
+---
+
+## <a id="usage-mouseleave"></a>.mouseleave
+
+**Description**
+Bind an event handler to be fired when the mouse leaves an element. This event does not bubble (unlike `mouseout`).
+
+**Parameters**
+
+* `handler` (Function): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.card').mouseleave(function() {
+    $(this).removeClass('hover-effect');
+});
+
+```
+
+---
+
+## <a id="usage-mousemove"></a>.mousemove
+
+**Description**
+Bind an event handler to the "mousemove" event, or trigger it.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$(document).mousemove(function(e) {
+    console.log('Coords: ', e.pageX, e.pageY);
+});
+
+```
+
+---
+
+## <a id="usage-mouseover"></a>.mouseover
+
+**Description**
+Bind an event handler to the "mouseover" event. This event bubbles (triggers if mouse enters a child element).
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.container').mouseover(function() {
+    // Handle bubbling mouseover
+});
+
+```
+
+---
+
+## <a id="usage-mouseout"></a>.mouseout
+
+**Description**
+Bind an event handler to the "mouseout" event. This event bubbles.
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.container').mouseout(function() {
+    // Handle bubbling mouseout
+});
+
+```

package/wiki/EVENTS-Touch.md

@@ -0,0 +1,98 @@
+* [`touchstart`](#usage-touchstart) | [`touchend`](#usage-touchend) | [`touchmove`](#usage-touchmove) | [`touchcancel`](#usage-touchcancel)
+
+---
+
+## <a id="usage-touchstart"></a>.touchstart
+
+**Description**
+Bind an event handler to the "touchstart" event (finger is placed on a touch surface).
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.swipe-area').touchstart(function(e) {
+    console.log('Touch started');
+});
+
+```
+
+---
+
+## <a id="usage-touchend"></a>.touchend
+
+**Description**
+Bind an event handler to the "touchend" event (finger is removed from a touch surface).
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.swipe-area').touchend(function(e) {
+    console.log('Touch ended');
+});
+
+```
+
+---
+
+## <a id="usage-touchmove"></a>.touchmove
+
+**Description**
+Bind an event handler to the "touchmove" event (finger is dragged across the surface).
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.swipe-area').touchmove(function(e) {
+    // prevent scrolling while swiping
+    e.preventDefault(); 
+});
+
+```
+
+---
+
+## <a id="usage-touchcancel"></a>.touchcancel
+
+**Description**
+Bind an event handler to the "touchcancel" event (system cancels the touch event).
+
+**Parameters**
+
+* `handler` (Function, optional): Function to execute.
+
+**Returns**
+
+* (jBase): Current instance.
+
+**Example**
+
+```javascript
+$('.swipe-area').touchcancel(function() {
+    console.log('Touch cancelled');
+});
+
+```