zurb/foundation-apps — pull request #29 by AntJanus (2014-10-07 15:05:27+00:00)
Title: [WIP] Angular directive restructure (and NotificationJS)

I'm still working on NotificationJS but after a conversation yesterday, I changed a few things around:

1. There's a common `fa-close` directive that emits a `close` message to its first closable parent. I'm thinking of possible adding an override where you can specify `fa-close="someId"` to close a specific element. This would however require me to either get rid of the `type` specification in the `FoundationApi` or to loop through an array of arrays (shouldn't be an issue in smaller apps, might be a problem in bigger ones). This also eliminates boilerplate for future show/hide plugins. Now we have a common `close` emitter. If we used a flat array of subscribers (and eliminate `type` spec in the `FoundationApi`), we could have a common `open` emitter as well. Thoughts on this?
2. Each element that wants to be closeable needs to just add an `fa-closeable="element type"` attribute in the `preLink` function. This is done for the `modal` and `notification`.

So, the `type` in the API was my idea and basically what it means is that we have an array of arrays. The top most level of subscribes allows us to specify a type. There's `modal`, `notification` and a bunch of others. Under each, we have an array of IDs and under each of those is an array of subscribers.

I wanted to have a neatly proportioned array so that we don't have this huge flat list at the end but instead a more semantic tree-like structure. This also allows us to (potentially) add functionality to trigger ALL Modals or ALL notifications at once. I'm not sure if there is any use for that (other than having a `clear-all` button).

Here's what it looks like:

````
var listeners = [
"modal": ['mainModal', 'myModal', 'pageModal'],
"notification": ['mainNotification', 'randomNotification', 'otherNotification']
];
````

The problem with this approach is that if we wanted to implement a common `fa-open` directive which would open a specific `openable` directive (like a modal), we'd either have to make the user specify the type of the directive like so: `fa-open="[modal]myModal"` (or with a similar syntax) or we'd have to search each type of directive that's subscribed and check if our `openable` directive is there. Same thing goes for targeted closing buttons.

and here's what that would look like:

````
var listeners = ['mainModal', 'myModal', 'pageModal', 'mainNotification', 'randomNotification', 'otherNoficiation'];
````

After writing all of this out, I'm thinking that perhaps a common `fa-open` directive with a special syntax specifying the type would be the best; however, having separate directives would be the easiest (so there'd be a dedicated `fa-modal-open`, `fa-notification-open`).