Setting:
`;
this.bookmarkIcon = ``;
this.viewIcon = `
`;
this.captionContainerCSS = `
white-space:pre-wrap;
z-index:10001;
position:relative;
width:auto;
height:auto;
max-width:${window.innerWidth}px;
max-height:${window.innerHeight}px;
background-color:white;
word-wrap:break-word;
word-break:break-all;
`;
this.descriptionContainerCSS = `font-size: normal;
width: auto;
height:auto;
overflow-y:scroll;`;
this.infoContainerCSS = `
background-color:white;
font-size:xx-small;
width: auto;
color:rgb(173, 173, 173);
line-height=1;`;
this.pixivJson = pixivJson;
}
/**
* キャプションをポップアップする
* テキスト、タグ、その他情報(ブックマーク等)を,それぞれelementを用意しコンテナとして箱詰めし、innerContainerに付与する
* @param innerContainer
* @param json
*/
popup() {
const captionContainer = this.captionContainer;
const innerContainer = this.innerContainer;
const json = this.pixivJson;
//既存のキャプションコンテナがあれば破棄
captionContainer.innerText = '';
//テキストコンテナを作成
const factory = new ContainerFactory_1.ContainerFactory();
const descriptionElem = factory.setId(this.captionDescriptionID)
.setClass(this.className)
.setCSS(this.descriptionContainerCSS)
.setInnerHtml(json.body.description)
.createDiv();
const tagElem = factory.setId(this.captionTagID)
.setClass(this.className)
.createDiv();
tagElem.appendChild(this.getTagHtml(json));
//投稿日
const date = new Date(json.body.createDate);
const dateString = `upload:${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, "0")}`;
const dateElem = factory.setId(this.captionDateID).setInnerHtml(dateString).createDiv();
//like数
const likeString = `${this.likeIcon} ${json.body.likeCount} `;
const likeElem = factory.setId(this.captionLikeID).setClass(this.className).setInnerHtml(likeString).createSpan();
//ブックマーク数
const bookmarkString = `${this.bookmarkIcon} ${json.body.bookmarkCount} `;
const bookmarkElem = factory.setId(this.captionBookmarkID).setClass(this.className).setInnerHtml(bookmarkString).createSpan();
//閲覧数
const viewString = `${this.viewIcon}${json.body.viewCount}`;
const viewElem = factory.setId(this.captionViewID).setClass(this.className).setInnerHtml(viewString).createSpan();
//infoコンテナに各elementを詰める
const infoElem = factory
.setId(this.captionInfoID)
.setClass(this.className)
.setCSS(this.infoContainerCSS)
.createDiv();
infoElem.appendChild(dateElem);
infoElem.appendChild(likeElem);
infoElem.appendChild(bookmarkElem);
infoElem.appendChild(viewElem);
//キャプション用コンテナにテキストコンテナとinfoコンテナを詰める
captionContainer.appendChild(descriptionElem);
captionContainer.appendChild(tagElem);
captionContainer.appendChild(infoElem);
this.descriptionElem = descriptionElem;
this.tagElem = tagElem;
this.infoElem = infoElem;
captionContainer.style.display = 'block';
}
/**
* タグ情報を格納したHTMLelementを作成する
*/
getTagHtml(json) {
let outerTagElem = document.createElement('ul');
// @ts-ignore
outerTagElem.style.paddingInlineStart = '0px';
//outerTagElem.setAttribute('align','left')
for (const tagJson of json.body.tags.tags) {
let iconElem = document.createElement('a');
iconElem.className = `${tagJson.romaji || tagJson.locked ? "popup-pixpedia-icon" : "popup-pixpedia-no-icon"}`;
iconElem.setAttribute('href', `https://dic.pixiv.net/a/${tagJson.tag}`);
let innerTagElem = document.createElement('li');
innerTagElem.innerHTML = ` ${tagJson.locked ? "＊" : ""}${tagJson.tag}`;
innerTagElem.style.cssText = 'display: inline-block;';
innerTagElem.appendChild(iconElem);
outerTagElem.appendChild(innerTagElem);
}
return outerTagElem;
}
setInnerContainer(innerContainer) {
this.innerContainer = innerContainer;
}
setClassName(className) {
this.className = className;
}
adjust(outerContainer) {
//画面の表示調節を行う
// const innerContainer: HTMLElement=document.getElementById(this.innerContainerID)
// const outerContainer: HTMLElement=document.getElementById(this.outerContainerID)
// const captionContainer=document.getElementById(this.captionContainerID)
/// const descriptionContainer:HTMLElement=document.getElementById(this.captionDescriptionID)
// const tagContainer:HTMLElement=document.getElementById(this.captionTagID)
// const infoContainer:HTMLElement=document.getElementById(this.captionInfoID)
if (this.descriptionElem.clientHeight > 100) {
this.descriptionElem.style.height = `${100}px`;
}
const offset = this.getOffset(outerContainer);
outerContainer.style.left = `${offset.left}px`;
outerContainer.style.top = `${offset.top}px`;
this.captionContainer.style.width = `${outerContainer.offsetWidth + 10}px`;
}
/**
* 大きさがあるHTMLelementを引数に、それが画面の中央に表示されるようになるelementのtop・leftの値を返す
* @param elem
*/
getOffset(elem) {
const w_height = $(window).height();
const w_width = $(window).width();
const el_height = $(elem).height();
const el_width = $(elem).width();
const scroll_height = $(window).scrollTop();
const position_h = scroll_height + (w_height - el_height) / 2;
const position_w = (w_width - el_width) / 2;
return { top: Math.round(position_h), left: Math.round(position_w) };
}
adjustCaption() {
}
setCaptionContainer(captionContainer) {
this.captionContainer = captionContainer;
}
}
exports.Caption = Caption;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class Frame {
constructor() {
//imageElement配列
this.imgArray = [];
//imageElementのsrc文字列の配列
this.imgStringArray = [];
//フレーム情報（ミリ秒単位の変更間隔）の配列
this.frameArray = [];
}
pushDelay(delay) {
this.frameArray.push(delay);
}
pushImgString(imgString) {
this.imgStringArray.push(imgString);
}
}
exports.Frame = Frame;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const Frame_1 = __webpack_require__(7);
const ContainerFactory_1 = __webpack_require__(0);
/**
* うごイラ管理用オブジェクト
*/
class Ugoira {
constructor(pixivJson, ugoiraMetaJson) {
this.ugoiraContainerID = 'popup-ugoira';
this.pixivJson = pixivJson;
this.ugoiraMetaJson = ugoiraMetaJson;
}
async set() {
const innerContainer = this.innerContainer;
let finished = false;
const factory = new ContainerFactory_1.ContainerFactory();
innerContainer.textContent = null;
const canvas = document.createElement('canvas');
canvas.id = this.ugoiraContainerID;
canvas.className = this.className;
this.ugoiraContainer = canvas;
innerContainer.appendChild(canvas);
let myHeaders = new Headers();
myHeaders.append("Accept-Encoding", "gzip, deflate, br");
myHeaders.append("Connection", 'keep-alive');
myHeaders.append("HOST", "www.pixiv.net");
const myInit = {
method: 'GET',
headers: myHeaders,
mode: 'same-origin',
credentials: 'same-origin',
cache: 'default'
};
// @ts-ignore
let zip = new JSZip();
//const ugoira = new Ugoira()
const frames = this.ugoiraMetaJson.body.frames;
// const ImgElem: HTMLImageElement = document.createElement('img')
const frameData = new Frame_1.Frame();
const zipData = await fetch(this.ugoiraMetaJson.body.src, {
method: 'GET',
headers: myHeaders,
mode: 'cors',
keepalive: true
}).then(response => {
if (response.ok) {
return response.blob();
}
}).then(async (zipData) => {
await zip.loadAsync(zipData, { base64: true });
}).then(async () => {
for (let frame of frames) {
frameData.pushDelay(frame.delay);
//let frameArray:number[] = Ugoira.frameArray
// frameArray.push(frame.delay)
await zip.file(frame.file)
.async("base64", function updateCallback(metadata) {
console.log("progression: " + metadata.percent.toFixed(2) + " %");
if (metadata.percent === 100) {
finished = true;
}
})
.then(function success(content) {
// pushImgString(`data:image/jpeg;base64,${content}`)
frameData.pushImgString(`data:image/jpeg;base64,${content}`);
//Ugoira.imgStringArray.push(`data:image/jpeg;base64,${content}`)
}, function error(e) {
console.log("download error.");
});
}
}).then(() => {
this.frameData = frameData;
});
}
/*
static pushImgElem(elem: HTMLImageElement) {
Util.imgArray.push(elem)
}
*/
/*
static pushImgString(s: string) {
this.imgStringArray.push(s)
}
static pushFrame(num: number) {
this.frameArray.push(num)
}
get getImgArray() {
return this.imgArray
}
static getImgStringArray() {
return this.imgStringArray
}
get getFrameArray() {
return Ugoira.frameArray
}
get getFrameNum(): number {
return Ugoira.imgArray.length
}
//フレーム情報の合計
get getIntervalSum(): number {
return Ugoira.frameArray.length > 1 ? Ugoira.frameArray.reduce((x, y) => x + y) : 0
}
*/
setInnerContainer(innerContainer) {
this.innerContainer = innerContainer;
}
/*
setClassName(className: string) {
this.ugoiraContainer.className = className
}
*/
/*
private resize(width: number, height: number,scale:number) {
let newHeight:number = height
let newWidth:number = width
if (height > window.innerHeight * scale || width > window.innerWidth * scale) {
const heightScale =height / Number(window.innerHeight * scale)
const widthScale = width / Number(window.innerWidth * scale)
if (heightScale > widthScale) {
newHeight /= heightScale
newWidth /= heightScale
} else {
newHeight /= widthScale
newWidth /=widthScale
}
}
return {width: Math.round(newWidth), height: Math.round(newHeight)}
}
*/
resize(outerContainer, scale) {
const oldWidth = this.pixivJson.body.width;
const oldHeight = this.pixivJson.body.height;
let newWidth = oldHeight;
let newHeight = oldWidth;
if (oldHeight > window.innerHeight * scale || oldWidth > window.innerWidth * scale) {
const heightScale = oldHeight / Number(window.innerHeight * scale);
const widthScale = oldWidth / Number(window.innerWidth * scale);
if (heightScale > widthScale) {
newHeight /= heightScale;
newWidth /= heightScale;
}
else {
newHeight /= widthScale;
newWidth /= widthScale;
}
}
this.ugoiraContainer.width = newWidth;
this.ugoiraContainer.height = newHeight;
outerContainer.style.width = `${Math.round(newWidth)}px`;
outerContainer.style.height = `${Math.round(newHeight)}px`;
}
popup() {
const frameArray = this.frameData.frameArray;
const stringArray = this.frameData.imgStringArray;
let index = 0;
const counter = () => {
index += 1;
index = index === stringArray.length ? 0 : index;
const img = new Image();
img.src = stringArray[index];
const context = this.ugoiraContainer.getContext('2d');
//座標(10, 10)の位置にイメージを表示
context.drawImage(img, 0, 0, this.ugoiraContainer.clientWidth, this.ugoiraContainer.clientHeight);
setTimeout(counter, frameArray[index]);
};
counter();
}
}
//imageElement配列
Ugoira.imgArray = [];
//imageElementのsrc文字列の配列
Ugoira.imgStringArray = [];
exports.Ugoira = Ugoira;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const ContainerFactory_1 = __webpack_require__(0);
/**
* html上のページごとの漫画情報を管理する
*/
class Manga {
constructor(pixivJson) {
this.mangaContainerID = 'popup-manga';
this.pageNum = 0;
//elementのcss
this.mangaContainerCSS = ` background-color:black;
overflow-x:auto;
white-space:nowrap;
width: auto;
height:auto;
left: 0;
top: 0;
`;
this.pixivJson = pixivJson;
this.pageNum = this.getPageNum(pixivJson);
this.imgArray = new Array(this.pageNum);
const factory = new ContainerFactory_1.ContainerFactory();
this.mangaContainer = factory.setId(this.mangaContainerID)
.setClass(this.className)
.setCSS(this.mangaContainerCSS)
.createDiv();
this.DELTASCALE = ('mozInnerScreenX' in window) ? 70 : 4;
}
/**
* 漫画をポップアップする
* @param innerContainer
* @param hrefElem
* @param json
* @param count
*/
popup(hasClass) {
this.innerContainer.innerHTML = '';
const firstPageURL = this.getImgUrl();
//各ページをセット
this.initImgArray(this.mangaContainer, firstPageURL);
this.innerContainer.style.backgroundColor = (hasClass) ? "rgb(255, 64, 96)" : "rgb(34, 34, 34)";
this.innerContainer.appendChild(this.mangaContainer);
this.setScrool(this.mangaContainer, this.innerContainer, this.DELTASCALE);
}
/**
* imgエレメントの配列を作成し漫画の各ページを格納
* @param innerContainer
* @param mangaContainer
* @param manga
* @param primaryLink
* @param pageNum
*/
initImgArray(mangaContainer, firstPageURL) {
for (let i = 0; i < this.pageNum; i++) {
const imgElem = document.createElement('img');
imgElem.src = firstPageURL.replace('p0', 'p' + i);
imgElem.style.maxWidth = this.innerContainer.style.maxWidth;
imgElem.style.maxHeight = this.innerContainer.style.maxHeight;
imgElem.style.height = this.innerContainer.style.maxHeight;
imgElem.style.width = 'auto';
this.imgArray.push(imgElem);
mangaContainer.appendChild(imgElem);
}
}
/**
* mangaコンテナ上でスクロール機能を実現
* @param innerContainer
* @param mangaContainer
* @param manga
*/
setScrool(mangaContainer, innerContainer, deltaScale) {
this.mangaContainer.onwheel = function (e) {
if (e.deltaY < 0 && (innerContainer.getBoundingClientRect().top < 0)) {
innerContainer.scrollIntoView({ block: "start", behavior: "smooth" }); //aligning to top screen side on scrollUp if needed
}
else if (e.deltaY > 0 && (innerContainer.getBoundingClientRect().bottom > document.documentElement.clientHeight)) {
innerContainer.scrollIntoView({ block: "end", behavior: "smooth" }); //aligning to bottom screen side on scrollDown if needed
}
let scrlLft = mangaContainer.scrollLeft;
if ((scrlLft > 0 && e.deltaY < 0) || ((scrlLft < (mangaContainer.scrollWidth - mangaContainer.clientWidth)) && e.deltaY > 0)) {
e.preventDefault();
mangaContainer.scrollLeft += e.deltaY * deltaScale; // TODO - find better value for opera/chrome
}
};
}
/**
* 画像のURLを取得
* @param json
*/
getImgUrl() {
//url = url.replace(/\/...x...\//, '/600x600/'); //both feed and artist works case | TODO: '1200x1200' variant
return this.pixivJson.body.urls.regular.replace(/\/...x...\//, '/600x600/');
}
setInnerContainer(innerContainer) {
this.innerContainer = innerContainer;
}
getPageNum(pixivJson) {
return Number(pixivJson.body.pageCount);
}
setClassName(className) {
this.mangaContainer.className = className;
}
}
exports.Manga = Manga;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const ContainerFactory_1 = __webpack_require__(0);
/**
* html上のページごとのイラスト情報を管理する
*/
class Illust {
constructor(page, innerContainer, json) {
this.illustContainerID = 'popup-img';
this.illustContainerCSS = `width: 100%;
height:100%;
display:none;
left: 0;
top: 0;
background-size: contain;
background-position:center;
background-repeat:no-repeat;
`;
this.pixivJson = json;
//中身を綺麗にする
innerContainer.innerHTML = '';
const factory = new ContainerFactory_1.ContainerFactory();
this.illustContainer = factory.setId(this.className)
.setClass(this.className)
.setCSS(this.illustContainerCSS)
.createDiv();
innerContainer.appendChild(this.illustContainer);
this.illustContainer.style.backgroundImage = `url(${json.body.urls.regular})`;
}
/**
* イラストをポップアップする
* 外枠であるinnerContainerに、その他情報を元に画像elementをはめ込む
*
* @param page
* @param innerContainer
* @param elem
* @param json
*/
popup(hasClass) {
this.innerContainer.style.backgroundColor = (hasClass) ? "rgb(255, 64, 96)" : "rgb(34, 34, 34)";
this.illustContainer.style.display = 'block';
//大きすぎる場合はリサイズする
}
resize(outerContainer, scale) {
const oldWidth = this.pixivJson.body.width;
const oldHeight = this.pixivJson.body.height;
let newWidth = oldHeight;
let newHeight = oldWidth;
if (oldHeight > window.innerHeight * scale || oldWidth > window.innerWidth * scale) {
const heightScale = oldHeight / Number(window.innerHeight * scale);
const widthScale = oldWidth / Number(window.innerWidth * scale);
if (heightScale > widthScale) {
newHeight /= heightScale;
newWidth /= heightScale;
}
else {
newHeight /= widthScale;
newWidth /= widthScale;
}
}
outerContainer.style.width = `${Math.round(newWidth)}px`;
outerContainer.style.height = `${Math.round(newHeight)}px`;
}
setInnerContainer(innerContainer) {
this.innerContainer = innerContainer;
}
getPageNum(pixivJson) {
return Number(pixivJson.body.pageCount);
}
setClassName(className) {
this.className = className;
}
}
exports.Illust = Illust;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const util_1 = __webpack_require__(3);
/**
* 現在いるページを管理するページオブジェクト
*/
class Page {
constructor(url) {
this.URL = url;
this.pagetype = util_1.Util.checkPageType(url);
this.siteImgMaxWidth = 500; //this.pagetype === prop.popup_typeA ? 200 : 150
this.alloedFunclist = util_1.Util.getAllowedFuncList(this.pagetype);
this.imgSelector = 'a[href*="member_illust.php?mode=medium&illust_id="]';
this.mangaSelector = 'a[href*="member_illust.php?mode=medium&illust_id="] > div:nth-child(2) ';
}
set setURL(url) {
this.URL = url;
this.pagetype = util_1.Util.checkPageType(url);
}
get getURL() {
return this.URL;
}
get getFunclist() {
return this.alloedFunclist;
}
isEnable(elem) {
return this.alloedFunclist.indexOf(elem) > -1;
}
get getPagetype() {
return this.pagetype;
}
}
exports.Page = Page;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const page_1 = __webpack_require__(11);
const util_1 = __webpack_require__(3);
const setting_1 = __webpack_require__(1);
'use strict';
/**
* メイン関数
*/
const page = new page_1.Page(document.URL);
const util = new util_1.Util();
const setting = new setting_1.Setting();
setting.init().then(() => {
util.initExecute(setting, page);
});
window.onload = () => {
console.log("pagetype:" + page.pagetype.toString());
//レイアウトを変更しコメントを開く
util.onloadExecute(setting, page);
const links = document.getElementsByTagName('a');
for (const link of links) {
link.addEventListener('click', () => {
util.onloadExecute(setting, new page_1.Page(document.URL));
});
}
setting.save();
};
/***/ })
/******/ ]);
}
)();