my-note

// ==UserScript==
// @name         mr-yin blog
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       yinluobing
// @match
// @include     http://*
// @include https://*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    window.onload=function(){
        window.notepadOpen=false;
        var div = document.createElement("div");
        div.innerHTML = '<style type="text/css">.clearfix:after, .clearfix:before {content: " ";height:0; display:block;clear: both;height:0;} .notepad-yin {top: 100px;position: fixed; right: 50px; z-index: 1000000; } .notepad-yin .notepad-content {background: #fff;height:100%;} .notepad-yin .notepad-switch {right: 0;position: fixed;margin-bottom: -20px; }.notepad-yin .notepad-switch img{display:block;width:24px;} .notepad-yin .notepad-opearte {margin-bottom: 1px; cursor: pointer; } .notepad-yin .notepad-opearte div {float: left; padding: 5px 0px; width: 45px; text-align: center; margin-right: 10px; } .notepad-yin .notepad-opearte .active {background: #10a64f; color: #fff; } .notepad-iframe{height:100%;} .notepad-yin iframe {width: 100%;height: 100%;border: 0; border-radius: 5px; } </style> <div class="notepad-switch"><img src="https://blog.baidu120.cc/statics/img/note6.png" width="24"><img src="https://blog.baidu120.cc/statics/img/full12.png" width="24"></div> <div class="clearfix" style="height:0"></div> <div class="notepad-content"> <div class="notepad-opearte clearfix"> <div class="active" notepad-data-href="https://blog.baidu120.cc/">列表</div> <div notepad-data-href="https://blog.baidu120.cc/Y623VvxFcS19R/write-post.php">添加</div> </div> </div>';
        div.className='notepad-yin';
        if(document.getElementsByClassName('notepad-yin').length==0 && window.notepadOpen==false){
            window.notepadOpen=true;
            document.body.appendChild(div);
            obj.init();
        }
    }
    var obj = {
        init:function(){
            // 隐藏notepad内容
            document.getElementsByClassName('notepad-content')[0].hidden=true;

            // 笔记开关
            document.getElementsByClassName('notepad-switch')[0].children[0].addEventListener('click',function(){
                var div = document.createElement('div')
                div.className="notepad-iframe"
                div.innerHTML='<iframe src="https://blog.baidu120.cc"></iframe>'
                if(document.getElementsByClassName('notepad-content')[0].hidden){
                    document.getElementsByClassName('notepad-content')[0].appendChild(div);
                    document.getElementsByClassName('notepad-yin')[0].style='width:500px;height: 500px;'
                }else{
                   document.getElementsByClassName('notepad-content')[0].children[1].remove()
                   document.getElementsByClassName('notepad-yin')[0].style=''
                }
                document.getElementsByClassName('notepad-content')[0].hidden = !document.getElementsByClassName('notepad-content')[0].hidden;
            })

            // 全屏开关
            document.getElementsByClassName('notepad-switch')[0].children[1].addEventListener('click',function(){
                document.getElementsByClassName('notepad-yin')[0].style=(document.getElementsByClassName('notepad-yin')[0].style.cssText==''?"width:100%;top:0;height:"+(window.innerHeight-50)+"px;right:0":"");
            })

            var tab = document.getElementsByClassName('notepad-opearte')[0].children

            for (var i = 0; i < tab.length; i++) {
                tab[i].addEventListener('click',function(){
                    // 先移除class
                    for (var j = 0; j < tab.length; j++) {
                        tab[j].className=''
                    }
                    // 再添加class
                    this.className='active'
                    var href = this.getAttribute('notepad-data-href');
                    document.getElementsByClassName('notepad-iframe')[0].children[0].src = href;
                })
            }

            // document.getElementsByClassName('notepad-iframe')[0].children[0].src
        },
    };

})();