Save and restore state about angular-resizable HOT 12 CLOSED

Hm... I assume you mean on a refresh right? If so, I think the best way to go about it would be to create a service that stores the width and height of the element on release. For this I can set up a broadcast event once the dimensions are set.

As far as loading the then stored dimensions back in, we could add a couple of attributes to the directive (r-width and r-height) for setting predefined values. I'll work on putting something together in the next few days.

Let me know if you have any other ideas :)

from angular-resizable.

Hey Reklino, yes - I was thinking about maintaining the sizes after a page refresh.

And yea, I agree broadcasting events is the way to go about and then being able to initiate the directive with a predefined with and height would enable me to restore the size.

from angular-resizable.

Come to think about it, at least three events would be nice:

angular-resizable.startResizing
angular-resizable.resizing
angular-resizable.endResizing

That way I can choose whether I want my UI to resize on every pixel the size changes, or if I want to wait till the resizing is finished. For instance I am using ui-grid.info, and resizing the grid is a little processor intensive. With the startResizing event, I could for instance fade out the grid a bit and then resize it and fade it back in when endResizing is broadcasted.

And I guess we would have to be able to identify the specific instance of the directive somehow, so that we know which directive the width and height belongs to.

from angular-resizable.

Hey @nitech!

Check this out and let me know what you think.

I held off on emitting a 'resizing' event for now because I couldn't think of a use case that couldn't be solved by making use of a start event, end event, and the '.no-transition' class that is available when dragging. However, if you've got a use case in mind, let me know and we'll figure it out.

As far as getting the specific instance of the directive after refresh, the simplest solution I could think of was to emit the 'id' of the resizable element (if there is one) along with the width and height so that they can be stored together. So if you have any resizable elements that need to be remembered on refresh, you can store them on the 'angular-resizable.endResizing' event and then reference them by id once the page has been refreshed. Think that will work?

This seemed to be the most logical and simple solution to me, but I'm open to other methods :)

from angular-resizable.

Thanks! This seems to solve the need to store and restore the size. I am not quite eloquent in AngularJs (yet) and therefore I was a bit puzzled as to how to know which specific directive I am listening to. Passing the ID as suggested would make me able to restore a specific instance.

Without 'px'

I cheated a bit and implemented somewhat the similar solution yesterday - and then I didn't pass the r-width and r-height as string but rather number - without 'px'. You might consider adding 'px' inside the directive - or defaulting to px.

Options object

Also, it seems other directives implement an options-object rather than having multiple attributes (like r-width, r-height, etc) Ie: resizable="{ width: 200 }"

setSize

I guess we should also have a setSize(width?, height?) method in the directive. Say for instance I am storing the size on the server, I need to call an async request to the server to get the size, and before I have the size at hand, the directive has already processed.

from angular-resizable.

Thanks for the feedback. Yeah, there is no built in method for finding a specific instance of a directive that I know of. But using the ID works. If you find a better method, let me know or play around and submit a PR.

As far as nixing the 'px' and passing an integer goes, I guess that'd be fine. My thoughts behind passing a string were to allow for the possibility of someone using some other unit and having it converted to 'px' in some future version, but that's probably not really gonna be needed.

I have seen some directives that use an object passed to a single attribute for config, and there's nothing really wrong with that (in fact sometimes I prefer it). However, I personally feel that keeping these view-altering options visible in the HTML is part of the beauty of AngularJs. When you can look at the html and understand an element's behavior, you're doing good :)

I was assuming the server request was being done before the rendering of the directive, which is my bad. In lieu of a 'setSize' method though, perhaps we could just watch for changes on the 'r-width' and 'r-height' attributes if they are set.

I kinda forgot to fork that last codepen and instead saved over it with this new version. But you can play around with updating the width and height attributes now. The input boxes in the bottom left are bound to the directives.

Check it out and let me know what ya think!

from angular-resizable.

I was going to submit another bug that highlighted that mouseup event was not getting unregistered. However, I see that it's fixed in this version!

from angular-resizable.

@nitech I went ahead and pushed these changes. If you had any issues with the changes or have any feedback, feel free to still post it here or open a new issue.

from angular-resizable.

So I've tested hooking up to the events, and it works fine for me. Only change I would recommend is to add scope.$apply(); after the emits, because the events are raised outside of the angular world and therefore the changes aren't digested automatically.

from angular-resizable.

@jinder Cool. Let me look at this later. Feel free to fork the codepen, or submit a pull request in the meantime :)

from angular-resizable.

I changed 1.1.0 to this:

                    updateInfo();
                    scope.$emit("angular-resizable.resizeEnd", info);
                    scope.$apply();

and:

                    updateInfo();
                    scope.$emit("angular-resizable.resizeStart", info);
                    scope.$apply();

I see in the codepen that you do the apply() inside your controller. I guess it's a matter of style more than anything - although usually angular directives do the applying() for you.

from angular-resizable.

That makes sense to me :). I'll push up those changes.

from angular-resizable.