Famous-Angular Test

James Peret 8 years ago
parent
commit
d03b82ed15

+ 11 - 11
Gruntfile.js

@@ -42,25 +42,25 @@ module.exports = function(grunt) {
42 42
     },
43 43
     wiredep: {
44 44
       task: {
45
-        // Point to the files that should be updated when 
46
-        // you run `grunt wiredep` 
45
+        // Point to the files that should be updated when
46
+        // you run `grunt wiredep`
47 47
         src: [
48 48
           'app/*.html',
49
-		'app/views/**/*.html',   // .html support... 
50
-          'app/views/**/*.jade',   // .jade support... 
51
-          'app/styles/main.scss',  // .scss & .sass support... 
52
-          'app/config.yml'         // and .yml & .yaml support out of the box! 
49
+		'app/views/**/*.html',   // .html support...
50
+          'app/views/**/*.jade',   // .jade support...
51
+          'app/styles/main.scss',  // .scss & .sass support...
52
+          'app/config.yml'         // and .yml & .yaml support out of the box!
53 53
         ],
54 54
         options: {
55
-          // See wiredep's configuration documentation for the options 
56
-          // you may pass: 
57
-          // https://github.com/taptapship/wiredep#configuration 
55
+          // See wiredep's configuration documentation for the options
56
+          // you may pass:
57
+          // https://github.com/taptapship/wiredep#configuration
58 58
         }
59 59
       }
60 60
      },
61 61
 	serve: {
62 62
 	    options: {
63
-	        port: 9000,
63
+	        port: 8000,
64 64
 	    }
65 65
 	}
66 66
   });
@@ -79,4 +79,4 @@ module.exports = function(grunt) {
79 79
   // the default task can be run just by typing "grunt" on the command line
80 80
   grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'wiredep']);
81 81
 
82
-};
82
+};

+ 139 - 0
app/content/Data.json

@@ -0,0 +1,139 @@
1
+{
2
+  "website-name" : "Portfolio Go",
3
+	"content" : [
4
+		  {
5
+				"title"  : "Desenhos",
6
+				"id"     : "1",
7
+	    			"slides" : [
8
+	    				"content/images/triptico.jpg",
9
+					"content/images/A3.jpg",
10
+					"content/images/escultura_01.jpg",
11
+					"content/images/trifonia-01.png"
12
+	    			]
13
+			},
14
+		     {
15
+				"title"  : "Esculturas",
16
+				"id"     : "2",
17
+	    			"slides" : [
18
+					"content/images/escultura_01.jpg",
19
+					"content/images/trifonia-01.png"
20
+	    			]
21
+			},
22
+		     {
23
+				"title"  : "Poemas",
24
+				"id"     : "3",
25
+	    			"slides" : [
26
+					"content/images/trifonia-01.png",
27
+					"content/images/triptico.jpg",
28
+	    			]
29
+			},
30
+		     {
31
+				"title"  : "Filmes",
32
+				"id"     : "4",
33
+	    			"slides" : [
34
+					"content/images/trifonia-01.png",
35
+					"content/images/triptico.jpg",
36
+	    			]
37
+			},
38
+		     {
39
+				"title"  : "Fotos Contexto Humano",
40
+				"id"     : "5",
41
+	    			"slides" : [
42
+					"content/images/trifonia-01.png",
43
+					"content/images/triptico.jpg",
44
+	    			]
45
+			},
46
+		     {
47
+				"title"  : "Textos Críticos",
48
+				"id"     : "6",
49
+	    			"slides" : [
50
+					"content/images/trifonia-01.png",
51
+					"content/images/triptico.jpg",
52
+	    			]
53
+			},
54
+		     {
55
+				"title"  : "Currículo",
56
+				"id"     : "7",
57
+	    			"slides" : [
58
+					"content/images/trifonia-01.png",
59
+					"content/images/triptico.jpg",
60
+	    			]
61
+			}
62
+	    ],
63
+	    "navigation" : [
64
+		    {
65
+			    	"title"  : "Desenhos",
66
+				"type"   : "sub-nav",
67
+			     "id"     : "101",
68
+				"navigation" : [
69
+					{
70
+			    			"title"  : "Caligramas",
71
+						"type"   : "content",
72
+						"id"     : "1"
73
+					},
74
+					{
75
+			    			"title"  : "Figuras",
76
+						"type"   : "content",
77
+						"id"     : "2"
78
+					},
79
+					{
80
+			    			"title"  : "Cadernos",
81
+						"type"   : "content",
82
+						"id"     : "3"
83
+					}
84
+				]
85
+		    },
86
+		    {
87
+		    		"title"  : "Esculturas",
88
+				"type"   : "sub-nav",
89
+			     "id"     : "102",
90
+				"navigation" : [
91
+					{
92
+			    			"title"  : "Carvão & Tule",
93
+						"type"   : "content",
94
+						"id"     : "1"
95
+					},
96
+					{
97
+			    			"title"  : "Sono (Vidros)",
98
+						"type"   : "content",
99
+						"id"     : "2"
100
+					},
101
+					{
102
+			    			"title"  : "Relevos",
103
+						"type"   : "content",
104
+						"id"     : "3"
105
+					},
106
+					{
107
+			    			"title"  : "Cut-outs",
108
+						"type"   : "content",
109
+						"id"     : "3"
110
+					}
111
+				]
112
+		    },
113
+		    {
114
+		    		"title"  : "Poemas",
115
+				"type"   : "content",
116
+			     "id"     : "5"
117
+		    },
118
+		    {
119
+		    		"title"  : "Filmes",
120
+				"type"   : "content",
121
+			     "id"     : "6"
122
+		    },
123
+		    {
124
+		    		"title"  : "Fotos",
125
+				"type"   : "content",
126
+			     "id"     : "7"
127
+		    },
128
+		    {
129
+		    		"title"  : "Textos",
130
+				"type"   : "content",
131
+			     "id"     : "8"
132
+		    },
133
+		    {
134
+		    		"title"  : "Currículo",
135
+				"type"   : "content",
136
+			     "id"     : "9"
137
+		    }
138
+	    ]
139
+}

