Setting:
`;
this.bookmarkIcon = ``;
this.viewIcon = `
`;
//各種elementに使用するID
this.innerContainerID = 'popup-inner-container';
this.outerContainerID = 'popup-outer-container';
this.imgContainerID = 'popup-img';
this.mangaContainerID = 'popup-manga';
this.ugoiraContainerID = 'popup-ugoira';
this.captionContainerID = 'popup-caption-container';
this.descriptionID = 'popup-caption-text';
this.captionTagID = 'popup-caption-tag';
this.captionDateID = 'popup-caption-date';
this.captionLikeID = 'popup-caption-like';
this.captionBookmarkID = 'popup-caption-bookmark';
this.captionViewID = 'popup-caption-view';
this.captionInfoID = 'popup-caption-infomation';
this.popupClass = 'popup-util';
//各種elementのcss
this.mangaContainerCSS = ` background-color:black;
overflow-x:auto;
white-space:nowrap;
width: auto;
height:auto;
left: 0;
top: 0;
`;
this.infoContainerCSS = `
background-color:white;
font-size:xx-small;
float:left;
color:rgb(173, 173, 173);
line-height=1;`;
this.imgContainerCSS = `width: 100%;
height:100%;
left: 0;
top: 0;
background-size: contain;
background-position:center;
background-repeat:no-repeat;
`;
this.descriptionContainerCSS = `font-size: normal;
width: auto;
overflow-y:scroll;
line-height=1;`;
}
pixpediaCSS(innerContainer) {
return `
white-space:pre-wrap;
font-size:small;
z-index:10001;
position:relative;
border: 1px solid black;
max-width:${innerContainer.clientWidth + 10}px;
background-color:white;
word-wrap:break-word;
word-break:break-all;
left:auto;
width:auto;
`;
}
/**
* イラストをポップアップする
* 外枠であるinnerContainerに、その他情報を元に画像elementをはめ込む
*
* @param page
* @param innerContainer
* @param elem
* @param json
*/
preloadImg(page, outerContainer, elem, json) {
const innerContainer = document.getElementById(this.innerContainerID);
//中身を綺麗にする
innerContainer.innerHTML = '';
const factory = new ContainerFactory_1.ContainerFactory();
const imgElement = factory.setId(this.imgContainerID)
.setClass(this.popupClass)
.setCSS(this.imgContainerCSS)
.createDiv();
innerContainer.appendChild(imgElement);
// imgElement.src = this.getImgUrl(json)
imgElement.style.backgroundImage = `url(${json.body.urls.regular})`;
if ($(elem).hasClass("on")) {
innerContainer.style.border = '5px solid rgb(255, 64, 96)';
// $(innerContainer).css("background", "rgb(255, 64, 96)");
}
else {
innerContainer.style.border = '5px solid rgb(34, 34, 34)';
//$(innerContainer).css("background", "rgb(34, 34, 34)");
}
//大きすぎる場合はリサイズする
const resize = this.resize(json.body.width, json.body.height);
let imgHeight = resize.height;
let imgWidth = resize.width;
outerContainer.style.width = `${imgWidth}px`;
outerContainer.style.height = `${imgHeight}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) };
}
/**
* キャプションをポップアップする
* テキスト、タグ、その他情報(ブックマーク等)を,それぞれelementを用意しコンテナとして箱詰めし、innerContainerに付与する
* @param innerContainer
* @param json
*/
preloadCaption(outerContainer, json) {
const captionContainer = document.getElementById(this.captionContainerID);
const innerContainer = document.getElementById(this.innerContainerID);
//既存のキャプションコンテナがあれば破棄
captionContainer.innerText = '';
//テキストコンテナを作成
const factory = new ContainerFactory_1.ContainerFactory();
const descriptionElem = factory.setId(this.descriptionID)
.setClass(this.popupClass)
.setCSS(this.descriptionContainerCSS)
.setInnerHtml(json.body.description)
.createDiv();
const tagElem = factory.setId(this.captionTagID)
.setClass(this.popupClass)
.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.popupClass).setInnerHtml(likeString).createSpan();
//ブックマーク数
const bookmarkString = `${this.bookmarkIcon} ${json.body.bookmarkCount} `;
const bookmarkElem = factory.setId(this.captionBookmarkID).setClass(this.popupClass).setInnerHtml(bookmarkString).createSpan();
//閲覧数
const viewString = `${this.viewIcon}${json.body.viewCount}`;
const viewElem = factory.setId(this.captionViewID).setClass(this.popupClass).setInnerHtml(viewString).createSpan();
//infoコンテナに各elementを詰める
const infoElem = factory
.setId(this.captionInfoID)
.setClass(this.popupClass)
.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);
/*
//表示位置を調整
captionContainer.style.top = `${-captionContainer.getBoundingClientRect().height}px`;
captionContainer.style.width = outerContainer.style.width;
//表示位置を調整
const offset = this.getOffset(outerContainer)
outerContainer.style.top = offset.top + 'px'
outerContainer.style.left = offset.left + 'px'
*/
}
/**
* タグ情報を格納したHTMLelementを作成する
*/
getTagHtml(json) {
let outerTagElem = document.createElement('ul');
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;
}
/**
* elementを削除する
* @param id
*/
/*
private deleteElementById(id: string) {
const elem = document.getElementById(id)
if (elem != null) {
elem.parentNode.removeChild(elem);
}
}
*/
/**
* 漫画をポップアップする
* @param innerContainer
* @param hrefElem
* @param json
* @param count
*/
preloadManga(outerContainer, hrefElem, json, count) {
const innerContainer = document.getElementById(this.innerContainerID);
//中身を綺麗にする
innerContainer.innerHTML = '';
const factory = new ContainerFactory_1.ContainerFactory();
const mangaContainer = factory.setId(this.mangaContainerID)
.setClass(this.popupClass)
.setCSS(this.mangaContainerCSS)
.createDiv();
innerContainer.appendChild(mangaContainer);
const manga = new manga_1.Manga();
if ($(hrefElem).hasClass("on")) {
$(innerContainer).css("background", "rgb(255, 64, 96)");
}
else {
$(innerContainer).css("background", "rgb(34, 34, 34)");
}
//各ページをセット
this.imgsArrInit(innerContainer, mangaContainer, manga, this.getImgUrl(json), count);
// outerContainer.style.width = innerContainer.style.maxWidth
//outerContainer.style.height = innerContainer.style.maxHeight
/*
outerContainer.style.width = innerContainer.style.maxWidth
outerContainer.style.height = innerContainer.style.maxHeight
innerContainer.style.width = innerContainer.style.maxWidth
innerContainer.style.height = innerContainer.style.maxHeight
mangaContainer.style.display = 'block';
innerContainer.style.display = 'block';
*/
//スクロールをセット
this.setScrool(innerContainer, mangaContainer, manga);
}
/**
* 画像のURLを取得
* @param json
*/
getImgUrl(json) {
//url = url.replace(/\/...x...\//, '/600x600/'); //both feed and artist works case | TODO: '1200x1200' variant
return json.body.urls.regular.replace(/\/...x...\//, '/600x600/');
}
/**
* imgエレメントの配列を作成し漫画の各ページを格納
* @param innerContainer
* @param mangaContainer
* @param manga
* @param primaryLink
* @param pageNum
*/
imgsArrInit(innerContainer, mangaContainer, manga, primaryLink, pageNum) {
manga.pageNum = pageNum;
for (let i = 0; i < pageNum; i++) {
manga.imgsArr.push(document.createElement('img'));
mangaContainer.appendChild(manga.imgsArr[i]);
manga.imgsArr[i].src = primaryLink.replace('p0', 'p' + i);
manga.imgsArr[i].style.maxWidth = innerContainer.style.maxWidth;
manga.imgsArr[i].style.maxHeight = innerContainer.style.maxHeight;
manga.imgsArr[i].style.height = innerContainer.style.maxHeight;
manga.imgsArr[i].style.width = 'auto';
}
}
/**
* mangaコンテナ上でスクロール機能を実現
* @param innerContainer
* @param mangaContainer
* @param manga
*/
setScrool(innerContainer, mangaContainer, manga) {
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 * manga.DELTASCALE; // TODO - find better value for opera/chrome
}
};
}
getHrefElement(page, ctype, elem) {
if (page.pagetype === enum_1.pagetype.member_illust) {
return $(elem).parent()[0];
}
return $(elem).parent().find('a')[0];
}
async preloadUgoira(outerContainer, hrefElem, pixivJson, ugoiraMetaJson) {
const innerContainer = document.getElementById(this.innerContainerID);
innerContainer.innerHTML = '';
let finished = false;
const factory = new ContainerFactory_1.ContainerFactory();
innerContainer.textContent = null;
const ugoiraContainer = factory
.setId(this.ugoiraContainerID)
.setClass(this.popupClass)
.createDiv();
innerContainer.appendChild(ugoiraContainer);
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_1.Ugoira();
const frames = ugoiraMetaJson.body.frames;
// const ImgElem: HTMLImageElement = document.createElement('img')
const zipData = await fetch(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) {
ugoira.pushFrame(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) {
ugoira.pushImgString(`data:image/jpeg;base64,${content}`);
}, function error(e) {
console.log("download error.");
});
}
}).then(() => {
//innerContainer.appendChild(ImgElem);
const canvas = document.createElement('canvas');
const size = this.resize(pixivJson.body.width, pixivJson.body.height);
canvas.width = size.width;
canvas.height = size.height;
outerContainer.style.width = `${size.width}px`;
outerContainer.style.height = `${size.height}px`;
innerContainer.style.width = `${size.width}px`;
innerContainer.style.height = `${size.height}px`;
ugoiraContainer.appendChild(canvas);
$(innerContainer).css("background", "rgb(34, 34, 34)");
// ugoiraContainer.style.display = 'block';
//innerContainer.style.display = 'block';
//表示位置を調整
// const captionContainer=document.getElementById(this.captionContainerID)
// captionContainer.style.width=`${size.width}px`
// captionContainer.style.top = `${-captionContainer.getBoundingClientRect().height}px`;
const frameArray = ugoira.getFrameArray;
const stringArray = ugoira.getImgStringArray;
let index = 0;
const counter = () => {
// ImgElem.src = stringArray[index]
index += 1;
index = index === stringArray.length ? 0 : index;
const img = new Image();
img.src = stringArray[index];
const context = canvas.getContext('2d');
//座標(10, 10)の位置にイメージを表示
context.drawImage(img, 0, 0, canvas.clientWidth, canvas.clientHeight);
setTimeout(counter, frameArray[index]);
};
counter();
});
}
isIllust(json) {
return json.body.illustType === 0;
}
isManga(json) {
return json.body.illustType === 1 || (json.body.pageCount && Number(json.body.pageCount) > 1);
}
isUgoira(json) {
return json.body.illustType === 2;
}
resize(width, height) {
let newHeight = height;
let newWidth = width;
if (height > window.innerHeight * 0.8 || width > window.innerWidth * 0.8) {
const heightScale = height / Number(window.innerHeight * 0.8);
const widthScale = width / Number(window.innerWidth * 0.8);
if (heightScale > widthScale) {
newHeight /= heightScale;
newWidth /= heightScale;
}
else {
newHeight /= widthScale;
newWidth /= widthScale;
}
}
return { width: Math.round(newWidth), height: Math.round(newHeight) };
}
adjustContainer() {
const innerContainer = document.getElementById(this.innerContainerID);
const outerContainer = document.getElementById(this.outerContainerID);
const captionContainer = document.getElementById(this.captionContainerID);
const descriptionContainer = document.getElementById(this.descriptionID);
const infoContainer = document.getElementById(this.captionInfoID);
captionContainer.style.width = outerContainer.style.width;
infoContainer.style.width = outerContainer.style.width;
captionContainer.style.width = outerContainer.style.width;
if (descriptionContainer.offsetHeight > 100) {
descriptionContainer.style.height = '100px';
}
//infoContainer.style.height='50px'
}
}
exports.PopupUtil = PopupUtil;
/***/ }),
/* 8 */
/***/ (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;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const page_1 = __webpack_require__(8);
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();
};
/***/ })
/******/ ]);
}
)();