首页 探索 帮助
注册 登录
jamesperet
/
portfolio-james-v2
关注 2
点赞 0
派生 0

浏览代码
Text page and video page added

James Peret 10 年之前
父节点
5b4d5a26ce
当前提交
d60667cc86
共有 9 个文件被更改，包括 206 次插入 和 24 次删除
显示文件统计
  1. 4 1
      app/index.html
  2. 14 1
      app/scripts/app.js
  3. 45 0
      app/scripts/controllers/page.js
  4. 45 0
      app/scripts/controllers/video.js
  5. 25 21
      app/scripts/data.json
  6. 48 0
      app/styles/main.css
  7. 11 0
      app/views/page.html
  8. 12 0
      app/views/video.html
  9. 2 1
      bower.json

+ 4 - 1
app/index.html
查看文件 

@@ -29,7 +29,8 @@
29 29
30 30 
 		<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
31 31
32 
-
32 
+    <script src="https://www.youtube.com/iframe_api"></script>
33 
+    <script src="../bower_components/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
33 34
34 35 
 		<!-- endbower -->
35 36 
 
@@ -38,6 +39,8 @@
38 39 
     <script src="scripts/controllers/background.js"></script>
39 40 
     <script src="scripts/controllers/navigation.js"></script>
40 41 
     <script src="scripts/controllers/slideshow.js"></script>
42 
+    <script src="scripts/controllers/page.js"></script>
43 
+    <script src="scripts/controllers/video.js"></script>
41 44 
     <script src="scripts/directives/wallop-slider.js"></script>
42 45 
     <script src="scripts/services/data.js"></script>
43 46 
     <script src="scripts/services/getController.js"></script>

+ 14 - 1
app/scripts/app.js
查看文件 

@@ -18,11 +18,14 @@ angular
18 18 
     'ngTouch',
19 19 
     'famous.angular',
20 20 
     'ngFx',
21 
+    'youtube-embed',
21 22 
     'goApp.data',
22 23 
     'goApp.index',
23 24 
     'goApp.background',
24 25 
     'goApp.navigation',
25 26 
     'goApp.slideshow',
27 
+    'goApp.page',
28 
+    'goApp.video',
26 29 
     'goApp.slider',
27 30 
   ])
28 31 
 
@@ -42,10 +45,20 @@ angular
42 45 
       controller: 'IndexController'
43 46 
     })
44 47 
     .state('slideshow', {
45 
-      url: "/:slideshow",
48 
+      url: "/slideshow/:slideshow",
46 49 
       templateUrl: "views/slideshow.html",
47 50 
       controller: 'SlideshowController'
48 51 
     })
52 
+    .state('movie', {
53 
+      url: "/filmes/:filme",
54 
+      templateUrl: "views/video.html",
55 
+      controller: 'VideoController'
56 
+    })
57 
+    .state('text', {
58 
+      url: "/textos/:texto",
59 
+      templateUrl: "views/page.html",
60 
+      controller: 'PageController'
61 
+    })
49 62
50 63
51 64 
   }])

+ 45 - 0
app/scripts/controllers/page.js
查看文件 

@@ -0,0 +1,45 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.page', ['ngFx', 'ngAnimate', 'goApp.data'])
11 
+  .controller('PageController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope,  $rootScope, $famous, $timeline, $location, $route, $timeout, Data) {
12 
+
13 
+    console.log('> Loading Text Page')
14 
+
15 
+    // Get Page Data
16 
+    var link = $location.url()
17 
+    $scope.pageData = Data.getPageData(link);
18 
+    $rootScope.$on('data:loaded', function(data) {
19 
+      if(!$scope.$$phase) {
20 
+        $scope.$apply(function(){
21 
+          $scope.pageData = Data.getPageData(link);
22 
+          $scope.showSlider();
23 
+        });
24 
+      }
25 
+    });
26 
+
27 
+    // FadeIn
28 
+    $timeout(function(){
29 
+      $scope.showView = true;
30 
+    },100);
31 
+    // FadeOut
32 
+    $scope.fadeOut = function() {
33 
+      $scope.showView = false;
34 
+      $timeout(function(){
35 
+        $scope.showView = false;
36 
+        $location.path("/");
37 
+      },800);
38 
+    }
39 
+
40 
+
41 
+
42 
+
43 
+
44 
+
45 
+  }]);

+ 45 - 0
app/scripts/controllers/video.js
查看文件 

