Pixiv View Util

閲覧専用のユーティリティです。(1)各イラストの閲覧ページや作者ごとの画像一覧ページのレイアウトを変更します。(2)pixivサイト内でポップアップ機能を有効化します。

目前为 2018-12-06 提交的版本。查看 最新版本

// ==UserScript==
// @name           Pixiv View Util
// @name:en        Pixiv View Util
// @namespace      Pixiv View Util
// @description    閲覧専用のユーティリティです。(1)各イラストの閲覧ページや作者ごとの画像一覧ページのレイアウトを変更します。(2)pixivサイト内でポップアップ機能を有効化します。
// @description:en this is  some  utility funcitions for pixiv.(1)change the layout of illust pages and auther's pages. (2)add popup tool.
// @author         sotoba
// @match          https://www.pixiv.net/bookmark_new_illust.php*
// @match          https://www.pixiv.net/discovery*
// @match          https://www.pixiv.net/bookmark_detail.php?illust_id=*
// @match          https://www.pixiv.net/bookmark_add.php?id=*
// @match          https://www.pixiv.net/member_illust.php*
// @match          https://www.pixiv.net/ranking.php?mode=*
// @match          https://www.pixiv.net/member.php?id=*
// @match          https://www.pixiv.net/bookmark.php*
// @match          https://www.pixiv.net/search.php*
// @match          https://www.pixiv.net/*
// @version        2.1.0-20181206
// @homepageURL    https://github.com/SotobatoNihu/PixivViewUtil
// @license        The MIT License
// @require        https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js
// @require        https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js
// @require        https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/8.1.0/vue-i18n.min.js
// @require        https://www.gitcdn.xyz/repo/FlandreDaisuki/zip_player/ecf3751317079fcabef70af4bd0e92411288303d/dist/zip_player.iife.min.js
// @noframes
// @grant          GM_getValue
// @grant          GM.getValue
// @grant          GM_setValue
// @grant          GM.setValue
// @grant          GM.getResourceUrl
// @grant          GM_getResourceText
// ==/UserScript==

