Skip to content

Instantly share code, notes, and snippets.

@1276stella
Last active August 1, 2019 08:40
Show Gist options
  • Save 1276stella/4ca45a2274e0f0042cdee180964f6870 to your computer and use it in GitHub Desktop.
Save 1276stella/4ca45a2274e0f0042cdee180964f6870 to your computer and use it in GitHub Desktop.
image viewer
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);
}
}
});
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);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
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);
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{assessment-quiz}}
<br>
<br>
<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}}
<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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment