素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

AutoPagerizeでロード中にthrobberを回転させるパッチ

throbberってのはページのロード中に表示される、くるくる回るアイコンのこと。

GM_xmlhttpRequestXMLHttpRequestを使う場合は回ってくれないので、自分で動かす必要がある。

Index: autopagerize.user.js

===================================================================

--- autopagerize.user.js	(revision 54)

+++ autopagerize.user.js	(working copy)

@@ -100,6 +100,7 @@

     window.addEventListener("scroll", this.scroll, false)
     this.initIcon()
     this.initHelp()
+    this.initThrobber();
     this.icon.addEventListener("mouseover",
         function(){self.viewHelp()}, true)
     var scrollHeight = getScrollHeight()
@@ -118,6 +119,15 @@

     catch(e) {}
 }
 
+AutoPager.prototype.initThrobber = function() {
+  var throbber = document.createElement('iframe');
+  throbber.setAttribute('id', 'autopagerize_throbber');
+  throbber.setAttribute('style', 'display:none;');
+  document.body.appendChild(throbber);
+  this.throbber = throbber.contentDocument;
+  this.throbberIframe = throbber;
+}
+
 AutoPager.prototype.initHelp = function() {
     var helpDiv = document.createElement('div')
     helpDiv.setAttribute('id', 'autopagerize_help')
@@ -235,9 +245,11 @@

 AutoPager.prototype.showLoading = function(sw) {
     if (sw) {
         this.icon.style.background = COLOR['loading']
+        this.throbber.open();
     }
     else {
         this.icon.style.background = COLOR['on']
+        this.throbber.close();
     }
 }
 
@@ -356,6 +368,7 @@

 
 AutoPager.prototype.terminate = function() {
     this.icon.style.background = COLOR['terminated']
+    this.throbberIframe.parentNode.removeChild(this.throbberIframe);
     window.removeEventListener('scroll', this.scroll, false)
     var self = this
     setTimeout(function() {
@@ -365,6 +378,7 @@

 
 AutoPager.prototype.error = function() {
     this.icon.style.background = COLOR['error']
+    this.throbberIframe.parentNode.removeChild(this.throbberIframe);
     window.removeEventListener('scroll', this.scroll, false)
 }