@@ -0,0 +1,45 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.video', ['ngFx', 'ngAnimate', 'goApp.data'])
11 
+  .controller('VideoController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope,  $rootScope, $famous, $timeline, $location, $route, $timeout, Data) {
12 
+
13 
+    console.log('> Loading Text Page')
14 
+
15 
+    // Get Page Data
16 
+    var link = $location.url()
17 
+    $scope.pageData = Data.getPageData(link);
18 
+    $rootScope.$on('data:loaded', function(data) {
19 
+      if(!$scope.$$phase) {
20 
+        $scope.$apply(function(){
21 
+          $scope.pageData = Data.getPageData(link);
22 
+          $scope.showSlider();
23 
+        });
24 
+      }
25 
+    });
26 
+
27 
+    // FadeIn
28 
+    $timeout(function(){
29 
+      $scope.showView = true;
30 
+    },100);
31 
+    // FadeOut
32 
+    $scope.fadeOut = function() {
33 
+      $scope.showView = false;
34 
+      $timeout(function(){
35 
+        $scope.showView = false;
36 
+        $location.path("/");
37 
+      },800);
38 
+    }
39 
+
40 
+
41 
+
42 
+
43 
+
44 
+
45 
+  }]);

+ 25 - 21
app/scripts/data.json
查看文件 

