sea-401d5-javascript · stefuhnee · Jun 21, 2016 · Jun 21, 2016 · Jun 21, 2016 · Jun 21, 2016
diff --git a/stefanie-hansen/.eslintignore b/stefanie-hansen/.eslintignore
@@ -0,0 +1,7 @@
+**/node_modules/*
+**/vendor/*
+**/*.min.js
+**/build/*
+**/test/*_bundle*
+*.md
+package.json
diff --git a/stefanie-hansen/.eslintrc b/stefanie-hansen/.eslintrc
@@ -0,0 +1,45 @@
+{
+"rules": {
+"no-console": 0,
+"indent": [
+2,
+2,
+{
+"SwitchCase": 1
+}
+],
+"quotes": [
+2,
+"single"
+],
+"linebreak-style": [
+2,
+"unix"
+],
+"semi": [
+2,
+"always"
+]
+},
+"env": {
+"es6": true,
+"node": true,
+"browser": true,
+"mocha": true,
+"jasmine": true
+},
+"globals": {
+"describe": false,
+"it": false,
+"beforeEach": false,
+"afterEach": false,
+"before": false,
+"after": false
+},
+"ecmaFeatures": {
+"modules": true,
+"experimentalObjectRestSpread": true,
+"impliedStrict": true
+},
+"extends": "eslint:recommended"
+}
diff --git a/stefanie-hansen/.gitignore b/stefanie-hansen/.gitignore
@@ -0,0 +1,106 @@
+# Created by https://www.gitignore.io/api/node,osx,windows,vim
+
+build/
+test/test-bundle.js
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+
+### OSX ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Windows ###
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+
+### Vim ###
+# swap
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+# auto-generated tag files
+tags
diff --git a/stefanie-hansen/app/css/style.css b/stefanie-hansen/app/css/style.css
@@ -0,0 +1,22 @@
+body {
+  text-align: center;
+  font-family: Helvetica;
+}
+
+img {
+  display: inline;
+  border-radius: 15px;
+}
+
+input {
+  margin: 20px 0;
+  margin-left: 5px;
+}
+
+label {
+  margin: 20px 0;
+}
+
+.gallery {
+  display: inline;
+}
diff --git a/stefanie-hansen/app/index.html b/stefanie-hansen/app/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Cute Mammals</title>
+</head>
+
+<body data-ng-app="CuteApp">
+
+    <main ng-cloak ng-controller="AlbumController as albumctrl">
+
+      <h1>Sloths, Red Pandas, and Kittens, Oh My!</h1>
+
+      <photo-album-directive animal="albumctrl.sloths" class="album"></photo-album-directive>
+      <photo-album-directive animal="albumctrl.redPandas" class="album"></photo-album-directive>
+      <photo-album-directive animal="albumctrl.kittens" class="album"></photo-album-directive>
+
+    </main>
+    <script src="bundle.js"></script>
+</body>
+
+</html>
diff --git a/stefanie-hansen/app/js/CuteApp/controllers/album-controller.js b/stefanie-hansen/app/js/CuteApp/controllers/album-controller.js
@@ -0,0 +1,22 @@
+module.exports = function(app) {
+  app.controller('AlbumController', ['$scope', function() {
+
+    this.sloths = {
+      title: 'Sloths',
+      description: 'The slowest and the cutest',
+      images: ['http://i.imgur.com/yLQVpWg.jpg', 'http://i.imgur.com/vwPNvtT.jpg', 'http://i.imgur.com/PyMOoJn.jpg', 'http://i.imgur.com/p1zI1rv.jpg', 'http://i.imgur.com/0tA76mt.jpg', 'http://i.imgur.com/5AnQqFq.jpg']
+    };
+
+    this.redPandas = {
+      title: 'Red Pandas',
+      description: 'Like pandas, but cuter.',
+      images: ['http://i.imgur.com/Bui0wgS.jpg', 'http://i.imgur.com/eziiTe1.jpg', 'http://i.imgur.com/CVsYUNQ.jpg', 'http://i.imgur.com/QuKhUoR.jpg', 'http://i.imgur.com/0YXORaB.jpg', 'http://i.imgur.com/IM5yOVz.jpg', 'http://i.imgur.com/ANsdnaH.jpg']
+    };
+
+    this.kittens = {
+      title: 'Kittens',
+      description: 'Nothing needs to be said.',
+      images: ['http://i.imgur.com/ozEaj1Z.png', 'http://i.imgur.com/LBfAioO.jpg', 'http://i.imgur.com/a4ZxA5u.jpg', 'http://i.imgur.com/MLsKJLZ.jpg', 'http://i.imgur.com/EqxkgdR.jpg', 'http://i.imgur.com/KBHvE1c.jpg', 'http://i.imgur.com/si8LnGy.jpg']
+    };
+  }]);
+};
diff --git a/stefanie-hansen/app/js/CuteApp/controllers/index.js b/stefanie-hansen/app/js/CuteApp/controllers/index.js
@@ -0,0 +1,3 @@
+module.exports = function(app) {
+  require('./album-controller')(app);
+};
diff --git a/stefanie-hansen/app/js/CuteApp/directives/album-directive.js b/stefanie-hansen/app/js/CuteApp/directives/album-directive.js
@@ -0,0 +1,23 @@
+module.exports = function(app) {
+  app.directive('photoAlbumDirective', function() {
+    return {
+      templateUrl: './templates/CuteApp/album.html',
+      scope: {
+        animal: '='
+      },
+      controller: function($scope) {
+        $scope.changeView = function() {
+          $scope.mode === 'thumbnails' ? $scope.mode === 'descriptions' : $scope.mode === 'thumbnails';
+        };
+        $scope.toggleImage = function(image) {
+          if (image) {
+            $scope.currentimageurl = image;
+            $scope.mode = 'full';
+            return;
+          }
+          $scope.mode = 'thumbnails';
+        };
+      }
+    };
+  });
+};
diff --git a/stefanie-hansen/app/js/CuteApp/directives/description-directive.js b/stefanie-hansen/app/js/CuteApp/directives/description-directive.js
@@ -0,0 +1,10 @@
+module.exports = function(app) {
+  app.directive('descriptionDirective', function() {
+    return {
+      templateUrl: './templates/CuteApp/description.html',
+      scope: {
+        animal: '='
+      }
+    };
+  });
+};
diff --git a/stefanie-hansen/app/js/CuteApp/directives/full-directive.js b/stefanie-hansen/app/js/CuteApp/directives/full-directive.js
@@ -0,0 +1,10 @@
+module.exports = function(app) {
+  app.directive('fullDirective', function() {
+    return {
+      templateUrl: './templates/CuteApp/full.html',
+      scope: {
+        currentimageurl: '='
+      }
+    };
+  });
+};
diff --git a/stefanie-hansen/app/js/CuteApp/directives/index.js b/stefanie-hansen/app/js/CuteApp/directives/index.js
@@ -0,0 +1,6 @@
+module.exports = function(app) {
+  require('./description-directive')(app);
+  require('./full-directive')(app);
+  require('./thumbnail-directive')(app);
+  require('./album-directive')(app);
+};
diff --git a/stefanie-hansen/app/js/CuteApp/directives/thumbnail-directive.js b/stefanie-hansen/app/js/CuteApp/directives/thumbnail-directive.js
@@ -0,0 +1,10 @@
+module.exports = function(app) {
+  app.directive('thumbnailDirective', function() {
+    return {
+      templateUrl: './templates/CuteApp/thumbnail.html',
+      scope: {
+        imageurl: '='
+      }
+    };
+  });
+};
diff --git a/stefanie-hansen/app/js/CuteApp/index.js b/stefanie-hansen/app/js/CuteApp/index.js
@@ -0,0 +1,4 @@
+module.exports = function(app) {
+  require('./controllers')(app);
+  require('./directives')(app);
+};
diff --git a/stefanie-hansen/app/js/client.js b/stefanie-hansen/app/js/client.js
@@ -0,0 +1,6 @@
+'use strict';
+
+const angular = require('angular');
+
+const CuteApp = angular.module('CuteApp', []);
+require('./CuteApp')(CuteApp);
diff --git a/stefanie-hansen/app/templates/CuteApp/album.html b/stefanie-hansen/app/templates/CuteApp/album.html
@@ -0,0 +1,15 @@
+<div ng-init="mode = 'thumbnails'">
+
+  <description-directive animal="animal" ng-show="mode === 'descriptions'"></description-directive>
+
+  <div ng-repeat="imageurl in animal.images" class="gallery">
+    <thumbnail-directive imageUrl="imageurl" ng-click="toggleImage(imageurl)" ng-show="mode === 'thumbnails'"></thumbnail-directive>
+  </div>
+
+  <full-directive ng-click="toggleImage()" currentimageurl="currentimageurl" ng-show="mode === 'full'"></full-directive>
+
+  <div>
+    <label>Descriptions<input type="radio" name="mode" value="descriptions" ng-model="mode" ng-change="changeView()"/></label>
+    <label>Thumbnails<input type="radio" name="mode" value="thumbnails" ng-model="mode" ng-change="changeView()"/></label>
+  </div>
+</div>
diff --git a/stefanie-hansen/app/templates/CuteApp/description.html b/stefanie-hansen/app/templates/CuteApp/description.html
@@ -0,0 +1,2 @@
+<h1>{{animal.title}}</h1>
+<h2>{{animal.description}}</h2>
diff --git a/stefanie-hansen/app/templates/CuteApp/full.html b/stefanie-hansen/app/templates/CuteApp/full.html
@@ -0,0 +1 @@
+<img src="{{currentimageurl}}"/>
diff --git a/stefanie-hansen/app/templates/CuteApp/thumbnail.html b/stefanie-hansen/app/templates/CuteApp/thumbnail.html
@@ -0,0 +1 @@
+<img src="{{imageurl}}" height=100>
diff --git a/stefanie-hansen/gulpfile.js b/stefanie-hansen/gulpfile.js
@@ -0,0 +1,36 @@
+'use strict';
+
+const gulp    = require('gulp');
+const webpack = require('webpack-stream');
+
+gulp.task('copy', () => {
+  gulp.src(__dirname + '/app/**/*.html')
+    .pipe(gulp.dest(__dirname + '/build'));
+  gulp.src(__dirname + '/app/css/style.css')
+    .pipe(gulp.dest(__dirname + '/build'));
+});
+
+gulp.task('bundle', () => {
+  return gulp.src('./app/js/client.js')
+    .pipe(webpack({output:{filename: 'bundle.js'}}))
+    .pipe(gulp.dest('./build'));
+});
+
+gulp.task('bundle:test', () => {
+  return gulp.src('./test/**/*-test.js')
+    .pipe(webpack({
+      output:{
+        filename: 'test-bundle.js'
+      },
+      module: {
+        loaders: [{
+          test: /\.html$/,
+          loader: 'html'
+        }]
+      }
+    })).pipe(gulp.dest('./test'));
+});
+
+gulp.task('build', ['copy', 'bundle']);
+
+gulp.task('default', ['build']);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<h1>{{animal.title}}</h1>
		<h2>{{animal.description}}</h2>