https://github.com/ugogo/hull-components

https://github.com/ugogo/hull-components

Last synced: about 6 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/ugogo/hull-components
• Owner: ugogo
• Created: 2014-08-04T08:43:04.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-08T15:37:09.000Z (over 10 years ago)
• Last Synced: 2024-04-16T22:27:30.555Z (7 months ago)
• Language: JavaScript
• Size: 305 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Build Hull components

## Folder structure

```

├─ src/

│   ├─ index.html

│   ├─ component-name/

│   │   ├─ partials/

│   │   │   ├─ partial-name.hbs

│   │   ├─ main.js

│   │   ├─ main.hbs

├─ config.yml

├─ gruntfile.js

├─ package.json

├─ README.md

```

## Include a file

1 - Create a partial folder: `src/component-name/partials/`

2 - Create a new partial file: `src/component-name/partials/partial-name.hbs`

3 - Update `templates: ['main', 'partials/partial-name']` in `src/component-name/main.js`

4 - In any `.hbs` file, add `{{> component-name/partials/partial-name}}`

## Passing data-params

1 - In `.html` file, update with

```html



```

2 - Retrieve options in `main.js`

```javascript

console.info('options:', this.options);

console.info('data-hull-foo:', this.options.foo);

console.info('data-hull-bar:', this.options.bar);

```


## Datasources

Datasources are (easier) ajax call to the Hull API.

Example if you want to get the current user's friends

1 - In `src/component-name/main.js` update datasources object to

```javascript

datasources: {

  mycustomvar: "/me/friends"

}

```

2 - You can access to this in the `beforeRender` and `afterRender` function

```javascript

beforeRender: function(data){

  console.warn('initialize called');

  var isLogged = Hull.currentUser();

  if(isLogged === null){

    console.warn('Please login');

    return;

  }

  var userFriends = data.mycustomvar;

  if(userFriends !== undefined)

    console.info('So you have friend(s) on this app...', userFriends);

  else

    console.info('Sorry but you are friendless');

}

```

3 - It can also work with a quiz and his leaderboard

```javascript

datasources: {

  quiz: ":id?fields=badge",

  leaders: ":id/leaderboards/best-score?wrapped=true"

}

```

## Sandbox methods

Sandbox offers methods to access data, make calls, emit events and subscribe to them.

[Sandbox documentation](http://hull.io/docs/components/reference#the-sandbox)

Example, check if the current user is admin

```javascript

if(isLogged === null){

  console.warn('Please login');

  return;

}

console.warn('Is user admin?', this.sandbox.isAdmin());

```

## Custom actions

Trigger action on click on an html element

In any `hbs` file

```html

Log

```

In `src/component-name/main.js`

```javascript

actions: {

  actionName: function(evt, action){

    console.info('clicked');

    console.info(action.data);

    console.info('data passed (foo):', action.data.foo)

    console.info('data passed (bar):', action.data.bar)

  }

}

```

## Handlebars useful markup

* Check if currentUser is logged in

```

{{#if loggedIn}}

  hey i'm loggin

{{else}}

  i'm not loggin

{{/if}}

```

* Check if currentUser is admin

```

{{#if isAdmin}}

  hey i'm admin

{{else}}

  i'm not admin

{{/if}}

```

* Basic loop from JSON

```

{{#each jsonEntry}}

  {{title}}

{{/each}}

```

* Get loop index

```

{{#each quiz.questions}}

  {{@index}}

{{/each}}

```

* Print JSON from datasources

In `src/component-name/main.js`

```javascript

datasources: {

  currentUserFriends: "/me/friends"

}

```

In any `.hbs` file

```html


  {{json currentUserFriends}}



```