Poznavacka now Angular!

petrzjunior · Feb 19, 2017 · 1fb84d1 · 1fb84d1
1 parent b7b9508
commit 1fb84d1
Show file tree

Hide file tree

Showing 14 changed files with 294 additions and 106 deletions.
diff --git a/poznavacka/bootstrap.min.css b/poznavacka/bootstrap.min.css
diff --git a/poznavacka/bootstrap.min.css.map b/poznavacka/bootstrap.min.css.map
diff --git a/poznavacka/flexbox.css b/poznavacka/flexbox.css
@@ -33,6 +33,32 @@ p {
   border-radius: 0.4rem;
   margin-bottom: 32px;
 }
+
+.navbar {
+  list-style-type: none;
+  margin: 20px 10px;
+  padding: 0;
+}
+
+.navbar li {
+  display: inline;
+}
+
+.navbar li a {
+  width: 100px;
+  padding: 10px;
+  background-color: #C8E6C9;
+  color: #212121;
+  border-radius: 0.6rem;
+  text-decoration: none;
+}
+
+.navbar li a.navThis {
+  background-color: #4CAF50;
+  color: #FFFFFF;
+  border-radius: 0.6rem 0.6rem 0 0;
+}
+
 .card {
   border: 2px solid #BDBDBD;
   border-radius: 0.3rem;
@@ -85,14 +111,14 @@ li.list-group-item.active {
   display: inline-block;
   font-size: 16px;
 }
-.container {
+.poznavackaContainer {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-content: flex-start;
   align-items: stretch;
 }
-.container div {
+.poznavackaContainer div {
   margin: 10px;
 }
 .obrazek-div {
@@ -146,7 +172,7 @@ li.list-group-item.active {
 .list-group:empty {
   display: none;
 }
-.reseni:hover, .click {
+.reseni:hover, .reseni.show {
   background-color: #fff;
 }
 .list-group-item.active:hover, .btn:hover {
@@ -156,7 +182,7 @@ li.list-group-item.active {
   height: 300px;
 }
 .obrazek {
-  height: 100%;
+  max-height: 100%;
   max-width: 100%;
 }
 
@@ -168,30 +194,32 @@ li.list-group-item.active {
   -ms-user-select: none;
   user-select: none;
 }
-li.list-group-item:before {
-  font-family: "icons";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1em;
-  margin-left: .2em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.badges img {
+  height: 80px
 }
-li.active::before {
-  content: "\e801";
+
+/* --- GALERIE --- */
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: stretch;
+}
+.gallery figure {
+  max-width: 22%;
+  margin: 10px;
 }
 
-li:not(.active)::before {
-  content: "\f096";
+@media screen and (max-width: 800px) {
+  .gallery figure {
+    max-width: 40%;
+  }
 }
-.badges img {
-  height: 80px
+
+@media screen and (max-width: 500px) {
+  .gallery figure {
+    max-width: 90%;
+  }
 }
diff --git a/poznavacka/html/galerie.html b/poznavacka/html/galerie.html
@@ -0,0 +1,19 @@
+<div class="container" ng-controller="galerieCtrl">
+  <div class="seznam-div">
+    <ul class="list-group" id="kat-list">
+      <!--<li class="list-group-item noselect" id="mekkysi" style="text-decoration: line-through">Měkkýši</li>
+      <li class="list-group-item active noselect" id="clenovci">Členovci</li>-->
+      <li class="list-group-item noselect" ng-repeat="set in setList" ng-class="{active: set.enabled}" ng-click="set.enabled = !set.enabled; updateSelected();" ng-model="set.enabled" id="placeholder">
+        <span class="icon-check" ng-show="set.enabled"></span>
+        <span class="icon-check-empty" ng-show="!set.enabled"></span>
+        {{set.desc}}
+      </li>
+    </ul>
+  </div>
+  <div class="gallery">
+    <figure class="gallery" ng-repeat="img in imgList" id="placeholder">
+      <img ng-src="{{img.Image}}" alt="{{img.Name}}">
+      <figcaption class="copyright">{{img.Name}}</figcaption>
+    </figure>
+  </div>
+</div>
diff --git a/poznavacka/html/poznavacka.html b/poznavacka/html/poznavacka.html
@@ -0,0 +1,31 @@
+<div class="poznavackaContainer" ng-controller="poznavackaCtrl">
+  <figure class="obrazek-div">
+    <img class="obrazek" ng-src="{{thisOne.Image | default: 'splash.jpg'}}">
+    <figcaption class="copyright" ng-show="thisOne.Name">{{thisOne.Author + ", " + thisOne.License}}</figcaption>
+  </figure>
+  <div class="reseni-div card">
+    <h4 class="card-title">Řešení:</h4>
+    <div class="reseni" ng-model="showSolution" ng-class="{show: showSolution}" ng-click="showSolution = !showSolution">
+      <p class="reseni-text noselect">{{thisOne.Name | default: 'Doporučuje 9 z 10 biologů'}}</p>
+    </div>
+    <p class="card-text">Najeďte nebo klikněte.</p>
+  </div>
+  <div class="seznam-div">
+    <ul class="list-group" id="kat-list">
+      <!--<li class="list-group-item noselect" id="mekkysi" style="text-decoration: line-through">Měkkýši</li>
+      <li class="list-group-item active noselect" id="clenovci">Členovci</li>-->
+      <li class="list-group-item noselect" ng-repeat="set in setList" ng-class="{active: set.enabled}" ng-click="set.enabled = !set.enabled; updateSelected();" ng-model="set.enabled" id="placeholder">
+        <span class="icon-check" ng-show="set.enabled"></span>
+        <span class="icon-check-empty" ng-show="!set.enabled"></span>
+        {{set.desc}}
+      </li>
+    </ul>
+  </div>
+  <div class="tlacitka-div">
+    <a id="nahodna" href=""" ng-click="next()" class="btn"><i class="icon-right"></i>Další obrázek</a>
+  </div>
+  <div class="badges">
+    <a href='https://play.google.com/store/apps/details?id=cz.clexpert.poznavacka&utm_source=http://petrzjunior.github.io/poznavacka/&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Nyní na Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/cs_badge_web_generic.png' /></a>
+    <a href="https://www.microsoft.com/store/apps/9pfg9clhg3nl?ocid=badge"><img src="https://assets.windowsphone.com/92051e30-484c-4b7a-9cab-3571c606d58c/Czech_Get_it_Win_10_InvariantCulture_Default.png" alt="Získat ve Windows 10" /></a>
+  </div>
+</div>
diff --git a/poznavacka/index.html b/poznavacka/index.html
@@ -1,46 +1,32 @@
-<!DOCTYPE html>
-
+<!-- Ahoj, pokud tě zajímá, jak to celé funguje, zastav se osobně a zeptej se -->
+<!DOCTYPE html>
+<html ng-app="poznavackaApp">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Poznávačka</title>
+  <script src="js/lib/jquery.min.js" type="text/javascript"></script>
+  <script src="js/lib/jquery.unveil.js" type="text/javascript"></script>
+  <script src="js/lib/angular.min.js" type="text/javascript"></script>
+  <script src="js/lib/angular-route.min.js" type="text/javascript"></script>
+  <script src="js/app.js" type="text/javascript"></script>
+  <script src="js/poznavacka.js" type="text/javascript"></script>
+  <script src="js/galerie.js" type="text/javascript"></script>
   <link href="flexbox.css" rel="stylesheet">
   <link href="icons.css" rel="stylesheet">
 </head>
 
-<body>
+<body ng-controller="mainCtrl">
   <div class="page">
     <div class="jumbotron">
       <h1 class="display-3">Poznávačka master</h1>
       <p class="lead">stvořil Petr Zahradník</p>
     </div>
-    <div class="container">
-      <figure class="obrazek-div">
-        <img class="obrazek" src="splash.jpg">
-        <figcaption class="copyright"></figcaption>
-      </figure>
-      <div class="reseni-div card">
-        <h4 class="card-title">Řešení:</h4>
-        <div class="reseni">
-          <p class="reseni-text noselect">-nic-</p>
-        </div>
-        <p class="card-text">Najeďte nebo klikněte.</p>
-      </div>
-      <div class="seznam-div">
-        <ul class="list-group" id="kat-list">
-          <li class="list-group-item noselect" id="mekkysi" style="text-decoration: line-through">Měkkýši</li>
-          <li class="list-group-item active noselect" id="clenovci">Členovci</li>
-        </ul>
-      </div>
-      <div class="tlacitka-div">
-        <a id="nahodna" href="#!" onclick="dalsi(); return false;" class="btn"><i class="icon-right"></i>Další obrázek</a>
-      </div>
-      <div class="badges">
-        <a href='https://play.google.com/store/apps/details?id=cz.clexpert.poznavacka&utm_source=http://petrzjunior.github.io/poznavacka/&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Nyní na Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/cs_badge_web_generic.png'/></a>
-        <a href="https://www.microsoft.com/store/apps/9pfg9clhg3nl?ocid=badge"><img src="https://assets.windowsphone.com/92051e30-484c-4b7a-9cab-3571c606d58c/Czech_Get_it_Win_10_InvariantCulture_Default.png" alt="Získat ve Windows 10" /></a>
-      </div>
-    </div>
+    <ul class="navbar">
+      <li><a href="#!/poznavacka" ng-class="{ navThis: isActive('/poznavacka') }">Poznávačka</a></li>
+      <li><a href="#!/galerie" ng-class="{ navThis: isActive('/galerie') }">Galerie</a></li>
+    </ul>
+    <div ng-view></div>
   </div>
-  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
-  <script src="poznavacka.js"></script>
 </body>
+</html>
diff --git a/poznavacka/js/app.js b/poznavacka/js/app.js
@@ -1 +1,36 @@
-// JavaScript source code
+var poznavackaApp = angular.module("poznavackaApp", ["ngRoute"]);
+
+poznavackaApp.config(['$routeProvider',
+    function ($routeProvider) {
+        $routeProvider.
+            when('/poznavacka', {
+                templateUrl: '/html/poznavacka.html',
+                controller: 'poznavackaCtrl'
+            }).
+            when('/galerie', {
+                templateUrl: '/html/galerie.html',
+                controller: 'galerieCtrl'
+            }).
+            otherwise({
+                redirectTo: '/poznavacka'
+            })
+    }
+]);
+
+poznavackaApp.factory("loaderService", function (poznavackaConfig) {
+      return poznavackaConfig.setList;
+});
+
+poznavackaApp.constant("poznavackaConfig", {
+    setList: [
+      {name: "mekkysi", desc: "Měkkýši (Pracuje se na tom)", enabled: false, file: "clenovci.json"},
+      {name: "clenovci", desc: "Členovci", enabled: true, file: "clenovci.json"}
+    ]
+});
+
+poznavackaApp.controller("mainCtrl", function($scope, $location) {
+  $scope.isActive = function (viewLocation) {
+       var active = (viewLocation === $location.path());
+       return active;
+  };
+});
diff --git a/poznavacka/js/controllers.js b/poznavacka/js/controllers.js
diff --git a/poznavacka/js/galerie.js b/poznavacka/js/galerie.js
@@ -0,0 +1,27 @@
+poznavackaApp.controller("galerieCtrl", function($scope, $http, loaderService) {
+  $scope.setList = [];
+  $scope.imgList = [];
+
+  $scope.updateSelected = function() {
+    $scope.imgList = [];
+    for(var index = 0; index < $scope.setList.length; index++) {
+      if($scope.setList[index].enabled) {
+        $http.get($scope.setList[index].file).then(function(data) {
+          $scope.imgList = $scope.imgList.concat(data.data);
+        });
+      }
+    }
+  };
+
+  var loadSets = function(){
+    $scope.setList = loaderService;
+  };
+  loadSets();
+  $scope.updateSelected();
+
+  $scope.next = function() {
+    $scope.showSolution = false;
+    $scope.thisOne = $scope.imgList[Math.floor((Math.random() * ($scope.imgList.length - 1)) + 0)];
+    console.log($scope.thisOne);
+  };
+});
diff --git a/poznavacka/js/lib/jquery.min.js b/poznavacka/js/lib/jquery.min.js
diff --git a/poznavacka/js/lib/jquery.unveil.js b/poznavacka/js/lib/jquery.unveil.js
@@ -0,0 +1,56 @@
+/**
+ * jQuery Unveil
+ * A very lightweight jQuery plugin to lazy load images
+ * http://luis-almeida.github.com/unveil
+ *
+ * Licensed under the MIT license.
+ * Copyright 2013 Luís Almeida
+ * https://github.com/luis-almeida
+ */
+
+;(function($) {
+
+  $.fn.unveil = function(threshold, callback) {
+
+    var $w = $(window),
+        th = threshold || 0,
+        retina = window.devicePixelRatio > 1,
+        attrib = retina? "data-src-retina" : "data-src",
+        images = this,
+        loaded;
+
+    this.one("unveil", function() {
+      var source = this.getAttribute(attrib);
+      source = source || this.getAttribute("data-src");
+      if (source) {
+        this.setAttribute("src", source);
+        if (typeof callback === "function") callback.call(this);
+      }
+    });
+
+    function unveil() {
+      var inview = images.filter(function() {
+        var $e = $(this);
+        if ($e.is(":hidden")) return;
+
+        var wt = $w.scrollTop(),
+            wb = wt + $w.height(),
+            et = $e.offset().top,
+            eb = et + $e.height();
+
+        return eb >= wt - th && et <= wb + th;
+      });
+
+      loaded = inview.trigger("unveil");
+      images = images.not(loaded);
+    }
+
+    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
+
+    unveil();
+
+    return this;
+
+  };
+
+})(window.jQuery || window.Zepto);
diff --git a/poznavacka/js/lib/ui-bootstrap.min.js b/poznavacka/js/lib/ui-bootstrap.min.js
diff --git a/poznavacka/js/poznavacka.js b/poznavacka/js/poznavacka.js
@@ -0,0 +1,33 @@
+poznavackaApp.controller("poznavackaCtrl", function($scope, $http, loaderService) {
+  $scope.setList = [];
+  $scope.imgList = [];
+
+  $scope.updateSelected = function() {
+    $scope.imgList = [];
+    for(var index = 0; index < $scope.setList.length; index++) {
+      if($scope.setList[index].enabled) {
+        $http.get($scope.setList[index].file).then(function(data) {
+          $scope.imgList = $scope.imgList.concat(data.data);
+        });
+      }
+    }
+  };
+
+  var loadSets = function(){
+    $scope.setList = loaderService;
+  };
+  loadSets();
+  $scope.updateSelected();
+
+  $scope.next = function() {
+    $scope.showSolution = false;
+    $scope.thisOne = $scope.imgList[Math.floor((Math.random() * ($scope.imgList.length - 1)) + 0)];
+    console.log($scope.thisOne);
+  };
+});
+
+poznavackaApp.filter('default', [function(){
+  return function(value, def) {
+    return value || def;
+  };
+}]);