nav code is now fully fonctional

sites/all/themes/gui/jee/css/jee.css

@@ -3731,10 +3731,24 @@ html {
   position: relative;
 }
 
-/* line 32, jee.scss */
+/* line 34, jee.scss */
 body {
   position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   height: 100% !important;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* line 43, jee.scss */
+#root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   /* IE10 Consumer Preview */
   /* Mozilla Firefox */
   /* Opera */
@@ -3746,14 +3760,6 @@ body {
   background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
 }
 
-/* line 50, jee.scss */
-#root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
 @-webkit-keyframes introLogo {
   0% {
     opacity: 0;
@@ -3851,15 +3857,7 @@ body {
     opacity: 0;
   }
 }
-/* line 82, jee.scss */
-body {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-/* line 88, jee.scss */
+/* line 91, jee.scss */
 #header {
   position: absolute;
   overflow: hidden;
@@ -3869,27 +3867,21 @@ body {
   left: 50%;
   margin-left: -350px;
   margin-top: -155px;
-  -webkit-transition-property: "transform";
-          transition-property: "transform";
-  -webkit-transition-duration: 0.2s;
-          transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-out;
-          transition-timing-function: ease-out;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-/* line 101, jee.scss */
+/* line 104, jee.scss */
 #header h1 {
   position: absolute;
   width: 100%;
   height: 100%;
 }
-/* line 104, jee.scss */
+/* line 107, jee.scss */
 #header h1 a {
   display: block;
   margin-top: -500%;
 }
-/* line 106, jee.scss */
+/* line 109, jee.scss */
 #header h1:after, #header h1:before {
   content: "";
   display: block;
@@ -3900,7 +3892,7 @@ body {
   left: 0;
   opacity: 0;
 }
-/* line 114, jee.scss */
+/* line 117, jee.scss */
 #header h1:before {
   background: transparent url("../assets/img/logo.svg") no-repeat center center;
   -webkit-animation: introLogo 8s linear 0s;
@@ -3908,7 +3900,7 @@ body {
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-/* line 119, jee.scss */
+/* line 122, jee.scss */
 #header h1:after {
   background: transparent url("../assets/img/logo-blured.svg") no-repeat center center;
   -webkit-animation: introLogoBlured 8s linear 0s;
@@ -3916,7 +3908,7 @@ body {
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-/* line 126, jee.scss */
+/* line 129, jee.scss */
 #header h2 {
   background: transparent url("../assets/img/slogan.svg") no-repeat center center;
   position: absolute;
@@ -3928,13 +3920,13 @@ body {
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-/* line 130, jee.scss */
+/* line 133, jee.scss */
 #header h2 a {
   display: block;
   margin-top: -500%;
 }
 
-/* line 138, jee.scss */
+/* line 140, jee.scss */
 div.messages {
   position: absolute;
   top: 20px;
@@ -3944,25 +3936,38 @@ div.messages {
   overflow-y: auto;
 }
 
-/* line 145, jee.scss */
+/* line 147, jee.scss */
 #main {
   position: absolute;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
-/* line 149, jee.scss */
+/* line 152, jee.scss */
 #main > .region, #main > .region > .block-system, #main > .region > .block-system > .content {
   position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
-/* line 154, jee.scss */
+/* line 158, jee.scss */
 #main .node-chapitre.node-teaser {
   position: absolute;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
-          transition: transform 0.2s ease-out;
 }
-/* line 161, jee.scss */
+/* line 166, jee.scss */
+#main .node-chapitre.node-teaser h2.node-title {
+  -webkit-transform: none;
+      -ms-transform: none;
+          transform: none;
+  -webkit-transform-origin: bottom center;
+      -ms-transform-origin: bottom center;
+          transform-origin: bottom center;
+  -webkit-transition: 1s ease-out;
+          transition: 1s ease-out;
+  -webkit-transition-property: -webkit-transform;
+          transition-property: transform;
+}
+/* line 172, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre {
   opacity: 0;
   height: 1px;
@@ -3972,36 +3977,36 @@ div.messages {
   -webkit-transition-property: opacity height;
           transition-property: opacity height;
 }
-/* line 166, jee.scss */
+/* line 177, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie {
   opacity: 0;
   position: absolute;
-  -webkit-transition: 1s ease-out 1s;
-          transition: 1s ease-out 1s;
+  -webkit-transition: 1s ease-out 0.5s;
+          transition: 1s ease-out 0.5s;
   -webkit-transition-property: opacity -webkit-transform;
           transition-property: opacity transform;
 }
-/* line 172, jee.scss */
+/* line 183, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) {
   z-index: 2;
   opacity: 1;
   -webkit-transition-delay: 0;
           transition-delay: 0;
 }
-/* line 176, jee.scss */
+/* line 187, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-type-text {
   opacity: 0;
-  -webkit-transition: 1s ease-out 1s;
-          transition: 1s ease-out 1s;
+  -webkit-transition: 1s ease-out 0.5s;
+          transition: 1s ease-out 0.5s;
   -webkit-transition-property: opacity;
           transition-property: opacity;
 }
-/* line 181, jee.scss */
+/* line 192, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-name-field-vignette {
   cursor: pointer;
   z-index: 2;
 }
-/* line 187, jee.scss */
+/* line 198, jee.scss */
 #main .node-chapitre.node-teaser .links {
   opacity: 0;
   -webkit-transition: 1s ease-out 1s;
@@ -4009,11 +4014,11 @@ div.messages {
   -webkit-transition-property: opacity;
           transition-property: opacity;
 }
-/* line 188, jee.scss */
+/* line 199, jee.scss */
 #main .node-chapitre.node-teaser .links > * {
   display: none;
 }
-/* line 192, jee.scss */
+/* line 203, jee.scss */
 #main .node-chapitre.node-teaser:after {
   opacity: 0;
   -webkit-transition: 3s ease-out;
@@ -4021,35 +4026,41 @@ div.messages {
   -webkit-transition-property: opacity;
           transition-property: opacity;
 }
-/* line 201, jee.scss */
+/* line 216, jee.scss */
 #main .node-chapitre.node-teaser.previewed:after {
   opacity: 1;
 }
-/* line 202, jee.scss */
+/* line 217, jee.scss */
+#main .node-chapitre.node-teaser.previewed h2.node-title {
+  -webkit-transform: scale(2, 2);
+      -ms-transform: scale(2, 2);
+          transform: scale(2, 2);
+}
+/* line 218, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-comprendre {
   opacity: 1;
   height: 6em;
 }
-/* line 203, jee.scss */
+/* line 219, jee.scss */
 #main .node-chapitre.node-teaser.previewed .links {
   opacity: 1;
 }
-/* line 203, jee.scss */
+/* line 219, jee.scss */
 #main .node-chapitre.node-teaser.previewed .links > * {
   display: block;
 }
-/* line 204, jee.scss */
+/* line 220, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-partie {
   opacity: 1;
   z-index: 0;
 }
-/* line 207, jee.scss */
+/* line 223, jee.scss */
 #main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field {
   opacity: 1;
   z-index: -1;
   cursor: default;
 }
-/* line 212, jee.scss */
+/* line 228, jee.scss */
 #main .node-chapitre.node-teaser:after {
   content: " ";
   background-size: contain;
@@ -4061,46 +4072,46 @@ div.messages {
   bottom: -30em;
   z-index: -1;
 }
-/* line 226, jee.scss */
+/* line 242, jee.scss */
 #main .node-chapitre.node-teaser h2.node-title {
   font-family: "epflulb";
   font-weight: normal;
   text-transform: uppercase;
   text-align: center;
   max-width: 8.5em;
-  line-height: 1.1em;
+  line-height: 0.85;
   z-index: 5;
 }
 @media only screen and (min-width: 64.063em) {
-  /* line 226, jee.scss */
+  /* line 242, jee.scss */
   #main .node-chapitre.node-teaser h2.node-title {
     font-size: 1.3em;
   }
 }
 @media only screen and (min-width: 90.063em) {
-  /* line 226, jee.scss */
+  /* line 242, jee.scss */
   #main .node-chapitre.node-teaser h2.node-title {
     font-size: 1.8em;
   }
 }
-/* line 242, jee.scss */
+/* line 258, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre {
   max-width: 15em;
 }
-/* line 243, jee.scss */
+/* line 259, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 {
   display: none !important;
 }
-/* line 245, jee.scss */
+/* line 261, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-comprendre p {
   margin: 0;
 }
-/* line 248, jee.scss */
+/* line 264, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-partie {
   clear: both;
   padding-top: 1em;
 }
-/* line 252, jee.scss */
+/* line 268, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-vignette {
   position: relative;
   float: left;
@@ -4113,39 +4124,39 @@ div.messages {
   background-repeat: no-repeat;
   background-origin: center center;
 }
-/* line 265, jee.scss */
+/* line 281, jee.scss */
 #main .node-chapitre.node-teaser .field-type-text {
-  min-width: 14em;
+  min-width: 16em;
 }
-/* line 266, jee.scss */
+/* line 282, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-titre {
   font-family: "epflul";
   font-size: 1.6em;
   line-height: 1.1;
 }
-/* line 271, jee.scss */
+/* line 287, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-sous-titre {
   font-family: "epflul";
   font-size: 1.4em;
   line-height: 1.2;
 }
-/* line 276, jee.scss */
+/* line 292, jee.scss */
 #main .node-chapitre.node-teaser .field-name-field-description {
   font-size: 0.88em;
   line-height: 1.2;
 }
-/* line 282, jee.scss */
+/* line 298, jee.scss */
 #main .node-chapitre.node-teaser ul.links {
   margin: 0;
   text-align: right;
   z-index: 5;
   position: relative;
 }
-/* line 284, jee.scss */
+/* line 300, jee.scss */
 #main .node-chapitre.node-teaser ul.links li.node-readmore {
   padding: 0;
 }
