added basic starter ajax link algorythme, added overlayScrollbar js lib, cleaned template

sites/all/themes/custom/edlptheme/assets/dist/bower/jquery.hotkeys.js

@@ -1,6 +1,3 @@
-/*jslint browser: true*/
-/*jslint jquery: true*/
-
 /*
  * jQuery Hotkeys Plugin
  * Copyright 2010, John Resig
@@ -11,186 +8,106 @@
  *
  * Original idea by:
  * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
- */
+*/
 
-/*
+(function(jQuery){
- * One small change is: now keys are passed by object { keys: '...' }
- * Might be useful, when you want to pass some other data to your handler
- */
 
-(function(jQuery) {
+	jQuery.hotkeys = {
+		version: "0.8+",
 
-  jQuery.hotkeys = {
+		specialKeys: {
-    version: "0.8",
+			8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
+			20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+			37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
+			96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
+			104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
+			112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
+			120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 188: ",", 190: ".",
+			191: "/", 224: "meta"
+		},
 
-    specialKeys: {
+		shiftNums: {
-      8: "backspace",
+			"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
-      9: "tab",
+			"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
-      10: "return",
+			".": ">",  "/": "?",  "\\": "|"
-      13: "return",
+		}
-      16: "shift",
+	};
-      17: "ctrl",
-      18: "alt",
-      19: "pause",
-      20: "capslock",
-      27: "esc",
-      32: "space",
-      33: "pageup",
-      34: "pagedown",
-      35: "end",
-      36: "home",
-      37: "left",
-      38: "up",
-      39: "right",
-      40: "down",
-      45: "insert",
-      46: "del",
-      59: ";",
-      61: "=",
-      96: "0",
-      97: "1",
-      98: "2",
-      99: "3",
-      100: "4",
-      101: "5",
-      102: "6",
-      103: "7",
-      104: "8",
-      105: "9",
-      106: "*",
-      107: "+",
-      109: "-",
-      110: ".",
-      111: "/",
-      112: "f1",
-      113: "f2",
-      114: "f3",
-      115: "f4",
-      116: "f5",
-      117: "f6",
-      118: "f7",
-      119: "f8",
-      120: "f9",
-      121: "f10",
-      122: "f11",
-      123: "f12",
-      144: "numlock",
-      145: "scroll",
-      173: "-",
-      186: ";",
-      187: "=",
-      188: ",",
-      189: "-",
-      190: ".",
-      191: "/",
-      192: "`",
-      219: "[",
-      220: "\\",
-      221: "]",
-      222: "'"
-    },
 
-    shiftNums: {
+	function keyHandler( handleObj ) {
-      "`": "~",
-      "1": "!",
-      "2": "@",
-      "3": "#",
-      "4": "$",
-      "5": "%",
-      "6": "^",
-      "7": "&",
-      "8": "*",
-      "9": "(",
-      "0": ")",
-      "-": "_",
-      "=": "+",
-      ";": ": ",
-      "'": "\"",
-      ",": "<",
-      ".": ">",
-      "/": "?",
-      "\\": "|"
-    },
 
-    // excludes: button, checkbox, file, hidden, image, password, radio, reset, search, submit, url
+		var origHandler = handleObj.handler,
-    textAcceptingInputTypes: [
+			//use namespace as keys so it works with event delegation as well
-      "text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime",
+			//will also allow removing listeners of a specific key combination
-      "datetime-local", "search", "color", "tel"],
+			//and support data objects
+			keys = (handleObj.namespace || "").toLowerCase().split(" ");
+			keys = jQuery.map(keys, function(key) { return key.split("."); });
 
-    options: {
+		//no need to modify handler if no keys specified
-      filterTextInputs: true
+		//Added keys[0].substring(0, 12) to work with jQuery ui 1.9.0
-    }
+		//Added accordion, tabs and menu, then jquery ui can use keys.
-  };
 
-  function keyHandler(handleObj) {
+			if (keys.length === 1 && (keys[0] === "" || 
-    if (typeof handleObj.data === "string") {
+			keys[0].substring(0, 12) === "autocomplete"  || 
-      handleObj.data = {
+			keys[0].substring(0, 9) === "accordion"  || 
-        keys: handleObj.data
+			keys[0].substring(0, 4) === "tabs"  || 
-      };
+			keys[0].substring(0, 4) === "menu")) {
-    }
+			return;
+		}
 
-    // Only care when a possible input has been specified
+		handleObj.handler = function( event ) {
-    if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string") {
+			// Don't fire in text-accepting inputs that we didn't directly bind to
-      return;
+			// important to note that $.fn.prop is only available on jquery 1.6+
-    }
+			if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
+				event.target.type === "text" || $(event.target).prop('contenteditable') == 'true' )) {
+				return;
+			}
 
-    var origHandler = handleObj.handler,
+			// Keypress represents characters, not special keys
-      keys = handleObj.data.keys.toLowerCase().split(" ");
+			var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[ event.which ],
+				character = String.fromCharCode( event.which ).toLowerCase(),
+				key, modif = "", possible = {};
 
-    handleObj.handler = function(event) {
+			// check combinations (alt|ctrl|shift+anything)
-      //      Don't fire in text-accepting inputs that we didn't directly bind to
+			if ( event.altKey && special !== "alt" ) {
-      if (this !== event.target && (/textarea|select/i.test(event.target.nodeName) ||
+				modif += "alt_";
-          (jQuery.hotkeys.options.filterTextInputs &&
+			}
-            jQuery.inArray(event.target.type, jQuery.hotkeys.textAcceptingInputTypes) > -1))) {
-        return;
-      }
 
-      var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[event.which],
+			if ( event.ctrlKey && special !== "ctrl" ) {
-        character = String.fromCharCode(event.which).toLowerCase(),
+				modif += "ctrl_";
-        modif = "",
+			}
-        possible = {};
 
-      jQuery.each(["alt", "ctrl", "shift"], function(index, specialKey) {
+			// TODO: Need to make sure this works consistently across platforms
+			if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
+				modif += "meta_";
+			}
 
-        if (event[specialKey + 'Key'] && special !== specialKey) {
+			if ( event.shiftKey && special !== "shift" ) {
-          modif += specialKey + '+';
+				modif += "shift_";
-        }
+			}
-      });
 
-      // metaKey is triggered off ctrlKey erronously
+			if ( special ) {
-      if (event.metaKey && !event.ctrlKey && special !== "meta") {
+				possible[ modif + special ] = true;
-        modif += "meta+";
-      }
 
-      if (event.metaKey && special !== "meta" && modif.indexOf("alt+ctrl+shift+") > -1) {
+			} else {
-        modif = modif.replace("alt+ctrl+shift+", "hyper+");
+				possible[ modif + character ] = true;
-      }
+				possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
 
-      if (special) {
+				// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
-        possible[modif + special] = true;
+				if ( modif === "shift_" ) {
-      }
+					possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
-      else {
+				}
-        possible[modif + character] = true;
+			}
-        possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
 
-        // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
+			for ( var i = 0, l = keys.length; i < l; i++ ) {
-        if (modif === "shift+") {
+				if ( possible[ keys[i] ] ) {
-          possible[jQuery.hotkeys.shiftNums[character]] = true;
+					return origHandler.apply( this, arguments );
-        }
+				}
-      }
+			}
+		};
+	}
 
