CODEWITHSUNDEEP
javascriptpolymer
Jonathan Andersson
Jonathan Andersson

Reputation: 1422

Polymer change the icon in paper-icon-button onclick

Using Polymer 1.0

I'm trying to change an paper-icon-button's (Polymer) icon on click. Can't get it working.

I've done this so far.

<paper-icon-button class="expandComments"  
 icon="{{isCollapsed? 'expand-more' : 'expand-less'}}" on-click="expanding">
</paper-icon-button>

'expand-more and 'expand-less' is the icons i want to use.

Created function:

created: function() {
  this.isCollapsed = true;
},

Expanding function: 

 expanding: function() {
  var content = this.$.review_item_content;
  if(content.classList.contains('review-item-content')) {
    this.isCollapsed = false;
    content.classList.remove('review-item-content');
  }else{
    this.isCollapsed = true;
    content.classList.add('review-item-content');
  }
},

it gets to the expanding function and changing the value of isCollapsed and removes the style class.

Now I've also tried this one:

<paper-icon-button class="expandComments" icon="{{expandIcon}}" on-click="expanding"></paper-icon-button>


icon: {
  expandIcon: 'expand-more',
},

created: function() {
this.isCollapsed = true;
},

expanding: function() {
  var content = this.$.review_item_content;  

  if(content.classList.contains('review-item-content')) {
    this.icon.expandIcon = 'expand-less';
    this.isCollapsed = false;
    content.classList.remove('review-item-content');
  }else{
    this.icon.expandIcon = 'expand-more';
    this.isCollapsed = true;
    content.classList.add('review-item-content');
  }
},

Upvotes: 1

Views: 3642

Answers (2)

Scarygami
Scarygami

Reputation: 15549

Expressions like x ? y : z aren't (yet) supported in Polymer 1.0

You will need to use a computed binding instead, something like:

icon="{{_icon(isCollapsed)}}"


Polymer({
 properties: {
   isCollapsed: {
     type: Boolean,
     value: true
   }
 },
  _icon: function (isCollapsed) {
    return isCollapsed ? 'icon1' : 'icon2'
  }
});

Changing the value of isCollapsed will then re-evaluate the function automatically and set the icon value accordingly.

Edit: since _icon won't be called as long is isCollapsed is undefined, you would have to initialise it with a default value (see the properties object in the edited code above).

Upvotes: 2

Jonathan Andersson
Jonathan Andersson

Reputation: 1422

After the solution posted by Scarygami, there was still an problem. isCollapsed was still undefined even if it was set in created and therefor the icon image wasn't loaded on start.

Solution: Polymer global variables 

 <paper-icon-button class="expandComments" icon="{{_icon(isCollapsed)}}" on-click="expanding"></paper-icon-button>

<script>

(function() {
 var isCollapsed = true;

 Polymer({

  is: 'edit-review',

  properties: {
  reviews: Object
  },

  _icon: function (isCollapsed) {
  return isCollapsed ? 'expand-more' : 'expand-less';
  },

  ready: function() {
   this.isCollapsed = isCollapsed;
  },

  expanding: function() {
   var content = this.$.review_item_content;
   if(content.classList.contains('review-item-content')) {
    this.isCollapsed = false;
    }else{
    this.isCollapsed = true;
   }
  },
});
})();
</script>

Upvotes: 0

Related Questions