@openmind/zero NPM

Project `Zero`

Contribute

Make sure you're using nvm as node environment. Otherwise check it on nvm Make sure you have installed brew. Otherwise check it on Homebrew

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:

my_new_compoent.js

Copy this code in order to quickly start using it

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)

// 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>
    <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

// 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);