NarouRefiner

「小説家になろう」を読みやすく設定

当前为 2016-07-01 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name NarouRefiner
  3. // @namespace https://greasyfork.org/ja/users/52455-aosanori8
  4. // @version 0.4
  5. // @description 「小説家になろう」を読みやすく設定
  6. // @author aosanori8
  7. // @require https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js
  8. // @require https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js
  9. // @require https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js
  10. // @require https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js
  11. // @match http://ncode.syosetu.com/*
  12. // @match http://novel18.syosetu.com/*
  13. // @grant none
  14. // ==/UserScript==
  15.  
  16. /******/ (function(modules) { // webpackBootstrap
  17. /******/ // The module cache
  18. /******/ var installedModules = {};
  19.  
  20. /******/ // The require function
  21. /******/ function __webpack_require__(moduleId) {
  22.  
  23. /******/ // Check if module is in cache
  24. /******/ if(installedModules[moduleId])
  25. /******/ return installedModules[moduleId].exports;
  26.  
  27. /******/ // Create a new module (and put it into the cache)
  28. /******/ var module = installedModules[moduleId] = {
  29. /******/ exports: {},
  30. /******/ id: moduleId,
  31. /******/ loaded: false
  32. /******/ };
  33.  
  34. /******/ // Execute the module function
  35. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  36.  
  37. /******/ // Flag the module as loaded
  38. /******/ module.loaded = true;
  39.  
  40. /******/ // Return the exports of the module
  41. /******/ return module.exports;
  42. /******/ }
  43.  
  44.  
  45. /******/ // expose the modules object (__webpack_modules__)
  46. /******/ __webpack_require__.m = modules;
  47.  
  48. /******/ // expose the module cache
  49. /******/ __webpack_require__.c = installedModules;
  50.  
  51. /******/ // __webpack_public_path__
  52. /******/ __webpack_require__.p = "";
  53.  
  54. /******/ // Load entry module and return exports
  55. /******/ return __webpack_require__(0);
  56. /******/ })
  57. /************************************************************************/
  58. /******/ ([
  59. /* 0 */
  60. /***/ function(module, exports, __webpack_require__) {
  61.  
  62. /// <reference path="./../typings/index.d.ts" />
  63. /// <reference path="./novelView.d.ts" />
  64. "use strict";
  65. var novelViewWrapper_1 = __webpack_require__(1);
  66. var indexBoxWrapper_1 = __webpack_require__(2);
  67. var wordDirectionSelector_1 = __webpack_require__(3);
  68. var fontSelector_1 = __webpack_require__(5);
  69. var inputSize_1 = __webpack_require__(7);
  70. var inputNumber_1 = __webpack_require__(8);
  71. var colorPicker_1 = __webpack_require__(9);
  72. var sideMenu_1 = __webpack_require__(11);
  73. var context_1 = __webpack_require__(12);
  74. var pathParts = location.pathname.split("/").filter(Boolean);
  75. if (pathParts.length >= 1) {
  76. var novelCode = pathParts[0], articleNum = pathParts[1];
  77. //////////////////////////////////////////////////////////////////
  78. // LocalStorageからグローバル設定、作品設定を読み込む
  79. //////////////////////////////////////////////////////////////////
  80. var DEFAULT_GLOBAL_SETTINGS = {
  81. textColor: "#000",
  82. backgroundColor: "#FFF",
  83. wordDirection: "horizontal-tb",
  84. novelWidth: "95%",
  85. font: null,
  86. fontList: [],
  87. fontSize: "12px",
  88. fontWeight: 500,
  89. letterSpacing: "",
  90. // wordSpacing: "",
  91. lineHeight: "",
  92. kanjiMargin: "0px",
  93. kanjiSize: "100%",
  94. katakanaMargin: "0px",
  95. katakanaSize: "100%",
  96. serifMargin: "0px",
  97. serifSize: "100%",
  98. expandNaviLayout: true,
  99. expandNaviFont: true,
  100. expandNaviTypeSetting: false,
  101. expandNaviProportion: false
  102. };
  103. var DEFAULT_SETTINGS = { toggles: [] };
  104. var context_2 = new context_1.default(novelCode, DEFAULT_GLOBAL_SETTINGS, DEFAULT_SETTINGS);
  105. //////////////////////////////////////////////////////////////////
  106. // ナビゲーターの構築
  107. //////////////////////////////////////////////////////////////////
  108. $(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 "));
  109. var $customNavi = $("<div/>");
  110. $(".novelview_navi").prepend($customNavi);
  111. // ==== 色彩設定
  112. var $customColorLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviColor") ? "▼" : "▶") + " \u30AB\u30E9\u30FC</div>");
  113. $customNavi.append($customColorLabel_1);
  114. var $customColorContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviColor") ? "block" : "none") + "\" />");
  115. $customNavi.append($customColorContainer_1);
  116. $customColorLabel_1.click(function (event) {
  117. $customColorContainer_1.slideToggle(function () {
  118. var isDisplayed = $customColorContainer_1.css("display") !== "none";
  119. $customColorLabel_1.text((isDisplayed ? "▼" : "▶") + " カラー");
  120. context_2.saveGlobalSetting("expandNaviColor", isDisplayed);
  121. });
  122. });
  123. // ---- 文字色
  124. var textColor_1 = context_2.readGlobalSetting("textColor");
  125. $("#novel_color").css({ "color": textColor_1 });
  126. {
  127. var $textColorLabel = $("<div class=\"navi_label2\">\u6587\u5B57\u8272</div>");
  128. $customColorContainer_1.append($textColorLabel);
  129. var textColorController = document.createElement("div");
  130. ReactDOM.render(React.createElement(colorPicker_1.default, {color: textColor_1, onChange: function (color) {
  131. $("#novel_color").css({ "color": color });
  132. }, onChangeComplete: function (color) {
  133. $("#novel_color").css({ "color": color });
  134. context_2.saveGlobalSetting("textColor", color);
  135. }}), textColorController);
  136. $customColorContainer_1.append(textColorController);
  137. }
  138. $customColorContainer_1.append($("<div class=\"navi_spacing2\" />"));
  139. // ---- 背景色
  140. var backgroundColor_1 = context_2.readGlobalSetting("backgroundColor");
  141. $("body").css({ "background-color": backgroundColor_1 });
  142. {
  143. var $backgroundColorLabel = $("<div class=\"navi_label2\">\u80CC\u666F\u8272</div>");
  144. $customColorContainer_1.append($backgroundColorLabel);
  145. var backgroundColorController = document.createElement("div");
  146. ReactDOM.render(React.createElement(colorPicker_1.default, {color: backgroundColor_1, onChange: function (color) {
  147. $("body").css({ "background-color": color });
  148. }, onChangeComplete: function (color) {
  149. $("body").css({ "background-color": color });
  150. context_2.saveGlobalSetting("backgroundColor", color);
  151. }}), backgroundColorController);
  152. $customColorContainer_1.append(backgroundColorController);
  153. }
  154. $customNavi.append($("<div class=\"navi_spacing1\" />"));
  155. // サイドメニュー構築
  156. var allowedAddresses = ["ncode.syosetu.com", "novel18.syosetu.com"];
  157. if (allowedAddresses.indexOf(location.host) >= 0) {
  158. var sideAddress = location.protocol + "//" + location.host + "/" + novelCode;
  159. var sideMenu_2 = new sideMenu_1.default(context_2, sideAddress);
  160. sideMenu_2.css({ color: textColor_1, backgroundColor: backgroundColor_1 });
  161. document.addEventListener("mousemove", function (event) {
  162. if (event.pageX < 10 && !sideMenu_2.isSideMenuOpened) {
  163. sideMenu_2.css({ color: textColor_1, backgroundColor: backgroundColor_1 });
  164. sideMenu_2.showSideMenu();
  165. }
  166. else if (event.pageX > sideMenu_1.default.menuSize && sideMenu_2.isSideMenuOpened) {
  167. sideMenu_2.closeSideMenu();
  168. }
  169. });
  170. }
  171. if ($("#novel_ex").length > 0) {
  172. //////////////////////////////////////////////////////////////////
  173. // 目次ページ
  174. //////////////////////////////////////////////////////////////////
  175. var indexBoxWrapper = new indexBoxWrapper_1.default($("div#novel_ex + div.index_box"));
  176. indexBoxWrapper.reconstructIndex(context_2);
  177. indexBoxWrapper.applyAlreadyReadOnIndex(context_2);
  178. }
  179. else if ($("#novel_honbun").length > 0) {
  180. //////////////////////////////////////////////////////////////////
  181. // 本文ページ
  182. //////////////////////////////////////////////////////////////////
  183. context_2.saveReadSetting("articleNum", new Date().toString());
  184. // CSSを設定
  185. $("#container")
  186. .find("#novel_contents, #novel_p, #novel_color")
  187. .css({ "width": "auto" });
  188. // 変更を適用したい箇所を操作用クラスでラップ
  189. var novelViews_1 = [new novelViewWrapper_1.default($(".novel_subtitle"), $("#novel_honbun"))];
  190. // ==== レイアウト
  191. var $customLayoutLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviLayout") ? "▼" : "▶") + " \u30EC\u30A4\u30A2\u30A6\u30C8</div>");
  192. $customNavi.append($customLayoutLabel_1);
  193. var $customLayoutContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviLayout") ? "block" : "none") + "\" />");
  194. $customNavi.append($customLayoutContainer_1);
  195. $customLayoutLabel_1.click(function (event) {
  196. $customLayoutContainer_1.slideToggle(function () {
  197. var isDisplayed = $customLayoutContainer_1.css("display") !== "none";
  198. $customLayoutLabel_1.text((isDisplayed ? "▼" : "▶") + " レイアウト");
  199. context_2.saveGlobalSetting("expandNaviLayout", isDisplayed);
  200. });
  201. });
  202. // ---- 字送り・行送り
  203. var wordDirection_1 = context_2.readGlobalSetting("wordDirection");
  204. {
  205. var $wordDirectionLabel = $("<div class=\"navi_label2\">\u5B57\u9001\u308A\u30FB\u884C\u9001\u308A</div>");
  206. $customLayoutContainer_1.append($wordDirectionLabel);
  207. var wordDirectionController = document.createElement("div");
  208. ReactDOM.render(React.createElement(wordDirectionSelector_1.WordDirectionSelector, {wordDirection: wordDirection_1, onChangeWordDirection: function (wordDirection) {
  209. for (var _i = 0, novelViews_2 = novelViews_1; _i < novelViews_2.length; _i++) {
  210. var novelView = novelViews_2[_i];
  211. novelView.changeWritingMode(wordDirection);
  212. }
  213. context_2.saveGlobalSetting("wordDirection", wordDirection);
  214. }}), wordDirectionController);
  215. $customLayoutContainer_1.append(wordDirectionController);
  216. }
  217. $customLayoutContainer_1.append($("<div class=\"navi_spacing2\" />"));
  218. // ---- ページ横幅
  219. var novelWidth_1 = context_2.readGlobalSetting("novelWidth");
  220. {
  221. $customLayoutContainer_1.append($("<div class=\"navi_label2\">\u30DA\u30FC\u30B8\u6A2A\u5E45</div>"));
  222. var novelWidthController = document.createElement("div");
  223. ReactDOM.render(React.createElement(inputSize_1.default, {value: novelWidth_1, onChange: function (sizeValue) {
  224. console.log("Width: " + sizeValue);
  225. for (var _i = 0, novelViews_3 = novelViews_1; _i < novelViews_3.length; _i++) {
  226. var novelView = novelViews_3[_i];
  227. novelView.changeWidth(sizeValue);
  228. }
  229. context_2.saveGlobalSetting("novelWidth", sizeValue);
  230. }}), novelWidthController);
  231. $customLayoutContainer_1.append(novelWidthController);
  232. }
  233. $customNavi.append($("<div class=\"navi_spacing1\" />"));
  234. // ==== フォント
  235. var $customFontLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviFont") ? "▼" : "▶") + " \u30D5\u30A9\u30F3\u30C8</div>");
  236. $customNavi.append($customFontLabel_1);
  237. var $customFontContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviFont") ? "block" : "none") + "\" />");
  238. $customNavi.append($customFontContainer_1);
  239. $customFontLabel_1.click(function (event) {
  240. $customFontContainer_1.slideToggle(function () {
  241. var isDisplayed = $customFontContainer_1.css("display") !== "none";
  242. $customFontLabel_1.text((isDisplayed ? "▼" : "▶") + " フォント");
  243. context_2.saveGlobalSetting("expandNaviFont", isDisplayed);
  244. });
  245. });
  246. // ---- 書体設定
  247. var font_1 = context_2.readGlobalSetting("font");
  248. var fontList = context_2.readGlobalSetting("fontList");
  249. {
  250. $customFontContainer_1.append($("<div class=\"navi_label2\">\u66F8\u4F53</div>"));
  251. var fontSelector = document.createElement("div");
  252. ReactDOM.render(React.createElement(fontSelector_1.FontSelector, {font: font_1, fontList: fontList, onChangeFontListener: function (font) {
  253. for (var _i = 0, novelViews_4 = novelViews_1; _i < novelViews_4.length; _i++) {
  254. var novelView = novelViews_4[_i];
  255. novelView.changeFont(font);
  256. }
  257. context_2.saveGlobalSetting("font", font);
  258. }, onChangeFontListListener: function (fontList) {
  259. context_2.saveGlobalSetting("fontList", fontList);
  260. }}), fontSelector);
  261. $customFontContainer_1.append(fontSelector);
  262. }
  263. $customFontContainer_1.append($("<div class=\"navi_spacing2\" />"));
  264. // ---- フォントサイズ
  265. var fontSize_1 = context_2.readGlobalSetting("fontSize");
  266. {
  267. $customFontContainer_1.append($("<div class=\"navi_label2\">\u6587\u5B57\u30B5\u30A4\u30BA</div>"));
  268. var fontSizeController = document.createElement("div");
  269. ReactDOM.render(React.createElement(inputSize_1.default, {value: fontSize_1, onChange: function (sizeValue) {
  270. for (var _i = 0, novelViews_5 = novelViews_1; _i < novelViews_5.length; _i++) {
  271. var novelView = novelViews_5[_i];
  272. novelView.changeFontSize(sizeValue);
  273. }
  274. context_2.saveGlobalSetting("fontSize", sizeValue);
  275. }}), fontSizeController);
  276. $customFontContainer_1.append(fontSizeController);
  277. }
  278. $customFontContainer_1.append($("<div class=\"navi_spacing2\" />"));
  279. // ---- 文字ウェイト
  280. var fontWeight_1 = context_2.readGlobalSetting("fontWeight");
  281. {
  282. $customFontContainer_1.append($("<div class=\"navi_label2\">\u6587\u5B57\u30A6\u30A7\u30A4\u30C8</div>"));
  283. var fontWeightController = document.createElement("div");
  284. ReactDOM.render(React.createElement(inputNumber_1.default, {value: fontWeight_1, min: 100, max: 1000, step: 100, onChange: function (sizeValue) {
  285. console.log("Font Weight: " + sizeValue);
  286. for (var _i = 0, novelViews_6 = novelViews_1; _i < novelViews_6.length; _i++) {
  287. var novelView = novelViews_6[_i];
  288. novelView.changeFontWeight("" + sizeValue);
  289. }
  290. context_2.saveGlobalSetting("fontWeight", sizeValue);
  291. }}), fontWeightController);
  292. $customFontContainer_1.append(fontWeightController);
  293. }
  294. $customNavi.append($("<div class=\"navi_spacing1\" />"));
  295. // ==== 文字組み
  296. var $customTypeSettingLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviTypeSetting") ? "▼" : "▶") + " \u6587\u5B57\u7D44\u307F</div>");
  297. $customNavi.append($customTypeSettingLabel_1);
  298. var $customTypeSettingContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviTypeSetting") ? "block" : "none") + "\" />");
  299. $customNavi.append($customTypeSettingContainer_1);
  300. $customTypeSettingLabel_1.click(function (event) {
  301. $customTypeSettingContainer_1.slideToggle(function () {
  302. var isDisplayed = $customTypeSettingContainer_1.css("display") !== "none";
  303. $customTypeSettingLabel_1.text((isDisplayed ? "▼" : "▶") + " 文字組み");
  304. context_2.saveGlobalSetting("expandNaviTypeSetting", isDisplayed);
  305. });
  306. });
  307. // ---- 文字間隔
  308. var letterSpacing_1 = context_2.readGlobalSetting("letterSpacing");
  309. {
  310. $customTypeSettingContainer_1.append($("<div class=\"navi_label2\">\u6587\u5B57\u9593\u9694</div>"));
  311. var letterSpacingController = document.createElement("div");
  312. ReactDOM.render(React.createElement(inputSize_1.default, {value: letterSpacing_1, onChange: function (sizeValue) {
  313. console.log("Letter Spacing: " + sizeValue);
  314. for (var _i = 0, novelViews_7 = novelViews_1; _i < novelViews_7.length; _i++) {
  315. var novelView = novelViews_7[_i];
  316. novelView.changeLetterSpacing(sizeValue);
  317. }
  318. context_2.saveGlobalSetting("letterSpacing", sizeValue);
  319. }}), letterSpacingController);
  320. $customTypeSettingContainer_1.append(letterSpacingController);
  321. }
  322. $customTypeSettingContainer_1.append($("<div class=\"navi_spacing2\" />"));
  323. // ---- 行間隔
  324. var lineHeight_1 = context_2.readGlobalSetting("lineHeight");
  325. {
  326. $customTypeSettingContainer_1.append($("<div class=\"navi_label2\">\u884C\u9593\u9694</div>"));
  327. var lineHeightController = document.createElement("div");
  328. ReactDOM.render(React.createElement(inputSize_1.default, {value: lineHeight_1, onChange: function (sizeValue) {
  329. console.log("Line Height: " + sizeValue);
  330. for (var _i = 0, novelViews_8 = novelViews_1; _i < novelViews_8.length; _i++) {
  331. var novelView = novelViews_8[_i];
  332. novelView.changeLineHeight(sizeValue);
  333. }
  334. context_2.saveGlobalSetting("lineHeight", sizeValue);
  335. }}), lineHeightController);
  336. $customTypeSettingContainer_1.append(lineHeightController);
  337. }
  338. // ---- 単語間隔
  339. // let wordSpacing: string = context.readGlobalSetting("wordSpacing");
  340. // {
  341. //
  342. // $customTypeSettingContainer.append($(`<div class="navi_label2">▼単語間隔</div>`));
  343. //
  344. // const wordSpacingController = document.createElement("div");
  345. // ReactDOM.render(
  346. // <InputSize value={wordSpacing} onChange={ (sizeValue: string) => {
  347. // console.log("Word Spacing: " + sizeValue)
  348. // for (const novelView of novelViews) {
  349. // novelView.changeWordSpacing(sizeValue);
  350. // }
  351. // context.saveGlobalSetting("wordSpacing", sizeValue);
  352. // }} />,
  353. // wordSpacingController
  354. // );
  355. //
  356. // $customTypeSettingContainer.append(wordSpacingController);
  357. //
  358. // }
  359. $customNavi.append($("<div class=\"navi_spacing1\" />"));
  360. // ==== プロポーション
  361. var $customProportionLabel_1 = $("<div class=\"navi_label1\">" + (context_2.readGlobalSetting("expandNaviProportion") ? "▼" : "▶") + " \u30D7\u30ED\u30DD\u30FC\u30B7\u30E7\u30F3</div>");
  362. $customNavi.append($customProportionLabel_1);
  363. var $customProportionContainer_1 = $("<div class=\"navi_container1\" style=\"display: " + (context_2.readGlobalSetting("expandNaviProportion") ? "block" : "none") + "\" />");
  364. $customNavi.append($customProportionContainer_1);
  365. $customProportionLabel_1.click(function (event) {
  366. $customProportionContainer_1.slideToggle(function () {
  367. var isDisplayed = $customProportionContainer_1.css("display") !== "none";
  368. $customProportionLabel_1.text((isDisplayed ? "▼" : "▶") + " プロポーション");
  369. context_2.saveGlobalSetting("expandNaviProportion", isDisplayed);
  370. });
  371. });
  372. // ---- 漢字マージン調整
  373. var kanjiMargin_1 = context_2.readGlobalSetting("kanjiSpacing");
  374. {
  375. $customProportionContainer_1.append($("<div class=\"navi_label2\">\u6F22\u5B57\u30DE\u30FC\u30B8\u30F3</div>"));
  376. var kanjiMarginController = document.createElement("div");
  377. ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: kanjiMargin_1, onChange: function (sizeValue) {
  378. for (var _i = 0, novelViews_9 = novelViews_1; _i < novelViews_9.length; _i++) {
  379. var novelView = novelViews_9[_i];
  380. novelView.changeKanjiMargin(sizeValue);
  381. }
  382. context_2.saveGlobalSetting("kanjiMargin", sizeValue);
  383. }}), kanjiMarginController);
  384. $customProportionContainer_1.append(kanjiMarginController);
  385. }
  386. $customProportionContainer_1.append($("<div class=\"navi_spacing2\" />"));
  387. // ---- 漢字サイズ調整
  388. var kanjiSize_1 = context_2.readGlobalSetting("kanjiSize");
  389. {
  390. $customProportionContainer_1.append($("<div class=\"navi_label2\">\u6F22\u5B57\u30B5\u30A4\u30BA</div>"));
  391. var kanjiSizeController = document.createElement("div");
  392. ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: kanjiSize_1, onChange: function (sizeValue) {
  393. for (var _i = 0, novelViews_10 = novelViews_1; _i < novelViews_10.length; _i++) {
  394. var novelView = novelViews_10[_i];
  395. novelView.changeKanjiSize(sizeValue);
  396. }
  397. context_2.saveGlobalSetting("kanjiSize", sizeValue);
  398. }}), kanjiSizeController);
  399. $customProportionContainer_1.append(kanjiSizeController);
  400. }
  401. // ---- カタカナマージン調整
  402. var katakanaMargin_1 = context_2.readGlobalSetting("katakanaSpacing");
  403. {
  404. $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30AB\u30BF\u30AB\u30CA\u30DE\u30FC\u30B8\u30F3</div>"));
  405. var katakanaMarginController = document.createElement("div");
  406. ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: katakanaMargin_1, onChange: function (sizeValue) {
  407. for (var _i = 0, novelViews_11 = novelViews_1; _i < novelViews_11.length; _i++) {
  408. var novelView = novelViews_11[_i];
  409. novelView.changeKatakanaMargin(sizeValue);
  410. }
  411. context_2.saveGlobalSetting("katakanaMargin", sizeValue);
  412. }}), katakanaMarginController);
  413. $customProportionContainer_1.append(katakanaMarginController);
  414. }
  415. $customProportionContainer_1.append($("<div class=\"navi_spacing2\" />"));
  416. // ---- カタカナサイズ調整
  417. var katakanaSize_1 = context_2.readGlobalSetting("katakanaSize");
  418. {
  419. $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30AB\u30BF\u30AB\u30CA\u30B5\u30A4\u30BA</div>"));
  420. var katakanaSizeController = document.createElement("div");
  421. ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: katakanaSize_1, onChange: function (sizeValue) {
  422. for (var _i = 0, novelViews_12 = novelViews_1; _i < novelViews_12.length; _i++) {
  423. var novelView = novelViews_12[_i];
  424. novelView.changeKatakanaSize(sizeValue);
  425. }
  426. context_2.saveGlobalSetting("katakanaSize", sizeValue);
  427. }}), katakanaSizeController);
  428. $customProportionContainer_1.append(katakanaSizeController);
  429. }
  430. // ---- セリフマージン調整
  431. var serifMargin_1 = context_2.readGlobalSetting("serifSpacing");
  432. {
  433. $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30BB\u30EA\u30D5\u30DE\u30FC\u30B8\u30F3</div>"));
  434. var serifMarginController = document.createElement("div");
  435. ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: serifMargin_1, onChange: function (sizeValue) {
  436. for (var _i = 0, novelViews_13 = novelViews_1; _i < novelViews_13.length; _i++) {
  437. var novelView = novelViews_13[_i];
  438. novelView.changeSerifMargin(sizeValue);
  439. }
  440. context_2.saveGlobalSetting("serifMargin", sizeValue);
  441. }}), serifMarginController);
  442. $customProportionContainer_1.append(serifMarginController);
  443. }
  444. $customProportionContainer_1.append($("<div class=\"navi_spacing2\" />"));
  445. // ---- セリフサイズ調整
  446. var serifSize_1 = context_2.readGlobalSetting("serifSize");
  447. {
  448. $customProportionContainer_1.append($("<div class=\"navi_label2\">\u30BB\u30EA\u30D5\u30B5\u30A4\u30BA</div>"));
  449. var serifSizeController = document.createElement("div");
  450. ReactDOM.render(React.createElement(inputSize_1.default, {min: 0, max: 200, step: 1, value: serifSize_1, onChange: function (sizeValue) {
  451. for (var _i = 0, novelViews_14 = novelViews_1; _i < novelViews_14.length; _i++) {
  452. var novelView = novelViews_14[_i];
  453. novelView.changeSerifSize(sizeValue);
  454. }
  455. context_2.saveGlobalSetting("serifSize", sizeValue);
  456. }}), serifSizeController);
  457. $customProportionContainer_1.append(serifSizeController);
  458. }
  459. // $customNavi.append($(`<div class="navi_spacing1" style="width: 100%" />`));
  460. // ==== 文字詰め
  461. // ---- 未実装
  462. //////////////////////////////////////////////////////////////////
  463. // 画面レイアウトを一括で変更するための関数
  464. //////////////////////////////////////////////////////////////////
  465. var applyStyle_1 = function (novelView) {
  466. novelView.changeWritingMode(wordDirection_1);
  467. novelView.changeWidth(novelWidth_1);
  468. novelView.changeFont(font_1);
  469. novelView.changeFontSize(fontSize_1);
  470. novelView.changeFontWeight("" + fontWeight_1);
  471. novelView.changeLetterSpacing(letterSpacing_1);
  472. novelView.changeLineHeight(lineHeight_1);
  473. novelView.changeKanjiMargin(kanjiMargin_1);
  474. novelView.changeKanjiSize(kanjiSize_1);
  475. novelView.changeKatakanaMargin(katakanaMargin_1);
  476. novelView.changeKatakanaSize(katakanaSize_1);
  477. novelView.changeSerifMargin(serifMargin_1);
  478. novelView.changeSerifSize(serifSize_1);
  479. };
  480. //////////////////////////////////////////////////////////////////
  481. // 画面レイアウトを適用
  482. //////////////////////////////////////////////////////////////////
  483. for (var _i = 0, novelViews_15 = novelViews_1; _i < novelViews_15.length; _i++) {
  484. var novelView = novelViews_15[_i];
  485. applyStyle_1(novelView);
  486. }
  487. //////////////////////////////////////////////////////////////////
  488. // AutoPagerizeによるページロード時の動作
  489. //////////////////////////////////////////////////////////////////
  490. var recentNovelSubTitle_1 = null;
  491. document.body.addEventListener("AutoPagerize_DOMNodeInserted", function (event) {
  492. // console.log("Element", event.target, "RequestURL", (event as any).newValue, "ParentNode", (event as any).relatedNode);
  493. if (event.target.className && event.target.className === "novel_subtitle") {
  494. recentNovelSubTitle_1 = $(event.target);
  495. }
  496. else if (event.target.id && event.target.id === "novel_honbun") {
  497. var loadedPageAddress = event.newValue;
  498. var urlPaser = document.createElement("a");
  499. urlPaser.href = loadedPageAddress;
  500. var _a = urlPaser.pathname.split("/").filter(Boolean), loadedNovelCode = _a[0], loadedArticleNum = _a[1];
  501. context_2.saveReadSetting(loadedArticleNum, new Date().toString());
  502. var novelView = new novelViewWrapper_1.default(recentNovelSubTitle_1, $(event.target));
  503. novelViews_1.push(novelView);
  504. applyStyle_1(novelView);
  505. }
  506. // customizeContents($(target));
  507. }, false);
  508. }
  509. }
  510.  
  511.  
  512. /***/ },
  513. /* 1 */
  514. /***/ function(module, exports) {
  515.  
  516. /// <reference path="./../typings/index.d.ts" />
  517. "use strict";
  518. var NovelViewWrapper = (function () {
  519. function NovelViewWrapper($novelSubTitle, $novelView) {
  520. this.$oneNovel = $("<div style=\"margin: 30px auto 50px auto\" />");
  521. this.$oneNovel.insertBefore($novelSubTitle);
  522. this.$oneNovel.append($novelSubTitle);
  523. this.$oneNovel.append($novelView);
  524. $novelView.css("margin", "");
  525. $novelView.css({ "width": "auto" });
  526. this.$novelSubTitle = $novelSubTitle;
  527. this.$novelView = $novelView;
  528. this.isCreatedKanjiContainers = false;
  529. this.isCreatedKatakanaContainers = false;
  530. this.isCreatedSerifContainers = false;
  531. }
  532. NovelViewWrapper.prototype.createStyleSheet = function () {
  533. var styleElement = document.createElement("style");
  534. document.head.appendChild(styleElement);
  535. return styleElement.sheet;
  536. };
  537. NovelViewWrapper.prototype.setupKanjiContainers = function () {
  538. this.isCreatedKanjiContainers = true;
  539. this.$novelView.html(this.$novelView.html().replace(NovelViewWrapper.KANJI_PATTERN, "<span class=\"kanji\">\$1</span>"));
  540. this.kanjiMarginCss = this.createStyleSheet();
  541. this.kanjiSizeCss = this.createStyleSheet();
  542. };
  543. NovelViewWrapper.prototype.setupKatakanaContainers = function () {
  544. this.isCreatedKatakanaContainers = true;
  545. this.$novelView.html(this.$novelView.html().replace(NovelViewWrapper.KATAKANA_PATTERN, "<span class=\"katakana\">\$1</span>"));
  546. this.katakanaMarginCss = this.createStyleSheet();
  547. this.katakanaSizeCss = this.createStyleSheet();
  548. };
  549. NovelViewWrapper.prototype.setupSerifContainers = function () {
  550. this.isCreatedSerifContainers = true;
  551. this.$novelView.html(this.$novelView.html().replace(NovelViewWrapper.SERIF_PATTERN, "<span class=\"serif\">\$1</span>"));
  552. this.serifMarginCss = this.createStyleSheet();
  553. this.serifSizeCss = this.createStyleSheet();
  554. };
  555. NovelViewWrapper.prototype.changeFont = function (font) {
  556. this.$novelView.css("font-family", font);
  557. this.$novelSubTitle.css("font-family", font);
  558. };
  559. // 文字サイズを変更
  560. NovelViewWrapper.prototype.changeFontSize = function (size) {
  561. this.$novelView.css("font-size", size);
  562. this.$novelSubTitle.css("font-size", size);
  563. };
  564. NovelViewWrapper.prototype.changeFontWeight = function (weight) {
  565. this.$novelView.css("font-weight", weight);
  566. this.$novelSubTitle.css("font-weight", weight);
  567. };
  568. // 行間を変更
  569. NovelViewWrapper.prototype.changeLineHeight = function (height) {
  570. this.$novelView.css("line-height", height);
  571. this.$novelSubTitle.css("line-height", height);
  572. };
  573. // 字間を変更
  574. NovelViewWrapper.prototype.changeLetterSpacing = function (spacing) {
  575. this.$novelView.css("letter-spacing", spacing);
  576. this.$novelSubTitle.css("letter-spacing", spacing);
  577. };
  578. // 単語の間隔を変更
  579. NovelViewWrapper.prototype.changeWordSpacing = function (spacing) {
  580. this.$novelView.css("word-spacing", spacing);
  581. this.$novelSubTitle.css("word-spacing", spacing);
  582. };
  583. // レイアウトを変更
  584. NovelViewWrapper.prototype.changeNovelLayout = function () {
  585. };
  586. // 横幅を変更
  587. NovelViewWrapper.prototype.changeWidth = function (width) {
  588. this.$oneNovel.css({ "width": width });
  589. };
  590. NovelViewWrapper.prototype.changeWritingMode = function (wordDirection) {
  591. if (wordDirection.indexOf("vertical-rl") === 0) {
  592. this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "scroll" });
  593. this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "right", "text-align": "center" });
  594. this.$novelView.css({ "writing-mode": wordDirection, "float": "right" });
  595. }
  596. else if (wordDirection.indexOf("vertical-lr") === 0) {
  597. this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "scroll" });
  598. this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "left", "text-align": "center" });
  599. this.$novelView.css({ "writing-mode": wordDirection, "float": "left" });
  600. }
  601. else {
  602. this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "auto" });
  603. this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "none" });
  604. this.$novelView.css({ "writing-mode": wordDirection, "float": "none" });
  605. }
  606. };
  607. NovelViewWrapper.prototype.changeKanjiMargin = function (size) {
  608. if (size !== "0px" && !this.isCreatedKanjiContainers) {
  609. this.setupKanjiContainers();
  610. }
  611. if (this.kanjiMarginCss.rules.length > 0)
  612. this.kanjiMarginCss.removeRule(this.kanjiMarginCss.rules.length - 1);
  613. this.kanjiMarginCss.insertRule(".kanji { margin: " + size + " }", 0);
  614. };
  615. NovelViewWrapper.prototype.changeKanjiSize = function (size) {
  616. if (size !== "100%" && !this.isCreatedKanjiContainers) {
  617. this.setupKanjiContainers();
  618. }
  619. if (this.kanjiSizeCss.rules.length > 0)
  620. this.kanjiSizeCss.removeRule(this.kanjiSizeCss.rules.length - 1);
  621. this.kanjiSizeCss.insertRule(".kanji { font-size: " + size + " }", 0);
  622. };
  623. NovelViewWrapper.prototype.changeKatakanaMargin = function (size) {
  624. if (size !== "0px" && !this.isCreatedKatakanaContainers) {
  625. this.setupKatakanaContainers();
  626. }
  627. if (this.katakanaMarginCss.rules.length > 0)
  628. this.katakanaMarginCss.removeRule(this.katakanaMarginCss.rules.length - 1);
  629. this.katakanaMarginCss.insertRule(".katakana { margin: " + size + " }", 0);
  630. };
  631. NovelViewWrapper.prototype.changeKatakanaSize = function (size) {
  632. if (size !== "100%" && !this.isCreatedKatakanaContainers) {
  633. this.setupKatakanaContainers();
  634. }
  635. if (this.katakanaSizeCss.rules.length > 0)
  636. this.katakanaSizeCss.removeRule(this.katakanaSizeCss.rules.length - 1);
  637. this.katakanaSizeCss.insertRule(".katakana { font-size: " + size + " }", 0);
  638. };
  639. NovelViewWrapper.prototype.changeSerifMargin = function (size) {
  640. if (size !== "0px" && !this.isCreatedSerifContainers) {
  641. this.setupSerifContainers();
  642. }
  643. if (this.serifMarginCss.rules.length > 0)
  644. this.serifMarginCss.removeRule(this.serifMarginCss.rules.length - 1);
  645. this.serifMarginCss.insertRule(".serif { margin: " + size + " }", 0);
  646. };
  647. NovelViewWrapper.prototype.changeSerifSize = function (size) {
  648. if (size !== "100%" && !this.isCreatedSerifContainers) {
  649. this.setupSerifContainers();
  650. }
  651. if (this.serifSizeCss.rules.length > 0)
  652. this.serifSizeCss.removeRule(this.serifSizeCss.rules.length - 1);
  653. this.serifSizeCss.insertRule(".serif { font-size: " + size + " }", 0);
  654. };
  655. 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;
  656. NovelViewWrapper.SERIF_PATTERN = /(「[^」]{1,500}」)/g;
  657. NovelViewWrapper.KATAKANA_PATTERN = /([ァ-ンヷヸヹヺヵヶ]+)/g;
  658. return NovelViewWrapper;
  659. }());
  660. Object.defineProperty(exports, "__esModule", { value: true });
  661. exports.default = NovelViewWrapper;
  662.  
  663.  
  664. /***/ },
  665. /* 2 */
  666. /***/ function(module, exports) {
  667.  
  668. /// <reference path="./../typings/index.d.ts" />
  669. "use strict";
  670. var IndexBoxWrapper = (function () {
  671. function IndexBoxWrapper(indexBox) {
  672. this.indexBox = indexBox;
  673. }
  674. /// 作品の投稿日付をDateにパースする関数
  675. // static parseDate(dateString: string): Date {
  676. // const ds = dateString.trim();
  677. // const yi = ds.indexOf("年");
  678. // const mi = ds.indexOf("月");
  679. // const di = ds.indexOf("日");
  680. // const year = parseInt(ds.substring(0, yi).trim());
  681. // const month = parseInt(ds.substring(yi + 1, mi).trim()) - 1; // January is zero
  682. // const day = parseInt(ds.substring(mi + 1, di).trim());
  683. // return new Date(year, month, day);
  684. // };
  685. /// インデックスを折りたためるよう再構築
  686. IndexBoxWrapper.prototype.reconstructIndex = function (context) {
  687. var $titleElements = this.indexBox.find("div.chapter_title");
  688. $titleElements.css("cursor", "pointer");
  689. var toggles = context.readNovelSetting("toggles");
  690. $titleElements.each(function (index, titleElement) {
  691. $(titleElement)
  692. .click(function (event) {
  693. var $container = $(event.target).next();
  694. $container.slideToggle(function () {
  695. toggles[index] = ($container.css("display") === "block");
  696. context.saveNovelSetting(toggles);
  697. });
  698. });
  699. $(titleElement)
  700. .css({
  701. "background-color": "gray",
  702. "padding": "15px"
  703. });
  704. // Rearrange the dom structure
  705. var $articles = $(titleElement).nextUntil("div");
  706. var $createdContainer = $("<div />", { class: "chapter_container" }).insertAfter(titleElement);
  707. $articles.appendTo($createdContainer);
  708. // Remember the states
  709. $createdContainer.toggle(toggles[index]);
  710. });
  711. };
  712. /// 既読の色を変える
  713. IndexBoxWrapper.prototype.applyAlreadyReadOnIndex = function (context) {
  714. var $allNovelIndex = this.indexBox.find("dl.novel_sublist2");
  715. var readSettings = context.getReadSettings();
  716. var nowDate = Date.now();
  717. $allNovelIndex.each(function (index, element) {
  718. var anchor = $(element).find("dd > a")[0];
  719. var _a = anchor.pathname.split("/").filter(Boolean), novelCode = _a[0], articleNum = _a[1];
  720. if (articleNum in readSettings) {
  721. var lastReadDateString = readSettings[articleNum];
  722. // ---- 最後に読んだ日より後に更新があった時の処理
  723. // const articleUpdateDate = parseDate($(element).find("dt.long_update").text());
  724. // const recentReadDate = new Date(lastReadDateString);
  725. // recentReadDate.setHours(0);
  726. // recentReadDate.setMinutes(0);
  727. // recentReadDate.setSeconds(0);
  728. // recentReadDate.setMilliseconds(0);
  729. // if (recentReadDate.getTime() === articleUpdateDate.getTime()) { // 読んだ日と更新日が同じ
  730. // } else
  731. // if (recentReadDate.getTime() < articleUpdateDate.getTime()) {
  732. // }
  733. $(element).css("background-color", "gray");
  734. }
  735. });
  736. };
  737. return IndexBoxWrapper;
  738. }());
  739. Object.defineProperty(exports, "__esModule", { value: true });
  740. exports.default = IndexBoxWrapper;
  741.  
  742.  
  743. /***/ },
  744. /* 3 */
  745. /***/ function(module, exports, __webpack_require__) {
  746.  
  747. /// <reference path="./../typings/index.d.ts" />
  748. "use strict";
  749. var __extends = (this && this.__extends) || function (d, b) {
  750. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  751. function __() { this.constructor = d; }
  752. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  753. };
  754. var utils_1 = __webpack_require__(4);
  755. var HTB = "horizontal-tb";
  756. var VRL = "vertical-rl";
  757. var VLR = "vertical-lr";
  758. var COLOR_SELECTED = "#FFD540";
  759. var COLOR_HOVERED = "lightgray";
  760. var COLOR_TRANSPARENT = "rgba(0, 0, 0, 0)";
  761. var COLOR_NONE = "white";
  762. var SIZE = 30;
  763. var WordDirectionSelector = (function (_super) {
  764. __extends(WordDirectionSelector, _super);
  765. function WordDirectionSelector() {
  766. _super.apply(this, arguments);
  767. this.state = {
  768. wordDirection: this.props.wordDirection,
  769. hovered: null
  770. };
  771. }
  772. WordDirectionSelector.prototype.onChangeWordDirection = function (event) {
  773. var wordDirection = event.target.value;
  774. this.setState({ wordDirection: wordDirection });
  775. this.props.onChangeWordDirection(wordDirection);
  776. };
  777. WordDirectionSelector.prototype.render = function () {
  778. var _this = this;
  779. 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: {
  780. width: SIZE + "px", height: SIZE + "px", display: "inline-block",
  781. backgroundColor: (this.state.wordDirection === HTB) ? COLOR_SELECTED :
  782. (this.state.hovered && this.state.hovered === HTB) ? COLOR_HOVERED :
  783. COLOR_NONE
  784. }}, 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: {
  785. width: SIZE + "px", height: SIZE + "px", display: "inline-block", marginLeft: "5px",
  786. backgroundColor: (this.state.wordDirection === VRL) ? COLOR_SELECTED :
  787. (this.state.hovered && this.state.hovered === VRL) ? COLOR_HOVERED :
  788. COLOR_NONE
  789. }}, 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: {
  790. width: SIZE + "px", height: SIZE + "px", display: "inline-block", marginLeft: "5px",
  791. backgroundColor: (this.state.wordDirection === VLR) ? COLOR_SELECTED :
  792. (this.state.hovered && this.state.hovered === VLR) ? COLOR_HOVERED :
  793. COLOR_NONE
  794. }}, 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"})))))));
  795. };
  796. return WordDirectionSelector;
  797. }(React.Component));
  798. exports.WordDirectionSelector = WordDirectionSelector;
  799.  
  800.  
  801. /***/ },
  802. /* 4 */
  803. /***/ function(module, exports) {
  804.  
  805. "use strict";
  806. function range(from, to, by) {
  807. var array = [];
  808. switch (arguments.length) {
  809. case 1:
  810. to = from;
  811. from = 0;
  812. break;
  813. case 2:
  814. if (from < to) {
  815. by = 1;
  816. }
  817. else {
  818. by = -1;
  819. }
  820. break;
  821. }
  822. if (by > 0) {
  823. for (var n = from; n < to; n += by) {
  824. array.push(n);
  825. }
  826. }
  827. else {
  828. for (var n = from; n > to; n += by) {
  829. array.push(n);
  830. }
  831. }
  832. return array;
  833. }
  834. exports.range = range;
  835.  
  836.  
  837. /***/ },
  838. /* 5 */
  839. /***/ function(module, exports, __webpack_require__) {
  840.  
  841. /// <reference path="./../typings/index.d.ts" />
  842. "use strict";
  843. var __extends = (this && this.__extends) || function (d, b) {
  844. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  845. function __() { this.constructor = d; }
  846. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  847. };
  848. var fontDetector_1 = __webpack_require__(6);
  849. var FontSelector = (function (_super) {
  850. __extends(FontSelector, _super);
  851. function FontSelector(props) {
  852. _super.call(this, props);
  853. this.state = {
  854. inputFont: "",
  855. selectedFont: this.props.font,
  856. fontList: this.props.fontList
  857. };
  858. this.fontDetector = new fontDetector_1.default(document.body);
  859. }
  860. FontSelector.prototype.addFont = function (fontName) {
  861. var fontList = (this.state.fontList) ? this.state.fontList.concat(fontName) : [fontName];
  862. this.setState({
  863. selectedFont: fontName,
  864. fontList: fontList
  865. });
  866. if (this.props.onChangeFontListener)
  867. this.props.onChangeFontListener(fontName);
  868. if (this.props.onChangeFontListListener)
  869. this.props.onChangeFontListListener(fontList);
  870. };
  871. FontSelector.prototype.onKeyPress = function (event) {
  872. if (event.which === 13 || event.keyCode === 13) {
  873. var inputFont = event.target;
  874. var font = inputFont.value;
  875. if (this.fontDetector.detect(font)) {
  876. this.addFont(font);
  877. this.setState({ inputFont: "" });
  878. inputFont.value = "";
  879. return false;
  880. }
  881. else {
  882. return true;
  883. }
  884. }
  885. else {
  886. return true;
  887. }
  888. };
  889. FontSelector.prototype.onClickAdd = function (event) {
  890. this.addFont(this.state.selectedFont);
  891. };
  892. FontSelector.prototype.onClickRemove = function (event) {
  893. var _this = this;
  894. this.setState({
  895. selectedFont: "",
  896. fontList: this.state.fontList.filter(function (f) { return f !== _this.state.selectedFont; })
  897. });
  898. if (this.props.onChangeFontListener)
  899. this.props.onChangeFontListener(this.state.selectedFont);
  900. if (this.props.onChangeFontListListener)
  901. this.props.onChangeFontListListener(this.state.fontList);
  902. };
  903. FontSelector.prototype.onInput = function (event) {
  904. var inputFont = event.target;
  905. var font = inputFont.value;
  906. this.setState({ inputFont: font });
  907. if (this.fontDetector.detect(font)) {
  908. if (this.props.onChangeFontListener)
  909. this.props.onChangeFontListener(font);
  910. }
  911. };
  912. FontSelector.prototype.onChangeSelectFont = function (event) {
  913. var option = event.target;
  914. var font = option.value;
  915. this.setState({ selectedFont: font });
  916. if (this.props.onChangeFontListener)
  917. this.props.onChangeFontListener(font);
  918. };
  919. FontSelector.prototype.render = function () {
  920. var _this = this;
  921. 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
  922. .map(function (fontName, index) {
  923. return React.createElement("option", {key: index, value: fontName, style: { paddingLeft: "5px", backgroundColor: (_this.fontDetector.detect(fontName) ? "#FFD540" : "lightgray"), fontFamily: fontName }}, fontName);
  924. }))));
  925. };
  926. return FontSelector;
  927. }(React.Component));
  928. exports.FontSelector = FontSelector;
  929.  
  930.  
  931. /***/ },
  932. /* 6 */
  933. /***/ function(module, exports) {
  934.  
  935. "use strict";
  936. var FontDetector = (function () {
  937. function FontDetector(testField) {
  938. this.testField = testField;
  939. this.container = document.createElement("span");
  940. this.container.style.fontSize = FontDetector.testSize;
  941. this.container.innerHTML = FontDetector.testString;
  942. this.defaultWidth = {};
  943. this.defaultHeight = {};
  944. for (var _i = 0, _a = FontDetector.baseFonts; _i < _a.length; _i++) {
  945. var font = _a[_i];
  946. this.container.style.fontFamily = font;
  947. this.testField.appendChild(this.container);
  948. this.defaultWidth[font] = this.container.offsetWidth;
  949. this.defaultHeight[font] = this.container.offsetHeight;
  950. this.testField.removeChild(this.container);
  951. }
  952. }
  953. FontDetector.prototype.detect = function (font) {
  954. font = font.trim();
  955. if (!font)
  956. return false;
  957. var detected = false;
  958. for (var _i = 0, _a = FontDetector.baseFonts; _i < _a.length; _i++) {
  959. var baseFont = _a[_i];
  960. this.container.style.fontFamily = font + "," + baseFont;
  961. this.testField.appendChild(this.container);
  962. var matched = (this.container.offsetWidth !== this.defaultWidth[baseFont] || this.container.offsetHeight !== this.defaultHeight[baseFont]);
  963. this.testField.removeChild(this.container);
  964. detected = detected || matched;
  965. }
  966. return detected;
  967. };
  968. FontDetector.baseFonts = ["monospace", "sans-serif", "serif"];
  969. FontDetector.testString = "mmmmmmmmmmlli";
  970. FontDetector.testSize = "72px";
  971. return FontDetector;
  972. }());
  973. Object.defineProperty(exports, "__esModule", { value: true });
  974. exports.default = FontDetector;
  975.  
  976.  
  977. /***/ },
  978. /* 7 */
  979. /***/ function(module, exports) {
  980.  
  981. /// <reference path="./../typings/index.d.ts" />
  982. "use strict";
  983. var __extends = (this && this.__extends) || function (d, b) {
  984. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  985. function __() { this.constructor = d; }
  986. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  987. };
  988. var SizeUnit = ["%", "px", "pt", "in", "mm", "cm", "em", "rem"];
  989. var InputSize = (function (_super) {
  990. __extends(InputSize, _super);
  991. function InputSize() {
  992. _super.apply(this, arguments);
  993. this.defaultProps = {
  994. min: 0,
  995. max: 200,
  996. step: 1,
  997. value: "",
  998. unit: "px"
  999. };
  1000. this.state = {
  1001. sizeValueMin: this.props.min || 1,
  1002. sizeValueMax: this.props.max || 200,
  1003. sizeValueStep: this.props.step || 1,
  1004. sizeValue: this.parseSizeValue(this.props.value),
  1005. sizeUnit: (this.props.unit || this.parseSizeUnit(this.props.value))
  1006. };
  1007. }
  1008. InputSize.prototype.parseSizeValue = function (sizeString) {
  1009. if (typeof sizeString === "number") {
  1010. return sizeString;
  1011. }
  1012. else if (typeof sizeString === "string") {
  1013. var numString = sizeString;
  1014. if (sizeString)
  1015. for (var _i = 0, SizeUnit_1 = SizeUnit; _i < SizeUnit_1.length; _i++) {
  1016. var unit = SizeUnit_1[_i];
  1017. var index = sizeString.lastIndexOf(unit);
  1018. if (index >= 0)
  1019. numString = sizeString.substring(0, index);
  1020. }
  1021. return parseFloat(numString) || 0;
  1022. }
  1023. else {
  1024. return 0;
  1025. }
  1026. };
  1027. InputSize.prototype.parseSizeUnit = function (sizeString) {
  1028. if (typeof sizeString === "string") {
  1029. var numString = null;
  1030. if (sizeString)
  1031. for (var _i = 0, SizeUnit_2 = SizeUnit; _i < SizeUnit_2.length; _i++) {
  1032. var unit = SizeUnit_2[_i];
  1033. var index = sizeString.lastIndexOf(unit);
  1034. if (index >= 0)
  1035. numString = sizeString.substring(index);
  1036. }
  1037. return (numString || "px");
  1038. }
  1039. else {
  1040. return "px";
  1041. }
  1042. };
  1043. InputSize.prototype.onChangeValue = function (event) {
  1044. var value = parseFloat(event.target.value);
  1045. if (this.props.onChange && value && this.state.sizeUnit) {
  1046. this.props.onChange("" + value + this.state.sizeUnit);
  1047. }
  1048. this.setState({ sizeValue: value });
  1049. };
  1050. InputSize.prototype.onChangeUnit = function (event) {
  1051. var unit = event.target.value;
  1052. if (this.props.onChange && this.state.sizeValue && unit) {
  1053. this.props.onChange("" + this.state.sizeValue + unit);
  1054. }
  1055. this.setState({ sizeUnit: unit });
  1056. };
  1057. InputSize.prototype.render = function () {
  1058. 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})));
  1059. };
  1060. return InputSize;
  1061. }(React.Component));
  1062. Object.defineProperty(exports, "__esModule", { value: true });
  1063. exports.default = InputSize;
  1064.  
  1065.  
  1066. /***/ },
  1067. /* 8 */
  1068. /***/ function(module, exports) {
  1069.  
  1070. /// <reference path="./../typings/index.d.ts" />
  1071. "use strict";
  1072. var __extends = (this && this.__extends) || function (d, b) {
  1073. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1074. function __() { this.constructor = d; }
  1075. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1076. };
  1077. var InputNumber = (function (_super) {
  1078. __extends(InputNumber, _super);
  1079. function InputNumber() {
  1080. _super.apply(this, arguments);
  1081. this.defaultProps = {
  1082. min: 1,
  1083. max: 200,
  1084. step: 1,
  1085. value: ""
  1086. };
  1087. this.state = {
  1088. sizeValueMin: this.props.min,
  1089. sizeValueMax: this.props.max,
  1090. sizeValueStep: this.props.step,
  1091. sizeValue: this.props.value,
  1092. };
  1093. }
  1094. InputNumber.prototype.onChangeValue = function (event) {
  1095. var value = parseFloat(event.target.value);
  1096. if (this.props.onChange && value) {
  1097. this.props.onChange(value);
  1098. }
  1099. this.setState({ sizeValue: value });
  1100. };
  1101. InputNumber.prototype.render = function () {
  1102. 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})));
  1103. };
  1104. return InputNumber;
  1105. }(React.Component));
  1106. Object.defineProperty(exports, "__esModule", { value: true });
  1107. exports.default = InputNumber;
  1108.  
  1109.  
  1110. /***/ },
  1111. /* 9 */
  1112. /***/ function(module, exports, __webpack_require__) {
  1113.  
  1114. /// <reference path="./../typings/index.d.ts" />
  1115. "use strict";
  1116. var __extends = (this && this.__extends) || function (d, b) {
  1117. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1118. function __() { this.constructor = d; }
  1119. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1120. };
  1121. var color_1 = __webpack_require__(10);
  1122. var ColorPicker = (function (_super) {
  1123. __extends(ColorPicker, _super);
  1124. function ColorPicker(props) {
  1125. _super.call(this, props);
  1126. if (this.props.color) {
  1127. var rgb = color_1.RGB.fromString(this.props.color);
  1128. var hsv = rgb.toHSV();
  1129. console.log(this.props.color);
  1130. console.log(rgb.toString());
  1131. console.log(hsv.toString());
  1132. this.state = {
  1133. pressH: false,
  1134. pressSV: false,
  1135. color: this.props.color,
  1136. saturation: hsv.saturation,
  1137. value: hsv.value,
  1138. hue: hsv.hue
  1139. };
  1140. }
  1141. else if (this.props.defaultColor) {
  1142. var rgb = color_1.RGB.fromString(this.props.defaultColor);
  1143. var hsv = rgb.toHSV();
  1144. this.state = {
  1145. pressH: false,
  1146. pressSV: false,
  1147. color: this.props.defaultColor,
  1148. saturation: hsv.saturation,
  1149. value: hsv.value,
  1150. hue: hsv.hue
  1151. };
  1152. }
  1153. else {
  1154. this.state = {
  1155. pressH: false,
  1156. pressSV: false,
  1157. color: this.props.color,
  1158. saturation: 0,
  1159. value: 0,
  1160. hue: 0
  1161. };
  1162. }
  1163. }
  1164. // constructor(props) {
  1165. // super(props);
  1166. // relMouseCoords(event: MouseEvent){
  1167. // var totalOffsetX = 0;
  1168. // var totalOffsetY = 0;
  1169. // var canvasX = 0;
  1170. // var canvasY = 0;
  1171. // var currentElement = this;
  1172. // do{
  1173. // totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
  1174. // totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
  1175. // }
  1176. // while(currentElement = currentElement.offsetParent)
  1177. // canvasX = event.pageX - totalOffsetX;
  1178. // canvasY = event.pageY - totalOffsetY;
  1179. // return {x:canvasX, y:canvasY}
  1180. // }
  1181. // }
  1182. ColorPicker.prototype.onMouseDownH = function (event) {
  1183. var $div = $(event.target);
  1184. var offsetX = $div.offset().left;
  1185. var offsetY = $div.offset().top;
  1186. var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * color_1.HSV.H_MAX;
  1187. if (this.props.onChange) {
  1188. var hsv = new color_1.HSV(hue, this.state.saturation, this.state.value);
  1189. var rgb = hsv.toRGB();
  1190. var colorCode = rgb.getColorCode();
  1191. this.props.onChange(colorCode);
  1192. }
  1193. this.setState({
  1194. pressH: true,
  1195. hue: hue
  1196. });
  1197. };
  1198. ColorPicker.prototype.onMouseMoveH = function (event) {
  1199. if (this.state.pressH) {
  1200. var $div = $(event.target);
  1201. var offsetX = $div.offset().left;
  1202. var offsetY = $div.offset().top;
  1203. var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * color_1.HSV.H_MAX;
  1204. if (this.props.onChange) {
  1205. var hsv = new color_1.HSV(hue, this.state.saturation, this.state.value);
  1206. var rgb = hsv.toRGB();
  1207. var colorCode = rgb.getColorCode();
  1208. this.props.onChange(colorCode);
  1209. }
  1210. this.setState({
  1211. hue: hue
  1212. });
  1213. }
  1214. };
  1215. ColorPicker.prototype.onMouseUpH = function (event) {
  1216. var $div = $(event.target);
  1217. var offsetX = $div.offset().left;
  1218. var offsetY = $div.offset().top;
  1219. var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * color_1.HSV.H_MAX;
  1220. var hsv = new color_1.HSV(hue, this.state.saturation, this.state.value);
  1221. var rgb = hsv.toRGB();
  1222. var colorCode = rgb.getColorCode();
  1223. if (this.props.onChange) {
  1224. this.props.onChange(colorCode);
  1225. }
  1226. if (this.props.onChangeComplete) {
  1227. this.props.onChangeComplete(colorCode);
  1228. }
  1229. this.setState({
  1230. pressH: false,
  1231. hue: hue
  1232. });
  1233. };
  1234. ColorPicker.prototype.onMouseDownSV = function (event) {
  1235. var $div = $(event.target);
  1236. var offsetX = $div.offset().left;
  1237. var offsetY = $div.offset().top;
  1238. var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
  1239. var value = color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
  1240. if (this.props.onChange) {
  1241. var hsv = new color_1.HSV(this.state.hue, saturation, value);
  1242. var rgb = hsv.toRGB();
  1243. this.props.onChange(rgb.getColorCode());
  1244. }
  1245. this.setState({
  1246. pressSV: true,
  1247. saturation: saturation,
  1248. value: value
  1249. });
  1250. };
  1251. ColorPicker.prototype.onMouseMoveSV = function (event) {
  1252. if (this.state.pressSV) {
  1253. var $div = $(event.target);
  1254. var offsetX = $div.offset().left;
  1255. var offsetY = $div.offset().top;
  1256. var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
  1257. var value = color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
  1258. if (this.props.onChange) {
  1259. var hsv = new color_1.HSV(this.state.hue, saturation, value);
  1260. var rgb = hsv.toRGB();
  1261. this.props.onChange(rgb.getColorCode());
  1262. }
  1263. this.setState({
  1264. saturation: saturation,
  1265. value: value
  1266. });
  1267. }
  1268. };
  1269. ColorPicker.prototype.onMouseUpSV = function (event) {
  1270. var $div = $(event.target);
  1271. var offsetX = $div.offset().left;
  1272. var offsetY = $div.offset().top;
  1273. var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
  1274. var value = color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * color_1.HSV.SV_MAX;
  1275. var hsv = new color_1.HSV(this.state.hue, saturation, value);
  1276. var rgb = hsv.toRGB();
  1277. var colorCode = rgb.getColorCode();
  1278. if (this.props.onChange) {
  1279. this.props.onChange(colorCode);
  1280. }
  1281. if (this.props.onChangeComplete) {
  1282. this.props.onChangeComplete(colorCode);
  1283. }
  1284. this.setState({
  1285. pressSV: false,
  1286. saturation: saturation,
  1287. value: value
  1288. });
  1289. };
  1290. ColorPicker.prototype.render = function () {
  1291. 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",
  1292. width: "100%", height: "100%",
  1293. 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%)"
  1294. }}, React.createElement("div", {style: {
  1295. width: "100%", height: "100%",
  1296. background: "linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%)"
  1297. }, onMouseDown: this.onMouseDownSV.bind(this), onMouseUp: this.onMouseUpSV.bind(this), onMouseMove: this.onMouseMoveSV.bind(this)})), React.createElement("div", {style: {
  1298. pointerEvents: "none",
  1299. position: "relative",
  1300. left: "" + ((ColorPicker.SV_HEIGHT * (this.state.saturation / color_1.HSV.SV_MAX)) - 5) + "px",
  1301. top: "" + ((ColorPicker.SV_HEIGHT * ((color_1.HSV.SV_MAX - this.state.value) / color_1.HSV.SV_MAX)) - 5) + "px"
  1302. }}, 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",
  1303. float: "left",
  1304. marginLeft: "5px",
  1305. width: "15px",
  1306. height: ColorPicker.SV_HEIGHT + "px" }, onMouseDown: this.onMouseDownH.bind(this), onMouseUp: this.onMouseUpH.bind(this), onMouseMove: this.onMouseMoveH.bind(this)}, React.createElement("div", {style: {
  1307. position: "absolute",
  1308. width: "15px",
  1309. height: ColorPicker.SV_HEIGHT + "px",
  1310. background: "linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 34%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)" }}), React.createElement("div", {style: {
  1311. pointerEvents: "none",
  1312. position: "absolute",
  1313. backgroundColor: "white",
  1314. borderBottom: "1px solid #000",
  1315. left: "0px",
  1316. top: ((ColorPicker.H_HEIGHT * (this.state.hue / color_1.HSV.H_MAX)) - 1) + "px",
  1317. width: "15px",
  1318. height: "2px" }}))));
  1319. };
  1320. ColorPicker.SV_HEIGHT = 150;
  1321. ColorPicker.SV_WIDTH = 150;
  1322. ColorPicker.H_HEIGHT = 150;
  1323. return ColorPicker;
  1324. }(React.Component));
  1325. Object.defineProperty(exports, "__esModule", { value: true });
  1326. exports.default = ColorPicker;
  1327.  
  1328.  
  1329. /***/ },
  1330. /* 10 */
  1331. /***/ function(module, exports) {
  1332.  
  1333. /// <reference path="./../typings/index.d.ts" />
  1334. "use strict";
  1335. var RGB = (function () {
  1336. function RGB(red, green, blue) {
  1337. this.red = red;
  1338. this.green = green;
  1339. this.blue = blue;
  1340. }
  1341. RGB.prototype.toHSV = function () {
  1342. var max = Math.max(this.red, this.green, this.blue);
  1343. var min = Math.min(this.red, this.green, this.blue);
  1344. var h, s, v;
  1345. if (this.red === this.green && this.green === this.blue) {
  1346. h = 0;
  1347. }
  1348. else if (max === this.red) {
  1349. h = HSV.H1 * ((this.green - this.blue) / (max - min));
  1350. }
  1351. else if (max === this.green) {
  1352. h = HSV.H1 * ((this.blue - this.red) / (max - min)) + HSV.H2;
  1353. }
  1354. else if (max === this.blue) {
  1355. h = HSV.H1 * ((this.red - this.green) / (max - min)) + HSV.H4;
  1356. }
  1357. else {
  1358. throw new Error("Internal error.");
  1359. }
  1360. h %= HSV.H_MAX;
  1361. if (h < 0)
  1362. h += HSV.H_MAX;
  1363. return new HSV(h, (max - min) / max * HSV.SV_MAX, max / RGB.MAX * HSV.SV_MAX);
  1364. };
  1365. RGB.fromString = function (str) {
  1366. if (/^#?[a-f\d]{3,8}$/i.exec(str)) {
  1367. if (str.indexOf("#") === 0) {
  1368. str = str.substring(1);
  1369. }
  1370. switch (str.length) {
  1371. case 3: {
  1372. var r = str.substring(0, 1);
  1373. var g = str.substring(1, 2);
  1374. var b = str.substring(2, 3);
  1375. return new RGB(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16));
  1376. }
  1377. case 6: {
  1378. var r = str.substring(0, 2);
  1379. var g = str.substring(2, 4);
  1380. var b = str.substring(4, 6);
  1381. return new RGB(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
  1382. }
  1383. default:
  1384. throw new Error("Not supported color code type.");
  1385. }
  1386. }
  1387. else {
  1388. return RGB.fromString(RGB.colourNameToHex(str));
  1389. }
  1390. };
  1391. RGB.colourNameToHex = function (colour) {
  1392. var colours = { "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",
  1393. "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887",
  1394. "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff",
  1395. "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",
  1396. "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",
  1397. "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",
  1398. "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
  1399. "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f",
  1400. "honeydew": "#f0fff0", "hotpink": "#ff69b4",
  1401. "indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",
  1402. "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
  1403. "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de",
  1404. "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",
  1405. "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
  1406. "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",
  1407. "navajowhite": "#ffdead", "navy": "#000080",
  1408. "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",
  1409. "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",
  1410. "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",
  1411. "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",
  1412. "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",
  1413. "violet": "#ee82ee",
  1414. "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",
  1415. "yellow": "#ffff00", "yellowgreen": "#9acd32" };
  1416. if (typeof colours[colour.toLowerCase()] != 'undefined')
  1417. return colours[colour.toLowerCase()];
  1418. return false;
  1419. };
  1420. RGB.prototype.getColorCode = function () {
  1421. var r = Math.round(this.red).toString(16);
  1422. var g = Math.round(this.green).toString(16);
  1423. var b = Math.round(this.blue).toString(16);
  1424. switch (r.length) {
  1425. case 0:
  1426. r = "00";
  1427. break;
  1428. case 1:
  1429. r = "0" + r;
  1430. break;
  1431. case 2: break;
  1432. case 3:
  1433. r = "FF";
  1434. break;
  1435. default: throw new Error("Number format error.");
  1436. }
  1437. switch (g.length) {
  1438. case 0:
  1439. g = "00";
  1440. break;
  1441. case 1:
  1442. g = "0" + g;
  1443. break;
  1444. case 2: break;
  1445. case 3:
  1446. g = "FF";
  1447. break;
  1448. default: throw new Error("Number format error.");
  1449. }
  1450. switch (b.length) {
  1451. case 0:
  1452. b = "00";
  1453. break;
  1454. case 1:
  1455. b = "0" + b;
  1456. break;
  1457. case 2: break;
  1458. case 3:
  1459. b = "FF";
  1460. break;
  1461. default: throw new Error("Number format error.");
  1462. }
  1463. return "#" + r + g + b;
  1464. };
  1465. RGB.prototype.toString = function () {
  1466. return "rgb(" + Math.round(this.red) + ", " + Math.round(this.green) + ", " + Math.round(this.blue) + ")";
  1467. };
  1468. RGB.MIN = 0;
  1469. RGB.MAX = 255;
  1470. return RGB;
  1471. }());
  1472. exports.RGB = RGB;
  1473. var HSV = (function () {
  1474. function HSV(hue, saturation, value) {
  1475. this.hue = hue;
  1476. this.saturation = saturation;
  1477. this.value = value;
  1478. }
  1479. HSV.prototype.toRGB = function () {
  1480. var hue = this.hue;
  1481. var hue2 = hue / (HSV.H_MAX / 6);
  1482. var hue3 = Math.floor(hue2);
  1483. var max = this.value;
  1484. var min = max - ((this.saturation / HSV.SV_MAX) * max);
  1485. if (hue3 < 0 || 5 < hue3) {
  1486. throw new Error();
  1487. }
  1488. switch (hue3) {
  1489. case 0:
  1490. return new RGB(max, (hue / HSV.H1) * (max - min) + min, min);
  1491. case 1:
  1492. return new RGB(((HSV.H2 - hue) / HSV.H1) * (max - min) + min, max, min);
  1493. case 2:
  1494. return new RGB(min, max, ((hue - HSV.H2) / HSV.H1) * (max - min) + min);
  1495. case 3:
  1496. return new RGB(min, ((HSV.H4 - hue) / HSV.H1) * (max - min) + min, max);
  1497. case 4:
  1498. return new RGB(((hue - HSV.H4) / HSV.H1) * (max - min) + min, min, max);
  1499. case 5:
  1500. return new RGB(max, min, ((HSV.H6 - hue) / HSV.H1) * (max - min) + min);
  1501. }
  1502. };
  1503. HSV.prototype.toString = function () {
  1504. return "hsv(" + Math.round(this.hue) + ", " + Math.round(this.saturation) + ", " + Math.round(this.value) + ")";
  1505. };
  1506. HSV.H_MAX = 360;
  1507. /* 60 */ HSV.H1 = HSV.H_MAX / 6;
  1508. /* 120 */ HSV.H2 = HSV.H1 * 2;
  1509. /* 240 */ HSV.H4 = HSV.H1 * 4;
  1510. /* 360 */ HSV.H6 = HSV.H1 * 6;
  1511. HSV.SV_MAX = 255;
  1512. return HSV;
  1513. }());
  1514. exports.HSV = HSV;
  1515.  
  1516.  
  1517. /***/ },
  1518. /* 11 */
  1519. /***/ function(module, exports, __webpack_require__) {
  1520.  
  1521. /// <reference path="./../typings/index.d.ts" />
  1522. "use strict";
  1523. var indexBoxWrapper_1 = __webpack_require__(2);
  1524. var SideMenu = (function () {
  1525. function SideMenu(context, address) {
  1526. var _this = this;
  1527. this.address = address;
  1528. this.$sideMenu = $("#side_menu");
  1529. if (this.$sideMenu.length <= 0) {
  1530. 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 ");
  1531. var windowHeight = $(window).height();
  1532. this.$sideMenu.height(windowHeight);
  1533. $(window).resize(function () {
  1534. var windowHeight = $(window).height();
  1535. _this.$sideMenu.height(windowHeight);
  1536. });
  1537. $(document.body).append(this.$sideMenu);
  1538. }
  1539. this.context = context;
  1540. this.isSideMenuOpened = false;
  1541. this.isSidePageLoaded = false;
  1542. }
  1543. SideMenu.prototype.css = function (obj) {
  1544. this.$sideMenu.css(obj);
  1545. };
  1546. SideMenu.prototype.loadSidePage = function (context) {
  1547. var _this = this;
  1548. this.isSidePageLoaded = true;
  1549. // const targetUrl = location.protocol + "//" + location.host + "/" + novelCode;
  1550. console.log("Loading menu", this.address);
  1551. var requestMenu = new XMLHttpRequest();
  1552. // requestMenu.onreadystatechange
  1553. requestMenu.addEventListener("load", function (event) {
  1554. var loadPage = $(requestMenu.responseXML);
  1555. var $indexBox = loadPage.find("body .index_box");
  1556. var indexBoxWrapper = new indexBoxWrapper_1.default($indexBox);
  1557. indexBoxWrapper.reconstructIndex(context);
  1558. indexBoxWrapper.applyAlreadyReadOnIndex(context);
  1559. _this.$sideMenu.append($indexBox);
  1560. });
  1561. requestMenu.open("GET", this.address, true);
  1562. requestMenu.responseType = 'document';
  1563. requestMenu.send();
  1564. $(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 "));
  1565. };
  1566. SideMenu.prototype.showSideMenu = function () {
  1567. this.isSideMenuOpened = true;
  1568. if (!this.isSidePageLoaded) {
  1569. this.loadSidePage(this.context);
  1570. }
  1571. console.log("Open menu");
  1572. this.$sideMenu.stop().animate({ left: "0" }, SideMenu.menuSpeed).addClass("active");
  1573. };
  1574. SideMenu.prototype.closeSideMenu = function () {
  1575. this.isSideMenuOpened = false;
  1576. this.$sideMenu.stop().animate({ left: "-" + SideMenu.menuSize + "px" }, SideMenu.menuSpeed).removeClass("active");
  1577. };
  1578. ;
  1579. SideMenu.menuSize = 350;
  1580. SideMenu.menuSpeed = 300;
  1581. return SideMenu;
  1582. }());
  1583. Object.defineProperty(exports, "__esModule", { value: true });
  1584. exports.default = SideMenu;
  1585.  
  1586.  
  1587. /***/ },
  1588. /* 12 */
  1589. /***/ function(module, exports, __webpack_require__) {
  1590.  
  1591. /// <reference path="./../typings/index.d.ts" />
  1592. "use strict";
  1593. var settingManager_1 = __webpack_require__(13);
  1594. var Context = (function () {
  1595. function Context(novelCode, defaultGlobalSettings, defaultNovelSettings) {
  1596. this.isLoadedGlobalSettings = false;
  1597. this.isLoadedNovelSettings = false;
  1598. this.isLoadedReadSettings = false;
  1599. this.globalSettingManager = new settingManager_1.default("narou_refiner", defaultGlobalSettings);
  1600. this.novelSettingManager = new settingManager_1.default("narou_refiner_" + novelCode, defaultNovelSettings);
  1601. this.readSettingManager = new settingManager_1.default("narou_refiner_read_" + novelCode);
  1602. }
  1603. Context.prototype.getGlobalSettings = function () {
  1604. if (!this.isLoadedGlobalSettings) {
  1605. this.globalSettings = this.globalSettingManager.load();
  1606. }
  1607. return this.globalSettings;
  1608. };
  1609. Context.prototype.readGlobalSetting = function (key) {
  1610. if (!this.isLoadedGlobalSettings) {
  1611. this.globalSettings = this.globalSettingManager.load();
  1612. }
  1613. return this.globalSettings[key];
  1614. };
  1615. Context.prototype.putGlobalSetting = function (key, value) {
  1616. if (!this.isLoadedGlobalSettings) {
  1617. this.globalSettings = this.globalSettingManager.load();
  1618. }
  1619. this.globalSettings[key] = value;
  1620. };
  1621. Context.prototype.saveGlobalSetting = function (key, value) {
  1622. if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
  1623. if (!this.isLoadedGlobalSettings) {
  1624. this.globalSettings = this.globalSettingManager.load();
  1625. }
  1626. this.globalSettings[key] = value;
  1627. this.globalSettingManager.save(this.globalSettings);
  1628. }
  1629. else if (arguments.length === 1 && typeof key === "object") {
  1630. if (!this.isLoadedGlobalSettings) {
  1631. this.globalSettings = this.globalSettingManager.load();
  1632. }
  1633. $.extend(this.globalSettings, key);
  1634. this.globalSettingManager.save(this.globalSettings);
  1635. }
  1636. else if (arguments.length === 0) {
  1637. if (this.globalSettings) {
  1638. this.globalSettingManager.save(this.globalSettings);
  1639. }
  1640. }
  1641. };
  1642. Context.prototype.getNovelSettings = function () {
  1643. if (!this.isLoadedNovelSettings) {
  1644. this.novelSettings = this.novelSettingManager.load();
  1645. }
  1646. return this.novelSettings;
  1647. };
  1648. Context.prototype.readNovelSetting = function (key) {
  1649. if (!this.isLoadedNovelSettings) {
  1650. this.novelSettings = this.novelSettingManager.load();
  1651. }
  1652. return this.novelSettings[key];
  1653. };
  1654. Context.prototype.putNovelSetting = function (key, value) {
  1655. if (!this.isLoadedNovelSettings) {
  1656. this.novelSettings = this.novelSettingManager.load();
  1657. }
  1658. this.novelSettings[key] = value;
  1659. };
  1660. Context.prototype.saveNovelSetting = function (key, value) {
  1661. if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
  1662. if (!this.isLoadedNovelSettings) {
  1663. this.novelSettings = this.novelSettingManager.load();
  1664. }
  1665. this.novelSettings[key] = value;
  1666. this.novelSettingManager.save(this.novelSettings);
  1667. }
  1668. else if (arguments.length === 1 && typeof key === "object") {
  1669. if (!this.isLoadedNovelSettings) {
  1670. this.novelSettings = this.novelSettingManager.load();
  1671. }
  1672. $.extend(this.novelSettings, key);
  1673. this.novelSettingManager.save(this.novelSettings);
  1674. }
  1675. else if (arguments.length === 0) {
  1676. if (this.novelSettings) {
  1677. this.novelSettingManager.save(this.novelSettings);
  1678. }
  1679. }
  1680. };
  1681. Context.prototype.getReadSettings = function () {
  1682. if (!this.isLoadedReadSettings) {
  1683. this.readSettings = this.readSettingManager.load();
  1684. }
  1685. return this.readSettings;
  1686. };
  1687. Context.prototype.readReadSetting = function (key) {
  1688. if (!this.isLoadedReadSettings) {
  1689. this.readSettings = this.readSettingManager.load();
  1690. }
  1691. return this.readSettings[key];
  1692. };
  1693. Context.prototype.putReadSetting = function (key, value) {
  1694. if (!this.isLoadedReadSettings) {
  1695. this.readSettings = this.readSettingManager.load();
  1696. }
  1697. this.readSettings[key] = value;
  1698. };
  1699. Context.prototype.saveReadSetting = function (key, value) {
  1700. if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
  1701. if (!this.isLoadedNovelSettings) {
  1702. this.readSettings = this.readSettingManager.load();
  1703. }
  1704. this.readSettings[key] = value;
  1705. this.readSettingManager.save(this.readSettings);
  1706. }
  1707. else if (arguments.length === 1 && typeof key === "object") {
  1708. if (!this.isLoadedNovelSettings) {
  1709. this.readSettings = this.readSettingManager.load();
  1710. }
  1711. $.extend(this.readSettings, key);
  1712. this.readSettingManager.save(this.readSettings);
  1713. }
  1714. else if (arguments.length === 0) {
  1715. if (this.readSettings) {
  1716. this.readSettingManager.save(this.readSettings);
  1717. }
  1718. }
  1719. };
  1720. return Context;
  1721. }());
  1722. Object.defineProperty(exports, "__esModule", { value: true });
  1723. exports.default = Context;
  1724.  
  1725.  
  1726. /***/ },
  1727. /* 13 */
  1728. /***/ function(module, exports) {
  1729.  
  1730. "use strict";
  1731. var SettingManager = (function () {
  1732. function SettingManager(key, defaultSettings) {
  1733. if (defaultSettings === void 0) { defaultSettings = {}; }
  1734. this.key = key;
  1735. this.settings = defaultSettings;
  1736. }
  1737. SettingManager.prototype.load = function () {
  1738. return $.extend(this.settings, JSON.parse(localStorage.getItem(this.key)));
  1739. };
  1740. SettingManager.prototype.save = function (settings) {
  1741. localStorage.setItem(this.key, JSON.stringify(settings));
  1742. };
  1743. return SettingManager;
  1744. }());
  1745. Object.defineProperty(exports, "__esModule", { value: true });
  1746. exports.default = SettingManager;
  1747.  
  1748.  
  1749. /***/ }
  1750. /******/ ]);