Added mouse zoom on photo and score on main page

assets/css/photos.css

@@ -106,7 +106,6 @@
     max-width: none;
     max-height: none;
     transform: translate(-50%, -50%);
-    cursor: move;
     box-shadow: 0 0 5px #000;
 }
 

assets/css/score.css

@@ -24,6 +24,14 @@
     margin: 0;
 }
 
+#main-score {
+    display: block;
+}
+
+#main-score .title-image {
+    display: none;
+}
+
 .score-display {
     background: none;
     border-radius: 10px;

assets/scripts/photosScript.js

@@ -6,6 +6,12 @@ let photoOverlay = $("#photo-overlay");
 let headerTop = $("#header-top");
 let sideNav = $("#menuSidenav");
 let loading = $("#loading");
+var move_photo = false;
+var grab_offsetX = 0;
+var grab_offsetY = 0;
+
+var idle_time = 0;
+var scaling = false;
 
 $(document).ready(
     function () {
@@ -39,10 +45,12 @@ $(document).ready(
                 if (new_height > $(window).height() || new_width > $(window).width()){
                     showcase.css('left', new_left +'px');
                     showcase.css('top', new_top +'px');
+                    showcase.css('cursor', 'move');
                 }
                 else{
                     showcase.css('left', $(window).width()/2 +'px');
                     showcase.css('top', $(window).height()/2 +'px');
+                    showcase.css('cursor', 'default');
                 }
 
 
@@ -52,6 +60,50 @@ $(document).ready(
     }
 );
 
+$(document).mousemove(function () {
+    idle_time = 0;
+});
+
+showcase.mousemove(function(event){
+
+    if (showcase.height() > $(window).height() || showcase.width() > $(window).width) {
+        showcase.css('cursor', 'move');
+        if (move_photo){
+            let cursorY = event.pageY - $(window).scrollTop();
+            let offsetX = event.pageX - (showcase.position().left + showcase.width()/2);
+            let offsetY = cursorY - (showcase.position().top + showcase.height()/2);
+
+            let new_left = showcase.position().left + showcase.width()/2 + offsetX - grab_offsetX;
+            let new_top = showcase.position().top + showcase.height()/2 + offsetY - grab_offsetY;
+
+            showcase.css('left', new_left +'px');
+            showcase.css('top', new_top +'px');
+        }
+    }
+    else{
+        showcase.css('cursor', 'default');
+    }
+});
+
+showcase.mousedown(function(event){
+    move_photo = true;
+    let cursorY = event.pageY - $(window).scrollTop();
+    grab_offsetX = event.pageX - (showcase.position().left + showcase.width()/2);
+    grab_offsetY = cursorY - (showcase.position().top + showcase.height()/2);
+    console.log("down");
+});
+
+showcase.mouseup(function(){
+    move_photo = false;
+    console.log("up");
+});
+
+showcase.mouseleave(function(){
+    move_photo = false;
+    console.log("up");
+});
+
+
 /*
  * Display selected image in showcase
  * When clicked, display image in full size
@@ -76,16 +128,6 @@ function closeBig() {
     photoOverlay.fadeOut(500);
 }
 
-/*
- * Toggle display of buttons/header
- */
-function toggleFullscreen() {
-    if (showcaseButton.css("display") === "none")
-        disableFullscreen();
-    else
-        enableFullscreen();
-}
-
 function enableFullscreen() {
     showcaseButton.fadeOut(500);
 }
@@ -104,10 +146,24 @@ function showTopBar() {
     sideNav.fadeIn(500);
 }
 
+function is_fullscreen(){
+    return showcaseButton.css("display") === "none";
+}
+
 $(document).ready(function () {
     document.getElementById("photos_title").scrollIntoView();
+    showcase.on('dragstart', function(event) { event.preventDefault(); }); // Stop image drag out of page
+    setInterval(timerIncrement, 100);
 });
 
+function timerIncrement() {
+    idle_time = idle_time+ 1;
+    if (idle_time > 10 && !is_fullscreen()) { // 1 second
+        enableFullscreen();
+    } else if (idle_time <= 10 && is_fullscreen()){
+        disableFullscreen();
+    }
+}
 
 /*
  * Control images with keyboard arrows
@@ -190,6 +246,8 @@ function changeImage(thumb) {
         width: 'auto',
         height: '90%'
     });
+    showcase.css('left', $(window).width()/2 +'px');
+    showcase.css('top', $(window).height()/2 +'px');
     showcaseLink.attr("href", source);
     showcaseDownload.attr("href", source);
 }

downloads.php

@@ -5,11 +5,14 @@ ob_start(); // Start reading html
 <p>Sur cette page tu peux télécharger les différents documents de ta semaine d'accueil</p>
 <ul>
     <li>
-        <a href="assets/pdf/parrainage.pdf">La fiche de parrainage</a>
+       La fiche de parrainage
     </li>
     <li>
         La plaquette
     </li>
+    <li>
+        <a href="assets/pdf/Charte-droit-image.pdf">La Charte de droit à l'image</a>
+    </li>
     <li>
         <a href="assets/images/planning.png">Le Planning</a>
     </li>

includes/sidenav.html

@@ -31,11 +31,7 @@
                 class="fas fa-medkit sidenav-icon"></i> La Prévention</span></a>
         <a href="downloads.php" id="downloads" class="page-link"><span class="sidenav-content"><i
                 class="fas fa-download sidenav-icon"></i> Les Téléchargements</span></a>
-
-        <!--<a href="sponsors.php" id="sponsors" class="page-link"><span class="sidenav-content"><i-->
-                <!--class="fas fa-handshake sidenav-icon"></i> Les Sponsors</span></a>-->
-
         <a href="info.php" id="contact" class="page-link"><span class="sidenav-content"><i
-                class="fas fa-info sidenav-icon"></i> Les Info</span></a>
+                class="fas fa-info sidenav-icon"></i> Les Infos</span></a>
     </div>
 </div>

index.php

@@ -1,3 +1,19 @@
+<?php
+require_once 'classes/dao.php';
+function get_total_points($team)
+{
+    $dao = new Dao('');
+    $points = 0;
+    foreach ($dao->get_score_team($team) as $row) {
+        $points += $row['points'];
+    }
+    return $points;
+}
+
+$scoreUSA = get_total_points('usa');
+$scoreURSS = get_total_points('urss');
+?>
+
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -6,6 +22,7 @@
     <meta name="viewport" content="width=device-width,maximum-scale=2">
     <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
     <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
+    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/score.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
@@ -33,6 +50,10 @@
 <div id="home-content-wrap" class="outer">
     <section id="home-content" class="inner">
         <img id="home-title" src="assets/images/titre-site-accueil.svg">
+        <?php
+        $platformID = 'main-score';
+        include("includes/score_counter.php");
+        ?>
         <h4>Semaine d'Accueil INSA Toulouse 2018</h4>
         <div id="main-link-container">
             <?php