BIN
app/content/images/A3.jpg


BIN
app/content/images/cave-1.jpg


BIN
app/content/images/escultura_01.jpg


BIN
app/content/images/trifonia-01.png


BIN
app/content/images/triptico.jpg


BIN
app/content/videos/bg_1.mov


+ 45 - 51
app/index.html

@@ -1,55 +1,49 @@
1
-<html ng-app="myAppName">
2
-<head>
3
-	
4
-	
5
-	<!-- bower:js -->
6
-	
7
-	<script src="../bower_components/angular/angular.js"></script>
8
-	<script src="../bower_components/famous-angular/dist/famous-angular.js"></script>
9
-	<script src="../bower_components/famous/dist/famous-global.js"></script>
10
-	
11
-	<!-- endbower -->
12
-	
13
-	<script>
14
-  		angular.module('myAppName', ['famous.angular'])
15
-     		.controller('Lesson1Ctrl', function($scope, $famous, $timeline) {
16
-				$scope.data = {message: "Hello"};
17
-				
18
-				var Transitionable = $famous['famous/transitions/Transitionable'];
19
-				var Easing = $famous['famous/transitions/Easing'];
20
-
21
-				$scope.t = new Transitionable(0);
22
-
23
-
24
-				$scope.translation = $timeline([
25
-				  [0, [100, 100, 0], Easing.inOutQuad], 
26
-				  [0.25, [400, 200, 0], Easing.inOutQuad],
27
-				  [0.5, [300, 300, 0], Easing.inOutQuad],
28
-				  [0.75, [200, 500, 0], Easing.inOutQuad],
29
-				  [1, [100, 100, 0], Easing.inOutQuad],
30
-				]);
31
-				
32
-				$scope.t.delay((1000), function(){ // we will delay each animation based on index
33
-				    $scope.t.set(1, {duration: 3400}, function(){
34
-					    
35
-
36
-				    }); // we will set each Transitionable to 1 == which is the index of the $timeline to transition to
37
-				    
38
-
39
-				});
40
-     	});
41
-	</script>
42
-	
1
+<!doctype html>
2
+<html class="no-js">
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <title></title>
6
+    <meta name="description" content="">
7
+    <meta name="viewport" content="width=device-width">
8
+
9
+		<link rel="stylesheet" href="styles/main.css">
10
+
11
+		<!-- bower:js -->
12
+
13
+		<script src="../bower_components/angular/angular.js"></script>
14
+		<script src="../bower_components/famous-angular/dist/famous-angular.js"></script>
15
+		<script src="../bower_components/famous/dist/famous-global.js"></script>
16
+		<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
17
+
18
+		<!-- endbower -->
19
+
20
+		<script src="scripts/app.js"></script>
21
+
43 22
 </head>
