Skip to content

Instantly share code, notes, and snippets.

Avatar
😄
I may be slow to respond.

Albert Yu nightire

😄
I may be slow to respond.
View GitHub Profile
@nightire
nightire / index.html
Last active Sep 3, 2020
Learning Interact.js
View index.html
<div
class="container relative h-64 mx-auto my-4"
style="outline: 1px solid lightgray"
>
<div
class="draggable absolute w-32 h-32 bg-blue-200 box-border"
style="touch-action: none"
></div>
<div
class="draggable absolute w-32 h-32 bg-blue-200 box-border"
View components.tooltip\.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked container;
constructor(owner, args) {
super(owner, args);
this.container = this.createContainerElement();
}
View controllers.application\.js
import Controller from '@ember/controller';
import { action, set } from '@ember/object';
import { tracked } from 'tracked-built-ins';
export default class ApplicationController extends Controller {
@tracked items = [
{ id: 1, value: 1 },
{ id: 2, value: 2 },
{ id: 3, value: 3 },
];
View components.tagged-input\.js
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked tags = ['programming', 'rails'];
@tracked tag = '';
@action addTag(event) {
View components.classic-search\.js
import Component from '@ember/component';
import { computed } from '@ember/object';
export default class extends Component {
query = '';
@computed('query') get _options() {
if (this.query) {
return this.options.filter((option) => {
return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
View components.blog-post-card.js
import Ember from 'ember';
const { Component, computed } = Ember;
const BlogPostCardComponent = Component.extend({
classNames: ['blog-post-card', 'card'],
classNameBindings: ['disabled::clickable'],
click() {
if (!this.get('disabled')) {
this.get('viewPost')(this.get('post'));
View controllers.application\.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
queryParams = [
'page'
];
@tracked page;
@nightire
nightire / components.change-password\.js
Last active May 22, 2020
Octane way of changing password
View components.change-password\.js
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
const MESSAGES = {
staled: 'The old password and new password are the same. The password was not changed.',
invalid: 'The new password and confirm password must be the same value. The password was not changed.'
};
export default class extends Component {
View components.clients.change-password-form\.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ChangePasswordForm extends Component {
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;
View components.limited-items\.js
import Component from '@glimmer/component';
export default class extends Component {
get shouldLimit() {
return this.args.items.length > this.args.showMax;
}
get items() {
if (this.shouldLimit) {
const [...items] = this.args.items;