Raw Source Toggle Dropdown

• Minified Source

TheDragShot / FanFiction DocEdit Toggle Lights

// ==UserScript==
// @name            FanFiction DocEdit Toggle Lights
// @namespace       FanFiction
// @author          DragShot
// @oujs:author     TheDragShot
// @released        2015-06-29
// @updated         2015-06-10
// @version         1.2
// @lastchanges     Now it works in the edit profile section too!
// @copyright       2015, DragShot
// @license         GNU GPL version 3
// @icon            https://www.fanfiction.net/static/images/favicon_2010_iphone.png
// @description     Adds a button to the doc editor toolbar which toggles lights ON (black text on a white background) and OFF (white text on a black background). Mixing this with the fullscreen mode results in a more comfortable writing experience for your eyes.
// @include         *www.fanfiction.net/docs/edit.php*
// @include         *www.fanfiction.net/account/profile.php*
// @grant           none
// @downloadURL     https://openuserjs.org/install/TheDragShot/FanFiction_DocEdit_Toggle_Lights.user.js
// ==/UserScript==

/* CHANGELOG ////////////////////////////////////////

1.2 (6/29/2015)
    - Now it works in the edit profile section too!

1.1 (6/10/2015)
    - Now the script uses 'localStorage' to remember your choice and apply it in the next session.
    - Minor code cleanups performed.

///////////////////////////////// END OF CHANGELOG */

$('document').ready(function(){
  if(!localStorage.getItem('ds.js.fanfiction.togglelights.lightson')) {
    localStorage.setItem('ds.js.fanfiction.togglelights.lightson',1);
  }
  //A timeout set to wait until the editor iframe is available
  setTimeout(function(){
    function createNewNode(htmlStr) {
      var frag = document.createDocumentFragment(),
          temp = document.createElement('div');
      temp.innerHTML = htmlStr;
      while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
      }
      return frag;
    }
    var url = window.location.href;
    var toolBar;
    if(url.indexOf('docs/edit.php')!=-1)
      toolBar=document.getElementById('mceu_14-body');
    else
      toolBar=document.getElementById('mceu_20-body');
    var btn = createNewNode('<div aria-label="Toggle lights" role="button" id="mceu_ds1" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_ds1"><button role="presentation" type="button" tabindex="-1"><i id="dsico-1" class="mce-ico mce-i-forecolor"></i></button></div>');
    // Using native DOM methods to insert the fragment
    toolBar.insertBefore(btn, toolBar.lastChild);
    btn = toolBar.lastChild.previousElementSibling;
    var bio_ifr = document.getElementById('bio_ifr').contentDocument;
    //bio_ifr.head.appendChild(createNewNode('<style>.lightson{background-color: #FFF;color: #000;}.lightsoff{background-color: #3A3A3A;color: #FFF;}</style>');
    $('#bio_ifr').contents().find("head").append('<style>.lightson{background-color: #FFF;color: #000;}.lightsoff{background-color: #3A3A3A;color: #FFF;}</style>');
    //$('.lightson').css('background-color','#FFF');
    //$('.lightson').css('color','#000');
    //$('.lightsoff').css('background-color','#3A3A3A');
    //$('.lightsoff').css('color','#FFF');
    var tinymce = bio_ifr.getElementById('tinymce');
    if(localStorage.getItem('ds.js.fanfiction.togglelights.lightson')==1){
      $(tinymce).toggleClass('lightson',true);
      $('#dsico-1').toggleClass('mce-i-forecolor',true);
    }else{
      $(tinymce).toggleClass('lightsoff',true);
      $('#dsico-1').toggleClass('mce-i-forecolor',false);
      $('#dsico-1').toggleClass('mce-i-backcolor',true);
    }
    btn.onclick=(function(){
      $(tinymce).toggleClass('lightson');
      $(tinymce).toggleClass('lightsoff');
      $('#dsico-1').toggleClass('mce-i-forecolor');
      $('#dsico-1').toggleClass('mce-i-backcolor');
      localStorage.setItem('ds.js.fanfiction.togglelights.lightson',($(tinymce).hasClass('lightson')? 1:0));
    });
  },1000);
});