I'm working a Vue project, and I'm using Vuex to manage the applications state. I've separated out the view of the app into many small layouts, as Vue components. For example I have a layout for a header and a floating stats panel.
I've written a custom directive for affixing the stats panel. Currently, this works similar to Bootstrap where you set a value, and when the page scrolls beyond that point an affix CSS class gets added to the element. This value is based on the height of the header. As app is responsive, I would rather have this value computed from the header outerHeight property.
Now, I can think of several ways on how to accomplish this, however I'm not sure the proper Vue way to do it.
I could listen for resize events and have the header update it's height in the Vuex store. However, it seems poor practice to have the store manage presentation data.
I could pass the id of the header to the affix directive, and use getElementById to check the height. But this is bypassing Vue completely.
I could add a method to the header to return its' height, and have the parent component that holds both the header and stats panel use that to update the affix value. This however, gets messy if header and stats don't share the same parent.
Are there any other options? What would be best practice? Thanks!
I would surely go with #1 - share it through Vuex. Keep in mind that Vuex is just a stage manager. There are no rules what kind of data you want to store. Furthermore, I think it would be best to use it, as more component may rely on this kind of data, and it will be the only source of truth, that is mutated in a predictable way. All other options include coupling components/instances/elements on the page, and therefore the bigger the connection between the height and the page gets, the more complex those connections will grow.
Plus it will be reactive, so just using actions/mutations you will have it updated everywhere, and therefore your page will look responsive.
Related
I'm building a notes taking Vue app.
The note being edited is auto-saved every X secods.
Every time it auto saves, I want to show a small message on the bottom of the screen saying "Note Saved". This will fade in stay for 2 seconds and then fade out automatically.
I've done transitions in Vue before but not on-off transitions like this.
I can set a property linked to the element with v-if wrapped in a transition block. But then I need to change the property twice (true-false)? Would I need to set up a timer to wait the transition to be over before setting it to false again? Seems a bit hackish. What's the best way to approach this?
I think what you've described with v-if makes sense... you could change the property (or data) in a v-on:enter method on the related component. This would nicely isolate the behavior to the component and be pretty apparent to future-self.
A completely different approach would be defining a single animation with keyframes that transitions from hidden to display to hidden, but that might be somewhat confusing: what is the leave transition of an element with such an enter transition? Hmm.
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I've figured out how to create an Overlay, center it, and set it's bodyContent to be an existing from my page. So far so good - now I want to make the transition happen smoothly over 1 full second instead of instantaneously.
The examples I've seen indicate that one must know the initial and final positions, but in this case, I don't know them, since I'm just saying:
overlay.set('bodyContent', Y.one('#node'));
overlay.set('centered', true)
I've created a jsbin at http://jsbin.com/ovuxan/5/edit that shows the issue.. (my transition is whacky to say the least) and would appreciate some help in making it smoother.
You can use the WidgetAnim plugin to do this for you. It can be cleaner since the animations are stored in the plugin and invoked by the widget's hide/show functions.
I have quickly used the plugin to animate your overlay here: http://jsbin.com/ohafec/1/edit
Helpful links:
Overlay: Animation Plugin (YUI Blog)
Plugin.WidgetAnim Class
There is a problem with sencha touch 2.
I am trying to understand how can I implement the same functionality which provides navigation view in sencha touch 2, but ....
Each item of the 'Ext.NavigationView' component should have it's own unique set of 'navigationBar' elements. I mean set of buttons, for example.
I know that I can do something like this:
this.getMain().getNavigationBar().rightBox.removeAll();
this.getMain().getNavigationBar().rightBox.add(this.getSettingButton());
//where 'getSettingButton' predefined by me a button
And do this action each time when 'push' event happens (clear 'navigationBar' and add appropriate set of buttons)
Of course, I even can implement 'Ext.Panel' with 'layout: card' and set of 'Ext.panel' elements in the 'items' property, each of which will be have unique 'toolbar'.
To control the behavior I can use 'setActiveItem' method.
But, I think each of these approaches is a bit weird, isn't it?
I expected that would be much more natural approach to implement it.
Most likely I don't know what I need. Confirm my doubts. What is the best way to do it.
Currently, Ext.NavigationView tends to perform navigation between "simple" views. "Simple" here means that your views are just panel with innerHTML, not the "complicated" ones with functional buttons, toolbars, etc.
As far as I know, there're 2 ways you could try:
If you still want to use Ext.NavigationView, you can customize your NavigationBar with titles, items (buttons, spacers, etc.) as normal components through navigationBar config, getter and setter.
(recommended) If your views are completely different from each other, you should use many Ext.Container with different items of your choice (for eg. first container with simple HTML announcement, second one with some extra Ext.Button, and so on). Simple use animateActiveItem() for animated navigation. This way is much more flexible, I suppose.
I'd like to create something like this:
I can make a custom controller (maybe using a `NSCollectionView ) but it's a lot of work. Does anyone know a library or workaround in Cocoa?
The basic Cocoa machinery for the typical app is NSPredicate (to filter your content), and an NSPredicateEditor control.
To get fancy (have the field grow and shrink, pushing content down as rules are added), you'll need to manage / animate the views yourself as predicates are added / removed. You'll observe the view for frame changes adjust/animate the "search filter" view in your app to push down the content, etc.
Even fancier: If too many rules are added, there won't be any more room for content, so you'll need to figure out a sane limit, at which point you stop growing the view and let scrolling take over.