npm package: @openmind/zero
Description: The Openmind Zero framework project
Author: Openmind Lab
Latest version: 0.1.7

# Project `Zero`

##### Contribute

Make sure you're using `nvm` as node environment. Otherwise check it on [nvm](https://github.com/creationix/nvm)
Make sure you have installed brew. Otherwise check it on [Homebrew](https://brew.sh/index_it.html)

```sh
git clone ssh://git@stash.openmindonline.it:7999/oc/zero.git
cd zero
nvm use
npm install -g npm
brew install yarn --without-node
yarn global add gulp-cli yo
yarn install
gulp
```


### Work with Zero
#### Creating component

In your project go to 'javascripts' folder and create `components` folder.

Create a new file as follow:
```sh
my_new_compoent.js
```

Copy this code in order to quickly start using it
```js
import {Logger, Zero, Components, Utils} from 'Zero'

const Log = new Logger('MyComponentName');

export default class MyComponentName extends Components {

  get Messages() {
    return {
      "Message:To:Handle": this.onMessageReceived
    }
  }

  constructor(element) {
    super(element)
  }

  onMessageReceived() {
    // TODO: do something awesome
  }

}

```


### `(new)` Zero can work with previous Boilerplate
Import _Zero_ via `bower` or via `npm` (recommended)
Make sure you are importing latest available version (see tags)
```js
// bower.json
"dependencies": {
    "om-zero": "ssh://git@stash.openmindonline.it:7999/oc/zero.git#{version}"
}
// npm via package.json
"dependencies": {
    "@openmind/zero": "#{version}"
}
```
###### Import `zero-bridge.umd.js` located into `build/` folder.
##### NOTE: make sure the script is imported _after_ `app.js` and _before_ `App.init()`.

```html
<html>
    <head>
        ...
    </head>
    <body>
        ...
        <script src="path/to/{libs}.js"></script>
        <script src="path/to/app.js"></script>
        <script src="path/to/zero-bridge.umd.js"></script>
        <script>
            App.init()
        </script>
    </body>
</html>
```

##### Now you can start writing _Components_ in `Zero` and they can work with all other components within _boilerplate_

```js
// new_component_file.js
// Header of file as usual in boilerplate
(function($, App, Components, Pages, Utils) {
    //-- See Zero documentation if any doubts --
    App.ZeroComponent('MyNewComponent', {
      Messages: function(){
        return {
          'mynewcomponent:something': this.somethingHappened.bind(this)
        };
      },

      init: function(element) {
        this.element.find(".selector").on("click", function(e){
          e.preventDefault();
          //-- Fire Message event in order to be captured from any other component
          App.Zero.Broadcast.cast("mynewcomponent:something-else", {code: "001"});
        });
      },

      somethingHappened: function(e, msg) {
        //-- Message from other component has been captured
        alert("Oh wow, something happened!" + msg.code === "002" );
        this.element.addClass("happened");
      }
    });
})(jQuery, App, App.Components, App.Pages, App.Utils);

// already_existing_component.js
(function($, App, Components, Pages, Utils) {
  Components.create('MyOlderComponent', {
    bindEvents: function() {
      Components.on("mynewcomponent:something-else", function(e, msg) {
        alert("A new component say:" + msg.code);
      });

      $(".older-selector").on("click", function(e) {
        e.preventDefault();

        // Send message to all other components
        Components.trigger("mynewcomponent:something", {code: "002"});
      })

    },
    init: function() {
      this.bindEvents();
    }
  });
})(jQuery, App, App.Components, App.Pages, App.Utils);
```

### Enjoy ;)