@@ -9,7 +9,7 @@
9 9 
       [
10 10 
         {
11 11 
           "title"   : "Caligramas",
12 
-          "link"    : "/caligramas",
12 
+          "link"    : "/slideshow/caligramas",
13 13 
           "slides"  :
14 14 
           [
15 15 
             {
 
@@ -31,7 +31,7 @@
31 31 
         },
32 32 
         {
33 33 
           "title"   : "Figuras",
34 
-          "link"    : "/figuras",
34 
+          "link"    : "/slideshow/figuras",
35 35 
           "slides"  :
36 36 
           [
37 37 
             {
 
@@ -91,7 +91,7 @@
91 91 
           [
92 92 
             {
93 93 
               "title"   : "York Cathedral",
94 
-              "link"    : "/york-cathedral",
94 
+              "link"    : "/slideshow/york-cathedral",
95 95 
               "slides"  :
96 96 
               [
97 97 
                 {
 
@@ -110,7 +110,7 @@
110 110 
             },
111 111 
             {
112 112 
               "title"   : "Bologramas",
113 
-              "link"    : "/bologramas",
113 
+              "link"    : "/slideshow/bologramas",
114 114 
               "slides"  :
115 115 
               [
116 116 
                 {
 
@@ -161,7 +161,7 @@
161 161 
             },
162 162 
             {
163 163 
               "title"   : "Sarrafos & Garranchos",
164 
-              "link"    : "/sarrafos-e-garranchos",
164 
+              "link"    : "/slideshow/sarrafos-e-garranchos",
165 165 
               "slides"  :
166 166 
               [
167 167 
                 {
 
@@ -186,7 +186,7 @@
186 186 
         },
187 187 
         {
188 188 
           "title"   : "Caverna",
189 
-          "link"    : "/caverna",
189 
+          "link"    : "/slideshow/caverna",
190 190 
           "slides"  :
191 191 
           [
192 192 
             {
 
@@ -213,15 +213,15 @@
213 213 
       [
214 214 
         {
215 215 
           "title" : "Carvão & Tule",
216 
-          "link"  : "/carvao-e-tule"
216 
+          "link"  : "/slideshow/carvao-e-tule"
217 217 
         },
218 218 
         {
219 219 
           "title": "Sono (vidros)",
220 
-          "link" : "/sono"
220 
+          "link" : "/slideshow/sono"
221 221 
         },
222 222 
         {
223 223 
           "title" : "Relevos",
224 
-          "link"  : "/relevos",
224 
+          "link"  : "/slideshow/relevos",
225 225 
           "slides"  :
226 226 
           [
227 227 
             {
 
@@ -268,7 +268,7 @@
268 268 
         },
269 269 
         {
270 270 
           "title" : "cut-outs",
271 
-          "link"  : "/cut-outs",
271 
+          "link"  : "/slideshow/cut-outs",
272 272 
           "slides"  :
273 273 
           [
274 274 
             {
 
@@ -289,7 +289,8 @@
289 289 
     },
290 290 
     {
291 291 
       "title"  : "poemas",
292 
-      "link"   : "/poemas"
292 
+      "link"   : "/textos/poemas",
293 
+      "content": "<p><span>Em breve...</span></p>"
293 294 
     },
294 295 
     {
295 296 
       "title"   : "filmes",
 
@@ -297,34 +298,37 @@
297 298 
       "submenu" :
298 299 
       [
299 300 
         {
300 
-          "title" : "Trifonia",
301 
-          "link"  : "/trifonia"
301 
+          "title"    : "Trifonia",
302 
+          "link"     : "/filmes/trifonia",
303 
+          "videoUrl" : "fIEXEIOyh9Q"
302 304 
         },
303 305 
         {
304 306 
           "title" : "Sonho contra-sono",
305 
-          "link"  : "#sonho-contra-sono"
307 
+          "link"  : "/filmes/sonho-contra-sono"
306 308 
         },
307 309 
         {
308 310 
           "title" : "Animações",
309 
-          "link"  : "/animacoes"
311 
+          "link"  : "/filmes/animacoes"
310 312 
         },
311 313 
         {
312 314 
           "title" : "Performances",
313 
-          "link"  : "/performances"
315 
+          "link"  : "/filmes/performances"
314 316 
         }
315 317 
       ]
316 318 
     },
317 319 
     {
318 
-      "title" : "Fotos Contexto Humano",
319 
-      "link"  : "/fotos-contexto-humano"
320 
+      "title" : "Fotos",
321 
+      "link"  : "/slideshow/fotos"
320 322 
     },
321 323 
     {
322 324 
       "title" : "Textos Críticos",
323 
-      "link"  : "/textos-criticos"
325 
+      "link"  : "/textos/textos-criticos",
326 
+      "content": "<p><span>Em breve...</span></p>"
324 327 
     },
325 328 
     {
326 
-      "title" : "Currículo",
327 
-      "link"  : "/curriculo"
329 
+      "title"  : "Currículo",
330 
+      "link"   : "/textos/curriculo",
331 
+      "content": "<p><span>Veja o currículo <a href=\"http://google.com\">aqui</a><span></p>"
328 332 
     }
329 333 
   ]
330 334 
 }

+ 48 - 0
app/styles/main.css
查看文件 

@@ -168,3 +168,51 @@ fa-app {
168 168 
   text-decoration: none;
169 169 
   padding-top: 1px;
170 170 
 }
171 
+
172 
+.page { width: 70%; margin-right: auto; margin-left: auto;}
173 
+.video-page { width: 85%; margin-right: auto; margin-left: auto; }
174 
+
175 
+.page h1{
176 
+  text-align: center;
177 
+  color: black;
178 
+  text-transform: uppercase;
179 
+  margin-left: 0px;
180 
+  margin-right: 8px;
181 
+  margin-bottom: 15px;
182 
+  padding-top: 1px;
183 
+  font-weight: 600;
184 
+  font-family: Helvetica;
185 
+  margin-top: 55px;
186 
+}
187 
+
188 
+.page p {
189 
+  font-weight: 600;
190 
+  font-family: Helvetica;
191 
+}
192 
+.page h1 span { background-color: white; }
193 
+.page .page-content { margin-top: 25px;}
194 
+.page .page-content p span { background-color: white; padding-top: 1px; padding-left: 1px; padding-right: 1px;}
195 
+.page .page-content p span a { color: black; text-decoration: underline}
196 
+.page .page-content p span a:hover { color: white; text-decoration: none; background-color: black; padding-top: 1px;}
197 
+
198 
+.embed-responsive {
199 
+  position: relative;
200 
+  display: block;
201 
+  height: 0;
202 
+  padding: 0;
203 
+  overflow: hidden;
204 
+}
205 
+
206 
+.embed-responsive.embed-responsive-16by9 {
207 
+  padding-bottom: 56.25%;
208 
+}
209 
+
210 
+.embed-responsive-item {
211 
+  position: absolute;
212 
+  top: 0;
213 
+  bottom: 0;
214 
+  left: 0;
215 
+  width: 100%;
216 
+  height: 100%;
217 
+  border: 0;
218 
+}

+ 11 - 0
app/views/page.html
查看文件 

@@ -0,0 +1,11 @@
1 
+
2 
+  <div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView">
3 
+    <a class="btn-menu fixed-top-right" ng-click="fadeOut()">X</a>
4 
+    <div class="Aligner page">
5 
+      <div class="Aligner-item Aligner-item--top">
6 
+        <h1><span>{{pageData.title}}</span></h1>
7 
+        <div class="page-content" ng-bind-html="pageData.content"></div>
8 
+      </div>
9 
+    </div>
10 
+
11 
+  </div>

+ 12 - 0
app/views/video.html
查看文件 

@@ -0,0 +1,12 @@
1 
+
2 
+  <div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView">
3 
+    <a class="btn-menu fixed-top-right" ng-click="fadeOut()">X</a>
4 
+    <div class="Aligner video-page">
5 
+      <div class="Aligner-item">
6 
+        <div class="embed-responsive embed-responsive-16by9">
7 
+          <youtube-video class="embed-responsive-item" video-id="pageData.videoUrl"></youtube-video>
8 
+        </div>
9 
+      </div>
10 
+    </div>
11 
+
12 
+  </div>

+ 2 - 1
bower.json
查看文件 

@@ -31,7 +31,8 @@
31 31 
     "ngFx": "~1.1.0",
32 32 
     "famous-bkimagesurface": "~1.0.3",
33 33 
     "angular-ui": "~0.4.0",
34 
-    "angular-ui-router": "~0.2.15"
34 
+    "angular-ui-router": "~0.2.15",
35 
+    "angular-youtube-mb": "~1.0.2"
35 36 
   },
36 37 
   "resolutions": {
37 38 
     "angular": "1.3.8"