indicator reviver

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

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

@@ -9,26 +9,24 @@
 // inspired
 // http://let.hatelabo.jp/pacochi/let/hJmc3OPAv48G
 
+// TODO
+// user.js on Gist
+
 // c.f.
 // http://h.hatena.ne.jp/noromanba/227136362604995923
 (() => {
+    'use strict';
+
     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;
+    // thx id:a-kuma3
+    // http://h.hatena.ne.jp/a-kuma3/83461036272149214
+    indicator.src = 'https://cdn-ak.b.st-hatena.com/images/loading.gif';
+    // [1]
 
     // TBD
     // - CSSnize
@@ -41,15 +39,24 @@
     ]);
     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';
-        }
-    })();
+    checkbox.style.verticalAlign =
+        // XXX see the Rendering Engine
+        navigator.userAgent.includes('Chrome') ? 'middle' :
+        navigator.userAgent.includes('Firefox') ? 'text-top' :
+        '';
 })();
 
+
+// DEV
+//
+// [:1] throbber/spinner icons
+//
+// original
+// https://web.archive.org/web/20100511175314if_/http://r.hatena.ne.jp/images/indicator.gif
+// circle large; same as original
+// https://d.hatena.ne.jp/images/indicator.gif
+// circle small
+// https://s.hatena.ne.jp/images/load.gif
+// square dots
+// https://cdn-ak.b.st-hatena.com/images/loading.gif
+

• /*
   * @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
  
  // TODO
  // user.js on Gist
  
  // c.f.
  // http://h.hatena.ne.jp/noromanba/227136362604995923
  (() => {
      'use strict';
  
      const indicator = document.body.querySelector([
          'img[src]#auto_save_icon'
      ]);
      if (!indicator) return;
  
      // TBD data URI
      // thx id:a-kuma3
      // http://h.hatena.ne.jp/a-kuma3/83461036272149214
      indicator.src = 'https://cdn-ak.b.st-hatena.com/images/loading.gif';
      // [1]
  
      // 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;
  
      checkbox.style.verticalAlign =
          // XXX see the Rendering Engine
          navigator.userAgent.includes('Chrome') ? 'middle' :
          navigator.userAgent.includes('Firefox') ? 'text-top' :
          '';
  })();
  
  
  // DEV
  //
  // [:1] throbber/spinner icons
  //
  // original
  // https://web.archive.org/web/20100511175314if_/http://r.hatena.ne.jp/images/indicator.gif
  // circle large; same as original
  // https://d.hatena.ne.jp/images/indicator.gif
  // circle small
  // https://s.hatena.ne.jp/images/load.gif
  // square dots
  // https://cdn-ak.b.st-hatena.com/images/loading.gif
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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