-/* line 286, jee.scss */
+/* line 302, jee.scss */
 #main .node-chapitre.node-teaser ul.links li.node-readmore a {
   display: inline-block;
   height: 25px;
@@ -4156,7 +4167,7 @@ div.messages {
   text-align: left;
   background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
 }
-/* line 298, jee.scss */
+/* line 314, jee.scss */
 #main .node-chapitre.node-teaser .line {
   z-index: -1;
   position: absolute;
@@ -4169,147 +4180,147 @@ div.messages {
   background-color: red;
   opacity: 0.4;
 }
-/* line 314, jee.scss */
+/* line 328, jee.scss */
 #main #node-2::after {
   background-image: url(../assets/img/bgd-sol.svg);
 }
-/* line 315, jee.scss */
+/* line 329, jee.scss */
 #main #node-2, #main #node-2 a {
   color: #b24c14;
 }
-/* line 316, jee.scss */
+/* line 330, jee.scss */
 #main #node-2 h2.node-title, #main #node-2 h2.node-title a {
   color: #d85509;
 }
-/* line 317, jee.scss */
+/* line 331, jee.scss */
 #main #node-2 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-sol.svg);
 }
-/* line 318, jee.scss */
+/* line 332, jee.scss */
 #main #node-2 .line {
   background-color: #ea5b0c;
 }
-/* line 322, jee.scss */
+/* line 336, jee.scss */
 #main #node-3::after {
   background-image: url(../assets/img/bgd-dph.svg);
 }
-/* line 323, jee.scss */
+/* line 337, jee.scss */
 #main #node-3, #main #node-3 a {
   color: #686b00;
 }
-/* line 324, jee.scss */
+/* line 338, jee.scss */
 #main #node-3 h2.node-title, #main #node-3 h2.node-title a {
   color: #afaf00;
 }
-/* line 325, jee.scss */
+/* line 339, jee.scss */
 #main #node-3 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-dph.svg);
 }
-/* line 326, jee.scss */
+/* line 340, jee.scss */
 #main #node-3 .line {
   background-color: #cecd00;
 }
-/* line 330, jee.scss */
+/* line 344, jee.scss */
 #main #node-4::after {
   background-image: url(../assets/img/bgd-sub.svg);
 }
-/* line 331, jee.scss */
+/* line 345, jee.scss */
 #main #node-4, #main #node-4 a {
   color: #b71330;
 }
-/* line 332, jee.scss */
+/* line 346, jee.scss */
 #main #node-4 h2.node-title, #main #node-4 h2.node-title a {
   color: #cd0734;
 }
-/* line 333, jee.scss */
+/* line 347, jee.scss */
 #main #node-4 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-sub.svg);
 }
-/* line 334, jee.scss */
+/* line 348, jee.scss */
 #main #node-4 .line {
   background-color: #de003a;
 }
-/* line 338, jee.scss */
+/* line 352, jee.scss */
 #main #node-5::after {
   background-image: url(../assets/img/bgd-bc.svg);
 }
-/* line 339, jee.scss */
+/* line 353, jee.scss */
 #main #node-5, #main #node-5 a {
   color: #033d6f;
 }
-/* line 340, jee.scss */
+/* line 354, jee.scss */
 #main #node-5 h2.node-title, #main #node-5 h2.node-title a {
   color: #024b87;
 }
-/* line 341, jee.scss */
+/* line 355, jee.scss */
 #main #node-5 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-bc.svg);
 }
-/* line 342, jee.scss */
+/* line 356, jee.scss */
 #main #node-5 .line {
   background-color: #0066b1;
 }
-/* line 346, jee.scss */
+/* line 360, jee.scss */
 #main #node-6::after {
   background-image: url(../assets/img/bgd-opp.svg);
 }
-/* line 347, jee.scss */
+/* line 361, jee.scss */
 #main #node-6, #main #node-6 a {
   color: #7f1965;
 }
-/* line 348, jee.scss */
+/* line 362, jee.scss */
 #main #node-6 h2.node-title, #main #node-6 h2.node-title a {
   color: #941b80;
 }
-/* line 349, jee.scss */
+/* line 363, jee.scss */
 #main #node-6 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-opp.svg);
 }
-/* line 350, jee.scss */
+/* line 364, jee.scss */
 #main #node-6 .line {
   background-color: #af1380;
 }
-/* line 354, jee.scss */
+/* line 368, jee.scss */
 #main #node-7::after {
   background-image: url(../assets/img/bgd-dub.svg);
 }
-/* line 355, jee.scss */
+/* line 369, jee.scss */
 #main #node-7, #main #node-7 a {
   color: #22742c;
 }
-/* line 356, jee.scss */
+/* line 370, jee.scss */
 #main #node-7 h2.node-title, #main #node-7 h2.node-title a {
   color: #288d80;
 }
