プロジェクト

全般

プロフィール

アイデア #20

未完了

Lycheeガントチャート+サイドバーを畳むView Customize Pluginの共存

竹内 さんが3年以上前に追加. 約1年前に更新.

ステータス:
いいね・コメント募集中
優先度:
---
Lycheeプラグイン:
ガントチャート

説明

View Customizeによりサイドバーを畳むプラグインが
https://github.com/onozaty/redmine-view-customize-scripts/blob/master/toggle_sidebar.js
で紹介されていますが、このままだとLychee ガントチャートと共存できません。これはLycheeガントチャートのCSSが最上位に表示させるように設定してある要素をいくつか持っているためです。
この為、View CustomizeのスクリプトのCSSにも最上位に表示させるCSSを追加しました。
更にView CustomizeのCSSでダメ押ししています。

① JS記述

// サイドバーを開閉式にします
//
// Path pattern: .*
// Type: JavaScript
$(function() {

$('#content')
.css({
'width': 'auto',
'padding-right': '20px'
});

var sidebar = $('#sidebar');
var sidebarBaseHeight = sidebar.height();
var sidebarBaseWidth = sidebar.width();
var sidebarBaseOffsetTop = sidebar.offset().top;
var toggleFlag = true;
sidebar
.css({
'background-color': '#EEEEEE',
'border': '1px solid #DDDDDD',
'padding': '5px',
'position': 'absolute',
'right': '0',
'width': '12px',
'height': '12px',
'overflow': 'hidden',
'z-index':'11'
})
.prepend(
$(' ↓ ')
.css({
'position': 'absolute',
'font-weight': 'bold',
'font-size': '12px',
'text-decoration': 'none',
'top': '2px',
'right': '0',
'border-bottom': '2px solid'
})
.click(function(event) {
if (toggleFlag) {
sidebar.stop().animate({
'padding': '5px 5px 15px 15px',
'width': sidebarBaseWidth,
'height': sidebarBaseHeight 
}, 0);
$(this)
.css({
'border-top': '2px solid',
'border-bottom': ''
})
.html(' ↑ ');
} else {
sidebar.stop().animate({
'padding': '5px',
'width': '12px',
'height': '12px'
}, 0);
$(this)
.css({
'border-top': '',
'border-bottom': '2px solid'
})
.html(' ↓ ');
}
toggleFlag = !toggleFlag;
event.preventDefault();
})
);
var lastWindowScrollTop = $(window).scrollTop();
var onScroll = function() {
var windowScrollTop = $(window).scrollTop();
var isUp = lastWindowScrollTop > windowScrollTop;
lastWindowScrollTop = windowScrollTop;
if (windowScrollTop > sidebarBaseOffsetTop) {
var windowHeight = $(window).height();
var sidebarMerginTop = parseInt(sidebar.css('margin-top').replace(/px$/,'') || '0');
var sidebarOuterHeight = sidebar.outerHeight();
var adjustMerginTop = windowScrollTop - sidebarBaseOffsetTop;
if (sidebarOuterHeight < windowHeight) {
// サイドバーがウインドウサイズより小さい場合
// 先頭位置にあわせて調整
sidebar.css('margin-top', adjustMerginTop + 'px');
return;
}
if (isUp) {
// 上にスクロールした場合、サイドバーの先頭位置にあわせて調整
if (adjustMerginTop < sidebarMerginTop) {
sidebar.css('margin-top', adjustMerginTop + 'px');
}
} else {
// 下にスクロールした場合、サイドバーの末尾位置にあわせて調整
var windowBottomPosition = windowHeight + windowScrollTop;
var sidebarBottomPosition = $('#sidebar').offset().top + sidebarOuterHeight;
if (windowBottomPosition > sidebarBottomPosition) {
sidebar.css('margin-top', (windowBottomPosition - sidebarBaseOffsetTop - sidebarOuterHeight) + 'px');
}
}
} else {
sidebar.css('margin-top', '');
}
}
$(window).scroll(onScroll);
onScroll();
});

② CSS記述
div#sidebar {
z-index: 11 !important;
}

CSSが最後に上書きされますが、そこで#slidebarを!importantで記述することにより、サイドバーを上位レイヤーに表示させることが出来ました。

これで期間が長くて横長なガントチャートも全体を表示させることが出来るようになりました。

竹内 さんが3年以上前に更新

他の形式にエクスポート: Atom PDF