# __jQuery__ extensions

[![+Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![+Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com)

__jComponent extends jQuery__ by adding these new features:

- [`$(selector).aclass(value)`](#)
- [`$(selector).asvg(value)`](#)
- [`$(selector).attrd(key, [value])`](#)
- [`$(selector).binder()`](#)
- [`$(selector).CMD()`](#)
- [`$(selector).component()`](#)
- [`$(selector).components(fn)`](#)
- [`$(selector).FIND()`](#)
- [`$(selector).hclass(value)`](#)
- [`$(selector).noscrollbar([force])`](#)
- [`$(selector).psvg(value)`](#)
- [`$(selector).rattr(name)`](#)
- [`$(selector).rattrd(name)`](#)
- [`$(selector).rescroll([offset])`](#)
- [`$(selector).rclass(value)`](#)
- [`$(selector).rclass2(search)`](#)
- [`$(selector).tclass(value)`](#)
- [`$(selector).RECONFIGURE()`](#)
- [`$(selector).SETTER()`](#)
- [`$(selector).scope()`](#)
- [`$(selector).vbind()`](#)
- [`$(selector).vbindarray()`](#)

---

#### `$(selector).aclass(value)`

Method adds `class` from the element/elements.

```javascript
$(selector).aclass(value);
// @value {String} class name
// return {jQuery}

$('.button').aclass('selected');
```

#### `$(selector).asvg(value)`

Method appends `SVG` element.

```javascript
$(selector).asvg(value);
// @value {String} raw HTML or tag name
// return {jQuery}

// With raw HTML:
$('.svg').asvg('<line ... ><rect ... >');

// With tag name:
var rect = $('.svg').asvg('rect');
rect.attr('x', 100);
```

#### `$(selector).attrd(key, [value])`

Method gets/sets `data-` attribute from the element/elements

```javascript
$(selector).attrd(key, [value]);
// @key {String} attribute name without "data-"
// @value {String} optional, a value for attribute
// return {jQuery}

$('#element').attrd('name', 'Peter');
// <div id="element" data-name="Peter"></div>

console.log($('#element').attrd('name'));
// Output: Peter
```

#### `$(selector).binder()`

`+v17` Method returns __one__ current/parent `data-bind` instance (if exists). It travelses parents element too.

```javascript
$(selector).binder();
// return {Binder} or null

console.log($('[data-bind]').binder());
```

### Method: `$(selector).CMD()`

`+v17` Executes a command in all components according to the selector. It executes a registered method via `component.command()`.

```javascript
$(selector).CMD(name, [a], [b], [n..]);
// @name {String} A command name
// @a {Object} Argument A
// @b {Object} Argument B
// @c {Object} Argument N
// return {jQuery}

$(selector).CMD('mycommand');
```

#### `$(selector).component()`

Method returns __one__ component instance (if exists). It travelses parents element too.

```javascript
$(selector).component();
// return {jComponent} or null

console.log($('[data-jc]').component());
```

#### `$(selector).components(fn)`

Method finds all jComponents on the selector path.

```javascript
$(selector).component(fn);
// return {jQuery}

$('#components').components(function(component) {
	console.log(component);
});
```

#### `$(selector).FIND()`

Method performs `FIND()` according to the selector.

```javascript
// $(selector).FIND(selector, [many], [callback], [timeout]);
$(selector).FIND();

var textbox = $('div').FIND('textbox');
```

#### `$(selector).hclass(value)`

Method performs `jQuery.hasClass()`.

```javascript
$(selector).hclass(value);
// @value {String} class name
// return {Boolean}

console.log($('.button').hclass('selected'));
```

#### `$(selector).noscrollbar([force])`

`+v17` Method hides vertical scrollbars. __IMPORTANT__: the method extends the `width` of the element by adding `width` of scrollbar. Width of this element is obtained from the parent element.

```javascript
$(selector).noscrollbar([force]);
// @force {Boolean} disables cache (default: false)
// return {jQuery}

console.log($('.button').hclass('selected'));
```

__Good to know__:
jComponent watches `noscrollbar` class and it hides vertical scrollbars automatically. This jQuery extension is for special cases.

#### `$(selector).psvg(value)`

Method prepends `SVG` element to element.

```javascript
$(selector).psvg(value);
// @value {String} raw HTML or tag name
// return {jQuery}

// With raw HTML:
$('.rect').psvg('<line ... ><rect ... >');

// With tag name:
var rect = $('.group').psvg('rect');
rect.attr('x', 100);
```

#### `$(selector).rattr(name)`

`+v12.0.4` Method removes `attribute` from the element/elements.

```javascript
$(selector).rattr(name);
// @name {String} Attribute name
// return {jQuery}
```

#### `$(selector).rattrd(name)`

`+v12.0.4` Method removes `data-attribute` from the element/elements.

```javascript
$(selector).rattrd(name);
// @name {String} Attribute name without data-
// return {jQuery}
```

#### `$(selector).rescroll([offset])`

__`REMOVED in v18`__ +v12.0.4` Method re-scrolls a scroll `container` to element according to the `selector`. This method uses `scrollIntoView(true)` method with a custom implementation `offset`.

```javascript
$(selector).rescroll([offset]);
// @offset {Number} Optional, default: 0
// return {jQuery}
```


#### `$(selector).rclass(value)`

Method removes `class` from the element/elements.

```javascript
$(selector).rclass(value);
// @value {String} class name
// return {jQuery}

$('.button').rclass('selected');
```

#### `$(selector).rclass2(value)`

Method removes all classes according to the text.

```javascript
$(selector).rclass2(search);
// @search {String} text to search
// return {jQuery}

$('.button').rclass2('fa-');
```

#### `$(selector).tclass(value)`

Method toggles `class` for the element/elements.

```javascript
$(selector).tclass(value);
// @value {String} class name
// return {jQuery}

$('.button').tclass('selected');
```

#### `$(selector).RECONFIGURE()`

Method performs `RECONFIGURE()` according to the selector for all nested components.

```javascript
// $(selector).RECONFIGURE(selector, config);
$(selector).RECONFIGURE(selector, config);

$('div').RECONFIGURE('textbox', 'disabled:true');
```

#### `$(selector).SETTER()`

Method performs `SETTER()` according to the selector for all nested components.

```javascript
// $(selector).SETTER([wait], selector, propOrMethod, [argA], [argB], [..argN]);
$(selector).SETTER();

$('div').SETTER('*', 'reconfigure', 'required:false');
$('div').SETTER('textbox', 'reconfigure', 'disabled:true');
```

#### `$(selector).scope()`

Method returns __one__ parent scope instance (if exists).

```javascript
$(selector).scope();
// return {Scope} or null

console.log($('[data-jc-scope]').component());
```

#### `$(selector).vbind()`

Method returns __one__ `VBIND` instance (if exists).

```javascript
$(selector).vbind();
// return {VBIND} or null

console.log($('[data-bind]').vbind());
```

#### `$(selector).vbindarray()`

Method returns __one__ `VBINDARRAY` instance (if exists).

```javascript
$(selector).vbindarray();
// return {VBINDARRAY} or null

console.log($('[data-bind]').vbind());
```