Skip to content

Instantly share code, notes, and snippets.

@jenweber
Created November 1, 2019 22:49
Show Gist options
  • Save jenweber/6f33ffdc55e35b4e1dc8d80f2ff2e4ac to your computer and use it in GitHub Desktop.
Save jenweber/6f33ffdc55e35b4e1dc8d80f2ff2e4ac to your computer and use it in GitHub Desktop.
Multiple ember-animated beacons
<div class="grid-container">
<div class="left-col">
<h1>Customize the style of the {{@cardName}} Card</h1>
<div class="display-wrapper">
{{yield}}
</div>
<style id="card-styles"></style>
</div>
<div class="right-col">
<div class="code-panel-heading">
CSS Editor
<Hint @beaconName="csshint">
Edit the code below to add some styles! For example, type
<code> font-size: 24px;</code>
or
<code>color: #0000FF;</code>
inside some of the brackets, and see your Card update automatically.
</Hint>
</div>
{{code-editor
language="css"
code=this.css
onChange=(action (mut this.css))
theme="vs-dark"
onReady=(action "editorReady")
}}
<div class="code-panel-heading">
HTML Viewer
<Hint @beaconName="htmlhint">
Use this to look up the classes and HTML elements you could write CSS styles for.
If you need to make changes to this, visit the Card Builder page instead.
</Hint>
</div>
{{code-editor
language="html"
code= this.markup
theme="vs-dark"
readOnly=true
}}
</div>
<div style="position: absolute; top: 0; left: 0;">
{{animated-orphans}}
</div>
</div>
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import scale from 'ember-animated/motions/scale';
import move from 'ember-animated/motions/move';
export default class HintComponent extends Component {
@tracked showHint = false;
@action
toggleHint() {
this.showHint = !this.showHint
}
* transition ({ insertedSprites, keptSprites, removedSprites, beacons }) {
for (let sprite of insertedSprites) {
let beaconName = sprite.element.dataset.beacon
sprite.startAtSprite(beacons[beaconName]);
move(sprite);
scale(sprite);
}
for (let sprite of keptSprites) {
move(sprite);
scale(sprite);
}
for (let sprite of removedSprites) {
let beaconName = sprite.element.dataset.beacon
sprite.endAtSprite(beacons[beaconName]);
move(sprite);
scale(sprite);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment