@openmind/zero

The Openmind Zero framework project

0.1.7
latest
npm

Version published: 6 years ago

Weekly downloads: 94; decreased by-51.3%

Maintainers: 2

Weekly downloads

Created: 6 years ago

Source

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

Enjoy ;)

Keywords

yeoman-generator

FAQs

What is @openmind/zero?

Is @openmind/zero popular?

Is @openmind/zero well maintained?

Package last updated on 10 Oct 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install