Hatena::Groupos0x

FFFF RSSフィード

0xFFのメモです。

2008 July 29th Tuesday

AutoPagerizeを任意の要素でのscrollに対応させてみる

| 20:55 | AutoPagerizeを任意の要素でのscrollに対応させてみる - FFFF を含むブックマーク はてなブックマーク - AutoPagerizeを任意の要素でのscrollに対応させてみる - FFFF

cuilのAutoPagerize SITEINFO書いたんだけど無限によみこまれる

http://twitter.com/fuba/statuses/871316222

に対応してみた。

内容は、SITEINFOにscrollElementってのを追加(もちろんオプション)して、scrollをwatchするElementを指定できるように変更し、それにあわせてremainの計算を変更した感じです(ElementのscrollはscrollTopで取れます)。

んで、今回は折角なのでgitデビューしてみた。

Page not found · GitHub

git config --global user.name/emailしておいて、forkしてgit cloneして修正したらgit commitしてpushするだけ。解説はやる夫で学ぶgitにお任せするお!

差分

@@ -47,7 +47,14 @@ var SITEINFO = [
         exampleUrl:   'http://www.google.com/search?q=nsIObserver',
     },
     */
-    /* template
+    {
+        url:          '^http://www\\.cuil\\.com/search',
+        nextLink:     'id("a_next")',
+        scrollElement:'id("bdy")',
+        pageElement:  'id("bdy")/div[contains(concat(" ",@class," ")," triple_wrap ")]',
+        exampleUrl:   'http://www.cuil.com/search?q=Firefox',
+    },
+	/* template
     {
         url:          '',
         nextLink:     '',
@@ -68,6 +75,7 @@ var AutoPager = function(info) {
     this.info = info
     this.state = AUTO_START ? 'enable' : 'disable'
     var self = this
+    this.documentRoot = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
     var url = this.getNextURL(info.nextLink, document)
 
     if ( !url ) {
@@ -91,6 +99,17 @@ var AutoPager = function(info) {
         return
     }
 
+    if (info.scrollElement) {
+        this.scrollElement = getFirstElementByXPath(info.scrollElement)
+        if (this.scrollElement && this.scrollElement.scrollHeight) {
+            this.documentRoot = this.scrollElement
+        } else {
+            this.scrollElement = window
+        }
+    } else {
+        this.scrollElement = window
+    }
+
     this.requestURL = url
     this.loadedURLs = {}
     this.loadedURLs[location.href] = true
@@ -98,12 +117,12 @@ var AutoPager = function(info) {
     this.toggle = toggle
     GM_registerMenuCommand('AutoPagerize - on/off', toggle)
     this.scroll= function() { self.onScroll() }
-    window.addEventListener("scroll", this.scroll, false)
+    this.scrollElement.addEventListener("scroll", this.scroll, false)
     this.initIcon()
     this.initHelp()
     this.icon.addEventListener("mouseover",
         function(){self.viewHelp()}, true)
-    var scrollHeight = getScrollHeight()
+    var scrollHeight = this.documentRoot.scrollHeight
     var bottom = getElementPosition(this.insertPoint).top ||
         this.getPageElementsBottom() ||
         (Math.round(scrollHeight * 0.8))
@@ -179,9 +198,7 @@ AutoPager.prototype.viewHelp = function() {
 }
 
 AutoPager.prototype.onScroll = function() {
-    var scrollHeight = Math.max(document.documentElement.scrollHeight,
-                                document.body.scrollHeight)
-    var remain = scrollHeight - window.innerHeight - window.scrollY
+    var remain = this.documentRoot.scrollHeight - window.innerHeight - this.documentRoot.scrollTop
     if (this.state == 'enable' && remain < this.remainHeight) {
           this.request()
     }
@@ -569,12 +586,12 @@ var launchAutoPager = function(list) {
             else if (!getFirstElementByXPath(list[i].nextLink)) {
                 // FIXME microformats case detection.
                 // limiting greater than 12 to filter microformats like SITEINFOs.
-                if (list[i].url.length > 12 ) {
+                if ('http:///'.match(list[i].url)) {
                     debug("nextLink not found.", list[i].nextLink)
                 }
             }
             else if (!getFirstElementByXPath(list[i].pageElement)) {
-                if (list[i].url.length > 12 ) {
+                if ('http:///'.match(list[i].url)) {
                     debug("pageElement not found.", list[i].pageElement)
                 }
             }
@@ -781,11 +798,6 @@ function getElementBottom(elem) {
     return top ? (top + height) : null
 }
 
-function getScrollHeight() {
-    return Math.max(document.documentElement.scrollHeight,
-                                document.body.scrollHeight)
-}
-
 function pathToURL(path) {
     var link = document.createElement('a')
     link.href = path

で、実はこれをもうちょっと改良すれば、pageElementの部分をスクロールさせることで、フッターが読めるようにできるかもとか考えてます。

実際のところ、スクロールバーが複数になると単純に操作し難くなるので実用的なんだか微妙なところなんですが。

javascripterjavascripter2008/07/30 01:03githubのurlが.user.jsで終わっているのでGreasemonkey有効の状態だとHTMLをインストールしようとしてしまいます。
urlの最後に?をつけた方がいいと思います。

os0xos0x2008/07/30 01:26おー、ありがとうございます。忘れてました。