Entity Card - v3

components.cards.actions-menu.bookmark-action.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  
  classNames: ['actions-menu__item'],

  actions: {
    bookmark() {
      Ember.tryInvoke(this, 'onBookmark');
    }
  }
});

components.cards.actions-menu.js

import Ember from 'ember';

export const actionTypes = {
  bookmark: 'bookmark',
  share: 'share',
  markAsDone: 'markAsDone',
};

export const apiActionTypes = {
  bookmark: 'BOOKMARK',
  share: 'SHARE',
  markAsDone: 'MARK_AS_DONE',
}

export default Ember.Component.extend({  
  classNames: ['actions-menu'],
  
  primaryActions: undefined,
  secondaryActions: undefined,
  
  allActions: Ember.computed.union('primary', 'secondary'),
 
  allowedActions: Ember.computed.filter('allActions', function(actionType) {
    return this.isAllowedAction(actionType);
  }),
  
  withActions: Ember.computed('allowedActions.[]', function() {
    return this.get('allowedActions').reduce((accum, actionType) => {
      accum[actionType] = true;
      return accum;
    }, {});
  }),
  
  init() {
    this._super(...arguments);
    
    this.withMore = this.getWithDefault('secondary', []).filter((actionType) => {
      return this.isAllowedAction(actionType);
    }).length > 0;
  },
    
  isAllowedAction(actionType) {
    const apiAction = apiActionTypes[actionType];
    return this.get('entity.actions').indexOf(apiAction) > -1;
  },
});

components.cards.actions-menu.mark-done-action.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',

  classNames: ['actions-menu__item'],

  actions: {
    markDone() {
      Ember.tryInvoke(this, 'onMarkDone');
    }
  }
});

components.cards.actions-menu.more-menu.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNames: ['actions-menu__item'],
  
  showMore: false,

  actions: {
    toggle() {
       this.toggleProperty('showMore');
    },
  }
});

components.cards.actions-menu.share-action.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  
  classNames: ['actions-menu__item'],
  
  actions: {
    share() {
      Ember.tryInvoke(this, 'onShare');
    }
  }
});

components.cards.content.entity-byline.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.content.entity-duration.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.content.entity-parent.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.content.entity-skills.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.content.entity-type.js

import Ember from 'ember';

export default Ember.Component.extend({
  entityLabels: {
    course: 'COURSE',
    video: 'VIDEO',
    learningPath: 'LEARNING PATH'
  }
});

components.cards.detail-card.entity-attribution.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.detail-card.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['detail-card'],

  entity: undefined,
});

components.search-card.js

import Ember from 'ember';
import { actionTypes } from './cards/actions-menu';

