mcg: ajax reload

    @@ -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
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2014/10/09 23:42:24 - 2014-10-09
  2. 2014/09/13 16:36:36 - 2014-09-13
  3. 2014/09/13 16:32:48 - 2014-09-13