44
-<body >
45
-	<fa-app ng-controller='Lesson1Ctrl' id="app">
46
-	<ui-view>
47
-	     <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >	    
48
-		  <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'">
49
-		    {{data.message}}
50
-		  </fa-surface>
51
-		 </fa-modifier>
23
+<body ng-app="goApp">
24
+	<fa-app ng-controller='indexController' id="app1">
25
+
26
+
27
+
28
+		<fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]">
29
+		 	<fa-video-surface
30
+		 	           fa-video-url="content/videos/bg_1.mov"
31
+		 	           class="video"
32
+		 	           fa-options="{autoplay:true, setAttributes: 'loop'}" >
33
+		 	</fa-video-surface>
34
+		</fa-modifier>
35
+	</fa-app>
36
+	<fa-app ng-controller='indexController' id="app2">
37
+	<fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1">
38
+		<ui-view style="position: absolute; z-index: 2;">
39
+				<fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >
40
+					  <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" >
41
+					    {{data.message}}
42
+					  </fa-surface>
43
+					 </fa-modifier>
44
+				 </fa-modifier>
45
+		</ui-view>
46
+	</fa-modifier>
52 47
 	</fa-app>
53 48
 </body>
54 49
 </html>
55
-

+ 54 - 0
app/scripts/app.js

@@ -0,0 +1,54 @@
1
+var goApp = angular.module('goApp', ['famous.angular']);
2
+
3
+var controllers = {};
4
+   controllers.indexController = function($scope, $famous, $timeline) {
5
+  $scope.data = {message: "Hello"};
6
+
7
+  var Transitionable = $famous['famous/transitions/Transitionable'];
8
+  var Easing = $famous['famous/transitions/Easing'];
9
+
10
+  $scope.t = new Transitionable(0);
11
+
12
+  $scope.translation = $timeline([
13
+    [0, [100, 100, 100], Easing.inOutQuad],
14
+    [0.25, [400, 200, 100], Easing.inOutQuad],
15
+    [0.5, [300, 300, 100], Easing.inOutQuad],
16
+    [0.75, [200, 500, 100], Easing.inOutQuad],
17
+    [1, [100, 100, 100], Easing.inOutQuad],
18
+  ]);
19
+
20
+  $scope.startAnimations = function(){
21
+    $scope.t.delay((1000), function(){ // we will delay each animation based on index
22
+        $scope.t.set(1, {duration: 3400}, function(){
23
+
24
+
25
+
26
+        });
27
+    });
28
+  }
29
+
30
+  var preload = new createjs.LoadQueue();
31
+  preload.addEventListener("fileload", handleFileComplete);
32
+  preload.loadFile('content/videos/bg_1.mov');
33
+  function handleFileComplete(event) {
34
+      console.log('File Loaded')
35
+      $scope.startAnimations();
36
+
37
+         // Make the video loop
38
+         var video = $famous.find('.video')[0].renderNode; video.on('deploy', function(){
39
+           var player = video._currTarget;
40
+           player.controls = true;
41
+           player.loop = true;
42
+           player.onprogress = console.log('video is downloading');
43
+         });
44
+
45
+  }
46
+
47
+
48
+
49
+   };
50
+
51
+
52
+
53
+
54
+goApp.controller(controllers);

+ 57 - 0
app/styles/main.css

@@ -0,0 +1,57 @@
1
+html {
2
+  background: #fff;
3
+}
4
+
5
+body {
6
+  margin: 0px;
7
+  width: 100%;
8
+  overflow-x: hidden;
9
+}
10
+
11
+.backfaceVisibility {
12
+  -webkit-backface-visibility: visible;
13
+  backface-visibility: visible;
14
+}
15
+
16
+.btn-menu {
17
+  color: black;
18
+  border: none;
19
+  text-transform: uppercase;
20
+  background-color: white;
21
+  font-size: 14px;
22
+  font-family: Helvetica;
23
+  text-align: left;
24
+  font-weight: 600;
25
+  margin-left: 15px;
26
+  margin-right: 15px;
27
+  margin-bottom: 15px;
28
+  cursor: pointer;
29
+}
30
+
31
+.btn-menu:hover {
32
+  color: white;
33
+  background-color: black;
34
+}
35
+
36
+.btn-slideshow {
37
+  cursor: pointer;
38
+  background-color: white;
39
+}
40
+
41
+.btn-slideshow:hover {
42
+  background-color: #F2F2F2;
43
+  color: red;
44
+}
45
+
46
+video {
47
+  width: auto    !important;
48
+  height: 100%   !important;
49
+}
50
+
51
+fa-app {
52
+  position: absolute;
53
+  top: 0;
54
+  right: 0;
55
+  bottom: 0;
56
+  left: 0;
57
+}