Skip to content

Instantly share code, notes, and snippets.

@nwhittaker
Last active August 2, 2022 16:54
Show Gist options
  • Save nwhittaker/f1b46e7d30a0f6f0e2d13f3d20658a3e to your computer and use it in GitHub Desktop.
Save nwhittaker/f1b46e7d30a0f6f0e2d13f3d20658a3e to your computer and use it in GitHub Desktop.
Base Calcite
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
@tracked isAutofocused = false
@action toggleAutofocus() {
this.isAutofocused = !this.isAutofocused
}
init() {
super.init()
const script = document.createElement('script')
script.type = 'module'
script.src = 'https://unpkg.com/@esri/calcite-components@1.0.0-beta.86/dist/calcite/calcite.esm.js'
document.head.appendChild(script)
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'https://unpkg.com/@esri/calcite-components@1.0.0-beta.86/dist/calcite/calcite.css'
document.head.appendChild(link)
}
}
<p>
<button {{on 'click' this.toggleAutofocus}}>Toggle autofocus</button>
</p>
<calcite-input autofocus={{this.isAutofocused}} />
{
"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