NarouRefiner

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

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

  1. // ==UserScript==
  2. // @name NarouRefiner
  3. // @namespace https://greasyfork.org/ja/users/52455-aosanori8
  4. // @version 0.9
  5. // @description 「小説家になろう」を読みやすく設定
  6. // @author aosanori8
  7. // @require https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js
  8. // @require https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js
  9. // @match http://ncode.syosetu.com/*
  10. // @match http://novel18.syosetu.com/*
  11. // @license MIT
  12. // @grant none
  13. // ==/UserScript==
  14.  
  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 __extends = (this && this.__extends) || function (d, b) {
  66. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  67. function __() { this.constructor = d; }
  68. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  69. };
  70. var NovelViewWrapper_1 = __webpack_require__(1);
  71. var IndexPageWrapper_1 = __webpack_require__(5);
  72. var InputSize_1 = __webpack_require__(7);
  73. var InputNumber_1 = __webpack_require__(8);
  74. var FontSelector_1 = __webpack_require__(9);
  75. var WordDirectionSelector_1 = __webpack_require__(11);
  76. var ColorPicker_1 = __webpack_require__(12);
  77. var ExpandableItem_1 = __webpack_require__(13);
  78. var SideMenu_1 = __webpack_require__(14);
  79. var Context_1 = __webpack_require__(15);
  80. var Constants_1 = __webpack_require__(17);
  81. var pathParts = location.pathname.split("/").filter(Boolean);
  82. if (pathParts.length >= 1) {
  83. var novelCode = pathParts[0], articleNum = pathParts[1];
  84. //////////////////////////////////////////////////////////////////
  85. // LocalStorageからグローバル設定、作品設定を読み込む
  86. //////////////////////////////////////////////////////////////////
  87. var context_1 = new Context_1.default(novelCode, Constants_1.DEFAULT_GLOBAL_SETTINGS, Constants_1.DEFAULT_NOVEL_SETTINGS);
  88. // ナビゲーションのスタイルを変更
  89. $(".novelview_navi").css({
  90. backgroundColor: "#363E44",
  91. color: "#EEE"
  92. });
  93. var Label2 = (function (_super) {
  94. __extends(Label2, _super);
  95. function Label2() {
  96. _super.apply(this, arguments);
  97. }
  98. Label2.prototype.render = function () {
  99. return (React.createElement("div", {style: {
  100. padding: "0 5px",
  101. fontWeight: "bold",
  102. backgroundColor: "#868E94",
  103. color: "#E0E0E0",
  104. marginBottom: "5px"
  105. }}, this.props.children));
  106. };
  107. return Label2;
  108. }(React.Component));
  109. var Spacing = (function (_super) {
  110. __extends(Spacing, _super);
  111. function Spacing() {
  112. _super.apply(this, arguments);
  113. }
  114. Spacing.prototype.render = function () { return (React.createElement("div", {style: { height: this.props.size }})); };
  115. return Spacing;
  116. }(React.Component));
  117. var Spacing1 = (function (_super) {
  118. __extends(Spacing1, _super);
  119. function Spacing1() {
  120. _super.apply(this, arguments);
  121. }
  122. Spacing1.prototype.render = function () { return (React.createElement(Spacing, {size: "10px"})); };
  123. return Spacing1;
  124. }(React.Component));
  125. var Spacing2 = (function (_super) {
  126. __extends(Spacing2, _super);
  127. function Spacing2() {
  128. _super.apply(this, arguments);
  129. }
  130. Spacing2.prototype.render = function () { return (React.createElement(Spacing, {size: "5px"})); };
  131. return Spacing2;
  132. }(React.Component));
  133. if ($("#novel_ex").length > 0) {
  134. //////////////////////////////////////////////////////////////////
  135. // 目次ページ
  136. //////////////////////////////////////////////////////////////////
  137. var indexBoxWrapper_1 = new IndexPageWrapper_1.default(document.body);
  138. // ==== 設定値の読み込み
  139. var globalSettings = context_1.getGlobalSettings();
  140. var isExpandNaviColor = globalSettings[Constants_1.SETTING_KEY.EXPAND_NAVI.COLOR];
  141. var textColor_1 = globalSettings[Constants_1.SETTING_KEY.TEXT_COLOR];
  142. var backgroundColor_1 = globalSettings[Constants_1.SETTING_KEY.BACKGROUND_COLOR];
  143. // ==== ナビゲーターの構築
  144. var customNavi = document.createElement("div");
  145. ReactDOM.render(React.createElement(ExpandableItem_1.default, {label: "カラー", expand: isExpandNaviColor, onToggle: function (expand) { return context_1.saveGlobalSetting(Constants_1.SETTING_KEY.EXPAND_NAVI.COLOR, expand); }}, React.createElement(Label2, null, "文字色"), React.createElement(ColorPicker_1.default, {color: textColor_1, onChange: function (color) { return $("#novel_color").css({ "color": color }); }, onChangeComplete: function (color) {
  146. indexBoxWrapper_1.changeNovelLayout(color, backgroundColor_1);
  147. textColor_1 = color;
  148. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.TEXT_COLOR, color);
  149. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "背景色"), React.createElement(ColorPicker_1.default, {color: backgroundColor_1, onChange: function (color) { return $("body").css({ "background-color": color }); }, onChangeComplete: function (color) {
  150. indexBoxWrapper_1.changeNovelLayout(textColor_1, color);
  151. backgroundColor_1 = color;
  152. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.BACKGROUND_COLOR, color);
  153. }})), customNavi);
  154. $(".novelview_navi").prepend(customNavi);
  155. indexBoxWrapper_1.initPage(context_1, textColor_1, backgroundColor_1);
  156. indexBoxWrapper_1.changeNovelLayout(textColor_1, backgroundColor_1);
  157. }
  158. else if ($("#novel_honbun").length > 0) {
  159. //////////////////////////////////////////////////////////////////
  160. // 本文ページ
  161. //////////////////////////////////////////////////////////////////
  162. var novelSubtitle = document.querySelector(".novel_subtitle");
  163. var novelP = document.querySelector("#novel_p");
  164. var novelHonbun = document.querySelector("#novel_honbun");
  165. var novelA = document.querySelector("#novel_a");
  166. var novelViews_1 = [new NovelViewWrapper_1.default(document.body, novelSubtitle, novelP, novelHonbun, novelA)];
  167. // 既読を記録
  168. context_1.saveReadSetting(articleNum, new Date().toString());
  169. // ==== 設定値の読み込み
  170. var globalSettings = context_1.getGlobalSettings();
  171. var isExpandNaviColor = globalSettings[Constants_1.SETTING_KEY.EXPAND_NAVI.COLOR];
  172. var isExpandNaviLayout = globalSettings[Constants_1.SETTING_KEY.EXPAND_NAVI.LAYOUT];
  173. var isExpandNaviFont = globalSettings[Constants_1.SETTING_KEY.EXPAND_NAVI.FONT];
  174. var isExpandNaviTypeSetting = globalSettings[Constants_1.SETTING_KEY.EXPAND_NAVI.TYPESETTING];
  175. var isExpandNaviProportion = globalSettings[Constants_1.SETTING_KEY.EXPAND_NAVI.PROPORTION];
  176. var textColor_2 = globalSettings[Constants_1.SETTING_KEY.TEXT_COLOR];
  177. var backgroundColor_2 = globalSettings[Constants_1.SETTING_KEY.BACKGROUND_COLOR];
  178. var wordDirection_1 = globalSettings[Constants_1.SETTING_KEY.WORD_DIRECTION];
  179. var novelWidth_1 = globalSettings[Constants_1.SETTING_KEY.NOVEL_WIDTH];
  180. var novelHeight_1 = globalSettings[Constants_1.SETTING_KEY.NOVEL_HEIGHT];
  181. var font_1 = globalSettings[Constants_1.SETTING_KEY.FONT];
  182. var fontList = globalSettings[Constants_1.SETTING_KEY.FONT_LIST];
  183. var fontSize_1 = globalSettings[Constants_1.SETTING_KEY.FONT_SIZE];
  184. var fontWeight_1 = globalSettings[Constants_1.SETTING_KEY.FONT_WEIGHT];
  185. var letterSpacing_1 = globalSettings[Constants_1.SETTING_KEY.LETTER_SPACING];
  186. var lineHeight_1 = globalSettings[Constants_1.SETTING_KEY.LINE_HEIGHT];
  187. // let wordSpacing: string = globalSettings[SETTING_KEY.WORD_SPACING];
  188. var kanjiMargin_1 = globalSettings[Constants_1.SETTING_KEY.KANJI_SPACING];
  189. var kanjiSize_1 = globalSettings[Constants_1.SETTING_KEY.KANJI_SIZE];
  190. var katakanaMargin_1 = globalSettings[Constants_1.SETTING_KEY.KATAKANA_SPACING];
  191. var katakanaSize_1 = globalSettings[Constants_1.SETTING_KEY.KATAKANA_SIZE];
  192. var serifMargin_1 = globalSettings[Constants_1.SETTING_KEY.SERIF_SPACING];
  193. var serifSize_1 = globalSettings[Constants_1.SETTING_KEY.SERIF_SIZE];
  194. // サイドメニュー構築
  195. var allowedAddresses = ["ncode.syosetu.com", "novel18.syosetu.com"];
  196. var sideMenu_1;
  197. if (allowedAddresses.indexOf(location.host) >= 0) {
  198. var sideAddress = location.protocol + "//" + location.host + "/" + novelCode;
  199. sideMenu_1 = new SideMenu_1.default(context_1, sideAddress);
  200. document.addEventListener("mousemove", function (event) {
  201. if (event.pageX < 10 && !sideMenu_1.isSideMenuOpened) {
  202. sideMenu_1.showSideMenu(textColor_2, backgroundColor_2);
  203. }
  204. else if (event.pageX > SideMenu_1.default.MENU_SIZE && sideMenu_1.isSideMenuOpened) {
  205. sideMenu_1.closeSideMenu();
  206. }
  207. });
  208. }
  209. // ==== ナビゲーターの構築
  210. var customRelatedNovelContainer = document.createElement("div");
  211. ReactDOM.render(React.createElement("div", null, React.createElement(ExpandableItem_1.default, {label: "カラー", expand: isExpandNaviColor, onToggle: function (expand) { return context_1.saveGlobalSetting(Constants_1.SETTING_KEY.EXPAND_NAVI.COLOR, expand); }}, React.createElement(Label2, null, "文字色"), React.createElement(ColorPicker_1.default, {color: textColor_2, onChange: function (color) {
  212. for (var _i = 0, novelViews_2 = novelViews_1; _i < novelViews_2.length; _i++) {
  213. var novelView = novelViews_2[_i];
  214. novelView.changeNovelLayout(color, backgroundColor_2);
  215. }
  216. }, onChangeComplete: function (color) {
  217. for (var _i = 0, novelViews_3 = novelViews_1; _i < novelViews_3.length; _i++) {
  218. var novelView = novelViews_3[_i];
  219. novelView.changeNovelLayout(color, backgroundColor_2);
  220. }
  221. if (sideMenu_1) {
  222. sideMenu_1.changeNovelLayout(color, backgroundColor_2);
  223. }
  224. textColor_2 = color;
  225. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.TEXT_COLOR, color);
  226. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "背景色"), React.createElement(ColorPicker_1.default, {color: backgroundColor_2, onChange: function (color) {
  227. for (var _i = 0, novelViews_4 = novelViews_1; _i < novelViews_4.length; _i++) {
  228. var novelView = novelViews_4[_i];
  229. novelView.changeNovelLayout(textColor_2, color);
  230. }
  231. }, onChangeComplete: function (color) {
  232. for (var _i = 0, novelViews_5 = novelViews_1; _i < novelViews_5.length; _i++) {
  233. var novelView = novelViews_5[_i];
  234. novelView.changeNovelLayout(textColor_2, color);
  235. }
  236. if (sideMenu_1) {
  237. sideMenu_1.changeNovelLayout(color, backgroundColor_2);
  238. }
  239. backgroundColor_2 = color;
  240. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.BACKGROUND_COLOR, color);
  241. }})), React.createElement(Spacing1, null), React.createElement(ExpandableItem_1.default, {label: "レイアウト", expand: isExpandNaviLayout, onToggle: function (expand) { return context_1.saveGlobalSetting(Constants_1.SETTING_KEY.EXPAND_NAVI.LAYOUT, expand); }}, React.createElement(Label2, null, "字送り・行送り"), React.createElement(WordDirectionSelector_1.default, {wordDirection: wordDirection_1, onChangeWordDirection: function (_wordDirection) {
  242. for (var _i = 0, novelViews_6 = novelViews_1; _i < novelViews_6.length; _i++) {
  243. var novelView = novelViews_6[_i];
  244. novelView.changeWritingMode(_wordDirection, novelHeight_1);
  245. }
  246. wordDirection_1 = _wordDirection;
  247. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.WORD_DIRECTION, _wordDirection);
  248. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "ページ横幅"), React.createElement(InputSize_1.default, {value: novelWidth_1, onChange: function (sizeValue) {
  249. for (var _i = 0, novelViews_7 = novelViews_1; _i < novelViews_7.length; _i++) {
  250. var novelView = novelViews_7[_i];
  251. novelView.changeWidth(sizeValue);
  252. }
  253. novelWidth_1 = sizeValue;
  254. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.NOVEL_WIDTH, sizeValue);
  255. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "ページ縦幅"), React.createElement(InputSize_1.default, {value: novelHeight_1, onChange: function (sizeValue) {
  256. for (var _i = 0, novelViews_8 = novelViews_1; _i < novelViews_8.length; _i++) {
  257. var novelView = novelViews_8[_i];
  258. if ((wordDirection_1).indexOf("vertical") === 0) {
  259. novelView.changeHeight(sizeValue);
  260. }
  261. else {
  262. novelView.changeHeight("auto");
  263. }
  264. }
  265. novelHeight_1 = sizeValue;
  266. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.NOVEL_HEIGHT, sizeValue);
  267. }})), React.createElement(Spacing1, null), React.createElement(ExpandableItem_1.default, {label: "フォント", expand: isExpandNaviFont, onToggle: function (expand) { return context_1.saveGlobalSetting(Constants_1.SETTING_KEY.EXPAND_NAVI.FONT, expand); }}, React.createElement(Label2, null, "書体"), React.createElement(FontSelector_1.default, {font: font_1, fontList: fontList, onChangeFontListener: function (selectedFont) {
  268. for (var _i = 0, novelViews_9 = novelViews_1; _i < novelViews_9.length; _i++) {
  269. var novelView = novelViews_9[_i];
  270. novelView.changeFont(selectedFont);
  271. }
  272. font_1 = selectedFont;
  273. context_1.saveGlobalSetting("font", selectedFont);
  274. }, onChangeFontListListener: function (fontList) {
  275. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.FONT_LIST, fontList);
  276. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "文字サイズ"), React.createElement(InputSize_1.default, {value: fontSize_1, onChange: function (sizeValue) {
  277. for (var _i = 0, novelViews_10 = novelViews_1; _i < novelViews_10.length; _i++) {
  278. var novelView = novelViews_10[_i];
  279. novelView.changeFontSize(sizeValue);
  280. }
  281. fontSize_1 = sizeValue;
  282. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.FONT_SIZE, sizeValue);
  283. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "文字ウェイト"), React.createElement(InputNumber_1.default, {min: 100, max: 1000, step: 100, value: fontWeight_1, onChange: function (sizeValue) {
  284. for (var _i = 0, novelViews_11 = novelViews_1; _i < novelViews_11.length; _i++) {
  285. var novelView = novelViews_11[_i];
  286. novelView.changeFontWeight("" + sizeValue);
  287. }
  288. fontWeight_1 = sizeValue;
  289. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.FONT_WEIGHT, sizeValue);
  290. }})), React.createElement(Spacing1, null), React.createElement(ExpandableItem_1.default, {label: "文字組み", expand: isExpandNaviTypeSetting, onToggle: function (expand) { return context_1.saveGlobalSetting(Constants_1.SETTING_KEY.EXPAND_NAVI.TYPESETTING, expand); }}, React.createElement(Label2, null, "文字間隔"), React.createElement(InputSize_1.default, {value: letterSpacing_1, onChange: function (sizeValue) {
  291. for (var _i = 0, novelViews_12 = novelViews_1; _i < novelViews_12.length; _i++) {
  292. var novelView = novelViews_12[_i];
  293. novelView.changeLetterSpacing(sizeValue);
  294. }
  295. letterSpacing_1 = sizeValue;
  296. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.LETTER_SPACING, sizeValue);
  297. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "行間隔"), React.createElement(InputSize_1.default, {min: 0, max: 500, step: 1, value: lineHeight_1, onChange: function (sizeValue) {
  298. for (var _i = 0, novelViews_13 = novelViews_1; _i < novelViews_13.length; _i++) {
  299. var novelView = novelViews_13[_i];
  300. novelView.changeLineHeight(sizeValue);
  301. }
  302. lineHeight_1 = sizeValue;
  303. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.LINE_HEIGHT, sizeValue);
  304. }})), React.createElement(Spacing1, null), React.createElement(ExpandableItem_1.default, {label: "プロポーション", expand: isExpandNaviProportion, onToggle: function (expand) { return context_1.saveGlobalSetting(Constants_1.SETTING_KEY.EXPAND_NAVI.PROPORTION, expand); }}, React.createElement(Label2, null, "漢字マージン"), React.createElement(InputSize_1.default, {min: 0, max: 200, step: 1, value: kanjiMargin_1, onChange: function (sizeValue) {
  305. for (var _i = 0, novelViews_14 = novelViews_1; _i < novelViews_14.length; _i++) {
  306. var novelView = novelViews_14[_i];
  307. novelView.changeKanjiMargin(sizeValue);
  308. }
  309. kanjiMargin_1 = sizeValue;
  310. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.KANJI_SPACING, sizeValue);
  311. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "漢字サイズ"), React.createElement(InputSize_1.default, {min: 0, max: 200, step: 1, value: kanjiSize_1, onChange: function (sizeValue) {
  312. for (var _i = 0, novelViews_15 = novelViews_1; _i < novelViews_15.length; _i++) {
  313. var novelView = novelViews_15[_i];
  314. novelView.changeKanjiSize(sizeValue);
  315. }
  316. kanjiSize_1 = sizeValue;
  317. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.KANJI_SIZE, sizeValue);
  318. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "カタカナマージン"), React.createElement(InputSize_1.default, {min: 0, max: 200, step: 1, value: katakanaMargin_1, onChange: function (sizeValue) {
  319. for (var _i = 0, novelViews_16 = novelViews_1; _i < novelViews_16.length; _i++) {
  320. var novelView = novelViews_16[_i];
  321. novelView.changeKatakanaMargin(sizeValue);
  322. }
  323. katakanaMargin_1 = sizeValue;
  324. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.KATAKANA_SPACING, sizeValue);
  325. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "カタカナサイズ"), React.createElement(InputSize_1.default, {min: 0, max: 200, step: 1, value: katakanaSize_1, onChange: function (sizeValue) {
  326. for (var _i = 0, novelViews_17 = novelViews_1; _i < novelViews_17.length; _i++) {
  327. var novelView = novelViews_17[_i];
  328. novelView.changeKatakanaSize(sizeValue);
  329. }
  330. katakanaSize_1 = sizeValue;
  331. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.KATAKANA_SIZE, sizeValue);
  332. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "セリフマージン"), React.createElement(InputSize_1.default, {min: 0, max: 200, step: 1, value: serifMargin_1, onChange: function (sizeValue) {
  333. for (var _i = 0, novelViews_18 = novelViews_1; _i < novelViews_18.length; _i++) {
  334. var novelView = novelViews_18[_i];
  335. novelView.changeSerifMargin(sizeValue);
  336. }
  337. serifMargin_1 = sizeValue;
  338. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.SERIF_SPACING, sizeValue);
  339. }}), React.createElement(Spacing2, null), React.createElement(Label2, null, "セリフサイズ"), React.createElement(InputSize_1.default, {min: 0, max: 200, step: 1, value: serifSize_1, onChange: function (sizeValue) {
  340. for (var _i = 0, novelViews_19 = novelViews_1; _i < novelViews_19.length; _i++) {
  341. var novelView = novelViews_19[_i];
  342. novelView.changeSerifSize(sizeValue);
  343. }
  344. serifSize_1 = sizeValue;
  345. context_1.saveGlobalSetting(Constants_1.SETTING_KEY.SERIF_SIZE, sizeValue);
  346. }}))), customRelatedNovelContainer);
  347. $(".novelview_navi").prepend(customRelatedNovelContainer);
  348. // ==== 文字詰め
  349. // ---- 未実装
  350. //////////////////////////////////////////////////////////////////
  351. // 画面レイアウトを一括で変更するための関数
  352. //////////////////////////////////////////////////////////////////
  353. var applyStyle_1 = function (novelView) {
  354. novelView.changeWritingMode(wordDirection_1, novelHeight_1);
  355. novelView.changeWidth(novelWidth_1);
  356. if (wordDirection_1.indexOf("vertical") === 0) {
  357. novelView.changeHeight(novelHeight_1);
  358. }
  359. else {
  360. novelView.changeHeight("auto");
  361. }
  362. novelView.changeFont(font_1);
  363. novelView.changeFontSize(fontSize_1);
  364. novelView.changeFontWeight("" + fontWeight_1);
  365. novelView.changeLetterSpacing(letterSpacing_1);
  366. novelView.changeLineHeight(lineHeight_1);
  367. novelView.changeKanjiMargin(kanjiMargin_1);
  368. novelView.changeKanjiSize(kanjiSize_1);
  369. novelView.changeKatakanaMargin(katakanaMargin_1);
  370. novelView.changeKatakanaSize(katakanaSize_1);
  371. novelView.changeSerifMargin(serifMargin_1);
  372. novelView.changeSerifSize(serifSize_1);
  373. novelView.changeNovelLayout(textColor_2, backgroundColor_2);
  374. };
  375. //////////////////////////////////////////////////////////////////
  376. // 画面レイアウトを適用
  377. //////////////////////////////////////////////////////////////////
  378. for (var _i = 0, novelViews_20 = novelViews_1; _i < novelViews_20.length; _i++) {
  379. var novelView = novelViews_20[_i];
  380. applyStyle_1(novelView);
  381. }
  382. //////////////////////////////////////////////////////////////////
  383. // AutoPagerizeによるページロード時の動作
  384. //////////////////////////////////////////////////////////////////
  385. /**
  386. * AutoPagerizeにより読み込まれるページ
  387. *
  388. * 1. div.novel_bn : 先頭のページ送り
  389. * 2. p.novel_subtitle : タイトル
  390. * 3. div#novel_p.novel_view (optional) : 作者コメント欄
  391. * 4. div#novel_honbun.novel_view : 本文
  392. * 5. div#novel_a.novel_view (optional) : 作者コメント欄
  393. * 6. div.novel_bn : 末尾のページ送り
  394. */
  395. var parseUrl_1 = function (address) {
  396. var urlPaser = document.createElement("a");
  397. urlPaser.href = address;
  398. return urlPaser;
  399. };
  400. var loadedPages_1 = {};
  401. document.body.addEventListener("AutoPagerize_DOMNodeInserted", function (event) {
  402. var targetElement = event.target;
  403. var loadedPageAddress = event.newValue;
  404. var _a = parseUrl_1(loadedPageAddress).pathname.split("/").filter(Boolean), loadedArticleNum = _a[1];
  405. if (!(loadedArticleNum in loadedPages_1)) {
  406. loadedPages_1 = {}; // reset
  407. loadedPages_1[loadedArticleNum] = {};
  408. }
  409. var KEY_TITLE = "novel_subtitle";
  410. var KEY_COMMENT_PREVIOUS = "novel_p";
  411. var KEY_HONBUN = "novel_honbun";
  412. var KEY_COMMENT_AFTER = "novel_a";
  413. var KEY_FEED_PAGE = "novel_bn";
  414. // console.log("Element", event.target, "RequestURL", (event as any).newValue, "ParentNode", (event as any).relatedNode);
  415. if (targetElement.id) {
  416. switch (targetElement.id) {
  417. case KEY_COMMENT_PREVIOUS:
  418. loadedPages_1[loadedArticleNum][KEY_COMMENT_PREVIOUS] = targetElement;
  419. break;
  420. case KEY_HONBUN:
  421. context_1.saveReadSetting(loadedArticleNum, new Date().toString());
  422. loadedPages_1[loadedArticleNum][KEY_HONBUN] = targetElement;
  423. break;
  424. case KEY_COMMENT_AFTER:
  425. loadedPages_1[loadedArticleNum][KEY_COMMENT_AFTER] = targetElement;
  426. break;
  427. }
  428. }
  429. else if (targetElement.className) {
  430. switch (targetElement.className) {
  431. case KEY_TITLE:
  432. loadedPages_1[loadedArticleNum][KEY_TITLE] = targetElement;
  433. break;
  434. case KEY_FEED_PAGE:
  435. var hasLoadedNovelBn = KEY_FEED_PAGE in loadedPages_1[loadedArticleNum];
  436. if (hasLoadedNovelBn) {
  437. var novelSubtitle_1 = loadedPages_1[loadedArticleNum][KEY_TITLE];
  438. var novelP_1 = loadedPages_1[loadedArticleNum][KEY_COMMENT_PREVIOUS];
  439. var novelHonbun_1 = loadedPages_1[loadedArticleNum][KEY_HONBUN];
  440. var novelA_1 = loadedPages_1[loadedArticleNum][KEY_COMMENT_AFTER];
  441. var novelView = new NovelViewWrapper_1.default(document.body, novelSubtitle_1, novelP_1, novelHonbun_1, novelA_1);
  442. novelViews_1.push(novelView);
  443. applyStyle_1(novelView);
  444. }
  445. else {
  446. loadedPages_1[loadedArticleNum][KEY_FEED_PAGE] = targetElement;
  447. }
  448. break;
  449. }
  450. }
  451. }, false);
  452. }
  453. }
  454.  
  455.  
  456. /***/ },
  457. /* 1 */
  458. /***/ function(module, exports, __webpack_require__) {
  459.  
  460. /// <reference path="./../typings/index.d.ts" />
  461. "use strict";
  462. var __extends = (this && this.__extends) || function (d, b) {
  463. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  464. function __() { this.constructor = d; }
  465. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  466. };
  467. var NarouPageWrapper_1 = __webpack_require__(2);
  468. /**
  469. * 作品の1話分を包むクラス
  470. *
  471. * 各種レイアウトの操作を受け持つ
  472. */
  473. var NovelViewWrapper = (function (_super) {
  474. __extends(NovelViewWrapper, _super);
  475. function NovelViewWrapper(body, novelSubTitle, novelP, novelView, novelA) {
  476. _super.call(this, body);
  477. this.$novelSubTitle = $(novelSubTitle);
  478. this.$novelP = $(novelP);
  479. this.$novelView = $(novelView);
  480. this.$novelA = $(novelA);
  481. this.$novelP.css({ "margin": "0px", "width": "auto" });
  482. this.$novelView.css({ "margin": "0px", "width": "auto" });
  483. this.$novelA.css({ "margin": "0px", "width": "auto" });
  484. this.$oneNovel = $("<div style=\"margin: 30px auto 50px auto\" />");
  485. this.$novelSubTitle.before(this.$oneNovel);
  486. this.$oneNovel.append(this.$novelSubTitle);
  487. if (this.$novelP.length > 0) {
  488. this.$oneNovel.append(this.$novelP);
  489. }
  490. this.$oneNovel.append(this.$novelView);
  491. if (this.$novelA.length > 0) {
  492. this.$oneNovel.append(this.$novelA);
  493. }
  494. this.isCreatedKanjiContainers = false;
  495. this.isCreatedKatakanaContainers = false;
  496. this.isCreatedSerifContainers = false;
  497. // ページの横幅を操作しやすいように設定しておく
  498. $(body).find("#container")
  499. .find("#novel_contents, #novel_p, #novel_color")
  500. .css({ "width": "auto" });
  501. }
  502. NovelViewWrapper.prototype.createStyleSheet = function () {
  503. var styleElement = document.createElement("style");
  504. document.head.appendChild(styleElement);
  505. return styleElement.sheet;
  506. };
  507. NovelViewWrapper.prototype.setupKanjiContainers = function () {
  508. this.isCreatedKanjiContainers = true;
  509. var replacedHtml = "";
  510. this.$novelView.contents().each(function (index, element) {
  511. if (element.nodeName === "#text") {
  512. replacedHtml += element.textContent.replace(NovelViewWrapper.KANJI_PATTERN, "<span class=\"kanji\">$1</span>");
  513. }
  514. else {
  515. replacedHtml += element.outerHTML;
  516. }
  517. });
  518. this.$novelView.html(replacedHtml);
  519. this.kanjiMarginCss = this.createStyleSheet();
  520. this.kanjiSizeCss = this.createStyleSheet();
  521. };
  522. NovelViewWrapper.prototype.setupKatakanaContainers = function () {
  523. this.isCreatedKatakanaContainers = true;
  524. var replacedHtml = "";
  525. this.$novelView.contents().each(function (index, element) {
  526. if (element.nodeName === "#text") {
  527. replacedHtml += element.textContent.replace(NovelViewWrapper.KATAKANA_PATTERN, "<span class=\"katakana\">$1</span>");
  528. }
  529. else {
  530. replacedHtml += element.outerHTML;
  531. }
  532. });
  533. this.$novelView.html(replacedHtml);
  534. this.katakanaMarginCss = this.createStyleSheet();
  535. this.katakanaSizeCss = this.createStyleSheet();
  536. };
  537. NovelViewWrapper.prototype.setupSerifContainers = function () {
  538. this.isCreatedSerifContainers = true;
  539. var replacedHtml = "";
  540. this.$novelView.contents().each(function (index, element) {
  541. if (element.nodeName === "#text") {
  542. replacedHtml += element.textContent.replace(NovelViewWrapper.SERIF_PATTERN, "<span class=\"serif\">$1</span>");
  543. }
  544. else {
  545. replacedHtml += element.outerHTML;
  546. }
  547. });
  548. this.$novelView.html(replacedHtml);
  549. this.serifMarginCss = this.createStyleSheet();
  550. this.serifSizeCss = this.createStyleSheet();
  551. };
  552. NovelViewWrapper.prototype.changeFont = function (font) {
  553. this.$novelSubTitle.css({ "font-family": font });
  554. this.$novelView.css({ "font-family": font });
  555. };
  556. // 文字サイズを変更
  557. NovelViewWrapper.prototype.changeFontSize = function (size) {
  558. this.$novelSubTitle.css({ "font-size": size });
  559. this.$novelP.css({ "font-size": size });
  560. this.$novelView.css({ "font-size": size });
  561. this.$novelA.css({ "font-size": size });
  562. };
  563. NovelViewWrapper.prototype.changeFontWeight = function (weight) {
  564. this.$novelSubTitle.css({ "font-weight": weight });
  565. this.$novelP.css({ "font-weight": weight });
  566. this.$novelView.css({ "font-weight": weight });
  567. this.$novelA.css({ "font-weight": weight });
  568. };
  569. // 行間を変更
  570. NovelViewWrapper.prototype.changeLineHeight = function (height) {
  571. this.$novelSubTitle.css({ "line-height": height });
  572. this.$novelP.css({ "line-height": height });
  573. this.$novelView.css({ "line-height": height });
  574. this.$novelA.css({ "line-height": height });
  575. };
  576. // 字間を変更
  577. NovelViewWrapper.prototype.changeLetterSpacing = function (spacing) {
  578. this.$novelSubTitle.css({ "letter-spacing": spacing });
  579. this.$novelP.css({ "letter-spacing": spacing });
  580. this.$novelView.css({ "letter-spacing": spacing });
  581. this.$novelA.css({ "letter-spacing": spacing });
  582. };
  583. // 単語の間隔を変更
  584. NovelViewWrapper.prototype.changeWordSpacing = function (spacing) {
  585. this.$novelView.css({ "word-spacing": spacing });
  586. this.$novelP.css({ "word-spacing": spacing });
  587. this.$novelSubTitle.css({ "word-spacing": spacing });
  588. this.$novelA.css({ "word-spacing": spacing });
  589. };
  590. // 横幅を変更
  591. NovelViewWrapper.prototype.changeWidth = function (width) {
  592. this.$oneNovel.css({ "width": width });
  593. };
  594. // 縦幅を変更
  595. NovelViewWrapper.prototype.changeHeight = function (height) {
  596. this.$oneNovel.css({ "height": height });
  597. };
  598. NovelViewWrapper.prototype.changeWritingMode = function (wordDirection, novelHeight) {
  599. switch (wordDirection) {
  600. case "horizontal-tb":
  601. {
  602. this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "auto", height: "auto" });
  603. this.$novelP.css({ "writing-mode": wordDirection, "float": "none", "text-align": "bottom", "width": "auto",
  604. "border-bottom": "3px double #999999", "border-right": "none", "border-left": "none" });
  605. this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "none" });
  606. this.$novelView.css({ "writing-mode": wordDirection, "float": "none" });
  607. this.$novelA.css({ "writing-mode": wordDirection, "float": "none", "text-align": "bottom", "width": "auto",
  608. "border-top": "3px double #999999", "border-right": "none", "border-left": "none" });
  609. }
  610. break;
  611. case "vertical-rl":
  612. {
  613. this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "scroll", height: novelHeight });
  614. this.$novelP.css({ "writing-mode": wordDirection, "float": "right", "text-align": "bottom", "width": "auto",
  615. "border-bottom": "none", "border-right": "none", "border-left": "3px double #999999" });
  616. this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "right", "text-align": "center" });
  617. this.$novelView.css({ "writing-mode": wordDirection, "float": "right" });
  618. this.$novelA.css({ "writing-mode": wordDirection, "float": "right", "text-align": "bottom", "width": "auto",
  619. "border-top": "none", "border-right": "3px double #999999", "border-left": "none" });
  620. }
  621. break;
  622. case "vertical-lr":
  623. {
  624. this.$oneNovel.css({ "writing-mode": wordDirection, "overflow-x": "scroll", height: novelHeight });
  625. this.$novelP.css({ "writing-mode": wordDirection, "float": "left", "text-align": "bottom", "width": "auto",
  626. "border-bottom": "none", "border-right": "3px double #999999", "border-left": "none" });
  627. this.$novelSubTitle.css({ "writing-mode": wordDirection, "float": "left", "text-align": "center" });
  628. this.$novelView.css({ "writing-mode": wordDirection, "float": "left" });
  629. this.$novelA.css({ "writing-mode": wordDirection, "float": "left", "text-align": "bottom", "width": "auto",
  630. "border-top": "none", "border-right": "none", "border-left": "3px double #999999" });
  631. }
  632. break;
  633. }
  634. };
  635. NovelViewWrapper.prototype.changeKanjiMargin = function (size) {
  636. if (size !== "0px" && !this.isCreatedKanjiContainers) {
  637. this.setupKanjiContainers();
  638. }
  639. if (this.isCreatedKanjiContainers) {
  640. if (this.kanjiMarginCss.rules.length > 0) {
  641. this.kanjiMarginCss.removeRule(this.kanjiMarginCss.rules.length - 1);
  642. }
  643. this.kanjiMarginCss.insertRule(".kanji { margin: " + size + " }", 0);
  644. }
  645. };
  646. NovelViewWrapper.prototype.changeKanjiSize = function (size) {
  647. if (size !== "100%" && !this.isCreatedKanjiContainers) {
  648. this.setupKanjiContainers();
  649. }
  650. if (this.isCreatedKanjiContainers) {
  651. if (this.kanjiSizeCss.rules.length > 0) {
  652. this.kanjiSizeCss.removeRule(this.kanjiSizeCss.rules.length - 1);
  653. }
  654. this.kanjiSizeCss.insertRule(".kanji { font-size: " + size + " }", 0);
  655. }
  656. };
  657. NovelViewWrapper.prototype.changeKatakanaMargin = function (size) {
  658. if (size !== "0px" && !this.isCreatedKatakanaContainers) {
  659. this.setupKatakanaContainers();
  660. }
  661. if (this.isCreatedKatakanaContainers) {
  662. if (this.katakanaMarginCss.rules.length > 0) {
  663. this.katakanaMarginCss.removeRule(this.katakanaMarginCss.rules.length - 1);
  664. }
  665. this.katakanaMarginCss.insertRule(".katakana { margin: " + size + " }", 0);
  666. }
  667. };
  668. NovelViewWrapper.prototype.changeKatakanaSize = function (size) {
  669. if (size !== "100%" && !this.isCreatedKatakanaContainers) {
  670. this.setupKatakanaContainers();
  671. }
  672. if (this.isCreatedKatakanaContainers) {
  673. if (this.katakanaSizeCss.rules.length > 0) {
  674. this.katakanaSizeCss.removeRule(this.katakanaSizeCss.rules.length - 1);
  675. }
  676. this.katakanaSizeCss.insertRule(".katakana { font-size: " + size + " }", 0);
  677. }
  678. };
  679. NovelViewWrapper.prototype.changeSerifMargin = function (size) {
  680. if (size !== "0px" && !this.isCreatedSerifContainers) {
  681. this.setupSerifContainers();
  682. }
  683. if (this.isCreatedSerifContainers) {
  684. if (this.serifMarginCss.rules.length > 0) {
  685. this.serifMarginCss.removeRule(this.serifMarginCss.rules.length - 1);
  686. }
  687. this.serifMarginCss.insertRule(".serif { margin: " + size + " }", 0);
  688. }
  689. };
  690. NovelViewWrapper.prototype.changeSerifSize = function (size) {
  691. if (size !== "100%" && !this.isCreatedSerifContainers) {
  692. this.setupSerifContainers();
  693. }
  694. if (this.isCreatedSerifContainers) {
  695. if (this.serifSizeCss.rules.length > 0) {
  696. this.serifSizeCss.removeRule(this.serifSizeCss.rules.length - 1);
  697. }
  698. this.serifSizeCss.insertRule(".serif { font-size: " + size + " }", 0);
  699. }
  700. };
  701. NovelViewWrapper.prototype.changeNovelLayout = function (textColor, backgroundColor) {
  702. _super.prototype.changeNovelLayout.call(this, textColor, backgroundColor);
  703. $(this.body).find("#novel_color").css({ "color": textColor });
  704. };
  705. 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;
  706. NovelViewWrapper.SERIF_PATTERN = /(「[^」]{1,1000}」)/g;
  707. NovelViewWrapper.KATAKANA_PATTERN = /([ァ-ンヷヸヹヺヵヶ]+)/g;
  708. return NovelViewWrapper;
  709. }(NarouPageWrapper_1.default));
  710. Object.defineProperty(exports, "__esModule", { value: true });
  711. exports.default = NovelViewWrapper;
  712.  
  713.  
  714. /***/ },
  715. /* 2 */
  716. /***/ function(module, exports, __webpack_require__) {
  717.  
  718. "use strict";
  719. var Color_1 = __webpack_require__(3);
  720. var Utils_1 = __webpack_require__(4);
  721. var NarouPageWrapper = (function () {
  722. function NarouPageWrapper(body) {
  723. this.body = body;
  724. this.removeDefaultStyles();
  725. }
  726. NarouPageWrapper.prototype.removeDefaultStyles = function () {
  727. // 標準で用意された全てのカスタムレイアウトを解除する
  728. var $body = $(this.body);
  729. var $novelColor = $body.find("#novel_color");
  730. var $novelContents = $body.find("#novel_contents");
  731. var $novelSubList = $body.find("dl.novel_sublist2");
  732. for (var _i = 0, _a = Utils_1.range(1, 8); _i < _a.length; _i++) {
  733. var i = _a[_i];
  734. var className = "customlayout" + i;
  735. if ($body.hasClass(className)) {
  736. $body.removeClass(className);
  737. }
  738. if ($novelColor.hasClass(className)) {
  739. $novelColor.removeClass(className);
  740. }
  741. if ($novelContents.hasClass(className)) {
  742. $novelContents.removeClass(className);
  743. }
  744. if ($novelSubList.hasClass(className)) {
  745. $novelSubList.removeClass(className);
  746. }
  747. }
  748. };
  749. NarouPageWrapper.prototype.changeNovelLayout = function (textColor, backgroundColor) {
  750. var $body = $(this.body);
  751. $body.css({ "background-color": backgroundColor });
  752. $body.css({ "color": textColor });
  753. var hoverColorHSV = Color_1.RGB.fromString(textColor).toHSV().applyContrasts(40);
  754. var hoverColor = hoverColorHSV.toRGB().getColorCode();
  755. $("a")
  756. .css({ color: textColor, textCecoration: "none", outline: "none" })
  757. .hover(function (event) { return $(event.target).css({ color: hoverColor, textCecoration: "none" }); }, function (event) { return $(event.target).css({ color: textColor }); });
  758. };
  759. return NarouPageWrapper;
  760. }());
  761. Object.defineProperty(exports, "__esModule", { value: true });
  762. exports.default = NarouPageWrapper;
  763.  
  764.  
  765. /***/ },
  766. /* 3 */
  767. /***/ function(module, exports) {
  768.  
  769. /// <reference path="./../typings/index.d.ts" />
  770. "use strict";
  771. var RGB = (function () {
  772. function RGB(red, green, blue) {
  773. this.red = red;
  774. this.green = green;
  775. this.blue = blue;
  776. }
  777. RGB.prototype.toHSV = function () {
  778. var max = Math.max(this.red, this.green, this.blue);
  779. var min = Math.min(this.red, this.green, this.blue);
  780. var h;
  781. if (this.red === this.green && this.green === this.blue) {
  782. h = 0;
  783. }
  784. else if (max === this.red) {
  785. h = HSV.H1 * ((this.green - this.blue) / (max - min));
  786. }
  787. else if (max === this.green) {
  788. h = HSV.H1 * ((this.blue - this.red) / (max - min)) + HSV.H2;
  789. }
  790. else if (max === this.blue) {
  791. h = HSV.H1 * ((this.red - this.green) / (max - min)) + HSV.H4;
  792. }
  793. else {
  794. throw new Error("Internal error.");
  795. }
  796. h %= HSV.H_MAX;
  797. if (h < 0) {
  798. h += HSV.H_MAX;
  799. }
  800. return new HSV(h, (max - min) / max * HSV.SV_MAX, max / RGB.MAX * HSV.SV_MAX);
  801. };
  802. RGB.fromString = function (str) {
  803. if (/^#?[a-f\d]{3,8}$/i.exec(str)) {
  804. if (str.indexOf("#") === 0) {
  805. str = str.substring(1);
  806. }
  807. switch (str.length) {
  808. case 3: {
  809. var r = str.substring(0, 1);
  810. var g = str.substring(1, 2);
  811. var b = str.substring(2, 3);
  812. return new RGB(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16));
  813. }
  814. /* falls through */
  815. case 6: {
  816. var r = str.substring(0, 2);
  817. var g = str.substring(2, 4);
  818. var b = str.substring(4, 6);
  819. return new RGB(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
  820. }
  821. /* falls through */
  822. default:
  823. throw new Error("Not supported color code type.");
  824. }
  825. }
  826. else {
  827. return RGB.fromString(RGB.colourNameToHex(str));
  828. }
  829. };
  830. RGB.colourNameToHex = function (colour) {
  831. var colours = {
  832. "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", "beige": "#f5f5dc",
  833. "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a",
  834. "burlywood": "#deb887", "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50",
  835. "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff", "darkblue": "#00008b",
  836. "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b",
  837. "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f", "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000",
  838. "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f",
  839. "darkturquoise": "#00ced1", "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969",
  840. "dodgerblue": "#1e90ff", "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
  841. "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000",
  842. "greenyellow": "#adff2f", "honeydew": "#f0fff0", "hotpink": "#ff69b4", "indianred ": "#cd5c5c", "indigo": "#4b0082",
  843. "ivory": "#fffff0", "khaki": "#f0e68c", "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00",
  844. "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
  845. "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa",
  846. "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de", "lightyellow": "#ffffe0", "lime": "#00ff00",
  847. "limegreen": "#32cd32", "linen": "#faf0e6", "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa",
  848. "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371",
  849. "mediumslateblue": "#7b68ee", "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585",
  850. "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5", "navajowhite": "#ffdead",
  851. "navy": "#000080", "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500",
  852. "orchid": "#da70d6", "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093",
  853. "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6",
  854. "purple": "#800080", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1", "saddlebrown": "#8b4513", "salmon": "#fa8072",
  855. "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb",
  856. "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4", "tan": "#d2b48c",
  857. "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0", "violet": "#ee82ee", "wheat": "#f5deb3",
  858. "white": "#ffffff", "whitesmoke": "#f5f5f5", "yellow": "#ffff00", "yellowgreen": "#9acd32"
  859. };
  860. if (typeof colours[colour.toLowerCase()] !== undefined) {
  861. return colours[colour.toLowerCase()];
  862. }
  863. return false;
  864. };
  865. RGB.prototype.getColorCode = function () {
  866. var r = Math.round(this.red).toString(16);
  867. var g = Math.round(this.green).toString(16);
  868. var b = Math.round(this.blue).toString(16);
  869. switch (r.length) {
  870. case 0:
  871. r = "00";
  872. break;
  873. case 1:
  874. r = "0" + r;
  875. break;
  876. case 2: break;
  877. case 3:
  878. r = "FF";
  879. break;
  880. default: throw new Error("Number format error.");
  881. }
  882. switch (g.length) {
  883. case 0:
  884. g = "00";
  885. break;
  886. case 1:
  887. g = "0" + g;
  888. break;
  889. case 2: break;
  890. case 3:
  891. g = "FF";
  892. break;
  893. default: throw new Error("Number format error.");
  894. }
  895. switch (b.length) {
  896. case 0:
  897. b = "00";
  898. break;
  899. case 1:
  900. b = "0" + b;
  901. break;
  902. case 2: break;
  903. case 3:
  904. b = "FF";
  905. break;
  906. default: throw new Error("Number format error.");
  907. }
  908. return "#" + r + g + b;
  909. };
  910. RGB.prototype.toString = function () {
  911. return "rgb(" + Math.round(this.red) + ", " + Math.round(this.green) + ", " + Math.round(this.blue) + ")";
  912. };
  913. RGB.MIN = 0;
  914. RGB.MAX = 255;
  915. return RGB;
  916. }());
  917. exports.RGB = RGB;
  918. var HSV = (function () {
  919. function HSV(hue, saturation, value) {
  920. this.hue = hue;
  921. this.saturation = saturation;
  922. this.value = value;
  923. }
  924. HSV.prototype.applyContrasts = function (constract) {
  925. if (this.saturation > (HSV.SV_MAX / 2)) {
  926. this.saturation -= constract;
  927. }
  928. else {
  929. this.saturation += constract;
  930. }
  931. if (this.value > (HSV.SV_MAX / 2)) {
  932. this.value -= constract;
  933. }
  934. else {
  935. this.value += constract;
  936. }
  937. return this;
  938. };
  939. HSV.prototype.toRGB = function () {
  940. var hue = this.hue;
  941. var hue2 = hue / (HSV.H_MAX / 6);
  942. var hue3 = Math.floor(hue2);
  943. var max = this.value;
  944. var min = max - ((this.saturation / HSV.SV_MAX) * max);
  945. if (hue3 < 0 || 5 < hue3) {
  946. throw new Error();
  947. }
  948. switch (hue3) {
  949. case 0:
  950. return new RGB(max, (hue / HSV.H1) * (max - min) + min, min);
  951. case 1:
  952. return new RGB(((HSV.H2 - hue) / HSV.H1) * (max - min) + min, max, min);
  953. case 2:
  954. return new RGB(min, max, ((hue - HSV.H2) / HSV.H1) * (max - min) + min);
  955. case 3:
  956. return new RGB(min, ((HSV.H4 - hue) / HSV.H1) * (max - min) + min, max);
  957. case 4:
  958. return new RGB(((hue - HSV.H4) / HSV.H1) * (max - min) + min, min, max);
  959. case 5:
  960. return new RGB(max, min, ((HSV.H6 - hue) / HSV.H1) * (max - min) + min);
  961. }
  962. };
  963. HSV.prototype.toString = function () {
  964. return "hsv(" + Math.round(this.hue) + ", " + Math.round(this.saturation) + ", " + Math.round(this.value) + ")";
  965. };
  966. HSV.H_MAX = 360;
  967. /* 60 */ HSV.H1 = HSV.H_MAX / 6;
  968. /* 120 */ HSV.H2 = HSV.H1 * 2;
  969. /* 240 */ HSV.H4 = HSV.H1 * 4;
  970. /* 360 */ HSV.H6 = HSV.H1 * 6;
  971. HSV.SV_MAX = 255;
  972. return HSV;
  973. }());
  974. exports.HSV = HSV;
  975.  
  976.  
  977. /***/ },
  978. /* 4 */
  979. /***/ function(module, exports) {
  980.  
  981. /// <reference path="./../typings/index.d.ts" />
  982. "use strict";
  983. /// Array[]を生成
  984. function range(from, to, by) {
  985. var array = [];
  986. switch (arguments.length) {
  987. case 1:
  988. to = from;
  989. from = 0;
  990. break;
  991. case 2:
  992. if (from < to) {
  993. by = 1;
  994. }
  995. else {
  996. by = -1;
  997. }
  998. break;
  999. }
  1000. if (by > 0) {
  1001. for (var n = from; n < to; n += by) {
  1002. array.push(n);
  1003. }
  1004. }
  1005. else {
  1006. for (var n = from; n > to; n += by) {
  1007. array.push(n);
  1008. }
  1009. }
  1010. return array;
  1011. }
  1012. exports.range = range;
  1013. ;
  1014.  
  1015.  
  1016. /***/ },
  1017. /* 5 */
  1018. /***/ function(module, exports, __webpack_require__) {
  1019.  
  1020. /// <reference path="./../typings/index.d.ts" />
  1021. "use strict";
  1022. var __extends = (this && this.__extends) || function (d, b) {
  1023. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1024. function __() { this.constructor = d; }
  1025. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1026. };
  1027. var NarouPageWrapper_1 = __webpack_require__(2);
  1028. var IndexBoxWrapper_1 = __webpack_require__(6);
  1029. /**
  1030. * 連載作品のトップページを操作するためのクラス
  1031. *
  1032. */
  1033. var IndexPageWrapper = (function (_super) {
  1034. __extends(IndexPageWrapper, _super);
  1035. function IndexPageWrapper(body) {
  1036. _super.call(this, body);
  1037. this.indexBoxWrapper = new IndexBoxWrapper_1.default(body.querySelector(".index_box"));
  1038. }
  1039. IndexPageWrapper.prototype.initPage = function (context, textColor, backgroundColor) {
  1040. this.indexBoxWrapper.reconstructToExpandable(context);
  1041. this.indexBoxWrapper.applyAlreadyRead(context, backgroundColor);
  1042. };
  1043. IndexPageWrapper.prototype.changeNovelLayout = function (textColor, backgroundColor) {
  1044. this.indexBoxWrapper.changeNovelLayout(textColor, backgroundColor);
  1045. $(document.body).find("#novel_color").css({ "color": textColor });
  1046. $(document.body).css({ "background-color": backgroundColor });
  1047. };
  1048. return IndexPageWrapper;
  1049. }(NarouPageWrapper_1.default));
  1050. Object.defineProperty(exports, "__esModule", { value: true });
  1051. exports.default = IndexPageWrapper;
  1052.  
  1053.  
  1054. /***/ },
  1055. /* 6 */
  1056. /***/ function(module, exports, __webpack_require__) {
  1057.  
  1058. /// <reference path="./../typings/index.d.ts" />
  1059. "use strict";
  1060. var Color_1 = __webpack_require__(3);
  1061. /**
  1062. * 作品のインデックス部分を操作するためのクラス
  1063. *
  1064. * ページ構造
  1065. * ----
  1066. * div.index_box
  1067. * |-- div.chapter_title
  1068. * | |-- #text: (チャプタータイトル)
  1069. * |----+ dl.novel_sublist2
  1070. * | | |-- dd.subtitle
  1071. * | | | |-- a
  1072. * | | | | |-- #text: (サブタイトル)
  1073. * | | |-- dt.long_update
  1074. * | | | |-- #text: (投稿日時)
  1075. * | | | |-- span
  1076. * | | | | |-- #text: (
  1077. * | | | | |-- u
  1078. * | | | | | |-- #text: 改
  1079. * | | | | |-- #text: )
  1080. * | | | | |?
  1081. * | | |+
  1082. * | |+
  1083. */
  1084. var IndexBoxWrapper = (function () {
  1085. function IndexBoxWrapper(indexBox) {
  1086. this.$indexBox = $(indexBox);
  1087. this.$allChapterTitles = this.$indexBox.find("div.chapter_title");
  1088. this.$allSubtitleItem = this.$indexBox.find("dl.novel_sublist2");
  1089. this.$allSubtitleLabel = this.$allSubtitleItem.find("dd.subtitle");
  1090. this.$allSubtitleDate = this.$allSubtitleItem.find("dt.long_update");
  1091. // チャプターを折りたためるようするため、チャプターに属するサブタイをそれぞれのコンテナに詰め込む
  1092. this.$allChapterTitles.each(function (index, titleElement) {
  1093. var $subTitles = $(titleElement).nextUntil("div");
  1094. var $createdContainer = $("<div />", { class: "chapter_container" }).insertAfter(titleElement);
  1095. $subTitles.appendTo($createdContainer);
  1096. });
  1097. }
  1098. /// 作品の投稿日付をDateにパースする関数
  1099. // static parseDate(dateString: string): Date {
  1100. // const ds = dateString.trim();
  1101. // const yi = ds.indexOf("年");
  1102. // const mi = ds.indexOf("月");
  1103. // const di = ds.indexOf("日");
  1104. // const year = parseInt(ds.substring(0, yi).trim());
  1105. // const month = parseInt(ds.substring(yi + 1, mi).trim()) - 1; // January is zero
  1106. // const day = parseInt(ds.substring(mi + 1, di).trim());
  1107. // return new Date(year, month, day);
  1108. // };
  1109. /// 保存済みの設定からチャプターの折りたたみを適用しつつ、チャプタータイトルに折りたたみ機能を付ける
  1110. IndexBoxWrapper.prototype.reconstructToExpandable = function (context) {
  1111. var novelSettings = context.getNovelSettings();
  1112. this.$allChapterTitles.each(function (index, chapterTitleElement) {
  1113. $(chapterTitleElement)
  1114. .click(function (event) {
  1115. var $container = $(event.target).next();
  1116. $container.slideToggle(function () {
  1117. novelSettings[index] = ($container.css("display") === "block");
  1118. context.saveNovelSetting();
  1119. });
  1120. });
  1121. $(chapterTitleElement).next().toggle(novelSettings[index]);
  1122. });
  1123. };
  1124. /// 読んだことのあるサブタイの色を変える
  1125. IndexBoxWrapper.prototype.applyAlreadyRead = function (context, backgroundColor) {
  1126. var alreadyReadColorHSV = Color_1.RGB.fromString(backgroundColor).toHSV().applyContrasts(10);
  1127. var alreadyReadColor = alreadyReadColorHSV.toRGB().getColorCode();
  1128. this.$allSubtitleItem.css({ border: "none", "margin": "0px" });
  1129. this.$allSubtitleLabel.css({ padding: "7px 12px 6px 12px", width: "auto" });
  1130. var readSettings = context.getReadSettings();
  1131. // const nowDate = Date.now();
  1132. this.$allSubtitleItem.each(function (index, element) {
  1133. var $element = $(element);
  1134. var anchor = $element.find("dd.subtitle > a")[0];
  1135. var _a = anchor.pathname.split("/").filter(Boolean), articleNum = _a[1];
  1136. if (articleNum in readSettings) {
  1137. // const lastReadDateString = readSettings[articleNum];
  1138. // ---- 最後に読んだ日より後に更新があった時の処理
  1139. // const articleUpdateDate = parseDate($(element).find("dt.long_update").text());
  1140. // const recentReadDate = new Date(lastReadDateString);
  1141. // recentReadDate.setHours(0);
  1142. // recentReadDate.setMinutes(0);
  1143. // recentReadDate.setSeconds(0);
  1144. // recentReadDate.setMilliseconds(0);
  1145. // if (recentReadDate.getTime() === articleUpdateDate.getTime()) { // 読んだ日と更新日が同じ
  1146. // } else
  1147. // if (recentReadDate.getTime() < articleUpdateDate.getTime()) {
  1148. // }
  1149. $element.css({ "background-color": alreadyReadColor });
  1150. }
  1151. else {
  1152. $element.css({ "font-weight": "bold" });
  1153. }
  1154. });
  1155. };
  1156. IndexBoxWrapper.prototype.changeNovelLayout = function (textColor, backgroundColor) {
  1157. var chapterTitleColor = Color_1.RGB.fromString(backgroundColor).toHSV().applyContrasts(20).toRGB().getColorCode();
  1158. var chapterTitleHoverColor = Color_1.RGB.fromString(chapterTitleColor).toHSV().applyContrasts(20).toRGB().getColorCode();
  1159. // チャプタータイトルにマウスを乗せた際のハイライト色
  1160. this.$allChapterTitles.css({
  1161. backgroundColor: chapterTitleColor,
  1162. cursor: "pointer",
  1163. margin: "10px 0 5px 0",
  1164. padding: "18px 13px 13px 13px" });
  1165. this.$allChapterTitles.hover(function (event) { return $(event.target).css({ backgroundColor: chapterTitleHoverColor }); }, function (event) { return $(event.target).css({ backgroundColor: chapterTitleColor }); });
  1166. // リンク色を変える
  1167. var hoverColorHSV = Color_1.RGB.fromString(textColor).toHSV().applyContrasts(40);
  1168. var hoverColor = hoverColorHSV.toRGB().getColorCode();
  1169. $("a")
  1170. .css({ color: textColor, textCecoration: "none", outline: "none" })
  1171. .hover(function (event) { return $(event.target).css({ color: hoverColor, textCecoration: "none" }); }, function (event) { return $(event.target).css({ color: textColor }); });
  1172. };
  1173. /// サイドメニュー表示用にスタイルを変更
  1174. IndexBoxWrapper.prototype.stretchIndexBoxesForSideMenu = function () {
  1175. this.$indexBox.css({ width: "auto" });
  1176. this.$allSubtitleItem.css({ margin: "5px 10px" });
  1177. this.$allSubtitleLabel.css({ width: "auto" });
  1178. this.$allSubtitleDate.css({ width: "auto", display: "none" });
  1179. };
  1180. return IndexBoxWrapper;
  1181. }());
  1182. Object.defineProperty(exports, "__esModule", { value: true });
  1183. exports.default = IndexBoxWrapper;
  1184.  
  1185.  
  1186. /***/ },
  1187. /* 7 */
  1188. /***/ function(module, exports) {
  1189.  
  1190. /// <reference path="./../../typings/index.d.ts" />
  1191. "use strict";
  1192. var __extends = (this && this.__extends) || function (d, b) {
  1193. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1194. function __() { this.constructor = d; }
  1195. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1196. };
  1197. var sizeUnit = ["%", "px", "pt", "in", "mm", "cm", "em", "rem"];
  1198. var InputSize = (function (_super) {
  1199. __extends(InputSize, _super);
  1200. function InputSize() {
  1201. _super.apply(this, arguments);
  1202. this.defaultProps = {
  1203. min: 0,
  1204. max: 200,
  1205. step: 1,
  1206. value: "",
  1207. unit: "px"
  1208. };
  1209. this.state = {
  1210. sizeValueMin: this.props.min || 1,
  1211. sizeValueMax: this.props.max || 200,
  1212. sizeValueStep: this.props.step || 1,
  1213. sizeValue: this.parseSizeValue(this.props.value),
  1214. sizeUnit: (this.props.unit || this.parseSizeUnit(this.props.value))
  1215. };
  1216. }
  1217. InputSize.prototype.parseSizeValue = function (sizeString) {
  1218. if (typeof sizeString === "number") {
  1219. return sizeString;
  1220. }
  1221. else if (typeof sizeString === "string") {
  1222. var numString = sizeString;
  1223. if (sizeString) {
  1224. for (var _i = 0, sizeUnit_1 = sizeUnit; _i < sizeUnit_1.length; _i++) {
  1225. var unit = sizeUnit_1[_i];
  1226. var index = sizeString.lastIndexOf(unit);
  1227. if (index >= 0) {
  1228. numString = sizeString.substring(0, index);
  1229. }
  1230. }
  1231. }
  1232. return parseFloat(numString) || 0;
  1233. }
  1234. else {
  1235. return 0;
  1236. }
  1237. };
  1238. InputSize.prototype.parseSizeUnit = function (sizeString) {
  1239. if (typeof sizeString === "string") {
  1240. var numString = null;
  1241. if (sizeString) {
  1242. for (var _i = 0, sizeUnit_2 = sizeUnit; _i < sizeUnit_2.length; _i++) {
  1243. var unit = sizeUnit_2[_i];
  1244. var index = sizeString.lastIndexOf(unit);
  1245. if (index >= 0) {
  1246. numString = sizeString.substring(index);
  1247. }
  1248. }
  1249. }
  1250. return (numString || "px");
  1251. }
  1252. else {
  1253. return "px";
  1254. }
  1255. };
  1256. InputSize.prototype.onChangeValue = function (event) {
  1257. var value = parseFloat(event.target.value);
  1258. if (this.props.onChange && value && this.state.sizeUnit) {
  1259. this.props.onChange("" + value + this.state.sizeUnit);
  1260. }
  1261. this.setState({ sizeValue: value });
  1262. };
  1263. InputSize.prototype.onChangeUnit = function (event) {
  1264. var unit = event.target.value;
  1265. if (this.props.onChange && this.state.sizeValue && unit) {
  1266. this.props.onChange("" + this.state.sizeValue + unit);
  1267. }
  1268. this.setState({ sizeUnit: unit });
  1269. };
  1270. InputSize.prototype.createOptionItem = function (unit, index) {
  1271. return (React.createElement("option", {key: index, value: unit}, unit));
  1272. };
  1273. InputSize.prototype.render = function () {
  1274. 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(this.createOptionItem)))), 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})));
  1275. };
  1276. return InputSize;
  1277. }(React.Component));
  1278. Object.defineProperty(exports, "__esModule", { value: true });
  1279. exports.default = InputSize;
  1280.  
  1281.  
  1282. /***/ },
  1283. /* 8 */
  1284. /***/ function(module, exports) {
  1285.  
  1286. /// <reference path="./../../typings/index.d.ts" />
  1287. "use strict";
  1288. var __extends = (this && this.__extends) || function (d, b) {
  1289. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1290. function __() { this.constructor = d; }
  1291. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1292. };
  1293. var InputNumber = (function (_super) {
  1294. __extends(InputNumber, _super);
  1295. function InputNumber() {
  1296. _super.apply(this, arguments);
  1297. this.defaultProps = {
  1298. min: 1,
  1299. max: 200,
  1300. step: 1,
  1301. value: ""
  1302. };
  1303. this.state = {
  1304. sizeValueMin: this.props.min,
  1305. sizeValueMax: this.props.max,
  1306. sizeValueStep: this.props.step,
  1307. sizeValue: this.props.value,
  1308. };
  1309. }
  1310. InputNumber.prototype.onChangeValue = function (event) {
  1311. var value = parseFloat(event.target.value);
  1312. if (this.props.onChange && value) {
  1313. this.props.onChange(value);
  1314. }
  1315. this.setState({ sizeValue: value });
  1316. };
  1317. InputNumber.prototype.render = function () {
  1318. 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})));
  1319. };
  1320. return InputNumber;
  1321. }(React.Component));
  1322. Object.defineProperty(exports, "__esModule", { value: true });
  1323. exports.default = InputNumber;
  1324.  
  1325.  
  1326. /***/ },
  1327. /* 9 */
  1328. /***/ function(module, exports, __webpack_require__) {
  1329.  
  1330. /// <reference path="./../../typings/index.d.ts" />
  1331. "use strict";
  1332. var __extends = (this && this.__extends) || function (d, b) {
  1333. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1334. function __() { this.constructor = d; }
  1335. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1336. };
  1337. var FontDetector_1 = __webpack_require__(10);
  1338. var FontSelector = (function (_super) {
  1339. __extends(FontSelector, _super);
  1340. function FontSelector(props) {
  1341. _super.call(this, props);
  1342. this.state = {
  1343. inputFont: "",
  1344. selectedFont: this.props.font,
  1345. fontList: this.props.fontList
  1346. };
  1347. this.fontDetector = new FontDetector_1.default(document.body);
  1348. }
  1349. FontSelector.prototype.addFont = function (fontName) {
  1350. var fontList = (this.state.fontList) ? this.state.fontList.concat(fontName) : [fontName];
  1351. this.setState({
  1352. selectedFont: fontName,
  1353. fontList: fontList
  1354. });
  1355. if (this.props.onChangeFontListener) {
  1356. this.props.onChangeFontListener(fontName);
  1357. }
  1358. if (this.props.onChangeFontListListener) {
  1359. this.props.onChangeFontListListener(fontList);
  1360. }
  1361. };
  1362. FontSelector.prototype.onKeyPress = function (event) {
  1363. if (event.which === 13 || event.keyCode === 13) {
  1364. var inputFont = event.target;
  1365. var font = inputFont.value;
  1366. if (this.fontDetector.detect(font)) {
  1367. this.addFont(font);
  1368. this.setState({ inputFont: "" });
  1369. inputFont.value = "";
  1370. return false;
  1371. }
  1372. else {
  1373. return true;
  1374. }
  1375. }
  1376. else {
  1377. return true;
  1378. }
  1379. };
  1380. FontSelector.prototype.onClickAdd = function (event) {
  1381. this.addFont(this.state.selectedFont);
  1382. };
  1383. FontSelector.prototype.onClickRemove = function (event) {
  1384. var _this = this;
  1385. this.setState({
  1386. selectedFont: "",
  1387. fontList: this.state.fontList.filter(function (f) { return f !== _this.state.selectedFont; })
  1388. });
  1389. if (this.props.onChangeFontListener) {
  1390. this.props.onChangeFontListener(this.state.selectedFont);
  1391. }
  1392. if (this.props.onChangeFontListListener) {
  1393. this.props.onChangeFontListListener(this.state.fontList);
  1394. }
  1395. };
  1396. FontSelector.prototype.onInput = function (event) {
  1397. var inputFont = event.target;
  1398. var font = inputFont.value;
  1399. this.setState({ inputFont: font });
  1400. if (this.fontDetector.detect(font)) {
  1401. if (this.props.onChangeFontListener) {
  1402. this.props.onChangeFontListener(font);
  1403. }
  1404. }
  1405. };
  1406. FontSelector.prototype.onChangeSelectFont = function (event) {
  1407. var option = event.target;
  1408. var font = option.value;
  1409. this.setState({ selectedFont: font });
  1410. if (this.props.onChangeFontListener) {
  1411. this.props.onChangeFontListener(font);
  1412. }
  1413. };
  1414. FontSelector.prototype.createOptionItem = function (fontName, index) {
  1415. var isFontEnabled = this.fontDetector.detect(fontName);
  1416. return (React.createElement("option", {key: index, value: fontName, style: {
  1417. paddingLeft: "5px",
  1418. backgroundColor: isFontEnabled ? "#FFD540" : "lightgray",
  1419. fontFamily: fontName
  1420. }}, fontName));
  1421. };
  1422. FontSelector.prototype.render = function () {
  1423. var selectedFont = this.state.selectedFont;
  1424. var isInputFontEnabled = this.fontDetector.detect(this.state.inputFont);
  1425. var isFontSelected = (this.state.fontList.indexOf(selectedFont) >= 0);
  1426. var inputStyle = {
  1427. width: "100%", marginBottom: "3px",
  1428. backgroundColor: (isInputFontEnabled ? "#FFD540" : "white")
  1429. };
  1430. return (React.createElement("div", null, React.createElement("input", {placeholder: this.state.selectedFont, style: inputStyle, 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: !isInputFontEnabled, onClick: this.onClickAdd.bind(this)}, "追加"), React.createElement("button", {style: { flex: 1 }, disabled: !isFontSelected, onClick: this.onClickRemove.bind(this)}, "削除")), React.createElement("select", {style: { width: "100%", marginTop: "3px" }, defaultValue: selectedFont, size: "5", onChange: this.onChangeSelectFont.bind(this)}, this.state.fontList.map(this.createOptionItem.bind(this)))));
  1431. };
  1432. return FontSelector;
  1433. }(React.Component));
  1434. Object.defineProperty(exports, "__esModule", { value: true });
  1435. exports.default = FontSelector;
  1436.  
  1437.  
  1438. /***/ },
  1439. /* 10 */
  1440. /***/ function(module, exports) {
  1441.  
  1442. "use strict";
  1443. var FontDetector = (function () {
  1444. function FontDetector(testField) {
  1445. this.testField = testField;
  1446. this.container = document.createElement("span");
  1447. this.container.style.fontSize = FontDetector.testSize;
  1448. this.container.innerHTML = FontDetector.testString;
  1449. this.defaultWidth = {};
  1450. this.defaultHeight = {};
  1451. for (var _i = 0, _a = FontDetector.baseFonts; _i < _a.length; _i++) {
  1452. var font = _a[_i];
  1453. this.container.style.fontFamily = font;
  1454. this.testField.appendChild(this.container);
  1455. this.defaultWidth[font] = this.container.offsetWidth;
  1456. this.defaultHeight[font] = this.container.offsetHeight;
  1457. this.testField.removeChild(this.container);
  1458. }
  1459. }
  1460. /// フォントが有効か確認する
  1461. FontDetector.prototype.detect = function (font) {
  1462. font = font.trim();
  1463. if (!font) {
  1464. return false;
  1465. }
  1466. var detected = false;
  1467. for (var _i = 0, _a = FontDetector.baseFonts; _i < _a.length; _i++) {
  1468. var baseFont = _a[_i];
  1469. this.container.style.fontFamily = font + "," + baseFont;
  1470. this.testField.appendChild(this.container);
  1471. var matched = (this.container.offsetWidth !== this.defaultWidth[baseFont] ||
  1472. this.container.offsetHeight !== this.defaultHeight[baseFont]);
  1473. this.testField.removeChild(this.container);
  1474. detected = detected || matched;
  1475. }
  1476. return detected;
  1477. };
  1478. FontDetector.baseFonts = ["monospace", "sans-serif", "serif"];
  1479. FontDetector.testString = "mmmmmmmmmmlli";
  1480. FontDetector.testSize = "72px";
  1481. return FontDetector;
  1482. }());
  1483. Object.defineProperty(exports, "__esModule", { value: true });
  1484. exports.default = FontDetector;
  1485.  
  1486.  
  1487. /***/ },
  1488. /* 11 */
  1489. /***/ function(module, exports, __webpack_require__) {
  1490.  
  1491. /// <reference path="./../../typings/index.d.ts" />
  1492. "use strict";
  1493. var __extends = (this && this.__extends) || function (d, b) {
  1494. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1495. function __() { this.constructor = d; }
  1496. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1497. };
  1498. var Utils_1 = __webpack_require__(4);
  1499. var HTB = "horizontal-tb";
  1500. var VRL = "vertical-rl";
  1501. var VLR = "vertical-lr";
  1502. var COLOR_SELECTED = "#FFD540";
  1503. var COLOR_HOVERED = "lightgray";
  1504. var COLOR_TRANSPARENT = "rgba(0, 0, 0, 0)";
  1505. var COLOR_NONE = "white";
  1506. var SIZE = 30;
  1507. /// 字送り・行送りを選択するためのコンポーネント
  1508. var WordDirectionSelector = (function (_super) {
  1509. __extends(WordDirectionSelector, _super);
  1510. function WordDirectionSelector() {
  1511. _super.apply(this, arguments);
  1512. this.state = {
  1513. wordDirection: this.props.wordDirection,
  1514. hovered: null
  1515. };
  1516. }
  1517. WordDirectionSelector.prototype.onChangeWordDirection = function (event) {
  1518. var wordDirection = event.target.value;
  1519. this.setState({ wordDirection: wordDirection });
  1520. this.props.onChangeWordDirection(wordDirection);
  1521. };
  1522. WordDirectionSelector.prototype.render = function () {
  1523. var _this = this;
  1524. 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: {
  1525. width: SIZE + "px", height: SIZE + "px", display: "inline-block",
  1526. backgroundColor: (this.state.wordDirection === HTB) ? COLOR_SELECTED :
  1527. (this.state.hovered && this.state.hovered === HTB) ? COLOR_HOVERED :
  1528. COLOR_NONE
  1529. }}, 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: {
  1530. width: SIZE + "px", height: SIZE + "px", display: "inline-block", marginLeft: "5px",
  1531. backgroundColor: (this.state.wordDirection === VRL) ? COLOR_SELECTED :
  1532. (this.state.hovered && this.state.hovered === VRL) ? COLOR_HOVERED :
  1533. COLOR_NONE
  1534. }}, 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: {
  1535. width: SIZE + "px", height: SIZE + "px", display: "inline-block", marginLeft: "5px",
  1536. backgroundColor: (this.state.wordDirection === VLR) ? COLOR_SELECTED :
  1537. (this.state.hovered && this.state.hovered === VLR) ? COLOR_HOVERED :
  1538. COLOR_NONE
  1539. }}, 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"})))))));
  1540. };
  1541. return WordDirectionSelector;
  1542. }(React.Component));
  1543. Object.defineProperty(exports, "__esModule", { value: true });
  1544. exports.default = WordDirectionSelector;
  1545.  
  1546.  
  1547. /***/ },
  1548. /* 12 */
  1549. /***/ function(module, exports, __webpack_require__) {
  1550.  
  1551. /// <reference path="./../../typings/index.d.ts" />
  1552. "use strict";
  1553. var __extends = (this && this.__extends) || function (d, b) {
  1554. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1555. function __() { this.constructor = d; }
  1556. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1557. };
  1558. var Color_1 = __webpack_require__(3);
  1559. var ColorPicker = (function (_super) {
  1560. __extends(ColorPicker, _super);
  1561. function ColorPicker(props) {
  1562. _super.call(this, props);
  1563. if (this.props.color) {
  1564. var rgb = Color_1.RGB.fromString(this.props.color);
  1565. var hsv = rgb.toHSV();
  1566. console.log(this.props.color);
  1567. console.log(rgb.toString());
  1568. console.log(hsv.toString());
  1569. this.state = {
  1570. pressH: false,
  1571. pressSV: false,
  1572. color: this.props.color,
  1573. saturation: hsv.saturation,
  1574. value: hsv.value,
  1575. hue: hsv.hue
  1576. };
  1577. }
  1578. else if (this.props.defaultColor) {
  1579. var rgb = Color_1.RGB.fromString(this.props.defaultColor);
  1580. var hsv = rgb.toHSV();
  1581. this.state = {
  1582. pressH: false,
  1583. pressSV: false,
  1584. color: this.props.defaultColor,
  1585. saturation: hsv.saturation,
  1586. value: hsv.value,
  1587. hue: hsv.hue
  1588. };
  1589. }
  1590. else {
  1591. this.state = {
  1592. pressH: false,
  1593. pressSV: false,
  1594. color: this.props.color,
  1595. saturation: 0,
  1596. value: 0,
  1597. hue: 0
  1598. };
  1599. }
  1600. }
  1601. // constructor(props) {
  1602. // super(props);
  1603. // relMouseCoords(event: MouseEvent){
  1604. // var totalOffsetX = 0;
  1605. // var totalOffsetY = 0;
  1606. // var canvasX = 0;
  1607. // var canvasY = 0;
  1608. // var currentElement = this;
  1609. // do{
  1610. // totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
  1611. // totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
  1612. // }
  1613. // while(currentElement = currentElement.offsetParent)
  1614. // canvasX = event.pageX - totalOffsetX;
  1615. // canvasY = event.pageY - totalOffsetY;
  1616. // return {x:canvasX, y:canvasY}
  1617. // }
  1618. // }
  1619. ColorPicker.prototype.onMouseDownH = function (event) {
  1620. var $div = $(event.target);
  1621. // const offsetX = $div.offset().left;
  1622. var offsetY = $div.offset().top;
  1623. var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * Color_1.HSV.H_MAX;
  1624. if (this.props.onChange) {
  1625. var hsv = new Color_1.HSV(hue, this.state.saturation, this.state.value);
  1626. var rgb = hsv.toRGB();
  1627. var colorCode = rgb.getColorCode();
  1628. this.props.onChange(colorCode);
  1629. }
  1630. this.setState({
  1631. pressH: true,
  1632. hue: hue
  1633. });
  1634. };
  1635. ColorPicker.prototype.onMouseMoveH = function (event) {
  1636. if (this.state.pressH) {
  1637. var $div = $(event.target);
  1638. // const offsetX = $div.offset().left;
  1639. var offsetY = $div.offset().top;
  1640. var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * Color_1.HSV.H_MAX;
  1641. if (this.props.onChange) {
  1642. var hsv = new Color_1.HSV(hue, this.state.saturation, this.state.value);
  1643. var rgb = hsv.toRGB();
  1644. var colorCode = rgb.getColorCode();
  1645. this.props.onChange(colorCode);
  1646. }
  1647. this.setState({
  1648. hue: hue
  1649. });
  1650. }
  1651. };
  1652. ColorPicker.prototype.onMouseUpH = function (event) {
  1653. var $div = $(event.target);
  1654. // const offsetX = $div.offset().left;
  1655. var offsetY = $div.offset().top;
  1656. var hue = ((event.pageY - offsetY) / ColorPicker.H_HEIGHT) * Color_1.HSV.H_MAX;
  1657. var hsv = new Color_1.HSV(hue, this.state.saturation, this.state.value);
  1658. var rgb = hsv.toRGB();
  1659. var colorCode = rgb.getColorCode();
  1660. if (this.props.onChange) {
  1661. this.props.onChange(colorCode);
  1662. }
  1663. if (this.props.onChangeComplete) {
  1664. this.props.onChangeComplete(colorCode);
  1665. }
  1666. this.setState({
  1667. pressH: false,
  1668. hue: hue
  1669. });
  1670. };
  1671. ColorPicker.prototype.onMouseDownSV = function (event) {
  1672. var $div = $(event.target);
  1673. var offsetX = $div.offset().left;
  1674. var offsetY = $div.offset().top;
  1675. var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * Color_1.HSV.SV_MAX;
  1676. var value = Color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * Color_1.HSV.SV_MAX;
  1677. if (this.props.onChange) {
  1678. var hsv = new Color_1.HSV(this.state.hue, saturation, value);
  1679. var rgb = hsv.toRGB();
  1680. this.props.onChange(rgb.getColorCode());
  1681. }
  1682. this.setState({
  1683. pressSV: true,
  1684. saturation: saturation,
  1685. value: value
  1686. });
  1687. };
  1688. ColorPicker.prototype.onMouseMoveSV = function (event) {
  1689. if (this.state.pressSV) {
  1690. var $div = $(event.target);
  1691. var offsetX = $div.offset().left;
  1692. var offsetY = $div.offset().top;
  1693. var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * Color_1.HSV.SV_MAX;
  1694. var value = Color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * Color_1.HSV.SV_MAX;
  1695. if (this.props.onChange) {
  1696. var hsv = new Color_1.HSV(this.state.hue, saturation, value);
  1697. var rgb = hsv.toRGB();
  1698. this.props.onChange(rgb.getColorCode());
  1699. }
  1700. this.setState({
  1701. saturation: saturation,
  1702. value: value
  1703. });
  1704. }
  1705. };
  1706. ColorPicker.prototype.onMouseUpSV = function (event) {
  1707. var $div = $(event.target);
  1708. var offsetX = $div.offset().left;
  1709. var offsetY = $div.offset().top;
  1710. var saturation = ((event.pageX - offsetX) / ColorPicker.SV_HEIGHT) * Color_1.HSV.SV_MAX;
  1711. var value = Color_1.HSV.SV_MAX - ((event.pageY - offsetY) / ColorPicker.SV_HEIGHT) * Color_1.HSV.SV_MAX;
  1712. var hsv = new Color_1.HSV(this.state.hue, saturation, value);
  1713. var rgb = hsv.toRGB();
  1714. var colorCode = rgb.getColorCode();
  1715. if (this.props.onChange) {
  1716. this.props.onChange(colorCode);
  1717. }
  1718. if (this.props.onChangeComplete) {
  1719. this.props.onChangeComplete(colorCode);
  1720. }
  1721. this.setState({
  1722. pressSV: false,
  1723. saturation: saturation,
  1724. value: value
  1725. });
  1726. };
  1727. ColorPicker.prototype.render = function () {
  1728. var toRightColor = new Color_1.HSV(this.state.hue, Color_1.HSV.SV_MAX, Color_1.HSV.SV_MAX).toRGB().getColorCode();
  1729. return (React.createElement("div", {style: { height: "150px" }}, React.createElement("div", {ref: "colorSelector", style: {
  1730. float: "left", position: "relative",
  1731. width: "" + ColorPicker.SV_WIDTH + "px",
  1732. height: "" + ColorPicker.H_HEIGHT + "px"
  1733. }}, React.createElement("div", {style: {
  1734. position: "absolute",
  1735. width: "100%", height: "100%",
  1736. border: "1px solid gray",
  1737. background: "linear-gradient(to right, #FFF 0%, " + toRightColor + " 100%)"
  1738. }}, React.createElement("div", {style: {
  1739. width: "100%", height: "100%",
  1740. background: "linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%)"
  1741. }, onMouseDown: this.onMouseDownSV.bind(this), onMouseUp: this.onMouseUpSV.bind(this), onMouseMove: this.onMouseMoveSV.bind(this)})), React.createElement("div", {style: {
  1742. pointerEvents: "none",
  1743. position: "relative",
  1744. left: "" + ((ColorPicker.SV_HEIGHT * (this.state.saturation / Color_1.HSV.SV_MAX)) - 5) + "px",
  1745. top: "" + ((ColorPicker.SV_HEIGHT * ((Color_1.HSV.SV_MAX - this.state.value) / Color_1.HSV.SV_MAX)) - 5) + "px"
  1746. }}, 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: {
  1747. position: "relative",
  1748. float: "left",
  1749. marginLeft: "5px",
  1750. width: "15px",
  1751. height: ColorPicker.SV_HEIGHT + "px"
  1752. }, onMouseDown: this.onMouseDownH.bind(this), onMouseUp: this.onMouseUpH.bind(this), onMouseMove: this.onMouseMoveH.bind(this)}, React.createElement("div", {style: {
  1753. position: "absolute",
  1754. width: "15px",
  1755. height: ColorPicker.SV_HEIGHT + "px",
  1756. background: "linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 34%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)",
  1757. border: "1px solid gray"
  1758. }}), React.createElement("div", {style: {
  1759. pointerEvents: "none",
  1760. position: "absolute",
  1761. backgroundColor: "white",
  1762. borderBottom: "1px solid #000",
  1763. left: "0px",
  1764. top: ((ColorPicker.H_HEIGHT * (this.state.hue / Color_1.HSV.H_MAX)) - 1) + "px",
  1765. width: "15px",
  1766. height: "2px"
  1767. }}))));
  1768. };
  1769. ColorPicker.SV_HEIGHT = 150;
  1770. ColorPicker.SV_WIDTH = 150;
  1771. ColorPicker.H_HEIGHT = 150;
  1772. return ColorPicker;
  1773. }(React.Component));
  1774. Object.defineProperty(exports, "__esModule", { value: true });
  1775. exports.default = ColorPicker;
  1776.  
  1777.  
  1778. /***/ },
  1779. /* 13 */
  1780. /***/ function(module, exports) {
  1781.  
  1782. /// <reference path="./../../typings/index.d.ts" />
  1783. "use strict";
  1784. var __extends = (this && this.__extends) || function (d, b) {
  1785. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1786. function __() { this.constructor = d; }
  1787. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1788. };
  1789. var ExpandableItem = (function (_super) {
  1790. __extends(ExpandableItem, _super);
  1791. function ExpandableItem() {
  1792. _super.apply(this, arguments);
  1793. this.state = {
  1794. expand: this.props.expand,
  1795. containerHeight: this.props.expand ? "auto" : "0px",
  1796. hover: false
  1797. };
  1798. }
  1799. ExpandableItem.prototype.componentDidUpdate = function (prevProps, prevState) {
  1800. // 拡縮対象の縦幅をStateへ記憶している
  1801. // ※ CSS Transition が auto → ?px へのアニメーションに対応していないため
  1802. // componentDidMount() で計測できないのでラベルにカーソルを合わせたタイミングで計測している
  1803. // TODO: 正しい位置で計測がしたい
  1804. if (this.state.hover !== prevState.hover) {
  1805. var measure = ReactDOM.findDOMNode(this.refs.measure);
  1806. this.setState({ containerHeight: measure.clientHeight + "px" });
  1807. }
  1808. };
  1809. ExpandableItem.prototype.onClickLabel = function () {
  1810. var expandNext = !this.state.expand;
  1811. this.setState({ expand: expandNext });
  1812. if (this.props.onToggle) {
  1813. this.props.onToggle(expandNext);
  1814. }
  1815. };
  1816. ExpandableItem.prototype.render = function () {
  1817. var _this = this;
  1818. var labelElement = (React.createElement("div", {className: "navi_label1", onClick: this.onClickLabel.bind(this), onMouseEnter: function () { return _this.setState({ hover: true }); }, onMouseLeave: function () { return _this.setState({ hover: false }); }, style: {
  1819. cursor: "pointer", fontWeight: "bold", padding: "3px 8px",
  1820. color: "#E0E0E0", backgroundColor: this.state.hover ? "#868E94" : "#666E74"
  1821. }}, React.createElement("div", {style: {
  1822. transition: ".3s", float: "left",
  1823. transform: this.state.expand ? "rotate(0deg)" : "rotate(-91deg)"
  1824. }}, "▼"), React.createElement("div", {style: { marginLeft: "20px" }}, this.props.label)));
  1825. var containerElement = (React.createElement("div", {style: {
  1826. backgroundColor: "#C6CED4",
  1827. transition: ".3s",
  1828. overflow: "hidden",
  1829. height: this.state.expand ? this.state.containerHeight : "0px"
  1830. }}, React.createElement("div", {ref: "measure", style: { padding: "5px" }}, this.props.children)));
  1831. return (React.createElement("div", null, labelElement, containerElement));
  1832. };
  1833. return ExpandableItem;
  1834. }(React.Component));
  1835. Object.defineProperty(exports, "__esModule", { value: true });
  1836. exports.default = ExpandableItem;
  1837.  
  1838.  
  1839. /***/ },
  1840. /* 14 */
  1841. /***/ function(module, exports, __webpack_require__) {
  1842.  
  1843. /// <reference path="./../typings/index.d.ts" />
  1844. "use strict";
  1845. var IndexBoxWrapper_1 = __webpack_require__(6);
  1846. var Color_1 = __webpack_require__(3);
  1847. var SideMenu = (function () {
  1848. function SideMenu(context, address) {
  1849. var _this = this;
  1850. this.address = address;
  1851. this.$sideMenu = $("#side_menu");
  1852. if (this.$sideMenu.length <= 0) {
  1853. var menuPosition = "position: fixed; top: 0px; left: -" + SideMenu.MENU_SIZE + "px; width: " + SideMenu.MENU_SIZE + "px;";
  1854. this.$sideMenu = $("\n <div id=\"side_menu\"\n style=\"" + menuPosition + " z-index: 5; overflow-y: scroll\">\n </div>\n ");
  1855. var windowHeight = $(window).height();
  1856. this.$sideMenu.height(windowHeight);
  1857. $(window).resize(function () {
  1858. var windowHeight = $(window).height();
  1859. _this.$sideMenu.height(windowHeight);
  1860. });
  1861. $(document.body).append(this.$sideMenu);
  1862. }
  1863. this.context = context;
  1864. this.isSideMenuOpened = false;
  1865. this.isSidePageLoaded = false;
  1866. }
  1867. SideMenu.prototype.loadSidePage = function (context, textColor, backgroundColor) {
  1868. var _this = this;
  1869. this.isSidePageLoaded = true;
  1870. // const targetUrl = location.protocol + "//" + location.host + "/" + novelCode;
  1871. console.log("Loading menu", this.address);
  1872. var requestMenu = new XMLHttpRequest();
  1873. // requestMenu.onreadystatechange
  1874. requestMenu.addEventListener("load", function (event) {
  1875. var loadPage = requestMenu.responseXML;
  1876. var body = loadPage.querySelector("body");
  1877. var indexBox = body.querySelector(".index_box");
  1878. _this.$sideMenu.append(indexBox);
  1879. _this.indexBoxWrapper = new IndexBoxWrapper_1.default(indexBox);
  1880. _this.indexBoxWrapper.reconstructToExpandable(context);
  1881. _this.indexBoxWrapper.applyAlreadyRead(context, backgroundColor);
  1882. _this.indexBoxWrapper.changeNovelLayout(textColor, backgroundColor);
  1883. _this.indexBoxWrapper.stretchIndexBoxesForSideMenu();
  1884. var sideMenuBorderColor = Color_1.RGB.fromString(backgroundColor).toHSV().applyContrasts(40).toRGB().getColorCode();
  1885. _this.$sideMenu.css({ color: textColor, backgroundColor: backgroundColor, borderRight: "2px solid " + sideMenuBorderColor });
  1886. });
  1887. requestMenu.open("GET", this.address, true);
  1888. requestMenu.responseType = "document";
  1889. requestMenu.send();
  1890. };
  1891. SideMenu.prototype.showSideMenu = function (textColor, backgroundColor) {
  1892. this.isSideMenuOpened = true;
  1893. if (!this.isSidePageLoaded) {
  1894. this.loadSidePage(this.context, textColor, backgroundColor);
  1895. }
  1896. else {
  1897. if (this.indexBoxWrapper) {
  1898. this.indexBoxWrapper.applyAlreadyRead(this.context, backgroundColor);
  1899. this.indexBoxWrapper.changeNovelLayout(textColor, backgroundColor);
  1900. }
  1901. }
  1902. console.log("Open menu");
  1903. this.$sideMenu.stop().animate({ left: "0" }, SideMenu.MENU_SPEED).addClass("active");
  1904. };
  1905. SideMenu.prototype.closeSideMenu = function () {
  1906. this.isSideMenuOpened = false;
  1907. this.$sideMenu.stop().animate({ left: "-" + SideMenu.MENU_SIZE + "px" }, SideMenu.MENU_SPEED).removeClass("active");
  1908. };
  1909. SideMenu.prototype.changeNovelLayout = function (textColor, backgroundColor) {
  1910. if (this.indexBoxWrapper) {
  1911. this.indexBoxWrapper.applyAlreadyRead(this.context, backgroundColor);
  1912. this.indexBoxWrapper.changeNovelLayout(textColor, backgroundColor);
  1913. }
  1914. };
  1915. SideMenu.MENU_SIZE = 350;
  1916. SideMenu.MENU_SPEED = 300;
  1917. return SideMenu;
  1918. }());
  1919. Object.defineProperty(exports, "__esModule", { value: true });
  1920. exports.default = SideMenu;
  1921.  
  1922.  
  1923. /***/ },
  1924. /* 15 */
  1925. /***/ function(module, exports, __webpack_require__) {
  1926.  
  1927. /// <reference path="./../typings/index.d.ts" />
  1928. "use strict";
  1929. var SettingManager_1 = __webpack_require__(16);
  1930. var Context = (function () {
  1931. function Context(novelCode, defaultGlobalSettings, defaultNovelSettings) {
  1932. this.isLoadedGlobalSettings = false;
  1933. this.isLoadedNovelSettings = false;
  1934. this.isLoadedReadSettings = false;
  1935. this.globalSettingManager = new SettingManager_1.default("narou_refiner", defaultGlobalSettings);
  1936. this.novelSettingManager = new SettingManager_1.default("narou_refiner_" + novelCode, defaultNovelSettings);
  1937. this.readSettingManager = new SettingManager_1.default("narou_refiner_read_" + novelCode);
  1938. }
  1939. Context.prototype.getGlobalSettings = function () {
  1940. if (!this.isLoadedGlobalSettings) {
  1941. this.globalSettings = this.globalSettingManager.load();
  1942. }
  1943. return this.globalSettings;
  1944. };
  1945. Context.prototype.readGlobalSetting = function (key) {
  1946. if (!this.isLoadedGlobalSettings) {
  1947. this.globalSettings = this.globalSettingManager.load();
  1948. }
  1949. return this.globalSettings[key];
  1950. };
  1951. Context.prototype.putGlobalSetting = function (key, value) {
  1952. if (!this.isLoadedGlobalSettings) {
  1953. this.globalSettings = this.globalSettingManager.load();
  1954. }
  1955. this.globalSettings[key] = value;
  1956. };
  1957. Context.prototype.saveGlobalSetting = function (key, value) {
  1958. if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
  1959. if (!this.isLoadedGlobalSettings) {
  1960. this.globalSettings = this.globalSettingManager.load();
  1961. }
  1962. this.globalSettings[key] = value;
  1963. this.globalSettingManager.save(this.globalSettings);
  1964. }
  1965. else if (arguments.length === 1 && typeof key === "object") {
  1966. if (!this.isLoadedGlobalSettings) {
  1967. this.globalSettings = this.globalSettingManager.load();
  1968. }
  1969. this.globalSettings = $.extend(true, this.globalSettings, key);
  1970. this.globalSettingManager.save(this.globalSettings);
  1971. }
  1972. else if (arguments.length === 0) {
  1973. if (this.globalSettings) {
  1974. this.globalSettingManager.save(this.globalSettings);
  1975. }
  1976. }
  1977. };
  1978. Context.prototype.getNovelSettings = function () {
  1979. if (!this.isLoadedNovelSettings) {
  1980. this.novelSettings = this.novelSettingManager.load();
  1981. }
  1982. return this.novelSettings;
  1983. };
  1984. Context.prototype.readNovelSetting = function (key) {
  1985. if (!this.isLoadedNovelSettings) {
  1986. this.novelSettings = this.novelSettingManager.load();
  1987. }
  1988. return this.novelSettings[key];
  1989. };
  1990. Context.prototype.putNovelSetting = function (key, value) {
  1991. if (!this.isLoadedNovelSettings) {
  1992. this.novelSettings = this.novelSettingManager.load();
  1993. }
  1994. this.novelSettings[key] = value;
  1995. };
  1996. Context.prototype.saveNovelSetting = function (key, value) {
  1997. if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
  1998. if (!this.isLoadedNovelSettings) {
  1999. this.novelSettings = this.novelSettingManager.load();
  2000. }
  2001. this.novelSettings[key] = value;
  2002. this.novelSettingManager.save(this.novelSettings);
  2003. }
  2004. else if (arguments.length === 1 && typeof key === "object") {
  2005. if (!this.isLoadedNovelSettings) {
  2006. this.novelSettings = this.novelSettingManager.load();
  2007. }
  2008. this.novelSettings = $.extend(true, this.novelSettings, key);
  2009. this.novelSettingManager.save(this.novelSettings);
  2010. }
  2011. else if (arguments.length === 0) {
  2012. if (this.novelSettings) {
  2013. this.novelSettingManager.save(this.novelSettings);
  2014. }
  2015. }
  2016. };
  2017. Context.prototype.getReadSettings = function () {
  2018. if (!this.isLoadedReadSettings) {
  2019. this.readSettings = this.readSettingManager.load();
  2020. }
  2021. return this.readSettings;
  2022. };
  2023. Context.prototype.readReadSetting = function (key) {
  2024. if (!this.isLoadedReadSettings) {
  2025. this.readSettings = this.readSettingManager.load();
  2026. }
  2027. return this.readSettings[key];
  2028. };
  2029. Context.prototype.putReadSetting = function (key, value) {
  2030. if (!this.isLoadedReadSettings) {
  2031. this.readSettings = this.readSettingManager.load();
  2032. }
  2033. this.readSettings[key] = value;
  2034. };
  2035. Context.prototype.saveReadSetting = function (key, value) {
  2036. if (arguments.length === 2 && (typeof key === "string" || typeof key === "number")) {
  2037. if (!this.isLoadedNovelSettings) {
  2038. this.readSettings = this.readSettingManager.load();
  2039. }
  2040. this.readSettings[key] = value;
  2041. this.readSettingManager.save(this.readSettings);
  2042. }
  2043. else if (arguments.length === 1 && typeof key === "object") {
  2044. if (!this.isLoadedNovelSettings) {
  2045. this.readSettings = this.readSettingManager.load();
  2046. }
  2047. this.readSettings = $.extend(true, this.readSettings, key);
  2048. this.readSettingManager.save(this.readSettings);
  2049. }
  2050. else if (arguments.length === 0) {
  2051. if (this.readSettings) {
  2052. this.readSettingManager.save(this.readSettings);
  2053. }
  2054. }
  2055. };
  2056. return Context;
  2057. }());
  2058. Object.defineProperty(exports, "__esModule", { value: true });
  2059. exports.default = Context;
  2060.  
  2061.  
  2062. /***/ },
  2063. /* 16 */
  2064. /***/ function(module, exports) {
  2065.  
  2066. /// <reference path="./../typings/index.d.ts" />
  2067. "use strict";
  2068. /// LocalStorage
  2069. var SettingManager = (function () {
  2070. function SettingManager(key, defaultSettings) {
  2071. if (defaultSettings === void 0) { defaultSettings = {}; }
  2072. this.key = key;
  2073. this.settings = defaultSettings;
  2074. }
  2075. SettingManager.prototype.load = function () {
  2076. return $.extend(true, this.settings, JSON.parse(localStorage.getItem(this.key)));
  2077. };
  2078. SettingManager.prototype.save = function (settings) {
  2079. localStorage.setItem(this.key, JSON.stringify(settings));
  2080. };
  2081. return SettingManager;
  2082. }());
  2083. Object.defineProperty(exports, "__esModule", { value: true });
  2084. exports.default = SettingManager;
  2085.  
  2086.  
  2087. /***/ },
  2088. /* 17 */
  2089. /***/ function(module, exports) {
  2090.  
  2091. "use strict";
  2092. exports.SETTING_KEY = {
  2093. /// ナビゲーションの拡縮
  2094. EXPAND_NAVI: {
  2095. COLOR: "expandNaviColor",
  2096. LAYOUT: "expandNaviLayout",
  2097. FONT: "expandNaviFont",
  2098. TYPESETTING: "expandNaviTypeSetting",
  2099. PROPORTION: "expandNaviProportion"
  2100. },
  2101. /// 基本文字色
  2102. TEXT_COLOR: "textColor",
  2103. /// 基本背景色
  2104. BACKGROUND_COLOR: "backgroundColor",
  2105. /// 字送り・行送り
  2106. WORD_DIRECTION: "wordDirection",
  2107. /// 作品画面の横幅
  2108. NOVEL_WIDTH: "novelWidth",
  2109. /// 作品画面の縦幅
  2110. NOVEL_HEIGHT: "novelHeight",
  2111. /// 表示用のフォント
  2112. FONT: "font",
  2113. /// 選択可能なフォント一覧
  2114. FONT_LIST: "fontList",
  2115. /// フォントサイズ
  2116. FONT_SIZE: "fontSize",
  2117. /// フォントウェイト
  2118. FONT_WEIGHT: "fontWeight",
  2119. /// 文字間隔
  2120. LETTER_SPACING: "letterSpacing",
  2121. /// 行間隔
  2122. LINE_HEIGHT: "lineHeight",
  2123. /// 単語間隔
  2124. WORD_SPACING: "wordSpacing",
  2125. /// 漢字周辺の余白
  2126. KANJI_SPACING: "kanjiSpacing",
  2127. /// 漢字サイズ
  2128. KANJI_SIZE: "kanjiSize",
  2129. /// カタカナ周辺の余白
  2130. KATAKANA_SPACING: "katakanaSpacing",
  2131. /// カタカナサイズ
  2132. KATAKANA_SIZE: "katakanaSize",
  2133. /// セリフ周辺の余白
  2134. SERIF_SPACING: "serifSpacing",
  2135. /// セリフサイズ
  2136. SERIF_SIZE: "serifSize"
  2137. };
  2138. exports.DEFAULT_GLOBAL_SETTINGS = (_a = {},
  2139. _a[exports.SETTING_KEY.EXPAND_NAVI.COLOR] = true,
  2140. _a[exports.SETTING_KEY.EXPAND_NAVI.LAYOUT] = true,
  2141. _a[exports.SETTING_KEY.EXPAND_NAVI.FONT] = true,
  2142. _a[exports.SETTING_KEY.EXPAND_NAVI.TYPESETTING] = false,
  2143. _a[exports.SETTING_KEY.EXPAND_NAVI.PROPORTION] = false,
  2144. _a[exports.SETTING_KEY.TEXT_COLOR] = "#000",
  2145. _a[exports.SETTING_KEY.BACKGROUND_COLOR] = "#FFF",
  2146. _a[exports.SETTING_KEY.WORD_DIRECTION] = "horizontal-tb",
  2147. _a[exports.SETTING_KEY.NOVEL_WIDTH] = "95%",
  2148. _a[exports.SETTING_KEY.NOVEL_HEIGHT] = "100%",
  2149. _a[exports.SETTING_KEY.FONT] = null,
  2150. _a[exports.SETTING_KEY.FONT_LIST] = [],
  2151. _a[exports.SETTING_KEY.FONT_SIZE] = "12px",
  2152. _a[exports.SETTING_KEY.FONT_WEIGHT] = 500,
  2153. _a[exports.SETTING_KEY.LETTER_SPACING] = "",
  2154. // [SETTING_KEY.WORD_SPACING]: "",
  2155. _a[exports.SETTING_KEY.LINE_HEIGHT] = "",
  2156. _a[exports.SETTING_KEY.KANJI_SPACING] = "0px",
  2157. _a[exports.SETTING_KEY.KANJI_SIZE] = "100%",
  2158. _a[exports.SETTING_KEY.KATAKANA_SPACING] = "0px",
  2159. _a[exports.SETTING_KEY.KATAKANA_SIZE] = "100%",
  2160. _a[exports.SETTING_KEY.SERIF_SPACING] = "0px",
  2161. _a[exports.SETTING_KEY.SERIF_SIZE] = "100%",
  2162. _a
  2163. );
  2164. exports.DEFAULT_NOVEL_SETTINGS = {
  2165. toggles: []
  2166. };
  2167. var _a;
  2168.  
  2169.  
  2170. /***/ }
  2171. /******/ ]);
  2172. //# sourceMappingURL=narouRefiner.js.map