static pages and loader for chapter an static pages

sites/all/modules/gui/jeemod/jeemod.module

@@ -19,6 +19,14 @@ function jeemod_menu() {
     // 'access arguments' => array('use materio search api'),
   );
 
+  $items['jee/static'] = $base+array(
+    'title' => 'jee',
+    'page callback' => 'jeemod_static',
+    // 'page arguments' => array(2),
+    'access callback' => TRUE,
+    // 'access arguments' => array('use materio search api'),
+  );
+
   return $items;
 }
 

sites/all/modules/gui/jeemod/jeemod.pages.inc

@@ -9,6 +9,29 @@ function jeemod_chapter($nid){
     "viewmode" => $viewmode
   );
 
+  if($nodeview = node_view(node_load($nid),$viewmode)){
+    $rep = $rep+array(
+      'node' => drupal_render($nodeview),
+    );
+    drupal_json_output($rep);
+  }
+}
+
+function jeemod_static(){
+  $viewmode = "full";
+
+
+  // get node by url
+  $path = drupal_get_normal_path(preg_replace('/^\//', '', $_GET['href']));
+  $nid = end(explode("/", $path));
+
+  $rep = array(
+    // "get" => $_GET,
+    // "path" => $path,
+    "nid" => $nid,
+    "viewmode" => $viewmode
+  );
+
   if($nodeview = node_view(node_load($nid),$viewmode)){
     $rep = $rep+array(
       'node' => drupal_render($nodeview),

sites/all/themes/gui/jee/assets/img/close.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg7418"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="close.svg">
+  <defs
+     id="defs7420" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.41"
+     inkscape:cx="3.7448173"
+     inkscape:cy="-0.1230919"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px" />
+  <metadata
+     id="metadata7423">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       transform="matrix(0.95924522,0,0,0.95662221,-925.7886,939.93291)"
+       id="g3165">
+      <g
+         id="g3167">
+        <line
+           style="stroke:#000000;stroke-width:1.5;stroke-miterlimit:10"
+           stroke-miterlimit="10"
+           x1="969.125"
+           y1="113.486"
+           x2="987.29102"
+           y2="95.320999"
+           id="line3169" />
+        <line
+           style="stroke:#000000;stroke-width:1.5;stroke-miterlimit:10"
+           stroke-miterlimit="10"
+           x1="987.29102"
+           y1="113.486"
+           x2="969.125"
+           y2="95.320999"
+           id="line3171" />
+      </g>
+      <rect
+         style="fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10"
+         x="965.854"
+         y="92.161003"
+         stroke-miterlimit="10"
+         width="24.598"
+         height="24.598"
+         id="rect3173" />
+    </g>
+  </g>
+</svg>

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

@@ -1,6 +1,31 @@
 
-$orange:#E42632;
-$orange-light:#E75A0C;
-$grey-dark:#444444;
-$grey:#6F6F6F;
-$grey-light:#6C6C6C;
+$DPH-color:rgb(175,175,0);
+$DPH-col-active:rgb(206,205,0);
+$DPH-col-txt:rgb(104,107,0);
+
+$BC-color:rgb(2,75,135);
+$BC-col-active:rgb(0,102,177);
+$BC-col-txt:rgb(3,61,111);
+
+$SUB-color:rgb(205,7,52);
+$SUB-col-active:rgb(222,0,58);
+$SUB-col-txt:rgb(183,19,48);
+
+$SOL-color:rgb(216,85,9);
+$SOL-col-active:rgb(234,91,12);
+$SOL-col-txt:rgb(178,76,20);
+
+$DUB-color:rgb(40,141,128);
+$DUB-col-active:rgb(98,165,48);
+$DUB-col-txt:rgb(34,116,44);
+
+$OPP-color:rgb(148,27,128);
+$OPP-col-active:rgb(175,19,128);
+$OPP-col-txt:rgb(127,25,101);
+
+$JUSO-color:rgb(0,154,168);
+$JUSO-col-active:rgb(51,180,181);
+$JUSO-col-txt:rgb(11,127,138);
+
+
+$static-col:rgb(141,25,143);

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

@@ -22,7 +22,6 @@ $column-gutter: rem-calc(20);
 */
 @import "communs.scss";
 @import "fonts.scss";
-@import "misc.scss";
 
 
 /*
@@ -728,6 +727,73 @@ div.messages{
 } // #main
 
 
+/* ______________  ________________   _       ______  ___    ____  ____  __________
+  / ___/_  __/   |/_  __/  _/ ____/  | |     / / __ \/   |  / __ \/ __ \/ ____/ __ \
+  \__ \ / / / /| | / /  / // /       | | /| / / /_/ / /| | / /_/ / /_/ / __/ / /_/ /
+ ___/ // / / ___ |/ / _/ // /___     | |/ |/ / _, _/ ___ |/ ____/ ____/ /___/ _, _/
+/____//_/ /_/  |_/_/ /___/\____/     |__/|__/_/ |_/_/  |_/_/   /_/   /_____/_/ |_|
+*/
+#static-wrapper{
+  position:absolute;
+  top:15%; left:15%; bottom:0; right:20px;
+  z-index: -1;
+  background-color: #fff;
+
+  opacity:0;
+  transition:2s ease-out;
+  transition-property:opacity;
+
+  &.visible{
+    opacity:0.9;
+    z-index: 500;
+  }
+
+  >.close{
+    position:absolute;
+    top:20px; right:20px;
+    z-index: 500;
+    width:25px; height:25px;
+    cursor:pointer;
+    @include bg-svg-png('close');
+  }
+
+  >.inner{
+    padding:5em 7em 3em;
+    width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
+  }
+
+  h2.node-title{
+    font-family: "epflulb";
+    text-transform: uppercase!important;
+    font-size:3em;
+    color:#000;
+  }
+
+  .content{
+    h3{
+      font-family: "epflulb";
+      font-size:2em;
+      text-transform: uppercase!important;
+      color:$static-col;
+    }
+
+    h4{
+      // font-family: "epflulb";
+      font-size: 1.5em;
+      // // color:$static-col;
+      font-weight: 700;
+    }
+
+    p{
+      font-family: "open_sans", sans-serif;
+      font-weight:600;
+      font-size:1em;
+      line-height:1.3em;
+    }
+  }
+}
+
+
 /*  __________  ____  ________________
    / ____/ __ \/ __ \/_  __/ ____/ __ \
   / /_  / / / / / / / / / / __/ / /_/ /
@@ -738,6 +804,7 @@ div.messages{
 #footer{
   position:fixed;
   bottom:0; right:20px;
+  z-index:900;
   .block{
     display:inline-block;
     vertical-align: top;
@@ -771,6 +838,23 @@ div.messages{
  / /  / // / ___/ / /___
 /_/  /_/___//____/\____/
 */
+#loader{
+  position:absolute;
+  top:50%; left:50%;
+  width:120px; height:10px;
+  margin-left:-60px; margin-top:-5px;
+
+  background: transparent url(../assets/img/loader.gif) no-repeat center center;
+  z-index:-1; opacity:0;
+  transition:0.5s ease-out;
+  transition-property:opacity;
+
+  body.loading &{
+    z-index: 1000;
+    opacity:1;
+  }
+}
+
 #fullscreen-btn{
   position:fixed;
   right:20px; top:20px;

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

@@ -1,28 +0,0 @@
-
-$DPH-color:rgb(175,175,0);
-$DPH-col-active:rgb(206,205,0);
-$DPH-col-txt:rgb(104,107,0);
-
-$BC-color:rgb(2,75,135);
-$BC-col-active:rgb(0,102,177);
-$BC-col-txt:rgb(3,61,111);
-
-$SUB-color:rgb(205,7,52);
-$SUB-col-active:rgb(222,0,58);
-$SUB-col-txt:rgb(183,19,48);
-
-$SOL-color:rgb(216,85,9);
-$SOL-col-active:rgb(234,91,12);
-$SOL-col-txt:rgb(178,76,20);
-
-$DUB-color:rgb(40,141,128);
-$DUB-col-active:rgb(98,165,48);
-$DUB-col-txt:rgb(34,116,44);
-
-$OPP-color:rgb(148,27,128);
-$OPP-col-active:rgb(175,19,128);
-$OPP-col-txt:rgb(127,25,101);
-
-$JUSO-color:rgb(0,154,168);
-$JUSO-col-active:rgb(51,180,181);
-$JUSO-col-txt:rgb(11,127,138);

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

@@ -38,42 +38,23 @@ img{height:auto; margin:0.5em 0; max-width:99%;}
 p{ border: 1px dashed #848484; }
 div{border: 1px solid #1A1A1A;}
 
+h3{
+  font-family: "epflulb";
+  font-size:2em;
+  text-transform: uppercase!important;
+  color:$static-col;
+}
 
-/* LAYOUT AND GRAPHICS */
-/*
-#full{ width:99%; }
-#demi{ width:47%; }
-#tiers{ width:29%; }
-#quart{ width:23%; }
-#right{ float:right; margin-left:2%; }
-#left{ float:left; margin-right:2%; }
-#center{ display:block; margin:0 auto; }
-
-
-img{height:auto; margin:0.5em 0;}
-p{ border: 1px dashed #848484; }
-div{border: 1px solid #1A1A1A;}
-
-
-img,p,div{ position:relative;
-	&:before{font-size:10px; color:red; background-color: #1A1A1A; position:absolute; top:0; z-index:3000;}
-
-	&.full{#full; &:before{content:" full ";}}
-	&.demi{ #demi; margin-right:2%; &:before{content:" demi "; right:0;}}
-	&.tiers{ #tiers; margin-right:2%; &:before{content:" tiers "; right:0;}}
-	&.quart{ #quart; margin-right:2%; &:before{content:" quart "; right:0;}}
-
-	&.demi-left{ #demi; #left; &:before{content:" demi-left "; left:0;}}
-	&.demi-right{ #demi; #right;  &:before{content:" demi-right "; right:0;}}
-	&.demi-center{ #demi; #center;  &:before{content:" demi-denter "; right:0;}}
-
-	&.tiers-left{ #tiers; #left;  &:before{content:" tiers-left "; left:0;}}
-	&.tiers-right{ #tiers; #right;  &:before{content:" tiers-right "; right:0;}}
-	&.tiers-center{ #tiers; #center;  &:before{content:" tiers-center "; right:0;}}
-
-	&.quart-left{ #quart; #left;  &:before{content:" quart-left "; left:0;}}
-	&.quart-right{ #quart; #right;  &:before{content:" quart-right "; right:0;}}
-	&.quart-center{ #quart; #center;  &:before{content:" quart-center "; right:0;}}
-
+h4{
+  // font-family: "epflulb";
+  font-size: 1.5em;
+  // // color:$static-col;
+  font-weight: 700;
 }
-*/
+
+p{
+  font-family: "open_sans", sans-serif;
+  font-weight:600;
+  font-size:1em;
+  line-height:1.3em;
+}

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

@@ -12,7 +12,7 @@
 jQuery(document).ready(function($) {
   console.log('Hello Jee');
 
-  var _debug = false,
+  var _debug = true,
       _avgDelay = 1,
       _lastDraw = new Date,
       _fps,
@@ -41,6 +41,12 @@ jQuery(document).ready(function($) {
   var _bubbles = new Array(),
       _stars = new Array();
 
+  var _$footer = $('#footer'),
+      _$static_wrapper = $('<div><div class="inner"></div></div>').attr('id', 'static-wrapper').appendTo(_$container),
+      _$close_static = $('<div>').addClass('close').appendTo(_$static_wrapper);
+      _loaded_static = false;
+
+  var _$loader = $('<div>').attr('id','loader').appendTo(_$body);
 
   function init(){
     if(_debug)
@@ -48,6 +54,7 @@ jQuery(document).ready(function($) {
 
     initChapterWrapper();
     initChapters();
+    initStaticLinks();
     launchNav();
 
     // FULL SCREEN
@@ -61,17 +68,17 @@ jQuery(document).ready(function($) {
     };
 
     // create stars
-    for (var i = 20; i > 0; i--) {
-      _stars.push(
-        $('<div>')
-          .addClass('star star-'+i)
-          .css({
-            left:randB(-400, _container.w+400),
-            top:randB(-400, _container.h+400)
-          })
-          .prependTo(_$container)
-      );
-    };
+    // for (var i = 20; i > 0; i--) {
+    //   _stars.push(
+    //     $('<div>')
+    //       .addClass('star star-'+i)
+    //       .css({
+    //         left:randB(-400, _container.w+400),
+    //         top:randB(-400, _container.h+400)
+    //       })
+    //       .prependTo(_$container)
+    //   );
+    // };
   };
 
   function initDebug(){
@@ -135,7 +142,7 @@ jQuery(document).ready(function($) {
         console.log('document mousedown');
         clearTimeout(_timeout_dragging);
 
-        if(_loaded_chapter)
+        if(_loaded_chapter || _loaded_static)
           return false;
 
         // set initial cursor pos
@@ -157,7 +164,7 @@ jQuery(document).ready(function($) {
       .bind('mouseup', function(e){
         console.log('document mouseup');
 
-        if(_loaded_chapter)
+        if(_loaded_chapter || _loaded_static)
           return false;
 
         stopMoveNav();
@@ -179,7 +186,7 @@ jQuery(document).ready(function($) {
         console.log('touchstart');
         clearTimeout(_timeout_dragging);
 
-        if(_loaded_chapter)
+        if(_loaded_chapter || _loaded_static)
           return false;
 
         // set initial pos
@@ -194,7 +201,7 @@ jQuery(document).ready(function($) {
       .bind('touchmove', function(e){
         console.log('document touchmove');
 
-        if(_loaded_chapter)
+        if(_loaded_chapter || _loaded_static)
           return false;
 
         updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
@@ -202,7 +209,7 @@ jQuery(document).ready(function($) {
       .bind('touchend', function(e){
         console.log("document touchend");
 
-        if(_loaded_chapter)
+        if(_loaded_chapter || _loaded_static)
           return false;
 
         stopMoveNav();
@@ -303,6 +310,43 @@ jQuery(document).ready(function($) {
     if(_loaded_chapter)
       setTimeout(_loaded_chapter.buildVideos(), 100);
   };
+
+  function initStaticLinks(){
+    $('ul.menu a', _$footer).on('click', onClickStaticLink);
+    _$close_static.on('click', onCloseStatic);
+  };
+
+  function onClickStaticLink(e){
+    e.preventDefault();
+    _$static_wrapper.removeClass('visible');
+    loadStaticContent($(this).attr("href"));
+    _$body.addClass('loading');
+    _loaded_static = true;
+    return false;
+  };
+
+  function loadStaticContent(h){
+    $.getJSON(
+      '/jee/static',
+      {"href":h},
+      onStaticLoaded
+    );
+  };
+
+  function onStaticLoaded(data, textstatus){
+    console.log('data',data);
+    displayStatic(data.node);
+  };
+
+  function displayStatic(node){
+    _$static_wrapper.addClass('visible').find('.inner').html(node);
+    _$body.removeClass('loading');
+  };
+
+  function onCloseStatic(e){
+    _$static_wrapper.removeClass('visible');
+  };
+
   /*
      ________                __
     / ____/ /_  ____ _____  / /____  _____
@@ -635,6 +679,8 @@ jQuery(document).ready(function($) {
 
       Chapter.prototype.loadNode = function(e){
         // console.log("Chapter :: open : nid", this.nid);
+        _$body.addClass('loading');
+
         $.getJSON(
           '/jee/chapter/'+this.nid,
           {},
@@ -685,6 +731,8 @@ jQuery(document).ready(function($) {
         _$chapter_wrapper.addClass('visible');
 
         // this.$vids.eq(this.cur_vid_playing).vimeo('play');
+
+        _$body.removeClass('loading');
       };
 
       Chapter.prototype.placeText = function(i, e){

sites/all/themes/gui/jee/templates/node--page.tpl.php

@@ -0,0 +1,16 @@
+<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
+
+  <?php if (!$page): ?>
+    <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
+  <?php endif; ?>
+
+  <div class="content"<?php print $content_attributes; ?>>
+    <?php
+      // We hide the comments and links now so that we can render them later.
+      hide($content['comments']);
+      hide($content['links']);
+      print render($content);
+    ?>
+  </div>
+  <?php print render($content['links']); ?>
+</div>