Skip to content

Instantly share code, notes, and snippets.

Danny Blue deebloo

Block or report user

Report or block deebloo

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@deebloo
deebloo / state-container.ts
Last active Jan 28, 2019
Wrapping a state manager to allow for async actions
View state-container.ts
export type StateChange<A> = A | Observable<A> | Promise<A>;
const stateChangeToObservable = <A>(result: StateChange<A>): Observable<A> => {
if (isObservable(result)) {
return result;
} else if (result instanceof Promise) {
return from(result);
}
return of(result);
@deebloo
deebloo / if-animation.directive.ts
Last active Dec 21, 2018
custom directive that creates and destroys elements with an enter and exit animation
View if-animation.directive.ts
import { Directive, TemplateRef, ViewContainerRef, Input, Renderer2 } from '@angular/core';
import { timer } from 'rxjs';
@Directive({
selector: '[ifAnimation]'
})
export class IfAnimationDirective {
@Input() lsIfAnimationDelay: number;
@Input() set lsIfAnimation(display: boolean) {
View state-def.ts
import { BehaviorSubject, of } from 'rxjs';
import { distinctUntilChanged, concatMap, map, take } from 'rxjs/operators';
export class StateDef<T> extends BehaviorSubject<T> {
setState(setter: (state: T) => T) {
this.pipe(take(1)).subscribe(state => {
super.next(setter(state));
});
}
View zone-google-maps-0.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="map-container" #mapContainer><div>
`,
styles: [`
.map-container {
height: 300px;
@deebloo
deebloo / ts-custom-elements.ts
Last active Nov 4, 2016
Typescript declarations and decorators for custom elements
View ts-custom-elements.ts
export interface CustomElementConfig {
tagName: string;
options?: {
extends: string;
};
}
/**
* @CustomElement({
* tagName: 'my-element'
@deebloo
deebloo / 0-sweet-modals.component.ts
Last active Oct 8, 2016
Simple Modals with Angular2
View 0-sweet-modals.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'sweet-modal',
styleUrls: ['sweet-modal.component.css']
templateUrl: 'sweet-modal.component.html'
})
export class LsModalComponent {
@Input() width: string = '400px';
@deebloo
deebloo / compose.ts
Last active Sep 16, 2016
Compose function/decorator
View compose.ts
// Our compose function that can be used as a decorator
// Decorators are just functions
const Compose = (mixins: any[]) => {
const protos = mixins.map(mixin => mixin.prototype)
const targetFunc = target => {
Object.assign(target.prototype, ...protos)
}
targetFunc.create = (base: any) =>{
View composable-redux-actions.ts
import { createStore } from 'redux';
const add1 = () => {
type: 'ADD1',
payload: state => [{}, ...state]
}
const add2 = () => {
type: 'ADD2',
payload: state => add1().payload(add1().payload(state))
@deebloo
deebloo / test-http.service.spec.ts
Last active Dec 3, 2018
How to mock http requests with angular2's http module
View test-http.service.spec.ts
// import core testing libs
import {
beforeEach,
addProviders,
it,
describe,
expect,
inject
} from '@angular/core/testing';
View rxjs-worker-map.example.js
// https://github.com/deebloo/rxjs-worker
var observable = Observable.of([0, 1, 2, 3, 4]);
observable
.map(function (data) {
return data.concat([5, 6, 7, 8, 9]);
})
.workerMap(function (data) {
return data.concat([10,11,12,13,14]);;
})
You can’t perform that action at this time.