Skip to content

Instantly share code, notes, and snippets.

@YoranBrondsema
YoranBrondsema / controllers.application\.js
Last active September 16, 2020 09:30
HasManyReference and autotracking
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
@service store;
get numberOfComments() {
@YoranBrondsema
YoranBrondsema / use-on-element-resize.js
Created August 18, 2020 12:55
useOnElementResize hook for React.js
import { useEffect, useRef, useCallback } from 'react';
export default function useOnElementResize(didResize) {
const ro = useRef(null);
const ref = useCallback(
(element) => {
if (element) {
if (ro.current) {
ro.current.disconnect();
@YoranBrondsema
YoranBrondsema / on-element-resize.js
Created August 18, 2020 12:53
on-element-resize modifier for Ember.js
import { modifier } from 'ember-modifier';
import { run } from '@ember/runloop';
export default modifier(function onElementResize(element, [fn]) {
const observer = new window.ResizeObserver(() => {
run(() => {
fn(element);
});
});
observer.observe(element);
@YoranBrondsema
YoranBrondsema / wait-for-property-change.js
Last active May 6, 2021 08:27
Alternative to observers in Ember.js with ember-concurrency
import { task, waitForProperty } from 'ember-concurrency';
import EmberObject from '@ember/object';
function waitForPropertyChange(object, prop) {
const curValue = object.get(prop);
return waitForProperty(object, prop, (newValue) => {
return newValue !== curValue;
});
}
@YoranBrondsema
YoranBrondsema / adapters.application.js
Created July 29, 2018 09:18
Non-async relationship bug (working in 3.1.1)
import Adapter from "ember-data/adapters/json-api";
export default Adapter.extend();
@YoranBrondsema
YoranBrondsema / adapters.application.js
Last active August 30, 2018 00:56
Non-async relationship bug (3.2.1)
import Adapter from "ember-data/adapters/json-api";
export default Adapter.extend();
import Ember from 'ember';
export default Ember.Component.extend({
init() {
this._super(...arguments);
this.set('step', 'source-selector');
},
isSourceSelector: Ember.computed.equal('step', 'source-selector'),
@YoranBrondsema
YoranBrondsema / pop-over.hbs
Last active April 7, 2017 23:41
Popover with multiple yield blocks
{{yield
(
hash
trigger=(
component 'pop-over-trigger'
onClick=(action 'toggleDialog')
)
)
}}
@YoranBrondsema
YoranBrondsema / application.hbs
Created April 7, 2017 23:29
Popover with multiple yield blocks
{{#pop-over
as |p|
}}
{{#p.trigger}}
Click me
{{/p.trigger}}
{{#p.dialog}}
<p>Some interesting content here.</p>