To be Layered Category List for Hatena Blog

breadcrumb.v1.1.js

/*
 * @see https://hatena.wackwack.net/v1.1/js/breadcrumb.js
 */

var host = $(location).attr('host');
function remapBreadcrumb(breadcrumb){
  new_breadcrumb_html='';
  for(var i=0;i<breadcrumb.length;i++) {
    url_category=[];
    for(var j=0;j<=i;j++) {
      url_category[j]=breadcrumb[j];
    }
    var category_url = 'https://'+host+'/archive/category/'+url_category.join('-');
    new_breadcrumb_html += '<span class="breadcrumb-child""><a class="breadcrumb-child-link" href="'+category_url+'"><span>'+breadcrumb[i]+'</span></a></span>';
    if(i+1<breadcrumb.length) {
      new_breadcrumb_html += '<span class="breadcrumb-gt"> &gt;</span>';
    }
  }
  if(new_breadcrumb_html != '') {
    $('#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first').prop('outerHTML',new_breadcrumb_html);
  }
}

function remapArticleCategory(categories) {
  var index=0;
  while(typeof categories[index+1] != 'undefined' && categories[index+1].text.includes('-')) {
    index+=1;
  }

  breadcrumb_array = categories[index].text.split('-');
  remapBreadcrumb(breadcrumb_array)

  category_num = categories.length;
  for(var i=0;i<category_num;i++) {
    category_branch = categories[i].text.split('-');
    categories[i].text=category_branch[category_branch.length-1];
  }
}

function remapCategoryBreadcrumb(breadcrumb) {
  new_breadcrumb_html='';
  for(var i=0;i<breadcrumb.length;i++) {
    if(i+1<breadcrumb.length) {
      url_category=[];
      for(var j=0;j<=i;j++) {
        url_category[j]=breadcrumb[j];
      }
      var category_url = 'https://'+host+'/archive/category/'+url_category.join('-');
      new_breadcrumb_html += '<span class="breadcrumb-child"><a class="breadcrumb-child-link" href="'+category_url+'">'+breadcrumb[i]+'</span></a></span>';
      new_breadcrumb_html += '<span class="breadcrumb-gt"> &gt;</span>';
      
    } else {
      new_breadcrumb_html += '<span class="breadcrumb-child">'+breadcrumb[i]+'</span>';
    }
  }
  if(new_breadcrumb_html != '') {
    $('#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first').prop('outerHTML',new_breadcrumb_html);
  }
}

function remapArchiveCategory(categories) {
  for(var i=0;i<categories.length;i++) {
    category_branch = categories[i].text.split('-');
    categories[i].text=category_branch[category_branch.length-1];
  }
}
$(document).ready(function(){
  var $entry_categories = $('#main-inner > article.entry > div.entry-inner > header > div.entry-categories > a');
  if($entry_categories.length>0) {
    remapArticleCategory($entry_categories);
  }
  var $archive_entries = $('#main-inner > div.archive-entries');
  if($archive_entries.length > 0) {
    $breadcrumb_child = $('#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first');
    breadcrumbs = $breadcrumb_child.find('span').text().split('-');
    remapCategoryBreadcrumb(breadcrumbs);

    $archive_entries.each(function(){
      remapArchiveCategory($(this).find('section > div.categories > a'));
    });
  }
});

category_archive.v1.1.js

/*
 * @see https://hatena.wackwack.net/v1.1/js/category_archive.js
 */

var $hatena_module_category = $('div.hatena-module-category');
var parent_level = 1;
/*
 * idx:処理対象カテゴリのインデックス
 * plevel:親カテゴリの階層
 * $ul:登録先のulタグ
 */
$all_li = $hatena_module_category.find('li');
function processArchive(idx,plevel,$ul) {
  flag=true;
  while(idx < $all_li.length) {
    $li = $($all_li[idx]);
    $a = $li.find('a'); 
    category_name = $a.text();
    // idxの階層を取得 
    breadcrumb = category_name.split('-');
    level = breadcrumb.length;

    // 1階層目のカテゴリであれば下線を設定
    if(level == 1 && idx > 0) {
      $li.attr('class','on-border');
    }

    // idxの階層 < 親階層であればループを抜ける
    if(level < plevel) {
      if(plevel > 2) {
        $($all_li[idx-1]).css('padding-bottom','0px');
      }
      return idx-1;
    }
    // idxの階層 = 親の階層であればidxを$ulに登録
    else if(level == plevel) {
      $a.text(breadcrumb[level-1]);
      if($ul != null) {
        // 2階層目以下であればulの中に要素を入れ込む
        $li.appendTo($ul);
      } else {
        $opend_span = $('<span class="hatena-breadcrumb-plus-toggle-button" id="opend-'+idx+'">▼</span>');
        $closed_span = $('<span class="hatena-breadcrumb-plus-toggle-button" id="closed-'+idx+'">▶</span>');
        $closed_span.css('visibility','hidden');
        $opend_span.css('display','none');
        $li.prepend($closed_span);
        $li.prepend($opend_span);
      }
    }
    // idxの階層 > 親階層であれば$ulを新規に作成
    // 親カテゴリに$ulを挿入し、idx,idxの階層,$ulを引数に再帰処理呼び出し
    else {
      id = idx-1;
      ulid = "hatena-breadcrumb-plus-toggle-"+id;
      $new_ul = $('<ul id="'+ulid+'" type="square"></ul>');
      if(level > 2) {
        $new_ul.attr('class','hatena-breadcrumb-plus-child2'); 
      } else {
        $new_ul.attr('class','hatena-breadcrumb-plus-child1'); 
        $new_ul.css('display','none');
      }

      $($all_li[id]).append($new_ul);
      // 子カテゴリがある場合
      // ・カテゴリのpadding-bottomは0pxに設定
      // ・閉じるボタンを表示する
      $('#closed-'+(id)).css({'visibility':'visible','display':'inline'});
      $('#opend-'+(id)).on('click',{_id:id,_toggle:'close'},toggleCategory);
      $('#closed-'+(id)).on('click',{_id:id,_toggle:'open'},toggleCategory);

      idx = processArchive(idx,level,$new_ul);
    }
    idx += 1;
  }

  return idx;
}

function toggleCategory(e) {
  if(e.data._toggle == 'close') {
    $('#hatena-breadcrumb-plus-toggle-'+e.data._id).toggle();
    $('#closed-'+e.data._id).toggle();
    $('#opend-'+e.data._id).toggle();
  } else if(e.data._toggle == 'open') {
    $('#hatena-breadcrumb-plus-toggle-'+e.data._id).toggle();
    $('#opend-'+e.data._id).toggle();
    $('#closed-'+e.data._id).toggle();
  }
}

$(document).ready(function(){
  if(typeof $hatena_module_category != "undefined") {
    processArchive(0,1,null);
  }
});