export default Ember.Component.extend({
  primaryActions: [actionTypes.bookmark, actionTypes.share],
  secondaryActions: [actionTypes.markAsDone],

  actions: {
    didBookmark() {},
    
    didShare() {},

    didMarkAsDone() {},
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({    
  entities: [
    {
    	title: 'Decision-Making Strategies',
      contentType: 'course',
    	actions: ['BOOKMARK', 'SHARE'],
      authors: [{ name: 'Todd Rodgers' }],
      duration: '45m',
  	},
    {
    	title: 'HTML resources',
      contentType: 'video',
    	actions: ['BOOKMARK', 'MARK_AS_DONE'],
      authors: [{ name: 'Todd Rodgers' }],
      parent: {
        title: 'How to do the things you want' 
      },
      duration: '4m 30s',
  	},
    {
    	title: 'Bowling for Idiots',
      contentType: 'learningPath',
    	actions: ['SHARE', 'MARK_AS_DONE'],
      skills: 'Bowling, Dancing',
  	},
  ]
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('entity');
});

export default Router;

routes.entity.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.detail-card {
  display: flex;
  margin-bottom: 16px;
  max-width: 400px;
}

.detail-card__title {
  margin: 0 0;
  font-size: 1rem;
}

.detail-card__media {
  flex: 0 0 auto;
  width: 100px;
  height: 64px;
  background-color: #ccc;
  margin-right: 16px;
}

.detail-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detail-card__body-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-card__meta {
  flex: 1 1 auto;
}

.detail-card__actions {
  flex: 0 0 auto;
}

.detail-card__label,
.detail-card__content,
.detail-card__meta {
  font-size: .85rem;
}

.actions__more-menu {
  list-style-type: none;
  margin: 0;
}

.actions-menu__item {
	margin: 0;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.actions-menu__more-menu {
  position: absolute;
  right: 0;
}

  

templates.application.hbs

<h1>Entity Card</h1>

{{#each entities as |entity|}}
  {{search-card entity=entity}}
{{/each}}

templates.components.cards.actions-menu.bookmark-action.hbs

<button {{action "bookmark"}}>Bookmark</button>

templates.components.cards.actions-menu.hbs

{{yield (hash
  share=(if withActions.share
  	(component "cards/actions-menu/share-action" entity=entity))
  bookmark=(if withActions.bookmark
  	(component "cards/actions-menu/bookmark-action" entity=entity))
  markAsDone=(if withActions.markAsDone
  	(component "cards/actions-menu/mark-done-action" entity=entity))
  more=(if withMore
  	(component "cards/actions-menu/more-menu"))
)}}

templates.components.cards.actions-menu.mark-done-action.hbs

<button {{action "markAsDone"}}>Mark As Done</button>

templates.components.cards.actions-menu.more-menu.hbs

<button {{action "toggle"}}>More</button>
{{#if showMore}}
  <ul class="actions-menu__more-menu">
    {{yield}}
  </ul>
{{/if}}

templates.components.cards.actions-menu.share-action.hbs

<button {{action "share"}}>Share</button>

templates.components.cards.content.entity-byline.hbs

By: {{authors.0.name}}

templates.components.cards.content.entity-duration.hbs

{{duration}}

templates.components.cards.content.entity-parent.hbs

From: {{parent.title}}

templates.components.cards.content.entity-skills.hbs

Skills: {{skills}}

templates.components.cards.content.entity-type.hbs

{{get entityLabels entityType}}

templates.components.cards.detail-card.entity-attribution.hbs

{{#if entity.parent}}
  {{cards/content/entity-parent
    parent=entity.parent}}
{{else if entity.authors.length}}
  {{cards/content/entity-byline
  	authors=entity.authors}}
{{/if}}

templates.components.cards.detail-card.hbs

<div class="detail-card__media">{{yield (hash isMedia=true)}}</div>
<div class="detail-card__body">
  <div class="detail-card__body-main">
    <div class="detail-card__label">{{yield (hash isLabel=true)}}</div>
    <h3 class="detail-card__title">{{yield (hash isTitle=true)}}</h3>
    <div class="detail-card__content">{{yield (hash isBody=true)}}</div>
  </div>
  <div class="detail-card__body-footer">
    <div class="detail-card__meta">{{yield (hash isMeta=true)}}</div>
    <div class="detail-card__actions">{{yield (hash isActions=true)}}</div>
  </div>
</div>

templates.components.search-card.hbs

{{#cards/detail-card 
  entity=entity
  as |cardArgs|
}}
  {{#if cardArgs.isLabel}}
    {{cards/content/entity-type entityType=entity.contentType}}
  {{/if}}

  {{#if cardArgs.isTitle}}
    {{link-to entity.title "entity"}}
  {{/if}}

  {{#if cardArgs.isBody}}
    {{cards/detail-card/entity-attribution entity=entity}}
  {{/if}}    

  {{#if cardArgs.isMeta}}
    {{#if entity.duration}}
    	{{cards/content/entity-duration duration=entity.duration}}
    {{else}}
    	{{cards/content/entity-skills skills=entity.skills}}
  	{{/if}}
  {{/if}}

  {{#if cardArgs.isActions}}
    {{#cards/actions-menu
      entity=entity
      primary=primaryActions
      secondary=secondaryActions
      as |menuArgs|
    }}
    	{{menuArgs.bookmark onBookmark=(action "didBookmark")}}
    	{{menuArgs.share onShare=(action "didShare")}}
    	{{#menuArgs.more}}
       	{{menuArgs.markAsDone onMarkDone=(action "didMarkAsDone")}}
      {{/menuArgs.more}}
    {{/cards/actions-menu}}
  {{/if}}
{{/cards/detail-card}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.10.0"
  }
}