-      for (var i = 0, l = keys.length; i < l; i++) {
+	jQuery.each([ "keydown", "keyup", "keypress" ], function() {
-        if (possible[keys[i]]) {
+		jQuery.event.special[ this ] = { add: keyHandler };
-          return origHandler.apply(this, arguments);
+	});
-        }
-      }
-    };
-  }
 
-  jQuery.each(["keydown", "keyup", "keypress"], function() {
+})( jQuery );
-    jQuery.event.special[this] = {
-      add: keyHandler
-    };
-  });
-
-})(jQuery || this.jQuery || window.jQuery);

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -6,9 +6,35 @@
 
     function init(){
       console.log("EdlpTheme init()");
-      
+      initScrollbars();
+      initAjaxLinks();
     };
 
+    function initScrollbars(){
+      $('.os-scroll').overlayScrollbars({
+        overflowBehavior:{x:'h',y:'scroll'}
+      });
+    };
+
+    function  initAjaxLinks(){
+      console.log('initAjaxLinks');
+      $('a', '#block-mainnavigation').on('click', onClickAjaxLink);
+    };
+
+    function onClickAjaxLink(e){
+      e.preventDefault();
+      // TODO: drupal settings not defined on NOT front page
+      var path = window.location.origin + drupalSettings.basepath + $(this).attr('data-drupal-link-system-path')+'/ajax';
+      $.getJSON(path, {}, onAjaxLinkLoaded);
+
+      return false;
+    };
+
+    function onAjaxLinkLoaded(data){
+      console.log('ajax link loaded : data', data);
+      $('main[role="main"] .layout-content').html(data.rendered);
+      initScrollbars();
+    };
 
     init();
   }

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1,6 +1,10 @@
 body {
   background: white; }
 
