LDRで本文の表示、非表示をワンクリックで切り替える
livedoor Readerで本文の表示・非表示をマウスでワンクリックで切り替える機能を追加する。
HatebuComment on LDRに追加しようと思ったけど、一般的ではないかもしれないので、ソースだけ載せておく。
// 本文の表示非表示を切り替える▼を追加する function byID(id) { return document.getElementById(id); } function EVENT(type) { var event = document.createEvent('MouseEvents'); event.initEvent(type, true, true); return event; } var elem = document.createElement('li'); elem.id = 'toggleContent'; elem.title = '本文の表示 / 非表示の切替'; elem.innerHTML = '▼'; byID("control_buttons_ul").appendChild(elem); byID("toggleContent").addEventListener('click', function() { // まずメニューをポップアップさせる byID("menu_button").dispatchEvent(EVENT('mousedown')); // 次に該当メニューをクリック var elem = document.evaluate( '//span/text()[self::text()="本文の表示 / 非表示の切替"]', document, null, 7, null ); elem.snapshotItem(0).dispatchEvent(EVENT('mouseup')); // メニューを閉じる byID("menu_button").dispatchEvent(EVENT('click')); }, false);
11月21日、LDRの関数を利用するように変更した
byID("toggleContent").addEventListener('click', function() { // まずメニューをポップアップさせる byID("menu_button").dispatchEvent(EVENT('mousedown')); // 次に該当メニューをクリック var elem = document.evaluate( '//span/text()[self::text()="本文の表示 / 非表示の切替"]', document, null, 7, null ); elem.snapshotItem(0).dispatchEvent(EVENT('mouseup')); // メニューを閉じる byID("menu_button").dispatchEvent(EVENT('click')); }, false); 上記を以下のように変更 $("toggleContent").addEventListener('click', function() { // LDRの関数 Control.compact() }, false);
これに伴い、function byID()やfunction EVENT()は不要となった。
メニューの「その他」の右に▼が追加され、クリックするたびに表示・非表示が切り替わる。