LinkBackLinkを流用して作るだけ作ってみました。
共有トピックからTagLinkListをインポート *1*2
トピック間を移動するたびに、カレントトピック（とノート）と同じタグを持つトピックへのリンク一覧を作成します。
以下ソース。
function createTagLinkList() { // クリア $('.tll').remove(); // スタイルの埋め込み var style = ''; style += '.tll{border: solid 1px;margin:5px -10px 5px 0px;border-radius:5px;border-color:#dec;}'; style += '.tll-div{font-size: 13px;white-space: pre-wrap;height: 20px;overflow: hidden;line-height: 20px;color: #777;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;margin:3px 5px;word-break: break-all;}'; style += '.tll-a{margin: 0px 2px;padding:0px 2px;text-decoration:none!important;background-color: #efd;}'; style += '.tll-title{background-color: #dfc;padding: 4px;color: #777;font-size: 14px;}'; $('head').append('<style class="tll">' + style + '</style>'); // ユーティリティ関数 function removeHtmlTags(str) { return str ? str.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'') : ''; }; function isContaining(str1, str2) { var ret = false; if(str1 && str2) { str1 = _.unescape(str1).toLowerCase(); str2 = _.unescape(str2).toLowerCase(); ret = (str1.indexOf(str2) > -1); } return ret; } // 表示中のプロジェクトの取得 var $curPrj = $('.selected'); var curPrj = project_tree.getProjectReferenceFromDomProject($curPrj); var curId = curPrj.getProjectId().slice(-12); var curName = removeHtmlTags(curPrj.getName()); var curNote = removeHtmlTags(curPrj.getNote()); var curTagHash = {}; // カレントトピックのタグを抽出 function pushTagsToTagArr(st_pos, tag) { curTagHash[tag] = []; }; tagging.forEachTagInString(curName,pushTagsToTagArr, false) tagging.forEachTagInString(curNote,pushTagsToTagArr, false) // 走査関数 function lookChildren(prjChildren) { _.each(prjChildren,function(prj){ var id = prj.id.slice(-12); var children = prj.ch; var name = removeHtmlTags(prj.nm); var note = removeHtmlTags(prj.no); if(id != curId) { // 共有トピック if(prj.added_subtree) { children = prj.added_subtree.rootProjectChildren } // 表示用 var cont = ''; if(note) { cont += '：' + note; } if(children) { _.each(children, function(child){ cont += ' └ ' + child.nm; }); } cont = removeHtmlTags(cont).replace(/\s{1,}/g, ' '); _.each(curTagHash, function(arr, tag){ if(isContaining(name, tag) || isContaining(note, tag)) { arr.push({id:id, name:name, cont:cont}); } }) } // 子要素の走査 if(children) { lookChildren(children); } }); } // 全トピックの走査 var root_prj_children = MAIN_PROJECT_TREE_INFO.rootProjectChildren; lookChildren(root_prj_children); // HTML作成関数 function createLblHtml(arr, tag) { if(arr.length == 0) return ''; var html=''; var tpl = _.template('<div class="tll-div" contenteditable="false"><a class="tll-a" href="javascript:void(0)" ontouchstart="location.hash=\'/<%= id %>\';return false;"><%= name %></a><%= cont %></div>'); _.each(arr, function(elm){ html += tpl(elm) }) if(html){ html = '<div class="tll"><div class="tll-title">' + tag + '</div>' + html + '</div>'; } return html; }; // 各リンク要素作成 var html=''; _.each(curTagHash, function(arr, tag){ html += createLblHtml(arr, tag); }) if(html) { $curPrj.append(html); } }; // 再読み込み時に実行 window.addEventListener('load', createTagLinkList); window.addEventListener('hashchange', createTagLinkList);
