peisenmann

{
    "H": "Hydrogen",
    "He": "Helium",
    "Li": "Lithium",
    "Be": "Beryllium",
    "B": "Boron",
    "C": "Carbon",
    "N": "Nitrogen",
    "O": "Oxygen",
    "F": "Fluorine",

peisenmann

Pascal's Triangle

A blind implementation of Pascal's Triangle without any algorithms or optimization research. Uses ES2015 (ES6) level Javascript.

Execution

Executable in browser or via Node 6+ repl. To run in browser, paste all the code from both .js files into the console and remove the export keyword

Also executable via GistRun at https://gist.run/?id=bed8e0a105f795f99820ba139f034aaa&sha=2ffda6f14e917df89b8dc0b5c4614e7fc4f8c165

peisenmann

The important things to note in this gist are:

app.html The usage of the custom attribute hover-color is <div hover-color="special-hover-class"> where special-hover-class is simply a css class that will be applied to all hover-color elements when the given element is hovered.

hover-color.js This is the source code of the custom attribute itself, and is commented to explain what it does. Essentially, if the element is hovered, the custom attribute sends out a message to tell all other hover color elements to change. When the mouse leaves the element, a message is broadcast to tell them all to remove their class change.

peisenmann

import {customAttribute} from 'aurelia-framework';
/**
 * The au-class custom attribute is intended to simplify aurelia binding code in the standard html class attribute.
 *
 * This is an unofficial community proposal to add to Aurelia (aurelia.io)
 *
 * Before:
 <div class="base-class ${foo} ${someVMProp < 10 ? 'red' : ''} ${!otherVMProp ? 'blue' : ''}"></div>
 * After:
 <div au-class.bind="['base-class', foo, {red: someVMProp < 10, blue: !otherVMProp}]"></div>

peisenmann

import {Container, CompositionEngine, ViewSlot} from 'aurelia-framework';
import {Origin} from 'aurelia-metadata';

export class ViewConstructionService {

  static inject = [Container, CompositionEngine];
  constructor(container:Container, compositionEngine:CompositionEngine) {
    this.container = container;
    this.compositionEngine = compositionEngine;
  }

peisenmann

var gulp = require('gulp');
var browserSync = require('browser-sync');
var httpProxy = require('http-proxy');
var chalk = require('chalk');

var localhostPort = 9000;

var proxyConfig = {
  services: {
    host1:     { address: 'http://localhost:8080' },

peisenmann

import {customAttribute, bindable, LogManager} from 'aurelia-framework';

const logger:Logger = LogManager.getLogger("attached");

/**
 * MIT License. Patrick Eisenmann.
 * Apply this attribute to an element to have a callback invoked when the element added to the DOM
 *
 * @param {Function} callback. Required. The function to be invoked.
 *                             The first argument to the callback is the Element that had the attached on it.

peisenmann

import * as DataServices from './data/services/index';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  prestart(aurelia).then(
    ()  => start(aurelia),
    err => preconditionsFailed(err, aurelia)

peisenmann

      // Settings routes
      {
        route: ['/settings'],
        redirect: 'welcome',
        title: 'Settings',
        nav: true,
        group: 'settings',
        groupHeader: true,
        settings: {glyph: 'glyphicon glyphicon-cog'}
      },

peisenmann

// TEST

let p1 = new Promise((resolve, reject) => resolve('good one'));
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('bad one');
    }, 3000);
});
let p3 = new Promise((resolve, reject) => resolve('good one'));