+a {
+  color: inherit;
+  text-decoration: none; }
+
 a, a:focus, a:active {
   outline: none; }
 
@@ -26,51 +30,126 @@ div.layout-container {
   z-index: 1; }
 
 main[role="main"] {
-  background-color: rgba(255, 255, 255, 0.9); }
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 7em 2em 9em;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; }
+  main[role="main"] .layout-content, main[role="main"] .region-content, main[role="main"] #block-edlptheme-content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden; }
+  main[role="main"] .kint {
+    pointer-events: auto; }
 
 footer[role="contentinfo"] {
   position: fixed;
   bottom: 0;
   width: 100%; }
 
-#block-edlptheme-branding h1 {
+header[role="banner"] {
-  margin: 0;
+  padding: 0 0 1em 0;
-  display: inline-block;
+  border-bottom: 1px solid red; }
-  font-size: 1.5em;
+
-  text-transform: lowercase; }
+#block-edlptheme-branding {
-  #block-edlptheme-branding h1 a {
+  display: inline-block; }
-    line-height: 0.93;
+  #block-edlptheme-branding h1 {
-    text-align: center;
+    margin: 0;
-    color: inherit;
-    text-decoration: none;
     display: inline-block;
-    -webkit-columns: 3.74em 2;
+    font-size: 1.5em;
-    columns: 3.74em 2;
+    text-transform: lowercase; }
-    -webkit-column-gap: 2em;
+    #block-edlptheme-branding h1 a {
-    column-gap: 2em;
+      line-height: 0.93;
-    word-break: break-all;
+      text-align: center;
-    -webkit-hyphens: auto;
+      color: inherit;
-    -ms-hyphens: auto;
+      text-decoration: none;
-    hyphens: auto;
+      display: inline-block;
-    position: relative; }
+      -webkit-columns: 3.74em 2;
-    #block-edlptheme-branding h1 a:after, #block-edlptheme-branding h1 a:before {
+      columns: 3.74em 2;
-      content: '';
+      -webkit-column-gap: 2em;
-      position: absolute;
+      column-gap: 2em;
-      top: 50%;
+      word-break: break-all;
-      height: 0; }
+      -webkit-hyphens: auto;
-    #block-edlptheme-branding h1 a:before {
+      -ms-hyphens: auto;
-      left: 3.74em;
+      hyphens: auto;
-      border-bottom: 0.08em solid #000;
+      position: relative; }
-      width: 2.5em;
+      #block-edlptheme-branding h1 a:after, #block-edlptheme-branding h1 a:before {
-      -webkit-transform: rotateZ(-45deg);
+        content: '';
-      transform: rotateZ(-45deg); }
+        position: absolute;
-    #block-edlptheme-branding h1 a:after {
+        top: 50%;
-      top: 47%;
+        height: 0; }
-      left: 4.74em;
+      #block-edlptheme-branding h1 a:before {
-      border-top: 0.2em solid red;
+        left: 3.74em;
-      width: 0.5em;
+        border-bottom: 0.08em solid #000;
-      -webkit-transform: rotateZ(45deg);
+        width: 2.5em;
-      transform: rotateZ(45deg); }
+        -webkit-transform: rotateZ(-45deg);
+        transform: rotateZ(-45deg); }
+      #block-edlptheme-branding h1 a:after {
+        top: 47%;
+        left: 4.74em;
+        border-top: 0.2em solid red;
+        width: 0.5em;
+        -webkit-transform: rotateZ(45deg);
+        transform: rotateZ(45deg); }
+
+#block-mainnavigation {
+  float: right; }
+  #block-mainnavigation ul {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap; }
+    #block-mainnavigation ul li {
+      margin: 0;
+      padding: 0;
+      display: inline-block; }
+      #block-mainnavigation ul li a {
+        font-size: 0.756em;
+        color: inherit;
+        text-decoration: none;
+        text-transform: uppercase;
+        margin-left: 1em; }
+        #block-mainnavigation ul li a:before {
+          content: "";
+          display: inline-block;
+          width: 0.6em;
+          height: 0.6em;
+          border: 1px solid #000;
+          margin-right: 0.3em; }
+        #block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a:hover:before {
+          border-color: red;
+          background-color: red; }
+
+#agenda {
+  pointer-events: auto;
+  background-color: rgba(255, 255, 255, 0.9);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-top: 1px solid red;
+  border-bottom: 1px solid red;
+  padding: 1em;
+  position: relative;
+  white-space: nowrap;
+  height: 100%; }
+  #agenda div.column {
+    white-space: normal;
+    display: inline-block;
+    vertical-align: top;
+    height: 100%; }
+  #agenda div.next-event {
+    width: 65%; }
+  #agenda div.future-past-events {
+    width: 33%; }
+  #agenda ul, #agenda li {
+    margin: 0;
+    padding: 0;
+    list-style: none; }
+  #agenda article.node--type-evenement h2 {
+    font-size: 1em; }
 
 footer {
   display: table;
@@ -133,6 +212,8 @@ footer {
           color: inherit;
           text-decoration: none;
           font-size: 0.756em; }
+        footer .block-language ul li.is-active a {
+          color: red; }
   footer .block-block-edlp-entrees {
     display: inline-block; }
     footer .block-block-edlp-entrees ul {

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -6,9 +6,35 @@
 
     function init(){
       console.log("EdlpTheme init()");
-      
+      initScrollbars();
+      initAjaxLinks();
     };
 
+    function initScrollbars(){
+      $('.os-scroll').overlayScrollbars({
+        overflowBehavior:{x:'h',y:'scroll'}
+      });
+    };
+
+    function  initAjaxLinks(){
+      console.log('initAjaxLinks');
+      $('a', '#block-mainnavigation').on('click', onClickAjaxLink);
+    };
+
+    function onClickAjaxLink(e){
+      e.preventDefault();
+      // TODO: drupal settings not defined on NOT front page
+      var path = window.location.origin + drupalSettings.basepath + $(this).attr('data-drupal-link-system-path')+'/ajax';
+      $.getJSON(path, {}, onAjaxLinkLoaded);
+
+      return false;
+    };
+
+    function onAjaxLinkLoaded(data){
+      console.log('ajax link loaded : data', data);
+      $('main[role="main"] .layout-content').html(data.rendered);
+      initScrollbars();
+    };
 
     init();
   }

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -11,7 +11,14 @@
 @import 'base/layout';
 
 // header
+
+header[role="banner"]{
+  padding:0 0 1em 0;
+  border-bottom: 1px solid red;
+}
+
 #block-edlptheme-branding{
+  display: inline-block;
   h1{
     margin:0; display: inline-block;
     font-size: 1.5em;
@@ -53,6 +60,79 @@
   }
 }
 
