How to show the indeterminate progress bar on top of the page while Winjs.UI.ListView fetching the data. Is there any built in feature to show the progress in Winjs?
Let's say the method where you fetch your daya is getData().
function getData(){
var progress = document.createElement("progress");
document.getElementById("someDiv").appendChild(progress); //we have created and appended an undetermined progress bar.
//do the data fetching, and, when it's over and ítems have been asigned to the ListView remove the progress element from the div.
}
Otherwise, in HTML:
<progress></progress>
Related
Is there a way to avoid reset the carousel after the user zoom in/out the browser page?
I found pages with similar carousel and this behaviour doesn't happens.
Go to spartacus demo website https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en/USD/, in the carousel navigate to the next block of slide, then zooming the page, you should see the carousel reset to the first block of slides.
This behaviour of the CarouselComponent is expected. Its service depends on window.resize event to adjust the number of items on carousel page whenever the window got resized.
If you consider it as a bug, please create an issue in the Spartacus GitHub repository. Team will take your proposal into consideration.
There is one way this can be handled.
In DOM, instead of using Spartacus's activeSlide variable for rendering the UI, use one tempVariable named say tempActiveSlide
Reassign the tempActiveSlide only if the items per slide are changing. This count will change whenever the window resizes and which is as per the functionality of CarouselService.
Ref - https://sap.github.io/spartacus/injectables/CarouselService.html#source
This way, the carousel on UI will only reset if the number of items per slide have changed. Otherwise it wont reset.
TS code:
tempActiveSlide;
itemsPerSlide = 0;
ngOnInit(): void {
super.ngOnInit();
this.tempActiveSlide = this.activeSlide;
this.size$.subscribe((items) => {
if (items !== this.itemsPerSlide) {
this.itemsPerSlide = items;
this.tempActiveSlide = this.activeSlide;
}
});
}
I have a ScrollView containing messages (most recent messages are further) in a chat application.
I limit the number of pre-loaded messages, and I dynamically load a new batch when the Scroll View is scrolled to the top. So when new messages are loaded, the current scrollPos is at 0.
The problem is that when the new messages arrive, the scrollPos stays at 0, so the user is teleported to the oldest newly loaded message.
I have tried to deal with it by manually scrolling back down to the position using the size of the content change, but this is not satisfying as the user sees a back and forth scrolling.
Can someone think of a way to do this so that the user does not see any change when the new messages appear an can simply gradually scroll up to see them.
I found a way to do it.
The idea comes from the Invertible Scroll View component: https://github.com/expo/react-native-invertible-scroll-view
I didn't use the component but implemented the idea directly on the Scroll View to have minimal changes in my code.
To explain, we translate vertically the Scroll View using the style of the Scroll View and transform: [{ scaleY: -1 }]. We do the same for the children. Then, we revert the order of the messages.
In that setup, the scrollPos() measures from the visual bottom. To trigger the loading of the new messagges, now I use
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
const paddingToBottom = 20;
return layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom;
};
The trick is that now, when the new messages appear on top, you have nothing to do as the distance from the user's point of view to the bottom does not change.
You can use the onContentSizeChange prop to scroll to the bottom anytime it detects a change in content size.
The scrollToEnd function may differ depending on RN version.
<ScrollView
...
onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}>
</ScrollView>
Ref: https://reactnative.dev/docs/scrollview#scrolltoend
I apologize if this question is somewhat ambiguous. I have noticed that with Geb elements won't be scrolled into view if said element is off the page and needs to be scrolled to using an "internal" scroll bar
by "internal" scroll bar I am referring to scroll bars that are nested within a given webpage, detached from the global webpage's scroll bar.
When I attempt to grab an element that is off the page due to this internal scroll bar, geb returns a null object (geb couldn't find the element on the page)
I have done a few different hacks that manually scroll these internal scroll bars, but I was wondering if Geb provided any funcionalty to handling these nested scrollbars.
Here is a code snippet to show how I handle finding a given row:
class TabledModule extends Module {
static content = {
headers {$(By.xpath("//lane-group-header"))}
table {$(By.xpath("//div[#class=',y-class']"))}
}
Navigator getAllRows(){
return table.children()
}
Navigator getRow(String text){
return table.children().find{it.text().contains(text)}
}
Navigator getRow(int index){
return table.children()[index]
}
}
from my script:
getAllRows() //returns 50 which it should (only 20 are displayed)
def row = getRow(45) //returns a navigator as it should
row.click() //successfully clicks the correct row
def row2 = getRow("someString") //returns null when the row is off the page this is the problem and I'm wondering now if it is a bug, since getting the row by index seems to work fine.
For this module only about 20 of the 50 rows are shown to show the other rows you have to scroll through a nested scroll bar to get to them. the row I want to access is found lower on the list so it requires scrolling to access it.
what's interesting is that getAllRows().size() returns the correct number of rows: 50, but when I call getRow for a row that's off the page, it returns null. If the same row is found at the top of the list then it works. it only returns null if it needs to be scrolled to.
So I found out what my issue was. If I grab an element off screen with index instead of string. Geb is able to grab the navigator and is able to click on said navigator, but if the element is off the screen, then GEB is unable to get text on the element. to fix this I implemented this method.
Navigator getRow(String text){
JavascriptExecutor jse = (JavascriptExecutor)browser.driver
for(int x = 0; x<getAllRows().size();x++){
def row = getRow(x)
WebElement element = row.firstElement()
jse.executeScript("arguments[0].scrollIntoView(true);", element);
if(row.text().contains(text)){
return row
}
}
return null
}
I am passing an element ID using the location hash like so:
https://example.com/object/id#sub-object
However, the list of sub-object elements is loaded dynamically from an api after page load.
How can I scroll the viewport to the given element once the async request completes? Given that it's location is not available in the DOM on page load.
I solved this myself, I used jquery for the scroll animation because, easy.
if(window.location.hash && !this.hasScrolled){
var hash = location.hash.substring(1);
$('html, body').animate({scrollTop: this.$refs[hash][0].offsetTop -200} ,800);
this.hasScrolled = true;
}
This had to happen in the updated() hook on the component as this is the point when the element's offset is known. I added a hasScrolled property (initially set to false) so I can make sure it only does the scroll on initial page load.
I have a form panel and i have added a tabpanel to it. Tab Panel has 2 tabs. When the form panel is loaded the first tab's grid loads fine but when i click on the second tab i do see the grids but data is not loaded by default. But it does refresh with data When i click on the grid header.
Below is the piece of code that i use to load the grids from controllers.
var store = this.getDeficiencyDeficiencyStoreStore();
store.on('load',function() {
var accountDeliverySettingsGrid = Ext.getCmp('accountDeliverySettingsGrid');
accountDeliverySettingsGrid.reconfigure(model.allQuartesListStore);
accountDeliverySettingsGrid.getView().refresh();
})
Any help/suggestions/advice is appreciated.
I finally figured this out. I had to use event: activate to explicitly invoke refresh method to get the grids loaded. Below is the piece of code.
listeners: { activate: function(tab)
{ //alert("Put Your Logic Here");
Ext.getCmp('accountDeliverySettingsGrid').getView().refresh();
Ext.getCmp('compositeRelationship').getView().refresh();
}