Skip to content

Instantly share code, notes, and snippets.

@sailsinaction

sailsinaction/000 - Chapter 3 - Gists

Last active April 7, 2017 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sailsinaction/628731cc9683256f8cc9 to your computer and use it in GitHub Desktop.
Save sailsinaction/628731cc9683256f8cc9 to your computer and use it in GitHub Desktop.
Download ZIP
Chapter3 - Gists
Raw
000 - Chapter 3 - Gists
.d8888b. 888 888 .d8888b. .d8888b. d8b 888
d88P Y88b 888 888 d88P Y88b d88P Y88b Y8P 888
888 888 888 888 .d88P 888 888 888
888 88888b. 8888b. 88888b. 888888 .d88b. 888d888 8888" 888 888 .d8888b 888888 .d8888b
888 888 "88b "88b 888 "88b 888 d8P Y8b 888P" "Y8b. 888 88888 888 88K 888 88K
888 888 888 888 .d888888 888 888 888 88888888 888 888 888 888888 888 888 888 "Y8888b. 888 "Y8888b.
Y88b d88P 888 888 888 888 888 d88P Y88b. Y8b. 888 Y88b d88P Y88b d88P 888 X88 Y88b. X88
"Y8888P" 888 888 "Y888888 88888P" "Y888 "Y8888 888 "Y8888P" "Y8888P88 888 88888P' "Y888 88888P'
888
888
888
Raw
002 - Listing 3.2 Adding markup to the homepage.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<div class=" col-md-8 col-md-offset-2">
<div class="jumbotron">
<h1>Chad's Viral Videos Emporium</h1>
<h2>Viral Videos since 2015</h2>
</div>
</div>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
003 - Listing 3.3 Adding a manual reference to the Bootstrap CDN.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<div class=" col-md-8 col-md-offset-2">
<div class="jumbotron">
<h1>Chad's Viral Videos Emporium</h1>
<h2>Viral Videos since 2015</h2>
</div>
</div>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
004 - Listing 3.4 Adding an image tag using a relative path in the homepage.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#">Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<div class=" col-md-8 col-md-offset-2">
<div class="jumbotron">
<h1>Chad's Viral Videos Emporium</h1>
<h2>Viral Videos since 2015</h2>
</div>
</div>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
005 - Listing 3.5 Adding an image tag using a relative path in the videos page.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<!-- SUBMIT NEW VIDEO -->
<section class="submit-video-form col-md-4">
<h3>See something missing?</h3>
<form>
<input class="form-control" type="text" name="title" placeholder="e.g.
My video title"/>
<input class="form-control" type="text" name="src"
placeholder="e.g. https://www.youtube.com/watch?v=5O434MiRBoY"/>
<button class="btn btn-success" >Submit Video</button>
</form>
</section>
<!-- LIST OF VIDEOS -->
<section class="the-list-of-videos col-md-12">
<ul class="list-unstyled">
<li class="video">
<h2>FUNNY BABY VIDEOS</h2>
<iframe width="640" height="390" src="https://www.youtube.com/embed/_FvTVWjLiHM" frameborder="0" allowfullscreen></iframe>
</li>
<li class="video">
<h2>Justin Bieber - Baby ft. Ludacris</h2>
<iframe width="640" height="390" src="https://www.youtube.com/embed/kffacxfA7G4" frameborder="0" allowfullscreen></iframe>
</li>
<li class="video">
<h2>Charlie bit my finger - again !</h2>
<iframe width="640" height="390" src="https://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
</section>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
006 - Listing 3.6 Adding an image tag using an absolute path in the videos page.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="/images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<!-- SUBMIT NEW VIDEO -->
<section class="submit-video-form col-md-4">
<h3>See something missing?</h3>
<form>
<input class="form-control" type="text" name="title" placeholder="e.g.
My video title"/>
<input class="form-control" type="text" name="src"
placeholder="e.g. https://www.youtube.com/watch?v=5O434MiRBoY"/>
<button class="btn btn-success" >Submit Video</button>
</form>
</section>
<!-- LIST OF VIDEOS -->
<section class="the-list-of-videos col-md-12">
<ul class="list-unstyled">
<li class="video">
<h2>FUNNY BABY VIDEOS</h2>
<iframe width="640" height="390" src="https://www.youtube.com/embed/_FvTVWjLiHM" frameborder="0" allowfullscreen></iframe>
</li>
<li class="video">
<h2>Justin Bieber - Baby ft. Ludacris</h2>
<iframe width="640" height="390" src="https://www.youtube.com/embed/kffacxfA7G4" frameborder="0" allowfullscreen></iframe>
</li>
<li class="video">
<h2>Charlie bit my finger - again !</h2>
<iframe width="640" height="390" src="https://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
</section>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
007 - Listing 3.7 Adding an external CSS file to brushfire
/* Center the logo*/
img {
width: 100px;
margin: 30px auto 0px auto;
display: block;
}
/* Center the heading */
.jumboHeading {
text-align: center;
padding: 20px 0;
font-size: 2.5em;
}
/* Center the heading */
.jumboSubHeading {
text-align: center;
}
/* Don't display bullet points in list */
.the-list-of-videos {
li {
list-style-type: none;
}
}
Raw
007.5 - Adding a less file to import.less.
/**
* importer.less
*
* By default, new Sails projects are configured to compile this file
* from LESS to CSS. Unlike CSS files, LESS files are not compiled and
* included automatically unless they are imported below.
*
* The LESS files imported below are compiled and included in the order
* they are listed. Mixins, variables, etc. should be imported first
* so that they can be accessed by subsequent LESS stylesheets.
*
* (Just like the rest of the asset pipeline bundled in Sails, you can
* always omit, customize, or replace this behavior with SASS, SCSS,
* or any other Grunt tasks you like.)
*/
@import 'custom.less';
// For example:
//
// @import 'variables/colors.less';
// @import 'mixins/foo.less';
// @import 'mixins/bar.less';
// @import 'mixins/baz.less';
//
// @import 'styleguide.less';
// @import 'pages/login.less';
// @import 'pages/signup.less';
//
// etc.
Raw
008 - Listing 3.8 Adding classes to make selecting elements easier in jQuery.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="/images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<!-- SUBMIT NEW VIDEO -->
<section class="submit-video-form col-md-4">
<h3>See something missing?</h3>
<form>
<input class="form-control" type="text" name="title" placeholder="e.g.
My video title"/>
<input class="form-control" type="text" name="src"
placeholder="e.g. https://www.youtube.com/watch?v=5O434MiRBoY"/>
<button class="btn btn-success" >Submit Video</button>
</form>
</section>
<!-- LIST OF VIDEOS -->
<section class="the-list-of-videos col-md-12">
<div class="loading">Loading videos...</div>
<ul>
<!-- VIDEO DATA INSERTED HERE AS HTML -->
</ul>
</section>
</div>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
009 - Listing 3.09 Adding jQuery to load the video list.
$(function whenDomIsReady(){
$('.the-list-of-videos .loading').show();
setTimeout(function afterRetrievingVideos() {
var videos = [{
title: 'FUNNY BABY VIDEOS',
src: 'https://www.youtube.com/embed/_FvTVWjLiHM'
}, {
title: 'Justin Bieber - Baby ft. Ludacris',
src: 'https://www.youtube.com/embed/kffacxfA7G4'
}, {
title: 'Charlie bit my finger - again !',
src: 'https://www.youtube.com/embed/_OBlgSz8sSM'
}];
$('.the-list-of-videos .loading').hide();
var videosHtml = _.reduce(videos, function(html, video){
html += '<li class="video">' +
' <h2>' + video.title + '</h2>' +
' <iframe width="640" height="390" src="' + video.src + '" frameborder="0" allowfullscreen></iframe>' +
'</li>';
return html;
}, '');
$('.the-list-of-videos ul').replaceWith(videosHtml);
}, 750);
});
Raw
010 - Listing 3.10 Adding jQuery to process the submit video form.
$(function whenDomIsReady(){
$('.the-list-of-videos .loading').show();
setTimeout(function afterRetrievingVideos() {
var videos = [{
title: 'FUNNY BABY VIDEOS',
src: 'https://www.youtube.com/embed/_FvTVWjLiHM'
}, {
title: 'Justin Bieber - Baby ft. Ludacris',
src: 'https://www.youtube.com/embed/kffacxfA7G4'
}, {
title: 'Charlie bit my finger - again !',
src: 'https://www.youtube.com/embed/_OBlgSz8sSM'
}];
$('.the-list-of-videos .loading').hide();
var videosHtml = _.reduce(videos, function(html, video){
html += '<li class="video">' +
' <h2>' + video.title + '</h2>' +
' <iframe width="640" height="390" src="' + video.src + '" frameborder="0" allowfullscreen></iframe>' +
'</li>';
return html;
}, '');
$('.the-list-of-videos ul').replaceWith(videosHtml);
}, 750);
$('.submit-video-form').submit(function (e){
e.preventDefault();
var newVideo = {
title: $('.submit-video-form input[name="title"]').val(),
src: $('.submit-video-form input[name="src"]').val()
};
$('.submit-video-form input').val('');
$('.submit-video-form button').text('Submitting...');
$('.submit-video-form button').prop('disabled', true);
var parser = document.createElement('a');
parser.href = newVideo.src
var youtubeID = parser.search.substring(parser.search.indexOf("=")+1, parser.search.length);
newVideo.src = 'https://www.youtube.com/embed/'+youtubeID;
setTimeout(function (){
var newVideoHtml = '<li class="video">'+ //#E
' <h2>' + newVideo.title + '</h2>'+
' <iframe width="640" height="390" src="'+newVideo.src+'" frameborder="0" allowfullscreen></iframe>'+
'</li>';
$('.the-list-of-videos').prepend(newVideoHtml); //#F
$('.submit-video-form button').text('Submit Video');
$('.submit-video-form button').prop('disabled', false);
}, 750);
});
});
Raw
011 - Listing 3.11 Adding Angular markup to load the video list.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<!--STYLES END-->
</head>
<body ng-app="brushfire_videosPage" ng-controller="PageCtrl">
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="/images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<!-- SUBMIT NEW VIDEO -->
<section class="submit-video-form col-md-4">
<h3>See something missing?</h3>
<form>
<input class="form-control" type="text" name="title" placeholder="e.g.
My video title"/>
<input class="form-control" type="text" name="src"
placeholder="e.g. https://www.youtube.com/watch?v=5O434MiRBoY"/>
<button class="btn btn-success" >Submit Video</button>
</form>
</section>
<!-- LIST OF VIDEOS -->
<section class="the-list-of-videos col-md-12">
<div class="loading" ng-if="videosLoading">Loading videos...</div>
<ul>
<li class="video" ng-repeat="video in videos" ng-if="!videosLoading">
<h2>{{video.title}}</h2>
<iframe width="640" height="390" ng-src="{{video.src}}" frameborder="0" allowfullscreen>
</iframe>
</li>
</ul>
</section>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
012 - Listing 3.12 Adding the Angular code to list videos in the videos page.
angular.module('brushfire_videosPage', [])
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*://www.youtube.com/**'
]);
}]);
angular.module('brushfire_videosPage').controller('PageCtrl', [
'$scope', '$timeout',
function ( $scope , $timeout ){
$scope.videosLoading = true;
$timeout(function afterRetrievingVideos (){
var _videos = [{
title: 'FUNNY BABY VIDEOS',
src: 'https://www.youtube.com/embed/_FvTVWjLiHM'
}, {
title: 'Justin Bieber - Baby ft. Ludacris',
src: 'https://www.youtube.com/embed/kffacxfA7G4'
}, {
title: 'Charlie bit my finger - again !',
src: 'https://www.youtube.com/embed/_OBlgSz8sSM'
}];
$scope.videosLoading = false;
$scope.videos = _videos;
}, 750);
}
]);
Raw
013 - Listing 3.13 Adding ng-cloak to the body tag in the videos page.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<!--STYLES END-->
</head>
<body ng-app="brushfire_videosPage" ng-controller="PageCtrl" ng-cloak>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="/images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<!-- SUBMIT NEW VIDEO -->
<section class="submit-video-form col-md-4">
<h3>See something missing?</h3>
<form>
<input class="form-control" type="text" name="title" placeholder="e.g.
My video title"/>
<input class="form-control" type="text" name="src"
placeholder="e.g. https://www.youtube.com/watch?v=5O434MiRBoY"/>
<button class="btn btn-success" >Submit Video</button>
</form>
</section>
<!-- LIST OF VIDEOS -->
<section class="the-list-of-videos col-md-12">
<div class="loading" ng-if="videosLoading">Loading videos...</div>
<ul>
<li class="video" ng-repeat="video in videos" ng-if="!videosLoading">
<h2>{{video.title}}</h2>
<iframe width="640" height="390" ng-src="{{video.src}}" frameborder="0" allowfullscreen>
</iframe>
</li>
</ul>
</section>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
014 - Listing 3.14 Adding ng-cloak styles to custom.less.
/* Center the heading */
.jumboHeading {
text-align: center;
padding: 20px 0;
font-size: 2.5em;
}
/* Center the heading */
.jumboSubHeading {
text-align: center;
}
/* Don't display bullet points in list */
.the-list-of-videos {
li {
list-style-type: none;
}
}
/* Styling necessary for ng-cloak to work */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Raw
015 - Listing 3.15 Adding Angular markup to process the submit video form.
<!DOCTYPE html>
<html>
<head>
<title>New Sails App</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--STYLES-->
<!--STYLES END-->
</head>
<body ng-app="brushfire_videosPage" ng-controller="PageCtrl" ng-cloak>
<div class="container-fluid">
<!-- Creates the navbar -->
<nav class="navbar navbar-default navbar-inverse">
<!-- This creates the mechanism for collapse button -->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<!-- This controls the number of lines in the image when the nav collapse -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the brand on the left-hand side. -->
<a href="/#" class="pull-left"><img height="29" width="25" src="/images/logo.png" style="margin-top: 10px; margin-left: 10px;"></a>
<a class="navbar-brand" href="/#"> Brushfire</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/videos">Videos</a></li>
</ul>
</div>
</nav>
<!-- SUBMIT NEW VIDEO -->
<section class="the-submit-video-form col-md-4">
<h3>See something missing?</h3>
<form ng-submit="submitNewVideo()">
<input class="form-control" type="text" ng-model="newVideoTitle" ng-disabled="busySubmittingVideo" name="title" placeholder="e.g. My video title"/>
<input class="form-control" type="text" ng-model="newVideoSrc" ng-disabled="busySubmittingVideo" name="src" placeholder="e.g. https://www.youtube.com/embed/Kdgt1ZHkvnM"/>
<button class="btn btn-success" type="submit" ng-disabled="busySubmittingVideo">{{busySubmittingVideo?'Submitting...':'Submit Video'}}
</button>
</form>
</section>
<!-- LIST OF VIDEOS -->
<section class="the-list-of-videos col-md-12">
<div class="loading" ng-if="videosLoading">Loading videos...</div>
<ul>
<li class="video" ng-repeat="video in videos" ng-if="!videosLoading">
<h2>{{video.title}}</h2>
<iframe width="640" height="390" ng-src="{{video.src}}" frameborder="0" allowfullscreen>
</iframe>
</li>
</ul>
</section>
<!--
Client-side Templates
========================
HTML templates are important prerequisites of modern, rich client applications.
To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
that you load these templates client-side.
By default, your Gruntfile is configured to automatically load and precompile
client-side JST templates in your `assets/templates` folder, then
include them here automatically (between TEMPLATES and TEMPLATES END).
To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Import templates from other directories
+ Use a different template engine (handlebars, jade, dust, etc.)
+ Internationalize your client-side templates using a server-side
stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
Raw
016 - Listing 3.16 Adding the Angular code for submitting a new video.
angular.module('brushfire_videosPage', [])
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*://www.youtube.com/**'
]);
}]);
angular.module('brushfire_videosPage').controller('PageCtrl', [
'$scope', '$timeout',
function ($scope, $timeout) {
/////////////////////////////////////////////////////////////////////////////
// Immediately start fetching list of videos from the server.
/////////////////////////////////////////////////////////////////////////////
// First, show a loading spinner
$scope.videosLoading = true;
// Then simulate a delay
// (TODO: actually fetch videos from server instead of pretending)
$timeout(function afterRetrievingVideos() {
var _videos = [{
title: 'FUNNY BABY VIDEOS',
src: 'https://www.youtube.com/embed/_FvTVWjLiHM'
}, {
title: 'Justin Bieber - Baby ft. Ludacris',
src: 'https://www.youtube.com/embed/kffacxfA7G4'
}, {
title: 'Charlie bit my finger - again !',
src: 'https://www.youtube.com/embed/_OBlgSz8sSM'
}];
// Hide the loading spinner:
$scope.videosLoading = false;
// Stick the videos into the DOM
$scope.videos = _videos;
}, 750);
$scope.submitNewVideo = function() {
// A little "spin-lock" to prevent double-submission
// (because disabling the submit button still allows double-posts
// if a user hits the ENTER key to submit the form multiple times.)
if ($scope.busySubmittingVideo) {
return;
}
// Harvest the data out of the form
// (thanks to ng-model, it's already in the $scope dictionary)
var _newVideo = {
title: $scope.newVideoTitle,
src: $scope.newVideoSrc,
};
// create placeholder anchor element
var parser = document.createElement('a');
// assign url to parser.href
parser.href = _newVideo.src
// Use the indexOf parser.search as the first argument and length of
// parser.search as the second argument of parser.search.substring
// The result is the YouTube ID --> LfOWehvvuo0
var youtubeID = parser.search.substring(parser.search.indexOf("=") + 1, parser.search.length);
_newVideo.src = 'https://www.youtube.com/embed/' + youtubeID;
// (this is where you put your client-side validation when relevant)
// Side note:
// Why not use something like `$scope.videoForm.title` or `$scope.newVideo.title`?
// While this certainly keeps things more organized, it is a bit risky in the Angular
// world. I'm no Angular expert, but we have run into plenty of 2-way-binding issues/bugs
// in the past from trying to do this. I've found two guiding principles that help prevent
// these sorts of issues:
// + very clearly separate the $scope variables in your form from the $scope variables
// representing the rest of your page.
// + don't point `ng-model` at the property of an object or array (e.g. `ng-model="foo.bar"`)
// Angular handles its 2-way bindings by reference, and it's not too hard to get into weird
// situations where your objects are all tangled up.
// Now we'll submit the new video to the server:
// First, show a loading state
// (also disables form submission)
$scope.busySubmittingVideo = true;
// Simulate a delay
$timeout(function() {
// TODO: handle error state from the server
// Success!
// Now we know it's the real deal and the server accepted our submission.
// Insert HTML for the newly added video into the DOM
$scope.videos.unshift(_newVideo);
// Hide the loading state
// (also re-enables form submission)
$scope.busySubmittingVideo = false;
// Clear out form inputs
$scope.newVideoTitle = '';
$scope.newVideoSrc = '';
}, 750);
}
}
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment