zoltan-nz/jsbin.luhoquxi.css

## jsbin.luhoquxi.css
/* Put your CSS here */
html, body {
  margin: 20px;
}

.woof-message {
  cursor: pointer;
}

.woof-message:hover button.close {
  color: #000;
  opacity: .5;
}

div.x-woof-message-container.pre-insert, div.x-woof-message-container.destroyed {
/*   -webkit-transform: scaleY(0); */
  opacity: 0;
}

div.x-woof-message-container {
/*   -webkit-transform: scaleY(1);
  -webkit-transform-origin: top;
   */
  -webkit-transition: all 0.25s ease;
}

## jsbin.luhoquxi.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  <meta charset="utf-8">
  <title>WoofWoof! Notifier for Ember</title>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Demo a Woof Alert</h2>
    <p>You can easily add a new alert message to your app! Woof injects into routes, controllers, and components. The API is very simple:
    <pre><code>this.woof.danger('Danger message!');
this.woof.warning('Warning message!')
this.woof.info('Info message!')
this.woof.success('Info success!')</code></pre>
    </p>
    <p>Woof has an optional timeout you can define. After the timeout the message will automatically be removed.
<pre><code>Ember.Woof.reopen({
  timeout: 500
});</code></pre>
  </p>
    {{outlet}}<br/><br/>
    {{x-woof}}
  </script>

  <script type="text/x-handlebars" id="index">
    <button {{action "addDanger"}} class="btn btn-danger">Add Danger</button>
    <button {{action "addWarning"}} class="btn btn-warning">Add Warning</button>
    <button {{action "addInfo"}} class="btn btn-info">Add Info</button>
    <button {{action "addSuccess"}} class="btn btn-success">Add Success</button>
  </script>

  <script type="text/x-handlebars" id="components/x-woof">
    {{#each messages}}
      {{x-woof-message message=this}}
    {{/each}}
  </script>

  <script type="text/x-handlebars" id="components/x-woof-message">
    <div {{bind-attr class=":woof-message :alert :alert-dismissable message.typeClass"}}>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <strong>{{capitalize message.type}}</strong> {{message.message}}
    </div>
  </script>
</body>
</html>

## jsbin.luhoquxi.js
Ember.Application.initializer({
  name: "registerWoofMessages",

  initialize: function(container, application) {
    application.register('woof:main', Ember.Woof);
  }
});

Ember.Woof = Ember.ArrayProxy.extend({
  content: Ember.A(),
  timeout: 5000,
  pushObject: function(object) {
    object.typeClass = 'alert-' + object.type;
    this._super(object);
  },
  danger: function(message) {
    this.pushObject({
      type: 'danger',
      message: message
    });
  },
  warning: function(message) {
    this.pushObject({
      type: 'warning',
      message: message
    });
  },
  info: function(message) {
    this.pushObject({
      type: 'info',
      message: message
    });
  },
  success: function(message) {
    this.pushObject({
      type: 'success',
      message: message
    });
  }
});

Ember.Handlebars.helper('capitalize', function(value) {
  return value.capitalize();
});

Ember.Application.initializer({
  name: "injectWoofMessages",

  initialize: function(container, application) {
    application.inject('controller', 'woof', 'woof:main');
    application.inject('component',  'woof', 'woof:main');
    application.inject('route',      'woof', 'woof:main');
  }
});

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  activate: function() {
    this.woof.info('Welcome! Click me to dismiss or I will disappear in 5 seconds.');
  }
});

App.IndexController = Ember.Controller.extend({
  actions: {
    addDanger: function() {
      this.woof.danger('This is a danger alert!');
    },
    addWarning: function() {
      this.woof.warning('This is a warning alert!');
    },
    addInfo: function() {
      this.woof.info('This is an info alert!');
    },
    addSuccess: function() {
      this.woof.success('This is a success alert!');
    }
  }
});

App.XWoofComponent = Ember.Component.extend({
  classNames: 'woof-messages',
  messages: Ember.computed.alias('woof')
});

