Skip to content

Instantly share code, notes, and snippets.

@oa495

oa495/controllers.application\.js

Created March 21, 2022 14:09
Show Gist options
  • Save oa495/14f2063fb9ccd1e4ca50428d4da11512 to your computer and use it in GitHub Desktop.
Save oa495/14f2063fb9ccd1e4ca50428d4da11512 to your computer and use it in GitHub Desktop.
Download ZIP
SVG API
Raw
controllers.application\.js
import Controller from '@ember/controller';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
@action
onChange(event) { document.getElementById("mode").setAttribute("class", event.target.value);
}
}
Raw
styles.app\.css
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.dark-mode {
background-color: black;
}
.dark-mode svg g {
--svg-light-display: none;
--svg-dark-display: inherit;
}
.light-mode svg g {
--svg-light-display: revert;
--svg-dark-display: none;
}
Raw
templates.application\.hbs
<select {{on "change" this.onChange}}>
<option value="dark-mode">Dark Mode</option>
<option value="light-mode">Light Mode</option>
<option value="unspecified">Unspecified Mode</option>
</select>
<br><br>
<div id="mode" class="dark-mode">
<IconC class="small"/>
<IconC class="large"/>
</div>
Raw
templates.components.icon-c\.hbs
<svg ...attributes viewBox="0 0 48 48" id="checklist-medium" aria-hidden="true" role="none">
>
<style type="text/css">
[dir='rtl'] .rtl-flip {
/*!rtl:begin:ignore*/
transform: rotateY(180deg);
/*!rtl:end:ignore*/
}
.has-dark-mode {
--svg-light-display: revert;
--svg-dark-display: none;
}
.small {
width: 2.4rem;
height: 2.4rem;
}
.large {
width: 4.8rem;
height: 4.8rem;
}
</style>
<g class="has-dark-mode">
<g display="var(--svg-light-display)">
<path fill="black" d="M22 3v2H11V3zM11 13h11v-2H11zm0 8h11v-2H11zM4.85 4L3.34 2.51 2 3.85 5.15 7l4.6-7H7.48zm0 8l-1.51-1.49L2 11.85 5.15 15l4.6-7H7.48zm0 8l-1.51-1.49L2 19.85 5.15 23l4.6-7H7.48z"/>
</g>
<g display="var(--svg-dark-display)">
<path fill="white" d="M22 3v2H11V3zM11 13h11v-2H11zm0 8h11v-2H11zM4.85 4L3.34 2.51 2 3.85 5.15 7l4.6-7H7.48zm0 8l-1.51-1.49L2 11.85 5.15 15l4.6-7H7.48zm0 8l-1.51-1.49L2 19.85 5.15 23l4.6-7H7.48z"/>
</g>
</g>
</svg>
Raw
twiddle\.json
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment