bubble.html

<div class="bubble" id="{{itemID}}">

  <!-- Toggle -->

  <div class="bubble--toggle" ng-show="toggle === true && types.length > 1">
  
    <div ng-repeat="type in types" ng-click="$parent.current = type"
         class="bubble--toggle--button"
         ng-class="{selected: $parent.current==type}">
      {{type}}
    </div>
    
  </div>


  <!-- Person -->

  <div class="bubble--photo" ng-if="person" ng-show="current === 'Person'"
       ng-style="{'background-image' : 'url(' + person['schema:image'] + ')' }"
       data-name="{{person['schema:givenName']}}" data-type="Person">
    
    <div class="bubble--label">
      {{person["schema:givenName"]}} {{person["schema:familyName"]}}
    </div>

  </div>


  <!-- Place -->

  <div class="bubble--photo" ng-if="place" ng-show="current === 'Place'"
       ng-style="{'background-image' : 'url(' + place['schema:image'] + ')' }"
       data-name="{{place['schema:name']}}" data-type="Place">
    
    <div class="bubble--label">
      {{place["schema:name"]}}
    </div>

  </div>


  <!-- Product -->

  <div class="bubble--photo" ng-if="product" ng-show="current === 'Product'"
       ng-style="{'background-image' : 'url(' + product['schema:image'] + ')' }"
       data-name="{{product['schema:name']}}" data-type="Product">
    
    <div class="bubble--label">
      {{product["schema:name"]}}
    </div>

  </div>

  <!-- Organization -->

  <div class="bubble--photo" ng-if="organization"
       ng-show="current === 'Organization'"
       ng-style="{'background-image' : 'url(' + organization['schema:logo'] + ')' }"
       data-name="{{product['schema:name']}}" data-type="Organization">
    
    <div class="bubble--label">
      {{organization["schema:name"]}}
    </div>

  </div>

  <!-- Service -->

  <div class="bubble--photo" ng-if="service"
       ng-show="current === 'Service'"
       ng-style="{'background-image' : 'url(' + service['schema:logo'] + ')' }"
       data-name="{{product['schema:name']}}" data-type="Service">
    
    <div class="bubble--label">
      {{service["schema:name"]}}
    </div>

  </div>

</div>