Polymer: Style Parent Element from dom-repeat data item

0
votes

I'm pretty new to Polymer, and am developing a small Web-App to display staff members who have entered or exited the building using their electronic tags.

Currently, they are all displaying in a list, with text that says "Entered at hh:mm" or "Exited at hh:mm".

I would like to be able to grey out the avatar and reduce the elevation of the "staff-card" element.

I have a my-list element that uses iron-ajax to acquire the data and then a dom-repeat template which iterates through and displays a staff-card.

<iron-ajax
  auto
  url="../../api/database.json"
  handle-as="json"
  last-response="{{ajaxData}}"
  debounce-duration="300">
</iron-ajax>

<template is="dom-repeat" items="[[ajaxData]]">
  <staff-card>
      <img src="{{computeAvatar()}}">
      <h2>{{item.FirstName}} {{item.Surname}}</h2>
      <p>{{setLocation(item.lastknownlocation)}} {{prettyTime(item.LastAccessTime.date)}}</p>
  </staff-card>
</template>

My staff-card element looks like this:

<paper-material elevation="2">
  <div class="card-header" layout horizontal center>
    <content select="img"></content>
    <content select="h2"></content>
    <content select="p"></content>
  </div>
  <div style="clear:both;"></div>
</paper-material>

So, if the item.lastknownlocation is "outside" I want to reduce the elevation of the paper-material in my staff-card and set the img to be grayscale. (I have the css for this, just not the means to apply it)

1
javascriptjqueryhtmlcsspolymer-1.0

1 Answers

0
votes

Parent Element

<iron-ajax
  auto
  url="../../api/database.json"
  handle-as="json"
  last-response="{{ajaxData}}"
  debounce-duration="300">
</iron-ajax>

<template is="dom-repeat" items="[[ajaxData]]">
  <staff-card src="{{computeAvatar()}}" header="{{item.FirstName}} {{item.Surname}}" location="{{setLocation(item.lastknownlocation)}}">
  </staff-card>
</template>

Staff Card (notice paper-material is set to ANIMATED so that elevation can be dynamically updated)

<dom-module id="staff-card">
  <template>
    <style>
    </style>
    <paper-material animated id="paper" elevation="{{computeElevation(location)}}">
      <img src="{{src}}">
      <h2>{{header}}</h2>
      <p>{{location}} {{time}}</p>
    </paper-material>


  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'staff-card',

        properties: {
          src: {},
          header: {},
          location: {},
          time: {},
        },
        computeElevation: function(location) {
          console.log(location);
          if (location.isOutside()) {
            return 1;
          } else {
            return 5;
          }
        },

      });
    })();