https://github.com/hshoff/browserify-app-widget

trying things out
https://github.com/hshoff/browserify-app-widget

Last synced: about 1 month ago
JSON representation

trying things out

• Host: GitHub
• URL: https://github.com/hshoff/browserify-app-widget
• Owner: hshoff
• Created: 2014-06-10T05:48:21.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-06-10T06:01:07.000Z (over 10 years ago)
• Last Synced: 2024-04-09T16:41:21.596Z (7 months ago)
• Language: JavaScript
• Size: 125 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# The Millennium Falcon Widget

Following along with the tutorial in the [browserify-handbook](https://github.com/substack/browserify-handbook#reusable-components) for building resuable components.

### index.js

```js

var Widget = require('widget');

var w = Widget();

w.setTitle('Widget');

w.setMessage('millennium falcon');

w.on('append', function(target) {

  console.log('appended: ', target.outerHTML);

});

w.appendTo('.app');

```

### node_modules/widget.js

```js

var fs = require('fs');

var domify = require('domify');

var inherits = require('inherits');

var EventEmitter = require('events').EventEmitter;

var html = fs.readFileSync(__dirname + '/widget.html', 'utf8');

inherits(Widget, EventEmitter);

module.exports = Widget;

function Widget(opts) {

  if (!(this instanceof Widget)) return new Widget(opts);

  this.el = domify(html);

}

Widget.prototype.appendTo = function(target) {

  if (typeof target === 'string') {

    target = document.querySelector(target);

  }

  target.appendChild(this.el);

  this.emit('append', target);

};

Widget.prototype.setTitle = function(title) {

  this.el.querySelector('.title').textContent = title;

};

Widget.prototype.setMessage = function(msg) {

  this.el.querySelector('.msg').textContent = msg;

};

```

### development

- `npm run build`

- `npm run watch`

### MIT