WouterSpaak

<script>
	/**
	 *  Toevoegen vignet Zweten in Abu Dhabi
	 *  van Gerard Borgman
	 */
	(function() {
		var parentElement = document.querySelector('.media-viewer-item-outside'),
		    referenceElement = parentElement.firstChild,
		    newElement = document.createElement('img');
		newElement.src = 'http://www.gelderlander.nl/polopoly_fs/1.4165963.1389090893!/image/image.jpg';

WouterSpaak

<script>
	/**
	 *  Toevoegen vignet Zweten in Spanje
	 *  van Lex Lammers
	 */
	(function() {
		var parentElement    = document.querySelector('.media-viewer-item-outside'),
		    referenceElement = parentElement.firstChild,
		    newElement       = document.createElement('img');
			

WouterSpaak

/**
 *  Element.hasClass(className)
 *  
 *  Extends the Element prototype to query for a certain class.
 *  
 *  @param string className
 *      String to query for classes
 *  @return boolean
 *      Returns true if class is found, else returns false
 *  

WouterSpaak

import { Atom, atom, Derivable, derivation, transact } from '@politie/sherlock';
import { List } from 'immutable';

// A simple pure function that returns a human-readable string from some data.
function createSentence(company: string, languages: string[], where: string): string {
    return `${company}, located in ${where}, likes to work with ${languages.join(', ')}.`;
}

// Atoms are ground state truths. They are Derivables which can be set or swapped.
const companyName: Atom<string> = atom('Open Web');

WouterSpaak

class Filter<T> {
    static greaterThan(threshold: number, orEqualTo: boolean = false) {
        return (input: number) => orEqualTo ? input >= threshold : input > threshold;
    }

    static equalTo(compare: number | string) {
        return (input: number | string) => input === compare;
    }

    constructor(private readonly collection: Array<T>) { }

WouterSpaak

@Directive({
  selector: '[mouseClick]'
})
export class MouseClickDirective {
  @HostListener('click', ['$event']) handleClick(click: MouseEvent) {
    console.log(`Clicked at X: ${click.clientX} and Y: ${click.clientY}`);
  }
}

WouterSpaak

@Directive({
  selector: '[mouseClick]'
})
export class MouseClickDirective implements OnInit {
  private readonly clicks$ = new Subject<MouseEvent>();
  private readonly someStream$: Observable<any>;

  @HostListener('click', ['$event']) handleClick(click: MouseEvent) {
    this.clicks$.next(click);
  }

WouterSpaak

@ObservableHostListener<MouseEvent, Coordinate>(
  'window:click',
  ['$event'],
  pipe(
    map(({ clientX, clientY }) => {
      return { x: clientX, y: clientY };
    })
  )
)
coordinateStream$: Observable<Coordinate>;

WouterSpaak

import { HostListener } from '@angular/core';
import { UnaryFunction, Observable } from 'rxjs';

export function ObservableHostListener(
  eventName: string, 
  args?: string[], 
  operator?: UnaryFunction<Observable<any>, Observable<any>>
): PropertyDecorator {

  // Calling HostListener will return a decorator, ready to

WouterSpaak

// Creating an internal subject that will recieve values from
// Angular calling the shadowed method with new values.
const subject = new Subject<any>();

// We need a super secret string to monkey patch a new method onto
// the target class.
const newKey = `__keyForObservableHostListener__${key}`;

Object.defineProperties(target, {
  [newKey]: {