Pixiv View Util

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

当前为 2018-12-06 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==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));