mcg: ajax reload

by vzvu3k6k 2014-10-09 [2014/10/09 23:42:24]

http://mcg.herokuapp.com/の結果ページをajaxでリロード

@@ -12,6 +12,12 @@
   var target = document.querySelector('.twitter-share-button');
   target.insertAdjacentHTML('beforebegin', '<button type="button" class="btn btn-default btn-xs" id="_mcg_ajaxify_reload">リロード</button>');
 
+  var newTweetButton = (function(){
+    var div = document.createElement('div');
+    div.insertAdjacentHTML('afterbegin', '<a class="btn btn-default btn-xs pull-right" id="_mcg_ajaxify_tweet" style="font-weight: bold">Tweet</a>');
+    return div.firstChild;
+  })();
+
   var button = document.getElementById('_mcg_ajaxify_reload');
   button.addEventListener('click', function(event){
     var textContainer = document.querySelector('h1');
@@ -20,9 +26,23 @@
     var xhr = new XMLHttpRequest();
     xhr.open('GET', location.pathname + '/json');
     xhr.onload = function(){
-      textContainer.textContent = JSON.parse(xhr.responseText).result;
+      var result = JSON.parse(xhr.responseText).result;
+
+      textContainer.textContent = result;
       textContainer.style.opacity = 1;
+
+      document.title = result;
+
+      newTweetButton.href = 'https://twitter.com/intent/tweet?text=' +
+        encodeURIComponent(
+          result.replace(/[\u0000-\u001f]/g, '').replace(/\s+/g, ' ').trim()
+        ) +
+        '&url=' + encodeURIComponent(location.href);
+      var tweetButton = document.querySelector('iframe.twitter-share-button');
+      if (tweetButton) {
+        tweetButton.parentNode.replaceChild(newTweetButton, tweetButton);
+      }
     };
     xhr.send(null);
   });
-}
+}

• /*
   * @title mcg: ajax reload
   * @description http://mcg.herokuapp.com/の結果ページをajaxでリロード
   * @include http://mcg.herokuapp.com/*
   * @license CC0
   */
  
  // http://mcg.herokuapp.com/89d81b4ed5f81eb8aeaffcf66a6720d4/
  // http://mcg.herokuapp.com/89d81b4ed5f81eb8aeaffcf66a6720d4/54ab700e1c40451f75f11644ca054aa2/
  // 1つのソースによる結果ページと、2つのソースによる結果ページがある。いずれも末尾の / は必須。
  if (/^\/\w+\//.test(location.pathname)){
    var target = document.querySelector('.twitter-share-button');
    target.insertAdjacentHTML('beforebegin', '<button type="button" class="btn btn-default btn-xs" id="_mcg_ajaxify_reload">リロード</button>');
  
    var newTweetButton = (function(){
      var div = document.createElement('div');
      div.insertAdjacentHTML('afterbegin', '<a class="btn btn-default btn-xs pull-right" id="_mcg_ajaxify_tweet" style="font-weight: bold">Tweet</a>');
      return div.firstChild;
    })();
  
    var button = document.getElementById('_mcg_ajaxify_reload');
    button.addEventListener('click', function(event){
      var textContainer = document.querySelector('h1');
      textContainer.style.opacity = 0.5;
  
      var xhr = new XMLHttpRequest();
      xhr.open('GET', location.pathname + '/json');
      xhr.onload = function(){
        var result = JSON.parse(xhr.responseText).result;
  
        textContainer.textContent = result;
        textContainer.style.opacity = 1;
  
        document.title = result;
  
        newTweetButton.href = 'https://twitter.com/intent/tweet?text=' +
          encodeURIComponent(
            result.replace(/[\u0000-\u001f]/g, '').replace(/\s+/g, ' ').trim()
          ) +
          '&url=' + encodeURIComponent(location.href);
        var tweetButton = document.querySelector('iframe.twitter-share-button');
        if (tweetButton) {
          tweetButton.parentNode.replaceChild(newTweetButton, tweetButton);
        }
      };
      xhr.send(null);
    });
  }

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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