sea-401d5-javascript · vbenavente · Jun 22, 2016 · Jun 22, 2016 · Jun 22, 2016 · Jun 22, 2016
diff --git a/vic-bunny/.eslintignore b/vic-bunny/.eslintignore
@@ -0,0 +1,8 @@
+**/node_modules/*
+**/vendor/*
+**/build/*
+**/*.min.js
+*.md
+package.json
+Procfile
+npm-debug.log
diff --git a/vic-bunny/.eslintrc b/vic-bunny/.eslintrc
@@ -0,0 +1,42 @@
+{
+"rules": {
+"no-console": 0,
+"indent": [
+2,
+2
+],
+"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/vic-bunny/.gitignore b/vic-bunny/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+build
+db
+*_bundle.js
diff --git a/vic-bunny/app/css/app.css b/vic-bunny/app/css/app.css
@@ -0,0 +1,24 @@
+body {
+  background-color: #777777;
+}
+
+ul {
+  list-style-type: none;
+  background-color: #87CEEB;
+  margin: 5px, 0px, 5px, 0px;
+  width: 60%;
+  padding: 0px, 20px, 0px, 20px;
+}
+
+li {
+  display: inline-block;
+}
+
+img {
+    border: 4px solid #333333;
+    margin-top: 3px;
+}
+
+img:hover {
+  transform: scale(1.1);
+}
diff --git a/vic-bunny/app/index.html b/vic-bunny/app/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Photo Album</title>
+  <link rel="stylesheet" href="app.css">
+</head>
+<body data-ng-app="PhotoAlbum">
+  <main ng-cloak ng-controller="PhotoAlbumController as albumctrl">
+    <photo-album photos="albumctrl.weimeraners.photos" title="{{albumctrl.weimeraners.title}}" description="{{albumctrl.weimeraners.description}}"></photo-album>
+    <photo-album photos="albumctrl.piglets.photos" title="{{albumctrl.piglets.title}}" description="{{albumctrl.piglets.description}}"></photo-album>
+    <photo-album photos="albumctrl.hedgehogs.photos" title="{{albumctrl.hedgehogs.title}}" description="{{albumctrl.hedgehogs.description}}"></photo-album>
+  </main>
+  <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/vic-bunny/app/js/client.js b/vic-bunny/app/js/client.js
@@ -0,0 +1,6 @@
+'use strict';
+
+const angular =  require('angular');
+const app = angular.module('PhotoAlbum', []);
+
+require('./photoalbum')(app);
diff --git a/vic-bunny/app/js/photoalbum/controllers/bunny-controller.js b/vic-bunny/app/js/photoalbum/controllers/bunny-controller.js
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function(app) {
+  app.controller('BunnyController', ['$scope', function() {
+    this.title = 'Vicious Bunny';
+    this.height = 400;
+    this.width = 400;
+    this.description = 'Don\'t get too close or this vicious little monster will attack! This particular species can devour the average man in 13.7 seconds.';
+    this.link = 'http://f.cl.ly/items/3g3J1G0w122M360w380O/3726490195_f7cc75d377_o.jpg';
+  }]);
+};
diff --git a/vic-bunny/app/js/photoalbum/controllers/index.js b/vic-bunny/app/js/photoalbum/controllers/index.js
@@ -0,0 +1,4 @@
+module.exports = function(app) {
+  require('./bunny-controller')(app);
+  require('./photoalbum-controller')(app);
+};
diff --git a/vic-bunny/app/js/photoalbum/controllers/photoalbum-controller.js b/vic-bunny/app/js/photoalbum/controllers/photoalbum-controller.js
@@ -0,0 +1,64 @@
+'use strict';
+
+module.exports = function(app) {
+  app.controller('PhotoAlbumController', PhotoAlbumController);
+
+  function PhotoAlbumController() {
+    this.weimeraners = {
+      title: 'Weimeraner Puppies Photo Album',
+      description: 'Weimeraners are adorable!',
+      photos: [
+        {
+          url:'https://www.greenfieldpuppies.com/wp-content/plugins/gfp/images/big/pup_x_1371865636_0.jpg',
+          alt:'Adorable Weimeraner 1'
+        },
+        {
+          url:'http://tracieblue.com/last_litter/Blue%20Weimaraner%20Puppy%20Pink%201.jpg',
+          alt:'Adorable Weimeraner 2'
+        },
+        {
+          url:'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTJxJ1p4MBzwQBU6h3GFmieJOdfydtFhymksj4mCnE0FJwAij33rA',
+          alt:'Adorable Weimeraner 3'
+        }
+      ]
+    };
+
+    this.piglets = {
+      title: 'Piglets Photo Album',
+      description: 'Piglets are too cute!',
+      photos: [
+        {
+          url:'http://www.tehcute.com/pics/201307/piglet-keeping-cool.jpg',
+          alt:'Too Cute Piglet 1'
+        },
+        {
+          url:'https://c2.staticflickr.com/6/5019/5476287563_ee1ab67638_z.jpg',
+          alt:'Too Cute Piglet 2'
+        },
+        {
+          url:'http://justcuteanimals.com/wp-content/uploads/2014/09/cute-piglet-animal-pictures-pigs-piggies-pics.jpg',
+          alt:'Too Cute Piglet 3'
+        }
+      ]
+    };
+
+    this.hedgehogs = {
+      title: 'Hedgehogs Photo Album',
+      description: 'Hedgehogs are Adorable!',
+      photos: [
+        {
+          url:'https://s-media-cache-ak0.pinimg.com/236x/d5/65/75/d56575af0463fff19dc043545edceced.jpg',
+          alt:'Adorable Hedgehog 1'
+        },
+        {
+          url:'http://justcuteanimals.com/wp-content/uploads/2012/11/cute-animal-skateboard-baby-hedgehog-table-pics.jpg',
+          alt:'Adorable Hedgehog 2'
+        },
+        {
+          url:'http://40.media.tumblr.com/1e0315765429e4d2e5315a86bb176e02/tumblr_nmxdzmT3QD1ura9vuo1_500.jpg',
+          alt:'Adorable Hedgehog 3'
+        }
+      ]
+    };
+  }
+};
diff --git a/vic-bunny/app/js/photoalbum/directives/fullsize-directive.js b/vic-bunny/app/js/photoalbum/directives/fullsize-directive.js
@@ -0,0 +1,13 @@
+module.exports = function(app) {
+  app.directive('fullSize', function() {
+    return {
+      templateUrl:
+      './templates/photoalbum/fullsize-directive.html',
+      restrict: 'E',
+      scope: {
+        url: '=',
+        alt: '='
+      }
+    };
+  });
+};
diff --git a/vic-bunny/app/js/photoalbum/directives/index.js b/vic-bunny/app/js/photoalbum/directives/index.js
@@ -0,0 +1,7 @@
+module.exports = function(app) {
+  require('./textonly-directive')(app);
+  require('./thumbsize-directive')(app);
+  require('./fullsize-directive')(app);
+  require('./photoalbum-directive')(app);
+  require('./mytest')(app);
+};
diff --git a/vic-bunny/app/js/photoalbum/directives/mytest.js b/vic-bunny/app/js/photoalbum/directives/mytest.js
@@ -0,0 +1,11 @@
+module.exports = function(app) {
+  app.directive('myTest', function() {
+    return {
+      templateUrl: './templates/photoalbum/mytest.html',
+      scope: {
+        data: '='
+      },
+      replace: true
+    };
+  });
+};
diff --git a/vic-bunny/app/js/photoalbum/directives/photoalbum-directive.js b/vic-bunny/app/js/photoalbum/directives/photoalbum-directive.js
@@ -0,0 +1,31 @@
+module.exports = function(app) {
+  app.directive('photoAlbum', function() {
+    return {
+      templateUrl:
+      './templates/photoalbum/photoalbum-directive.html',
+      restrict: 'E',
+      scope: {
+        title: '@',
+        description: '@',
+        photos: '='
+      },
+
+      controller:function($scope) {
+        $scope.mode = 'text';
+        $scope.changeView = function() {
+          console.log($scope.mode);
+        };
+
+        $scope.showThumbAsFull = function(photo) {
+          if(!photo) {
+            $scope.mode = 'thumb';
+            return;
+          }
+
+          $scope.currentPhoto = photo;
+          $scope.mode = 'full';
+        };
+      }
+    };
+  });
+};
diff --git a/vic-bunny/app/js/photoalbum/directives/textonly-directive.js b/vic-bunny/app/js/photoalbum/directives/textonly-directive.js
@@ -0,0 +1,14 @@
+module.exports = function(app) {
+  app.directive('textOnly', function() {
+    return {
+      templateUrl:
+      './templates/photoalbum/textonly-directive.html',
+      restrict: 'E',
+      scope: {
+        title: '@',
+        link: '@',
+        description: '@'
+      }
+    };
+  });
+};
diff --git a/vic-bunny/app/js/photoalbum/directives/thumbsize-directive.js b/vic-bunny/app/js/photoalbum/directives/thumbsize-directive.js
@@ -0,0 +1,13 @@
+module.exports = function(app) {
+  app.directive('thumbSize', function() {
+    return {
+      templateUrl:
+      './templates/photoalbum/thumbsize-directive.html',
+      restrict: 'E',
+      scope: {
+        url: '=',
+        alt: '='
+      }
+    };
+  });
+};
diff --git a/vic-bunny/app/js/photoalbum/index.js b/vic-bunny/app/js/photoalbum/index.js
@@ -0,0 +1,4 @@
+module.exports = function(app) {
+  require('./controllers')(app);
+  require('./directives')(app);
+};
diff --git a/vic-bunny/app/templates/photoalbum/fullsize-directive.html b/vic-bunny/app/templates/photoalbum/fullsize-directive.html
@@ -0,0 +1,3 @@
+<li>
+  <img src="{{url}}" height="400" width="400" alt="{{alt}}">
+</li>
diff --git a/vic-bunny/app/templates/photoalbum/mytest.html b/vic-bunny/app/templates/photoalbum/mytest.html
@@ -0,0 +1,3 @@
+<div>
+  <h2>{{data}}</h2>
+</div>
diff --git a/vic-bunny/app/templates/photoalbum/photoalbum-directive.html b/vic-bunny/app/templates/photoalbum/photoalbum-directive.html
@@ -0,0 +1,13 @@
+<div>
+  <ul ng-if="mode === 'text'">
+    <text-only title="{{title}}" description="{{description}}"></text-only>
+  </ul>
+  <ul ng-if="mode === 'thumb'">
+    <thumb-size url="photo.url" alt="photo.alt" ng-repeat="photo in photos" ng-click="showThumbAsFull(photo)"></thumb-size>
+  </ul>
+  <ul>
+    <full-size ng-if="mode === 'full'" url="currentPhoto.url" alt="photo.alt" ng-click="showThumbAsFull()"></full-size>
+  </ul>
+  <label>Table View<input type="radio" name="mode" value="text" ng-model="mode" ng-click="changeView()"/></label>
+  <label>Grid View<input type="radio" name="mode" value="thumb" ng-model="mode" ng-click="changeView()"/></label>
+</div>
diff --git a/vic-bunny/app/templates/photoalbum/textonly-directive.html b/vic-bunny/app/templates/photoalbum/textonly-directive.html
@@ -0,0 +1,4 @@
+<li>
+  <h1>{{title}}</h1>
+  <h3>{{description}}</h3>
+</li>
diff --git a/vic-bunny/app/templates/photoalbum/thumbsize-directive.html b/vic-bunny/app/templates/photoalbum/thumbsize-directive.html
@@ -0,0 +1,3 @@
+<li>
+  <img src="{{url}}" width="100" height="100" alt="{{alt}}">
+</li>
diff --git a/vic-bunny/gulpfile.js b/vic-bunny/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+const gulp = require('gulp');
+const eslint = require('gulp-eslint');
+const webpack = require('webpack-stream');
+
+var files = ['*.js', './app/*.js', './app/js/*.js', './app/js/photoalbum/*.js', './app/js/photoalbum/controllers/*.js', './app/js/photoalbum/directives/*.js'];
+
+const paths = {
+  js:__dirname + '/app/js/**/**/*.js',
+  html:__dirname + '/app/**/*.html',
+  css:__dirname + '/app/css/*.css'
+};
+
+gulp.task('lint', () => {
+  return gulp.src(files)
+  .pipe(eslint())
+  .pipe(eslint.format());
+});
+
+gulp.task('copy-html', () => {
+  return gulp.src(paths.html)
+  .pipe(gulp.dest(__dirname + '/build'));
+});
+
+gulp.task('copy-css', () => {
+  return gulp.src(paths.css)
+  .pipe(gulp.dest(__dirname + '/build'));
+});
+
+gulp.task('bundle', () => {
+  return gulp.src(paths.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('default', ['bundle', 'copy-html', 'copy-css']);
+
+gulp.task('watch', () => {
+  gulp.watch(paths.js, ['lint', 'bundle']);
+  gulp.watch(paths.html, ['copy-html']);
+  gulp.watch(paths.css, ['copy-css']);
+});