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()は不要となった。

メニューの「その他」の右に▼が追加され、クリックするたびに表示・非表示が切り替わる。