rcmdnk's blog

20150213_random

サイドバーにランダム記事リストを作る の所にシャッフルボタン追加。

Sponsored Links

random.html

source/_includes/custom/asides/random.htmlを以下のように変更します。

source/_includes/custom/asides/random.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<section>
  <h1 id="random-link">Random Posts</h1>
  <span id="random-shuffle" class="link_btn">Shuffle!</span>
{% if site.random_local  %}
  <ul class="posts">
    {% for post in page.random_posts %}
    {% include post_list.html%}
    {% endfor %}
  </ul>
{% else %}
  <div id="random-posts"><div>
     <ul>
     </ul>
  </div>
  <script type="text/javascript">
    var getEntryList = function () {
      console.log('getEntryList');
      if(!('entry_list' in window)){
        console.log('no entry_list!');
        $.ajax({
          url:'/posts.html',
          type:'GET',
          dataType:'html'
        }).done(function(data){
          entry_list = $(data).find('li');
          randomList();
        });
      }
    };
    getEntryList();
    var randomList = function () {
      console.log('randomList');
      if(!('entry_list' in window)){
        console.log('still no entry_list!');
        return;
      }
      var nentries = entry_list.length;
      var rand = [];
      var f = document.createDocumentFragment();
      while(rand.length < {% if site.random_posts %}{{site.random_posts}}{% else %}10{% endif %} && rand.length < nentries){
        var r = Math.floor(Math.random()*nentries);
        if(rand.indexOf(r)!=-1)continue;
        f.appendChild(entry_list[r]);
        rand.push(r);
      }
      $('#random-posts ul li').remove();
      $('#random-posts ul').append(f);
      var random_url=$(entry_list[Math.floor(Math.random()*nentries)]).find('.click_box_link')[0].href;
      $('#random-link').wrap($('<a href="Random Fly!"/>'));
      $('#random-link').click(function(){
        window.location=random_url;
        return false;
      });
    };
    $(function($){
      $('#random-shuffle').click(function(){
        randomList();
      });
    });
  </script>
{% endif %}
</section>

Shuffle!というボタンを シェアボタンを非同期読み込みでまとめて設定 で作ったSCSSで書いてるlink_btnクラスを使っておいてあります。 このクラスはちょっと変更してこんな感じになっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.link_btn {
  background-color: $nav-bg;
  padding: 1px 5px 0px;
  position: relative;
  text-decoration: none;
  border: solid 2px darken($nav-bg, 15);
  border-radius: 10px;
  &:active {
    padding: 0px 5px 1px;
    top: 1px;
  }
  &:hover {
    cursor: pointer;
  }
}

このボタンを押す毎にリストが更新されます。

random

Sponsored Links
Sponsored Links

« Google ChromeではまだJavaScriptでstr.startsWith()が使えない Octopress(Jekyll)の設定変数をJavaScriptから使う »