image post fitness

by yuta25 2016-03-09 [2016/03/09 10:05:04]

画像のpostをdsbdとwindowに合わせる(for user script & please use with http://userstyles.org/styles/102353/dashboard-1-column)

@@ -8,69 +8,57 @@
 // http://itakura26.hateblo.jp/entry/2014/06/04/%E8%A1%A8%E7%A4%BA%E9%A0%98%E5%9F%9F%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A6%E7%94%BB%E5%83%8F%E3%81%AE%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E3%81%99%E3%82%8B
 
 (function () {
-  var main = function() {
-    var callback = function() {
-      var w = $(window);
-      var d = $(document);
-      var spreadImage = function(img) {
-        if (!img.width) {
-          img = img.data;
-        }
-        // iW = img.width();
-        iW = img[0].naturalWidth;
-        if (iW === 0) {
-          img.load(img,spreadImage);
-          return;
-        }
-        // iH = img.height();
-        iH = img[0].naturalHeight;
-        var vW = img.parent().parent().width();
-        var vH = w.height() - 120;
-        var vR = vW / vH;
-        var iW, iH, iR;
-        var rate;
-        var adjust = {};
-        iR = iW / iH;
-        rate = vR > iR ? vH / iH : vW / iW;
-        adjust.width = Math.round(iW * rate);
-        adjust.height = Math.round(iH * rate);
-        img.css(adjust);
-      };
+  var w = window
+  var d = document
+  var spreadImage = function(img) {
+    if (!img.width) {
+      img = img.data;
+    }
+    if (!img.complete) {
+      img.onload = spreadImage(img);
+      return;
+    }
+    var iW = img.naturalWidth;
+    if (iW === 0) {
+      img.load(img,spreadImage);
+      return;
+    }
+    var iH = img.naturalHeight;
+    var vW = img.parentNode.parentNode.clientWidth;
+    var vH = w.innerHeight - 120;
+    var vR = vW / vH;
+    var rate;
+    var adjust = {};
+    iR = iW / iH;
+    rate = vR > iR ? vH / iH : vW / iW;
+    adjust.width = Math.round(iW * rate);
+    adjust.height = Math.round(iH * rate);
+    img.style.width = adjust.width + 'px'
+    img.style.height = adjust.height + 'px'
+  };
 
-      var spreadImagesIntoDashboard = function(dom) {
-        var imgs = dom.find('img.post_media_photo');
-        imgs.each(function() {
-          spreadImage($(this));
-        });
-      };
+  var spreadImagesIntoDashboard = function(dom) {
+    var imgs = dom.querySelectorAll('img.post_media_photo');
+    Array.prototype.forEach.call(imgs, function(img) {
+      spreadImage(img)
+    });
+  };
 
-      spreadImagesIntoDashboard(d);
+  spreadImagesIntoDashboard(d);
 
+  window.myTimer = 0;
+  d.addEventListener('DOMNodeInserted', function() {
+    if(window.timer) return;
+    window.myTimer = setTimeout(function() {
+      spreadImagesIntoDashboard(document);
       window.myTimer = 0;
-      d.bind('DOMNodeInserted', function() {
-        if(window.timer) return;
-        window.myTimer = setTimeout(function() {
-          spreadImagesIntoDashboard($(document));
-          window.myTimer = 0;
-        }, 200);
-      });
-      w.bind('resize', function() {
-        if(window.myTimer) return;
-        window.myTimer = setTimeout(function() {
-          spreadImagesIntoDashboard($(document));
-          window.myTimer = 0;
-        }, 200);
-      });
-    };
-
-    var script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
-    script.onload = callback;
-    document.head.appendChild(script);
-  };
-
-  var script = document.createElement('script');
-  script.textContent = '(' + main.toString() + '());';
-  document.body.appendChild(script);
-}());
+    }, 200);
+  });
+  w.addEventListener('resize', function() {
+    if(window.myTimer) return;
+    window.myTimer = setTimeout(function() {
+      spreadImagesIntoDashboard(document);
+      window.myTimer = 0;
+    }, 200);
+  });
+}())

• /*
   * @title image post fitness
   * @description 画像のpostをdsbdとwindowに合わせる(for user script & please use with http://userstyles.org/styles/102353/dashboard-1-column)
   * @include https://www.tumblr.com/dashboard*
   * @license reblog commons license ( cc by 3.0 )
   */
  
  // http://itakura26.hateblo.jp/entry/2014/06/04/%E8%A1%A8%E7%A4%BA%E9%A0%98%E5%9F%9F%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A6%E7%94%BB%E5%83%8F%E3%81%AE%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E3%81%99%E3%82%8B
  
  (function () {
    var w = window
    var d = document
    var spreadImage = function(img) {
      if (!img.width) {
        img = img.data;
      }
      if (!img.complete) {
        img.onload = spreadImage(img);
        return;
      }
      var iW = img.naturalWidth;
      if (iW === 0) {
        img.load(img,spreadImage);
        return;
      }
      var iH = img.naturalHeight;
      var vW = img.parentNode.parentNode.clientWidth;
      var vH = w.innerHeight - 120;
      var vR = vW / vH;
      var rate;
      var adjust = {};
      iR = iW / iH;
      rate = vR > iR ? vH / iH : vW / iW;
      adjust.width = Math.round(iW * rate);
      adjust.height = Math.round(iH * rate);
      img.style.width = adjust.width + 'px'
      img.style.height = adjust.height + 'px'
    };
  
    var spreadImagesIntoDashboard = function(dom) {
      var imgs = dom.querySelectorAll('img.post_media_photo');
      Array.prototype.forEach.call(imgs, function(img) {
        spreadImage(img)
      });
    };
  
    spreadImagesIntoDashboard(d);
  
    window.myTimer = 0;
    d.addEventListener('DOMNodeInserted', function() {
      if(window.timer) return;
      window.myTimer = setTimeout(function() {
        spreadImagesIntoDashboard(document);
        window.myTimer = 0;
      }, 200);
    });
    w.addEventListener('resize', function() {
      if(window.myTimer) return;
      window.myTimer = setTimeout(function() {
        spreadImagesIntoDashboard(document);
        window.myTimer = 0;
      }, 200);
    });
  }())
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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