-/* line 357, jee.scss */
+/* line 371, jee.scss */
 #main #node-7 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-dub.svg);
 }
-/* line 358, jee.scss */
+/* line 372, jee.scss */
 #main #node-7 .line {
   background-color: #62a530;
 }
-/* line 362, jee.scss */
+/* line 376, jee.scss */
 #main #node-8::after {
   background-image: url(../assets/img/bgd-juso.svg);
 }
-/* line 363, jee.scss */
+/* line 377, jee.scss */
 #main #node-8, #main #node-8 a {
   color: #0b7f8a;
 }
-/* line 364, jee.scss */
+/* line 378, jee.scss */
 #main #node-8 h2.node-title, #main #node-8 h2.node-title a {
   color: #009aa8;
 }
-/* line 365, jee.scss */
+/* line 379, jee.scss */
 #main #node-8 .field-name-field-vignette {
   background-image: url(../assets/img/shadow-juso.svg);
 }
-/* line 366, jee.scss */
+/* line 380, jee.scss */
 #main #node-8 .line {
   background-color: #33b4b5;
 }
-/* line 369, jee.scss */
+/* line 383, jee.scss */
 #main .chapter-wrapper {
   position: absolute;
   top: 0;
@@ -4318,14 +4329,46 @@ div.messages {
   right: 0;
 }
 
-/* line 376, jee.scss */
+/* line 389, jee.scss */
 #footer {
   position: fixed;
   bottom: 0;
   right: 0;
 }
-/* line 379, jee.scss */
+/* line 392, jee.scss */
 #footer .block {
   display: inline-block;
   vertical-align: top;
 }
+
+/* line 398, jee.scss */
+.backdom {
+  display: none;
+}
+
+/* line 402, jee.scss */
+#fullscreen-btn {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+}
+
+/* line 409, jee.scss */
+#fps {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+/* line 415, jee.scss */
+#nav-cursor {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  margin-top: -3px;
+  margin-left: -3px;
+  background-color: red;
+  z-index: 1000;
+}

sites/all/themes/gui/jee/css/jee.scss

@@ -27,11 +27,28 @@ $column-gutter: rem-calc(20);
 
 html{
   position:relative;
+  // overflow:hidden;
+  // height:100%;
 }
 
 body{
   position:relative;
+  user-select:none;
   height:100%!important;
+  // min-height:1000px;
+  width:100%;;
+  overflow:hidden;
+}
+
+#root{
+  position:relative;
+  width:100%;
+  height:100%;
+  overflow: hidden;
+  // width:1125px;
+  // height:900px;
+  // margin:-450px auto 0;
+  // top:50%;
 
   /* IE10 Consumer Preview */
   background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
@@ -45,17 +62,7 @@ body{
   background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
   /* W3C Markup, IE10 Release Preview */
   background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
-}
 
