indicator reviver

by noromanba 2018-05-15 [2018/05/15 08:34:14]

revive "[saving...]" indicator on Hatena::Let

@@ -1,6 +1,6 @@
 /*
- * @title revive indicator
- * @description revive saving indicator on Hatena::Let
+ * @title indicator revived
+ * @description revive "[saving...]" indicator on Hatena::Let
  * @include *://let.hatelabo.jp/l
  * @license MIT License https://opensource.org/licenses/MIT
  * @javascript_url
@@ -11,5 +11,45 @@
 
 // c.f.
 // http://h.hatena.ne.jp/noromanba/227136362604995923
-(document.body.querySelector('img#auto_save_icon') || {}).src = 'https://d.hatena.ne.jp/images/indicator.gif'; void 0;
+(() => {
+    const indicator = document.body.querySelector([
+        'img[src]#auto_save_icon'
+    ]);
+    if (!indicator) return;
+
+    // TBD data URI
+    const throbber =  {
+        original:    'https://web.archive.org/web/20100511175314if_/http://r.hatena.ne.jp/images/indicator.gif',
+        circlesmall: 'https://s.hatena.ne.jp/images/load.gif',
+        // same as original
+        circlelarge: 'https://d.hatena.ne.jp/images/indicator.gif',
+        // thx id:a-kuma3
+        // http://h.hatena.ne.jp/a-kuma3/83461036272149214
+        squaredots:  'https://cdn-ak.b.st-hatena.com/images/loading.gif',
+    };
+
+    indicator.src = throbber.squaredots;
+
+    // TBD
+    // - CSSnize
+    // - align by flexbox
+    // original style fixes
+    indicator.style.verticalAlign = 'text-top';
+
+    const checkbox = document.body.querySelector([
+        'input[type="checkbox"]#autosave'
+    ]);
+    if (!checkbox) return;
+
+    // XXX see Rendering Engine
+    // TODO omit IIFE
+    checkbox.style.verticalAlign = (() => {
+        if (navigator.userAgent.includes('Chrome')) {
+            return 'middle';
+        }
+        if (navigator.userAgent.includes('Firefox')) {
+            return 'text-top';
+        }
+    })();
+})();
 

• /*
   * @title indicator revived
   * @description revive "[saving...]" indicator on Hatena::Let
   * @include *://let.hatelabo.jp/l
   * @license MIT License https://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // inspired
  // http://let.hatelabo.jp/pacochi/let/hJmc3OPAv48G
  
  // c.f.
  // http://h.hatena.ne.jp/noromanba/227136362604995923
  (() => {
      const indicator = document.body.querySelector([
          'img[src]#auto_save_icon'
      ]);
      if (!indicator) return;
  
      // TBD data URI
      const throbber =  {
          original:    'https://web.archive.org/web/20100511175314if_/http://r.hatena.ne.jp/images/indicator.gif',
          circlesmall: 'https://s.hatena.ne.jp/images/load.gif',
          // same as original
          circlelarge: 'https://d.hatena.ne.jp/images/indicator.gif',
          // thx id:a-kuma3
          // http://h.hatena.ne.jp/a-kuma3/83461036272149214
          squaredots:  'https://cdn-ak.b.st-hatena.com/images/loading.gif',
      };
  
      indicator.src = throbber.squaredots;
  
      // TBD
      // - CSSnize
      // - align by flexbox
      // original style fixes
      indicator.style.verticalAlign = 'text-top';
  
      const checkbox = document.body.querySelector([
          'input[type="checkbox"]#autosave'
      ]);
      if (!checkbox) return;
  
      // XXX see Rendering Engine
      // TODO omit IIFE
      checkbox.style.verticalAlign = (() => {
          if (navigator.userAgent.includes('Chrome')) {
              return 'middle';
          }
          if (navigator.userAgent.includes('Firefox')) {
              return 'text-top';
          }
      })();
  })();
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。