// ==UserScript==
// @name         fix zhihu imagepreview 知乎图片查看优化 支持旋转
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  知乎图片查看优化 支持旋转
// @author       You
// @match        https://www.zhihu.com/question/*
// @match        https://zhuanlan.zhihu.com/p/*
// @require      https://cdn.bootcss.com/document-register-element/1.11.1/document-register-element.js
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    let cssprop = function createCss({rotate}) {
return {
    transform: `translate(-50%) rotate(${rotate})`,
    position: 'relative',
left: '50%',
    top: 0,
    cursor: 'default',
}
}

function Ztest(value = 0) {
let img = document.querySelector('.ImageView  img')
img.parentNode.style.overflow = "auto"
let pro = cssprop({
rotate: value + 'deg'
})
for (let key in pro) {
img.style[key] = pro[key]
}
}

class MyControl extends HTMLElement {
  constructor() {
      super()
  // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        :host {  display: block; position: fixed; right: 0; top: 50%; width: 120px; transform: translate(0, -50%); z-index: 10000  }
        :host img { max-width: 50px }
        :host input { width: 30px }
      </style>
      <div>
      <div>0度</div>
      <input type="range" value="0" step="5" min="0" max="360" style="width: 120px"/>
      <button type="button">旋转</button>
</div>
    `;
    shadowRoot.children[1].children[1].addEventListener('input', (e) => {
      let _value = Number.parseFloat(e.target.value)
       if (!Number.isNaN(_value)) {
          shadowRoot.children[1].children[0].textContent = _value + '度'
       }
    })
    shadowRoot.children[1].children[2].addEventListener('click', (e) => {
       let _value = Number.parseFloat(shadowRoot.children[1].children[1].value)
       Ztest(_value)
    })
      this._shadowRoot = shadowRoot
  }

  show() {
            this._shadowRoot.children[1].style.display = null
  }

  hide() {
      this._shadowRoot.children[1].style.display = 'none'
  }
}

customElements.define('my-control', MyControl)

        let mycontrol = new MyControl()


    var targetNode = document.body
          var config = { attributes: false, childList: true, subtree: true };

        var callback = function(mutationsList) {
            for(var mutation of mutationsList) {
//                console.log(mutation)
                if (mutation.addedNodes && mutation.addedNodes[0] && mutation.addedNodes[0].innerHTML.indexOf('ImageView') > -1 ) {
                    console.log("bang")
                    setTimeout(function() {
                        mycontrol.show()
                    Ztest()
                    }, 0)
                }

                                if (mutation.removedNodes && mutation.removedNodes[0] && mutation.removedNodes[0].innerHTML.indexOf('ImageView') > -1 ) {
                    setTimeout(function() {
                        mycontrol.hide()

                    }, 0)
                }
            }
        };

        var observer = new MutationObserver(callback);

        observer.observe(targetNode, config);


    document.body.appendChild(mycontrol)
       mycontrol.hide()
})();