Maintain scroll position when going back and using query params - ember.js

I'm working on an application that has a listing of events and each event has its own detailed show page. Everything seems fine, but one complaint I've received is that we're not maintaining the scroll position when going from the detail page back to the index listing.
For an example of the ideal behavior, go to http://discuss.emberjs.com/, scroll down the page a ways, click a link, then click the back button. You're brought to same place you were previously at, somewhere further down the page.
With our app, if you try to do this, you're brought back to the top of the page while the results are reloaded from the API. Then when the results load, your position is lost.
Is there a way to achieve what Discourse does while using query params?

Related

Selenium webdriver - Find coordinates of tab navigated video player element for interaction

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("..."));

differentiate betwwen forward and backward navigation on a page Ionic2

How can I differentiate that whether a page comes into view from forward or backward navigation. I want to run some code only if it is forward navigation.
CASE 1 :- Say you are navigating from 1 page to another - Forward. I.e. using navCtrl.push(Page,params).
Here, you can put your code in constructor(){}. Code in your constructor always gets executed when you push/navigate to a page - Forward. (Rather than push, you can also reset the stack to a rootpage. This is valid then also.)
CASE 2 :- Say you are navigating back from a page - Backward. I.e. manually going back by user in the app or using navCtrl.pop().
Here, I think, there is NOT any in-built way to recognise if you have navigated on a back page. Here you need to build your own logic.
For e.g, PageA -> PageB is your navigation. I have used localStorage variable to set to some value, (e.g localStorage.setItem('isPushed',true)) when navigating from PageA -> PageB.
Now, in PageA I have written this code using ionViewWillEnter():
ionViewWillEnter(){
if(JSON.parse(localStorage.getItem('isPushed')){
localStorage.setItem('isPushed',false);
// Your Code to be executed when entering to back page.
}
}
ionViewWillEnter() always gets executed when the particular page is navigated. So, my idea here is just to detect if it is navigated from a next page to a back page. Hope this helps. :)
NOTE : I have not handled all the conditions related to this. That you have to work it out. This is just an idea of logic to use.

Expected usage of Page Editor's Experience date

I'm trying to understand the expected author experience in Page Editor when working with multiple versions of pages. If an author sets the date on the Experience tab to set a page in the future, it sticks and stays that way when opening other pages in Page Editor. We have authors who are opening the page in Page Editor and not seeing the content they expect because of the date setting. Is it expected that they have to manually manage this date when going from page to page? This seems very cumbersome.
More specific info: The specific issue we're having has to do with the fact that there appears to be no way to reset the button back to its default ( automatically showing the current date/time on each page load). If you manually set it back to "now" it sticks at that point in time. We have situations where authors attempt to get back to "now" by setting the date/time to the current date/time. This works for that moment, but then when they make a change to a page (causing a new version to be created with the current date/time as it's publishing restriction) and save, they're changes appear to disappear on save because the "now" they manually set in Page Editor is no longer now.
We're in the middle or rolling out workflow and this scenario is causing mass confusion with our authors.
Is there a way to reset it to automatic? Could I somehow create a custom button to do this?
My understanding is this feature works this way to allow you to preview the site and navigate it around it as if it was another date in the future. If you had to reset it every time you went to a new page, that flow would be very cumbersome.
You are just finding the other side of the cumbersome because it is being used for an alternative flow.

emberjs back key leaves some display from child route

To see the problem, please run the following in browser by clicking the arrow shown in upper right corner of of output panel.
http://jsbin.com/uVORASe/4/edit?html,js,output
Click one of the links (either strategy-1 or strategy-2) to display output generated by the child template. Then click back button on browser. When the back button is clicked, browser shows the parent URL as expected. But parts of the child display remains on screen. This process repeats every time a child route is visited. Why? Going back to the parent route should just display strategy-1 and strategy-2 on the left side.
I don't think this is an Ember-Data issue because problem also happens when I tried Ember-Model. I think use of the bootstrap classess has something to do with this. For example, if I take away the bootstrap table-responsive class, Ember throws an error.
Any ideas to explain what's going on?
The close tag of your <table> tag is wrong. You are using </table the expected is </table>.
http://jsbin.com/UKONORI/1/edit

How to keep scrollbar from automatically going back to the top?

I have a list of links within a div with a scrollbar. When the user clicks on a link below the x-height of the div, the srollbar automatically goes back to the top. I would like the scrollbar to stay in position no matter what links the user clicks. Here is the site- try clicking on a painting from 2006 and you'll see what I mean.
Does anyone have any ideas of how I can make this scrollbar behave?
Thanks,
Brad
It looks like these links are just that, links to a new page... and thus it's not so much that the scrollbar is resetting but that a whole brand new page is coming up and the 'reset' scrollbar is just a byproduct.
The most elegant way would be to have those links pull in the new content without reloading the page, but this requires AJAX. If you aren't familiar with the intricacies of AJAX and how to implement that, then you could change the link to include an anchor to the link, like so:
http://siddharthparasnis.com/2006-01/#menu-item-377
The page would reload scrolled down to that item.