-#root{
-  position:relative;
-  width:100%;
-  height:100%;
-  overflow: hidden;
-  // width:1125px;
-  // height:900px;
-  // margin:-450px auto 0;
-  // top:50%;
 }
 
 @keyframes introLogo{
@@ -79,10 +86,6 @@ body{
   100%  {opacity:0;}
 }
 
-body{
-  user-select:none;
-}
-
 $animeLogoDuration:8s;
 
 #header{
@@ -93,9 +96,9 @@ $animeLogoDuration:8s;
   top:50%; left:50%;
   margin-left:-350px;
   margin-top:-155px;
-  transition-property: "transform";
-  transition-duration: 0.2s;
-  transition-timing-function:ease-out;
+  // transition-property: "transform";
+  // transition-duration: 0.2s;
+  // transition-timing-function:ease-out;
   animation-fill-mode: forwards;
 
   h1{
@@ -132,7 +135,6 @@ $animeLogoDuration:8s;
     animation: introSlogan $animeLogoDuration linear 0s;
     animation-fill-mode: forwards;
   }
-
 } // #header
 
 div.messages{
@@ -145,19 +147,28 @@ div.messages{
 #main{
   position:absolute;
   width:100%; height:100%;
+  overflow:hidden;
 
   &>.region, &>.region>.block-system, &>.region>.block-system>.content{
     position:relative;
     width:100%; height:100%;
+    overflow:hidden;
   }
 
   .node-chapitre.node-teaser{
       position:absolute;
-      transition: transform 0.2s ease-out;
+      // transition:0.1s ease-out;
+      // transition-property:transform;
       // animation-fill-mode: forwards;
 
       // INTERACTIVITÉ - - - - - - - - - - - --
       // ----- DEFAULT MODE ----
+      h2.node-title{
+        transform:none;
+        transform-origin:bottom center;
+        transition:1s ease-out;
+        transition-property:transform;
+      }
       .field-name-field-comprendre{
         opacity:0; height:1px; overflow:hidden;
         transition:1s ease-out;
@@ -166,7 +177,7 @@ div.messages{
       .field-name-field-partie{
           opacity:0;
           position:absolute;
-          transition:1s ease-out 1s;
+          transition:1s ease-out 0.5s;
           transition-property: opacity transform;
           // just let see the field vignette of first partie
           &:nth-child(3){
@@ -175,7 +186,7 @@ div.messages{
             transition-delay:0;
             >.field-type-text{
               opacity:0;
-              transition:1s ease-out 1s;
+              transition:1s ease-out 0.5s;
               transition-property: opacity;
             }
             >.field-name-field-vignette{cursor:pointer;z-index:2;}
@@ -195,10 +206,15 @@ div.messages{
         transition: 3s ease-out;
         transition-property:opacity;
       }
+      .line{
+        // transition: 0.5s ease-out;
+        // transition-property:height transform;
+      }
 
        // ----- PREVIEW MODE ------
       &.previewed{
         &:after{opacity:1;}
+        h2.node-title{transform:scale(2,2);}
         .field-name-field-comprendre{opacity:1; height:6em;}
         .links{opacity:1;>*{display:block;}}
         .field-name-field-partie{
@@ -229,7 +245,7 @@ div.messages{
         text-transform: uppercase;
         text-align: center;
         max-width: 8.5em;
-        line-height: 1.1em;
+        line-height: 0.85;
         @media #{$large-up} {
           font-size: 1.3em;
         }
@@ -262,7 +278,7 @@ div.messages{
         background-repeat: no-repeat;
         background-origin: center center;
       }
-      .field-type-text{ min-width:14em; }
+      .field-type-text{ min-width:16em; }
       .field-name-field-titre{
         font-family: "epflul";
         font-size:1.6em;
@@ -302,8 +318,6 @@ div.messages{
         transform-origin:top left;
         width:2px; background-color:red;
         opacity:0.4;
-        // transition: 3s ease-out;
-        // transition-property:height;
       }
 
   } // node-chapitre
@@ -370,7 +384,6 @@ div.messages{
     position:absolute;
     top:0; left:0; bottom:0; right:0;
   }
-
 } // main
 
 #footer{
@@ -380,4 +393,29 @@ div.messages{
     display:inline-block;
     vertical-align: top;
   }
+}
+
+.backdom{
+  display:none;
+}
+
+#fullscreen-btn{
+  position:fixed;
+  top:20px; left:20px;
+  z-index: 1000;
+}
+
+// DEBUG
+#fps{
+  position:fixed;
+  top:20px; right:20px;
+  z-index: 1000;
+}
+
+#nav-cursor{
+  position:absolute;
+  width:6px; height:6px;
+  margin-top: -3px; margin-left: -3px;
+  background-color: red;
+  z-index:1000;
 }

sites/all/themes/gui/jee/js/jee.js

@@ -1,12 +1,25 @@
-//
-// by Bachir Soussi Chiadmi
-// 2015
-//
+/*
+   _                            _
+  |_|___ _ _ ___ ___ ___    ___| |_    ___ ___ ___ ___ ___ ___ ___
+  | | -_| | |   | -_|_ -|  | -_|  _|  | -_|   | . | .'| . | -_|_ -|
+ _| |___|___|_|_|___|___|  |___|_|    |___|_|_|_  |__,|_  |___|___|
+|___|                                         |___|   |___|
+
+     Bachir Soussi Chiadmi
+     2015
+*/
 
 jQuery(document).ready(function($) {
   console.log('Hello Jee');
 
-  var _$header = $("#header"),
+  var _debug = true,
+      _avgDelay = 1,
+      _lastDraw = new Date,
+      _fps,
+      _$nav_cursor;
+
+  var _$body = $('body'),
+      _$header = $("#header"),
       _$chapitres = $('.node-chapitre', '#main'),
       _chapitres_len = _$chapitres.length,
       _chapters = [],
@@ -17,14 +30,52 @@ jQuery(document).ready(function($) {
       },
       _center = {x:_container.w/2,y:_container.h/2},
       _nav_pos = {x:0, y:0},
-      _nav_timer,
-      _last_client = {x:0,y:0},
+      _prev_mouse_pos = {x:0,y:0},
       _fps = 1000/12,
-      _dragging = false;
+      _dragging = false, _timeout_dragging;
 
   function init(){
+    if(_debug)
+      initDebug();
+
     initChapters();
     launchNav();
+
+    var $fullscreenBtn = $('<div>enter</div>').attr('id','fullscreen-btn').appendTo("#root");
+    // Launch fullscreen for browsers that support it!
+    $fullscreenBtn.on('click', function(e){
+      // launchIntoFullscreen(document.documentElement); // the whole page
+      launchIntoFullscreen(document.getElementById("root")); // any individual element
+    });
+
+  };
+
+  function initDebug(){
+    $('<p>').attr('id', 'fps').appendTo(_$body);
+    _fps = document.getElementById('fps');
+    requestAnimationFrame(displayFps);
+
+    _$nav_cursor = $('<div id="nav-cursor"></div>').appendTo('body');
+    moveDebugCursor();
+
+    };
+
+  function displayFps(){
+    requestAnimationFrame(displayFps);
+    var now = new Date;
+    var delay = now - _lastDraw;
+    _avgDelay += (delay - _avgDelay) / 10;
+    _lastDraw = now;
+
+    _fps.innerHTML = (1000/_avgDelay).toFixed(1) + " fps";
+  };
+
+  function moveDebugCursor(){
+    _$nav_cursor.css({
+      left:_nav_pos.x+_center.x+"px",
+      top:_nav_pos.y+_center.y+"px"
+    });
+
   };
 
   function initChapters(){
@@ -32,129 +83,147 @@ jQuery(document).ready(function($) {
     var base_a = Math.random() *360;
     _$chapitres.each(function(i, e) {
       // Lets create the chapter object and place him self
-      _chapters.push(new Chapter(i, $(e), base_a));
+      _chapters.push(new Chapter(i, e, base_a));
 
     });
   };
 
   function launchNav(){
 
-    _$container
+    $(document)
       // DESKTOP EVENTS
       .bind('mousedown', function(e){
-        if(_dragging) return false;
-        _dragging = true;
-
         console.log('mousedown');
-        _last_client.x=e.clientX;
-        _last_client.y=e.clientY;
-
-         _$chapitres.each(function(i, e) {
-            $(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
-        });
-
-        _nav_timer = setInterval(moveNav, _fps);
+        clearTimeout(_timeout_dragging);
+        // set initial cursor pos
+        updateNavPos(e.clientX, e.clientY, true);
 
         $(this).bind('mousemove', function(e){
           console.log('mousemove');
-          _nav_pos.x += e.clientX - _last_client.x;
-          _nav_pos.y += e.clientY - _last_client.y;
-          _last_client.x = e.clientX;
-          _last_client.y = e.clientY;
-          // moveNav();
+          updateNavPos(e.clientX, e.clientY, false);
         });
+
+        // activate dragging if already activated
+        if(!_dragging){
+          _dragging = true;
+          window.requestAnimationFrame(moveNav);
+        }
       })
       .bind('mouseup', function(e){
         console.log('mouseup');
-        _dragging = false;
-        // clearInterval(_nav_timer);
+        stopMoveNav();
         $(this).unbind('mousemove');
       })
       //
       // TOUCH EVENTS - - - - - - - - - - - - - -
       //
       .bind('touchstart', function(e){
-        if(_dragging) return false;
-        _dragging = true;
         console.log('touchstart');
-
-        _last_client.x = e.originalEvent.touches[0].clientX;
-        _last_client.y = e.originalEvent.touches[0].clientY;
-
-       _$chapitres.each(function(i, e) {
-          $(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
-        });
-
-        _nav_timer = setInterval(moveNav, _fps);
+        clearTimeout(_timeout_dragging);
+        // set initial pos
+        updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true);
+
+        // activate dragging if already activated
+        if(!_dragging){
+          _dragging = true;
+          window.requestAnimationFrame(moveNav);
+        }
       })
       .bind('touchmove', function(e){
         console.log('touchmove');
-        _nav_pos.x += e.originalEvent.touches[0].clientX - _last_client.x;
-        _nav_pos.y += e.originalEvent.touches[0].clientY - _last_client.y;
-        _last_client.x = e.originalEvent.touches[0].clientX;
-        _last_client.y = e.originalEvent.touches[0].clientY;
-        // moveNav();
+        updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
       })
       .bind('touchend', function(e){
         console.log("touchend");
-        _dragging = false;
-        // clearInterval(_nav_timer);
+        stopMoveNav();
       });
+  };
 
-    // click to preview chapter
-    // $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', _$chapitres).bind('click', previewChapter);
+  function updateNavPos(x,y,init){
+    if(!init){
+      _nav_pos.x += x - _prev_mouse_pos.x;
+      _nav_pos.y += y - _prev_mouse_pos.y;
+      // constrain nav pos on container
+      _nav_pos.x = _nav_pos.x < -_center.x
+        ? -_center.x
+        : _nav_pos.x > _center.x
+          ? _center.x
+          : _nav_pos.x;
+      _nav_pos.y = _nav_pos.y < -_center.y
+        ? -_center.y
+        : _nav_pos.y > _center.y
+          ? _center.y
+          : _nav_pos.y;
+    }
+    _prev_mouse_pos.x = x;
+    _prev_mouse_pos.y = y;
 
-    // $('.links a', _$chapitres).on('click', openChapter);
+    // debuging cursor
+    if(_debug)
+      moveDebugCursor();
   };
 
   function moveNav(){
     // console.log("moveNav");
+    if(!_dragging) return;
+
+    window.requestAnimationFrame(moveNav);
+
     // move chapters
-    for (var i = _chapitres_len - 1; i >= 0; i--) {
+    for (var i = _chapitres_len - 1; i >= 0; i--)
       _chapters[i].move();
-    };
 
     // move header
-    _$header.stop(true, false).css({
-      translate:[_nav_pos.x*0.2, _nav_pos.y*0.2]
+    _$header.css({
+      transform:"translate3d("+(_nav_pos.x)*0.2+"px, "+(_nav_pos.y)*0.2+"px,0)"
     });
   };
 
+  function stopMoveNav(){
+    console.log('stopMoveNav');
+    clearTimeout(_timeout_dragging);
+    _timeout_dragging = setTimeout(function(){
+      console.log("dragging stoped");
+      _dragging = false;
+    },3000);
+  };
+
   /*
-  * Chapter
-  *
+     ________                __
+    / ____/ /_  ____ _____  / /____  _____
+   / /   / __ \/ __ `/ __ \/ __/ _ \/ ___/
+  / /___/ / / / /_/ / /_/ / /_/  __/ /
+  \____/_/ /_/\__,_/ .___/\__/\___/_/
+                  /_/
   */
-  function Chapter(i, $e, base_a){
+  function Chapter(i, e, base_a){
 
-    $e.obj = this;
+    // $e.obj = this;
     this.i = i;
-    this.$e = $e;
-    this.nid = $e.attr("id").match(/^node-(\d+)/)[1];
+    this.e = e;
+    this.$e = $(e);
+    this.nid = this.$e.attr("id").match(/^node-(\d+)/)[1];
+    this.$backdom = $('<div>').attr('id', 'backdom-'+this.nid).addClass('backdom').appendTo(_$body);
     this.geom = {
       base_a:base_a,
       a:0,
       r:0
     }
     this.pos = {x:0,y:0};
-    this.translation = {x:0, y:0};
+    this.trans = {x:0, y:0};
+    this.ease = randB(0.05, 0.3);
 
     //parties
-    this.$parties = $('.field-name-field-partie', $e);
+    this.$parties = $('.field-name-field-partie', e);
     this.lines = new Array();
     this.linesAnimeInterval = null;
     this.linesAnimeCounter = 0;
-    this.linesAnimeTime = 5; // sec
-
+    this.linesAnimeTime = 2; // sec
 
     // prototypes
     if (typeof Chapter.initialized == "undefined") {
 
       Chapter.prototype.init = function(){
-        // var _this = this;
-        // this.$parties.each(function(i, e){
-        //   _this.partie.push({$partie:$(this)});
-        // });
-
         this.setInitPos();
         this.drawLines();
         this.setEvents();
@@ -172,10 +241,10 @@ jQuery(document).ready(function($) {
 
         if (this.geom.abs_c * _container.h > this.geom.abs_s * _container.w) {
           // It crosses left or right side
-          this.geom.r = ((_container.w/2) / this.geom.abs_c)*0.5;
+          this.geom.r = (_center.x / this.geom.abs_c)*0.5;
         }else {
           // Top or bottom side
-          this.geom.r = ((_container.h/2) / this.geom.abs_s)*0.5;
+          this.geom.r = (_center.y / this.geom.abs_s)*0.5;
         }
 
         // change randomly radius
@@ -212,44 +281,56 @@ jQuery(document).ready(function($) {
       };
 
       Chapter.prototype.move = function(){
-        this.$e.css({ //.stop(true, false)
-          translate:[_nav_pos.x, _nav_pos.y]
+        this.trans.x += (_nav_pos.x - this.trans.x)*this.ease;
+        this.trans.y += (_nav_pos.y - this.trans.y)*this.ease;
+
+        this.$e.css({
+          transform:'translate3d('+this.trans.x+'px,'+this.trans.y+'px,0)'
         });
-        // $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out');
       };
 
       Chapter.prototype.preview = function(e){
         console.log('preview', this.i);
 
+        // close other chapters
         for (var i = _chapitres_len - 1; i >= 0; i--) {
           if(i !== this.i)
             _chapters[i].closePreview();
         };
 
-        var px, py;
-        this.$parties.each(function(i, e) {
+        // define randomly position of parties
+        var px, py, tXt = new Array(), tYt = new Array();
+        for (var i = 0; i < 3; i++) {
           switch(i){
             case 0:
-              px=randB(-40, 40); py=randB(40, 60);
+              px=randB(-30, 30); py=randB(40, 60);
             break;
             case 1:
-              px=randB(100, 200); py=randB(120,220);
+              px=randB(180, 280); py=randB(200,300);
             break;
             case 2:
-              px=randB(-200, -100); py=randB(250,320);
+              px=randB(-280, -180); py=randB(380,480);
             break;
           }
 
+          tXt.push(px);
+          tYt.push(py);
+        };
+        console.log("tXt", tXt);
+        console.log("tYt", tYt);
+        tXt = shuffleArray(tXt);
+        tYt = shuffleArray(tYt);
+        // apply new position to parties
+        this.$parties.each(function(i, e) {
           setTimeout(
-            (function(e, px, py){
+            (function(i, e, tXt, tYt){
               return function(){
                 $(e)
                   .css({
-                    translate:[px, py],
-                    // opacity:1
+                    translate:[tXt[i], tYt[i]],
                   });
                 }
-            }(e, px, py)),
+            }(i, e, tXt, tYt)),
           10);
 
         }); // each $parties
@@ -273,7 +354,6 @@ jQuery(document).ready(function($) {
         };
       };
 
-
       Chapter.prototype.animeLines = function(){
         this.linesAnimeCounter = 0;
         this.linesAnimeInterval = setInterval(
@@ -312,7 +392,7 @@ jQuery(document).ready(function($) {
 
               };
 
-
+              console.log("anime line interval");
               // limit the naimation time
               _this.linesAnimeCounter ++;
               if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
@@ -320,7 +400,6 @@ jQuery(document).ready(function($) {
             };
           }(this)),
         _fps);
-
       };
 
       Chapter.prototype.loadNode = function(e){
@@ -340,22 +419,133 @@ jQuery(document).ready(function($) {
     }
 
     this.init();
-
   };//Chapter
 
 
-  /* HELPERS */
+  /*
+      __  __________    ____  __________  _____
+     / / / / ____/ /   / __ \/ ____/ __ \/ ___/
+    / /_/ / __/ / /   / /_/ / __/ / /_/ /\__ \
+   / __  / /___/ /___/ ____/ /___/ _, _/___/ /
+  /_/ /_/_____/_____/_/   /_____/_/ |_|/____/
+
+  */
   function randB(min, max){
     return Math.random() * (max - min) + min;
-  }
-
+  };
 
+  //+ Jonas Raoni Soares Silva
+  //@ http://jsfromhell.com/array/shuffle [v1.0]
+  function shuffleArray(o){ //v1.0
+      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
+      return o;
+  };
 
   init();
 });
 
 
 
+/*
+    ____  __________  __  ___________________   ___    _   ________  ______  ______________  _   __   __________  ___    __  _________
+   / __ \/ ____/ __ \/ / / / ____/ ___/_  __/  /   |  / | / /  _/  |/  /   |/_  __/  _/ __ \/ | / /  / ____/ __ \/   |  /  |/  / ____/
+  / /_/ / __/ / / / / / / / __/  \__ \ / /    / /| | /  |/ // // /|_/ / /| | / /  / // / / /  |/ /  / /_  / /_/ / /| | / /|_/ / __/
+ / _, _/ /___/ /_/ / /_/ / /___ ___/ // /    / ___ |/ /|  // // /  / / ___ |/ / _/ // /_/ / /|  /  / __/ / _, _/ ___ |/ /  / / /___
+/_/ |_/_____/\___\_\____/_____//____//_/    /_/  |_/_/ |_/___/_/  /_/_/  |_/_/ /___/\____/_/ |_/  /_/   /_/ |_/_/  |_/_/  /_/_____/
+
+*/
+(function() {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+                                 || window[vendors[x]+'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame)
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+        timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+  };
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function(id) {
+        clearTimeout(id);
+    };
+}());
+
+
+
+/*     ____      ____
+   / __/_  __/ / /  __________________  ___  ____
+  / /_/ / / / / /  / ___/ ___/ ___/ _ \/ _ \/ __ \
+ / __/ /_/ / / /  (__  ) /__/ /  /  __/  __/ / / /
+/_/  \__,_/_/_/  /____/\___/_/   \___/\___/_/ /_/
+*/
+
+// http://davidwalsh.name/fullscreen
+// http://www.sitepoint.com/html5-full-screen-api/
+
+// Find the right method, call on correct element
+function launchIntoFullscreen(element) {
+  if(element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if(element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if(element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if(element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+}
+
+
+
+// remove navbar
+// $(document).ready(function() {
+
+//   if (navigator.userAgent.match(/Android/i)) {
+//     window.scrollTo(0,0); // reset in case prev not scrolled
+//     var nPageH = $(document).height();
+//     var nViewH = window.outerHeight;
+//     if (nViewH > nPageH) {
+//       nViewH -= 250;
+//       $('BODY').css('height',nViewH + 'px');
+//     }
+//     window.scrollTo(0,1);
+//   }
+
+// });
+
+// OR
+
+// function hideAddressBar(){
+//   if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
+//     document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
+//   setTimeout(window.scrollTo(1,1),0);
+// }
+// window.addEventListener("load",function(){hideAddressBar();});
+// window.addEventListener("orientationchange",function(){hideAddressBar();});
+
+// OR
+
+// function hideAddressBar() {
+//   if(!window.location.hash) {
+//     if(document.height < window.outerHeight)
+//       document.body.style.height = (window.outerHeight + 50) + 'px';
+//     setTimeout( function(){
+//         window.scrollTo(0, 1);
+//         document.body.style.height = 'auto';
+//       }, 50 );
+//   }
+// }
+// window.addEventListener("load",function(){hideAddressBar();});
+// window.addEventListener("orientationchange",function(){hideAddressBar();});
 
 
 // Drupal.behaviors.init_theme = function (context) {