polycardwar-components-card-resize.js

Polymer({
        is: 'card-stack',
        behaviors: [Polymer.IronResizableBehavior],
        listeners: {
          "iron-resize": "resized"
        },
        resized: function() {
          var height = this.offsetHeight - 2;
          var stackWidth = this.offsetWidth - 2;
          if (height > 0) {
            var calcWidth = height * 64 / 89;
            if (calcWidth < stackWidth / 2) {
              //cards will fit when fanned out, 1/4 of width showing for up to 4 cards, then full 5th card
              this.cardHeight = height - 2;
              this.cardWidth = calcWidth - 2;
            } else {
              //calc width and height to fit inside parent box
              this.cardHeight = stackWidth / 2 * 89 / 64 - 2;
              this.cardWidth = stackWidth / 2 - 2;
            }
            console.log('For stack ' + stackWidth + 'x' + height + ', setting cards to ' + this.cardWidth + 'x' + this.cardHeight);
          }
        }
      });