WIP Added Armbian navbar to top of docs content

docs/css/maxmegamenu.js

@@ -0,0 +1,357 @@
+/*jslint browser: true, white: true */
+/*global console,jQuery,megamenu,window,navigator*/
+
+/**
+ * Max Mega Menu jQuery Plugin
+ */
+(function($) {
+
+    "use strict";
+
+    $.maxmegamenu = function(menu, options) {
+
+        var plugin = this;
+        var $menu = $(menu);
+
+        var defaults = {
+            event: $menu.attr('data-event'),
+            effect: $menu.attr('data-effect'),
+            effect_speed: parseInt($menu.attr('data-effect-speed')),
+            panel_width: $menu.attr('data-panel-width'),
+            panel_inner_width: $menu.attr('data-panel-inner-width'),
+            second_click: $menu.attr('data-second-click'),
+            vertical_behaviour: $menu.attr('data-vertical-behaviour'),
+            reverse_mobile_items: $menu.attr('data-reverse-mobile-items'),
+            document_click: $menu.attr('data-document-click'),
+            breakpoint: $menu.attr('data-breakpoint')
+        };
+
+        plugin.settings = {};
+
+        var isTouchDevice = function() {
+            return ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 || (window.DocumentTouch && document instanceof DocumentTouch));
+        };
+
+        plugin.hidePanel = function(anchor, immediate) {
+
+            anchor.siblings('.mega-sub-menu').children('.mega-toggle-on').removeClass('mega-toggle-on');
+
+            if (immediate) {
+                anchor.siblings('.mega-sub-menu').removeClass('mega-toggle-on');
+                anchor.parent().removeClass('mega-toggle-on').triggerHandler("close_panel");
+                return;
+            }
+
+            var timeout = plugin.settings.effect_speed + parseInt(megamenu.timeout, 10);
+
+            if ( megamenu.effect[plugin.settings.effect] ) {
+                var effect = megamenu.effect[plugin.settings.effect]['out'];
+                var speed = plugin.settings.effect_speed;
+
+                if (effect.css) {
+                    anchor.siblings('.mega-sub-menu').css(effect.css);
+                }
+
+                if (effect.animate) {
+
+                    anchor.siblings('.mega-sub-menu').animate(effect.animate, speed, function() {
+                        anchor.parent().removeClass('mega-toggle-on').triggerHandler("close_panel");
+                    });
+                    anchor.siblings('.mega-sub-menu').each( function() {
+                        add_animating_class(anchor.parent());
+                    });
+                } else {
+                    anchor.parent().removeClass('mega-toggle-on').triggerHandler("close_panel");
+                    add_animating_class(anchor.parent());
+                }
+            } else {
+                anchor.parent().removeClass('mega-toggle-on').triggerHandler("close_panel");
+                add_animating_class(anchor.parent());
+            }
+
+        };
+
+        var add_animating_class = function(element) {
+            var timeout = plugin.settings.effect_speed + parseInt(megamenu.timeout, 10);
+
+            element.addClass("mega-animating");
+
+            setTimeout(function() {
+               element.removeClass("mega-animating");
+            }, timeout );
+        }
+
+        plugin.hideAllPanels = function() {
+            $('.mega-toggle-on > a', $menu).each(function() {
+                plugin.hidePanel($(this), true);
+            });
+        };
+
+
+        plugin.hideSiblingPanels = function(anchor, immediate) {
+            // all open children of open siblings
+            anchor.parent().siblings().find('.mega-toggle-on').andSelf().children('a').each(function() {
+                plugin.hidePanel($(this), immediate);
+            });
+        }
+
+
+        plugin.isDesktopView = function() {
+            return $(window).width() > plugin.settings.breakpoint;
+        }
+
+
+        plugin.hideOpenSiblings = function() {
+            // desktops, horizontal
+            if ( plugin.isDesktopView() && ( $menu.hasClass('mega-menu-horizontal') || $menu.hasClass('mega-menu-vertical') ) ) {
+                return 'immediately';
+            }
+
+            // mobile, keyboard navigation
+            if ( ! plugin.isDesktopView() && $menu.hasClass('mega-keyboard-navigation') ) {
+                return 'animated';
+            }
+
+            if ( plugin.settings.vertical_behaviour == 'accordion' ) {
+                return 'animated';
+            }
+        }
+
+
+        plugin.showPanel = function(anchor) {
+
+            if ( !plugin.isDesktopView() && anchor.parent().hasClass('mega-hide-sub-menu-on-mobile') ) {
+                return;
+            }
+
+            switch( plugin.hideOpenSiblings() ) {
+                case 'immediately':
+                    plugin.hideSiblingPanels(anchor, true);
+                    break;
+                case 'animated':
+                    plugin.hideSiblingPanels(anchor, false);
+                    break;
+            }
+
+            // apply dynamic width and sub menu position
+            if ( anchor.parent().hasClass('mega-menu-megamenu') && $(plugin.settings.panel_width).length ) {
+                var submenu_offset = $menu.offset();
+                var target_offset = $(plugin.settings.panel_width).offset();
+
+                anchor.siblings('.mega-sub-menu').css({
+                    width: $(plugin.settings.panel_width).outerWidth(),
+                    left: (target_offset.left - submenu_offset.left) + "px"
+                });
+            }
+
+
+            // apply inner width to sub menu by adding padding to the left and right of the mega menu
+            if ( anchor.parent().hasClass('mega-menu-megamenu') && plugin.settings.panel_inner_width && plugin.settings.panel_inner_width.length > 0 ) {
+
+                if ( $(plugin.settings.panel_inner_width).length ) {
+                    // jQuery selector
+                    var target_width = parseInt($(plugin.settings.panel_inner_width).width(), 10);
+                } else {
+                    // we're using a pixel width
+                    var target_width = parseInt(plugin.settings.panel_inner_width, 10);
+                }
+
+                var submenu_width = parseInt(anchor.siblings('.mega-sub-menu').innerWidth(), 10);
+
+                if ( (target_width > 0) && (target_width < submenu_width) ) {
+                    anchor.siblings('.mega-sub-menu').css({
+                        'paddingLeft': (submenu_width - target_width) / 2 + 'px',
+                        'paddingRight': (submenu_width - target_width) / 2 + 'px'
+                    });
+                }
+            }
+
+
+            if ( megamenu.effect[plugin.settings.effect] ) {
+                var effect = megamenu.effect[plugin.settings.effect]['in'];
+                var speed = plugin.settings.effect_speed;
+
+                if (effect.css) {
+                    anchor.siblings('.mega-sub-menu').css(effect.css);
+                }
+
+                if (effect.animate) {
+                    anchor.siblings('.mega-sub-menu').animate(effect.animate, speed, 'swing', function() {
+                        $(this).css('visiblity', 'visible');
+                    });
+                }
+            }
+
+            anchor.parent().addClass('mega-toggle-on').triggerHandler("open_panel");
+        };
+
+
+        var openOnClick = function() {
+            // hide menu when clicked away from
+            $(document).on('click touchstart', function(event) {
+                if ( ( plugin.settings.document_click == 'collapse' || ! plugin.isDesktopView() ) && ! $(event.target).closest(".mega-menu li").length ) {
+                    plugin.hideAllPanels();
+                }
+            });
+
+            $('li.mega-menu-megamenu.mega-menu-item-has-children > a, li.mega-menu-flyout.mega-menu-item-has-children > a, li.mega-menu-flyout li.mega-menu-item-has-children > a', menu).on({
+                click: function(e) {
+
+                    // all clicks on parent items when sub menu is hidden on mobile
+                    if ( ! plugin.isDesktopView() && $(this).parent().hasClass('mega-hide-sub-menu-on-mobile') ) {
+                        return;
+                    }
+
+                    // check for second click
+                    if ( plugin.settings.second_click == 'go' || $(this).parent().hasClass("mega-click-click-go") ) {
+                        if ( ! $(this).parent().hasClass("mega-toggle-on") ) {
+                            e.preventDefault();
+                            plugin.showPanel($(this));
+                        }
+                    } else {
+                        e.preventDefault();
+
+                        if ( $(this).parent().hasClass("mega-toggle-on") ) {
+                            plugin.hidePanel($(this), false);
+                        } else {
+                            plugin.showPanel($(this));
+                        }
+                    }
+                }
+            });
+        };
+
+
+        var openOnHover = function() {
+
+            $('li.mega-menu-item-has-children', menu).not('li.mega-menu-megamenu li.mega-menu-item-has-children', menu).hoverIntent({
+                over: function () {
+                    plugin.showPanel($(this).children('a'));
+                },
+                out: function () {
+                    if ($(this).hasClass("mega-toggle-on")) {
+                        plugin.hidePanel($(this).children('a'), false);
+                    }
+                },
+                timeout: megamenu.timeout,
+                interval: megamenu.interval
+            });
+
+        };
+
+        plugin.check_width = function() {
+
+            if ( plugin.settings.reverse_mobile_items == 'true' ) {
+
+                if ( $(window).width() <= plugin.settings.breakpoint && $menu.data('view') == 'desktop' ) {
+                    $menu.data('view', 'mobile');
+                    $menu.append($menu.children('li.mega-item-align-right').get().reverse());
+                }
+
+                if ( $(window).width() >= plugin.settings.breakpoint && $menu.data('view') == 'mobile' ) {
+                    $menu.data('view', 'desktop');
+                    $menu.append($menu.children('li.mega-item-align-right').get().reverse());
+                }
+
+            }
+
+        }
+
+
+        plugin.keyboard_navigation = function() {
+            var tab_key = 9;
+            var escape_key = 27;
+
+            $('body').on('keyup', function(e) {
+                var keyCode = e.keyCode || e.which;
+
+                if (keyCode == escape_key) {
+                    $menu.removeClass('mega-keyboard-navigation');
+                    plugin.hideAllPanels();
+                }
+
+                if ( $menu.hasClass('mega-keyboard-navigation') && ! $(event.target).closest(".mega-menu li").length ) {
+                    $menu.removeClass('mega-keyboard-navigation');
+                    plugin.hideAllPanels();
+                }
+            });
+
+            $menu.parent().on('keyup', function(e) {
+                var keyCode = e.keyCode || e.which;
+                var active_link = $(e.target);
+
+                if (keyCode == tab_key) {
+                    $menu.addClass('mega-keyboard-navigation');
+
+                    if ( active_link.parent().hasClass('mega-menu-item-has-children') && ( ! active_link.parents('.mega-menu-megamenu').length || active_link.parent().parent().hasClass('mega-menu') ) ) {
+                        // menu item with sub menu
+                        plugin.showPanel($(e.target));
+                    } else if ( active_link.parent().parent().hasClass('mega-menu') ) {
+                        // top level item with no children
+                        plugin.hideAllPanels();
+                    }
+
+                    if ( active_link.hasClass('mega-menu-toggle') ) {
+                        active_link.toggleClass('mega-menu-open');
+                    }
+                }
+            });
+        }
+
+
+        plugin.init = function() {
+            plugin.settings = $.extend({}, defaults, options);
+
+            $menu.removeClass('mega-no-js');
+
+            $menu.siblings('.mega-menu-toggle').on('click', function(e) {
+                if ( $(e.target).is('.mega-menu-toggle-block, .mega-menu-toggle') ) {
+                    $(this).toggleClass('mega-menu-open');
+                }
+            });
+
+            $('li.mega-menu-item, ul.mega-sub-menu', menu).unbind();
+
+            if (isTouchDevice() || plugin.settings.event === 'click') {
+                openOnClick();
+            } else {
+                openOnHover();
+            }
+
+            if ( plugin.isDesktopView() ) {
+                $menu.data('view', 'desktop');
+            } else {
+                $menu.data('view', 'mobile');
+            }
+
+            plugin.check_width();
+
+            $(window).resize(function() {
+                plugin.check_width();
+            });
+
+            plugin.keyboard_navigation();
+
+        };
+
+        plugin.init();
+
+    };
+
+
+    $.fn.maxmegamenu = function(options) {
+        return this.each(function() {
+            if (undefined === $(this).data('maxmegamenu')) {
+                var plugin = new $.maxmegamenu(this, options);
+                $(this).data('maxmegamenu', plugin);
+            }
+        });
+    };
+
+
+    $(function() {
+        $(".mega-menu").maxmegamenu();
+    });
+
+
+})(jQuery);

mkdocs.yml

@@ -8,6 +8,7 @@ repo_name: Github
 site_author: "Armbian team"
 
 theme: readthedocs
+theme_dir: readthedocs_custom
 
 markdown_extensions:
   - smarty

readthedocs_custom/armbian-navbar.html

@@ -0,0 +1,12 @@
+<div 
+ style="position:fixed;max-width:800px"
+id="mega-menu-wrap-header-menu" class="mega-menu-wrap"><div class="mega-menu-toggle" tabindex="0"><div class='mega-toggle-block mega-menu-toggle-block mega-toggle-block-right mega-toggle-block-1' id='mega-toggle-block-1'></div></div><ul id="mega-menu-header-menu" class="mega-menu mega-menu-horizontal mega-no-js" data-event="hover" data-effect="fade" data-effect-speed="200" data-second-click="go" data-document-click="collapse" data-reverse-mobile-items="true" data-vertical-behaviour="standard" data-breakpoint="600"><li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-hide-arrow mega-hide-text mega-menu-item-3656' id='mega-menu-item-3656'><a class="dashicons-admin-home mega-menu-link" href="http://www.armbian.com/" tabindex="0"> Armbian home</a></li>
+<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-align-bottom-left mega-menu-flyout mega-hide-arrow mega-menu-item-3657' id='mega-menu-item-3657'><a class="mega-menu-link" href="http://www.armbian.com/download/" tabindex="0">Download</a></li>
+<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-current-menu-item mega-current_page_item mega-align-bottom-left mega-menu-flyout mega-hide-arrow mega-menu-item-4941' id='mega-menu-item-4941'><a class="mega-menu-link" href="http://docs.armbian.com/" tabindex="0">Documentation</a></li>
+<li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-5049' id='mega-menu-item-5049'><a class="mega-menu-link" href="https://github.com/igorpecovnik/lib" tabindex="0">Sources</a></li>
+<li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-3663' id='mega-menu-item-3663'><a class="mega-menu-link" href="http://forum.armbian.com" tabindex="0">Forum</a></li>
+<li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-align-bottom-right mega-menu-flyout mega-hide-arrow mega-item-align-right mega-menu-item-3667' id='mega-menu-item-3667'><a class="mega-menu-link" href="http://www.armbian.com/donate/" tabindex="0">Donate</a>
+<ul class="mega-sub-menu">
+<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-4223' id='mega-menu-item-4223'><a class="dashicons-smiley mega-menu-link" href="http://www.armbian.com/donors/">Thanks</a></li></ul>
+</li></ul></div>
+

readthedocs_custom/base.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {% if page_description %}<meta name="description" content="{{ page_description }}">{% endif %}
+  {% if site_author %}<meta name="author" content="{{ site_author }}">{% endif %}
+  {% block htmltitle %}
+  <title>{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}</title>
+  {% endblock %}
+
+  {% if favicon %}<link rel="shortcut icon" href="{{ favicon }}">
+  {% else %}<link rel="shortcut icon" href="{{ base_url }}/img/favicon.ico">{% endif %}
+
+  {# CSS #}
+  <link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
+
+  <link rel="stylesheet" href="{{ base_url }}/css/theme.css" type="text/css" />
+  <link rel="stylesheet" href="{{ base_url }}/css/theme_extra.css" type="text/css" />
+  <link rel="stylesheet" href="{{ base_url }}/css/highlight.css">
+  {%- for path in extra_css %}
+  <link href="{{ path }}" rel="stylesheet">
+  {%- endfor %}
+
+  {% if current_page %}
+  <script>
+    // Current page data
+    var mkdocs_page_name = "{{ page_title }}";
+    var mkdocs_page_input_path = "{{ current_page.input_path }}";
+    var mkdocs_page_url = "{{ current_page.abs_url }}";
+  </script>
+  {% endif %}
+  <script src="{{ base_url }}/js/jquery-2.1.1.min.js"></script>
+  <script src="{{ base_url }}/js/modernizr-2.8.3.min.js"></script>
+  <script type="text/javascript" src="{{ base_url }}/js/highlight.pack.js"></script>
+  <script src="{{ base_url }}/js/theme.js"></script>
+
+  {%- block extrahead %} {% endblock %}
+
+  {%- for path in extra_javascript %}
+  <script src="{{ path }}"></script>
+  {%- endfor %}
+
+  {% if google_analytics %}
+  <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', '{{ google_analytics[0] }}', '{{ google_analytics[1] }}');
+      ga('send', 'pageview');
+  </script>
+  {% endif %}
+</head>
+
+<body class="wy-body-for-nav" role="document">
+
+  <div class="wy-grid-for-nav">
+
+    {# SIDE NAV, TOGGLES ON MOBILE #}
+    <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
+      <div class="wy-side-nav-search">
+        <a href="{{ homepage_url }}" class="icon icon-home"> {{ site_name }}</a>
+        {% include "searchbox.html" %}
+      </div>
+
+      <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
+        <ul class="current">
+          {% for nav_item in nav %}
+            <li>{% include "toc.html" %}<li>
+          {% endfor %}
+        </ul>
+      </div>
+      &nbsp;
+    </nav>
+
+    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
+
+      {# MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
+      <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
+        <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
+        <a href="{{ homepage_url }}">{{ site_name }}</a>
+      </nav>
+
+      {# PAGE CONTENT #}
+      {% include "armbian-navbar.html" %}
+      <div class="wy-nav-content">
+        <div class="rst-content">
+          {% include "breadcrumbs.html" %}
+          <div role="main">
+            <div class="section">
+              {% block content %}
+                {{ content }}
+              {% endblock %}
+            </div>
+          </div>
+	  {%- block footer %}
+          {% include "footer.html" %}
+	  {% endblock %}
+        </div>
+      </div>
+
+    </section>
+
+  </div>
+
+{% include "versions.html" %}
+
+</body>
+</html>
+{% if current_page and current_page.is_homepage %}
+<!--
+MkDocs version : {{ mkdocs_version }}
+Build Date UTC : {{ build_date_utc }}
+-->
+{% endif %}