App.XWoofMessageComponent = Ember.Component.extend({
  classNames: ['x-woof-message-container'],
  classNameBindings: ['insertState'],
  insertState: 'pre-insert',
  didInsertElement: function() {
    var self = this;
    self.$().bind('webkitTransitionEnd', function(event) {
      if (self.get('insertState') === 'destroyed') {
        self.woof.removeObject(self.get('message'));
      }
    });
    Ember.run.later(function() {
      self.set('insertState', 'inserted');
    }, 250);

    if (self.woof.timeout) {
      Ember.run.later(function() {
        self.set('insertState', 'destroyed');
      }, self.woof.timeout);
    }
  },

  click: function() {
    var self = this;
    self.set('insertState', 'destroyed');
  }
});
	/* Put your CSS here */
	html, body {
	margin: 20px;
	}

	.woof-message {
	cursor: pointer;
	}

	.woof-message:hover button.close {
	color: #000;
	opacity: .5;
	}

	div.x-woof-message-container.pre-insert, div.x-woof-message-container.destroyed {
	/* -webkit-transform: scaleY(0); */
	opacity: 0;
	}

	div.x-woof-message-container {
	/* -webkit-transform: scaleY(1);
	-webkit-transform-origin: top;
	*/
	-webkit-transition: all 0.25s ease;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<meta charset="utf-8">
	<title>WoofWoof! Notifier for Ember</title>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2>Demo a Woof Alert</h2>
	<p>You can easily add a new alert message to your app! Woof injects into routes, controllers, and components. The API is very simple:
	<pre><code>this.woof.danger('Danger message!');
	this.woof.warning('Warning message!')
	this.woof.info('Info message!')
	this.woof.success('Info success!')</code></pre>
	</p>
	<p>Woof has an optional timeout you can define. After the timeout the message will automatically be removed.
	<pre><code>Ember.Woof.reopen({
	timeout: 500
	});</code></pre>
	</p>
	{{outlet}}<br/><br/>
	{{x-woof}}
	</script>

	<script type="text/x-handlebars" id="index">
	<button {{action "addDanger"}} class="btn btn-danger">Add Danger</button>
	<button {{action "addWarning"}} class="btn btn-warning">Add Warning</button>
	<button {{action "addInfo"}} class="btn btn-info">Add Info</button>
	<button {{action "addSuccess"}} class="btn btn-success">Add Success</button>
	</script>

	<script type="text/x-handlebars" id="components/x-woof">
	{{#each messages}}
	{{x-woof-message message=this}}
	{{/each}}
	</script>

	<script type="text/x-handlebars" id="components/x-woof-message">
	<div {{bind-attr class=":woof-message :alert :alert-dismissable message.typeClass"}}>
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<strong>{{capitalize message.type}}</strong> {{message.message}}
	</div>
	</script>
	</body>
	</html>
	Ember.Application.initializer({
	name: "registerWoofMessages",

	initialize: function(container, application) {
	application.register('woof:main', Ember.Woof);
	}
	});

	Ember.Woof = Ember.ArrayProxy.extend({
	content: Ember.A(),
	timeout: 5000,
	pushObject: function(object) {
	object.typeClass = 'alert-' + object.type;
	this._super(object);
	},
	danger: function(message) {
	this.pushObject({
	type: 'danger',
	message: message
	});
	},
	warning: function(message) {
	this.pushObject({
	type: 'warning',
	message: message
	});
	},
	info: function(message) {
	this.pushObject({
	type: 'info',
	message: message
	});
	},
	success: function(message) {
	this.pushObject({
	type: 'success',
	message: message
	});
	}
	});

	Ember.Handlebars.helper('capitalize', function(value) {
	return value.capitalize();
	});

	Ember.Application.initializer({
	name: "injectWoofMessages",

	initialize: function(container, application) {
	application.inject('controller', 'woof', 'woof:main');
	application.inject('component', 'woof', 'woof:main');
	application.inject('route', 'woof', 'woof:main');
	}
	});

	App = Ember.Application.create();

	App.ApplicationRoute = Ember.Route.extend({
	activate: function() {
	this.woof.info('Welcome! Click me to dismiss or I will disappear in 5 seconds.');
	}
	});

	App.IndexController = Ember.Controller.extend({
	actions: {
	addDanger: function() {
	this.woof.danger('This is a danger alert!');
	},
	addWarning: function() {
	this.woof.warning('This is a warning alert!');
	},
	addInfo: function() {
	this.woof.info('This is an info alert!');
	},
	addSuccess: function() {
	this.woof.success('This is a success alert!');
	}
	}
	});

	App.XWoofComponent = Ember.Component.extend({
	classNames: 'woof-messages',
	messages: Ember.computed.alias('woof')
	});

	App.XWoofMessageComponent = Ember.Component.extend({
	classNames: ['x-woof-message-container'],
	classNameBindings: ['insertState'],
	insertState: 'pre-insert',
	didInsertElement: function() {
	var self = this;
	self.$().bind('webkitTransitionEnd', function(event) {
	if (self.get('insertState') === 'destroyed') {
	self.woof.removeObject(self.get('message'));
	}
	});
	Ember.run.later(function() {
	self.set('insertState', 'inserted');
	}, 250);

	if (self.woof.timeout) {
	Ember.run.later(function() {
	self.set('insertState', 'destroyed');
	}, self.woof.timeout);
	}
	},

	click: function() {
	var self = this;
	self.set('insertState', 'destroyed');
	}
	});