image viewer

components.assessment-quiz.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
  	const titleImage = {src: 'http://placekitten.com/300/300'};
    const optionImages = [
    	{src: 'http://placekitten.com/300/100'},
      {src: 'http://placekitten.com/300/200'},
      {src: 'http://placekitten.com/300/300'},
      {src: 'http://placekitten.com/200/300'}
    ];
    this.setProperties({
      titleImage,
      optionImages
    });
  },  
  actions: {
  	openModal(image) {
    	this.set('isModalOpen', true);
      this.set('selectedImage', image);
    },
  	closeModal() {
    	this.set('isModalOpen', false);
    }    
  }
});

components.media-viewer.js

import Ember from 'ember';
import { tryInvoke } from '@ember/utils';

export default Ember.Component.extend({
  actions: {
  	dismiss() {
    	tryInvoke(this, 'closeModal');
    },
    selectImage(image) {
    	this.set('selectedImage', image);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

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

.backgroud {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: calc(100vh - 200px);
	background-color: rgba(0,0,0,0.6);
}

.dismiss-btn {
  font-size: 20px;
  color: white;
  position: absolute;
  right: 10px;
  border: none;
	background-color: transparent;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	height: 100px;
  background-color: rgba(0,0,0,0.7);
}

.header-img {
	height: 90%;
}

.option-list {
  list-style-type: none;
  display: flex;
  height: 100%;
  padding: 0;
  margin: 0;
}

.option-item-container {
  height: 100%;
  margin-right: 20px;
}

.option-item {
  height: 90%;
}

.center-image-container {
	display: flex;
	align-items: center;
  justify-content: center;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
	height: 100px;
  width: 100%;
  background-color: rgba(0,0,0,0.7);
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{assessment-quiz}}
<br>
<br>

templates.components.assessment-quiz.hbs

<img src={{titleImage.src}} {{action "openModal" titleImage}}>
<br>
  	<ul class="option-list">
    	{{#each optionImages as |option|}}
      	<li class="option-item-container">
        	<img src={{option.src}} class="option-item" {{action "openModal" option}}>
        </li>
      {{/each}}
    </ul>
    
{{selectedImage.src}}    
{{#if isModalOpen}}
  {{media-viewer
    closeModal=(action "closeModal")
    titleImage=titleImage
    optionImages=optionImages
    selectedImage=(mut selectedImage)
  }}
{{/if}}

templates.components.media-viewer.hbs

  <header>
  	<button class="dismiss-btn" {{action "dismiss"}}>x</button>
  	<img src={{titleImage.src}} class="header-img" {{action "selectImage" titleImage}}>
  </header>
  
  <section class="backgroud center-image-container">
  	<img src={{selectedImage.src}}>
  </section>
  
  <footer>
  	<ul class="option-list">
    	{{#each optionImages as |option|}}
      	<li class="option-item-container">
        	<img src={{option.src}} class="option-item" {{action "selectImage" option}}>
        </li>
      {{/each}}
    </ul>
  </footer>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}