作成と修正の簡単アクセス(2)

作成と修正の簡単アクセスの追加カスタマイズ

「作成と修正の簡単アクセス」として、利便性を追求してトップページの最下段に「最近に作成した記事」と「最近に修正した記事」を表示するようにしていたのですが、いろいろと動作を試してみると、スクロールした最後の行が上記の表示で見えなくなって困ることが発生しました。考えてみるとスクロール操作をし始めた瞬間、上記の表示はまったくのところ不要と言えますね。そこで、追加カスタマイズとして、スクロールをし始めたら、フェードアウトする（あるいはトップに戻るとフェードインする）ようにするのが賢いようです。（下図参照）

表示部分のフェードアウト、フェードイン

表示部分については、div で領域を定義して、それの表示の仕方を CSS で制御することにしましょう。よって、以下のファイルに領域定義をしておきます。

<div id="findlast_pain" style="display:block">  の部分に注目してください。

以前の修正を含めてこのようになりました。

/fp-interface/themes/leggero/widgets.tpl　（一部を表示しています）

 {widgets pos=left}
<div id="{$id}">
<h4>{$subject}</h4>
{$content}
</div>
{/widgets}

</div>

<!-- FlatPress.info -->
<div id="findlast_pain" style="display:block"> <!-- on/off -->


<div id="footerX">
<span id="footerC">
    <!-- DEBUG
    <input id="idAtai" style="text-align:center; font-size:14px;" value="0" type="text" size="4" />
    -->
CREATE:
{foreach from=$fxs item=newerlist}
    {$newerlist}&nbsp;&nbsp;
{/foreach}
<br>
</span>
<span id="footerM">
MODIFY:
{foreach from=$findlast_file item=lastlist}
    {$lastlist}&nbsp;&nbsp;
{/foreach}
</span>


</div>
</div>

DEBUG の部分をコメントアウトすると、スクロールの移動ポジションの値が表示されます。このカスタマイズによって、スクロールをし始めてると消ええて、上部へスクロールを戻すと現れたり消えたりするはずです。なお、CSS の部分でその時間を調整できますので、以下を参考にお好み時間にしてください。

/flatpress.world/fp-interface/themes/leggero/leggero/res/common.css

#findlast_pain {
    opacity: 0;
}

#findlast_pain {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
}

スクロール量の判別とそれによるCSS設定のスイッチ

スクロールの位置を知る手段は別途にJavascript を用意する必要があります。スクロール操作はサーバへは伝わらないので、それゆえにPHPのプログラムへは情報を伝えされないからです。そこで、以下のファイルを書きました。このファイルは PHP プログラムとしてインクルードさせました。

まずは、当該プログラムをこのように用意します。

/flatpress.world/APP/findlast/findlast-onoff.php

<html>
<head>
<body>
<script type="text/javascript" src="/../../fp-plugins/jquery/res/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var x;
$(window).scroll(function () {
$("#idAtai").val($(document).scrollTop());
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
if ( scrollY > 500) {
　　<!-- document.getElementById('findlast_pain').style.display = 'none'; -->
    document.getElementById('findlast_pain').style.opacity = '0';
} else {
    <!-- document.getElementById('findlast_pain').style.display = 'block'; -->
    document.getElementById('findlast_pain').style.opacity = '1';
}
});
</script>
</body> 
</html>

次に、インクルード部分を説明します。

/flatpress.world/APP/findlast/findlast.php

<?php


function findlast_file() {
include_once('../../defaults.php');


// FlatPress.info
include_once('findlast-onoff.php');


$dirname = str_replace("APP/findlast", "", $dirname);
$dir = $dirname . "fp-content/content/";
date_default_timezone_set('Asia/Tokyo');

デバッグ中の様子

ここでは説明のためにデバッグ画面を掲載しています。カスタマイズしたソース中にどこまでスクロールしたらオンオフするかの値がありますので、好みによって変更してもらえらばと思います。

FlatPress.info

Information & blog