googlechromelabs/ui-element-samples

A collection of prototyped UI elements

UI Elements

A collection of UI element samples written with vanilla web platform features.

Please note: these are prototypes, and not production-ready. The aim is to demonstrate a solid approach for building performant UI elements.

Getting started

1. Clone the repo.
2. Open an element's subfolder.
3. Run index.html

ES2015 and ES5 Transpilation

Please note: these samples are written in ES2015 and, as such, require direct browser support. You can transpile the examples with BabelJS:

babel --presets=es2015 swipeable-cards/cards.js --out-file swipeable-cards/cards-es5.js
babel --presets=es2015 side-nav/side-nav.js --out-file side-nav/side-nav-es5.js

But to keep things as simple as possible for everyone, that's out of scope for this set of samples.

License

Copyright 2015 Google, Inc.

Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Please note: this is not a Google product

ui-element-samples's Issues

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

Have to pass {passive: false} in the touch event listeners

Update examples URL

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

Consider managing focus in the side nav

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?

Accordion doesn't work in screen readers

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:

• It seems like in VoiceOver a 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.
• The tabpanel should go on the .content divs
• sc-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>

Advanced Router - HTML in sc-view not appearing

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?

Advanced Router - Web Components do not render properly in <sc-view>

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?

Uncaught TypeError: document.registerElement is not a function at sc-view.js:100

router-advanced : Uncaught TypeError: document.registerElement is not a function at sc-view.js:100

Set drawer to `visibility: hidden` when offscreen

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.

Consider polyfill for 'requestIdleCallback'

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.

How would i use these in React app? (question not an issue)

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.

Absolute position on infinite scroll nodes breaks table flow

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?

SC-Router router.go not a function (custom elements v1)

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);

Advanced Router - DocumentFragment() not supported in Safari and Firefox?

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?

Documentation on how to use?

ui-element-samples/parallax/scripts/parallax.js

Line 18 in 5490755

function initializeParallax(clip) {

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.

Swipe-right on touchscreen laptops triggers Chromes previous-page function.

Simply swiping to the right (for instance while moving the side-nav) moves the current page aside revealing the previous one, even if preventDefault is called on TouchStart. Is there any way to disable it?

Infinite Scroller: reverse infinite scrolling?

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

Horizontal scrollbar on "3D Card Flip"

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;
}

Scrolling up on touch device leaves blank "gap" in side nave at the bottom of the page

Prerequisites:

• Two or more pages of content so that when you scroll-up, the chrome in Chrome dissapears.

Browsers:

• Safari on iOS 9.3.4 (iPhone 5S)
• Chrome 52.0.2743.84 on iOS 9.3.4 (iPhone 5S)

Repro:

1. Load the side-nav page
2. Tap hamburger icon
3. Scroll-up side-nav and notice the "gap" at the bottom. This gap is as big as the chrome in Chrome. It's as if the bottom part of the side-nav isn't being repainted while scrolling.

Update: An even better fix would be if when scrolling the side-hav all touch events for the page content are blocked.

Infinite scroller scrolls very slowly by wheel or keyboard on Firefox

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.

Sometimes when closing the menu the overlay disappears without the menu closing

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.

animated-clip: creating the stylesheet with keyframes takes too long

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.

Consider adding aria-live="polite" for infinite scroller.

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?

We might need to cancel requestAnimationFrame in swipeable-cards/cards.js

Is there any reason for not canceling animation frame inside update function? Do we need to keep it calling update function?

we have a question about asynchronous request data issues?

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?

Prettify gh-pages

Drag from left to right open menu

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

It is unclear what the compatibility is of these samples

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.

Swipeable Cards and Side Nav are not working on iOS

Tested with Safari and Chrome on iPhone 6

GH-Pages

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!

Horizontal scrolling with swipable cards

When I load all the data, how to make the components do not scroll?this question is about infinite-scroller

Scrolling doesn't work with swipable cards

1. Open https://googlechrome.github.io/ui-element-samples/swipeable-cards/ in Android Chrome
2. Start scrolling down by touching

If the touchdown happens on a card, the code captures it; but if the touchdown is outside a card on the background, it works.

Infinite Scrolling, Adding anchor tags for SEO?

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?

firebase-firestore-comments: FF issue

Index.js in public never gets executed in FF for me. Is this working for anyone in FF?

side-nav implementation executes transitionend on wrong transitions (bug + solution)

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

1. Add to class variables to constructor

    this.transitionEndProperty = null;
    this.transitionEndTime = 0;

2. Change showSideNav() to

  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);
  }

3. Change hideSideNav() to

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);
  }

4. Change 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

Swipeable cards a11y

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.

Infinite scroller has jitter on iOS

smfr, webkit's compositing/scrolling expert, indicated there is some jitter on iOS with the demo, at the moment.

cc @surma @flackr

server-side-rendering demo pacakge.json npm install error

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": {}
}

server-side-rendering and Firefox 404 error

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?

Parallax: background problem when reducing window height

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.

Add the gh-pages link to the project's url

Cannot read property 'bind' of undefined

I am getting this error how can i get rid of it?

Path mistake in Router part ||

Path of stylesheet and javascript are wrong.please chnage it

stream-progress: _percentage NaN

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.

3d card flip not working on Safari

https://googlechrome.github.io/ui-element-samples/3d-card-flip/

Infinity Scroll: some mistakes in calculating the items height and the items transform

Maybe it's some wrong with the image loading, and it will create chaos of the img.

sidenav - Unable to preventDefault inside passive event listener invocation.

Unable to preventDefault inside passive event listener invocation.

https://github.com/GoogleChrome/ui-element-samples/blob/gh-pages/side-nav/side-nav.js#L94

Flings on infinite scroller demo get aborted in Firefox

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.

We have a question about infinite-scroller?

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?

Odd behaviour on touch move

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?