When a state describes a view rendered in a modal/popup, we ideally want the user to only navigate away from it through offered options i.e Save or Cancel buttons.
The back button presents a real issue when you design your application with states in mind and you use modals to render views in certain states (New, Edit ...).
Is there a way to hack into the states history to prevent, when desired, landing in a state through the back button.
Related
I'd like to automate a video-player on a webpage using Selenium in Python.
I cannot locate the interactive parts of the player with driver.find_element_by_... I've decided to try and accomplish this by making browser specific logic that knows how to navigate the page and player via keyboard navigation (count tabs for Chrome, vs Safari, vs Firefox, etc.).
driver.find_element_by_tag_name('body').send_keys(Keys.TAB))
I am able to select each of the controls of the player with tab (play/pause, current position, mute-volume control, full-screen, and additional options) and have had moderate success manipulating the player's controls with ActionChains once selected with TAB navigation
actions = ActionChains(driver)
actions.send_keys(Keys.DOWN) # to reduce volume or
actions.send_keys(Keys.LEFT) # to rewind playback
An example of something that doesn't work as expected with this method is sending a Key.SPACE to the MUTE button when selected. Instead the space is applied as a page navigation action and scrolls down the page like pressing page down. I'm looking for a method that either makes the controls work as expected when manually navigating the page with a keyboard, ex. space on highlighted object interacts and would normally mute the video in this context, or a workaround that lets me accomplish the same thing. To that end I was thinking if I could get the windows coordinates of the TAB selected object within the video-player and simply perform a click that would at least let me interact with the control.
Also if I'm going about this all the wrong way let me know. Thanks!
What you're really looking for is how to navigate the Shadow DOM. Those are the web elements inside the video player.
I answered how to reach inside the Shadow DOM in an other question, albeit for Java. However the principle is the same.
You can read the whole thing at the link, but the basics are you create a "starting point" WebElement at the Shadow DOM via JavaScript, then all future look-ups reference it:
WebElement button = startingPoint.findElement(By.cssSelector("..."));
I have an app in which user can edit a product and make some changes. When user clicks the edit button, then it opens up a dialog. User can go through multiple windows and do some changes. After which, user can click save or cancel the edit action. In case of cancelling the action, I want to rollback the dirty attributes. I am using below code to do the same but somehow, some of the changes do get rollbacked while other don't. Can anyone point out if their is an issue? (below is my code for reference)
cancelAction() {
if (this.get('isEditMode') && this.get('model').get('hasDirtyAttributes')) {
this.get('model').send('becomeInvalid');
this.get('model').rollBackAttributes();
}
I suggest following approach:
Make a copy of model each time before opening a modal
When user makes change, work with copy
If user clicks "save", update original model and persist it.
If user clicks "cancel", no action needed.
This allows to worry less about reverting attributes and provides better user experience.
There is a good addon for managing changes on ember-data model:
ember-data-change-tracker.
Currently ember-data don't track changes in object, json, custom types.
Ember-data-change-tracker support these types.
I am looking for the best way to update a CPropertyPage once it is clicked. Currently, my pages receive it's information during OnInitDialog(). However, when the user does something on page one, it can effect what is on page two.
The only solution I can think to use is an "Update" button. Once the button is clicked, the page refreshes its information by calling the same functions that take place during OnInitDialog(). Is there an event that occurs when the user clicks on a different CPropertyPage of a CPropertySheet?
Using an "Update" button is poor design because it requires the user to force the update. Instead, you should look to maintain the state of the values that could cause the update. This can be done in a structure or class object that can then be made accessible to CPropertyPage::OnSetActive of the page that needs the updated values. OnSetActive is called just before the page is to be made the active one. It's your opportunity to update values on the page before it displays.
I'm trying to rebuild a basic app in Famo.us (including it's magic of course). The problem I have is while creating the navigation. Every guide I've seen it only updates the content of the same Surface. In famo.us you can create a navigation but I think it would get very difficult to keep track of the history as the HTML5 history API does. Also the "back" button of Phonegap implement this functionality so it's something we should consider. At last, not less the Angular/Famo.us doesn't include a Router. So my question is, How should we be implementing a navigation system using Famo.us?
You are going to need (well... need...) to use hashbangs for this, or at least, that's how I'm doing it. You're basically using window.location.hash to do the navigation and editing this (even in a browser), does not trigger a page reload but just sends an event to notify the app that the hash has changed, and then you can let the app act on it. Changing the hash also adds a history element, so window.history can be used to navigate to the previous (or next) page(s)!
This is also (sort-of) the way www.famo.us does it:
http://www.famo.us/university/lessons/#/famous-101/displaying/4
I'm working with a design that has a couple of sections on a single state, and I'd like to be able to link to each section individually.
Is there a way I could render a single template with no outlets at a base level, and then trigger a scroll when transitioning into any of the sub routes?
Additionally, is there a way I could prevent a transition from altering the browsers history, so I could transition around states as the user scrolls without forcing them to hit back several times to escape the page?
The main application template must have an outlet. Else you won't be able to render anything unless you want to do manual rendering with {{render}}. You could put some logic in the template to use with {{render}} but it seems overkill to avoid the convenience of {{outlet}}
You can model your state as a sub state with routes like, post, post/new, post/delete which correspond to routes nested in a post resource.
But, I don't think you can selectively use a route and not affect the url. You can only set the location to none to turn off location changes completely.
I'd just make sure the UI has a contextual back button that takes the user back to the previous state, skipping over states as necessary. So users don't have to rely on the browser's back button too much.