img fitter

by noromanba 2015-05-19 [2015/05/19 05:46:43]

fit image to window

@@ -7,14 +7,29 @@
  */
 
 // TODO observe window resize
-// sloppy
-[].slice.call(document.body.querySelectorAll('img, [style*="background-image"]')).forEach(function (node) {
-  node.style.maxHeight = Math.min(
-    window.innerHeight,
-    document.documentElement.clientHeight,
-    document.body.clientHeight
-  ) + 'px';
-  node.style.width = 'initial';
-  node.style.backgroundRepeat = 'no-repeat';
-});
+(function () {
+  var document = window.document,
+      slice = Array.prototype.slice;
+
+  var fit = function (ctx) {
+    if (!ctx.querySelectorAll) return;
+
+    slice.call(ctx.querySelectorAll('img, [style*="background-image"]')).forEach(function (node) {
+      node.style.maxHeight = Math.min(
+        window.innerHeight,
+        document.documentElement.clientHeight,
+        document.body.clientHeight
+      ) + 'px';
+      node.style.width = 'initial';
+      node.style.backgroundRepeat = 'no-repeat';
+    });
+  };
+  fit(document.body);
+
+  new MutationObserver(function (records) {
+    records.forEach(function (record) {
+      fit(record.target);
+    });
+  }).observe(document.body, { childList: true, subtree: true });
+}());
 

• /*
   * @title img fitter
   * @description fit image to window
   * @include http://*
   * @license MIT License http://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // TODO observe window resize
  (function () {
    var document = window.document,
        slice = Array.prototype.slice;
  
    var fit = function (ctx) {
      if (!ctx.querySelectorAll) return;
  
      slice.call(ctx.querySelectorAll('img, [style*="background-image"]')).forEach(function (node) {
        node.style.maxHeight = Math.min(
          window.innerHeight,
          document.documentElement.clientHeight,
          document.body.clientHeight
        ) + 'px';
        node.style.width = 'initial';
        node.style.backgroundRepeat = 'no-repeat';
      });
    };
    fit(document.body);
  
    new MutationObserver(function (records) {
      records.forEach(function (record) {
        fit(record.target);
      });
    }).observe(document.body, { childList: true, subtree: true });
  }());
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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