Skip to content

Instantly share code, notes, and snippets.

@acdn-sglanzer
Last active August 18, 2022 14:06
Embed
What would you like to do?
New Twiddle
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { task } from 'ember-concurrency'
export default class extends Component {
@task * highlight() {
document.querySelector(this.args.target)?.classList.add('highlight')
yield new Promise((resolve) => setTimeout(resolve, 1))
document.querySelector(this.args.target)?.classList.add('transition')
}
@action dismiss() {
document.querySelector(this.args.target)?.classList.remove('highlight', 'transition')
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.highlight {
position: relative;
}
.highlight::before {
/* Highlight color */
background-color: #46b96c;
content: "";
position: absolute;
width: 0%;
opacity: 0%;
height: 60%;
left: -2px;
bottom: 0;
z-index: -1;
transform: rotate(-1deg);
transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
}
/* #header {
background: red;
padding: 10px 0;
position: relative;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
left:0;
} */
/* #header.transition {
background: green;
left: 50px;
} */
.highlight.transition::before {
width: calc(100% + 4px);
opacity: 100%;
}
.target {
margin-top: 100px;
font-size: 3rem;
}
<Highlighter @target='[data-test="target"]'>
Term
</Highlighter>
<div class='target' data-test='target'>
Target
</div>
<div ...attributes
{{on 'mouseenter' (perform this.highlight)}}
{{on 'mouseleave' this.dismiss}}
>
{{yield}}
</div>
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0",
"ember-concurrency": "2.2.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment