TOPへ戻るをpreloadにしてみるテスト。[XCL2.2系専用]

流行のJQueryで、スクロールしながらTOPに戻るプラグインを
実装してみたのだけど、これをpreloadでできないかな？と考え、
練習がてらやってみました。以下、備忘録。
 

 
既にXOOPS123さんのところで、「ページトップに戻るボタンを
付加するプリロード」という素晴らしいpreloadが公開されていますが、
ボタンのcssを変更する技術が足りずに思ったように変えられなかったので、
画像で変えられる「jQuery Scroll to Top Control v1.1」を採用。

が、preloadにするにあたっての問題点もTOPに戻る画像にあった様で…
XCLに設置する場合ソースの12行目あたりにある画像置いてるURLをhttpから
はじまる絶対パスに書き変える必要があるのですが、JavascriptではPHPの
$_SERVER[‘HTTP_HOST’]みたいに簡単に取得できないらしい。

で、色々調べてみたら、JavaScriptに引数を渡す記事を発見。
preload側で、PHPで画像の絶対パスを取得してサイズなんかを指定させて、
引数で渡す方法で試してみました。
 
 
【材料】
jQuery Scroll to Top Control v1.1
（scrolltopcontrol.js　及び　up.png）
 
 
【作り方】
全3ファイルを以下のような感じで配置する事になります。

html
├─[preload]─JQueryScrollTopControl.class.php
├─[common]──scrolltopcontrol.js
├─[images]─up.png
・
・

※赤文字は新規作成ファイル、青文字はjQuery Scroll to Top Control
　同梱のファイル（一部変更有）になります。
 
 
１．preload新規作成

作成ファイル：/html/preload/JQueryScrollTopControl.class.php

<?php

if (!defined('XOOPS_ROOT_PATH')) exit();

class JQueryScrollTopControl extends XCube_ActionFilter
{
	public function preBlockFilter()
	{
		$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
	}

	public function addScript(&$jQuery)
	{
		$ImgIcon = "up.png";	//画像ファイルの名前
		$ImgWidth = "50";	//画像ファイルの横幅（単位：px）
		$ImgHeight = "50";	//画像ファイルの高さ（単位：px）

		$ControlIcon = XOOPS_URL . "/images/" . $ImgIcon;
		$JQueryScrollTopControlScript = "/common/js/scrolltopcontrol.js?" . "url=" . $ControlIcon . "&width=" . $ImgWidth . "&height=" . $ImgHeight;

		$jQuery->addLibrary($JQueryScrollTopControlScript, true);
	}
//class END
}
?>

※画像ファイル名を変更する場合、$ImgIconにファイル名、
　$ImgWidthに画像の横幅、$ImgHeightに画像の高さを指定してください。
 
 
２．jQuery Scroll to Top Controlの変更

scrolltopcontrol.jsを開き、先頭に下記コードを追加。

var configs = new Object;
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
  var s = scripts[i];
  if (s.src && s.src.match(/scrolltopcontrol\.js(\?.*)?/)) {
    var params = s.src.replace(/.+\?/, '');
    break;
  }
}

params = params.split("&");
for(var i = 0; i < params.length; i++) {
  var tmp = params[i].split("=");
  configs[tmp[0]] = unescape(tmp[1]);
}

imgtag = '<img src="' + configs.url + '" style="width:' + configs.width + 'px; height:' + configs.height + 'px;" />';

更に、12行目あたりにある

controlHTML: '<img src="up.png" style="width:48px; height:48px" />',

…を、以下の通りに変更。

controlHTML: imgtag,

変更したscrolltopcontrol.jsを /html/common/js/ にアップロード。
 
 
３．TOPへ戻る画像
jQuery Scroll to Top Control同梱の画像（若しくは自分で作った画像）を、
/html/images/　へアップロード。

※前述の通り、画像ファイル名やサイズを変えた場合、
　JQueryScrollTopControl.class.phpの該当箇所を変更してください。
 
 
【後記】
moduleを作る前にpreloadからはじめるのも良いかもと最近購入した
書籍で見たので、練習がてらはじめてpreloadを作ってみました。
ソースにすっごい長い引数（画像ファイルの絶対パス）がくっついた
scriptタグが埋め込まれる事になるのだが…こんな方法で良いのだろうか；；

因みに、エントリタイトルに記した通り、XCL2.2系専用になります。
（試しに僕が管理しているXCL2.1系に入れていたら動きませんでした。）
XCL2.1はjQuery本体を読み込まず、preloadでjavascriptを読み込む
機能もないらしいです。ご教示くださった有識者の方に、この場を借りて
お礼申し上げます。
 
 

【参考サイト】
》XOOPS Cube wiki – Legacy JavaScript;ja
》jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。
》JavaScriptファイルに引数を渡す

 
 
【追記1】
「JQueryScrollTopControl.class.php」ですが、間違って修正前のソースを
貼り付けてしまいましたので、新しいのに修正しました。
また、本記事はpreload作成練習の記事ですので、個人1サイトでXCL使ってて
jQuery Scroll to Top Controlを導入したい場合は、素直に
scrolltopcontrol.js内の画像ファイルURLを固定で記述して
設置しまう方が楽だと思います。
 
 
【追記2】
この記事をQuiitaにも掲載し、preloadをGitHubにあげました。
両方とも、まだよく使い方解ってないんですけどね；
作るのメンドい方は、GitHubからドゾ。
 
pianoman-net / JQueryScrollTopControl
TOPへ戻るをpreloadにしてみるテスト。[XCL2.2系専用]