googlechromelabs / ui-element-samples Goto Github PK
View Code? Open in Web Editor NEWA collection of prototyped UI elements
Home Page: https://googlechromelabs.github.io/ui-element-samples
License: Apache License 2.0
A collection of prototyped UI elements
Home Page: https://googlechromelabs.github.io/ui-element-samples
License: Apache License 2.0
Leaving this here in case anyone knows. I'm trying to make the sc-router element using custom elements v1 spec. When I go to change routes I get "router.go is not a function at HTMLAnchorElement.onClick" and refers to this: https://github.com/GoogleChrome/ui-element-samples/blob/gh-pages/router-advanced/static/app.js#L27
Not sure why it's working in v0 and not v1. Is there a different way to write .go() in v1? Here's my code:
class scRouter extends HTMLElement {
constructor() {
super();
this._onChanged = this._onChanged.bind(this);
this._routes = new Map();
}
static get is() { return 'sc-router'; }
_onChanged () {
const path = window.location.pathname;
const routes = Array.from(this._routes.keys());
const route = routes.find(r => r.test(path));
const data = route.exec(path);
if (!route) {
return;
}
// Store the new view.
this._newView = this._routes.get(route);
// We don't want to create more promises for the outgoing view animation,
// because then we get a lot of hanging Promises, so we add a boolean gate
// here to stop if there's already a transition running.
if (this._isTransitioningBetweenViews) {
return Promise.resolve();
}
this._isTransitioningBetweenViews = true;
// Assume that there's no outgoing animation required.
let outViewPromise = Promise.resolve();
// If there is a current view...
if (this._currentView) {
// ...and it's the one we already have, just update it.
if (this._currentView === this._newView) {
// No transitions, so remove the boolean gate.
this._isTransitioningBetweenViews = false;
return this._currentView.update(data);
}
// Otherwise animate it out, and take the Promise made by the view as an
// indicator that the view is done.
outViewPromise = this._currentView.out(data);
}
// Whenever the outgoing animation is done (which may be immediately if
// there isn't one), update the references to the current view, allow
// outgoing animations to proceed.
return outViewPromise
.then(_ => {
this._currentView = this._newView;
this._isTransitioningBetweenViews = false;
return this._newView.in(data);
});
}
go (url) {
window.history.pushState(null, null, url);
return this._onChanged();
}
addRoute (route, view) {
if (this._routes.has(route))
return console.warn(`Route already exists: ${route}`);
this._routes.set(route, view);
}
_addRoutes () {
let views = Array.from(document.querySelectorAll('sc-view'));
views.forEach(view => {
if (!view.route)
return;
this.addRoute(new RegExp(view.route, 'i'), view);
}, this);
}
_removeRoute (route) {
this._routes.delete(route);
}
_clearRoutes () {
this._routes.clear();
}
connectedCallback() {
window.addEventListener('popstate', this._onChanged);
this._clearRoutes();
this._addRoutes();
this._onChanged();
}
disconnectedCallback () {
window.removeEventListener('popstate', this._onChanged);
}
}
window.customElements.define(scRouter.is, scRouter);
In the infinite scroller demo, if you scroll down so as to load more content and then scroll upwards using a "fling" type of gesture (OS X trackpad, but probably using touch input as well on other platforms), the fling gets aborted and the scroll comes to an abrupt halt. This was filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1280330 but is not considered a Gecko bug. What's happening is that the demo sets the scroller's scrollTop explicitly once the new content is loaded, and that will cause the fling animation to abort. In this case Chrome prioritizes the user's fling over the JS setting the scrollTop, so the demo works as intended in Chrome.
I made a reduced test case to isolate the problem, you can find it here:
https://gist.github.com/staktrace/08e1bea08d99c0288ba3fcbb4bd16050
In this test case, there is a big scrollable page, and 100ms after a wheel event the JS just sets the scrollTop to the current value + 1. In Firefox if you do a fling using the OS X trackpad, it will go for 100ms and then abruptly stop and scroll by 1 pixel at a time. In Chrome the same JS runs, but the fling isn't aborted. It's not clear to me which behaviour is more "correct" but it's certainly a difference between the two browsers that is tripped by this demo.
I was having issues in Safari and Firefox when testing the Advanced Router. It wasn't firing the xhr but is was firing _showSpinner(). For some odd reason when I changed new DocumentFragment()
to document.createElement('div')
it works in all the browsers I tested.
I know that DocumentFragment has performance benefits so I attempted to do
if (new DocumentFragment()) {
this._view = new DocumentFragment();
}
else {
this._view = document.createElement('div');
}
This worked in Chrome but still didn't work in Safari or FF. It appears that DocumentFragment is well supported so I'm confused by the xhr won't fire in those browsers if DocumentFragment is being used. I've shown here where I've changed the code to work in the browsers. Anyone have a thought on why this occurs and possibly how to fix it?
Is there a Mozilla person reading this?
If I run npm install webcomponents.js --save
and add <script src="/node_modules/webcomponents.js/webcomponents-lite.js"></script>
to the header (just before the <title>
element in static/header.partial.html
), the app also runs with JavaScript in Safari 9.1.3, IE11, and Edge. However Firefox 49 gives a 404 trying to load /node_modules/webcomponents.js/webcomponents-lite.js
. Why?
I am considering of using the techniques shown in these samples, but in order to do so in production I have certain compatibility requirements.
I just tried the samples in IE9 and nothing works.
It would help if the README would show in which browsers these examples would work and whether it is possible to use the techniques shown in older browsers with some tweaking.
Wild horizontal scrollbar appears because of text-indent: -10000px;
on the flip buttons.
Possible Solution:
Add overflow hidden to the .front and .back div
sc-card .front,
sc-card .back {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
overflow: hidden; /* <- here */
}
Side effect:
On certain (medium sized) displays, there are now no scrollbars. But if the card reaches its max size when animating and the cards gets now bigger than the viewport a vertical scrollbar appears (only for the short time the card is bigger than the viewport). This leads to a "jumping/jiggle effect" because the viewport is now narrower (width of scrollbar) than before.
Possible Solution:
Always show the horizontal scrollbar.
body {
overflow-x: hidden;
overflow-y: scroll;
}
I am trying to use the infinite scroll tutorial to allow efficient scrolling on a matrix widget I wrote. However, it uses absolute positioning on the infinite scrolling nodes it creates. My nodes are table rows and columns. That takes all of the cells out of table flow. Is there an easy way to modify the infinite scroller to calculate the layout without absolutely positioning nodes? I see the section in the post about using absolute positioning to stay scrolling at 60 fps, however, I cannot make absolute positioning work for me. Could you possibly give me some hints on how to modify the layout calculations to work without it?
Love this menu!
How do I do to make the menu open on mobile by only (touch) drag from the left (start of screen) and to the right. So it work like an native menu function.
Thanks for a super menu!!
Best regards,
/Erik
npm install
in the server-side-rendering demo isn't working. I believe it's the trailing ,
on line 12. Removing it fixed it for me.
My new package.json
{
"name": "server-side-rendering",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"express": "^4.14.0",
"handlebars": "^4.0.5",
"spdy": "^3.4.0",
"http2": "^3.3.5",
"mz": "^2.4.0"
},
"devDependencies": {}
}
As the repository has been moved from GoogleChrome
to GoogleChromeLabs
, the example URL doesn't work anymore.
Please change from
https://googlechrome.github.io/ui-element-samples
to
https://googlechromelabs.github.io/ui-element-samples
Index.js in public never gets executed in FF for me. Is this working for anyone in FF?
Tested only on Chrome V54 - Windows 10.
When you first load the page, everything works fine. But as soon as you reduce the height of the browser window, white space starts showing up everywhere. Same problem doesn't happen when resizing horizontally.
If I run stream-progress
with simplehttp2server
v3.1.2, it fails with
dial.js:47 Uncaught (in promise) Error: Percentage must be a number between 0 and 1.
at HTMLElement.set percentage [as percentage] (dial.js:47)
at fetch.then (stream.js:94)
at <anonymous>
A closer look tells me that Number.isNaN(_percentage)
is true
.
However if I run stream-progress
with python -m SimpleHTTPServer
it works as it did in the video.
I'm running on a MacBook with MacOS 10.11.6 and Chrome Canary 60.0.3105.0.
It seems that unintentionally swipe in from the left has been implemented, although not perfectly. I noticed that even if the nav is hidden swiping on the empty page does still make it appear and follow the pointer.
This might be due to the fact that sideNavEl
takes the entire size of the page and the touch move listener does not check if the side nav is open.
Is this true and can this be fixed by using
if (!this.sideNavEl.classList.contains('side-nav--visible'))
return;
in the onTouchMove?
At the moment you can tab into the drawer and focus the close button when it's offscreen. Setting it to visibility: hidden will hide it from both keyboard and screen reader navigation.
I am getting this error how can i get rid of it?
I'm a fairly new to react world and just found out about progressive webapps, this ui-element samples performance is amazing on mobile (Native like) I was wondering how would i use these in reat. Any suggestions or links to guide would be greatly appreciated.
Hey there, was wondering if you could provide more documentation on how to use this? I understand I could parse through all the code to figure it out instead, but thought it might be nice to provide some references.
Hello!
First of all great work with this repo, I really enjoy exploring these samples and watching the accompanying videos. Keep up the excellent work!
I love the idea of reusing DOM elements in the infinite scroller to boost performance. It did occur to me however that this might be incompatible with screen readers.
Ideally, the scroll container should have an aria-live="polite"
attribute. How to trigger new content is open for debate, but maybe a visually hidden button would do the trick?
If the touchdown happens on a card, the code captures it; but if the touchdown is outside a card on the background, it works.
I've been wrestling with this all day. If I put simple text inside then it shows the content. But if I add any html inside it won't show, unless it's the initial load of the page. I've been tinkering with _loadView in SCView. If I console out const newView
it will show with all of the HTML properly inside. It appears that it's breaking down somewhere in:
newView.childNodes.forEach(node => {
this._view.appendChild(node);
});
this.appendChild(this._view);
Has anyone else experienced this?
If you change the durations of transform transitions it will be evident that onTransitionEnd
removes the event listener and stops animation on opacity transition.
Just put an console.log(evt)
in onTransitionEnd and it will be clear.
Solution
this.transitionEndProperty = null;
this.transitionEndTime = 0;
showSideNav () {
this.sideNavEl.classList.add('side-nav--animatable');
this.sideNavEl.classList.add('side-nav--visible');
this.detabinator.inert = false;
this.transitionEndProperty = 'transform';
this.transitionEndTime = time_to_show_side_nav; // 0.33 in our code
this.sideNavEl.addEventListener('transitionend', this.onTransitionEnd);
}
hideSideNav () {
this.sideNavEl.classList.add('side-nav--animatable');
this.sideNavEl.classList.remove('side-nav--visible');
this.detabinator.inert = true;
this.transitionEndProperty = 'transform';
this.transitionEndTime = time_to_hide_side_nav; // 0.13 in our code
this.sideNavEl.addEventListener('transitionend', this.onTransitionEnd);
}
if (evt.propertyName != this.transitionEndProperty && evt.elapsedTime!= this.transitionEndTime){
return;
}
// reset those parameters once we find the correct transition
this.transitionEndProperty = null;
this.transitionEndTime = 0;
this.sideNavEl.classList.remove('side-nav--animatable');
this.sideNavEl.removeEventListener('transitionend', this.onTransitionEnd);
now it will work fine
Sometimes when closing the menu the overlay disappears without the menu closing, and then on the following click it appears without the menu. Unsure how to recreate it, it just seems to happen after a few clicks. I assume theres a point where both classes are active or missing.
I've fixed this as well as a few linting issues and remove the need for two functions to display the menu.
Ive attached the gif of the issue, apologies for the quality.
Unable to preventDefault inside passive event listener invocation.
https://github.com/GoogleChrome/ui-element-samples/blob/gh-pages/side-nav/side-nav.js#L94
Create a gh-pages branch, I was about to send a pull request, but the branch must exists in the original project, to do so!
Tested with Safari and Chrome on iPhone 6
If I scroll too fast, the older request has not yet been completed, will it be requested in sequence? For example, if I scroll from 2 to 5, will components request 2,3,4 in order or directly request 5 of the data?
When the user opens the side nav it would be nice to move focus to the first link in the nav and trap keyboard focus so the user can't accidentally tab out. I believe @addyosmani did a version of this in his MDL drawer for smaller.pictures. Could maybe swipe the codez?
Path of stylesheet and javascript are wrong.please chnage it
The generation of the stylesheet for the keyframes takes almost 200ms
I tried saving the contents into a separate file, but it is ~3MB non-gzipped!
This could probably be reduced to half by using animation-direction.
Prerequisites:
Browsers:
Repro:
Update: An even better fix would be if when scrolling the side-hav all touch events for the page content are blocked.
I'm using web components in the router to display a couple of buttons, such as . On safari and firefox, when I route in the page with those they appear and behave as I expect with all the styles. (Just like you see when you go to this page: example)
If you use chrome to go directly to the page (example) then you'll see it appear and behave normal. BUT, if you go to another page first (like this one) and use the side-nav to go to the buttons page, they don't appear correctly.
Since this is only happening in Chrome and not Safari, FF, etc. could it be a Chrome bug? Maybe to do with how the nodes are being brought in?
Is there any reason for not canceling animation frame inside update function? Do we need to keep it calling update function?
I noticed when you enter the accordion using VoiceOver it announces "tab 1 of 1", whereas it should say "tab 1 of 4".
I think there are a couple issues:
tablist
can only contain tab
children. Putting tabpanel
inside tablist
breaks everything. However the Authoring Practices Guide says "Contained within the tablist is a set of tab/tabpanel pairs." So that's a little confusing. cc @MichielBijl to confirm if tabpanel
must live outside tablist
.tabpanel
should go on the .content
divssc-pane
should have role=presentation
I think the final structure would be something like:
<sc-accordion>
<sc-tabs role="tablist">
<sc-pane role="presentation">
<button role="tab" aria-controls="panel1">Panel 1</button>
</sc-pane>
...
</sc-tabs>
<sc-panel id="panel1" role="tabpanel">Lorem ipsum...</sc-panel>
...
</sc-accordion>
Hi,
I'd like to extend the infinite-scroller example for reverse infinite-scrolling, as is arguably more natural for chat-like applications where you start with the latest messages at the bottom of the list.
Any guidance on how to modify/extend the existing code to support this use case?
Cheers, Markus
The cards present an interesting challenge because there isn't a great analog for them in existing browser semantics.
Some things I was considering...
Can the cards be made out of a ul and li instead of divs? That way the screen reader would announce how many cards are in the list. Alternatively I think you could give the parent div a role of list
and the children a role of listitem
.
Can the cards be made focusable. Maybe adding a hint with an aria-label that they can be deleted either by swiping or pressing the esc key.
According to can I use, requestIdleCallback
is not supported in Safari/WebKit. Maybe use a shim?
This is great looking implementation though, thank you for all the hard work here.
Maybe it's some wrong with the image loading, and it will create chaos of the img.
After I created a project with infinite-scroller, there was a problem about distance of list items. Some of the list items were very close, some of it was far away, some of it even overlapped. I felt that the Y axis offset(translateY) in the list item was wrong, but demo was right, so I'd like to ask, what's the possible reason for this problem?
Wheel scrolling or keyboard scrolling the infinite scrolling sample moves very slowly on Firefox. I think it's a bad interaction with smooth scroll and setting the scroll position in case sizes have changed. It's not a performance problem, the scroll is quite fast if you drag the scrollbar.
Have to pass {passive: false} in the touch event listeners
Would it be a lot of work to start using anchors and pushState so we can load page 5 straight away. Even with Javascript turned off?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.