(function (Vue,Vuex) {
  'use strict';

  

  function __$styleInject( css ) {
      if(!css) return ;

      if(typeof(window) == 'undefined') return ;
      let style = document.createElement('style');

      style.innerHTML = css;
      document.head.appendChild(style);
      return css;
  }

  Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
  Vuex = Vuex && Vuex.hasOwnProperty('default') ? Vuex['default'] : Vuex;

  __$styleInject("\r\n");

  var script = {
    name: 'PixivIcons',
    props: {
      icon: {
        default: 'like',
        type: String,
      },
    },
  };
              const __vue_script__ = script;
  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.icon === 'like')?_c('img',{attrs:{"src":"https://s.pximg.net/www/js/spa/260127df5fe9ade778ec4be463deaf01.svg","width":"12","height":"12"}}):(_vm.icon === 'bookmark')?_c('svg',{attrs:{"viewBox":"0 0 12 12","width":"12","height":"12"}},[_c('path',{attrs:{"fill":"currentColor","d":"M9,0.75 C10.6568542,0.75 12,2.09314575 12,3.75 C12,6.68851315 10.0811423,9.22726429 6.24342696,11.3662534\n      L6.24342863,11.3662564 C6.09210392,11.4505987 5.90790324,11.4505988 5.75657851,11.3662565\n      C1.9188595,9.22726671 0,6.68851455 0,3.75 C1.1324993e-16,2.09314575 1.34314575,0.75 3,0.75\n      C4.12649824,0.75 5.33911281,1.60202454 6,2.66822994 C6.66088719,1.60202454 7.87350176,0.75 9,0.75 Z"}})]):(_vm.icon === 'view')?_c('img',{attrs:{"src":"https://s.pximg.net/www/js/spa/af74d092363c09fd06441a4ab04c9331.svg","width":"14","height":"12"}}):_vm._e()};
  var __vue_staticRenderFns__ = [];
    const __vue_inject_styles__ = undefined;
    const __vue_scope_id__ = undefined;
    const __vue_module_identifier__ = undefined;
    const __vue_is_functional_template__ = false;
    function __vue_normalize__(
      template, style, script$$1,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};
      component.__file = "PixivIcons.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      return component
    }
    function __vue_create_injector__() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var PixivIcons = __vue_normalize__(
      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
      __vue_inject_styles__,
      __vue_script__,
      __vue_scope_id__,
      __vue_is_functional_template__,
      __vue_module_identifier__,
      __vue_create_injector__,
      undefined
    );
  var script$1 = {
      name: 'Caption',
      components: {
          PixivIcons,
      },
      props: {
          id: {
              default: 'popup-caption',
              type: String,
          },
      },
      data() {
          return {
              captionWidth:100,
          };
      },
      updated: function () {
          this.$nextTick(function () {
              this.$store.commit('captionHeight',this.$el.clientHeight);
          });
      },
      computed: {
          tagArray() {
              const json = this.$store.state.pixivJson;
              return json.body.tags.tags;
          },
          captionHtml() {
              const json = this.$store.state.pixivJson;
              return json.body.description;
          },
          date() {
              const json = this.$store.state.pixivJson;
              const date = new Date(json.body.createDate);
              return `upload:${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
          },
          like() {
              const json = this.$store.state.pixivJson;
              return ` ${json.body.likeCount} `;
          },
          bookmark() {
              const json = this.$store.state.pixivJson;
              return ` ${json.body.bookmarkCount} `;
          },
          view() {
              const json = this.$store.state.pixivJson;
              return `${json.body.viewCount}`;
          },
          toggleCaption: function () {
              console.log("toggleCaption");
              this.$store.commit('toggleCaption');
          },
          captionStyle: function () {
              const store=this.$store;
              return {
                  width: `${this.$store.state.screen.width+10}px`,
                  height: 'auto',
                  display:'block',
                  backgroundColor: 'white',
                  border: '1px solid #000',
              };
          },
      },
  };
              const __vue_script__$1 = script$1;
  var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{style:(_vm.captionStyle),attrs:{"id":_vm.id}},[_c('div',{staticClass:"description",domProps:{"innerHTML":_vm._s(_vm.captionHtml)}}),_vm._v(" "),_c('div',{staticClass:"appendum"},[_c('div',{staticClass:"tags",staticStyle:{"display":"inline-block"}},_vm._l((_vm.tagArray),function(tagElem){return _c('span',[(tagElem.locked)?_c('span',[_vm._v("*")]):_vm._e(),_c('a',{attrs:{"href":"https://dic.pixiv.net/a/{{tagElem.tag}}"}},[_vm._v(_vm._s(tagElem.tag)),_c('span',{class:[ ( tagElem.romaji || tagElem.locked ) ? 'pixpedia-icon' : _vm.pixpedia-_vm.no-_vm.icon ]})])])})),_vm._v(" "),_c('div',{staticClass:"information"},[_c('div',{domProps:{"textContent":_vm._s(_vm.date)}}),_vm._v(" "),_c('PixivIcons',{attrs:{"icon":'like'}}),_vm._v(" "),_c('span',{staticClass:"like",domProps:{"textContent":_vm._s(_vm.like)}}),_vm._v(" "),_c('PixivIcons',{attrs:{"icon":'bookmark'}}),_vm._v(" "),_c('span',{attrs:{"id":"bookmark"},domProps:{"textContent":_vm._s(_vm.bookmark)}}),_vm._v(" "),_c('PixivIcons',{attrs:{"icon":'view'}}),_vm._v(" "),_c('span',{attrs:{"id":"view"},domProps:{"textContent":_vm._s(_vm.view)}})],1)])])};
  var __vue_staticRenderFns__$1 = [];
    const __vue_inject_styles__$1 = function (inject) {
      if (!inject) return
      inject("data-v-b3f734cc_0", { source: "\n.description[data-v-b3f734cc]{white-space:pre-line;z-index:10001;word-wrap:break-word;width:auto;height:70%;max-height:70%;overflow-y:scroll;scrollbar-width:thin\n}\n.appendum[data-v-b3f734cc]{width:auto;height:auto;max-height:30%;overflow-y:scroll\n}\n.information[data-v-b3f734cc]{background-color:#fff;font-size:x-small;width:auto;height:auto;max-height:20%;color:#999;line-height:1\n}\n.pixpedia-icon[data-v-b3f734cc]{display:inline-block;margin-left:2px;width:15px;height:14px;vertical-align:-2px;text-decoration:none;background:url(https://s.pximg.net/www/images/inline/pixpedia.png) no-repeat\n}\n.pixpedia-no-icon[data-v-b3f734cc]{display:inline-block;margin-left:2px;width:15px;height:14px;vertical-align:-2px;text-decoration:none;background:url(https://s.pximg.net/www/images/inline/pixpedia-no-item.png) no-repeat\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$1 = "data-v-b3f734cc";
    const __vue_module_identifier__$1 = undefined;
    const __vue_is_functional_template__$1 = false;
    function __vue_normalize__$1(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "Caption.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$1() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$1.styles || (__vue_create_injector__$1.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Caption = __vue_normalize__$1(
      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
      __vue_inject_styles__$1,
      __vue_script__$1,
      __vue_scope_id__$1,
      __vue_is_functional_template__$1,
      __vue_module_identifier__$1,
      __vue_create_injector__$1,
      undefined
    );
  var script$2 = {
      name: 'Screen',
      props: {
          id: 'popup-screen',
      },
      data() {
          return {
              width:1000,
              height:1000
          }
      },
      updated() {
          this.$nextTick(function () {
          this.$store.commit('screenLoaded');
          });
      },
      computed: {
          screenImg: function () {
              return this.$store.state.pixivJson.body.urls.regular
          },
          getSize: function () {
              const store = this.$store;
              const imgWidth = this.$store.state.pixivJson.body.width;
              const imgHeight = this.$store.state.pixivJson.body.height;
              const wscale = (window.innerWidth * this.$store.state.screen.scale) / imgWidth;
              const hscale = (window.innerHeight * this.$store.state.screen.scale) / imgHeight;
              const scale = wscale < hscale ? wscale : hscale;
              this.height = imgHeight * scale;
              this.width = imgWidth * scale;
              this.$store.commit('screenWidth', this.width);
              this.$store.commit('screenHeight', this.height);
          },
          imgStyle: function () {
              const size = this.getSize;
              return {
                  width: 'auto',
                  height: 'auto',
                  pointerEvents: 'none',
                  maxWidth: `${this.width}px`,
                  maxHeight: `${this.height}px`,
              }
          },
          screenStyle: function () {
              const size = this.getSize;
              return {
                  border: '5px solid black',
                  backgroundColor: '#111',
                  position: 'relative',
                  width: 'auto',
                  height: 'auto',
                  maxWidth: `${this.width}px`,
                  maxHeight: `${this.height}px`,
                  float: 'left',
                  backgroundImage: `url(${this.screenImg})`,
                  backgroundSize: 'contain',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
              };
          },
      },
  };
              const __vue_script__$2 = script$2;
  var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{style:(_vm.screenStyle),attrs:{"id":_vm.id}},[_c('img',{style:(_vm.imgStyle),attrs:{"src":_vm.screenImg}})])};
  var __vue_staticRenderFns__$2 = [];
    const __vue_inject_styles__$2 = undefined;
    const __vue_scope_id__$2 = "data-v-2ed83920";
    const __vue_module_identifier__$2 = undefined;
    const __vue_is_functional_template__$2 = false;
    function __vue_normalize__$2(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "MixinScreen.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      return component
    }
    function __vue_create_injector__$2() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$2.styles || (__vue_create_injector__$2.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Screen = __vue_normalize__$2(
      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
      __vue_inject_styles__$2,
      __vue_script__$2,
      __vue_scope_id__$2,
      __vue_is_functional_template__$2,
      __vue_module_identifier__$2,
      __vue_create_injector__$2,
      undefined
    );
  var script$3 = {
      name: "Illust",
      mixins: [Screen],
  };
              const __vue_script__$3 = script$3;
  var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{style:(_vm.screenStyle)},[_c('img',{style:(_vm.imgStyle),attrs:{"src":_vm.screenImg}})])};
  var __vue_staticRenderFns__$3 = [];
    const __vue_inject_styles__$3 = undefined;
    const __vue_scope_id__$3 = "data-v-7285e8c9";
    const __vue_module_identifier__$3 = undefined;
    const __vue_is_functional_template__$3 = false;
    function __vue_normalize__$3(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "IllustScreen.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      return component
    }
    function __vue_create_injector__$3() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$3.styles || (__vue_create_injector__$3.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Illust = __vue_normalize__$3(
      { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
      __vue_inject_styles__$3,
      __vue_script__$3,
      __vue_scope_id__$3,
      __vue_is_functional_template__$3,
      __vue_module_identifier__$3,
      __vue_create_injector__$3,
      undefined
    );
  var script$4 = {
      name: "Manga",
      mixins: [Screen],
      data() {
          return {
              width: 1000,
              height: 1000,
              scrollWidth: 0,
              active: false,
              onmouse: false,
          }
      },
      updated: {},
      methods: {},
      watch: {
          scrollWidth: function () {
              this.$refs.scrollable.scrollLeft = this.scrollWidth;
          }
      },
      mounted() {
          const store = this.$store;
          const wrapper = this.$refs.wrapper;
          let onmouse = this.onmouse;
          wrapper.addEventListener('scroll', function (event) {
              store.state.screen.dragging = true;
              return false;
          });
          wrapper.addEventListener('mouseover', function (event) {
              onmouse = true;
          });
          wrapper.addEventListener('mouseout', function (event) {
              onmouse = false;
          });
          wrapper.addEventListener('mousemove', function (event) {
              onmouse = true;
          });
          wrapper.addEventListener('wheel', function (event) {
              onmouse = true;
          });
          document.addEventListener('wheel', function (event) {
              if (event.target.id === 'manga__main' || onmouse) {
                  event.preventDefault();
                  const scrollValue = event.deltaY > 0 ? 100 : -100;
                  wrapper.scrollBy(scrollValue, 0);
              }
          });
      },
      computed: {
          ImageUrls: function () {
              let imgElemArray = [];
              const json = this.$store.state.pixivJson;
              const firstPageURL = json.body.urls.regular.replace(/\/...x...\//, '/600x600/');
              const pageNum = json.body.pageCount;
              for (let i = 0; i < pageNum; i++) {
                  const url = firstPageURL.replace('p0', 'p' + i);
                  imgElemArray.push(url);
              }
              return imgElemArray;
          },
          getHeight: function () {
              const store = this.$store;
              const height = window.innerHeight * this.$store.state.screen.scale;
              store.commit('screenHeight', height);
              return height
          },
          getWidth: function () {
              const store = this.$store;
              const width = window.innerWidth * this.$store.state.screen.scale;
              store.commit('screenWidth', width);
              return width
          },
          getSize: function () {
              this.height = window.innerHeight * this.$store.state.screen.scale;
              this.width = window.innerWidth * this.$store.state.screen.scale;
              this.$store.commit('screenWidth', this.width);
              this.$store.commit('screenHeight', this.height);
              return {width: this.width, height: this.height}
          },
          mangaStyle: function () {
              const size = this.getSize;
              return {
                  border: '5px solid black',
                  backgroundColor: '#111',
                  position: 'relative',
                  whiteSpace: 'nowrap',
                  width: '100%',
                  height: 'auto',
                  maxWidth: `${size.width}px`,
                  maxHeight: `${size.height + 17}px`,
                  float: 'left',
                  overflow: 'hidden',
                  backgroundSize: 'contain',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
              };
          },
          thumbStyle: function () {
              return {
                  left: `${this.scrollWidth}px`,
              }
          }
      },
  };
              const __vue_script__$4 = script$4;
  var __vue_render__$4 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{style:(_vm.mangaStyle),attrs:{"id":_vm.id}},[_c('div',{ref:"wrapper",staticClass:"scroll_wrapper"},[_c('div',{ref:"scrollable",attrs:{"id":"manga__main"}},_vm._l((_vm.ImageUrls),function(imgUrl){return _c('img',{key:_vm.number,style:(_vm.imgStyle),attrs:{"src":imgUrl}})}))])])};
  var __vue_staticRenderFns__$4 = [];
    const __vue_inject_styles__$4 = function (inject) {
      if (!inject) return
      inject("data-v-6cccd35e_0", { source: "\n.scroll_wrapper[data-v-6cccd35e]{height:calc(100% - 17px);width:100%;overflow-x:scroll;-webkit-overflow-scrolling:touch\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$4 = "data-v-6cccd35e";
    const __vue_module_identifier__$4 = undefined;
    const __vue_is_functional_template__$4 = false;
    function __vue_normalize__$4(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "MangaScreen.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$4() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$4.styles || (__vue_create_injector__$4.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Manga = __vue_normalize__$4(
      { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
      __vue_inject_styles__$4,
      __vue_script__$4,
      __vue_scope_id__$4,
      __vue_is_functional_template__$4,
      __vue_module_identifier__$4,
      __vue_create_injector__$4,
      undefined
    );
  class PixivJson {
      constructor(json) {
          Object.assign(this, json);
      }
  }
  class Util {
      onloadExecute(store, url) {
          function changeIllustPageLayout() {
              let figures = document.getElementsByTagName('figure');
              let figcaptions = document.getElementsByTagName('figcaption');
              if (figures.length === figcaptions.length) {
                  for (let i = 0; i < figures.length; i++) {
                      figures[i].parentNode.insertBefore(figcaptions[i], figures[i]);
                  }
              }
          }
          function changeAutherPageLayout() {
              const h2Elems = document.getElementsByTagName('h2');
              if (typeof h2Elems !== 'undefined') {
                  for (const h2elem  of h2Elems) {
                      if (h2elem.innerText.startsWith('イラスト') || h2elem.innerText.startsWith('作品')) {
                          const illustElem = h2elem.parentElement.parentElement;
                          const header = document.getElementsByTagName('header')[0];
                          const parent = header.parentNode;
                          parent.insertBefore(illustElem, header.nextSibling);
                          break
                      }
                  }
              }
          }
          if (store.state.enable.modifyIllustPage && ~url.indexOf('member_illust.php?mode=medium')) {
              changeIllustPageLayout();
          } else if (store.state.enable.modifyAutherPage) {
              if (~url.indexOf('member.php?') || ~url.indexOf('member_illust.php?') || ~url.indexOf('bookmark.php?'))
                  changeAutherPageLayout();
          }
      }
      async getPixivJson(illustId) {
          await fetch(`https://www.pixiv.net/ajax/illust/${illustId}`,
              {
                  method: 'GET',
                  mode: 'cors',
                  keepalive: true,
              },
          ).then(function (response) {
              if (response.ok) {
                  return response.json();
              }
          }).then(async function (json) {
              return new PixivJson(json);
          });
      }
      async getUgoiraJson(illustId) {
          const url = `https://www.pixiv.net/ajax/illust/${illustId}/ugoira_meta`;
          await fetch(url,
              {
                  method: 'GET',
                  mode: 'cors',
                  keepalive: true
              }).then(function (response) {
              if (response.ok) {
                  return response.json();
              }
          }).then((json) => {
              return new PixivJson(json)
          });
      }
      async loadGmData(store) {
          await GM.getValue("pixiv_viewutil_setting").then(jsonString => {
              if (jsonString !== undefined) {
                  const jsonData = JSON.parse(jsonString);
                  store.commit('setAutherPageBool', (jsonData.changeIllustPageLayout == null) ? true : jsonData.changeIllustPageLayout);
                  store.commit('setAutherPageBool', (jsonData.changeMemberPageLayout == null) ? true : jsonData.changeMemberPageLayout);
                  store.commit('setPopupBool', (jsonData.usePopup == null) ? true : jsonData.usePopup);
                  store.commit('setPopupScale', (jsonData.popupScale == null) ? 0.7 : jsonData.popupScale);
              } else {
                  store.commit('setAutherPageBool', true);
                  store.commit('setAutherPageBool', true);
                  store.commit('setPopupBool', true);
                  store.commit('setPopupScale', 0.7);
              }
          });
      }
      saveGmData(obj) {
          const jsonObj = JSON.stringify(obj);
          console.log(JSON.stringify(obj));
          GM.setValue("pixiv_viewutil_setting", jsonObj);
      }
  }
  let basicResponse = {
      body: {
          illustTitile: '',
          createDate: '2000-12-31T15:00:00+00:00"',
          illustType: 0,
          width: 1080,
          height: 1080,
          likeCount: 0,
          bookmarkCount: 0,
          commentCount: 0,
          pageCount: 1,
          viewCount: 0,
          urls: {
              regular: '',
          },
          tags: {
              tags: [
                  {
                      tag: "",
                      locked: false,
                      deletable: false,
                      romaji: "",
                      translation: {
                          en: "",
                      },
                  },
              ],
          },
      },
  };
  let commentResponse = {
      error: false,
      message: "",
      body: {
          comments: [
              {
                  userId: 0,
                  userName: "",
                  img: "",
                  id: "",
                  comment: "no comment",
                  stampId: null,
                  stampLink: null,
                  commentDate: "",
                  commentRootId: null,
                  commentParentId: null,
                  commentUserId: "",
                  replyToUserId: null,
                  replyToUserName: null,
                  editable: false,
                  hasReplies: false,
              }
          ],
      },
  };
  let ugoiraResponse = {
      error: false,
      message: "",
      body: {
          src: "",
          originalSrc: "",
          mime_type: "",
          frames: [
              {
                  file: "000000.jpg",
                  delay: 100
              }
          ]
      },
  };
  let commentElement = {
      userId: 0,
      userName: "",
      img: "",
      id: "",
      comment: "no comment",
      stampId: null,
      stampLink: null,
      commentDate: "",
      commentRootId: null,
      commentParentId: null,
      commentUserId: "",
      replyToUserId: null,
      replyToUserName: null,
      editable: false,
      hasReplies: false,
  };
  let emoji = {
      "(normal2)": 201,
      "(shame2)": 202,
      "(love2)": 203,
      "(interesting2)": 204,
      "(blush2)": 205,
      "(fire2)": 206,
      "(angry2)": 207,
      "(shine2)": 208,
      "(panic2)": 209,
      "(normal3)": 301,
      "(satisfaction3)": 302,
      "(surprise3)": 303,
      "(smile3)": 304,
      "(shock3)": 305,
      "(gaze3)": 306,
      "(wink3)": 307,
      "(happy3)": 308,
      "(excited3)": 309,
      "(love3)": 310,
      "(normal4)": 401,
      "(surprise4)": 402,
      "(serious4)": 403,
      "(love4)": 404,
      "(shine4)": 405,
      "(sweat4)": 406,
      "(shame4)": 407,
      "(sleep4)": 408,
      "(normal)": 101,
      "(surprise)": 102,
      "(serious)": 103,
      "(heaven)": 104,
      "(happy)": 105,
      "(excited)": 106,
      "(sing)": 107,
      "(cry)": 108,
      "(heart)": 501,
      "(teardrop)": 502,
      "(star)": 503,
  };
  var script$5 = {
      name: 'Ugoira',
      props: {
          id: 'popup-screen',
          visible: false,
      },
      data() {
          return {
              isVisible: this.visible,
              width: 600,
              height: 600,
          };
      },
      updated() {
      },
      watch: {
          visible: function () {
              if (this.visible) {
                  console.log("ugoira start!");
                  this.getSize;
                  this.$nextTick(function () {
                      const screen = document.getElementById('popup-ugoira');
                      if (screen) {
                          screen.innerText = '';
                          this.canvas = document.createElement('canvas');
                          this.canvas.id = 'ugoira-canvas';
                          this.canvas.style.pointerEvents='none';
                          screen.appendChild(this.canvas);
                      }
                      const options = {
                          canvas: this.canvas,
                          metadata: this.$store.state.ugoiraJson.body,
                          source: this.$store.state.ugoiraJson.body.src,
                          mime_type: this.$store.state.ugoiraJson.body.mime_type,
                          chunkSize: 10000,
                          loop: true,
                          autoStart: false,
                          autosize: true,
                      };
                      this.player = new ZipImagePlayer(options);
                      const player = this.player;
                      const canvas = this.canvas;
                      let width=this.width;
                      let height=this.height;
                      let count = 0;
                      const store = this.$store;
                      const setLoop = setInterval( () =>{
                          const images = player._frameImages;
                          if (images && images.length > 0) {
                              store.commit('screenWidth', images[0].width);
                              store.commit('screenHeight', images[0].height);
                              this.width=canvas.width;
                              this.height=canvas.height;
                              clearInterval(setLoop);
                              player.play();
                          }
                          if (count > 100) {
                              clearInterval(setLoop);
                          }
                          count++;
                      }, 100);
                  });
              } else {
                  if (this.player) {
                      this.player.stop();
                  }
                  this.canvas = null;
              }
          }
      },
      computed: {
          screenImg: function () {
              return this.$store.state.pixivJson.body.urls.regular
          },
          getSize: function () {
              const store = this.$store;
              const imgWidth = this.$store.state.pixivJson.body.width;
              const imgHeight = this.$store.state.pixivJson.body.height;
              const wscale = (window.innerWidth * this.$store.state.screen.scale) / imgWidth;
              const hscale = (window.innerHeight * this.$store.state.screen.scale) / imgHeight;
              const scale = wscale < hscale ? wscale : hscale;
              this.height = imgHeight * scale;
              this.width = imgWidth * scale;
              this.$store.commit('screenWidth', this.width);
              this.$store.commit('screenHeight', this.height);
          },
          screenStyle: function () {
              return {
                  border: '5px solid black',
                  backgroundColor: '#111',
                  position: 'relative',
                  width: 'auto',
                  height: 'auto',
                  maxWidth: `${this.width}px`,
                  maxHeight: `${this.height}px`,
                  float: 'left',
                  backgroundImage: `url(${this.screenImg})`,
                  backgroundSize: 'contain',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
              };
          },
      },
  };
              const __vue_script__$5 = script$5;
  var __vue_render__$5 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{style:(_vm.screenStyle),attrs:{"id":"popup-ugoira"}},[_c('img',{style:(_vm.imgStyle),attrs:{"src":_vm.screenImg}})])};
  var __vue_staticRenderFns__$5 = [];
    const __vue_inject_styles__$5 = function (inject) {
      if (!inject) return
      inject("data-v-2c5773e3_0", { source: "\n#ugoira-canvas[data-v-2c5773e3]{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$5 = "data-v-2c5773e3";
    const __vue_module_identifier__$5 = undefined;
    const __vue_is_functional_template__$5 = false;
    function __vue_normalize__$5(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "UgoiraScreen.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$5() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$5.styles || (__vue_create_injector__$5.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Ugoira = __vue_normalize__$5(
      { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
      __vue_inject_styles__$5,
      __vue_script__$5,
      __vue_scope_id__$5,
      __vue_is_functional_template__$5,
      __vue_module_identifier__$5,
      __vue_create_injector__$5,
      undefined
    );
  var script$6 = {
      name: "Comment",
      props: {
          commentElem: commentElement,
      },
      data() {
          return {
              emoji: emoji
          }
      },
      methods: {},
      computed: {
          isStamp() {
              if (this.commentElem.stampId !== null) {
                  return true
              }
              else return false;
          },
          hasReply() {
              return this.commentElem.hasReplies
          },
          getStampUrl() {
              return `https://s.pximg.net/common/images/stamp/generated-stamps/${commentElem.stampId}_s.jpg?20180605`
          },
          replaceAll(str, beforeStr, afterStr) {
              var reg = new RegExp(beforeStr, "g");
              return str.replace(reg, afterStr);
          },
          getComment() {
              const comment = this.commentElem.comment;
              if (comment.includes(')')) {
                  let replaceComment = comment;
                  Object.keys(emoji).forEach(function (key) {
                      const regexp = new RegExp(key, 'g');
                      replaceComment = replaceComment.replace(regexp, `<span style="width: 14px; height: 14px; display: inline-block; background-image: url('https://s.pximg.net/common/images/emoji/${emoji[key]}.png'); background-size: contain;"></span>`);
                  });
                  return replaceComment
              } else {
                  return comment
              }
          },
          getName() {
              return this.commentElem.userName;
          },
          getDate() {
              return this.commentElem.commentDate;
          },
          getEmoji(comment) {
          },
          commentInfo() {
              return "hoge"
          }
      },
  };
              const __vue_script__$6 = script$6;
  var __vue_render__$6 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"popup-comment"},[(_vm.isStamp)?_c('span',[_c('img',{attrs:{"src":'https://s.pximg.net/common/images/stamp/generated-stamps/' + _vm.commentElem.stampId+'_s.jpg?20180605'}})]):_c('span',{domProps:{"innerHTML":_vm._s(_vm.getComment)}}),_c('br'),_vm._v(" "),_c('span',{staticClass:"popup-comment-info"},[_vm._v(_vm._s(_vm.commentElem.userName)),_c('br'),_vm._v(_vm._s(_vm.commentElem.commentDate))])])};
  var __vue_staticRenderFns__$6 = [];
    const __vue_inject_styles__$6 = function (inject) {
      if (!inject) return
      inject("data-v-75327f15_0", { source: "\n.popup-comment[data-v-75327f15]{background:#eee;margin:5px;margin-right:15px\n}\nimg[data-v-75327f15]{width:48px;height:48px\n}\n.popup-ugoira-stamp[data-v-75327f15]{width:48px;height:48px;background-repeat:no-repeat;background-size:cover;border-radius:2px\n}\n.popup-comment-info[data-v-75327f15]{font-size:xx-small;text-align:left;color:#999\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$6 = "data-v-75327f15";
    const __vue_module_identifier__$6 = undefined;
    const __vue_is_functional_template__$6 = false;
    function __vue_normalize__$6(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "Comment.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$6() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$6.styles || (__vue_create_injector__$6.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Comment = __vue_normalize__$6(
      { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
      __vue_inject_styles__$6,
      __vue_script__$6,
      __vue_scope_id__$6,
      __vue_is_functional_template__$6,
      __vue_module_identifier__$6,
      __vue_create_injector__$6,
      undefined
    );
  var script$7 = {
      name: "CommentList",
      components: {
          Comment,
      },
      props: {
          id: {
              default: 'popup-commentlist',
              type: String,
          },
      },
      data() {
          return {
              screen: document.getElementById('popup-screen'),
              listHeight: 1000,
              comment: {
                  offset: 0,
                  max: 100,
                  hasNext: true,
              }
          }
      },
      methods:{
          infiniteHandler($state) {
          }
      },
      created:{
      },
      updated: function () {
          this.$nextTick(function () {
              this.listHeight=this.$store.state.screen.height;
          });
      },
      computed: {
          commentArray() {
              const json = this.$store.state.commentJson;
               return json.body.comments
          },
          commentListStyle: function () {
              const top=this.$store.state.caption.isVisible ? this.$store.state.caption.height :0;
              return {
                  whiteSpace: 'pre-wrap',
                  zIndex: 10000,
                  width:`120px`,
                  height: `${this.$store.state.screen.height+10}px`,
                  display:'inline-block',
                  overflowY: 'scroll',
                  backgroundColor: 'white',
                  border: '1px solid #000',
                  position:'absolute',
                  top:`${top}px`,
                  left:`${this.$store.state.screen.width+10}px`,
                  float:'right',
              };
          },
          offset:function(){
              if (this.screen){
                  const clientRect = this.screen.getBoundingClientRect() ;
                  return {
                      top:this.screen.style.top,
                      left:clientRect.left+this.screen.clientWidth+ this.screen.clientWidth
                  }
              }else{
                  return {top:0,left:0}
              }
          },
      },
  };
              const __vue_script__$7 = script$7;
  var __vue_render__$7 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{style:(_vm.commentListStyle),attrs:{"id":_vm.id}},_vm._l((_vm.commentArray),function(elem){return _c('Comment',{attrs:{"commentElem":elem}})}))};
  var __vue_staticRenderFns__$7 = [];
    const __vue_inject_styles__$7 = undefined;
    const __vue_scope_id__$7 = "data-v-1b1ad8bb";
    const __vue_module_identifier__$7 = undefined;
    const __vue_is_functional_template__$7 = false;
    function __vue_normalize__$7(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "CommentList.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      return component
    }
    function __vue_create_injector__$7() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$7.styles || (__vue_create_injector__$7.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var CommentList = __vue_normalize__$7(
      { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
      __vue_inject_styles__$7,
      __vue_script__$7,
      __vue_scope_id__$7,
      __vue_is_functional_template__$7,
      __vue_module_identifier__$7,
      __vue_create_injector__$7,
      undefined
    );
  var script$8 = {
      name: 'MainContainer',
      components: {
          Caption,
          Illust,
          Manga,
          Ugoira,
          CommentList,
      },
      data() {
          return {
              illustId:null,
          }
      },
      beforeCreate(){
      },
      computed: {
          myData: function () {
              const json = this.$store.state.pixivJson;
              return json.body.illustTitle;
          },
          isVisible: function () {
              return this.$store.state.screen.isVisible;
          },
          screenLoaded:function(){
              return this.$store.state.screen.isLoaded;
          },
          visibleCaption: function () {
              return this.$store.state.caption.isVisible;
          },
          visibleCommentList: function () {
              return this.$store.state.comment.isVisible;
          },
          isIllust:function(){
              return this.$store.state.pixivJson.body.illustType === 0 && this.$store.state.pixivJson.body.pageCount < 2
          },
          isManga:function(){
              return this.$store.state.pixivJson.body.illustType === 1 || (this.$store.state.pixivJson.body.pageCount && this.$store.state.pixivJson.body.pageCount > 1);
          },
          isUgoira:function(){
              return this.$store.state.pixivJson.body.illustType === 2
          },
          containerStyle: function () {
             const  scroll = (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop;
              return {
                  zIndex: 10000,
                  position: 'relative',
                 display: 'block',
                  top: `${scroll+window.innerHeight/2}px`,
                  left: `${window.innerWidth/2}px`,
                  transform:  'translate(-50%,-50%)',
                  width: `auto` ,
                  height:`auto`,
              };
          },
      },
      mounted() {
          const store = this.$store;
          const el=this.$el;
          document.querySelectorAll('a[href*="member_illust.php?mode=medium&illust_id="]').forEach(link => {
              link.addEventListener('mouseenter', function () {
                  const clickElem = this.querySelector('.non-trim-thumb') || this;
                  clickElem.setAttribute('onclick', 'console.log();return false;');
                  if(clickElem.classList.contains('ugoku-illust')){
                      store.commit('isUgoira',true);
                  }else{
                      store.commit('isUgoira',false);
                  }
                  const url = this.getAttribute('href');
                  const matches = url.match(/(.)+illust_id=([0-9]+)(&.+)?/);
                  const preLoadID = Number(matches[2]);
                  this.illustId=preLoadID;
                  store.commit('setIllustID', preLoadID);
                  clickElem.addEventListener('click', function () {
                      el.style.top=`${window.pageYOffset+window.innerHeight/2}px`,
                       el.style.left= `${window.innerWidth/2}px`,
                      store.commit('fetchScreen');
                  });
              });
          });
      },
      destroyed: function () {
      },
      methods: {
          toggleComment: function () {
              this.$store.commit('toggleComment');
          },
          toggleCaption: function () {
              this.$store.commit('toggleCaption');
          },
          hide: function () {
              this.$store.commit('hide');
          },
      },
  };
              const __vue_script__$8 = script$8;
  var __vue_render__$8 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isVisible),expression:"isVisible"}],style:(_vm.containerStyle),attrs:{"id":"popup-outer-container"}},[(_vm.visibleCaption)?_c('Caption',{directives:[{name:"show",rawName:"v-show",value:(_vm.screenLoaded),expression:"screenLoaded"}]}):_vm._e(),_vm._v(" "),(_vm.isIllust)?_c('Illust'):(_vm.isUgoira)?_c('Ugoira',{attrs:{"visible":_vm.isVisible}}):_c('Manga'),_vm._v(" "),(_vm.visibleCommentList)?_c('CommentList',{directives:[{name:"show",rawName:"v-show",value:(_vm.screenLoaded),expression:"screenLoaded"}]}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"togglebar togglebar-horizontal is-clickable",on:{"click":_vm.toggleCaption}},[(_vm.visibleCaption)?_c('i',{staticClass:"arrow down is-clickable"}):_vm._e(),_vm._v(" "),(! _vm.visibleCaption)?_c('i',{staticClass:"arrow up is-clickable"}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"togglebar togglebar-vertical is-clickable",on:{"click":_vm.toggleComment}},[(_vm.visibleCommentList)?_c('i',{staticClass:"arrow left is-clickable"}):_vm._e(),_vm._v(" "),(! _vm.visibleCommentList)?_c('i',{staticClass:"arrow right is-clickable"}):_vm._e()])],1)};
  var __vue_staticRenderFns__$8 = [];
    const __vue_inject_styles__$8 = function (inject) {
      if (!inject) return
      inject("data-v-5ca070d4_0", { source: "\n.arrow[data-v-5ca070d4]{position:absolute;z-index:10002;border:solid #c1c1c1;border-width:0 3px 3px 0;display:inline-block;padding:3px;top:50%;left:50%;cursor:pointer\n}\n.right[data-v-5ca070d4]{left:-1px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)\n}\n.left[data-v-5ca070d4]{left:1px;transform:rotate(135deg);-webkit-transform:rotate(135deg)\n}\n.up[data-v-5ca070d4]{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)\n}\n.down[data-v-5ca070d4]{top:0;transform:rotate(45deg);-webkit-transform:rotate(45deg)\n}\n.togglebar[data-v-5ca070d4]{position:absolute;border-radius:10px 10px 10px 10px;border:1px solid #d4d4d4;cursor:pointer;z-index:10001;background-color:#f8f8f8\n}\n.togglebar-horizontal[data-v-5ca070d4]{width:100px;height:10px;left:50%;transform:translate(-50%,0)\n}\n.togglebar-vertical[data-v-5ca070d4]{width:10px;height:100px;top:50%;right:0;transform:translate(0,-50%)\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$8 = "data-v-5ca070d4";
    const __vue_module_identifier__$8 = undefined;
    const __vue_is_functional_template__$8 = false;
    function __vue_normalize__$8(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "App.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$8() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$8.styles || (__vue_create_injector__$8.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var App = __vue_normalize__$8(
      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
      __vue_inject_styles__$8,
      __vue_script__$8,
      __vue_scope_id__$8,
      __vue_is_functional_template__$8,
      __vue_module_identifier__$8,
      __vue_create_injector__$8,
      undefined
    );
  var script$9 = {
      name: "FontAwesome",
      props: {
          icon: {
              default: 'cog',
              type: String,
          },
      },
  };
              const __vue_script__$9 = script$9;
  var __vue_render__$9 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.icon === 'cog')?_c('svg',{staticClass:"svg-inline--fa fa-cog fa-w-16",attrs:{"aria-hidden":"true","data-prefix":"fas","data-icon":"cog","role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"}},[_c('path',{attrs:{"fill":"#becad8","d":"M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"}})]):_vm._e()};
  var __vue_staticRenderFns__$9 = [];
    const __vue_inject_styles__$9 = undefined;
    const __vue_scope_id__$9 = undefined;
    const __vue_module_identifier__$9 = undefined;
    const __vue_is_functional_template__$9 = false;
    function __vue_normalize__$9(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "FontAwesome.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      return component
    }
    function __vue_create_injector__$9() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$9.styles || (__vue_create_injector__$9.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var FontAwesome = __vue_normalize__$9(
      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
      __vue_inject_styles__$9,
      __vue_script__$9,
      __vue_scope_id__$9,
      __vue_is_functional_template__$9,
      __vue_module_identifier__$9,
      __vue_create_injector__$9,
      undefined
    );
  var script$a = {
      name: 'Modal',
      data() {
          return {}
      },
      computed: {
          changeIllustPage: {
              get() {
                  return this.$store.state.enable.modifyIllustPage
              },
              set(value) {
                  this.$store.commit('setIllustPageBool', value);
              }
          },
          changeAutherPage: {
              get() {
                  return this.$store.state.enable.modifyAutherPage
              },
              set(value) {
                  this.$store.commit('setAutherPageBool', value);
              }
          },
          enablePopup: {
              get() {
                  return this.$store.state.enable.pupupScreen
              },
              set(value) {
                  this.$store.commit('setPopupBool', value);
              }
          },
          setSize:{
              get() {
                  return this.$store.state.screen.scale
              },
              set(value) {
                  this.$store.commit('setPopupScale', value);
              }
          }
      }
  };
              const __vue_script__$a = script$a;
  var __vue_render__$a = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"modal"}},[_c('div',{staticClass:"modal-mask"},[_c('div',{staticClass:"modal-wrapper ",on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }_vm.$emit('close');}}},[_c('div',{staticClass:"modal-container"},[_c('div',{staticClass:"modal-header"},[_c('h1',[_vm._v("Pixiv View Util")])]),_vm._v(" "),_c('div',{staticClass:"modal-body"},[_c('label',{staticClass:"control control-checkbox"},[_vm._v("\n                        Modify the illust page's layout\n                        "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.changeIllustPage),expression:"changeIllustPage"}],attrs:{"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.changeIllustPage)?_vm._i(_vm.changeIllustPage,null)>-1:(_vm.changeIllustPage)},on:{"change":function($event){var $$a=_vm.changeIllustPage,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.changeIllustPage=$$a.concat([$$v]));}else{$$i>-1&&(_vm.changeIllustPage=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.changeIllustPage=$$c;}}}}),_vm._v(" "),_c('div',{staticClass:"control_indicator"})]),_vm._v(" "),_c('label',{staticClass:"control control-checkbox"},[_vm._v("\n                        Modify the auhor page's layout\n                        "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.changeAutherPage),expression:"changeAutherPage"}],attrs:{"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.changeAutherPage)?_vm._i(_vm.changeAutherPage,null)>-1:(_vm.changeAutherPage)},on:{"change":function($event){var $$a=_vm.changeAutherPage,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.changeAutherPage=$$a.concat([$$v]));}else{$$i>-1&&(_vm.changeAutherPage=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.changeAutherPage=$$c;}}}}),_vm._v(" "),_c('div',{staticClass:"control_indicator"})]),_vm._v(" "),_c('label',{staticClass:"control control-checkbox"},[_vm._v("\n                        Use popup function\n                        "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.enablePopup),expression:"enablePopup"}],attrs:{"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.enablePopup)?_vm._i(_vm.enablePopup,null)>-1:(_vm.enablePopup)},on:{"change":function($event){var $$a=_vm.enablePopup,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.enablePopup=$$a.concat([$$v]));}else{$$i>-1&&(_vm.enablePopup=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.enablePopup=$$c;}}}}),_vm._v(" "),_c('div',{staticClass:"control_indicator"})]),_vm._v(" "),_c('h2',[_vm._v("Popup size (min <-> max)")]),_vm._v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.setSize),expression:"setSize"}],attrs:{"type":"range","min":"0.3","max":"1.2","step":"0.1","id":"pixiv-set-scale"},domProps:{"value":(_vm.setSize)},on:{"__r":function($event){_vm.setSize=$event.target.value;}}}),_vm._v(" "),_c('div',{staticClass:"modal-footer"},[_c('button',{staticClass:"myButton",on:{"click":function($event){_vm.$emit('close');}}},[_vm._v("\n                            OK\n                        ")])])])])])])])};
  var __vue_staticRenderFns__$a = [];
    const __vue_inject_styles__$a = function (inject) {
      if (!inject) return
      inject("data-v-2a5c3630_0", { source: "\n.modal-mask[data-v-2a5c3630]{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:table;transition:opacity .3s ease\n}\n.modal-wrapper[data-v-2a5c3630]{display:table-cell;vertical-align:middle\n}\n.modal-container[data-v-2a5c3630]{width:300px;margin:0 auto;padding:20px 30px;background-color:#fff;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.33);transition:all .3s ease;font-family:Helvetica,Arial,sans-serif\n}\n.modal-header h3[data-v-2a5c3630]{margin-top:0;color:#42b983\n}\n.modal-body[data-v-2a5c3630]{margin:20px 0\n}\n.modal-default-button[data-v-2a5c3630]{float:right\n}\n.modal-enter[data-v-2a5c3630]{opacity:0\n}\n.modal-leave-active[data-v-2a5c3630]{opacity:0\n}\n.modal-enter .modal-container[data-v-2a5c3630],.modal-leave-active .modal-container[data-v-2a5c3630]{-webkit-transform:scale(1.1);transform:scale(1.1)\n}\n.myButton[data-v-2a5c3630]{background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#7892c2),color-stop(1,#476e9e));background:-moz-linear-gradient(top,#7892c2 5%,#476e9e 100%);background:-webkit-linear-gradient(top,#7892c2 5%,#476e9e 100%);background:-o-linear-gradient(top,#7892c2 5%,#476e9e 100%);background:-ms-linear-gradient(top,#7892c2 5%,#476e9e 100%);background:linear-gradient(to bottom,#7892c2 5%,#476e9e 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e', GradientType=0);background-color:#7892c2;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #4e6096;display:inline-block;cursor:pointer;color:#fff;font-family:Arial;font-size:16px;padding:10px 20px;text-decoration:none\n}\n.myButton[data-v-2a5c3630]:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#476e9e),color-stop(1,#7892c2));background:-moz-linear-gradient(top,#476e9e 5%,#7892c2 100%);background:-webkit-linear-gradient(top,#476e9e 5%,#7892c2 100%);background:-o-linear-gradient(top,#476e9e 5%,#7892c2 100%);background:-ms-linear-gradient(top,#476e9e 5%,#7892c2 100%);background:linear-gradient(to bottom,#476e9e 5%,#7892c2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2', GradientType=0);background-color:#476e9e\n}\n.myButton[data-v-2a5c3630]:active{position:relative;top:1px\n}\ninput[type=range][data-v-2a5c3630]{height:25px;-webkit-appearance:none;margin:10px 0;width:100%\n}\ninput[type=range][data-v-2a5c3630]:focus{outline:0\n}\ninput[type=range][data-v-2a5c3630]::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #000;background:#c3d7e3;border-radius:1px;border:0 solid #000\n}\ninput[type=range][data-v-2a5c3630]::-webkit-slider-thumb{box-shadow:0 0 0 #000;border:1px solid #4e6096;height:18px;width:18px;border-radius:25px;background:#597bab;cursor:pointer;-webkit-appearance:none;margin-top:-7px\n}\ninput[type=range][data-v-2a5c3630]:focus::-webkit-slider-runnable-track{background:#c3d7e3\n}\ninput[type=range][data-v-2a5c3630]::-moz-range-track{width:100%;height:5px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #000;background:#c3d7e3;border-radius:1px;border:0 solid #000\n}\ninput[type=range][data-v-2a5c3630]::-moz-range-thumb{box-shadow:0 0 0 #000;border:1px solid #2497e3;height:18px;width:18px;border-radius:25px;background:#5c82ff;cursor:pointer\n}\ninput[type=range][data-v-2a5c3630]::-ms-track{width:100%;height:5px;cursor:pointer;animate:.2s;background:0 0;border-color:transparent;color:transparent\n}\ninput[type=range][data-v-2a5c3630]::-ms-fill-lower{background:#c3d7e3;border:0 solid #000;border-radius:2px;box-shadow:0 0 0 #000\n}\ninput[type=range][data-v-2a5c3630]::-ms-fill-upper{background:#c3d7e3;border:0 solid #000;border-radius:2px;box-shadow:0 0 0 #000\n}\ninput[type=range][data-v-2a5c3630]::-ms-thumb{margin-top:1px;box-shadow:0 0 0 #000;border:1px solid #2497e3;height:18px;width:18px;border-radius:25px;background:#5c82ff;cursor:pointer\n}\ninput[type=range][data-v-2a5c3630]:focus::-ms-fill-lower{background:#c3d7e3\n}\ninput[type=range][data-v-2a5c3630]:focus::-ms-fill-upper{background:#c3d7e3\n}\n.control[data-v-2a5c3630]{font-family:arial;display:block;position:relative;padding-left:30px;margin-bottom:5px;padding-top:2px;cursor:pointer;font-size:14px\n}\n.control input[data-v-2a5c3630]{position:absolute;z-index:-1;opacity:0\n}\n.control_indicator[data-v-2a5c3630]{position:absolute;top:2px;left:0;height:20px;width:20px;background:#e6e6e6;border:0 solid #000\n}\n.control-radio .control_indicator[data-v-2a5c3630]{border-radius:undefined%\n}\n.control input:focus~.control_indicator[data-v-2a5c3630],.control:hover input~.control_indicator[data-v-2a5c3630]{background:#ccc\n}\n.control input:checked~.control_indicator[data-v-2a5c3630]{background:#597caf\n}\n.control input:checked:focus~.control_indicator[data-v-2a5c3630],.control:hover input:not([disabled]):checked~.control_indicator[data-v-2a5c3630]{background:#0e6647d\n}\n.control input:disabled~.control_indicator[data-v-2a5c3630]{background:#e6e6e6;opacity:.6;pointer-events:none\n}\n.control_indicator[data-v-2a5c3630]:after{box-sizing:unset;content:'';position:absolute;display:none\n}\n.control input:checked~.control_indicator[data-v-2a5c3630]:after{display:block\n}\n.control-checkbox .control_indicator[data-v-2a5c3630]:after{left:8px;top:4px;width:3px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)\n}\n.control-checkbox input:disabled~.control_indicator[data-v-2a5c3630]:after{border-color:#7b7b7b\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$a = "data-v-2a5c3630";
    const __vue_module_identifier__$a = undefined;
    const __vue_is_functional_template__$a = false;
    function __vue_normalize__$a(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "Modal.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$a() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$a.styles || (__vue_create_injector__$a.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var modal = __vue_normalize__$a(
      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
      __vue_inject_styles__$a,
      __vue_script__$a,
      __vue_scope_id__$a,
      __vue_is_functional_template__$a,
      __vue_module_identifier__$a,
      __vue_create_injector__$a,
      undefined
    );
  var script$b = {
      name: "Cog",
      components: {
          FontAwesome,
          modal
      },
      data() {
          return {
              showModal: false
          }
      },
      methods: {
          toggleModal() {
              if (this.showModal) {
                  this.showModal = false;
                  this.save();
              } else {
                  this.showModal = true;
              }
          },
          save(){
              const util=new Util();
              const obj = {
                  changeIllustPageLayout: this.$store.state.enable.modifyIllustPage,
                  changeMemberPageLayout: this.$store.state.enable.modifyAutherPage,
                  openComment: true,
                  usePopup: this.$store.state.enable.pupupScreen,
                  popupCaption:true,
                  popupComment:true,
                  popupScale: this.$store.state.screen.scale
              };
              util.saveGmData(obj);
          }
      }
  };
              const __vue_script__$b = script$b;
  var __vue_render__$b = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popup-cog"}},[_c('div',{staticClass:"icon",on:{"click":_vm.toggleModal}},[_c('FontAwesome',{staticStyle:{"margin":"auto"},attrs:{"icon":'cog'}})],1),_vm._v(" "),(_vm.showModal)?_c('modal',{on:{"close":_vm.toggleModal}}):_vm._e()],1)};
  var __vue_staticRenderFns__$b = [];
    const __vue_inject_styles__$b = function (inject) {
      if (!inject) return
      inject("data-v-1eb98629_0", { source: "\n.icon[data-v-1eb98629]{width:24px;height:24px;position:relative;cursor:pointer\n}", map: undefined, media: undefined });
    };
    const __vue_scope_id__$b = "data-v-1eb98629";
    const __vue_module_identifier__$b = undefined;
    const __vue_is_functional_template__$b = false;
    function __vue_normalize__$b(
      template, style, script,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      const component = (typeof script === 'function' ? script.options : script) || {};
      component.__file = "Cog.vue";
      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;
        if (functional) component.functional = true;
      }
      component._scopeId = scope;
      {
        let hook;
        if (style) {
          hook = function(context) {
            style.call(this, createInjector(context));
          };
        }
        if (hook !== undefined) {
          if (component.functional) {
            const originalRender = component.render;
            component.render = function renderWithStyleInjection(h, context) {
              hook.call(context);
              return originalRender(h, context)
            };
          } else {
            const existing = component.beforeCreate;
            component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
          }
        }
      }
      return component
    }
    function __vue_create_injector__$b() {
      const head = document.head || document.getElementsByTagName('head')[0];
      const styles = __vue_create_injector__$b.styles || (__vue_create_injector__$b.styles = {});
      const isOldIE =
        typeof navigator !== 'undefined' &&
        /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
      return function addStyle(id, css) {
        if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return
        const group = isOldIE ? css.media || 'default' : id;
        const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
        if (!style.ids.includes(id)) {
          let code = css.source;
          let index = style.ids.length;
          style.ids.push(id);
          if (css.map) {
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            code +=
              '\n/*# sourceMappingURL=data:application/json;base64,' +
              btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
              ' */';
          }
          if (isOldIE) {
            style.element = style.element || document.querySelector('style[data-group=' + group + ']');
          }
          if (!style.element) {
            const el = style.element = document.createElement('style');
            el.type = 'text/css';
            if (css.media) el.setAttribute('media', css.media);
            if (isOldIE) {
              el.setAttribute('data-group', group);
              el.setAttribute('data-next-index', '0');
            }
            head.appendChild(el);
          }
          if (isOldIE) {
            index = parseInt(style.element.getAttribute('data-next-index'));
            style.element.setAttribute('data-next-index', index + 1);
          }
          if (style.element.styleSheet) {
            style.parts.push(code);
            style.element.styleSheet.cssText = style.parts
              .filter(Boolean)
              .join('\n');
          } else {
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index]) style.element.removeChild(nodes[index]);
            if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
            else style.element.appendChild(textNode);
          }
        }
      }
    }
    var Cog = __vue_normalize__$b(
      { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
      __vue_inject_styles__$b,
      __vue_script__$b,
      __vue_scope_id__$b,
      __vue_is_functional_template__$b,
      __vue_module_identifier__$b,
      __vue_create_injector__$b,
      undefined
    );
  Vue.use(Vuex);
  const artworkType = {
      illust: Symbol('illust'),
      manga: Symbol('manga'),
      ugoira: Symbol('ugoira'),
  };
  const illustData = {
      imgUrl: '',
  };
  const mangaData = {
      page: 0,
      imgUrl: [],
  };
  const state = {
      illustID: 0,
      isUgoira: false,
      enable:{
          modifyIllustPage: true,
          modifyAutherPage: true,
          pupupScreen: true,
      },
      screen: {
          id: 'popup-outer-container',
          elem: {clientWidth: 1000, clientHeight: 1000},
          isVisible: false,
          isLoaded: false,
          top: '50%',
          left: '50%',
          scale: 0.8,
          width: window.innerWidth,
          height: window.innerHeight,
          transform: 'translate(-50%,-70%)',
          dragging: false,
      },
      caption: {
          isVisible: true,
          height: 100,
      },
      comment: {
          isVisible: true,
      },
      preload: {
          pixivJson: basicResponse,
          commentJson: commentResponse,
          ugoiraJson: ugoiraResponse,
          artworktype: artworkType.illust,
          illustData: illustData,
          mangaData: mangaData,
      },
      pixivJson: basicResponse,
      commentJson: commentResponse,
      ugoiraJson: ugoiraResponse,
      artworktype: artworkType.illust,
      illustData: illustData,
      mangaData: mangaData,
  };
  const actions = {};
  const getters = {};
  const mutations = {
          async setIllustID(state, id) {
              state.illustID = id;
              state.preload.pixivJson = await fetch(`https://www.pixiv.net/ajax/illust/${id}`,
                  {
                      method: 'GET',
                      mode: 'cors',
                      keepalive: true,
                  },
              ).then(function (response) {
                  if (response.ok) {
                      return response.json();
                  }
              }).then(json => {
                  return new PixivJson$2(json);
              });
              if (state.comment.isVisible) {
                  const url = `https://www.pixiv.net/ajax/illusts/comments/roots?illust_id=${id}&offset=${0}&limit=${100}`;
                  state.preload.commentJson = await fetch(url,
                      {
                          method: 'GET',
                          mode: 'cors',
                          keepalive: true
                      }).then(function (response) {
                      if (response.ok) {
                          return response.json();
                      }
                  }).then((json) => {
                      return new PixivJson$2(json);
                  });
              }
              if (state.isUgoira) {
                  const url = `https://www.pixiv.net/ajax/illust/${id}/ugoira_meta`;
                  state.preload.ugoiraJson = await fetch(url,
                      {
                          method: 'GET',
                          mode: 'cors',
                          keepalive: true
                      }).then(function (response) {
                      if (response.ok) {
                          return response.json();
                      }
                  }).then((json) => {
                      return new PixivJson$2(json);
                  });
              }
          },
          setScreen(state, elem) {
              state.screen.elem = elem;
          }
          ,
          screenTop() {
              return state.screen.top
          }
          ,
          screenHeight(state, sHeight) {
              state.screen.height = sHeight;
          },
          screenWidth(state, sWidth) {
              state.screen.width = Math.floor(sWidth);
          },
          captionHeight(state, height) {
              state.caption.height = height;
          },
          screenLoaded(state) {
              state.screen.isLoaded = true;
          },
          isUgoira(state, bool) {
              state.isUgoira = bool;
          },
          fetchScreen(state) {
              state.pixivJson = JSON.parse(JSON.stringify(state.preload.pixivJson));
              state.commentJson = JSON.parse(JSON.stringify(state.preload.commentJson));
              state.ugoiraJson = JSON.parse(JSON.stringify(state.preload.ugoiraJson));
              state.artworktype = state.preload.artworktype;
              state.screen.isVisible = true;
              state.screen.left = '50%';
              state.screen.top = '50%';
          }
          ,
          showScreen(state) {
              state.screen.isVisible = true;
              state.screen.left = '50%';
              state.screen.top = '50%';
          }
          ,
          hide(state) {
              state.screen.isVisible = false;
              state.screen.isLoaded = false;
          }
          ,
          setIllustPageBool(state, value) {
              state.enable.modifyIllustPage = value;
          },
          setAutherPageBool(state, value) {
              state.enable.modifyAutherPage = value;
          },
          setPopupBool(state, value) {
              state.enable.pupupScreen = value;
          },
          setPopupScale(state, value) {
              state.screen.scale = value;
          },
          toggleCaption(state){
            state.caption.isVisible = !state.caption.isVisible;
          },
      toggleComment(state){
          state.comment.isVisible = !state.comment.isVisible;
      }
      }
  ;
  const store = new Vuex.Store({
      state,
      getters,
      actions,
      mutations,
  });
  class PixivJson$2 {
      constructor(json) {
          Object.assign(this, json);
      }
  }
  const util = new Util();
  util.loadGmData(store);
  Vue.config.productionTip = true;
  Vue.directive('draggable', {
      store: store,
      bind: function (el) {
          el.style.position = 'absolute';
          let startX, startY, initialMouseX, initialMouseY;
          function mousemove(e) {
              let dx = e.clientX - initialMouseX;
              var dy = e.clientY - initialMouseY;
              el.style.top = startY + dy + 'px';
              el.style.left = startX + dx + 'px';
              store.state.screen.dragging = true;
              return false;
          }
          function mouseup(e) {
              document.removeEventListener('mousemove', mousemove);
              document.removeEventListener('mouseup', mouseup);
              if (store.state.screen.dragging || e.target.classList.contains('is-clickable')) {
                  store.state.screen.isVisible = true;
              } else {
                  store.state.screen.isVisible = false;
              }
              return false;
          }
          el.addEventListener('mousedown', function (e) {
              startX = el.offsetLeft;
              startY = el.offsetTop;
              initialMouseX = e.clientX;
              initialMouseY = e.clientY;
              store.state.screen.dragging = false;
              document.addEventListener('mousemove', mousemove);
              document.addEventListener('mouseup', mouseup);
              return false;
          });
      },
  });
  window.onload = () => {
      util.onloadExecute(store, document.URL);
      const links = document.getElementsByTagName('a');
      for (const link of links) {
          link.addEventListener('click', () => {
              util.onloadExecute(store, document.URL);
          });
      }
      const cogID = 'popup-cog';
      const notification = document.getElementsByClassName('notifications');
      if (notification !== null && notification.length > 0 && document.getElementById('cogID') === null) {
          const _li = document.createElement('li');
          const div = document.createElement('div');
          div.id = cogID;
          notification[0].appendChild(_li);
          _li.appendChild(div);
          const cog = new Vue({
              store: store,
              el: `#popup-cog`,
              components: {
                  Cog,
                  modal
              },
              template: '<Cog/>',
          });
      }
      const outerContainerID = 'popup-outer-container';
      if (document.getElementById(outerContainerID) === null) {
          const container = document.createElement('div');
          container.id = outerContainerID;
          document.body.appendChild(container);
          const app = new Vue({
              store: store,
              el: `#popup-outer-container`,
              components: {
                  App,
              },
              template: '<App v-draggable/>',
          });
      }
  };

}(Vue,Vuex));

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址