[ADD] doc: new theme

Pretty much completely rewritten theme with custom HTML translator and a
few parts of the old theme extracted to their own extensions.

Banner images thought not to be that huge after all, and not worth the
hassle of them living in a different repository.

co-authored with @stefanorigano

1 files changed, 333 insertions, 0 deletions

diff --git a/doc/_extensions/odoo/static/doc.js b/doc/_extensions/odoo/static/doc.js
new file mode 100644
index 00000000000..4b7e11cb7fb
--- /dev/null
+++ b/doc/_extensions/odoo/static/doc.js
@@ -0,0 +1,333 @@
+(function ($) {
+var log = function(data){
+  return console.log(data);
+}
+
+var update_page = function  () {
+
+  var
+  $header               = $("header"),
+  $main_navbar          = $("#main_navbar"),
+  $navbar_aside         = $(".navbar-aside"),
+  $navClone             = null,
+  $floating_action      = $("#floating_action"),
+  $floating_action_menu = $("#floating_action_menu"),
+  $body                 = $("body"),
+  $main                 = $("main"), // remove
+  $aside                = $("aside"),
+  $mask                 = $("#mask"),
+  $title                = $("#main_title"),
+  $cardTop              = $(".card.top")
+  $cover_img            = $(".card.top .card-img"),
+  ripples               = $(".ripple"),
+  $main_back            = $("#main-back");
+
+  var titleZoom = 1.5,
+           Hgap = 60;
+
+  var nav_h   = $main_navbar.height(),
+  wW          = $(window).width(),
+  titleOffset = ($main.offset().left - $main_back.outerWidth())-15;
+  if($main.hasClass("index")){Hgap = 0}
+  var img_h = $cover_img.height() - Hgap;
+  $navbar_aside.find("li").has("ul").addClass("parent");
+
+  if ($main.hasClass("index")){
+    $main.find("#index .index-tree > .row").each(function(){
+      var childs = $(this).find(".col-md-3");
+      if(childs.length == 2){
+        childs.removeClass("col-md-3").addClass("col-md-6");
+      }
+      if(childs.length == 3){
+        childs.removeClass("col-md-3").addClass("col-md-4");
+      }
+    })
+    $(".floating_action_container").remove();
+  }
+
+  var resize_aside = function(){
+    var navbar_aside_data = $navbar_aside[0].getBoundingClientRect();
+    var $navClone_ul = $navClone.find("> ul");
+    var $navbar_aside_ul = $navbar_aside.find("> ul");
+    var maxH = $(window).height() - 45;
+    maxH_ul = maxH - ($navClone_ul.position().top + 45);
+    $navClone.css({
+      "width": navbar_aside_data.width,
+      "left": navbar_aside_data .left,
+      "height": maxH
+    })
+    $navClone_ul.add($navbar_aside_ul).css("max-height",maxH_ul)
+  }
+
+  var resize = function() {
+    nav_h       = $main_navbar.height();
+    wW          = $(window).width();
+    titleOffset = $main.offset().left - $main_back.outerWidth();
+    if($main.hasClass("index")){Hgap = 0}
+    img_h = $cover_img.height() - Hgap;
+    if($navClone != null){
+      resize_aside();
+    }
+    header_layout();
+  }
+
+
+  var header_layout = function  () {
+    var wTop  = $(window).scrollTop();
+    var r = (wTop)/(img_h - 50);
+
+    function rat() {
+      if(r<0) return 0;
+      if(r>1) return 1;
+      return Number(r.toString().match(/^\d+(?:\.\d{0,2})?/));
+    }
+
+    var ratio = rat();
+
+    if (wW >= 768) {
+
+      $title.css({"font-size": "", "position": "", 'transform':'scale('+(1-(titleZoom-1)*ratio)+')'});
+
+      if( (img_h - wTop) > 0 ){
+        $main_navbar[0].style.cssText += "; height: " + (img_h - wTop)+ "px;";
+        $cover_img[0].style.cssText += "; opacity: " + (0.8-ratio) + ";";
+      }
+
+      if (titleOffset > 0) {
+        $main_back.css("margin-right", titleOffset);
+      } else {
+        $main_back.css("margin-right", "");
+      }
+
+      if (ratio == 1) {
+        $main_navbar.css("height","").add($header).addClass("stacked");
+      } else {
+        $main_navbar.add($header).removeClass("stacked");
+      }
+
+      if ($navClone != null && ($aside.css("display") != "none" )) {
+        var gap = $aside.offset().top - 45;
+        if((wTop > gap)) {
+          $navClone.removeClass("hidden");
+          $navbar_aside.addClass("invisible");
+          resize_aside();
+
+          // ScrollSpy
+          // if(!($navClone.hasClass("binded"))){
+          //   $body.scrollspy({target: "#navClone", offset: 100 });
+          //   $navClone.addClass("binded");
+          //   $body.scrollspy('refresh');
+          // }
+        } else {
+          $navClone.addClass("hidden");
+          $navbar_aside.removeClass("invisible");
+        }
+      }
+
+    } else {
+
+      $cover_img.css("opacity","");
+      $title.css({
+        "position": "relative",
+        "height" : "",
+        "transform":"",
+        "font-size": 18
+      });
+      $main_navbar.addClass("stacked").css({
+        "height":"",
+        "margin": 0
+      })
+    }
+  };
+  header_layout();
+
+  var floating_menu_layout = function () {
+    var lis = $navbar_aside.find("> ul > li").clone(true)
+      .addClass("ripple")
+      .css({
+        position: 'relative',
+        overflow: 'hidden'
+      });
+    lis.find("ul").remove().end()
+      .find("a").removeClass("ripple").on("click", function  () {
+        floating_menu_toggle();
+      });
+    $floating_action_menu.find(".content").empty().append(lis);
+  }
+  floating_menu_layout();
+
+  var floating_menu_toggle = function  () {
+    $floating_action.toggleClass("active");
+    setTimeout(function  () {
+      $floating_action_menu.toggleClass("active");
+      $mask.toggleClass("active");
+    }, 300);
+  };
+
+  var scroll_to = function(el_list) {
+    var offset = 80;
+    el_list.each(function () {
+      var $link = $(this),
+          href = $link.attr("href");
+
+      $link.on("click", function () {
+        var val = $(href).offset().top - 60;
+        $('html, body').animate({
+          scrollTop: val
+        }, 600);
+        log(el_list)
+        $navClone.find("li").removeClass("active");
+        $link.parents("li").addClass("active");
+        return false;
+      })
+    })
+  }
+
+
+  var ripple_animation = function(el_list) {
+    el_list.each(function () {
+      var btn = $(this);
+      btn
+        .css({
+          position: 'relative',
+          overflow: 'hidden'
+        })
+        .bind('mousedown', function (e) {
+          var ripple;
+          if (btn.find('.inner-ripple').length === 0) {
+            ripple = $('<span class="inner-ripple"/>');
+            btn.prepend(ripple);
+          } else {
+            ripple = btn.find('.inner-ripple');
+          }
+          ripple.removeClass('inner-ripple-animated');
+
+          if (!ripple.height() && !ripple.width()) {
+            var diameter = Math.max(btn.outerWidth(), btn.outerHeight());
+            ripple.css({
+              height: diameter,
+              width: diameter
+            });
+          }
+          var x = e.pageX - btn.offset().left - ripple.width() / 2;
+          var y = e.pageY - btn.offset().top - ripple.height() / 2;
+          ripple .css({top: y + 'px', left: x + 'px'}) .addClass('inner-ripple-animated');
+          setTimeout(function () {
+            ripple.removeClass('inner-ripple-animated');
+          }, 351);
+        });
+    });
+  }
+  var aside_layout = function  () {
+
+    if ($navbar_aside.length > 0) {
+
+      var navbar_aside_data = $navbar_aside[0].getBoundingClientRect();
+
+      if ($navClone == null) { // build affix menu
+
+        $navClone = $navbar_aside.clone().attr("id","navClone").appendTo($body);
+
+        //force repainting
+        $navClone[0].style.display='none';
+        setTimeout(function () {
+          $navClone[0].offsetHeight;
+          $navClone[0].style.display='';
+        }, 10);
+        $navClone.addClass("affix hidden");
+
+        ripple_animation($navClone.find("li > a"));
+        scroll_to($navClone.find("li > a"));
+
+        $navClone.css({
+          "width": navbar_aside_data.width,
+          "left": navbar_aside_data .left
+        })
+        $(window).trigger("resize");
+        //$body.scrollspy('refresh');
+      } // End - build affix menu
+
+    }
+  };
+  aside_layout();
+
+  var cards_animate = function  (type, speed) {
+    type = type || 'in';
+    speed = speed || 2000;
+    var $container = $(".container.index"),
+      $cards = $container.find(".card"),
+      $titles = $container.find("h2");
+
+    $cards.each(function  () {
+      var $card = $(this),
+        cardOffset = this.getBoundingClientRect(),
+        offset = cardOffset.left * 0.8 + cardOffset.top,
+        delay = parseFloat(offset / speed).toFixed(2);
+      $card.css("transition-delay", delay + "s");
+    });
+
+    if (type === "in") {
+      $titles.fadeTo(0, 0);
+      $titles.fadeTo(1000, 1);
+      $container.addClass("animating");
+    } else {
+      $titles.fadeTo(300, 0);
+      $container.removeClass("animating");
+    }
+  };
+  cards_animate();
+
+
+  // BIND EVENTS
+
+  $floating_action.on("click", function  () {
+    floating_menu_toggle();
+    return false;
+  });
+
+  $mask.on("click", function  () {
+    floating_menu_toggle();
+    return false;
+  });
+
+  $(".content-switcher").each(function  (index, switcher) {
+    var $switcher = $(switcher),
+        $links = $switcher.find('> ul > li'),
+        $tabs = $switcher.find('> .tabs > *'),
+        $all = $links.add($tabs);
+
+    function select(index) {
+      $all.removeClass('active');
+      $links.eq(index).add($tabs.eq(index)).addClass('active');
+    }
+    select(0);
+    $switcher.on('click', '> ul > li', function () {
+      select($(this).index());
+      return false;
+    });
+  });
+
+
+  $(window)
+    .on("scroll", function () {
+      header_layout();
+      //aside_layout();
+    })
+    .on("resize", function () {
+      resize();
+      header_layout();
+      //aside_layout();
+    })
+    .trigger("scroll");
+
+  //Ripples
+
+  ripple_animation(ripples);
+
+};
+
+$(document).ready(function () {
+  update_page();
+});
+
+})(jQuery);