Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Chris Buttery chrisbuttery

🏠
Working from home
View GitHub Profile
@chrisbuttery
chrisbuttery / boot-index.js
Created Feb 4, 2014
Personal Details - component
View boot-index.js
var PersonalDetailsForm = require('personal-details');
var personalDetailsFormEl = document.querySelector('.js-personal-details-form');
if(personalDetailsFormEl) {
var data = document.querySelector('.js-personal-details-data');
new PersonalDetailsForm(personalDetailsFormEl, data);
}
@chrisbuttery
chrisbuttery / index.html
Last active Aug 29, 2015
Using reactive to populate a list of user data
View index.html
<form>
<div class="js-formItem">
<input type="text" value="{fullName}"></input>
<input type="text" value="{HomePhone || '555 555 555'}"></input>
</div>
</form>
View example.js
var Form = require('form');
function PersonalDetails(el, model) {
this.el = el;
this.model = model;
this.form = new Form(el);
}
View personal-details-index.js
var reactive = require('reactive');
var Observable = require('observable');
var Emitter = require('emitter');
var Form = require('form');
function PersonalDetailsForm(el, data) {
this.el = el;
this.tmpl = this.el.querySelector('.js-template');
this.tmplContainer = this.el.querySelector('.js-template-container');
@chrisbuttery
chrisbuttery / index.js
Last active Aug 29, 2015
Personal Details
View index.js
var reactive = require('reactive'),
Observable = require('observable'),
Emitter = require('emitter'),
Form = require('form');
function PersonalDetailsForm(el, data) {
this.el = el;
this.tmpl = this.el.querySelector('.js-template');
// create a model for this view and dump the JSON from the backend into it
View multiple.html
<!-- multiple skaters -->
<html>
<head>
</head>
<body>
<div class="js-pro-skater">
<span>Favourite Pro Skater: {fullName} of {company}</span><br/>
<span>{firstName} was the best!</span>
View javascript.js
module.exports = function(name){
document.addEventListener('blur', function(el){
if (!el.target.value){
_gaq.push(['_trackEvent', name, 'skipped', el.target.name]);
}
else {
_gaq.push(['_trackEvent', name, 'completed', el.target.name]);
}
}, true);
};
@chrisbuttery
chrisbuttery / data.js
Last active Aug 29, 2015
Re-construct and categorise array
View data.js
var data = [
{price: "$99.99", stocked: true, name: "iPod Touch", category: "Electronics"},
{price: "$399.99", stocked: false, name: "iPhone 5", category: "Electronics"},
{price: "$199.99", stocked: true, name: "Nexus 7", category: "Electronics"},
{price: "$49.99", stocked: true, name: "Football", category: "Sporting Goods"},
{price: "$9.99", stocked: true, name: "Baseball", category: "Sporting Goods"},
{price: "$29.99", stocked: false, name: "Basketball", category: "Sporting Goods"}
];
@chrisbuttery
chrisbuttery / index.js
Last active Aug 29, 2015
baha men lyrics
View index.js
var BahaMenLyrics = require('bahaMenLyrics');
var dogs = new BahaMenLyrics();
dogs.sing(); // "Who let the Dogs out?! Woof... Woof... Woof... Woof"
var goats = new BahaMenLyrics('Goats', 'Baaaa');
goats.sing(); // "Who let the Goats out?! Baaa... Baaa... Baaa... Baaa"
View package.json
/*
* Require our plugins.
*/
var gulp = require('gulp'),
debug = require('gulp-debug'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),