+#block-mainnavigation{
+  float:right;
+  ul{
+    margin:0; padding: 0;
+    white-space: nowrap;
+    li{
+      margin:0; padding:0;
+      display: inline-block;
+      a{
+        font-size: 0.756em;
+        color:inherit;
+        text-decoration: none;
+        text-transform: uppercase;
+        margin-left: 1em;
+        &:before{
+          content: "";
+          display:inline-block;
+          $sq:0.6em;
+          width: $sq; height:$sq;
+          border: 1px solid #000;
+          margin-right: 0.3em;
+        }
+        &.is-active:before,
+        &:hover:before{
+          border-color: red;
+          background-color: red;
+        }
+      }
+    }
+  }
+}
+
+// main
+// main[role="main"]{
+//   .layout-content{
+//     p{
+//       white-space:normal;
+//     }
+//   }
+// }
+
+#agenda{
+  pointer-events: auto;
+  background-color: $transparent-bg;
+  box-sizing: border-box;
+  border-top: 1px solid red;
+  border-bottom: 1px solid red;
+  padding: 1em;
+  position: relative;
+  white-space: nowrap;
+  height: 100%;
+  div.column{
+    white-space: normal;
+    display: inline-block;
+    vertical-align: top;
+    height:100%;
+  }
+  div.next-event{
+    width:65%;
+  }
+  div.future-past-events{
+    width:33%;
+  }
+
+  ul,li{
+    margin:0; padding:0;
+    list-style: none;
+  }
+  article.node--type-evenement{
+    h2{font-size: 1em;}
+  }
+}
+
 
 // Footer
 @mixin oblique-list {
@@ -133,6 +213,9 @@ footer{
           text-decoration: none;
           font-size: 0.756em;
         }
+        &.is-active{
+          a{color: red;}
+        }
       }
     }
   }

sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss

@@ -24,8 +24,21 @@ header[role="banner"]{
 
 main[role="main"]{
   // outline:1px solid green;
-  background-color: $transparent-bg;
   // display: none;
+  pointer-events: none;
+  position: absolute;
+  left:0; top:0;
+  box-sizing:border-box;
+  padding:7em 2em 9em;
+  width:100%; height:100%;
+  overflow: hidden;
+  .layout-content, .region-content, #block-edlptheme-content{
+    width: 100%; height:100%;
+    overflow:hidden;
+  }
+  .kint{
+    pointer-events: auto;
+  }
 }
 
 footer[role="contentinfo"]{

sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss

@@ -2,5 +2,9 @@ body {
 	background: white;
 }
 
+a{
+	color: inherit;
+	text-decoration: none;
+}
 a, a:focus, a:active { outline: none; }
 a:focus{ -moz-outline-style: none; }

sites/all/themes/custom/edlptheme/bower.json

@@ -15,6 +15,7 @@
   ],
   "dependencies": {
     "history.js": "latest",
-    "jquery.hotkeys": "latest"
+    "jquery.hotkeys": "latest",
+    "overlayScrollbars": "latest"
   }
 }

sites/all/themes/custom/edlptheme/edlptheme.libraries.yml

@@ -3,12 +3,15 @@ global-css:
   css:
     base:
       assets/dist/styles/app.min.css: {}
+      assets/dist/bower/OverlayScrollbars.min.css: {}
+
 
 global-js:
   version: VERSION
   js:
     bower_components/history.js/scripts/bundled/html4+html5/jquery.history.js: { scope: footer }
     assets/dist/bower/jquery.hotkeys.js: { scope: footer }
+    assets/dist/bower/jquery.overlayScrollbars.min.js: { scope: footer }
     assets/dist/scripts/main.min.js: { scope: footer }
   dependencies:
     - core/matchmedia

sites/all/themes/custom/edlptheme/gulpfile.js

@@ -42,10 +42,16 @@ gulp.task('bower', function() {
     gulp.src(mainBowerFiles({
       "overrides":{
         "history.js":{
-          "main":"scripts/bundled/html4+html5/jquery.history.js"
+          "main":"./scripts/bundled/html4+html5/jquery.history.js"
         },
         "jquery":{
           "ignore":true
+        },
+        "overlayScrollbars":{
+          "main":[
+            "./js/jquery.overlayScrollbars.min.js",
+            "./css/OverlayScrollbars.min.css"
+          ]
         }
       }
     }))

sites/all/themes/custom/edlptheme/templates/layout/page.html.twig

@@ -49,13 +49,9 @@
   </header>
 
   <main role="main">
-    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
-
     <div class="layout-content">
       {{ page.content }}
     </div>{# /.layout-content #}
-
-
   </main>
 
   {% if page.footer_left or page.footer_center or page.footer_right %}