Merge pull request #17 from dutchenkoOleg/master

0.5.1

Author: OlehDutchenko

.gitignore

@@ -1,3 +1,3 @@
-/.idea/
-/node_modules/
+/.idea
+/node_modules
 /package-lock.json

.npmignore

@@ -1,5 +1,5 @@
-/docs/
-/examples/
+/docs
 /.eslintrc.json
+/resources
 /rollup.config.js
 /_config.yml

README.md

@@ -7,9 +7,7 @@
 
 ---
 
-### _**Status WIP**_
-
----
+![zz-load](https://repository-images.githubusercontent.com/160879073/eff5b180-7b4f-11e9-877d-c9b26c5007e0)
 
 > _**Project inspired by [lozad.js](https://github.com/ApoorvSaxena/lozad.js)**_  
 > _**Big thx to [ApoorvSaxena](https://github.com/ApoorvSaxena) and community for their work on `lozad.js`**_  
@@ -36,202 +34,13 @@
 | `triggerLoad()` method return Promise        | _No_      | _**Yes**_ |
 
 
-## Live preview
-
-[https://WezomAgency.github.io/zz-load/examples/](https://wezomagency.github.io/zz-load/examples/index.html)
-
---- 
-
-
-# Install
-
-#### NPM
-
-```bash
-npm i zz-load
-```
-
-#### CDN (unpkg.com)
-
-```html
-<script src="https://unpkg.com/zz-load@latest/dist/zz-load.js"></script>
-<!-- or minimized version -->
-<script src="https://unpkg.com/zz-load@latest/dist/zz-load.min.js"></script>
-```
-
-#### Download
-
-- [zz-load.es.js](https://unpkg.com/zz-load@latest/zz-load.es.js)
-- [dist/zz-load.js](https://unpkg.com/zz-load@latest/dist/zz-load.js)
-- [dist/zz-load.min.js](https://unpkg.com/zz-load@latest/dist/zz-load.min.js)
-
----
-
-# Simple usage
-
-Prepare markup
-
-```html
-<img class="zzload custom-image" 
-    width="150" height="150"
-    src="./some-low-quality-placeholder.jpg"
-    data-zzload-source-img="./path/to/image.jpg">
-```
-
-CSS for transition
-
-```css
-.custom-image {
-    opacity: 0;
-}
-
-/* zz-load will add `data-zzload-is-loaded` attribute
-   after fully resource loaded */
-.custom-image[data-zzload-is-loaded] {
-    opacity: 1;
-    transition: opacity .3s ease;
-}
-```
-
-
-import js module
-
-```js
-import zzLoad from 'zz-load';
-```
-
-or include as external file
-
-```html
-<script src="your/path/to/zz-load.min.js"></script>
-<!-- will be added to Window, as global object zzLoad -->
-```
-
-then fire up
-
-```js
-const observer = zzLoad();
-observer.observe();
-```
-
----
-
-## More Examples
-
-_documentation in progress_
-
----
-
-# API
-
-### `zzLoad([elements][, options]): observer`
-
-#### `elements`
-
-_type_: `string | Element | NodeList | jQuery<Element>`  
-_default value_: `'.zzload'`
-
-Can be elements or string selector for find elements.
-
-
 
+## Docs and examples
 
-#### `options`
-
-_type:_ `Object`
-
-##### `options.rootMargin`
-
-_default value:_ `'0px'`  
-read more: [IntersectionObserver.rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
-
-
-
-
-##### `options.threshold`
-
-_default value:_ `0`  
-read more: [IntersectionObserver.thresholds](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds)
-
-
-
-
-
-##### `options.onLoad(element, source): void`
-
-_default value:_ `empty function`  
-Callback executed on fully success loaded source.  
-Has two arguments:
-
-- `element: Element` - current element
-- `source: string` - loaded source url 
-
-example:
-
-```js
-import zzLoad from 'zz-load';
-const observer = zzLoad('.zzload', {
-    onLoad (element, source) {
-        element.classList.add('is-fully-loaded');
-        console.log('Source successfully loaded:\n' + source);
-    }
-})
-```
-
-
-> _Note! zzLoad automatically will add own attribute to elements,_  
-> _for marking them as loaded, even without setting custom `onLoad()` method._   
-> _So you can use this approach for custom styling._  
-> _Read more in [Auto marking elements](#auto-marking-elements) section_
-
-
-
-
-
-
-##### `options.onError(element, source): void`
-
-_default value:_ `empty function`  
-Callback executed on error loading source.  
-Has two arguments:
-
-- `element: Element` - current element
-- `source: string` - failed source url 
-
-example:
-
-```js
-import zzLoad from 'zz-load';
-const observer = zzLoad('.zzload', {
-    onError (element, source) {
-        element.classList.add('is-damaged');
-        console.warn('Something went wrong with source:\n' + source);
-    }
-})
-```
-
-
-> _Note! zzLoad automatically will add own attribute to elements,_  
-> _for marking them as failed, even without setting custom `onLoad()` method._   
-> _So you can use this approach for custom styling._  
-> _Read more in [Auto marking elements](#auto-marking-elements) section_
-
-### `observer`
-
-_documentation in progress_
-
-#### `observer.observe()`
-
-_documentation in progress_
-
-#### `observer.triggerLoad(): Promise`
-
-_documentation in progress_
-
----
+https://WezomAgency.github.io/zz-load/
 
-# Auto marking elements
+## License
 
-_documentation in progress_
+[MIT](https://github.com/WezomAgency/zz-load/blob/master/LICENSE)