☰

Pixiv View Util

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

  1. // ==UserScript==
  2. // @name    Pixiv View Util
  3. // @name:en Pixiv View Util
  4. // @description    閲覧専用のユーティリティです。(1)各イラストの閲覧ページや作者ごとの画像一覧ページのレイアウトを変更します。(2)pixivサイト内でポップアップ機能を有効化します。
  5. // @description:en this is  some  utility funcitions for pixiv.(1)change the layout of illust pages and auther's pages. (2)add popup tool.
  6. // @namespace   Pixiv View Util
  7. // @version     2.2.2-20191022
  8. // @author      sotoba
  9. // @noframes
  10. // @homepageURL https://github.com/SotobatoNihu/PixivViewUtil
  11. // @license     The MIT License
  12. // @require     https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js
  13. // @require     https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js
  14. // @require     https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/8.15.0/vue-i18n.min.js
  15. // @include     https://www.pixiv.net/*
  16. // @grant       GM_getValue
  17. // @grant       GM.getValue
  18. // @grant       GM_setValue
  19. // @grant       GM.setValue
  20. // @grant       GM.getResourceUrl
  21. // @grant       GM_getResourceText
  22. // ==/UserScript==
  23.  
  24. (function (Vue, Vuex) {
  25.   'use strict';
  26.  
  27.   
  28.  
  29.   function __$styleInject( css ) {
  30.       if(!css) return ;
  31.  
  32.       if(typeof(window) == 'undefined') return ;
  33.       let style = document.createElement('style');
  34.  
  35.       style.innerHTML = css;
  36.       document.head.appendChild(style);
  37.       return css;
  38.   }
  39.  
  40.   Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
  41.   Vuex = Vuex && Vuex.hasOwnProperty('default') ? Vuex['default'] : Vuex;
  42.  
  43.   __$styleInject("\r\n");
  44.  
  45.   var script = {
  46.     name: 'PixivIcons',
  47.     props: {
  48.       icon: {
  49.         default: 'like',
  50.         type: String,
  51.       },
  52.     },
  53.   };
  54.   function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
  55.   , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
  56.     if (typeof shadowMode !== 'boolean') {
  57.       createInjectorSSR = createInjector;
  58.       createInjector = shadowMode;
  59.       shadowMode = false;
  60.     }
  61.     var options = typeof script === 'function' ? script.options : script;
  62.     if (template && template.render) {
  63.       options.render = template.render;
  64.       options.staticRenderFns = template.staticRenderFns;
  65.       options._compiled = true;
  66.       if (isFunctionalTemplate) {
  67.         options.functional = true;
  68.       }
  69.     }
  70.     if (scopeId) {
  71.       options._scopeId = scopeId;
  72.     }
  73.     var hook;
  74.     if (moduleIdentifier) {
  75.       hook = function hook(context) {
  76.         context = context ||
  77.         this.$vnode && this.$vnode.ssrContext ||
  78.         this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
  79.         if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  80.           context = __VUE_SSR_CONTEXT__;
  81.         }
  82.         if (style) {
  83.           style.call(this, createInjectorSSR(context));
  84.         }
  85.         if (context && context._registeredComponents) {
  86.           context._registeredComponents.add(moduleIdentifier);
  87.         }
  88.       };
  89.       options._ssrRegister = hook;
  90.     } else if (style) {
  91.       hook = shadowMode ? function () {
  92.         style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
  93.       } : function (context) {
  94.         style.call(this, createInjector(context));
  95.       };
  96.     }
  97.     if (hook) {
  98.       if (options.functional) {
  99.         var originalRender = options.render;
  100.         options.render = function renderWithStyleInjection(h, context) {
  101.           hook.call(context);
  102.           return originalRender(h, context);
  103.         };
  104.       } else {
  105.         var existing = options.beforeCreate;
  106.         options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
  107.       }
  108.     }
  109.     return script;
  110.   }
  111.   var normalizeComponent_1 = normalizeComponent;
  112.   const __vue_script__ = script;
  113.   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/e2b56a11e49a9eaaf6c26d75362bad8c.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/64a1477160859eee079f02a55ccc9de3.svg","width":"14","height":"12"}}):_vm._e()};
  114.   var __vue_staticRenderFns__ = [];
  115.     const __vue_inject_styles__ = undefined;
  116.     const __vue_scope_id__ = undefined;
  117.     const __vue_module_identifier__ = undefined;
  118.     const __vue_is_functional_template__ = false;
  119.     var PixivIcons = normalizeComponent_1(
  120.       { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
  121.       __vue_inject_styles__,
  122.       __vue_script__,
  123.       __vue_scope_id__,
  124.       __vue_is_functional_template__,
  125.       __vue_module_identifier__,
  126.       undefined,
  127.       undefined
  128.     );
  129.   var script$1 = {
  130.       name: 'Caption',
  131.       components: {
  132.           PixivIcons,
  133.       },
  134.       props: {
  135.           id: {
  136.               default: 'popup-caption',
  137.               type: String,
  138.           },
  139.       },
  140.       data() {
  141.           return {
  142.               captionWidth: 100,
  143.           };
  144.       },
  145.       computed: {
  146.           tagArray() {
  147.               const json = this.$store.state.pixivJson;
  148.               return json.body.tags.tags;
  149.           },
  150.           captionHtml() {
  151.               const json = this.$store.state.pixivJson;
  152.               return json.body.description;
  153.           },
  154.           date() {
  155.               const json = this.$store.state.pixivJson;
  156.               const date = new Date(json.body.createDate);
  157.               return `upload:${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
  158.           },
  159.           like() {
  160.               const json = this.$store.state.pixivJson;
  161.               return ` ${json.body.likeCount} `;
  162.           },
  163.           bookmark() {
  164.               const json = this.$store.state.pixivJson;
  165.               return ` ${json.body.bookmarkCount} `;
  166.           },
  167.           view() {
  168.               const json = this.$store.state.pixivJson;
  169.               return `${json.body.viewCount}`;
  170.           },
  171.           toggleCaption: function() {
  172.               this.$store.commit('toggleCaption');
  173.               return false;
  174.           },
  175.           captionStyle: function() {
  176.               return {
  177.                   width: `${this.$store.state.screen.width + 10}px`,
  178.                   height: 'auto',
  179.                   display: 'block',
  180.                   backgroundColor: 'white',
  181.                   border: '1px solid #000',
  182.               };
  183.           },
  184.       },
  185.       updated: function() {
  186.           this.$nextTick(function() {
  187.               this.$store.commit('captionHeight', this.$el.clientHeight);
  188.           });
  189.       },
  190.   };
  191.   var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
  192.   function createInjector(context) {
  193.     return function (id, style) {
  194.       return addStyle(id, style);
  195.     };
  196.   }
  197.   var HEAD;
  198.   var styles = {};
  199.   function addStyle(id, css) {
  200.     var group = isOldIE ? css.media || 'default' : id;
  201.     var style = styles[group] || (styles[group] = {
  202.       ids: new Set(),
  203.       styles: []
  204.     });
  205.     if (!style.ids.has(id)) {
  206.       style.ids.add(id);
  207.       var code = css.source;
  208.       if (css.map) {
  209.         code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
  210.         code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
  211.       }
  212.       if (!style.element) {
  213.         style.element = document.createElement('style');
  214.         style.element.type = 'text/css';
  215.         if (css.media) style.element.setAttribute('media', css.media);
  216.         if (HEAD === undefined) {
  217.           HEAD = document.head || document.getElementsByTagName('head')[0];
  218.         }
  219.         HEAD.appendChild(style.element);
  220.       }
  221.       if ('styleSheet' in style.element) {
  222.         style.styles.push(code);
  223.         style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
  224.       } else {
  225.         var index = style.ids.size - 1;
  226.         var textNode = document.createTextNode(code);
  227.         var nodes = style.element.childNodes;
  228.         if (nodes[index]) style.element.removeChild(nodes[index]);
  229.         if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
  230.       }
  231.     }
  232.   }
  233.   var browser = createInjector;
  234.   const __vue_script__$1 = script$1;
  235.   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 ]})])])}),0),_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)])])};
  236.   var __vue_staticRenderFns__$1 = [];
  237.     const __vue_inject_styles__$1 = function (inject) {
  238.       if (!inject) return
  239.       inject("data-v-75b42063_0", { source: ".description[data-v-75b42063]{white-space:pre-line;z-index:10001;word-wrap:break-word;width:auto;height:70%;max-height:70%;overflow-y:scroll;scrollbar-width:thin}.appendum[data-v-75b42063]{width:auto;height:auto;max-height:30%;overflow-y:scroll}.information[data-v-75b42063]{background-color:#fff;font-size:x-small;width:auto;height:auto;max-height:20%;color:#999;line-height:1}.pixpedia-icon[data-v-75b42063]{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}.pixpedia-no-icon[data-v-75b42063]{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}", map: undefined, media: undefined });
  240.     };
  241.     const __vue_scope_id__$1 = "data-v-75b42063";
  242.     const __vue_module_identifier__$1 = undefined;
  243.     const __vue_is_functional_template__$1 = false;
  244.     var Caption = normalizeComponent_1(
  245.       { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
  246.       __vue_inject_styles__$1,
  247.       __vue_script__$1,
  248.       __vue_scope_id__$1,
  249.       __vue_is_functional_template__$1,
  250.       __vue_module_identifier__$1,
  251.       browser,
  252.       undefined
  253.     );
  254.   var script$2 = {
  255.       name: 'Screen',
  256.       props: {
  257.           id: 'popup-screen',
  258.       },
  259.       data() {
  260.           return {
  261.               width: 1000,
  262.               height: 1000,
  263.           };
  264.       },
  265.       computed: {
  266.           screenImg: function() {
  267.               return this.$store.state.pixivJson.body.urls.regular;
  268.           },
  269.           getSize: function() {
  270.               const imgWidth = this.$store.state.pixivJson.body.width;
  271.               const imgHeight = this.$store.state.pixivJson.body.height;
  272.               const wscale = (window.innerWidth * this.$store.state.screen.scale) / imgWidth;
  273.               const hscale = (window.innerHeight * this.$store.state.screen.scale) / imgHeight;
  274.               const scale = wscale < hscale ? wscale : hscale;
  275.               const _height = imgHeight * scale;
  276.               const _width = imgWidth * scale;
  277.               this.$store.commit('screenWidth', _width);
  278.               this.$store.commit('screenHeight', _height );
  279.               return { height: _height, width: _width };
  280.           },
  281.           imgStyle: function() {
  282.               const size = this.getSize;
  283.               return {
  284.                   width: 'auto',
  285.                   height: 'auto',
  286.                   pointerEvents: 'none',
  287.                   maxWidth: `${size.width}px`,
  288.                   maxHeight: `${size.height}px`,
  289.               };
  290.           },
  291.           screenStyle: function() {
  292.               const size = this.getSize;
  293.               return {
  294.                   border: '5px solid black',
  295.                   backgroundColor: '#111',
  296.                   position: 'relative',
  297.                   width: 'auto',
  298.                   height: 'auto',
  299.                   maxWidth: `${size.width}px`,
  300.                   maxHeight: `${size.height}px`,
  301.                   float: 'left',
  302.                   backgroundImage: `url(${this.screenImg})`,
  303.                   backgroundSize: 'contain',
  304.                   backgroundPosition: 'center',
  305.                   backgroundRepeat: 'no-repeat',
  306.               };
  307.           },
  308.       },
  309.       updated() {
  310.           this.$nextTick(function() {
  311.               this.$store.commit('screenLoaded');
  312.           });
  313.       },
  314.   };
  315.   const __vue_script__$2 = script$2;
  316.   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}})])};
  317.   var __vue_staticRenderFns__$2 = [];
  318.     const __vue_inject_styles__$2 = undefined;
  319.     const __vue_scope_id__$2 = "data-v-25a9257f";
  320.     const __vue_module_identifier__$2 = undefined;
  321.     const __vue_is_functional_template__$2 = false;
  322.     var Screen = normalizeComponent_1(
  323.       { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
  324.       __vue_inject_styles__$2,
  325.       __vue_script__$2,
  326.       __vue_scope_id__$2,
  327.       __vue_is_functional_template__$2,
  328.       __vue_module_identifier__$2,
  329.       undefined,
  330.       undefined
  331.     );
  332.   var script$3 = {
  333.       name: "Illust",
  334.       mixins: [Screen],
  335.   };
  336.   const __vue_script__$3 = script$3;
  337.   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}})])};
  338.   var __vue_staticRenderFns__$3 = [];
  339.     const __vue_inject_styles__$3 = undefined;
  340.     const __vue_scope_id__$3 = "data-v-804ad3fc";
  341.     const __vue_module_identifier__$3 = undefined;
  342.     const __vue_is_functional_template__$3 = false;
  343.     var Illust = normalizeComponent_1(
  344.       { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
  345.       __vue_inject_styles__$3,
  346.       __vue_script__$3,
  347.       __vue_scope_id__$3,
  348.       __vue_is_functional_template__$3,
  349.       __vue_module_identifier__$3,
  350.       undefined,
  351.       undefined
  352.     );
  353.   var script$4 = {
  354.       name: "Manga",
  355.       mixins: [Screen],
  356.       data() {
  357.           return {
  358.               width: 1000,
  359.               height: 1000,
  360.               scrollWidth: 0,
  361.               active: false,
  362.               onmouse: false,
  363.           };
  364.       },
  365.       computed: {
  366.           ImageUrls: function() {
  367.               let imgElemArray = [];
  368.               const json = this.$store.state.pixivJson;
  369.               const firstPageURL = json.body.urls.regular.replace(/\/...x...\//, '/600x600/');
  370.               const pageNum = json.body.pageCount;
  371.               for (let i = 0; i < pageNum; i++) {
  372.                   const url = firstPageURL.replace('p0', 'p' + i);
  373.                   imgElemArray.push(url);
  374.               }
  375.               return imgElemArray;
  376.           },
  377.           getHeight: function() {
  378.               const store = this.$store;
  379.               const height = window.innerHeight * this.$store.state.screen.scale;
  380.               store.commit('screenHeight', height);
  381.               return height;
  382.           },
  383.           getWidth: function() {
  384.               const store = this.$store;
  385.               const width = window.innerWidth * this.$store.state.screen.scale;
  386.               store.commit('screenWidth', width);
  387.               return width;
  388.           },
  389.           getSize: function() {
  390.               this.height = window.innerHeight * this.$store.state.screen.scale;
  391.               this.width = window.innerWidth * this.$store.state.screen.scale;
  392.               this.$store.commit('screenWidth', this.width);
  393.               this.$store.commit('screenHeight', this.height);
  394.               return { width: this.width, height: this.height };
  395.           },
  396.           mangaStyle: function() {
  397.               const size = this.getSize;
  398.               return {
  399.                   border: '5px solid black',
  400.                   backgroundColor: '#111',
  401.                   position: 'relative',
  402.                   whiteSpace: 'nowrap',
  403.                   width: '100%',
  404.                   height: 'auto',
  405.                   maxWidth: `${size.width}px`,
  406.                   maxHeight: `${size.height + 17}px`,
  407.                   float: 'left',
  408.                   overflow: 'hidden',
  409.                   backgroundSize: 'contain',
  410.                   backgroundPosition: 'center',
  411.                   backgroundRepeat: 'no-repeat',
  412.               };
  413.           },
  414.           thumbStyle: function() {
  415.               return {
  416.                   left: `${this.scrollWidth}px`,
  417.               };
  418.           },
  419.       },
  420.       watch: {
  421.           scrollWidth: function() {
  422.               this.$refs.scrollable.scrollLeft = this.scrollWidth;
  423.           },
  424.       },
  425.       updated: {},
  426.       mounted() {
  427.           const store = this.$store;
  428.           const wrapper = this.$refs.wrapper;
  429.           let onmouse = this.onmouse;
  430.           wrapper.addEventListener('scroll', function(event) {
  431.               store.state.screen.dragging = true;
  432.               return false;
  433.           });
  434.           wrapper.addEventListener('mouseover', function(event) {
  435.               onmouse = true;
  436.           });
  437.           wrapper.addEventListener('mouseout', function(event) {
  438.               onmouse = false;
  439.           });
  440.           wrapper.addEventListener('mousemove', function(event) {
  441.               onmouse = true;
  442.           });
  443.           wrapper.addEventListener('wheel', function(event) {
  444.               onmouse = true;
  445.           });
  446.           document.addEventListener('wheel', function(event) {
  447.               if (event.target.id === 'manga__main' || onmouse) {
  448.                   event.preventDefault();
  449.                   const scrollValue = event.deltaY > 0 ? 100 : -100;
  450.                   wrapper.scrollBy(scrollValue, 0);
  451.               }
  452.           });
  453.       },
  454.       methods: {},
  455.   };
  456.   const __vue_script__$4 = script$4;
  457.   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}})}),0)])])};
  458.   var __vue_staticRenderFns__$4 = [];
  459.     const __vue_inject_styles__$4 = function (inject) {
  460.       if (!inject) return
  461.       inject("data-v-54943c6f_0", { source: ".scroll_wrapper[data-v-54943c6f]{height:calc(100% - 17px);width:100%;overflow-x:scroll;-webkit-overflow-scrolling:touch}", map: undefined, media: undefined });
  462.     };
  463.     const __vue_scope_id__$4 = "data-v-54943c6f";
  464.     const __vue_module_identifier__$4 = undefined;
  465.     const __vue_is_functional_template__$4 = false;
  466.     var Manga = normalizeComponent_1(
  467.       { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
  468.       __vue_inject_styles__$4,
  469.       __vue_script__$4,
  470.       __vue_scope_id__$4,
  471.       __vue_is_functional_template__$4,
  472.       __vue_module_identifier__$4,
  473.       browser,
  474.       undefined
  475.     );
  476.   var ZipImagePlayer = (function() {
  477.     function base64ArrayBuffer(arrayBuffer, off, byteLength) {
  478.       let base64    = '';
  479.       const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  480.       const bytes         = new Uint8Array(arrayBuffer);
  481.       const byteRemainder = byteLength % 3;
  482.       const mainLength    = off + byteLength - byteRemainder;
  483.       let a, b, c, d;
  484.       let chunk;
  485.       for (let i = off; i < mainLength; i = i + 3) {
  486.         chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
  487.         a = (chunk & 16515072) >> 18;
  488.         b = (chunk & 258048)   >> 12;
  489.         c = (chunk & 4032)     >>  6;
  490.         d = chunk & 63;
  491.         base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
  492.       }
  493.       if (byteRemainder == 1) {
  494.         chunk = bytes[mainLength];
  495.         a = (chunk & 252) >> 2;
  496.         b = (chunk & 3)   << 4;
  497.         base64 += `${encodings[a] + encodings[b]}==`;
  498.       } else if (byteRemainder == 2) {
  499.         chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
  500.         a = (chunk & 64512) >> 10;
  501.         b = (chunk & 1008)  >>  4;
  502.         c = (chunk & 15)    <<  2;
  503.         base64 += `${encodings[a] + encodings[b] + encodings[c]}=`;
  504.       }
  505.       return base64;
  506.     }
  507.     class ZipImagePlayer {
  508.       constructor(options) {
  509.         this.op = options;
  510.         this._rescale = false;
  511.         this._URL = (window.URL || window.webkitURL || window.MozURL
  512.                 || window.MSURL);
  513.         this._Blob = (window.Blob || window.WebKitBlob || window.MozBlob
  514.                 || window.MSBlob);
  515.         this._BlobBuilder = (window.BlobBuilder || window.WebKitBlobBuilder
  516.                 || window.MozBlobBuilder || window.MSBlobBuilder);
  517.         this._Uint8Array = (window.Uint8Array || window.WebKitUint8Array
  518.                 || window.MozUint8Array || window.MSUint8Array);
  519.         this._DataView = (window.DataView || window.WebKitDataView
  520.                 || window.MozDataView || window.MSDataView);
  521.         this._ArrayBuffer = (window.ArrayBuffer || window.WebKitArrayBuffer
  522.                 || window.MozArrayBuffer || window.MSArrayBuffer);
  523.         this._maxLoadAhead = 0;
  524.         if (!this._URL) {
  525.           this._debugLog("No URL support! Will use slower data: URLs.");
  526.           this._maxLoadAhead = 10;
  527.         }
  528.         if (!this._Blob) {
  529.           this._error("No Blob support");
  530.         }
  531.         if (!this._Uint8Array) {
  532.           this._error("No Uint8Array support");
  533.         }
  534.         if (!this._DataView) {
  535.           this._error("No DataView support");
  536.         }
  537.         if (!this._ArrayBuffer) {
  538.           this._error("No ArrayBuffer support");
  539.         }
  540.         this._isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
  541.         this._loadingState = 0;
  542.         this._dead = false;
  543.         this._context = options.canvas.getContext("2d");
  544.         this._files = {};
  545.         this._frameCount = this.op.metadata.frames.length;
  546.         this._trailerBytes = 30000;
  547.         this._failed = false;
  548.         this._debugLog(`Frame count: ${this._frameCount}`);
  549.         this._frame = 0;
  550.         this._loadFrame = 0;
  551.         this._frameImages = [];
  552.         this._paused = false;
  553.         this._loadTimer = null;
  554.         this._startLoad();
  555.         if (this.op.autoStart) {
  556.           this.play();
  557.         }
  558.         else {
  559.           this._paused = true;
  560.         }
  561.       }
  562.       _mkerr(msg) {
  563.         return () => {
  564.           this._error(msg);
  565.         };
  566.       }
  567.       _error(msg) {
  568.         this._failed = true;
  569.         throw Error(`ZipImagePlayer error: ${msg}`);
  570.       }
  571.       _debugLog(msg) {
  572.         if (this.op.debug) {
  573.           console.log(msg);
  574.         }
  575.       }
  576.       _load(offset, length, callback) {
  577.         const xhr = new XMLHttpRequest();
  578.         xhr.addEventListener("load", () => {
  579.           if (this._dead) {
  580.             return;
  581.           }
  582.           this._debugLog(`Load: ${offset} ${length} status=${xhr.status}`);
  583.           if (xhr.status == 200) {
  584.             this._debugLog("Range disabled or unsupported, complete load");
  585.             offset = 0;
  586.             length = xhr.response.byteLength;
  587.             this._len = length;
  588.             this._buf = xhr.response;
  589.             this._bytes = new this._Uint8Array(this._buf);
  590.           } else {
  591.             if (xhr.status != 206) {
  592.               this._error(`Unexpected HTTP status ${xhr.status}`);
  593.             }
  594.             if (xhr.response.byteLength != length) {
  595.               this._error(`Unexpected length ${xhr.response.byteLength} (expected ${length})`);
  596.             }
  597.             this._bytes.set(new this._Uint8Array(xhr.response), offset);
  598.           }
  599.           if (callback) {
  600.             callback.apply(this, [offset, length]);
  601.           }
  602.         }, false);
  603.         xhr.addEventListener("error", this._mkerr("Fetch failed"), false);
  604.         xhr.open("GET", this.op.source);
  605.         xhr.responseType = "arraybuffer";
  606.         if (offset != null && length != null) {
  607.           const end = offset + length;
  608.           xhr.setRequestHeader("Range", `bytes=${offset}-${(end - 1)}`);
  609.           if (this._isSafari) {
  610.             xhr.setRequestHeader("Cache-control", "no-cache");
  611.             xhr.setRequestHeader("If-None-Match", Math.random().toString());
  612.           }
  613.         }
  614.         xhr.send();
  615.       }
  616.       _startLoad() {
  617.         if (!this.op.source) {
  618.           this._loadNextFrame();
  619.           return;
  620.         }
  621.         fetch(this.op.source, {
  622.           method: "HEAD",
  623.         }).then(resp => {
  624.           if (this._dead) {
  625.             return;
  626.           }
  627.           this._pHead = 0;
  628.           this._pNextHead = 0;
  629.           this._pFetch = 0;
  630.           const len = parseInt(resp.headers.get("Content-Length"));
  631.           if (!len) {
  632.             this._debugLog("HEAD request failed: invalid file length.");
  633.             this._debugLog("Falling back to full file mode.");
  634.             this._load(null, null, (off, len) => {
  635.               this._pTail = 0;
  636.               this._pHead = len;
  637.               this._findCentralDirectory();
  638.             });
  639.             return;
  640.           }
  641.           this._debugLog(`Len: ${len}`);
  642.           this._len = len;
  643.           this._buf = new this._ArrayBuffer(len);
  644.           this._bytes = new this._Uint8Array(this._buf);
  645.           let off = len - this._trailerBytes;
  646.           if (off < 0) {
  647.             off = 0;
  648.           }
  649.           this._pTail = len;
  650.           this._load(off, len - off, (off) => {
  651.             this._pTail = off;
  652.             this._findCentralDirectory();
  653.           });
  654.         }).catch(this._mkerr("Length fetch failed"));
  655.       }
  656.       _findCentralDirectory() {
  657.         const dv = new this._DataView(this._buf, this._len - 22, 22);
  658.         if (dv.getUint32(0, true) != 0x06054b50) {
  659.           this._error("End of Central Directory signature not found");
  660.         }
  661.         const cd_count = dv.getUint16(10, true);
  662.         const cd_size = dv.getUint32(12, true);
  663.         const cd_off = dv.getUint32(16, true);
  664.         if (cd_off < this._pTail) {
  665.           this._load(cd_off, this._pTail - cd_off, () => {
  666.             this._pTail = cd_off;
  667.             this._readCentralDirectory(cd_off, cd_size, cd_count);
  668.           });
  669.         } else {
  670.           this._readCentralDirectory(cd_off, cd_size, cd_count);
  671.         }
  672.       }
  673.       _readCentralDirectory(offset, size, count) {
  674.         const dv = new this._DataView(this._buf, offset, size);
  675.         let p = 0;
  676.         for (let i = 0; i < count; i++ ) {
  677.           if (dv.getUint32(p, true) != 0x02014b50) {
  678.             this._error("Invalid Central Directory signature");
  679.           }
  680.           const compMethod = dv.getUint16(p + 10, true);
  681.           const uncompSize = dv.getUint32(p + 24, true);
  682.           const nameLen = dv.getUint16(p + 28, true);
  683.           const extraLen = dv.getUint16(p + 30, true);
  684.           const cmtLen = dv.getUint16(p + 32, true);
  685.           const off = dv.getUint32(p + 42, true);
  686.           if (compMethod != 0) {
  687.             this._error("Unsupported compression method");
  688.           }
  689.           p += 46;
  690.           const nameView = new this._Uint8Array(this._buf, offset + p, nameLen);
  691.           let name = "";
  692.           for (let j = 0; j < nameLen; j++) {
  693.             name += String.fromCharCode(nameView[j]);
  694.           }
  695.           p += nameLen + extraLen + cmtLen;
  696.           this._files[name] = { off: off, len: uncompSize };
  697.         }
  698.         if (this._pHead >= this._pTail) {
  699.           this._pHead = this._len;
  700.           this._loadNextFrame();
  701.         } else {
  702.           this._loadNextChunk();
  703.           this._loadNextChunk();
  704.         }
  705.       }
  706.       _loadNextChunk() {
  707.         if (this._pFetch >= this._pTail) {
  708.           return;
  709.         }
  710.         const off = this._pFetch;
  711.         let len = this.op.chunkSize;
  712.         if (this._pFetch + len > this._pTail) {
  713.           len = this._pTail - this._pFetch;
  714.         }
  715.         this._pFetch += len;
  716.         this._load(off, len, () => {
  717.           if (off == this._pHead) {
  718.             if (this._pNextHead) {
  719.               this._pHead = this._pNextHead;
  720.               this._pNextHead = 0;
  721.             } else {
  722.               this._pHead = off + len;
  723.             }
  724.             if (this._pHead >= this._pTail) {
  725.               this._pHead = this._len;
  726.             }
  727.             if (!this._loadTimer) {
  728.               this._loadNextFrame();
  729.             }
  730.           } else {
  731.             this._pNextHead = off + len;
  732.           }
  733.           this._loadNextChunk();
  734.         });
  735.       }
  736.       _fileDataStart(offset) {
  737.         const dv = new DataView(this._buf, offset, 30);
  738.         const nameLen = dv.getUint16(26, true);
  739.         const extraLen = dv.getUint16(28, true);
  740.         return offset + 30 + nameLen + extraLen;
  741.       }
  742.       _isFileAvailable(name) {
  743.         const info = this._files[name];
  744.         if (!info) {
  745.           this._error(`File ${name} not found in ZIP`);
  746.         }
  747.         if (this._pHead < (info.off + 30)) {
  748.           return false;
  749.         }
  750.         return this._pHead >= (this._fileDataStart(info.off) + info.len);
  751.       }
  752.       _loadNextFrame() {
  753.         if (this._dead) {
  754.           return;
  755.         }
  756.         const frame = this._loadFrame;
  757.         if (frame >= this._frameCount) {
  758.           return;
  759.         }
  760.         const meta = this.op.metadata.frames[frame];
  761.         if (!this.op.source) {
  762.           this._loadFrame += 1;
  763.           this._loadImage(frame, meta.file, false);
  764.           return;
  765.         }
  766.         if (!this._isFileAvailable(meta.file)) {
  767.           return;
  768.         }
  769.         this._loadFrame += 1;
  770.         const off = this._fileDataStart(this._files[meta.file].off);
  771.         const end = off + this._files[meta.file].len;
  772.         let url;
  773.         const mime_type = this.op.metadata.mime_type || "image/png";
  774.         if (this._URL) {
  775.           let slice;
  776.           if (!this._buf.slice) {
  777.             slice = new this._ArrayBuffer(this._files[meta.file].len);
  778.             const view = new this._Uint8Array(slice);
  779.             view.set(this._bytes.subarray(off, end));
  780.           } else {
  781.             slice = this._buf.slice(off, end);
  782.           }
  783.           let blob;
  784.           try {
  785.             blob = new this._Blob([slice], { type: mime_type });
  786.           }
  787.           catch (err) {
  788.             this._debugLog(`${"Blob constructor failed. Trying BlobBuilder..."
  789.                                + " ("}${err.message})`);
  790.             const bb = new this._BlobBuilder();
  791.             bb.append(slice);
  792.             blob = bb.getBlob();
  793.           }
  794.           url = this._URL.createObjectURL(blob);
  795.           this._loadImage(frame, url, true);
  796.         } else {
  797.           url = (`data:${mime_type};base64,${
  798.         base64ArrayBuffer(this._buf, off, end - off)}`);
  799.           this._loadImage(frame, url, false);
  800.         }
  801.       }
  802.       _loadImage(frame, url, isBlob) {
  803.         const image = new Image();
  804.         const meta = this.op.metadata.frames[frame];
  805.         image.addEventListener('load', () => {
  806.           this._debugLog(`Loaded ${meta.file} to frame ${frame}`);
  807.           if (isBlob) {
  808.             this._URL.revokeObjectURL(url);
  809.           }
  810.           if (this._dead) {
  811.             return;
  812.           }
  813.           this._frameImages[frame] = image;
  814.           if (this._loadingState == 0) {
  815.             this._displayFrame.apply(this);
  816.           }
  817.           if (frame >= (this._frameCount - 1)) {
  818.             this._setLoadingState(2);
  819.             this._buf = null;
  820.             this._bytes = null;
  821.           } else {
  822.             if (!this._maxLoadAhead ||
  823.                         (frame - this._frame) < this._maxLoadAhead) {
  824.               this._loadNextFrame();
  825.             } else if (!this._loadTimer) {
  826.               this._loadTimer = setTimeout(() => {
  827.                 this._loadTimer = null;
  828.                 this._loadNextFrame();
  829.               }, 200);
  830.             }
  831.           }
  832.         });
  833.         image.src = url;
  834.       }
  835.       _setLoadingState(state) {
  836.         if (this._loadingState != state) {
  837.           this._loadingState = state;
  838.         }
  839.       }
  840.       _displayFrame() {
  841.         if (this._dead) {
  842.           return;
  843.         }
  844.         const meta = this.op.metadata.frames[this._frame];
  845.         this._debugLog(`Displaying frame: ${this._frame} ${meta.file}`);
  846.         const image = this._frameImages[this._frame];
  847.         if (!image) {
  848.           this._debugLog("Image not available!");
  849.           this._setLoadingState(0);
  850.           return;
  851.         }
  852.         if (this._loadingState != 2) {
  853.           this._setLoadingState(1);
  854.         }
  855.         if (this.op.autoscale) {
  856.           if (!this._rescale) {
  857.               this._context.canvas.width = this.op.width;
  858.               this._context.canvas.height = this.op.height;
  859.               const scale = this.op.width / image.width;
  860.               this._context.scale(scale, scale);
  861.             this._rescale = true;
  862.           }
  863.         } else  if (this.op.autosize) {
  864.           if (this._context.canvas.width != image.width || this._context.canvas.height != image.height) {
  865.             this._context.canvas.width = image.width;
  866.             this._context.canvas.height = image.height;
  867.           }
  868.         }
  869.         this._context.clearRect(0, 0, this.op.canvas.width,
  870.           this.op.canvas.height);
  871.         this._context.drawImage(image, 0, 0);
  872.         if (!this._paused) {
  873.           this._timer = setTimeout(() => {
  874.             this._timer = null;
  875.             this._nextFrame.apply(this);
  876.           }, meta.delay);
  877.         }
  878.       }
  879.       _nextFrame() {
  880.         if (this._frame >= (this._frameCount - 1)) {
  881.           if (this.op.loop) {
  882.             this._frame = 0;
  883.           } else {
  884.             this.pause();
  885.             return;
  886.           }
  887.         } else {
  888.           this._frame += 1;
  889.         }
  890.         this._displayFrame();
  891.       }
  892.       play() {
  893.         if (this._dead) {
  894.           return;
  895.         }
  896.         if (this._paused) {
  897.           this._paused = false;
  898.           this._displayFrame();
  899.         }
  900.       }
  901.       pause() {
  902.         if (this._dead) {
  903.           return;
  904.         }
  905.         if (!this._paused) {
  906.           if (this._timer) {
  907.             clearTimeout(this._timer);
  908.           }
  909.           this._paused = true;
  910.         }
  911.       }
  912.       rewind() {
  913.         if (this._dead) {
  914.           return;
  915.         }
  916.         this._frame = 0;
  917.         if (this._timer) {
  918.           clearTimeout(this._timer);
  919.         }
  920.         this._displayFrame();
  921.       }
  922.       stop() {
  923.         this._debugLog("Stopped!");
  924.         this._dead = true;
  925.         if (this._timer) {
  926.           clearTimeout(this._timer);
  927.         }
  928.         if (this._loadTimer) {
  929.           clearTimeout(this._loadTimer);
  930.         }
  931.         this._frameImages = null;
  932.         this._buf = null;
  933.         this._bytes = null;
  934.       }
  935.       getCurrentFrame() {
  936.         return this._frame;
  937.       }
  938.       getLoadedFrames() {
  939.         return this._frameImages.length;
  940.       }
  941.       getFrameCount() {
  942.         return this._frameCount;
  943.       }
  944.       hasError() {
  945.         return this._failed;
  946.       }
  947.     }
  948.     return ZipImagePlayer;
  949.   }());
  950.   var script$5 = {
  951.       name: 'Ugoira',
  952.       mixins: [Screen],
  953.       props: {
  954.           id: 'popup-screen',
  955.           visible: false,
  956.       },
  957.       data() {
  958.           return {
  959.               isVisible: this.visible,
  960.               width: 600,
  961.               height: 600,
  962.           };
  963.       },
  964.       computed: {
  965.       },
  966.       watch: {
  967.           visible: function() {
  968.               if (this.visible) {
  969.                   console.log("ugoira start!");
  970.                   const size = this.getSize;
  971.                   const screen = document.getElementById('popup-ugoira');
  972.                   if (screen) {
  973.                       screen.innerText = '';
  974.                       this.canvas = document.createElement('canvas');
  975.                       this.canvas.id = 'ugoira-canvas';
  976.                       this.canvas.style.pointerEvents = 'none';
  977.                       screen.appendChild(this.canvas);
  978.                   }
  979.                   const options = {
  980.                       canvas: this.canvas,
  981.                       metadata: this.$store.state.ugoiraJson.body,
  982.                       source: this.$store.state.ugoiraJson.body.src,
  983.                       mime_type: this.$store.state.ugoiraJson.body.mime_type,
  984.                       chunkSize: 10000,
  985.                       loop: true,
  986.                       autoStart: false,
  987.                       autoscale: true,
  988.                       width: size.width,
  989.                       height: size.height,
  990.                   };
  991.                   this.player = new ZipImagePlayer(options);
  992.                   const player = this.player;
  993.                   player.play();
  994.               } else {
  995.                   if (this.player) {
  996.                       this.player.stop();
  997.                   }
  998.                   this.canvas = null;
  999.               }
  1000.           },
  1001.       },
  1002.   };
  1003.   const __vue_script__$5 = script$5;
  1004.   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}})])};
  1005.   var __vue_staticRenderFns__$5 = [];
  1006.     const __vue_inject_styles__$5 = function (inject) {
  1007.       if (!inject) return
  1008.       inject("data-v-6d211b59_0", { source: "#ugoira-canvas[data-v-6d211b59]{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0}", map: undefined, media: undefined });
  1009.     };
  1010.     const __vue_scope_id__$5 = "data-v-6d211b59";
  1011.     const __vue_module_identifier__$5 = undefined;
  1012.     const __vue_is_functional_template__$5 = false;
  1013.     var Ugoira = normalizeComponent_1(
  1014.       { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
  1015.       __vue_inject_styles__$5,
  1016.       __vue_script__$5,
  1017.       __vue_scope_id__$5,
  1018.       __vue_is_functional_template__$5,
  1019.       __vue_module_identifier__$5,
  1020.       browser,
  1021.       undefined
  1022.     );
  1023.   let basicResponse = {
  1024.       body: {
  1025.           illustTitile: '',
  1026.           createDate: '2000-12-31T15:00:00+00:00"',
  1027.           illustType: 0,
  1028.           width: 1080,
  1029.           height: 1080,
  1030.           likeCount: 0,
  1031.           bookmarkCount: 0,
  1032.           commentCount: 0,
  1033.           pageCount: 1,
  1034.           viewCount: 0,
  1035.           urls: {
  1036.               regular: '',
  1037.           },
  1038.           tags: {
  1039.               tags: [
  1040.                   {
  1041.                       tag: "",
  1042.                       locked: false,
  1043.                       deletable: false,
  1044.                       romaji: "",
  1045.                       translation: {
  1046.                           en: "",
  1047.                       },
  1048.                   },
  1049.               ],
  1050.           },
  1051.       },
  1052.   };
  1053.   let commentResponse = {
  1054.       error: false,
  1055.       message: "",
  1056.       body: {
  1057.           comments: [
  1058.               {
  1059.                   userId: 0,
  1060.                   userName: "",
  1061.                   img: "",
  1062.                   id: "",
  1063.                   comment: "no comment",
  1064.                   stampId: null,
  1065.                   stampLink: null,
  1066.                   commentDate: "",
  1067.                   commentRootId: null,
  1068.                   commentParentId: null,
  1069.                   commentUserId: "",
  1070.                   replyToUserId: null,
  1071.                   replyToUserName: null,
  1072.                   editable: false,
  1073.                   hasReplies: false,
  1074.               }
  1075.           ],
  1076.       },
  1077.   };
  1078.   let ugoiraResponse = {
  1079.       error: false,
  1080.       message: "",
  1081.       body: {
  1082.           src: "",
  1083.           originalSrc: "",
  1084.           mime_type: "",
  1085.           frames: [
  1086.               {
  1087.                   file: "000000.jpg",
  1088.                   delay: 100
  1089.               }
  1090.           ]
  1091.       },
  1092.   };
  1093.   let commentElement = {
  1094.       userId: 0,
  1095.       userName: "",
  1096.       img: "",
  1097.       id: "",
  1098.       comment: "no comment",
  1099.       stampId: null,
  1100.       stampLink: null,
  1101.       commentDate: "",
  1102.       commentRootId: null,
  1103.       commentParentId: null,
  1104.       commentUserId: "",
  1105.       replyToUserId: null,
  1106.       replyToUserName: null,
  1107.       editable: false,
  1108.       hasReplies: false,
  1109.   };
  1110.   let emoji = {
  1111.       "(normal2)": 201,
  1112.       "(shame2)": 202,
  1113.       "(love2)": 203,
  1114.       "(interesting2)": 204,
  1115.       "(blush2)": 205,
  1116.       "(fire2)": 206,
  1117.       "(angry2)": 207,
  1118.       "(shine2)": 208,
  1119.       "(panic2)": 209,
  1120.       "(normal3)": 301,
  1121.       "(satisfaction3)": 302,
  1122.       "(surprise3)": 303,
  1123.       "(smile3)": 304,
  1124.       "(shock3)": 305,
  1125.       "(gaze3)": 306,
  1126.       "(wink3)": 307,
  1127.       "(happy3)": 308,
  1128.       "(excited3)": 309,
  1129.       "(love3)": 310,
  1130.       "(normal4)": 401,
  1131.       "(surprise4)": 402,
  1132.       "(serious4)": 403,
  1133.       "(love4)": 404,
  1134.       "(shine4)": 405,
  1135.       "(sweat4)": 406,
  1136.       "(shame4)": 407,
  1137.       "(sleep4)": 408,
  1138.       "(normal)": 101,
  1139.       "(surprise)": 102,
  1140.       "(serious)": 103,
  1141.       "(heaven)": 104,
  1142.       "(happy)": 105,
  1143.       "(excited)": 106,
  1144.       "(sing)": 107,
  1145.       "(cry)": 108,
  1146.       "(heart)": 501,
  1147.       "(teardrop)": 502,
  1148.       "(star)": 503,
  1149.   };
  1150.   var script$6 = {
  1151.       name: "Comment",
  1152.       props: {
  1153.           commentElem: commentElement,
  1154.       },
  1155.       data() {
  1156.           return {
  1157.               emoji: emoji,
  1158.           };
  1159.       },
  1160.       computed: {
  1161.           isStamp() {
  1162.               if (this.commentElem.stampId !== null) {
  1163.                   return true;
  1164.               }
  1165.               else return false;
  1166.           },
  1167.           hasReply() {
  1168.               return this.commentElem.hasReplies;
  1169.           },
  1170.           getStampUrl() {
  1171.               return `https://s.pximg.net/common/images/stamp/generated-stamps/${commentElem.stampId}_s.jpg?20180605`;
  1172.           },
  1173.           replaceAll(str, beforeStr, afterStr) {
  1174.               var reg = new RegExp(beforeStr, "g");
  1175.               return str.replace(reg, afterStr);
  1176.           },
  1177.           getComment() {
  1178.               const comment = this.commentElem.comment;
  1179.               if (comment.includes(')')) {
  1180.                   let replaceComment = comment;
  1181.                   Object.keys(emoji).forEach(function(key) {
  1182.                       const regexp = new RegExp(key, 'g');
  1183.                       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>`);
  1184.                   });
  1185.                   return replaceComment;
  1186.               } else {
  1187.                   return comment;
  1188.               }
  1189.           },
  1190.           getName() {
  1191.               return this.commentElem.userName;
  1192.           },
  1193.           getDate() {
  1194.               return this.commentElem.commentDate;
  1195.           },
  1196.           commentInfo() {
  1197.               return "hoge";
  1198.           },
  1199.       },
  1200.       methods: {},
  1201.   };
  1202.   const __vue_script__$6 = script$6;
  1203.   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))])])};
  1204.   var __vue_staticRenderFns__$6 = [];
  1205.     const __vue_inject_styles__$6 = function (inject) {
  1206.       if (!inject) return
  1207.       inject("data-v-a8c38ba4_0", { source: ".popup-comment[data-v-a8c38ba4]{background:#eee;margin:5px;margin-right:15px}img[data-v-a8c38ba4]{width:48px;height:48px}.popup-ugoira-stamp[data-v-a8c38ba4]{width:48px;height:48px;background-repeat:no-repeat;background-size:cover;border-radius:2px}.popup-comment-info[data-v-a8c38ba4]{font-size:xx-small;text-align:left;color:#999}", map: undefined, media: undefined });
  1208.     };
  1209.     const __vue_scope_id__$6 = "data-v-a8c38ba4";
  1210.     const __vue_module_identifier__$6 = undefined;
  1211.     const __vue_is_functional_template__$6 = false;
  1212.     var Comment = normalizeComponent_1(
  1213.       { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
  1214.       __vue_inject_styles__$6,
  1215.       __vue_script__$6,
  1216.       __vue_scope_id__$6,
  1217.       __vue_is_functional_template__$6,
  1218.       __vue_module_identifier__$6,
  1219.       browser,
  1220.       undefined
  1221.     );
  1222.   var script$7 = {
  1223.       name: "CommentList",
  1224.       components: {
  1225.           Comment,
  1226.       },
  1227.       props: {
  1228.           id: {
  1229.               default: 'popup-commentlist',
  1230.               type: String,
  1231.           },
  1232.       },
  1233.       data() {
  1234.           return {
  1235.               screen: document.getElementById('popup-screen'),
  1236.               comment: {
  1237.                   offset: 0,
  1238.                   max: 100,
  1239.                   hasNext: true,
  1240.               },
  1241.           };
  1242.       },
  1243.       computed: {
  1244.           commentArray() {
  1245.               const json = this.$store.state.commentJson;
  1246.               return json.body.comments;
  1247.           },
  1248.           commentListStyle: function() {
  1249.               const top = this.$store.state.caption.isVisible ? this.$store.state.caption.height : 0;
  1250.               return {
  1251.                   whiteSpace: 'pre-wrap',
  1252.                   zIndex: 10000,
  1253.                   width: `120px`,
  1254.                   height: `${this.$store.state.screen.height + 10}px`,
  1255.                   display: 'inline-block',
  1256.                   overflowY: 'scroll',
  1257.                   backgroundColor: 'white',
  1258.                   border: '1px solid #000',
  1259.                   position: 'absolute',
  1260.                   top: `${top}px`,
  1261.                   left: `${this.$store.state.screen.width + 10}px`,
  1262.                   float: 'right',
  1263.               };
  1264.           },
  1265.           offset: function() {
  1266.               if (this.screen) {
  1267.                   const clientRect = this.screen.getBoundingClientRect();
  1268.                   return {
  1269.                       top: this.screen.style.top,
  1270.                       left: clientRect.left + this.screen.clientWidth + this.screen.clientWidth,
  1271.                   };
  1272.               } else {
  1273.                   return { top: 0, left: 0 };
  1274.               }
  1275.           },
  1276.       },
  1277.       created: {},
  1278.       updated: function() {
  1279.           this.$nextTick(function() {
  1280.               this.listHeight = this.$store.state.screen.height;
  1281.           });
  1282.       },
  1283.       methods: {
  1284.           infiniteHandler($state) {
  1285.           },
  1286.       },
  1287.   };
  1288.   const __vue_script__$7 = script$7;
  1289.   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:{"comment-elem":elem}})}),1)};
  1290.   var __vue_staticRenderFns__$7 = [];
  1291.     const __vue_inject_styles__$7 = undefined;
  1292.     const __vue_scope_id__$7 = "data-v-068ba0e9";
  1293.     const __vue_module_identifier__$7 = undefined;
  1294.     const __vue_is_functional_template__$7 = false;
  1295.     var CommentList = normalizeComponent_1(
  1296.       { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
  1297.       __vue_inject_styles__$7,
  1298.       __vue_script__$7,
  1299.       __vue_scope_id__$7,
  1300.       __vue_is_functional_template__$7,
  1301.       __vue_module_identifier__$7,
  1302.       undefined,
  1303.       undefined
  1304.     );
  1305.   class PixivJson {
  1306.       constructor(json) {
  1307.           Object.assign(this, json);
  1308.       }
  1309.   }
  1310.   class Util {
  1311.       onloadExecute(store, url) {
  1312.           function changeIllustPageLayout() {
  1313.               let figures = document.getElementsByTagName('figure');
  1314.               let figcaptions = document.getElementsByTagName('figcaption');
  1315.               if (figures.length === figcaptions.length) {
  1316.                   for (let i = 0; i < figures.length; i++) {
  1317.                       figures[i].parentNode.insertBefore(figcaptions[i], figures[i]);
  1318.                   }
  1319.               }
  1320.           }
  1321.           function changeAutherPageLayout() {
  1322.               const h2Elems = document.getElementsByTagName('h2');
  1323.               if (typeof h2Elems !== 'undefined') {
  1324.                   for (const h2elem of h2Elems) {
  1325.                       if (h2elem.innerText.startsWith('イラスト') || h2elem.innerText.startsWith('作品')) {
  1326.                           const illustElem = h2elem.parentElement.parentElement;
  1327.                           const header = document.getElementsByTagName('header')[0];
  1328.                           const parent = header.parentNode;
  1329.                           parent.insertBefore(illustElem, header.nextSibling);
  1330.                           break;
  1331.                       }
  1332.                   }
  1333.               }
  1334.           }
  1335.           if (store.state.enable.modifyIllustPage && ~url.indexOf('member_illust.php?mode=medium')) {
  1336.               changeIllustPageLayout();
  1337.           } else if (store.state.enable.modifyAutherPage) {
  1338.               if (~url.indexOf('member.php?') || ~url.indexOf('member_illust.php?') || ~url.indexOf('bookmark.php?'))
  1339.                   changeAutherPageLayout();
  1340.           }
  1341.       }
  1342.       async getPixivJson(illustId) {
  1343.           await fetch(`https://www.pixiv.net/ajax/illust/${illustId}`,
  1344.               {
  1345.                   method: 'GET',
  1346.                   mode: 'cors',
  1347.                   keepalive: true,
  1348.               },
  1349.           ).then(function (response) {
  1350.               if (response.ok) {
  1351.                   return response.json();
  1352.               }
  1353.           }).then(async function (json) {
  1354.               return new PixivJson(json);
  1355.           });
  1356.       }
  1357.       async getUgoiraJson(illustId) {
  1358.           const url = `https://www.pixiv.net/ajax/illust/${illustId}/ugoira_meta`;
  1359.           await fetch(url,
  1360.               {
  1361.                   method: 'GET',
  1362.                   mode: 'cors',
  1363.                   keepalive: true,
  1364.               }).then(function (response) {
  1365.               if (response.ok) {
  1366.                   return response.json();
  1367.               }
  1368.           }).then((json) => {
  1369.               return new PixivJson(json)
  1370.           });
  1371.       }
  1372.       async loadGmData(store) {
  1373.           await GM.getValue("pixiv_viewutil_setting").then(jsonString => {
  1374.               if (jsonString !== undefined) {
  1375.                   const jsonData = JSON.parse(jsonString);
  1376.                   store.commit('setAutherPageBool', (jsonData.changeIllustPageLayout == null) ? true : jsonData.changeIllustPageLayout);
  1377.                   store.commit('setAutherPageBool', (jsonData.changeMemberPageLayout == null) ? true : jsonData.changeMemberPageLayout);
  1378.                   store.commit('setPopupBool', (jsonData.usePopup == null) ? true : jsonData.usePopup);
  1379.                   store.commit('setPopupScale', (jsonData.popupScale == null) ? 0.7 : jsonData.popupScale);
  1380.               } else {
  1381.                   store.commit('setAutherPageBool', true);
  1382.                   store.commit('setAutherPageBool', true);
  1383.                   store.commit('setPopupBool', true);
  1384.                   store.commit('setPopupScale', 0.7);
  1385.               }
  1386.           });
  1387.       }
  1388.       saveGmData(obj) {
  1389.           const jsonObj = JSON.stringify(obj);
  1390.           console.log(JSON.stringify(obj));
  1391.           GM.setValue("pixiv_viewutil_setting", jsonObj);
  1392.       }
  1393.   }
  1394.   var script$8 = {
  1395.       name: 'MainContainer',
  1396.       components: {
  1397.           Caption,
  1398.           Illust,
  1399.           Manga,
  1400.           Ugoira,
  1401.           CommentList,
  1402.       },
  1403.       data() {
  1404.           return {
  1405.               illustId: null,
  1406.           }
  1407.       },
  1408.       beforeCreate() {
  1409.       },
  1410.       computed: {
  1411.           myData: function () {
  1412.               const json = this.$store.state.pixivJson;
  1413.               return json.body.illustTitle;
  1414.           },
  1415.           isVisible: function () {
  1416.               return this.$store.state.screen.isVisible;
  1417.           },
  1418.           screenLoaded: function () {
  1419.               return this.$store.state.screen.isLoaded;
  1420.           },
  1421.           visibleCaption: function () {
  1422.               return this.$store.state.caption.isVisible;
  1423.           },
  1424.           visibleCommentList: function () {
  1425.               return this.$store.state.comment.isVisible;
  1426.           },
  1427.           isIllust: function () {
  1428.               return this.$store.state.pixivJson.body.illustType === 0 && this.$store.state.pixivJson.body.pageCount < 2
  1429.           },
  1430.           isManga: function () {
  1431.               return this.$store.state.pixivJson.body.illustType === 1 || (this.$store.state.pixivJson.body.pageCount && this.$store.state.pixivJson.body.pageCount > 1);
  1432.           },
  1433.           isUgoira: function () {
  1434.               return this.$store.state.pixivJson.body.illustType === 2
  1435.           },
  1436.           containerStyle: function () {
  1437.               const scroll = (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop;
  1438.               return {
  1439.                   zIndex: 10000,
  1440.                   position: 'relative',
  1441.                   display: 'block',
  1442.                   top: `${scroll + window.innerHeight / 2}px`,
  1443.                   left: `${window.innerWidth / 2}px`,
  1444.                   transform: 'translate(-50%,-50%)',
  1445.                   width: `auto`,
  1446.                   height: `auto`,
  1447.               };
  1448.           },
  1449.       },
  1450.       mounted() {
  1451.           const store = this.$store;
  1452.           const el = this.$el;
  1453.           document.querySelectorAll('a[href^="/artworks/"],a[href*="member_illust.php?mode=medium&illust_id="]').forEach(link => {
  1454.               link.addEventListener('mouseenter', function () {
  1455.                   const clickElem = this.querySelector('.non-trim-thumb') || this;
  1456.                   clickElem.setAttribute('onclick', 'console.log();return false;');
  1457.                   if (clickElem.classList.contains('ugoku-illust')) {
  1458.                       store.commit('isUgoira', true);
  1459.                   } else {
  1460.                       store.commit('isUgoira', false);
  1461.                   }
  1462.                   const url = this.getAttribute('href');
  1463.                   let preLoadID = null;
  1464.                   if (url.startsWith("/artworks/")) {
  1465.                       const matches = url.match(/\/artworks\/([0-9]+)/);
  1466.                       preLoadID = Number(matches[1]);
  1467.                       this.illustId = preLoadID;
  1468.                       store.commit('setIllustID', preLoadID);
  1469.                       clickElem.addEventListener('click', function () {
  1470.                           el.style.top = `${window.pageYOffset + window.innerHeight / 2}px`,
  1471.                               el.style.left = `${window.innerWidth / 2}px`,
  1472.                               store.commit('fetchScreen');
  1473.                       });
  1474.                   } else {
  1475.                       const matches = url.match(/(.)+illust_id=([0-9]+)(&.+)?/);
  1476.                       preLoadID = Number(matches[2]);
  1477.                       this.illustId = preLoadID;
  1478.                       store.commit('setIllustID', preLoadID);
  1479.                       clickElem.addEventListener('click', function () {
  1480.                           el.style.top = `${window.pageYOffset + window.innerHeight / 2}px`,
  1481.                               el.style.left = `${window.innerWidth / 2}px`,
  1482.                               store.commit('fetchScreen');
  1483.                       });
  1484.                   }
  1485.               });
  1486.           });
  1487.       },
  1488.       destroyed: function () {
  1489.       },
  1490.       methods: {
  1491.           toggleComment: function () {
  1492.               this.$store.commit('toggleComment');
  1493.           },
  1494.           toggleCaption: function () {
  1495.               this.$store.commit('toggleCaption');
  1496.           },
  1497.           hide: function () {
  1498.               this.$store.commit('hide');
  1499.           },
  1500.       },
  1501.   };
  1502.   const __vue_script__$8 = script$8;
  1503.   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)};
  1504.   var __vue_staticRenderFns__$8 = [];
  1505.     const __vue_inject_styles__$8 = function (inject) {
  1506.       if (!inject) return
  1507.       inject("data-v-70cd807a_0", { source: ".arrow[data-v-70cd807a]{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}.right[data-v-70cd807a]{left:-1px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.left[data-v-70cd807a]{left:1px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.up[data-v-70cd807a]{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.down[data-v-70cd807a]{top:0;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.togglebar[data-v-70cd807a]{position:absolute;border-radius:10px 10px 10px 10px;border:1px solid #d4d4d4;cursor:pointer;z-index:10001;background-color:#f8f8f8}.togglebar-horizontal[data-v-70cd807a]{width:100px;height:10px;left:50%;transform:translate(-50%,0)}.togglebar-vertical[data-v-70cd807a]{width:10px;height:100px;top:50%;right:0;transform:translate(0,-50%)}", map: undefined, media: undefined });
  1508.     };
  1509.     const __vue_scope_id__$8 = "data-v-70cd807a";
  1510.     const __vue_module_identifier__$8 = undefined;
  1511.     const __vue_is_functional_template__$8 = false;
  1512.     var App = normalizeComponent_1(
  1513.       { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
  1514.       __vue_inject_styles__$8,
  1515.       __vue_script__$8,
  1516.       __vue_scope_id__$8,
  1517.       __vue_is_functional_template__$8,
  1518.       __vue_module_identifier__$8,
  1519.       browser,
  1520.       undefined
  1521.     );
  1522.   var script$9 = {
  1523.       name: "FontAwesome",
  1524.       props: {
  1525.           icon: {
  1526.               default: 'cog',
  1527.               type: String,
  1528.           },
  1529.       },
  1530.   };
  1531.   const __vue_script__$9 = script$9;
  1532.   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()};
  1533.   var __vue_staticRenderFns__$9 = [];
  1534.     const __vue_inject_styles__$9 = undefined;
  1535.     const __vue_scope_id__$9 = undefined;
  1536.     const __vue_module_identifier__$9 = undefined;
  1537.     const __vue_is_functional_template__$9 = false;
  1538.     var FontAwesome = normalizeComponent_1(
  1539.       { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
  1540.       __vue_inject_styles__$9,
  1541.       __vue_script__$9,
  1542.       __vue_scope_id__$9,
  1543.       __vue_is_functional_template__$9,
  1544.       __vue_module_identifier__$9,
  1545.       undefined,
  1546.       undefined
  1547.     );
  1548.   var script$a = {
  1549.       name: 'Modal',
  1550.       data() {
  1551.           return {}
  1552.       },
  1553.       computed: {
  1554.           changeIllustPage: {
  1555.               get() {
  1556.                   return this.$store.state.enable.modifyIllustPage
  1557.               },
  1558.               set(value) {
  1559.                   this.$store.commit('setIllustPageBool', value);
  1560.               }
  1561.           },
  1562.           changeAutherPage: {
  1563.               get() {
  1564.                   return this.$store.state.enable.modifyAutherPage
  1565.               },
  1566.               set(value) {
  1567.                   this.$store.commit('setAutherPageBool', value);
  1568.               }
  1569.           },
  1570.           enablePopup: {
  1571.               get() {
  1572.                   return this.$store.state.enable.pupupScreen
  1573.               },
  1574.               set(value) {
  1575.                   this.$store.commit('setPopupBool', value);
  1576.               }
  1577.           },
  1578.           setSize:{
  1579.               get() {
  1580.                   return this.$store.state.screen.scale
  1581.               },
  1582.               set(value) {
  1583.                   this.$store.commit('setPopupScale', value);
  1584.               }
  1585.           }
  1586.       }
  1587.   };
  1588.   const __vue_script__$a = script$a;
  1589.   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; }return _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){return _vm.$emit('close')}}},[_vm._v("\n                            OK\n                        ")])])])])])])])};
  1590.   var __vue_staticRenderFns__$a = [];
  1591.     const __vue_inject_styles__$a = function (inject) {
  1592.       if (!inject) return
  1593.       inject("data-v-1193b908_0", { source: ".modal-mask[data-v-1193b908]{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}.modal-wrapper[data-v-1193b908]{display:table-cell;vertical-align:middle}.modal-container[data-v-1193b908]{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}.modal-header h3[data-v-1193b908]{margin-top:0;color:#42b983}.modal-body[data-v-1193b908]{margin:20px 0}.modal-default-button[data-v-1193b908]{float:right}.modal-enter[data-v-1193b908]{opacity:0}.modal-leave-active[data-v-1193b908]{opacity:0}.modal-enter .modal-container[data-v-1193b908],.modal-leave-active .modal-container[data-v-1193b908]{-webkit-transform:scale(1.1);transform:scale(1.1)}.myButton[data-v-1193b908]{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}.myButton[data-v-1193b908]: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}.myButton[data-v-1193b908]:active{position:relative;top:1px}input[type=range][data-v-1193b908]{height:25px;-webkit-appearance:none;margin:10px 0;width:100%}input[type=range][data-v-1193b908]:focus{outline:0}input[type=range][data-v-1193b908]::-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}input[type=range][data-v-1193b908]::-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}input[type=range][data-v-1193b908]:focus::-webkit-slider-runnable-track{background:#c3d7e3}input[type=range][data-v-1193b908]::-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}input[type=range][data-v-1193b908]::-moz-range-thumb{box-shadow:0 0 0 #000;border:1px solid #2497e3;height:18px;width:18px;border-radius:25px;background:#5c82ff;cursor:pointer}input[type=range][data-v-1193b908]::-ms-track{width:100%;height:5px;cursor:pointer;animate:.2s;background:0 0;border-color:transparent;color:transparent}input[type=range][data-v-1193b908]::-ms-fill-lower{background:#c3d7e3;border:0 solid #000;border-radius:2px;box-shadow:0 0 0 #000}input[type=range][data-v-1193b908]::-ms-fill-upper{background:#c3d7e3;border:0 solid #000;border-radius:2px;box-shadow:0 0 0 #000}input[type=range][data-v-1193b908]::-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}input[type=range][data-v-1193b908]:focus::-ms-fill-lower{background:#c3d7e3}input[type=range][data-v-1193b908]:focus::-ms-fill-upper{background:#c3d7e3}.control[data-v-1193b908]{font-family:arial;display:block;position:relative;padding-left:30px;margin-bottom:5px;padding-top:2px;cursor:pointer;font-size:14px}.control input[data-v-1193b908]{position:absolute;z-index:-1;opacity:0}.control_indicator[data-v-1193b908]{position:absolute;top:2px;left:0;height:20px;width:20px;background:#e6e6e6;border:0 solid #000}.control-radio .control_indicator[data-v-1193b908]{border-radius:undefined%}.control input:focus~.control_indicator[data-v-1193b908],.control:hover input~.control_indicator[data-v-1193b908]{background:#ccc}.control input:checked~.control_indicator[data-v-1193b908]{background:#597caf}.control input:checked:focus~.control_indicator[data-v-1193b908],.control:hover input:not([disabled]):checked~.control_indicator[data-v-1193b908]{background:#0e6647d}.control input:disabled~.control_indicator[data-v-1193b908]{background:#e6e6e6;opacity:.6;pointer-events:none}.control_indicator[data-v-1193b908]:after{box-sizing:unset;content:'';position:absolute;display:none}.control input:checked~.control_indicator[data-v-1193b908]:after{display:block}.control-checkbox .control_indicator[data-v-1193b908]:after{left:8px;top:4px;width:3px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.control-checkbox input:disabled~.control_indicator[data-v-1193b908]:after{border-color:#7b7b7b}", map: undefined, media: undefined });
  1594.     };
  1595.     const __vue_scope_id__$a = "data-v-1193b908";
  1596.     const __vue_module_identifier__$a = undefined;
  1597.     const __vue_is_functional_template__$a = false;
  1598.     var modal = normalizeComponent_1(
  1599.       { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
  1600.       __vue_inject_styles__$a,
  1601.       __vue_script__$a,
  1602.       __vue_scope_id__$a,
  1603.       __vue_is_functional_template__$a,
  1604.       __vue_module_identifier__$a,
  1605.       browser,
  1606.       undefined
  1607.     );
  1608.   var script$b = {
  1609.       name: "Cog",
  1610.       components: {
  1611.           FontAwesome,
  1612.           modal
  1613.       },
  1614.       data() {
  1615.           return {
  1616.               showModal: false
  1617.           }
  1618.       },
  1619.       methods: {
  1620.           toggleModal() {
  1621.               if (this.showModal) {
  1622.                   this.showModal = false;
  1623.                   this.save();
  1624.               } else {
  1625.                   this.showModal = true;
  1626.               }
  1627.           },
  1628.           save(){
  1629.               const util=new Util();
  1630.               const obj = {
  1631.                   changeIllustPageLayout: this.$store.state.enable.modifyIllustPage,
  1632.                   changeMemberPageLayout: this.$store.state.enable.modifyAutherPage,
  1633.                   openComment: true,
  1634.                   usePopup: this.$store.state.enable.pupupScreen,
  1635.                   popupCaption:true,
  1636.                   popupComment:true,
  1637.                   popupScale: this.$store.state.screen.scale
  1638.               };
  1639.               util.saveGmData(obj);
  1640.           }
  1641.       }
  1642.   };
  1643.   const __vue_script__$b = script$b;
  1644.   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)};
  1645.   var __vue_staticRenderFns__$b = [];
  1646.     const __vue_inject_styles__$b = function (inject) {
  1647.       if (!inject) return
  1648.       inject("data-v-1eb98629_0", { source: ".icon[data-v-1eb98629]{width:24px;height:24px;position:relative;cursor:pointer}", map: undefined, media: undefined });
  1649.     };
  1650.     const __vue_scope_id__$b = "data-v-1eb98629";
  1651.     const __vue_module_identifier__$b = undefined;
  1652.     const __vue_is_functional_template__$b = false;
  1653.     var Cog = normalizeComponent_1(
  1654.       { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
  1655.       __vue_inject_styles__$b,
  1656.       __vue_script__$b,
  1657.       __vue_scope_id__$b,
  1658.       __vue_is_functional_template__$b,
  1659.       __vue_module_identifier__$b,
  1660.       browser,
  1661.       undefined
  1662.     );
  1663.   Vue.use(Vuex);
  1664.   const artworkType = {
  1665.       illust: Symbol('illust'),
  1666.       manga: Symbol('manga'),
  1667.       ugoira: Symbol('ugoira'),
  1668.   };
  1669.   const illustData = {
  1670.       imgUrl: '',
  1671.   };
  1672.   const mangaData = {
  1673.       page: 0,
  1674.       imgUrl: [],
  1675.   };
  1676.   const state = {
  1677.       illustID: 0,
  1678.       isUgoira: false,
  1679.       enable: {
  1680.           modifyIllustPage: true,
  1681.           modifyAutherPage: true,
  1682.           pupupScreen: true,
  1683.       },
  1684.       screen: {
  1685.           id: 'popup-outer-container',
  1686.           elem: { clientWidth: 600, clientHeight: 600 },
  1687.           isVisible: false,
  1688.           isLoaded: false,
  1689.           top: '50%',
  1690.           left: '50%',
  1691.           scale: 0.8,
  1692.           width: 600,
  1693.           height: 600,
  1694.           transform: 'translate(-50%,-70%)',
  1695.           dragging: false,
  1696.       },
  1697.       caption: {
  1698.           isVisible: true,
  1699.           height: 100,
  1700.       },
  1701.       comment: {
  1702.           isVisible: true,
  1703.       },
  1704.       preload: {
  1705.           pixivJson: basicResponse,
  1706.           commentJson: commentResponse,
  1707.           ugoiraJson: ugoiraResponse,
  1708.           artworktype: artworkType.illust,
  1709.           illustData: illustData,
  1710.           mangaData: mangaData,
  1711.       },
  1712.       pixivJson: basicResponse,
  1713.       commentJson: commentResponse,
  1714.       ugoiraJson: ugoiraResponse,
  1715.       artworktype: artworkType.illust,
  1716.       illustData: illustData,
  1717.       mangaData: mangaData,
  1718.   };
  1719.   const actions = {};
  1720.   const getters = {};
  1721.   const mutations = {
  1722.           async setIllustID(state, id) {
  1723.               state.illustID = id;
  1724.               state.preload.pixivJson = await fetch(`https://www.pixiv.net/ajax/illust/${id}`,
  1725.                   {
  1726.                       method: 'GET',
  1727.                       mode: 'cors',
  1728.                       keepalive: true,
  1729.                   },
  1730.               ).then(function(response) {
  1731.                   if (response.ok) {
  1732.                       return response.json();
  1733.                   }
  1734.               }).then(json => {
  1735.                   return new PixivJson$1(json);
  1736.               });
  1737.               if (state.comment.isVisible) {
  1738.                   const url = `https://www.pixiv.net/ajax/illusts/comments/roots?illust_id=${id}&offset=${0}&limit=${100}`;
  1739.                   state.preload.commentJson = await fetch(url,
  1740.                       {
  1741.                           method: 'GET',
  1742.                           mode: 'cors',
  1743.                           keepalive: true,
  1744.                       }).then(function(response) {
  1745.                       if (response.ok) {
  1746.                           return response.json();
  1747.                       }
  1748.                   }).then((json) => {
  1749.                       return new PixivJson$1(json);
  1750.                   });
  1751.               }
  1752.               if (state.isUgoira) {
  1753.                   const url = `https://www.pixiv.net/ajax/illust/${id}/ugoira_meta`;
  1754.                   state.preload.ugoiraJson = await fetch(url,
  1755.                       {
  1756.                           method: 'GET',
  1757.                           mode: 'cors',
  1758.                           keepalive: true,
  1759.                       }).then(function(response) {
  1760.                       if (response.ok) {
  1761.                           return response.json();
  1762.                       }
  1763.                   }).then((json) => {
  1764.                       return new PixivJson$1(json);
  1765.                   });
  1766.               }
  1767.           },
  1768.           setScreen(state, elem) {
  1769.               state.screen.elem = elem;
  1770.           }
  1771.           ,
  1772.           screenTop() {
  1773.               return state.screen.top;
  1774.           }
  1775.           ,
  1776.           screenHeight(state, sHeight) {
  1777.               state.screen.height = sHeight;
  1778.               state.comment.height = sHeight + 10;
  1779.           },
  1780.           screenWidth(state, sWidth) {
  1781.               state.screen.width = sWidth;
  1782.               state.caption.width = sWidth + 10;
  1783.           },
  1784.           captionHeight(state, height) {
  1785.               state.caption.height = height;
  1786.           },
  1787.           screenLoaded(state) {
  1788.               state.screen.isLoaded = true;
  1789.           },
  1790.           isUgoira(state, bool) {
  1791.               state.isUgoira = bool;
  1792.           },
  1793.           fetchScreen(state) {
  1794.               state.pixivJson = JSON.parse(JSON.stringify(state.preload.pixivJson));
  1795.               state.commentJson = JSON.parse(JSON.stringify(state.preload.commentJson));
  1796.               state.ugoiraJson = JSON.parse(JSON.stringify(state.preload.ugoiraJson));
  1797.               state.artworktype = state.preload.artworktype;
  1798.               state.screen.isVisible = true;
  1799.               state.screen.left = '50%';
  1800.               state.screen.top = '50%';
  1801.           }
  1802.           ,
  1803.           showScreen(state) {
  1804.               state.screen.isVisible = true;
  1805.               state.screen.left = '50%';
  1806.               state.screen.top = '50%';
  1807.           }
  1808.           ,
  1809.           hide(state) {
  1810.               state.screen.isVisible = false;
  1811.               state.screen.isLoaded = false;
  1812.           }
  1813.           ,
  1814.           setIllustPageBool(state, value) {
  1815.               state.enable.modifyIllustPage = value;
  1816.           },
  1817.           setAutherPageBool(state, value) {
  1818.               state.enable.modifyAutherPage = value;
  1819.           },
  1820.           setPopupBool(state, value) {
  1821.               state.enable.pupupScreen = value;
  1822.           },
  1823.           setPopupScale(state, value) {
  1824.               state.screen.scale = value;
  1825.           },
  1826.           toggleCaption(state) {
  1827.               state.caption.isVisible = !state.caption.isVisible;
  1828.           },
  1829.           toggleComment(state) {
  1830.               state.comment.isVisible = !state.comment.isVisible;
  1831.           },
  1832.       }
  1833.   ;
  1834.   const store = new Vuex.Store({
  1835.       state,
  1836.       getters,
  1837.       actions,
  1838.       mutations,
  1839.   });
  1840.   class PixivJson$1 {
  1841.       constructor(json) {
  1842.           Object.assign(this, json);
  1843.       }
  1844.   }
  1845.   const util = new Util();
  1846.   util.loadGmData(store);
  1847.   Vue.config.productionTip = true;
  1848.   Vue.directive('draggable', {
  1849.       store: store,
  1850.       bind: function(el) {
  1851.           el.style.position = 'absolute';
  1852.           let startX, startY, initialMouseX, initialMouseY;
  1853.           function mousemove(e) {
  1854.               let dx = e.clientX - initialMouseX;
  1855.               var dy = e.clientY - initialMouseY;
  1856.               el.style.top = startY + dy + 'px';
  1857.               el.style.left = startX + dx + 'px';
  1858.               if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
  1859.                   store.state.screen.dragging = true;
  1860.               }
  1861.               return false;
  1862.           }
  1863.           function mouseup(e) {
  1864.               document.removeEventListener('mousemove', mousemove);
  1865.               document.removeEventListener('mouseup', mouseup);
  1866.               if (store.state.screen.dragging || e.target.classList.contains('is-clickable')) {
  1867.                   store.state.screen.isVisible = true;
  1868.               } else {
  1869.                   store.state.screen.isVisible = false;
  1870.               }
  1871.               store.state.screen.dragging = false;
  1872.               return false;
  1873.           }
  1874.           el.addEventListener('mousedown', function(e) {
  1875.               startX = el.offsetLeft;
  1876.               startY = el.offsetTop;
  1877.               initialMouseX = e.clientX;
  1878.               initialMouseY = e.clientY;
  1879.               store.state.screen.dragging = false;
  1880.               document.addEventListener('mousemove', mousemove);
  1881.               document.addEventListener('mouseup', mouseup);
  1882.               return false;
  1883.           });
  1884.       },
  1885.   });
  1886.   window.onload = () => {
  1887.       util.onloadExecute(store, document.URL);
  1888.       const links = document.getElementsByTagName('a');
  1889.       for (const link of links) {
  1890.           link.addEventListener('click', () => {
  1891.               util.onloadExecute(store, document.URL);
  1892.           });
  1893.       }
  1894.       const cogID = 'popup-cog';
  1895.       const notification = document.getElementsByClassName('notifications');
  1896.       if (notification !== null && notification.length > 0 && document.getElementById('cogID') === null) {
  1897.           const _li = document.createElement('li');
  1898.           const div = document.createElement('div');
  1899.           div.id = cogID;
  1900.           notification[0].appendChild(_li);
  1901.           _li.appendChild(div);
  1902.           new Vue({
  1903.               store: store,
  1904.               el: `#popup-cog`,
  1905.               components: {
  1906.                   Cog,
  1907.                   modal,
  1908.               },
  1909.               template: '<Cog/>',
  1910.           });
  1911.       }
  1912.       const outerContainerID = 'popup-outer-container';
  1913.       if (document.getElementById(outerContainerID) === null) {
  1914.           const container = document.createElement('div');
  1915.           container.id = outerContainerID;
  1916.           document.body.appendChild(container);
  1917.           new Vue({
  1918.               store: store,
  1919.               el: `#popup-outer-container`,
  1920.               components: {
  1921.                   App,
  1922.               },
  1923.               template: '<App v-draggable/>',
  1924.           });
  1925.       }
  1926.   };
  1927.  
  1928. }(Vue, Vuex));

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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