Foundation 6 drilldown menu: add back event to custom button - zurb-foundation

The default js-drilldown-back button is not the way I like it.
Instead of having an entire li element for the back functionality I would like to trigger the back event on a custom element.
How to achieve this?
The documentation is everything but clear to me on how to do it: https://get.foundation/sites/docs/drilldown-menu.html#_back
$('#element').foundation('_back', $elem);
What is #element and what is $elem in this context?

For the time being I created an (ugly) workaround:
I let foundation render the default back button but I hide it via css.
My custom back button then triggers that button's event:
$('.drilldown .back').on('click', function(){
$(this).closest('.submenu').find('.js-drilldown-back > a')[0].click();
});
Not great, not terrible.

Related

Android navigation component- With Login screens

When dealing with login screens, I am trying to work out the better approach - either execute navigation "action" to go to login fragment on first use (and hide back button to actual app), or start a new login activity (with its own nav graph). For the first approach (just using navigation components), I do not know the way to remove the back button without a hack "hide". I tried using navoptions, setpopupto etc., but it does not work. Code below:
val navOptions = NavOptions.Builder()
.setPopUpTo(R.id.home_fragment, true)
.build()
host?.navController?.navigate(R.id.action_global_signUpFragment_dest, null, navOptions)
Two questions then:
1) How to properly handle login transition with just navigation component?
2) Is starting a new login activity, with separate nav graph, a better idea?
I think the first approach is better.
To hide the 'back' button on your toolbar inside signUpFragment you can use AppBarConfiguration, and customize which destinations are considered top-level destinations.
For example:
val appBarConfiguration = AppBarConfiguration.Builder(setOf(R.id.home_fragment, R.id.signUpFragment_dest)).build()
NavigationUI.setupWithNavController(toolbar, navController, appBarConfiguration)
This way home_fragment and signUpFragment_dest will be considered top-level destinations, and won't have back button on toolbar.
Another option for solving the back button problem is how I did it here. Also, rather than show/hide the bottom nav bar, I have two NavHostFragment, one main full screen one, and one contained within the home fragment (above the bottom nav bar).
When I want to navigate to a full screen view I call this extension function,
fun Fragment.findMainNavController(): NavController =
Navigation.findNavController(activity!!, R.id.nav_host_fragment)
then navigate via the main graph.
This makes sense conceptually to me, to have parent and child nav graphs.

IgGrid - How to connect custom feature chooser to the grid?

In my project I use igGrid from ignite-ui. In headers of columns there are gears. If user clicks gear then a popover apears (feature chooser). My task is to implement custom feature chooser - when user clicks on the gear then my custom feature chooser should apear instead of the built-in feature chooser.
I know how to implement the custom feature chooser and options like sorting, grouping, column moving etc. The problem is that I can't find out how to overwrite the gear click event.
You'll have to find the gear icons and unbind mousedown event to prevent feature chooser to pop up.
After that you can bind to mousedown using custom handler to show the custom feature chooser.
rendered: function(e, ui) {
ui.owner.headersTable()
.find("a[data-fc-button]")
.off("mousedown")
.on("mousedown", (e) => {
//open your own featurechooser here
});
},
Here's a fiddle to demonstrate this - http://jsfiddle.net/dkamburov/da276b5w

Repositioning Master View display button in Split View Controller

As you know, split view controller hides the master view and displays detail view in full screen mode in ipad. In the full screen mode, ios creates a bar button for the master view on the navigation bar. My question is, is it possible to reposition that button to the far right instead of left? Because my detail view is embedded inside a navigation view controller and there are severals views associated with it. It gets confusing when master view is hidden and the detail view has button to go back to the previous view.
In above screencap, "Category" is a button to display the masterview and "List of Events" is a back button. If you have better way to handle this situation, please feel free to suggest.
Yes, you can do it just send a NotificationCenter.default to the split view controller and change self.preferredDisplayMode in your splitview and coming to moving the category buttom u either can use the right bar button in navigationbar or create your custom navigation bar.
Hope this helps
For those who are having the same issue, I found a very simple solution. All you need to do is assign the rightBarButtonItems with leftBarButtonItems value and set the leftBarButtonItems to nil. Voila, that's about it.
if let leftButton = self.navigationItem.leftBarButtonItems {
self.navigationItem.rightBarButtonItems = leftButton
self.navigationItem.leftBarButtonItems = nil
}

Ember: How to access element when action happens?

I am new to Ember and I am not sure how to do things the Ember way so I turn to you.
My problem:
I have a sidebar, I created a View for it. I have two buttons on the sidebar for the moment. I added an action for each button on it. I am not sure if I should handle it on controller or on view. I want on clicking one of these button, a new view to be inserted that would open a pop up menu and also the button that called the action to remain in a selected state.
I am not very sure how to do this. I tried to target the view with the action but I can't have access to the target element or at least I don't know how to access it (tried this.$()).
What way do you suggest to follow?
User 'actions' are handled with methods on a Controller or a Route. You should put them in an actions hash:
App.MyController = Ember.ObjectController.extend({
actions: {
doSomething: function() {
// do it here
}
}
});
Ember manipulates the DOM and inserts views automatically based on resources and routes. If you don't want to use the router, you can manually control the view hierarchy, but I'd suggest getting more familiar with Ember routing before you try manual views.
If I were you, I'd create a Component that handled the button. You will have a reference to the DOM element in the didInsertElement callback: http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement

ZK how to remove waiting actions

I have an textbox with onChange method and button to make some actions. But if I type some thing in textbox and not clicking any where , click that button, It calls onClick method and then onChange method.Or first onChange and then OnClick but I should disable all actions after that onChange method.
Add the check to your onClick() method. The onChange() for a text box is fired after a certain period of time or after you deselect your component. If you deselect your component by clicking on a button it sounds pretty natural to me to get the onClik first and then the onChange. There is no way of controlling (as far as I know) these events, except on server side.
Read this !
Keep in mind that you are developing a WEB application and not a Desktop Application. And event if the development of zk applications may look pretty similar to the desktop applications they are not and they have their limitations.
I found solution :
First for Textbox onFocus method I disable next button , and user cant click it.
Second for Textbox onBlure method I enable next button. (To be fired onBlure action user should click somewhere on window or press tab and this fires onChange action)