您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
「小説家になろう」を読みやすく設定
当前为
- // ==UserScript==
- // @name NarouRefiner
- // @namespace https://greasyfork.org/ja/users/52455-aosanori8
- // @version 0.4
- // @description 「小説家になろう」を読みやすく設定
- // @author aosanori8
- // @require https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js
- // @require https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js
- // @require https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js
- // @require https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js
- // @match http://ncode.syosetu.com/*
- // @match http://novel18.syosetu.com/*
- // @grant none
- // ==/UserScript==
- /******/ (function(modules) { // webpackBootstrap
- /******/ // The module cache
- /******/ var installedModules = {};
- /******/ // The require function
- /******/ function __webpack_require__(moduleId) {
- /******/ // Check if module is in cache
- /******/ if(installedModules[moduleId])
- /******/ return installedModules[moduleId].exports;
- /******/ // Create a new module (and put it into the cache)
- /******/ var module = installedModules[moduleId] = {
- /******/ exports: {},
- /******/ id: moduleId,
- /******/ loaded: false
- /******/ };
- /******/ // Execute the module function
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
- /******/ // Flag the module as loaded
- /******/ module.loaded = true;
- /******/ // Return the exports of the module
- /******/ return module.exports;
- /******/ }
- /******/ // expose the modules object (__webpack_modules__)
- /******/ __webpack_require__.m = modules;
- /******/ // expose the module cache
- /******/ __webpack_require__.c = installedModules;
- /******/ // __webpack_public_path__
- /******/ __webpack_require__.p = "";
- /******/ // Load entry module and return exports
- /******/ return __webpack_require__(0);
- /******/ })
- /************************************************************************/
- /******/ ([
- /* 0 */
- /***/ function(module, exports, __webpack_require__) {
- /// <reference path="./../typings/index.d.ts" />
- /// <reference path="./novelView.d.ts" />
- "use strict";
- var novelViewWrapper_1 = __webpack_require__(1);
- var indexBoxWrapper_1 = __webpack_require__(2);
- var wordDirectionSelector_1 = __webpack_require__(3);
- var fontSelector_1 = __webpack_require__(5);
- var inputSize_1 = __webpack_require__(7);
- var inputNumber_1 = __webpack_require__(8);
- var colorPicker_1 = __webpack_require__(9);
- var sideMenu_1 = __webpack_require__(11);
- var context_1 = __webpack_require__(12);
- var pathParts = location.pathname.split("/").filter(Boolean);
- if (pathParts.length >= 1) {
- var novelCode = pathParts[0], articleNum = pathParts[1];
- //////////////////////////////////////////////////////////////////
- // LocalStorageからグローバル設定、作品設定を読み込む
- //////////////////////////////////////////////////////////////////
- var DEFAULT_GLOBAL_SETTINGS = {
- textColor: "#000",
- backgroundColor: "#FFF",
- wordDirection: "horizontal-tb",
- novelWidth: "95%",
- font: null,
- fontList: [],
- fontSize: "12px",
- fontWeight: 500,
- letterSpacing: "",
- // wordSpacing: "",
- lineHeight: "",
- kanjiMargin: "0px",
- kanjiSize: "100%",
- katakanaMargin: "0px",
- katakanaSize: "100%",
- serifMargin: "0px",
- serifSize: "100%",
- expandNaviLayout: true,
- expandNaviFont: true,
- expandNaviTypeSetting: false,
- expandNaviProportion: false
- };
- var DEFAULT_SETTINGS = { toggles: [] };
- var context_2 = new context_1.default(novelCode, DEFAULT_GLOBAL_SETTINGS, DEFAULT_SETTINGS);
- //////////////////////////////////////////////////////////////////
- // ナビゲーターの構築
- //////////////////////////////////////////////////////////////////
- $(document.head).append($("\n <style>\n .novelview_navi {\n background-color: #363E44;\n color: #EEE;\n }\n .navi_spacing1 {\n height: 10px;\n }\n .navi_label1 {\n font-weight: bold;\n background-color: #666E74;\n color: #E0E0E0;\n padding: 3px 8px;\n }\n .navi_label1:hover {\n background-color: #868E94;\n cursor: pointer;\n }\n .navi_container1 {\n background-color: #C6CED4;\n padding: 5px;\n }\n .navi_spacing2 {\n height: 5px;\n }\n .navi_label2 {\n padding: 0 5px;\n font-weight: bold;\n background-color: #868E94;\n color: #E0E0E0;\n margin-bottom: 5px;\n }\n </style>\n "));
- var $customNavi = $("<div/>");
- $(".novelview_navi").prepend($customNavi);
- // ==== 色彩設定
- var $customColorLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviColor") ? "▼" : "▶") + " \u30AB\u30E9\u30FC</div>");
- $customNavi.append($customColorLabel_1);
- var $customColorContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviColor") ? "block" : "none") + "\" />");
- $customNavi.append($customColorContainer_1);
- $customColorLabel_1.click(function (event) {
- $customColorContainer_1.slideToggle(function () {
- var isDisplayed = $customColorContainer_1.css("display") !== "none";
- $customColorLabel_1.text((isDisplayed ? "▼" : "▶") + " カラー");
- context_2.saveGlobalSetting("expandNaviColor", isDisplayed);
- });
- });
- // ---- 文字色
- var textColor_1 = context_2.readGlobalSetting("textColor");
- $("#novel_color").css({ "color": textColor_1 });
- {
- var $textColorLabel = $("<div class=\"navi_label2\">\u6587\u5B57\u8272</div>");
- $customColorContainer_1.append($textColorLabel);
- var textColorController = document.createElement("div");
- ReactDOM.render(React.createElement(colorPicker_1.default, {color: textColor_1, onChange: function (color) {
- $("#novel_color").css({ "color": color });
- }, onChangeComplete: function (color) {
- $("#novel_color").css({ "color": color });
- context_2.saveGlobalSetting("textColor", color);
- }}), textColorController);
- $customColorContainer_1.append(textColorController);
- }
- $customColorContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- 背景色
- var backgroundColor_1 = context_2.readGlobalSetting("backgroundColor");
- $("body").css({ "background-color": backgroundColor_1 });
- {
- var $backgroundColorLabel = $("<div class=\"navi_label2\">\u80CC\u666F\u8272</div>");
- $customColorContainer_1.append($backgroundColorLabel);
- var backgroundColorController = document.createElement("div");
- ReactDOM.render(React.createElement(colorPicker_1.default, {color: backgroundColor_1, onChange: function (color) {
- $("body").css({ "background-color": color });
- }, onChangeComplete: function (color) {
- $("body").css({ "background-color": color });
- context_2.saveGlobalSetting("backgroundColor", color);
- }}), backgroundColorController);
- $customColorContainer_1.append(backgroundColorController);
- }
- $customNavi.append($("<div class=\"navi_spacing1\" />"));
- // サイドメニュー構築
- var allowedAddresses = ["ncode.syosetu.com", "novel18.syosetu.com"];
- if (allowedAddresses.indexOf(location.host) >= 0) {
- var sideAddress = location.protocol + "//" + location.host + "/" + novelCode;
- var sideMenu_2 = new sideMenu_1.default(context_2, sideAddress);
- sideMenu_2.css({ color: textColor_1, backgroundColor: backgroundColor_1 });
- document.addEventListener("mousemove", function (event) {
- if (event.pageX < 10 && !sideMenu_2.isSideMenuOpened) {
- sideMenu_2.css({ color: textColor_1, backgroundColor: backgroundColor_1 });
- sideMenu_2.showSideMenu();
- }
- else if (event.pageX > sideMenu_1.default.menuSize && sideMenu_2.isSideMenuOpened) {
- sideMenu_2.closeSideMenu();
- }
- });
- }
- if ($("#novel_ex").length > 0) {
- //////////////////////////////////////////////////////////////////
- // 目次ページ
- //////////////////////////////////////////////////////////////////
- var indexBoxWrapper = new indexBoxWrapper_1.default($("div#novel_ex + div.index_box"));
- indexBoxWrapper.reconstructIndex(context_2);
- indexBoxWrapper.applyAlreadyReadOnIndex(context_2);
- }
- else if ($("#novel_honbun").length > 0) {
- //////////////////////////////////////////////////////////////////
- // 本文ページ
- //////////////////////////////////////////////////////////////////
- context_2.saveReadSetting("articleNum", new Date().toString());
- // CSSを設定
- $("#container")
- .find("#novel_contents, #novel_p, #novel_color")
- .css({ "width": "auto" });
- // 変更を適用したい箇所を操作用クラスでラップ
- var novelViews_1 = [new novelViewWrapper_1.default($(".novel_subtitle"), $("#novel_honbun"))];
- // ==== レイアウト
- var $customLayoutLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviLayout") ? "▼" : "▶") + " \u30EC\u30A4\u30A2\u30A6\u30C8</div>");
- $customNavi.append($customLayoutLabel_1);
- var $customLayoutContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviLayout") ? "block" : "none") + "\" />");
- $customNavi.append($customLayoutContainer_1);
- $customLayoutLabel_1.click(function (event) {
- $customLayoutContainer_1.slideToggle(function () {
- var isDisplayed = $customLayoutContainer_1.css("display") !== "none";
- $customLayoutLabel_1.text((isDisplayed ? "▼" : "▶") + " レイアウト");
- context_2.saveGlobalSetting("expandNaviLayout", isDisplayed);
- });
- });
- // ---- 字送り・行送り
- var wordDirection_1 = context_2.readGlobalSetting("wordDirection");
- {
- var $wordDirectionLabel = $("<div class=\"navi_label2\">\u5B57\u9001\u308A\u30FB\u884C\u9001\u308A</div>");
- $customLayoutContainer_1.append($wordDirectionLabel);
- var wordDirectionController = document.createElement("div");
- ReactDOM.render(React.createElement(wordDirectionSelector_1.WordDirectionSelector, {wordDirection: wordDirection_1, onChangeWordDirection: function (wordDirection) {
- for (var _i = 0, novelViews_2 = novelViews_1; _i < novelViews_2.length; _i++) {
- var novelView = novelViews_2[_i];
- novelView.changeWritingMode(wordDirection);
- }
- context_2.saveGlobalSetting("wordDirection", wordDirection);
- }}), wordDirectionController);
- $customLayoutContainer_1.append(wordDirectionController);
- }
- $customLayoutContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- ページ横幅
- var novelWidth_1 = context_2.readGlobalSetting("novelWidth");
- {
- $customLayoutContainer_1.append($("<div class=\"navi_label2\">\u30DA\u30FC\u30B8\u6A2A\u5E45</div>"));
- var novelWidthController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {value: novelWidth_1, onChange: function (sizeValue) {
- console.log("Width: " + sizeValue);
- for (var _i = 0, novelViews_3 = novelViews_1; _i < novelViews_3.length; _i++) {
- var novelView = novelViews_3[_i];
- novelView.changeWidth(sizeValue);
- }
- context_2.saveGlobalSetting("novelWidth", sizeValue);
- }}), novelWidthController);
- $customLayoutContainer_1.append(novelWidthController);
- }
- $customNavi.append($("<div class=\"navi_spacing1\" />"));
- // ==== フォント
- var $customFontLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviFont") ? "▼" : "▶") + " \u30D5\u30A9\u30F3\u30C8</div>");
- $customNavi.append($customFontLabel_1);
- var $customFontContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviFont") ? "block" : "none") + "\" />");
- $customNavi.append($customFontContainer_1);
- $customFontLabel_1.click(function (event) {
- $customFontContainer_1.slideToggle(function () {
- var isDisplayed = $customFontContainer_1.css("display") !== "none";
- $customFontLabel_1.text((isDisplayed ? "▼" : "▶") + " フォント");
- context_2.saveGlobalSetting("expandNaviFont", isDisplayed);
- });
- });
- // ---- 書体設定
- var font_1 = context_2.readGlobalSetting("font");
- var fontList = context_2.readGlobalSetting("fontList");
- {
- $customFontContainer_1.append($("<div class=\"navi_label2\">\u66F8\u4F53</div>"));
- var fontSelector = document.createElement("div");
- ReactDOM.render(React.createElement(fontSelector_1.FontSelector, {font: font_1, fontList: fontList, onChangeFontListener: function (font) {
- for (var _i = 0, novelViews_4 = novelViews_1; _i < novelViews_4.length; _i++) {
- var novelView = novelViews_4[_i];
- novelView.changeFont(font);
- }
- context_2.saveGlobalSetting("font", font);
- }, onChangeFontListListener: function (fontList) {
- context_2.saveGlobalSetting("fontList", fontList);
- }}), fontSelector);
- $customFontContainer_1.append(fontSelector);
- }
- $customFontContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- フォントサイズ
- var fontSize_1 = context_2.readGlobalSetting("fontSize");
- {
- $customFontContainer_1.append($("<div class=\"navi_label2\">\u6587\u5B57\u30B5\u30A4\u30BA</div>"));
- var fontSizeController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {value: fontSize_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_5 = novelViews_1; _i < novelViews_5.length; _i++) {
- var novelView = novelViews_5[_i];
- novelView.changeFontSize(sizeValue);
- }
- context_2.saveGlobalSetting("fontSize", sizeValue);
- }}), fontSizeController);
- $customFontContainer_1.append(fontSizeController);
- }
- $customFontContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- 文字ウェイト
- var fontWeight_1 = context_2.readGlobalSetting("fontWeight");
- {
- $customFontContainer_1.append($("<div class=\"navi_label2\">\u6587\u5B57\u30A6\u30A7\u30A4\u30C8</div>"));
- var fontWeightController = document.createElement("div");
- ReactDOM.render(React.createElement(inputNumber_1.default, {value: fontWeight_1, min: 100, max: 1000, step: 100, onChange: function (sizeValue) {
- console.log("Font Weight: " + sizeValue);
- for (var _i = 0, novelViews_6 = novelViews_1; _i < novelViews_6.length; _i++) {
- var novelView = novelViews_6[_i];
- novelView.changeFontWeight("" + sizeValue);
- }
- context_2.saveGlobalSetting("fontWeight", sizeValue);
- }}), fontWeightController);
- $customFontContainer_1.append(fontWeightController);
- }
- $customNavi.append($("<div class=\"navi_spacing1\" />"));
- // ==== 文字組み
- var $customTypeSettingLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviTypeSetting") ? "▼" : "▶") + " \u6587\u5B57\u7D44\u307F</div>");
- $customNavi.append($customTypeSettingLabel_1);
- var $customTypeSettingContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviTypeSetting") ? "block" : "none") + "\" />");
- $customNavi.append($customTypeSettingContainer_1);
- $customTypeSettingLabel_1.click(function (event) {
- $customTypeSettingContainer_1.slideToggle(function () {
- var isDisplayed = $customTypeSettingContainer_1.css("display") !== "none";
- $customTypeSettingLabel_1.text((isDisplayed ? "▼" : "▶") + " 文字組み");
- context_2.saveGlobalSetting("expandNaviTypeSetting", isDisplayed);
- });
- });
- // ---- 文字間隔
- var letterSpacing_1 = context_2.readGlobalSetting("letterSpacing");
- {
- $customTypeSettingContainer_1.append($("<div class=\"navi_label2\">\u6587\u5B57\u9593\u9694</div>"));
- var letterSpacingController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {value: letterSpacing_1, onChange: function (sizeValue) {
- console.log("Letter Spacing: " + sizeValue);
- for (var _i = 0, novelViews_7 = novelViews_1; _i < novelViews_7.length; _i++) {
- var novelView = novelViews_7[_i];
- novelView.changeLetterSpacing(sizeValue);
- }
- context_2.saveGlobalSetting("letterSpacing", sizeValue);
- }}), letterSpacingController);
- $customTypeSettingContainer_1.append(letterSpacingController);
- }
- $customTypeSettingContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- 行間隔
- var lineHeight_1 = context_2.readGlobalSetting("lineHeight");
- {
- $customTypeSettingContainer_1.append($("<div class=\"navi_label2\">\u884C\u9593\u9694</div>"));
- var lineHeightController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {value: lineHeight_1, onChange: function (sizeValue) {
- console.log("Line Height: " + sizeValue);
- for (var _i = 0, novelViews_8 = novelViews_1; _i < novelViews_8.length; _i++) {
- var novelView = novelViews_8[_i];
- novelView.changeLineHeight(sizeValue);
- }
- context_2.saveGlobalSetting("lineHeight", sizeValue);
- }}), lineHeightController);
- $customTypeSettingContainer_1.append(lineHeightController);
- }
- // ---- 単語間隔
- // let wordSpacing: string = context.readGlobalSetting("wordSpacing");
- // {
- //
- // $customTypeSettingContainer.append($(`<div class="navi_label2">▼単語間隔</div>`));
- //
- // const wordSpacingController = document.createElement("div");
- // ReactDOM.render(
- // <InputSize value={wordSpacing} onChange={ (sizeValue: string) => {
- // console.log("Word Spacing: " + sizeValue)
- // for (const novelView of novelViews) {
- // novelView.changeWordSpacing(sizeValue);
- // }
- // context.saveGlobalSetting("wordSpacing", sizeValue);
- // }} />,
- // wordSpacingController
- // );
- //
- // $customTypeSettingContainer.append(wordSpacingController);
- //
- // }
- $customNavi.append($("<div class=\"navi_spacing1\" />"));
- // ==== プロポーション
- var $customProportionLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviProportion") ? "▼" : "▶") + " \u30D7\u30ED\u30DD\u30FC\u30B7\u30E7\u30F3</div>");
- $customNavi.append($customProportionLabel_1);
- var $customProportionContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviProportion") ? "block" : "none") + "\" />");
- $customNavi.append($customProportionContainer_1);
- $customProportionLabel_1.click(function (event) {
- $customProportionContainer_1.slideToggle(function () {
- var isDisplayed = $customProportionContainer_1.css("display") !== "none";
- $customProportionLabel_1.text((isDisplayed ? "▼" : "▶") + " プロポーション");
- context_2.saveGlobalSetting("expandNaviProportion", isDisplayed);
- });
- });
- // ---- 漢字マージン調整
- var kanjiMargin_1 = context_2.readGlobalSetting("kanjiSpacing");
- {
- $customProportionContainer_1.append($("<div class=\"navi_label2\">\u6F22\u5B57\u30DE\u30FC\u30B8\u30F3</div>"));
- var kanjiMarginController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: kanjiMargin_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_9 = novelViews_1; _i < novelViews_9.length; _i++) {
- var novelView = novelViews_9[_i];
- novelView.changeKanjiMargin(sizeValue);
- }
- context_2.saveGlobalSetting("kanjiMargin", sizeValue);
- }}), kanjiMarginController);
- $customProportionContainer_1.append(kanjiMarginController);
- }
- $customProportionContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- 漢字サイズ調整
- var kanjiSize_1 = context_2.readGlobalSetting("kanjiSize");
- {
- $customProportionContainer_1.append($("<div class=\"navi_label2\">\u6F22\u5B57\u30B5\u30A4\u30BA</div>"));
- var kanjiSizeController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: kanjiSize_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_10 = novelViews_1; _i < novelViews_10.length; _i++) {
- var novelView = novelViews_10[_i];
- novelView.changeKanjiSize(sizeValue);
- }
- context_2.saveGlobalSetting("kanjiSize", sizeValue);
- }}), kanjiSizeController);
- $customProportionContainer_1.append(kanjiSizeController);
- }
- // ---- カタカナマージン調整
- var katakanaMargin_1 = context_2.readGlobalSetting("katakanaSpacing");
- {
- $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30AB\u30BF\u30AB\u30CA\u30DE\u30FC\u30B8\u30F3</div>"));
- var katakanaMarginController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: katakanaMargin_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_11 = novelViews_1; _i < novelViews_11.length; _i++) {
- var novelView = novelViews_11[_i];
- novelView.changeKatakanaMargin(sizeValue);
- }
- context_2.saveGlobalSetting("katakanaMargin", sizeValue);
- }}), katakanaMarginController);
- $customProportionContainer_1.append(katakanaMarginController);
- }
- $customProportionContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- カタカナサイズ調整
- var katakanaSize_1 = context_2.readGlobalSetting("katakanaSize");
- {
- $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30AB\u30BF\u30AB\u30CA\u30B5\u30A4\u30BA</div>"));
- var katakanaSizeController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: katakanaSize_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_12 = novelViews_1; _i < novelViews_12.length; _i++) {
- var novelView = novelViews_12[_i];
- novelView.changeKatakanaSize(sizeValue);
- }
- context_2.saveGlobalSetting("katakanaSize", sizeValue);
- }}), katakanaSizeController);
- $customProportionContainer_1.append(katakanaSizeController);
- }
- // ---- セリフマージン調整
- var serifMargin_1 = context_2.readGlobalSetting("serifSpacing");
- {
- $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30BB\u30EA\u30D5\u30DE\u30FC\u30B8\u30F3</div>"));
- var serifMarginController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: serifMargin_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_13 = novelViews_1; _i < novelViews_13.length; _i++) {
- var novelView = novelViews_13[_i];
- novelView.changeSerifMargin(sizeValue);
- }
- context_2.saveGlobalSetting("serifMargin", sizeValue);
- }}), serifMarginController);
- $customProportionContainer_1.append(serifMarginController);
- }
- $customProportionContainer_1.append($("<div class=\"navi_spacing2\" />"));
- // ---- セリフサイズ調整
- var serifSize_1 = context_2.readGlobalSetting("serifSize");
- {
- $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30BB\u30EA\u30D5\u30B5\u30A4\u30BA</div>"));
- var serifSizeController = document.createElement("div");
- ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: serifSize_1, onChange: function (sizeValue) {
- for (var _i = 0, novelViews_14 = novelViews_1; _i < novelViews_14.length; _i++) {
- var novelView = novelViews_14[_i];
- novelView.changeSerifSize(sizeValue);
- }
- context_2.saveGlobalSetting("serifSize", sizeValue);
- }}), serifSizeController);
- $customProportionContainer_1.append(serifSizeController);
- }
- // $customNavi.append($(`<div class="navi_spacing1" style="width: 100%" />`));
- // ==== 文字詰め
- // ---- 未実装
- //////////////////////////////////////////////////////////////////
- // 画面レイアウトを一括で変更するための関数
- //////////////////////////////////////////////////////////////////
- var applyStyle_1 = function (novelView) {
- novelView.changeWritingMode(wordDirection_1);
- novelView.changeWidth(novelWidth_1);
- novelView.changeFont(font_1);
- novelView.changeFontSize(fontSize_1);
- novelView.changeFontWeight("" + fontWeight_1);
- novelView.changeLetterSpacing(letterSpacing_1);
- novelView.changeLineHeight(lineHeight_1);
- novelView.changeKanjiMargin(kanjiMargin_1);
- novelView.changeKanjiSize(kanjiSize_1);
- novelView.changeKatakanaMargin(katakanaMargin_1);
- novelView.changeKatakanaSize(katakanaSize_1);
- novelView.changeSerifMargin(serifMargin_1);
- novelView.changeSerifSize(serifSize_1);
- };
- //////////////////////////////////////////////////////////////////
- // 画面レイアウトを適用
- //////////////////////////////////////////////////////////////////
- for (var _i = 0, novelViews_15 = novelViews_1; _i < novelViews_15.length; _i++) {
- var novelView = novelViews_15[_i];
- applyStyle_1(novelView);
- }
- //////////////////////////////////////////////////////////////////
- // AutoPagerizeによるページロード時の動作
- //////////////////////////////////////////////////////////////////
- var recentNovelSubTitle_1 = null;
- document.body.addEventListener("AutoPagerize_DOMNodeInserted", function (event) {
- // console.log("Element", event.target, "RequestURL", (event as any).newValue, "ParentNode", (event as any).relatedNode);
- if (event.target.className && event.target.className === "novel_subtitle") {
- recentNovelSubTitle_1 = $(event.target);
- }
- else if (event.target.id && event.target.id === "novel_honbun") {
- var loadedPageAddress = event.newValue;
- var urlPaser = document.createElement("a");
- urlPaser.href = loadedPageAddress;
- var _a = urlPaser.pathname.split("/").filter(Boolean), loadedNovelCode = _a[0], loadedArticleNum = _a[1];
- context_2.saveReadSetting(loadedArticleNum, new Date().toString());
- var novelView = new novelViewWrapper_1.default(recentNovelSubTitle_1, $(event.target));
- novelViews_1.push(novelView);
- applyStyle_1(novelView);
- }
- // customizeContents($(target));
- }, false);
- }
- }
- /***/ },
- /* 1 */
- /***/ function(module, exports) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var NovelViewWrapper = (function () {
- function NovelViewWrapper($novelSubTitle, $novelView) {
- this.$oneNovel = $("<div style=\"margin: 30px auto 50px auto\" />");
- this.$oneNovel.insertBefore($novelSubTitle);
- this.$oneNovel.append($novelSubTitle);
- this.$oneNovel.append($novelView);
- $novelView.css("margin", "");
- $novelView.css({ "width": "auto" });
- this.$novelSubTitle = $novelSubTitle;
- this.$novelView = $novelView;
- this.isCreatedKanjiContainers = false;
- this.isCreatedKatakanaContainers = false;
- this.isCreatedSerifContainers = false;
- }
- NovelViewWrapper.prototype.createStyleSheet = function () {
- var styleElement = document.createElement("style");
- document.head.appendChild(styleElement);
- return styleElement.sheet;
- };
- NovelViewWrapper.prototype.setupKanjiContainers = function () {
- this.isCreatedKanjiContainers = true;
- this.$novelView.html(this.$novelView.html().replace(NovelViewWrapper.KANJI_PATTERN, "<span class=\"kanji\">\$1</span>"));
- this.kanjiMarginCss = this.createStyleSheet();
- this.kanjiSizeCss = this.createStyleSheet();
- };
- NovelViewWrapper.prototype.setupKatakanaContainers = function () {
- this.isCreatedKatakanaContainers = true;
- this.$novelView.html(this.$novelView.html().replace(NovelViewWrapper.KATAKANA_PATTERN, "<span class=\"katakana\">\$1</span>"));
- this.katakanaMarginCss = this.createStyleSheet();
- this.katakanaSizeCss = this.createStyleSheet();
- };
- NovelViewWrapper.prototype.setupSerifContainers = function () {
- this.isCreatedSerifContainers = true;
- this.$novelView.html(this.$novelView.html().replace(NovelViewWrapper.SERIF_PATTERN, "<span class=\"serif\">\$1</span>"));
- this.serifMarginCss = this.createStyleSheet();
- this.serifSizeCss = this.createStyleSheet();
- };
- NovelViewWrapper.prototype.changeFont = function (font) {
- this.$novelView.css("font-family", font);
- this.$novelSubTitle.css("font-family", font);
- };
- // 文字サイズを変更
- NovelViewWrapper.prototype.changeFontSize = function (size) {
- this.$novelView.css("font-size", size);
- this.$novelSubTitle.css("font-size", size);
- };
- NovelViewWrapper.prototype.changeFontWeight = function (weight) {
- this.$novelView.css("font-weight", weight);
- this.$novelSubTitle.css("font-weight", weight);
- };
- // 行間を変更
- NovelViewWrapper.prototype.changeLineHeight = function (height) {
- this.$novelView.css("line-height", height);
- this.$novelSubTitle.css("line-height", height);
- };
- // 字間を変更
- NovelViewWrapper.prototype.changeLetterSpacing = function (spacing) {
- this.$novelView.css("letter-spacing", spacing);
- this.$novelSubTitle.css("letter-spacing", spacing);
- };
- // 単語の間隔を変更
- NovelViewWrapper.prototype.changeWordSpacing = function (spacing) {
- this.$novelView.css("word-spacing", spacing);
- this.$novelSubTitle.css("word-spacing", spacing);
- };
- // レイアウトを変更
- NovelViewWrapper.prototype.changeNovelLayout = function () {
- };
- // 横幅を変更
- NovelViewWrapper.prototype.changeWidth = function (width) {
- this.$oneNovel.css({ "width": width });
- };
- NovelViewWrapper.prototype.changeWritingMode = function (wordDirection) {
- if (wordDirection.indexOf("vertical-rl") === 0) {
- this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "scroll" });
- this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "right", "text-align": "center" });
- this.$novelView.css({ "writing-mode": wordDirection, "float": "right" });
- }
- else if (wordDirection.indexOf("vertical-lr") === 0) {
- this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "scroll" });
- this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "left", "text-align": "center" });
- this.$novelView.css({ "writing-mode": wordDirection, "float": "left" });
- }
- else {
- this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "auto" });
- this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "none" });
- this.$novelView.css({ "writing-mode": wordDirection, "float": "none" });
- }
- };
- NovelViewWrapper.prototype.changeKanjiMargin = function (size) {
- if (size !== "0px" && !this.isCreatedKanjiContainers) {
- this.setupKanjiContainers();
- }
- if (this.kanjiMarginCss.rules.length > 0)
- this.kanjiMarginCss.removeRule(this.kanjiMarginCss.rules.length - 1);
- this.kanjiMarginCss.insertRule(".kanji { margin: " + size + " }", 0);
- };
- NovelViewWrapper.prototype.changeKanjiSize = function (size) {
- if (size !== "100%" && !this.isCreatedKanjiContainers) {
- this.setupKanjiContainers();
- }
- if (this.kanjiSizeCss.rules.length > 0)
- this.kanjiSizeCss.removeRule(this.kanjiSizeCss.rules.length - 1);
- this.kanjiSizeCss.insertRule(".kanji { font-size: " + size + " }", 0);
- };
- NovelViewWrapper.prototype.changeKatakanaMargin = function (size) {
- if (size !== "0px" && !this.isCreatedKatakanaContainers) {
- this.setupKatakanaContainers();
- }
- if (this.katakanaMarginCss.rules.length > 0)
- this.katakanaMarginCss.removeRule(this.katakanaMarginCss.rules.length - 1);
- this.katakanaMarginCss.insertRule(".katakana { margin: " + size + " }", 0);
- };
- NovelViewWrapper.prototype.changeKatakanaSize = function (size) {
- if (size !== "100%" && !this.isCreatedKatakanaContainers) {
- this.setupKatakanaContainers();
- }
- if (this.katakanaSizeCss.rules.length > 0)
- this.katakanaSizeCss.removeRule(this.katakanaSizeCss.rules.length - 1);
- this.katakanaSizeCss.insertRule(".katakana { font-size: " + size + " }", 0);
- };
- NovelViewWrapper.prototype.changeSerifMargin = function (size) {
- if (size !== "0px" && !this.isCreatedSerifContainers) {
- this.setupSerifContainers();
- }
- if (this.serifMarginCss.rules.length > 0)
- this.serifMarginCss.removeRule(this.serifMarginCss.rules.length - 1);
- this.serifMarginCss.insertRule(".serif { margin: " + size + " }", 0);
- };
- NovelViewWrapper.prototype.changeSerifSize = function (size) {
- if (size !== "100%" && !this.isCreatedSerifContainers) {
- this.setupSerifContainers();
- }
- if (this.serifSizeCss.rules.length > 0)
- this.serifSizeCss.removeRule(this.serifSizeCss.rules.length - 1);
- this.serifSizeCss.insertRule(".serif { font-size: " + size + " }", 0);
- };
- NovelViewWrapper.KANJI_PATTERN = /((?:[\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u3005\u3007\u3021-\u3029\u3038-\u303B\u3400-\u4DB5\u4E00-\u9FCC\uF900-\uFA6D\uFA70-\uFAD9]|[\uD840-\uD868][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|[\uD86A-\uD86C][\uDC00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]|\uD87E[\uDC00-\uDE1D])+)/g;
- NovelViewWrapper.SERIF_PATTERN = /(「[^」]{1,500}」)/g;
- NovelViewWrapper.KATAKANA_PATTERN = /([ァ-ンヷヸヹヺヵヶ]+)/g;
- return NovelViewWrapper;
- }());
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = NovelViewWrapper;
- /***/ },
- /* 2 */
- /***/ function(module, exports) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var IndexBoxWrapper = (function () {
- function IndexBoxWrapper(indexBox) {
- this.indexBox = indexBox;
- }
- /// 作品の投稿日付をDateにパースする関数
- // static parseDate(dateString: string): Date {
- // const ds = dateString.trim();
- // const yi = ds.indexOf("年");
- // const mi = ds.indexOf("月");
- // const di = ds.indexOf("日");
- // const year = parseInt(ds.substring(0, yi).trim());
- // const month = parseInt(ds.substring(yi + 1, mi).trim()) - 1; // January is zero
- // const day = parseInt(ds.substring(mi + 1, di).trim());
- // return new Date(year, month, day);
- // };
- /// インデックスを折りたためるよう再構築
- IndexBoxWrapper.prototype.reconstructIndex = function (context) {
- var $titleElements = this.indexBox.find("div.chapter_title");
- $titleElements.css("cursor", "pointer");
- var toggles = context.readNovelSetting("toggles");
- $titleElements.each(function (index, titleElement) {
- $(titleElement)
- .click(function (event) {
- var $container = $(event.target).next();
- $container.slideToggle(function () {
- toggles[index] = ($container.css("display") === "block");
- context.saveNovelSetting(toggles);
- });
- });
- $(titleElement)
- .css({
- "background-color": "gray",
- "padding": "15px"
- });
- // Rearrange the dom structure
- var $articles = $(titleElement).nextUntil("div");
- var $createdContainer = $("<div />", { class: "chapter_container" }).insertAfter(titleElement);
- $articles.appendTo($createdContainer);
- // Remember the states
- $createdContainer.toggle(toggles[index]);
- });
- };
- /// 既読の色を変える
- IndexBoxWrapper.prototype.applyAlreadyReadOnIndex = function (context) {
- var $allNovelIndex = this.indexBox.find("dl.novel_sublist2");
- var readSettings = context.getReadSettings();
- var nowDate = Date.now();
- $allNovelIndex.each(function (index, element) {
- var anchor = $(element).find("dd > a")[0];
- var _a = anchor.pathname.split("/").filter(Boolean), novelCode = _a[0], articleNum = _a[1];
- if (articleNum in readSettings) {
- var lastReadDateString = readSettings[articleNum];
- // ---- 最後に読んだ日より後に更新があった時の処理
- // const articleUpdateDate = parseDate($(element).find("dt.long_update").text());
- // const recentReadDate = new Date(lastReadDateString);
- // recentReadDate.setHours(0);
- // recentReadDate.setMinutes(0);
- // recentReadDate.setSeconds(0);
- // recentReadDate.setMilliseconds(0);
- // if (recentReadDate.getTime() === articleUpdateDate.getTime()) { // 読んだ日と更新日が同じ
- // } else
- // if (recentReadDate.getTime() < articleUpdateDate.getTime()) {
- // }
- $(element).css("background-color", "gray");
- }
- });
- };
- return IndexBoxWrapper;
- }());
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = IndexBoxWrapper;
- /***/ },
- /* 3 */
- /***/ function(module, exports, __webpack_require__) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var __extends = (this && this.__extends) || function (d, b) {
- for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- var utils_1 = __webpack_require__(4);
- var HTB = "horizontal-tb";
- var VRL = "vertical-rl";
- var VLR = "vertical-lr";
- var COLOR_SELECTED = "#FFD540";
- var COLOR_HOVERED = "lightgray";
- var COLOR_TRANSPARENT = "rgba(0, 0, 0, 0)";
- var COLOR_NONE = "white";
- var SIZE = 30;
- var WordDirectionSelector = (function (_super) {
- __extends(WordDirectionSelector, _super);
- function WordDirectionSelector() {
- _super.apply(this, arguments);
- this.state = {
- wordDirection: this.props.wordDirection,
- hovered: null
- };
- }
- WordDirectionSelector.prototype.onChangeWordDirection = function (event) {
- var wordDirection = event.target.value;
- this.setState({ wordDirection: wordDirection });
- this.props.onChangeWordDirection(wordDirection);
- };
- WordDirectionSelector.prototype.render = function () {
- var _this = this;
- return (React.createElement("div", null, React.createElement("input", {id: "htb", ref: "htb", type: "radio", style: { display: "none" }, name: "wordDirection", value: HTB, onClick: this.onChangeWordDirection.bind(this)}), React.createElement("label", {htmlFor: "htb", onMouseEnter: function () { _this.setState({ hovered: HTB }); }, onMouseLeave: function () { _this.setState({ hovered: null }); }}, React.createElement("span", {style: {
- width: SIZE + "px", height: SIZE + "px", display: "inline-block",
- backgroundColor: (this.state.wordDirection === HTB) ? COLOR_SELECTED :
- (this.state.hovered && this.state.hovered === HTB) ? COLOR_HOVERED :
- COLOR_NONE
- }}, React.createElement("svg", {width: SIZE, height: SIZE, viewbox: "0 0 " + SIZE + " " + SIZE}, React.createElement("defs", null, React.createElement("path", {id: "line1", d: "M 3 0 h 24"})), React.createElement("g", {style: { stroke: "black", fill: COLOR_TRANSPARENT }}, React.createElement("rect", {width: SIZE, height: SIZE}), utils_1.range(5, 29, +4).map(function (i) { return React.createElement("use", {xlinkHref: "#line1", y: i, key: i}); }))))), React.createElement("input", {id: "vrl", ref: "vrl", type: "radio", style: { display: "none" }, name: "wordDirection", value: VRL, onClick: this.onChangeWordDirection.bind(this)}), React.createElement("label", {htmlFor: "vrl", onMouseEnter: function () { _this.setState({ hovered: VRL }); }, onMouseLeave: function () { _this.setState({ hovered: null }); }}, React.createElement("span", {style: {
- width: SIZE + "px", height: SIZE + "px", display: "inline-block", marginLeft: "5px",
- backgroundColor: (this.state.wordDirection === VRL) ? COLOR_SELECTED :
- (this.state.hovered && this.state.hovered === VRL) ? COLOR_HOVERED :
- COLOR_NONE
- }}, React.createElement("svg", {width: SIZE, height: SIZE, viewbox: "0 0 " + SIZE + " " + SIZE}, React.createElement("defs", null, React.createElement("path", {id: "line2", d: "M 0 3 v 17"})), React.createElement("g", {style: { stroke: "black", fill: COLOR_TRANSPARENT }}, React.createElement("rect", {width: SIZE, height: SIZE}), utils_1.range(5, 29, +4).map(function (i) { return React.createElement("use", {xlinkHref: "#line2", x: i, key: i}); }), React.createElement("path", {d: "M 3 24 l 3 3 v -6 l -3 3 h 24"}))))), React.createElement("input", {id: "vlr", ref: "vlr", type: "radio", style: { display: "none" }, name: "wordDirection", value: VLR, onClick: this.onChangeWordDirection.bind(this)}), React.createElement("label", {htmlFor: "vlr", onMouseEnter: function () { _this.setState({ hovered: VLR }); }, onMouseLeave: function () { _this.setState({ hovered: null }); }}, React.createElement("span", {style: {
- width: SIZE + "px", height: SIZE + "px", display: "inline-block", marginLeft: "5px",
- backgroundColor: (this.state.wordDirection === VLR) ? COLOR_SELECTED :
- (this.state.hovered && this.state.hovered === VLR) ? COLOR_HOVERED :
- COLOR_NONE
- }}, React.createElement("svg", {width: SIZE, height: SIZE, viewbox: "0 0 " + SIZE + " " + SIZE}, React.createElement("defs", null, React.createElement("path", {id: "line3", d: "M 0 3 v 17"})), React.createElement("g", {style: { stroke: "black", fill: COLOR_TRANSPARENT }}, React.createElement("rect", {width: SIZE, height: SIZE}), utils_1.range(5, 29, +4).map(function (i) { return React.createElement("use", {xlinkHref: "#line3", x: i, key: i}); }), React.createElement("path", {d: "M 27 24 l -3 3 v -6 l 3 3 h -24"})))))));
- };
- return WordDirectionSelector;
- }(React.Component));
- exports.WordDirectionSelector = WordDirectionSelector;
- /***/ },
- /* 4 */
- /***/ function(module, exports) {
- "use strict";
- function range(from, to, by) {
- var array = [];
- switch (arguments.length) {
- case 1:
- to = from;
- from = 0;
- break;
- case 2:
- if (from < to) {
- by = 1;
- }
- else {
- by = -1;
- }
- break;
- }
- if (by > 0) {
- for (var n = from; n < to; n += by) {
- array.push(n);
- }
- }
- else {
- for (var n = from; n > to; n += by) {
- array.push(n);
- }
- }
- return array;
- }
- exports.range = range;
- /***/ },
- /* 5 */
- /***/ function(module, exports, __webpack_require__) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var __extends = (this && this.__extends) || function (d, b) {
- for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- var fontDetector_1 = __webpack_require__(6);
- var FontSelector = (function (_super) {
- __extends(FontSelector, _super);
- function FontSelector(props) {
- _super.call(this, props);
- this.state = {
- inputFont: "",
- selectedFont: this.props.font,
- fontList: this.props.fontList
- };
- this.fontDetector = new fontDetector_1.default(document.body);
- }
- FontSelector.prototype.addFont = function (fontName) {
- var fontList = (this.state.fontList) ? this.state.fontList.concat(fontName) : [fontName];
- this.setState({
- selectedFont: fontName,
- fontList: fontList
- });
- if (this.props.onChangeFontListener)
- this.props.onChangeFontListener(fontName);
- if (this.props.onChangeFontListListener)
- this.props.onChangeFontListListener(fontList);
- };
- FontSelector.prototype.onKeyPress = function (event) {
- if (event.which === 13 || event.keyCode === 13) {
- var inputFont = event.target;
- var font = inputFont.value;
- if (this.fontDetector.detect(font)) {
- this.addFont(font);
- this.setState({ inputFont: "" });
- inputFont.value = "";
- return false;
- }
- else {
- return true;
- }
- }
- else {
- return true;
- }
- };
- FontSelector.prototype.onClickAdd = function (event) {
- this.addFont(this.state.selectedFont);
- };
- FontSelector.prototype.onClickRemove = function (event) {
- var _this = this;
- this.setState({
- selectedFont: "",
- fontList: this.state.fontList.filter(function (f) { return f !== _this.state.selectedFont; })
- });
- if (this.props.onChangeFontListener)
- this.props.onChangeFontListener(this.state.selectedFont);
- if (this.props.onChangeFontListListener)
- this.props.onChangeFontListListener(this.state.fontList);
- };
- FontSelector.prototype.onInput = function (event) {
- var inputFont = event.target;
- var font = inputFont.value;
- this.setState({ inputFont: font });
- if (this.fontDetector.detect(font)) {
- if (this.props.onChangeFontListener)
- this.props.onChangeFontListener(font);
- }
- };
- FontSelector.prototype.onChangeSelectFont = function (event) {
- var option = event.target;
- var font = option.value;
- this.setState({ selectedFont: font });
- if (this.props.onChangeFontListener)
- this.props.onChangeFontListener(font);
- };
- FontSelector.prototype.render = function () {
- var _this = this;
- return (React.createElement("div", null, React.createElement("input", {placeholder: this.state.selectedFont, style: { width: "100%", marginBottom: "3px", backgroundColor: (this.fontDetector.detect(this.state.inputFont) ? "#FFD540" : "white") }, onKeyPress: this.onKeyPress.bind(this), onInput: this.onInput.bind(this)}), React.createElement("div", {style: { display: "flex", width: "100%" }}, React.createElement("button", {style: { flex: 1 }, disabled: !this.fontDetector.detect(this.state.inputFont), onClick: this.onClickAdd.bind(this)}, "追加"), React.createElement("button", {style: { flex: 1 }, disabled: !(this.state.fontList.indexOf(this.state.selectedFont) >= 0), onClick: this.onClickRemove.bind(this)}, "削除")), React.createElement("select", {style: { width: "100%", marginTop: "3px" }, defaultValue: this.state.selectedFont, size: "5", onChange: this.onChangeSelectFont.bind(this)}, this.state.fontList
- .map(function (fontName, index) {
- return React.createElement("option", {key: index, value: fontName, style: { paddingLeft: "5px", backgroundColor: (_this.fontDetector.detect(fontName) ? "#FFD540" : "lightgray"), fontFamily: fontName }}, fontName);
- }))));
- };
- return FontSelector;
- }(React.Component));
- exports.FontSelector = FontSelector;
- /***/ },
- /* 6 */
- /***/ function(module, exports) {
- "use strict";
- var FontDetector = (function () {
- function FontDetector(testField) {
- this.testField = testField;
- this.container = document.createElement("span");
- this.container.style.fontSize = FontDetector.testSize;
- this.container.innerHTML = FontDetector.testString;
- this.defaultWidth = {};
- this.defaultHeight = {};
- for (var _i = 0, _a = FontDetector.baseFonts; _i < _a.length; _i++) {
- var font = _a[_i];
- this.container.style.fontFamily = font;
- this.testField.appendChild(this.container);
- this.defaultWidth[font] = this.container.offsetWidth;
- this.defaultHeight[font] = this.container.offsetHeight;
- this.testField.removeChild(this.container);
- }
- }
- FontDetector.prototype.detect = function (font) {
- font = font.trim();
- if (!font)
- return false;
- var detected = false;
- for (var _i = 0, _a = FontDetector.baseFonts; _i < _a.length; _i++) {
- var baseFont = _a[_i];
- this.container.style.fontFamily = font + "," + baseFont;
- this.testField.appendChild(this.container);
- var matched = (this.container.offsetWidth !== this.defaultWidth[baseFont] || this.container.offsetHeight !== this.defaultHeight[baseFont]);
- this.testField.removeChild(this.container);
- detected = detected || matched;
- }
- return detected;
- };
- FontDetector.baseFonts = ["monospace", "sans-serif", "serif"];
- FontDetector.testString = "mmmmmmmmmmlli";
- FontDetector.testSize = "72px";
- return FontDetector;
- }());
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = FontDetector;
- /***/ },
- /* 7 */
- /***/ function(module, exports) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var __extends = (this && this.__extends) || function (d, b) {
- for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- var SizeUnit = ["%", "px", "pt", "in", "mm", "cm", "em", "rem"];
- var InputSize = (function (_super) {
- __extends(InputSize, _super);
- function InputSize() {
- _super.apply(this, arguments);
- this.defaultProps = {
- min: 0,
- max: 200,
- step: 1,
- value: "",
- unit: "px"
- };
- this.state = {
- sizeValueMin: this.props.min || 1,
- sizeValueMax: this.props.max || 200,
- sizeValueStep: this.props.step || 1,
- sizeValue: this.parseSizeValue(this.props.value),
- sizeUnit: (this.props.unit || this.parseSizeUnit(this.props.value))
- };
- }
- InputSize.prototype.parseSizeValue = function (sizeString) {
- if (typeof sizeString === "number") {
- return sizeString;
- }
- else if (typeof sizeString === "string") {
- var numString = sizeString;
- if (sizeString)
- for (var _i = 0, SizeUnit_1 = SizeUnit; _i < SizeUnit_1.length; _i++) {
- var unit = SizeUnit_1[_i];
- var index = sizeString.lastIndexOf(unit);
- if (index >= 0)
- numString = sizeString.substring(0, index);
- }
- return parseFloat(numString) || 0;
- }
- else {
- return 0;
- }
- };
- InputSize.prototype.parseSizeUnit = function (sizeString) {
- if (typeof sizeString === "string") {
- var numString = null;
- if (sizeString)
- for (var _i = 0, SizeUnit_2 = SizeUnit; _i < SizeUnit_2.length; _i++) {
- var unit = SizeUnit_2[_i];
- var index = sizeString.lastIndexOf(unit);
- if (index >= 0)
- numString = sizeString.substring(index);
- }
- return (numString || "px");
- }
- else {
- return "px";
- }
- };
- InputSize.prototype.onChangeValue = function (event) {
- var value = parseFloat(event.target.value);
- if (this.props.onChange && value && this.state.sizeUnit) {
- this.props.onChange("" + value + this.state.sizeUnit);
- }
- this.setState({ sizeValue: value });
- };
- InputSize.prototype.onChangeUnit = function (event) {
- var unit = event.target.value;
- if (this.props.onChange && this.state.sizeValue && unit) {
- this.props.onChange("" + this.state.sizeValue + unit);
- }
- this.setState({ sizeUnit: unit });
- };
- InputSize.prototype.render = function () {
- return (React.createElement("div", null, React.createElement("div", {style: { display: "flex", flexWrap: "nowrap" }}, React.createElement("div", {style: { flex: 1 }}, React.createElement("input", {type: "number", style: { width: "100%" }, min: this.state.sizeValueMin, max: this.state.sizeValueMax, step: this.state.sizeValueStep, onChange: this.onChangeValue.bind(this), value: this.state.sizeValue})), React.createElement("div", {style: { marginLeft: "5px" }}, React.createElement("select", {defaultValue: this.state.sizeUnit, onChange: this.onChangeUnit.bind(this)}, SizeUnit.map(function (unit, index) { return React.createElement("option", {key: index, value: unit}, unit); })))), React.createElement("input", {type: "range", style: { width: "100%" }, min: this.state.sizeValueMin, max: "" + this.state.sizeValueMax, step: this.state.sizeValueStep, onChange: this.onChangeValue.bind(this), value: this.state.sizeValue})));
- };
- return InputSize;
- }(React.Component));
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = InputSize;
- /***/ },
- /* 8 */
- /***/ function(module, exports) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var __extends = (this && this.__extends) || function (d, b) {
- for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- var InputNumber = (function (_super) {
- __extends(InputNumber, _super);
- function InputNumber() {
- _super.apply(this, arguments);
- this.defaultProps = {
- min: 1,
- max: 200,
- step: 1,
- value: ""
- };
- this.state = {
- sizeValueMin: this.props.min,
- sizeValueMax: this.props.max,
- sizeValueStep: this.props.step,
- sizeValue: this.props.value,
- };
- }
- InputNumber.prototype.onChangeValue = function (event) {
- var value = parseFloat(event.target.value);
- if (this.props.onChange && value) {
- this.props.onChange(value);
- }
- this.setState({ sizeValue: value });
- };
- InputNumber.prototype.render = function () {
- return (React.createElement("div", null, React.createElement("div", {style: { display: "flex", width: "100%" }}, React.createElement("div", {style: { flex: 1 }}, React.createElement("input", {type: "number", style: { width: "100%" }, min: this.state.sizeValueMin, max: this.state.sizeValueMax, step: this.state.sizeValueStep, onChange: this.onChangeValue.bind(this), value: this.state.sizeValue}))), React.createElement("input", {type: "range", style: { width: "100%" }, min: this.state.sizeValueMin, max: this.state.sizeValueMax, step: this.state.sizeValueStep, onChange: this.onChangeValue.bind(this), value: this.state.sizeValue})));
- };
- return InputNumber;
- }(React.Component));
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = InputNumber;
- /***/ },
- /* 9 */
- /***/ function(module, exports, __webpack_require__) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var __extends = (this && this.__extends) || function (d, b) {
- for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- var color_1 = __webpack_require__(10);
- var ColorPicker = (function (_super) {
- __extends(ColorPicker, _super);
- function ColorPicker(props) {
- _super.call(this, props);
- if (this.props.color) {
- var rgb = color_1.RGB.fromString(this.props.color);
- var hsv = rgb.toHSV();
- console.log(this.props.color);
- console.log(rgb.toString());
- console.log(hsv.toString());
- this.state = {
- pressH: false,
- pressSV: false,
- color: this.props.color,
- saturation: hsv.saturation,
- value: hsv.value,
- hue: hsv.hue
- };
- }
- else if (this.props.defaultColor) {
- var rgb = color_1.RGB.fromString(this.props.defaultColor);
- var hsv = rgb.toHSV();
- this.state = {
- pressH: false,
- pressSV: false,
- color: this.props.defaultColor,
- saturation: hsv.saturation,
- value: hsv.value,
- hue: hsv.hue
- };
- }
- else {
- this.state = {
- pressH: false,
- pressSV: false,
- color: this.props.color,
- saturation: 0,
- value: 0,
- hue: 0
- };
- }
- }
- // constructor(props) {
- // super(props);
- // relMouseCoords(event: MouseEvent){
- // var totalOffsetX = 0;
- // var totalOffsetY = 0;
- // var canvasX = 0;
- // var canvasY = 0;
- // var currentElement = this;
- // do{
- // totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
- // totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
- // }
- // while(currentElement = currentElement.offsetParent)
- // canvasX = event.pageX - totalOffsetX;
- // canvasY = event.pageY - totalOffsetY;
- // return {x:canvasX, y:canvasY}
- // }
- // }
- ColorPicker.prototype.onMouseDownH = function (event) {
- var $div = $(event.target);
- var offsetX = $div.offset().left;
- var offsetY = $div.offset().top;
- var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * color_1.HSV.H_MAX;
- if (this.props.onChange) {
- var hsv = new color_1.HSV(hue, this.state.saturation, this.state.value);
- var rgb = hsv.toRGB();
- var colorCode = rgb.getColorCode();
- this.props.onChange(colorCode);
- }
- this.setState({
- pressH: true,
- hue: hue
- });
- };
- ColorPicker.prototype.onMouseMoveH = function (event) {
- if (this.state.pressH) {
- var $div = $(event.target);
- var offsetX = $div.offset().left;
- var offsetY = $div.offset().top;
- var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * color_1.HSV.H_MAX;
- if (this.props.onChange) {
- var hsv = new color_1.HSV(hue, this.state.saturation, this.state.value);
- var rgb = hsv.toRGB();
- var colorCode = rgb.getColorCode();
- this.props.onChange(colorCode);
- }
- this.setState({
- hue: hue
- });
- }
- };
- ColorPicker.prototype.onMouseUpH = function (event) {
- var $div = $(event.target);
- var offsetX = $div.offset().left;
- var offsetY = $div.offset().top;
- var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * color_1.HSV.H_MAX;
- var hsv = new color_1.HSV(hue, this.state.saturation, this.state.value);
- var rgb = hsv.toRGB();
- var colorCode = rgb.getColorCode();
- if (this.props.onChange) {
- this.props.onChange(colorCode);
- }
- if (this.props.onChangeComplete) {
- this.props.onChangeComplete(colorCode);
- }
- this.setState({
- pressH: false,
- hue: hue
- });
- };
- ColorPicker.prototype.onMouseDownSV = function (event) {
- var $div = $(event.target);
- var offsetX = $div.offset().left;
- var offsetY = $div.offset().top;
- var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
- var value = color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
- if (this.props.onChange) {
- var hsv = new color_1.HSV(this.state.hue, saturation, value);
- var rgb = hsv.toRGB();
- this.props.onChange(rgb.getColorCode());
- }
- this.setState({
- pressSV: true,
- saturation: saturation,
- value: value
- });
- };
- ColorPicker.prototype.onMouseMoveSV = function (event) {
- if (this.state.pressSV) {
- var $div = $(event.target);
- var offsetX = $div.offset().left;
- var offsetY = $div.offset().top;
- var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
- var value = color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
- if (this.props.onChange) {
- var hsv = new color_1.HSV(this.state.hue, saturation, value);
- var rgb = hsv.toRGB();
- this.props.onChange(rgb.getColorCode());
- }
- this.setState({
- saturation: saturation,
- value: value
- });
- }
- };
- ColorPicker.prototype.onMouseUpSV = function (event) {
- var $div = $(event.target);
- var offsetX = $div.offset().left;
- var offsetY = $div.offset().top;
- var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
- var value = color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
- var hsv = new color_1.HSV(this.state.hue, saturation, value);
- var rgb = hsv.toRGB();
- var colorCode = rgb.getColorCode();
- if (this.props.onChange) {
- this.props.onChange(colorCode);
- }
- if (this.props.onChangeComplete) {
- this.props.onChangeComplete(colorCode);
- }
- this.setState({
- pressSV: false,
- saturation: saturation,
- value: value
- });
- };
- ColorPicker.prototype.render = function () {
- return (React.createElement("div", {style: { height: "150px" }}, React.createElement("div", {ref: "colorSelector", style: { float: "left", position: "relative", width: ColorPicker.SV_WIDTH + "px", height: ColorPicker.H_HEIGHT + "px" }}, React.createElement("div", {style: { position: "absolute",
- width: "100%", height: "100%",
- background: "linear-gradient(to right, #FFF 0%, " + new color_1.HSV(this.state.hue, color_1.HSV.SV_MAX, color_1.HSV.SV_MAX).toRGB().getColorCode() + " 100%)"
- }}, React.createElement("div", {style: {
- width: "100%", height: "100%",
- background: "linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%)"
- }, onMouseDown: this.onMouseDownSV.bind(this), onMouseUp: this.onMouseUpSV.bind(this), onMouseMove: this.onMouseMoveSV.bind(this)})), React.createElement("div", {style: {
- pointerEvents: "none",
- position: "relative",
- left: "" + ((ColorPicker.SV_HEIGHT * (this.state.saturation / color_1.HSV.SV_MAX)) - 5) + "px",
- top: "" + ((ColorPicker.SV_HEIGHT * ((color_1.HSV.SV_MAX - this.state.value) / color_1.HSV.SV_MAX)) - 5) + "px"
- }}, React.createElement("svg", {width: "10", height: "10", viewBox: "0 0 10 10"}, React.createElement("circle", {style: { stroke: "gray", strokeWidth: "2", fill: "rgba(0, 0, 0, 0)" }, cx: "5", cy: "5", r: "3"}), React.createElement("circle", {style: { stroke: "white", strokeWidth: "1", fill: "rgba(0, 0, 0, 0)" }, cx: "5", cy: "5", r: "3"})))), React.createElement("div", {style: { position: "relative",
- float: "left",
- marginLeft: "5px",
- width: "15px",
- height: ColorPicker.SV_HEIGHT + "px" }, onMouseDown: this.onMouseDownH.bind(this), onMouseUp: this.onMouseUpH.bind(this), onMouseMove: this.onMouseMoveH.bind(this)}, React.createElement("div", {style: {
- position: "absolute",
- width: "15px",
- height: ColorPicker.SV_HEIGHT + "px",
- background: "linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 34%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)" }}), React.createElement("div", {style: {
- pointerEvents: "none",
- position: "absolute",
- backgroundColor: "white",
- borderBottom: "1px solid #000",
- left: "0px",
- top: ((ColorPicker.H_HEIGHT * (this.state.hue / color_1.HSV.H_MAX)) - 1) + "px",
- width: "15px",
- height: "2px" }}))));
- };
- ColorPicker.SV_HEIGHT = 150;
- ColorPicker.SV_WIDTH = 150;
- ColorPicker.H_HEIGHT = 150;
- return ColorPicker;
- }(React.Component));
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = ColorPicker;
- /***/ },
- /* 10 */
- /***/ function(module, exports) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var RGB = (function () {
- function RGB(red, green, blue) {
- this.red = red;
- this.green = green;
- this.blue = blue;
- }
- RGB.prototype.toHSV = function () {
- var max = Math.max(this.red, this.green, this.blue);
- var min = Math.min(this.red, this.green, this.blue);
- var h, s, v;
- if (this.red === this.green && this.green === this.blue) {
- h = 0;
- }
- else if (max === this.red) {
- h = HSV.H1 * ((this.green - this.blue) / (max - min));
- }
- else if (max === this.green) {
- h = HSV.H1 * ((this.blue - this.red) / (max - min)) + HSV.H2;
- }
- else if (max === this.blue) {
- h = HSV.H1 * ((this.red - this.green) / (max - min)) + HSV.H4;
- }
- else {
- throw new Error("Internal error.");
- }
- h %= HSV.H_MAX;
- if (h < 0)
- h += HSV.H_MAX;
- return new HSV(h, (max - min) / max * HSV.SV_MAX, max / RGB.MAX * HSV.SV_MAX);
- };
- RGB.fromString = function (str) {
- if (/^#?[a-f\d]{3,8}$/i.exec(str)) {
- if (str.indexOf("#") === 0) {
- str = str.substring(1);
- }
- switch (str.length) {
- case 3: {
- var r = str.substring(0, 1);
- var g = str.substring(1, 2);
- var b = str.substring(2, 3);
- return new RGB(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16));
- }
- case 6: {
- var r = str.substring(0, 2);
- var g = str.substring(2, 4);
- var b = str.substring(4, 6);
- return new RGB(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
- }
- default:
- throw new Error("Not supported color code type.");
- }
- }
- else {
- return RGB.fromString(RGB.colourNameToHex(str));
- }
- };
- RGB.colourNameToHex = function (colour) {
- var colours = { "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",
- "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887",
- "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff",
- "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",
- "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",
- "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",
- "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
- "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f",
- "honeydew": "#f0fff0", "hotpink": "#ff69b4",
- "indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",
- "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
- "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de",
- "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",
- "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
- "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",
- "navajowhite": "#ffdead", "navy": "#000080",
- "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",
- "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",
- "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",
- "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4",
- "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",
- "violet": "#ee82ee",
- "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",
- "yellow": "#ffff00", "yellowgreen": "#9acd32" };
- if (typeof colours[colour.toLowerCase()] != 'undefined')
- return colours[colour.toLowerCase()];
- return false;
- };
- RGB.prototype.getColorCode = function () {
- var r = Math.round(this.red).toString(16);
- var g = Math.round(this.green).toString(16);
- var b = Math.round(this.blue).toString(16);
- switch (r.length) {
- case 0:
- r = "00";
- break;
- case 1:
- r = "0" + r;
- break;
- case 2: break;
- case 3:
- r = "FF";
- break;
- default: throw new Error("Number format error.");
- }
- switch (g.length) {
- case 0:
- g = "00";
- break;
- case 1:
- g = "0" + g;
- break;
- case 2: break;
- case 3:
- g = "FF";
- break;
- default: throw new Error("Number format error.");
- }
- switch (b.length) {
- case 0:
- b = "00";
- break;
- case 1:
- b = "0" + b;
- break;
- case 2: break;
- case 3:
- b = "FF";
- break;
- default: throw new Error("Number format error.");
- }
- return "#" + r + g + b;
- };
- RGB.prototype.toString = function () {
- return "rgb(" + Math.round(this.red) + ", " + Math.round(this.green) + ", " + Math.round(this.blue) + ")";
- };
- RGB.MIN = 0;
- RGB.MAX = 255;
- return RGB;
- }());
- exports.RGB = RGB;
- var HSV = (function () {
- function HSV(hue, saturation, value) {
- this.hue = hue;
- this.saturation = saturation;
- this.value = value;
- }
- HSV.prototype.toRGB = function () {
- var hue = this.hue;
- var hue2 = hue / (HSV.H_MAX / 6);
- var hue3 = Math.floor(hue2);
- var max = this.value;
- var min = max - ((this.saturation / HSV.SV_MAX) * max);
- if (hue3 < 0 || 5 < hue3) {
- throw new Error();
- }
- switch (hue3) {
- case 0:
- return new RGB(max, (hue / HSV.H1) * (max - min) + min, min);
- case 1:
- return new RGB(((HSV.H2 - hue) / HSV.H1) * (max - min) + min, max, min);
- case 2:
- return new RGB(min, max, ((hue - HSV.H2) / HSV.H1) * (max - min) + min);
- case 3:
- return new RGB(min, ((HSV.H4 - hue) / HSV.H1) * (max - min) + min, max);
- case 4:
- return new RGB(((hue - HSV.H4) / HSV.H1) * (max - min) + min, min, max);
- case 5:
- return new RGB(max, min, ((HSV.H6 - hue) / HSV.H1) * (max - min) + min);
- }
- };
- HSV.prototype.toString = function () {
- return "hsv(" + Math.round(this.hue) + ", " + Math.round(this.saturation) + ", " + Math.round(this.value) + ")";
- };
- HSV.H_MAX = 360;
- /* 60 */ HSV.H1 = HSV.H_MAX / 6;
- /* 120 */ HSV.H2 = HSV.H1 * 2;
- /* 240 */ HSV.H4 = HSV.H1 * 4;
- /* 360 */ HSV.H6 = HSV.H1 * 6;
- HSV.SV_MAX = 255;
- return HSV;
- }());
- exports.HSV = HSV;
- /***/ },
- /* 11 */
- /***/ function(module, exports, __webpack_require__) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var indexBoxWrapper_1 = __webpack_require__(2);
- var SideMenu = (function () {
- function SideMenu(context, address) {
- var _this = this;
- this.address = address;
- this.$sideMenu = $("#side_menu");
- if (this.$sideMenu.length <= 0) {
- this.$sideMenu = $("\n <div id=\"side_menu\" style=\"position: fixed; top: 0px; left: -" + SideMenu.menuSize + "px; width: " + SideMenu.menuSize + "px; z-index: 5; overflow-y: scroll\">\n </div>\n ");
- var windowHeight = $(window).height();
- this.$sideMenu.height(windowHeight);
- $(window).resize(function () {
- var windowHeight = $(window).height();
- _this.$sideMenu.height(windowHeight);
- });
- $(document.body).append(this.$sideMenu);
- }
- this.context = context;
- this.isSideMenuOpened = false;
- this.isSidePageLoaded = false;
- }
- SideMenu.prototype.css = function (obj) {
- this.$sideMenu.css(obj);
- };
- SideMenu.prototype.loadSidePage = function (context) {
- var _this = this;
- this.isSidePageLoaded = true;
- // const targetUrl = location.protocol + "//" + location.host + "/" + novelCode;
- console.log("Loading menu", this.address);
- var requestMenu = new XMLHttpRequest();
- // requestMenu.onreadystatechange
- requestMenu.addEventListener("load", function (event) {
- var loadPage = $(requestMenu.responseXML);
- var $indexBox = loadPage.find("body .index_box");
- var indexBoxWrapper = new indexBoxWrapper_1.default($indexBox);
- indexBoxWrapper.reconstructIndex(context);
- indexBoxWrapper.applyAlreadyReadOnIndex(context);
- _this.$sideMenu.append($indexBox);
- });
- requestMenu.open("GET", this.address, true);
- requestMenu.responseType = 'document';
- requestMenu.send();
- $(document.head).append($("\n <style>\n .index_box {\n width: auto;\n }\n dl.novel_sublist2 {\n margin: 5px 10px;\n }\n dl.novel_sublist2 dd {\n width: auto;\n }\n dl.novel_sublist2 dt {\n display: none;\n width: auto;\n }\n </style>\n "));
- };
- SideMenu.prototype.showSideMenu = function () {
- this.isSideMenuOpened = true;
- if (!this.isSidePageLoaded) {
- this.loadSidePage(this.context);
- }
- console.log("Open menu");
- this.$sideMenu.stop().animate({ left: "0" }, SideMenu.menuSpeed).addClass("active");
- };
- SideMenu.prototype.closeSideMenu = function () {
- this.isSideMenuOpened = false;
- this.$sideMenu.stop().animate({ left: "-" + SideMenu.menuSize + "px" }, SideMenu.menuSpeed).removeClass("active");
- };
- ;
- SideMenu.menuSize = 350;
- SideMenu.menuSpeed = 300;
- return SideMenu;
- }());
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = SideMenu;
- /***/ },
- /* 12 */
- /***/ function(module, exports, __webpack_require__) {
- /// <reference path="./../typings/index.d.ts" />
- "use strict";
- var settingManager_1 = __webpack_require__(13);
- var Context = (function () {
- function Context(novelCode, defaultGlobalSettings, defaultNovelSettings) {
- this.isLoadedGlobalSettings = false;
- this.isLoadedNovelSettings = false;
- this.isLoadedReadSettings = false;
- this.globalSettingManager = new settingManager_1.default("narou_refiner", defaultGlobalSettings);
- this.novelSettingManager = new settingManager_1.default("narou_refiner_" + novelCode, defaultNovelSettings);
- this.readSettingManager = new settingManager_1.default("narou_refiner_read_" + novelCode);
- }
- Context.prototype.getGlobalSettings = function () {
- if (!this.isLoadedGlobalSettings) {
- this.globalSettings = this.globalSettingManager.load();
- }
- return this.globalSettings;
- };
- Context.prototype.readGlobalSetting = function (key) {
- if (!this.isLoadedGlobalSettings) {
- this.globalSettings = this.globalSettingManager.load();
- }
- return this.globalSettings[key];
- };
- Context.prototype.putGlobalSetting = function (key, value) {
- if (!this.isLoadedGlobalSettings) {
- this.globalSettings = this.globalSettingManager.load();
- }
- this.globalSettings[key] = value;
- };
- Context.prototype.saveGlobalSetting = function (key, value) {
- if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
- if (!this.isLoadedGlobalSettings) {
- this.globalSettings = this.globalSettingManager.load();
- }
- this.globalSettings[key] = value;
- this.globalSettingManager.save(this.globalSettings);
- }
- else if (arguments.length === 1 && typeof key === "object") {
- if (!this.isLoadedGlobalSettings) {
- this.globalSettings = this.globalSettingManager.load();
- }
- $.extend(this.globalSettings, key);
- this.globalSettingManager.save(this.globalSettings);
- }
- else if (arguments.length === 0) {
- if (this.globalSettings) {
- this.globalSettingManager.save(this.globalSettings);
- }
- }
- };
- Context.prototype.getNovelSettings = function () {
- if (!this.isLoadedNovelSettings) {
- this.novelSettings = this.novelSettingManager.load();
- }
- return this.novelSettings;
- };
- Context.prototype.readNovelSetting = function (key) {
- if (!this.isLoadedNovelSettings) {
- this.novelSettings = this.novelSettingManager.load();
- }
- return this.novelSettings[key];
- };
- Context.prototype.putNovelSetting = function (key, value) {
- if (!this.isLoadedNovelSettings) {
- this.novelSettings = this.novelSettingManager.load();
- }
- this.novelSettings[key] = value;
- };
- Context.prototype.saveNovelSetting = function (key, value) {
- if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
- if (!this.isLoadedNovelSettings) {
- this.novelSettings = this.novelSettingManager.load();
- }
- this.novelSettings[key] = value;
- this.novelSettingManager.save(this.novelSettings);
- }
- else if (arguments.length === 1 && typeof key === "object") {
- if (!this.isLoadedNovelSettings) {
- this.novelSettings = this.novelSettingManager.load();
- }
- $.extend(this.novelSettings, key);
- this.novelSettingManager.save(this.novelSettings);
- }
- else if (arguments.length === 0) {
- if (this.novelSettings) {
- this.novelSettingManager.save(this.novelSettings);
- }
- }
- };
- Context.prototype.getReadSettings = function () {
- if (!this.isLoadedReadSettings) {
- this.readSettings = this.readSettingManager.load();
- }
- return this.readSettings;
- };
- Context.prototype.readReadSetting = function (key) {
- if (!this.isLoadedReadSettings) {
- this.readSettings = this.readSettingManager.load();
- }
- return this.readSettings[key];
- };
- Context.prototype.putReadSetting = function (key, value) {
- if (!this.isLoadedReadSettings) {
- this.readSettings = this.readSettingManager.load();
- }
- this.readSettings[key] = value;
- };
- Context.prototype.saveReadSetting = function (key, value) {
- if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
- if (!this.isLoadedNovelSettings) {
- this.readSettings = this.readSettingManager.load();
- }
- this.readSettings[key] = value;
- this.readSettingManager.save(this.readSettings);
- }
- else if (arguments.length === 1 && typeof key === "object") {
- if (!this.isLoadedNovelSettings) {
- this.readSettings = this.readSettingManager.load();
- }
- $.extend(this.readSettings, key);
- this.readSettingManager.save(this.readSettings);
- }
- else if (arguments.length === 0) {
- if (this.readSettings) {
- this.readSettingManager.save(this.readSettings);
- }
- }
- };
- return Context;
- }());
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = Context;
- /***/ },
- /* 13 */
- /***/ function(module, exports) {
- "use strict";
- var SettingManager = (function () {
- function SettingManager(key, defaultSettings) {
- if (defaultSettings === void 0) { defaultSettings = {}; }
- this.key = key;
- this.settings = defaultSettings;
- }
- SettingManager.prototype.load = function () {
- return $.extend(this.settings, JSON.parse(localStorage.getItem(this.key)));
- };
- SettingManager.prototype.save = function (settings) {
- localStorage.setItem(this.key, JSON.stringify(settings));
- };
- return SettingManager;
- }());
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.default = SettingManager;
- /***/ }
- /******/ ]);