search

caitp / angular-semantic

AngularJS directives for Semantic-UI
413 stars 48 forks source link

Semantic-UI Dimmer #4

Open caitp opened 10 years ago

caitp commented 10 years ago

I'm not sure of the best way to integrate this with Angular.

It would be nice for controllers to be able to dim/undim Dimmer objects. However, Controllers should not be performing any kind of DOM manipulation. I was thinking about putting it into a Service, but I'm not sure.

My imagined use case looks something like:

<dimmable>
   <...dimmable contents...>
</dimmable>

Which would add an element to the $dimmer service, called from a controller like so:

// These are terrible method names, something better like show/hide would be more appropriate
$dimmer.dim();
$dimmer.light();

I suppose the controller could specify an ID or some other selector when calling these methods. But it still sort of feels wrong.

So, I'm not totally sure how to put control of dimming/lighting into the hands of a controller, in a way that doesn't suck.

Thoughts? Feelings?

coryasilva commented 10 years ago

I think you should have two directives; parent and child. The parent will contain the "api" methods on its controller and the child will require the parent controller and ask for itself to be dimmed.

<body sem-dimmable-container>
    <div sem-dimmable>
        <!-- image -->
    </div>
    <div sem-dimmable>
        <!-- image -->
    </div>
</body>

What do you think? I will try work this in to my dev time on my current project. Edit: this was a very bad idea. lol

caitp commented 9 years ago

huh for some reason my github notifications said you just posted this 10 days ago, but it looks like it was a while ago!

If you want to contribute a fix for that, that would be awesome

cvette commented 9 years ago

I'm currently working on a implementation for this. Everything except the animations is done. Usage would be like this:

<div ng-controller="DimmerController" dimmable>
    <dimmer ng-click="toggle()" disabled="state.disabled" page-dimmer="state.page" active="state.active">
         <... />
    </dimmer>
</div>

Logic is all in the dimmer directive. The dimmable get's notified via an event of status change.

One issue is the interaction with the (to be implemented) Modal module. How could it use the dimmer module? Modal and dimmer is on the same element.