Skip to content

Instantly share code, notes, and snippets.

@mathdoodle

mathdoodle/Example.spec.ts

Last active October 28, 2016 01:25
Show Gist options
  • Save mathdoodle/c2bf18fa2730f5c2241ffaef3c83a157 to your computer and use it in GitHub Desktop.
Save mathdoodle/c2bf18fa2730f5c2241ffaef3c83a157 to your computer and use it in GitHub Desktop.
Download ZIP
Bacon.js Registration Tutorial
Raw
README.md

Bacon.js Registration Tutorial

Overview

Tutorial

Raw
Example.spec.ts
export default function() {
describe("...", function() {
it("should ...", function() {
expect(true).toBeTruthy()
})
})
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- STYLES-MARKER -->
<style>
/* STYLE-MARKER */
</style>
<script src='https://jspm.io/system.js'></script>
<!-- SHADERS-MARKER -->
<!-- SCRIPTS-MARKER -->
</head>
<body>
<form id="login-container">
<h1>Bacon Registration Form</h1>
<div id="username">
<input type="text" placeholder="username">
<em class="ajax"></em>
<em id="username-unavailable" class="tooltip">Username is unavailable</em>
</div>
<div id="fullname">
<input type="text" placeholder="Full Name">
</div>
<div id="register">
<button>Get some!</button>
<em class="ajax"></em>
<span id="result"></span>
</div>
</form>
<script>
// CODE-MARKER
</script>
<script>
System.import('./index.js')
</script>
</body>
</html>
Raw
index.ts
DomReady.ready(function() {
const username = textFieldValue($("#username input"))
const fullname = textFieldValue($("#fullname input"))
const usernameEntered = username.map(nonEmpty)
const fullnameEntered = fullname.map(nonEmpty)
const buttonEnabled = usernameEntered.combine(fullnameEntered, and)
// Without doing anything the button is already disabled. Why?
buttonEnabled.onValue(function(enabled) {
// Bug in tutorial: Use the prop method, not the attr method. (JQuery 1.6+)
$("#register button").prop("disabled", !enabled)
})
})
function and(a: boolean, b: boolean): boolean {
return a && b;
}
function nonEmpty(x: {length: number}): boolean {
return x.length > 0
}
/**
* This helper function also exusts in Bacon.UI, but we don't have that loaded.
*/
function textFieldValue(textField: JQuery): Bacon.Property<ErrorEvent, string> {
function value(): string {
return textField.val()
}
return textField.asEventStream('keyup').map(value).toProperty(value())
}
Raw
package.json
{
"description": "Bacon.js Registration Tutorial",
"dependencies": {
"DomReady": "1.0.0",
"jasmine": "2.4.1",
"baconjs": "0.7.88",
"jquery": "2.1.4"
},
"name": "",
"version": "",
"author": "David Geo Holmes",
"keywords": [
"Bacon",
"baconjs",
"bacon.js",
"Registration",
"Tutorial"
]
}
Raw
style.css
body {
background-color: white;
font-family: 'Comic Sans MS', sans-serif;
}
.ajax {
background: url('../images/ajax.gif') no-repeat;
display: inline-block;
width: 54;
height: 54;
margin-top: -2px;
}
#username-unavailable {
display: none;
}
#username {
position: relative;
}
#username .ajax {
position: absolute;
top: 10px;
right: 0px;
}
.tooltip {
font-size:1.7em;
color: #fff;
display:inline;
padding:15px;
position: absolute;
left: 100%;
top: 0%;
white-space:nowrap;
background-color: #FF0000;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border:2px solid #FF0000;
-webkit-box-shadow: #B3B3B3 4px 4px 4px;
-moz-box-shadow: #B3B3B3 4px 4px 4px;
box-shadow: #B3B3B3 4px 4px 4px;
z-index:97
}
.tooltip:before {
border:solid;
border-color:#FF0000 transparent;
border-width:20px 20px 0 20px;
top: 15px;
left: -20px;
content:"";
display:block;
position:absolute;
z-index:98
}
#login-container {
position: relative;
width:400px;
height:300px;
margin:50px;
padding: 0px 120px 40px 40px;
background-color: #323B55;
background-image: -webkit-linear-gradient(bottom, #323B55 0%, #424F71 100%);
background-image: -moz-linear-gradient(bottom, #323B55 0%, #424F71 100%);
background-image: -ms-linear-gradient(bottom, #323B55 0%, #424F71 100%);
background-image: linear-gradient(bottom, #323B55 0%, #424F71 100%);
-webkit-border-radius: 30px 40px 50px 90px;
-moz-border-radius: 30px 40px 50px 90px;
border-radius: 30px 40px 50px 90px;
border:10px solid #F2F2F2;
}
#login-container:after {
position:absolute;
top:-50px;
right:-100px;
content: url('../images/bacon.png');
width: 200px;
height: 176px;
display: block;
}
#username, #fullname {
position: relative;
}
#login-container h1 {
color: #fff;
}
#login-container button {
background-color: #FFFF00;
border-color: #dddd00;
color: #c00;
}
#login-container button:disabled {
background-color: #888;
color: #444;
border-color: #666;
}
#login-container input {
color: #800;
}
#login-container input::-webkit-input-placeholder { color: LightGray; }
#login-container input:-moz-placeholder { color: LightGray; }
#login-container input:-ms-input-placeholder { color: LightGray; }
#login-container input,
#login-container button {
padding: 5px;
font-size: 2.0em;
margin-top: 10px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
border-width:3px;
}
#login-container input {
width: 85%;
}
#login-container button {
position: absolute;
left: auto;
right: -95px;
}
#register {
position: relative;
}
#register .ajax {
position: absolute;
right: 81px;
top: 12px;
}
#register #result {
display: inline-block;
margin-top: 10px;
font-size: 2em;
color: #ff0;
text-shadow: black 4px 4px 4px;
}
Raw
tests.html
<!DOCTYPE html>
<html>
<head>
<!-- STYLES-MARKER -->
<style>
/* STYLE-MARKER */
</style>
<script src='https://jspm.io/system.js'></script>
<!-- SCRIPTS-MARKER -->
</head>
<body>
<script>
// CODE-MARKER
</script>
<script>
System.import('./tests.js')
</script>
</body>
</html>
Raw
tests.ts
import Example from './Example.spec'
window['jasmine'] = jasmineRequire.core(jasmineRequire)
jasmineRequire.html(window['jasmine'])
const env = jasmine.getEnv()
const jasmineInterface = jasmineRequire.interface(window['jasmine'], env)
extend(window, jasmineInterface)
const htmlReporter = new jasmine.HtmlReporter({
env: env,
getContainer: function() { return document.body },
createElement: function() { return document.createElement.apply(document, arguments) },
createTextNode: function() { return document.createTextNode.apply(document, arguments) },
timer: new jasmine.Timer()
})
env.addReporter(htmlReporter)
DomReady.ready(function() {
htmlReporter.initialize()
describe("Example", Example)
env.execute()
})
/*
* Helper function for extending the properties on objects.
*/
export default function extend<T>(destination: T, source: any): T {
for (let property in source) {
destination[property] = source[property]
}
return destination
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment