From c39e94e4e3d3362eb96c20fbbda2a80553e359a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= <deutschlaender@cosmocode.de>
Date: Wed, 4 Jan 2017 17:37:57 +0100
Subject: [PATCH] main nav effects
---
css/area_main-sidebar.less | 82 ++++++++++++++++++++++++++++++++++++++
js/sidebar-menu.js | 58 +++++++++++++++++++++++++++
main.php | 2 +-
script.js | 1 +
4 files changed, 142 insertions(+), 1 deletion(-)
create mode 100644 js/sidebar-menu.js
diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less
index b6f7353..675e595 100644
--- a/css/area_main-sidebar.less
+++ b/css/area_main-sidebar.less
@@ -80,7 +80,89 @@
background-color: @color-border;
transition: @transition background-color;
}
+
+ &.opened, &.closed{
+ padding: 0;
+ &::before, &::after{
+ display: none;
+ }
+ a{
+ display: block;
+ position: relative;
+ padding: .5rem 0 .8rem (@icon-size + 1);
+ margin-bottom: -.3rem;
+ border: 1px solid transparent;
+ &::before {
+ //background-color: @color-link;
+ color: @color-nav;
+ content: counter(nav-counter);
+ position: absolute;
+ top: -.1rem;
+ left: 0;
+ display: flex;
+ display: -webkit-flex;
+ flex-direction: column;
+ -webkit-flex-direction: column;
+ justify-content: center;
+ -webkit-justify-content: center;
+ height: 100%;
+ width: @icon-size;
+ overflow: hidden;
+ text-align: center;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 15%;
+ bottom: 15%;
+ width: 1px;
+ left: (@icon-size + .5);
+ background-color: @color-border;
+ transition: @transition background-color;
+ }
+ &:hover, &:focus, &:active{
+ text-decoration: none;
+ background-color: #fff;
+ border-color: @color-link;
+ color: @color-link;
+ }
+ }
+
+ }
+
+ &.opened{
+ a{
+ background-color: @color-link;
+ color: #fff;
+ &::after, &::before{
+ color: #fff;
+ border-color: #fff;
+ }
+ &:hover, &:focus, &:active{
+ text-decoration: none;
+ background-color: #fff;
+ border-color: @color-link;
+ color: @color-link;
+ &::after, &::before{
+ color: inherit;
+ border-color: inherit;
+ }
+ }
+ }
+ }
+ + ul{
+ height: auto;
+ overflow: hidden;
+ }
+ &.closed + ul{
+ height: 0;
+ }
}
+
+
}
}
}
diff --git a/js/sidebar-menu.js b/js/sidebar-menu.js
new file mode 100644
index 0000000..29e3ee5
--- /dev/null
+++ b/js/sidebar-menu.js
@@ -0,0 +1,58 @@
+( function( $, spc ) {
+
+ var mainMenu = function(){
+ var $menu = $('.nav-main').find('> ul');
+ try{
+ if($menu.length > 0){
+ var $toggler = $menu.find('> li.level1 > .li'),
+ $submenu = $menu.find('> li.level1 > ul');
+ if($toggler.length > 0 && $submenu.length > 0){
+ $toggler.addClass('closed');
+ $toggler.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
+ $toggler.each(function( index ) {
+ $(this).on( "click", function(e) {
+ e.preventDefault();
+ var $this = $(this);
+ $this.toggleClass('closed');
+ $this.toggleClass('opened');
+ if($this.hasClass('opened')){
+ var $foc = $this.closest('li.level1').find('li.level2:first-child').find('a:first-child');
+ if($foc.length > 0){
+ $foc.focus();
+ }
+ }
+ });
+ });
+ }
+
+
+ }
+ /*var $link = $this.find('#plugin__qc__link'),
+ $container = $this.find('#plugin__qc__wrapper');
+ if($container.length < 1){
+ $this.remove();
+ }else{
+ $container.attr('aria-hidden','true');
+ var $icon = $container.find('#plugin__qc__icon');
+ $container.find('#plugin__qc__out').removeAttr('style');
+ $link.on( 'click', function(e){
+ e.preventDefault();
+ $icon.trigger('click');
+ var oldState = ($link.attr('aria-expanded')=== "true" );
+ $container.attr('aria-hidden',oldState);
+ $(this).attr('aria-expanded',!oldState);
+
+ });
+ }*/
+
+ }catch(err){
+
+ }
+ };
+
+ $(function(){
+ mainMenu();
+ });
+
+} )( jQuery, spc );
+
diff --git a/main.php b/main.php
index 5daf5a3..cf07678 100755
--- a/main.php
+++ b/main.php
@@ -14,7 +14,7 @@ if (!defined('DOKU_INC')) die(); /* must be run from with
header('X-UA-Compatible: IE=edge,chrome=1');
$showTools = !tpl_getConf('hideTools') || ( tpl_getConf('hideTools') && !empty($_SERVER['REMOTE_USER']) );
-$showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
+$showSidebar = /*page_findnearest($conf['sidebar']) &&*/ ($ACT=='show');
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
diff --git a/script.js b/script.js
index e3128ab..25ecf2d 100755
--- a/script.js
+++ b/script.js
@@ -3,3 +3,4 @@
/* DOKUWIKI:include js/base/spc.js */
/* DOKUWIKI:include js/plugins/do_tasks.js */
+/* DOKUWIKI:include js/sidebar-menu.js */