Improved JavaScript

README.md

@@ -17,7 +17,7 @@ Here are some of its features:
 * Compatible with Bootstrap
 * Standalone and patchable
 * Object-oriented
-* Localization support
+* Support localization
 * Populate and validate forms
 
 Brickrouge uses [Bootstrap](http://twitter.github.com/bootstrap/) for its style,
@@ -182,19 +182,18 @@ and the normalized data attributes of that element.
 ```js
 !function (Brickrouge) {
 
-	var Color = new Class({
+	class Color {
 
-		initialize: function(el, options) {
+		constructor(el, options) {
 
-			el = document.id(el)
 			el.setStyle('background', options.color)
 			el.innerHTML = options.colorName
 
 		}
 
 	})
 
-	Brickrouge.register('Color', function (element, options) {
+	Brickrouge.register('Color', (element, options) => {
 
 		return new Color(element, options)
 
@@ -214,11 +213,10 @@ the widget has not yet been created, getting the property creates it. The elemen
 widget is always available through its `element` property.
 
 ```js
-var color = Brickrouge.Widget.from(document.id('my-color'))
+const element = document.getElementById('my-color')
+const color = Brickrouge.Widget.from(element)
 // or
-var color = Brickrouge.from(document.id('my-color'))
-
-console.log('element and options:', color.element, color.options)
+const color = Brickrouge.from(element)
 ```
 
 
@@ -230,9 +228,9 @@ console.log('element and options:', color.element, color.options)
 The `widget` event is fired after a widget has been built.
 
 ```js
-Brickrouge.observe('widget', function(widget) {
+Brickrouge.observeWidget(ev => {
 
-	console.log('A widget has been built:', widget)
+	console.log('A widget has been built:', ev.widget)
 
 })
 ```
@@ -246,11 +244,11 @@ Brickrouge.observe('widget', function(widget) {
 The `update` event is fired after the DOM was updated.
 
 ```js
-Brickrouge.observe('update', function(fragment, elements, widgets) {
+Brickrouge.observeUpdate(ev => {
 
-    console.log('This fragment updated the DOM:', fragment)
-    console.log('These elements are new to:', elements)
-    console.log('These widgets have been built:', widgets)
+    console.log('This fragment updated the DOM:', ev.fragment)
+    console.log('These are new custom elements:', ev.elements)
+    console.log('These widgets have been built:', ev.widgets)
 
 })
 ```
@@ -356,13 +354,12 @@ The produced HTML, formatted for readability:
 Forms can be sent using XHR very easily thanks to the JavaScript `Form` class:
 
 ```js
-var form = new Brickrouge.Form('myForm', {
-
-	onComplete: function(response) {
+const element = document.getElementById('myForm')
+const form = new Brickrouge.Form(element)
 
-		console.log('complete:', response)
+form.observeComplete(ev => {
 
-	}
+	console.log('complete:', ev.response)
 
 });
 
@@ -382,15 +379,16 @@ option is true the _success_ message is inserted before the form element, which
 
 
 
-### Retriving the instance associated with a form element
+### Retrieving the instance associated with a form element
 
-The `Form` instance associated with a form element can be retrived with the `retrieve()` method:
+The `Form` instance associated with a form element can be retrieved with the `retrieve()` method:
 
 ```js
-var form = document.id('myForm').retrieve('brickrouge.form')
+const element = document.getElementById('myForm')
+const form = Brickrouge.Form.from(element)
 ```
 
-Note: Unlike the `widget` custom property, `brickrouge.form` does not create an instance, you
+> **Note:** Unlike `Brickrouge.from()`, `Brickrouge.Form.from()` does not create an instance, you
 need to do that yourself. This might change is the future.
 
 

lib/Brickrouge.d.ts

@@ -1,7 +1,11 @@
 declare interface Brickrouge {
     register(name: string, factory: Function)
     from(element: Element): Brickrouge.Widget
+    observe(event: Function, callback: Function)
     observeRunning(callback: Function)
+    observeUpdate(callback: Function)
+    observeWidget(callback: Function)
+    notify(event: Object)
 }
 
 declare namespace Brickrouge {

lib/DropdownMenu.auto.js

@@ -23,15 +23,15 @@ function clearMenus()
 
 function toggle()
 {
-	var selector = this.getAttribute('data-target') || this.getAttribute('href')
-	, parent = (selector ? document.getElementById(selector) : null) || this.parentNode
-	, isActive
-
-	isActive = parent.classList.contains('open')
+	const selector = this.getAttribute('data-target') || this.getAttribute('href')
+	const parent = (selector ? document.getElementById(selector) : null) || this.parentNode
+	const isActive = parent.classList.contains('open')
 
 	clearMenus()
 
-	!isActive && parent.classList.toggle('open')
+	if (!isActive) {
+		parent.classList.toggle('open')
+	}
 }
 
 document.body.addDelegatedEventListener(TOGGLE_ENABLED_SELECTOR, 'click', (ev, el) => {

lib/Form.d.ts

@@ -47,4 +47,9 @@ declare namespace Brickrouge {
         observeFailure(callback: Function)
         observeComplete(callback: Function)
     }
+
+    interface Response {
+        errors: Object|undefined
+        exception: string|undefined
+    }
 }

lib/Form.js

@@ -98,6 +98,28 @@ define('Brickrouge.Form', [
 
 	}
 
+	/**
+	 * @param {string} type
+	 *
+	 * @returns {Element}
+	 */
+	function createAlertElement(type)
+	{
+		const close = document.createElement('button')
+
+		close.type = 'button'
+		close.innerHTML = '×'
+		close.className = 'close'
+		close.setAttribute('data-dismiss', 'alert')
+
+		const element = document.createElement('div')
+
+		element.className = `alert alert-${type} dismissible`
+		element.appendChild(close)
+
+		return element
+	}
+
 	/**
 	 * Forms created.
 	 *
@@ -180,7 +202,7 @@ define('Brickrouge.Form', [
 		 * @param {HTMLFormElement} element
 		 * @param {Brickrouge.Form.Options} options
 		 */
-		constructor (element, options)
+		constructor(element, options)
 		{
 			super()
 
@@ -225,19 +247,38 @@ define('Brickrouge.Form', [
 		 */
 		alert(messages, type)
 		{
-			let original = messages
-			let alert = this.element.querySelector('.alert-' + type)
-			|| new Element('.alert.alert-' + type + '.dismissible').adopt(new Element('button.close[type="button"][data-dismiss="alert"]', { html: '×' }))
+			let alert = this.element.querySelector('.alert-' + type) || createAlertElement(type)
+
+			this.normalizeMessages(messages).forEach(message => {
+
+				const p = document.createElement('p')
+
+				p.innerHTML = message
 
-			if (typeOf(messages) == 'string')
+				alert.appendChild(p)
+
+			})
+
+			this.insertAlert(alert)
+		}
+
+		/**
+		 * @param messages
+		 *
+		 * @returns {Array<string>}
+		 */
+		normalizeMessages(messages)
+		{
+			if (typeof messages === 'string')
 			{
-				messages = [ messages ]
+				return [ messages ]
 			}
-			else if (typeOf(messages) == 'object')
+
+			if (typeof messages === 'object')
 			{
-				messages = []
+				const array = []
 
-				Object.forEach(original, (message, id) => {
+				Object.forEach(messages, (message, id) => {
 
 					if (id !== GENERIC)
 					{
@@ -249,23 +290,14 @@ define('Brickrouge.Form', [
 						return
 					}
 
-					messages.push(message)
+					array.push(message)
 
 				})
-			}
 
-			if (!messages.length)
-			{
-				return
+				return array
 			}
 
-			messages.forEach(message => {
-
-				alert.appendChild(new Element('p', { html: message }))
-
-			})
-
-			this.insertAlert(alert)
+			throw new Error("Unable to normalize messages: " + JSON.stringify(messages))
 		}
 
 		/**
@@ -279,13 +311,13 @@ define('Brickrouge.Form', [
 			{
 				alert.querySelector('[data-dismiss="alert"]').remove()
 				alert.classList.add('dismissible')
-				alert.inject(el, 'before')
 
+				el.parentNode.insertBefore(alert, el)
 				el.classList.add('hidden')
 			}
 			else if (!alert.parentNode)
 			{
-				alert.inject(el, 'top')
+				el.insertBefore(alert, el.firstChild)
 			}
 		}
 
@@ -318,7 +350,10 @@ define('Brickrouge.Form', [
 		{
 			const control = this.element.elements[name]
 
-			if (!control) return
+			if (!control)
+			{
+				return
+			}
 
 			const group = control.closest('.form-group')
 
@@ -411,21 +446,11 @@ define('Brickrouge.Form', [
 		 */
 		failure(xhr)
 		{
-			var response = {}
+			let response = {}
 
 			try
 			{
-				response = JSON.decode(xhr.responseText)
-
-				if (response.errors)
-				{
-					this.alert(response.errors, 'danger')
-				}
-
-				if (response.exception)
-				{
-					alert(response.exception)
-				}
+				response = JSON.parse(xhr.responseText)
 			}
 			catch (e)
 			{
@@ -437,6 +462,16 @@ define('Brickrouge.Form', [
 				alert(xhr.statusText)
 			}
 
+			if (response.errors)
+			{
+				this.alert(response.errors, 'danger')
+			}
+
+			if (response.exception)
+			{
+				alert(response.exception)
+			}
+
 			this.notify(new FailureEvent(xhr, response))
 		}
 

lib/Modal.auto.js

@@ -2,16 +2,23 @@ define([
 
 	'./Modal'
 
-], function (Modal) {
+],
+
+/**
+ * @param {Brickrouge.Modal} Modal
+ */
+function (Modal) {
 
 	"use strict";
 
 	document.body.addDelegatedEventListener('[data-toggle="modal"]', 'click', (ev, el) => {
 
-		let modalId = el.get('href').substring(1)
-		let modalEl = document.getElementById(modalId)
+		const modalId = el.get('href').substring(1)
+		const modalEl = document.getElementById(modalId)
 
-		if (!modalEl) return
+		if (!modalEl) {
+			return
+		}
 
 		ev.preventDefault()
 		ev.stopPropagation()
@@ -22,14 +29,16 @@ define([
 
 	document.body.addDelegatedEventListener('[data-dismiss="modal"]', 'click', (ev, el) => {
 
-		let modalEl = el.closest('.modal')
+		const modalEl = el.closest('.modal')
 
-		if (!modalEl) return
+		if (!modalEl) {
+			return
+		}
 
 		ev.preventDefault()
 		ev.stopPropagation()
 
-		let modal = Modal.from('modal')
+		const modal = Modal.from('modal')
 
 		if (modal)
 		{

lib/Modal.d.ts

@@ -0,0 +1,7 @@
+declare namespace Brickrouge {
+
+    class Modal {
+        static from(element: Element): Modal
+    }
+
+}