Skip to content

Commit ec95c5a

Browse files
author
dutchenkoOleg
committed
docs
1 parent c32f12b commit ec95c5a

File tree

5 files changed

+206
-174
lines changed

5 files changed

+206
-174
lines changed

‎README.md‎

Lines changed: 4 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -19,180 +19,11 @@ Below is a list of these methods and properties. Then you can see [an example im
1919

2020
---
2121

22-
- [`constructor()`](#constructor)
23-
- [_~~defaults~~_](#defaults)
24-
- [`defaultSettings`](#defaultsettings)
25-
- [`defaultProps`](#defaultprops)
26-
- [`_setup()`](#_setup)
27-
- [`_beforeInitialize()`](#_beforeinitialize)
28-
- [`_afterInitialize()`](#_afterinitialize)
29-
- [`initialize()`](#initialize)
22+
### Docs
3023

24+
[Go to docs section](https://github.com/WezomAgency/web-plugin-interface/blob/master/docs/index.md)
3125

32-
### `constructor()`
3326

34-
Here we describe the future instances.:
35-
- get data from arguments
36-
- declare instance properties
27+
### License
3728

38-
### `defaults`
39-
40-
> since v3.0.0 property renamed to `defaultSettings`
41-
42-
### `defaultSettings`
43-
44-
_`public`_
45-
_**`since v3.0.0`**_
46-
47-
A getter that returns an object with default options, settings, or configuration for your plugin.
48-
49-
### `defaultProps`
50-
51-
_`public`_
52-
_**`since v3.0.0`**_
53-
54-
A getter that returns an object with predefined props.
55-
Most often this is a list of options that are not included in the list of certain options of your plugin. But you need them for individual processing your options, settings, data, etc.
56-
57-
58-
### `_setup()`
59-
60-
_`protected`_
61-
62-
The method is designed to prepare data for initialization.
63-
For example, setting up future plugin options, etc.
64-
65-
### `_beforeInitialize()`
66-
67-
_`protected`_
68-
69-
It describes the actions that must be performed before initializing the plug-in.
70-
For example, add the CSS class `.is-ready` to the HTML element to which your plugin will be applied.
71-
72-
### `_afterInitialize()`
73-
74-
_`protected`_
75-
76-
Here we can describe the actions that should be performed after the initialization of the plugin.
77-
For example, add an additional handler to scroll or resize window events, which will update the parameters of your current plugin.
78-
79-
### `initialize()`
80-
81-
_`public`_
82-
83-
Directly launch your plugin.
84-
85-
---
86-
87-
## Usage example
88-
89-
Abstract class example with interface implementation
90-
91-
```js
92-
// some-plugin-init/abstract.js
93-
94-
import $ from 'jquery'; // for example
95-
import 'some-jquery-plugin'; // for example
96-
import { WebPluginInterface } from 'web-plugin-interface';
97-
98-
/**
99-
* @implements WebPluginInterface
100-
*/
101-
export class SomeJqueryPluginAbstract extends WebPluginInterface {
102-
/**
103-
* @param {jQuery} $container
104-
* @param {Object} [customSettings={}]
105-
* @param {Object} [customProps={}]
106-
*/
107-
constructor ($container, customSettings = {}, customProps = {}) {
108-
super();
109-
this.$container = $container;
110-
this.customSettings = customSettings;
111-
this.settings = {};
112-
this.props = {};
113-
this.readyCssClass = 'is-ready';
114-
this.initializedCssClass = 'is-initialized';
115-
}
116-
117-
/**
118-
* @type {Object}
119-
*/
120-
get defaultSettings () {
121-
return {
122-
// an example of some options of your plugin
123-
autoplay: true,
124-
speed: 500
125-
}
126-
}
127-
128-
/**
129-
* @type {Object}
130-
*/
131-
get defaultProps () {
132-
return {
133-
// an example of options that is native for your plugin
134-
stopAutoPlayIfOutView: true
135-
}
136-
}
137-
138-
/**
139-
* @protected
140-
*/
141-
_setup () {
142-
this.props = $.extends({}, this.defaultProps, this.customProps);
143-
this.settings = $.extends({}, this.defaultSettings, this.customSettings);
144-
145-
// props example
146-
if (this.props.stopAutoPlayIfOutView) {
147-
this.settings.autoplay = this.detectIfInView;
148-
}
149-
}
150-
151-
/**
152-
* @protected
153-
*/
154-
_beforeInitialize () {
155-
this.$container.addClass(this.readyCssClass);
156-
}
157-
158-
/**
159-
* @protected
160-
*/
161-
_afterInitialize () {
162-
this.$container.addClass(this.initializedCssClass);
163-
164-
// props example
165-
if (this.props.stopAutoPlayIfOutView) {
166-
this._autoplayInViewObserve();
167-
}
168-
}
169-
170-
initialize () {
171-
this._setup();
172-
this._beforeInitialize();
173-
174-
// fire up
175-
this.$container.someJqueryPlugin(this.settings);
176-
177-
this._afterInitialize();
178-
}
179-
180-
// ------------------------------
181-
// Custom extend implemented interface
182-
// ------------------------------
183-
184-
/**
185-
* @type {boolean}
186-
*/
187-
get detectIfInView () {
188-
// your code
189-
}
190-
191-
/**
192-
* @protected
193-
*/
194-
_autoplayInViewObserve () {
195-
// your code
196-
}
197-
}
198-
```
29+
[MIT](https://github.com/WezomAgency/web-plugin-interface/blob/master/LICENSE)

‎docs/api.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# WebPluginInterface API
2+
3+
:arrow_left: [Docs](./index.md)
4+
5+
#### *Table of contents*
6+
7+
- [`constructor()`](#constructor)
8+
- [_~~defaults~~_](#defaults)
9+
- [`defaultSettings`](#defaultsettings)
10+
- [`defaultProps`](#defaultprops)
11+
- [`_setup()`](#_setup)
12+
- [`_beforeInitialize()`](#_beforeinitialize)
13+
- [`_afterInitialize()`](#_afterinitialize)
14+
- [`initialize()`](#initialize)
15+
16+
17+
### `constructor()`
18+
19+
Here we describe the future instances.:
20+
- get data from arguments
21+
- declare instance properties
22+
23+
### `defaults`
24+
25+
> since v3.0.0 property renamed to `defaultSettings`
26+
27+
### `defaultSettings`
28+
29+
_`public`_
30+
_**`since v3.0.0`**_
31+
32+
A getter that returns an object with default options, settings, or configuration for your plugin.
33+
34+
### `defaultProps`
35+
36+
_`public`_
37+
_**`since v3.0.0`**_
38+
39+
A getter that returns an object with predefined props.
40+
Most often this is a list of options that are not included in the list of certain options of your plugin. But you need them for individual processing your options, settings, data, etc.
41+
42+
43+
### `_setup()`
44+
45+
_`protected`_
46+
47+
The method is designed to prepare data for initialization.
48+
For example, setting up future plugin options, etc.
49+
50+
### `_beforeInitialize()`
51+
52+
_`protected`_
53+
54+
It describes the actions that must be performed before initializing the plug-in.
55+
For example, add the CSS class `.is-ready` to the HTML element to which your plugin will be applied.
56+
57+
### `_afterInitialize()`
58+
59+
_`protected`_
60+
61+
Here we can describe the actions that should be performed after the initialization of the plugin.
62+
For example, add an additional handler to scroll or resize window events, which will update the parameters of your current plugin.
63+
64+
### `initialize()`
65+
66+
_`public`_
67+
68+
Directly launch your plugin.
69+
70+
---
71+
72+
:arrow_left: [Docs](./index.md) | :arrow_up: [top](#readme)
73+

‎docs/examples/abstract-class.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
## Usage example
2+
3+
:arrow_left: [Docs](../index.md)
4+
5+
Abstract class example with interface implementation
6+
7+
```js
8+
// some-plugin-init/abstract.js
9+
10+
import $ from 'jquery'; // for example
11+
import 'some-jquery-plugin'; // for example
12+
import { WebPluginInterface } from 'web-plugin-interface';
13+
14+
/**
15+
* @implements WebPluginInterface
16+
*/
17+
export class SomeJqueryPluginAbstract extends WebPluginInterface {
18+
/**
19+
* @param {jQuery} $container
20+
* @param {Object} [customSettings={}]
21+
* @param {Object} [customProps={}]
22+
*/
23+
constructor ($container, customSettings = {}, customProps = {}) {
24+
super();
25+
this.$container = $container;
26+
this.customSettings = customSettings;
27+
this.settings = {};
28+
this.props = {};
29+
this.readyCssClass = 'is-ready';
30+
this.initializedCssClass = 'is-initialized';
31+
}
32+
33+
/**
34+
* @type {Object}
35+
*/
36+
get defaultSettings () {
37+
return {
38+
// an example of some options of your plugin
39+
autoplay: true,
40+
speed: 500
41+
}
42+
}
43+
44+
/**
45+
* @type {Object}
46+
*/
47+
get defaultProps () {
48+
return {
49+
// an example of options that is native for your plugin
50+
stopAutoPlayIfOutView: true
51+
}
52+
}
53+
54+
/**
55+
* @protected
56+
*/
57+
_setup () {
58+
this.props = $.extends({}, this.defaultProps, this.customProps);
59+
this.settings = $.extends({}, this.defaultSettings, this.customSettings);
60+
61+
// props example
62+
if (this.props.stopAutoPlayIfOutView) {
63+
this.settings.autoplay = this.detectIfInView;
64+
}
65+
}
66+
67+
/**
68+
* @protected
69+
*/
70+
_beforeInitialize () {
71+
this.$container.addClass(this.readyCssClass);
72+
}
73+
74+
/**
75+
* @protected
76+
*/
77+
_afterInitialize () {
78+
this.$container.addClass(this.initializedCssClass);
79+
80+
// props example
81+
if (this.props.stopAutoPlayIfOutView) {
82+
this._autoplayInViewObserve();
83+
}
84+
}
85+
86+
initialize () {
87+
this._setup();
88+
this._beforeInitialize();
89+
90+
// fire up
91+
this.$container.someJqueryPlugin(this.settings);
92+
93+
this._afterInitialize();
94+
}
95+
96+
// ------------------------------
97+
// Custom extend implemented interface
98+
// ------------------------------
99+
100+
/**
101+
* @type {boolean}
102+
*/
103+
get detectIfInView () {
104+
// your code
105+
}
106+
107+
/**
108+
* @protected
109+
*/
110+
_autoplayInViewObserve () {
111+
// your code
112+
}
113+
}
114+
```
115+
116+
---
117+
118+
:arrow_left: [Docs](../index.md) | :arrow_up: [top](#readme)

‎docs/index.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Docs
2+
3+
:arrow_left: [WebPluginInterface](../README.md)
4+
5+
#### *Table of contents*
6+
7+
8+
1. [API](./api.md)
9+
1. Code examples
10+
- [examples/abstract-class](./examples/abstract-class.md)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "web-plugin-interface",
3-
"version": "3.0.1",
3+
"version": "3.0.2",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)