Polymer Chip-To-Card Pattern with Core-Animated-Pages and a Long List

Polymer Chip-to-Card Pattern with core-animated-pages and a Long List

To make the transitions work smoothly, you need to first disable the core-animated-pages from scrolling.

core-animated-pages {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

And then of course you need to set the list section to be scrollable again.

<section style="overflow:scroll">
    <div class="chip-container" hero-p on-tap="{{transition}}">

That's it! Please see this JSFiddle for reference.

Polymer core transitions for animated pages with core list content

First, there's no slide-from-left transition. You will need to remove everything related to it in your code.

I have found that the hero-transition doesn't work well with slide-from-right transition. A possible alternative would be, wrap those two paper-fabs in another core-animated-pages.

    <core-animated-pages id="pages" selected="{{selected}}"
                         transitions="slide-from-right"
                         on-show-snooze="{{showSnooze}}" on-show-inbox="{{showInbox}}"
                         content
                         layout vertical flex>
        <inbox-editor scrolltarget="{{$.panel.scroller}}" flex>
        </inbox-editor>
        <snooze-editor scrolltarget="{{$.panel.scroller}}" flex>
        </snooze-editor>
    </core-animated-pages>
</core-scroll-header-panel>

<core-animated-pages selected="{{selected}}" transitions="hero-transition" style="position:absolute; bottom:48px;">
    <section>
        <paper-fab class="fab-yellow" icon="add" hero hero-id="primary"
                   on-tap="{{showSnooze}}">
        </paper-fab>
    </section>

    <section>
        <paper-fab class="fab-red" icon="done" hero hero-id="primary"
                   on-tap="{{showInbox}}">
        </paper-fab>
    </section>
</core-animated-pages>

Please see this jsbin for reference. Notice that the paper-fabs move just like they are animated with a slide transition ('cause hero-transition animates the shape and position between elements, in this case, the animation transition should look identical to a slide one)! So maybe, you don't need to apply the hero-transition at all?

Polymer scrolling issue

core-header-panel provides a scroller property which gives you access to the internal scrolling div. From there, you can use vanilla JS to scroll it (using scrollTop).

document.querySelector('#mainContainer').scroller.scrollTop = 0;

Flickering when using neon-animated-pages with Polymer

Found two more sources on github with the same issue and solutions.

1. Apparently only slide left/right animation are affected. Using a different animation should help.
2. Set Element.prototype.animate = null before loading the polyfill.

Flicker after slide animation in neon-animated-pages in Chrome

web-animations-next-lite flicker #86

hero transition background disappears

Another workaround I found is to add an id and a bit of CSS to the core-animated-pages component.
My core-animated-pages looks like this :

<core-animated-pages selected="{{page}}" transitions="hero-transition"
                         on-core-animated-pages-transition-end="{{complete}}">
    <section id="mini">
        <div class="chip-container" hero-p on-tap="{{transition}}">             
            ...
        </div>
        <div class="chip-container" hero-p on-tap="{{transition}}">
            ...
        </div>
    </section>
    <section id="details">
        ...
    </section>
</core-animated-pages>

Nothing special, I just have two lines of "chips". Note the id on the "chip-container container", it's the one that enables us to do some css modification directly in components/core-animated-pages/core-animated-pages.css. Those modifications are the following :

/*
Enables us to keep the "chip-container container" visible even after the hero transition
*/

*#mini {
display: block !important;
}

/*
Fades out the "chip" that realized a transition ([active] and .core-selected are removed
from the "chip-container container" during the transition)
*/

*#mini *[hero] {
opacity: 0 !important;
}

/* 
Fades in the "chip" when everything goes back to it's original state ([hero] isn't 
removed from the chip, but [active] and .core-selected are re-set on the "chip-container
container", so we use this to distinguish wish state we're in, and so if it's "legit" to 
see the "chip") 
*/

*#mini[active] *[hero] {
opacity: 1 !important;
}

Might not be the cleanest way but it works, I hope I explained well enough how I managed to achieve this result, and every tiny part of my solution. Feel free to comment / ask if that's not the case :)

Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget

After a quick googling around I found that adding -webkit-transform: translateZ(0); to paper-fab element fixes it to the viewport.

Working jsbin

Related question: position:fixed not working in Google Chrome

I have no idea why this happens, the only vaguely relevant bug that I found is https://code.google.com/p/chromium/issues/detail?id=420534 but it's the other way round: it's about transform: translateZ(0); on parent element that makes its children scrolling and not fixed.

Needed: Wrappable Counter where and do the right thing

I think you're talking about handling the wraparound of the number circle correctly. It's quite easy, actually.

This doesn't do precisely what you said (not sure why you have that "exception" interval), but:

typedef unsigned short uint16_t;
typedef signed short int16_t;
// abstract out 16-bit types in case "short" doesn't correspond to 16bits

bool isEarlier(uint16_t a, uint16_t b)
{
   int16_t diff = a-b;
   return diff < 0;
}
bool isLater(uint16_t a, uint16_t b)
{
   int16_t diff = a-b;
   return diff > 0;
}

edit: this has a "branch point" at diff=-32768, so that if a=5 and b=32772, diff=-32767 which is less than 0 and hence 5 is "earlier" than 32772. If a=5 and b=32774, diff=-32769=32767 which is greater than 0 and hence 5 is "later" than 32774. This defines "earlier" and "later" in the sense of (a) the simplest math, and (b) because wraparound counters can be interpreted as having multiple solutions mod 65536, it picks the solution of a and b that are "closest" to each other with respect to the number circle.

If a and b differ by 32768 then they are equally far apart and the simple math is used to pick easiest... this "violates" the antisymmetric property of "earlier" and "later" in the sense that isLater(5,32773) is true and isLater(32773,5) is also true. But how do you know whether "5" represents a count of 5, or "5" represents a count of 65541? (just as abs(-32768) == -32768 gives an odd nonsensical answer) If you wish to maintain antisymmetry e.g. isLater(b,a) == isEarlier(a,b), then you can always do this:

bool isLater(uint16_t a, uint16_t b)
{
   int16_t diff = b-a;
   return diff < 0;
}

If you wish to bias the branch point in one direction to happen at -32768+K, then use this instead:

bool isEarlier(uint16_t a, uint16_t b)
{
   int16_t diff = a-b-K;
   return diff < -K;
}
bool isLater(uint16_t a, uint16_t b)
{
   int16_t diff = b-a-K;
   return diff < -K;
}

This no longer uses closest; if, for example, K=12768, and a=5, then for b=6,7,8,9,... 20005, isEarlier(a,b) and isLater(b,a) will be true, and for b=20006, 20007, ... 65534, 65535, 0, 1, 2, 3, 4, 5 isEarlier(a,b) and isLater(b,a) will be false.

You have a particular choice of intervals which is different from the rationale I use with wraparound numbers. The functions defined here would not meet your needs as stated, but I find those choices of interval a little peculiar. Perhaps you could explain how you determined them?

Google Keep-like Layout with Polymer

There's likely a number of ways you can go, probably best you just try some things & find the approach you like. To help get started I think some of the core-animated-pages demos would help. Here are a couple that you may be able to leverage to get sort of close to your design:

https://www.eecs.berkeley.edu/~gongliang13/polymer/polymer-tutorial-master/components/core-animated-pages/demos/grid.html

https://www.eecs.berkeley.edu/~gongliang13/polymer/polymer-tutorial-master/components/core-animated-pages/demos/music.html

---

Related Topics