Skip to content

Instantly share code, notes, and snippets.

Avatar

Sean Hunter freshcutdevelopment

View GitHub Profile
@freshcutdevelopment
freshcutdevelopment / app.html
Last active Jan 23, 2018
Aurelia Gist - Dynamic composition (step 1)
View app.html
<template>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>${message}</h1>
<hr/>
<compose view="info-card.html"></compose>
</template>
@freshcutdevelopment
freshcutdevelopment / app.html
Created Oct 30, 2017
Aurelia Gist - RequireJS, Bootstrap, Fontawesome
View app.html
<template>
<h1>${message}</h1>
</template>
@freshcutdevelopment
freshcutdevelopment / app.html
Last active Oct 30, 2017
Aurelia in Action - Binding overview
View app.html
<template>
<h1>${greeting}</h1>
<form class="form-inline">
<input class="form-control" placeholder="greeting..." value.bind="greeting"></input>
</form>
</template>
@freshcutdevelopment
freshcutdevelopment / aurelia.json
Last active Oct 29, 2017
AIA Chapter 2 - package.json & aurelia.json dependencies
View aurelia.json
{
"name": "my-books",
"type": "project:application",
"platform": {
"id": "web",
"displayName": "Web",
"output": "scripts",
"index": "index.html"
},
"transpiler": {
@freshcutdevelopment
freshcutdevelopment / app.html
Last active Oct 29, 2017
Aurelia Gist - Custom binding behaviors
View app.html
<template>
<require from="./inspect-binding-behavior"></require>
<require from="./style.css"></require>
<section>
<h1>${message & inspect}</h1>
<hr/>
<input value.bind="message & inspect"></input>
@freshcutdevelopment
freshcutdevelopment / index.html
Last active Oct 8, 2017
Box color CSS transition
View index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transition Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
@freshcutdevelopment
freshcutdevelopment / aurelia.json
Last active Oct 1, 2017
Country-picker aurelia.json file
View aurelia.json
...
"jquery",
"text",
{
"name": "selectize",
"main": "dist/js/standalone/selectize.js",
"path": "../node_modules/selectize",
"deps": [
"jquery"
],
@freshcutdevelopment
freshcutdevelopment / install-selectize.sh
Created Oct 1, 2017
Install jquery, selectize, and flag-icon-css
View install-selectize.sh
npm install jquery --save
npm install selectize --save
npm install flag-icon-css --save
@freshcutdevelopment
freshcutdevelopment / getHtml.js
Created Oct 1, 2017
Ux selectize component, get HTML
View getHtml.js
loadSelectItemView(templateUrl) {
return this.viewEngine.loadViewFactory(templateUrl);
}
getHtml(item, factory) {
const childContainer = this.container.createChild();
const view = factory.create(childContainer);
view.bind(item);
View ux-selectize-inline-render.js
render: {
option: (item, escape) => {
return `<template>
<span class="title">
<span class="name">
<span class="flag-icon flag-icon-${code.toLowerCase()} flag-icon-squared">
</span>
</span>
</span>
<span class="description">${code} - ${name} </span>