ExternalLibs.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <template>
  2. <Window ref="window" @close="close">
  3. <template slot="header">
  4. {{ header }}
  5. </template>
  6. <template slot="buttons">
  7. <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
  8. <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px"/>
  9. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
  10. </span>
  11. </template>
  12. <div v-show="ready" class="col column" style="min-width: 600px">
  13. <div class="row items-center q-px-sm" style="height: 50px">
  14. <q-select class="q-mr-sm" v-model="rootLink" :options="rootLinkOptions"
  15. style="width: 230px"
  16. dropdown-icon="la la-angle-down la-sm"
  17. rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
  18. >
  19. <template v-slot:prepend>
  20. <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="12px">
  21. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
  22. </q-btn>
  23. <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px" disabled>
  24. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки (пока недоступно)</q-tooltip>
  25. </q-btn>
  26. </template>
  27. <template v-slot:selected>
  28. <div style="overflow: hidden; white-space: nowrap;">{{ removeProtocol(rootLink) }}</div>
  29. </template>
  30. </q-select>
  31. <q-select class="q-mr-sm" v-model="selectedLink" :options="selectedLinkOptions" style="width: 50px"
  32. dropdown-icon="la la-angle-down la-sm"
  33. rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
  34. >
  35. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip>
  36. </q-select>
  37. <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus">
  38. <template v-slot:prepend>
  39. <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(libs.startLink)" size="12px">
  40. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
  41. </q-btn>
  42. <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px">
  43. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
  44. </q-btn>
  45. </template>
  46. </q-input>
  47. <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl">Открыть
  48. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть в читалке</q-tooltip>
  49. </q-btn>
  50. </div>
  51. <div class="separator"></div>
  52. <iframe v-if="frameVisible" class="col fit" ref="frame" :src="frameSrc" frameborder="0"></iframe>
  53. <Dialog ref="dialogAddBookmark" v-model="addBookmarkVisible">
  54. <template slot="header">
  55. <div class="row items-center">
  56. <q-icon class="q-mr-sm" name="la la-bookmark" size="28px"></q-icon>
  57. Добавить закладку
  58. </div>
  59. </template>
  60. <div class="q-mx-md row">
  61. <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink"
  62. placeholder="Ссылка для закладки" maxlength="2000" @focus="onInputFocus">
  63. </q-input>
  64. <q-select class="q-mr-sm" v-model="defaultRootLink" :options="defaultRootLinkOptions" style="width: 50px"
  65. dropdown-icon="la la-angle-down la-sm"
  66. outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
  67. >
  68. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Предустановленные ссылки</q-tooltip>
  69. </q-select>
  70. </div>
  71. <div class="q-mx-md q-mt-md">
  72. <q-input class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkDesc"
  73. placeholder="Описание" style="width: 400px" maxlength="100" @focus="onInputFocus">
  74. </q-input>
  75. </div>
  76. <template slot="footer">
  77. <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
  78. <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark" :disabled="!bookmarkLink">OK</q-btn>
  79. </template>
  80. </Dialog>
  81. </div>
  82. </Window>
  83. </template>
  84. <script>
  85. //-----------------------------------------------------------------------------
  86. import Vue from 'vue';
  87. import Component from 'vue-class-component';
  88. import _ from 'lodash';
  89. import Window from '../share/Window.vue';
  90. import Dialog from '../share/Dialog.vue';
  91. import rstore from '../../store/modules/reader';
  92. import * as utils from '../../share/utils';
  93. const proxySubst = {
  94. 'http://flibusta.is': 'http://b.liberama.top:23480',
  95. };
  96. export default @Component({
  97. components: {
  98. Window,
  99. Dialog
  100. },
  101. watch: {
  102. libs: function() {
  103. this.loadLibs();
  104. },
  105. rootLink: function() {
  106. this.updateSelectedLink();
  107. this.updateStartLink();
  108. },
  109. selectedLink: function() {
  110. this.updateStartLink();
  111. },
  112. defaultRootLink: function() {
  113. this.updateBookmarkLink();
  114. }
  115. }
  116. })
  117. class ExternalLibs extends Vue {
  118. ready = false;
  119. frameVisible = false;
  120. startLink = '';
  121. rootLink = '';
  122. selectedLink = '';
  123. frameSrc = '';
  124. bookUrl = '';
  125. libs = {};
  126. fullScreenActive = false;
  127. addBookmarkVisible = false;
  128. bookmarkLink = '';
  129. bookmarkDesc = '';
  130. defaultRootLink = '';
  131. created() {
  132. this.$root.addKeyHook(this.keyHook);
  133. //this.commit = this.$store.commit;
  134. //this.commit('reader/setLibs', rstore.libsDefaults);
  135. }
  136. mounted() {
  137. this.$refs.window.init();
  138. this.opener = null;
  139. const host = window.location.host;
  140. const openerHost = (host.indexOf('b.') == 0 ? host.substring(2) : host);
  141. const openerOrigin1 = `http://${openerHost}`;
  142. const openerOrigin2 = `https://${openerHost}`;
  143. window.addEventListener('message', (event) => {
  144. if (event.origin !== openerOrigin1 && event.origin !== openerOrigin2)
  145. return;
  146. if (!_.isObject(event.data) || event.data.from != 'LibsPage')
  147. return;
  148. if (event.origin == openerOrigin1)
  149. this.opener = window.opener;
  150. else
  151. this.opener = event.source;
  152. this.openerOrigin = event.origin;
  153. //console.log(event);
  154. this.recvMessage(event.data);
  155. });
  156. //Проверка закрытия родительского окна
  157. (async() => {
  158. let i = 0;
  159. while(!this.opener && i < 10) {
  160. await utils.sleep(1000);
  161. i++;
  162. }
  163. if (i >= 10) {
  164. await this.$root.stdDialog.alert('Нет связи с читалкой. Окно будет закрыто', 'Ошибка');
  165. window.close();
  166. }
  167. while(this.opener) {
  168. await this.checkOpener();
  169. await utils.sleep(1000);
  170. }
  171. })();
  172. }
  173. recvMessage(d) {
  174. if (d.type == 'mes') {
  175. switch(d.data) {
  176. case 'hello': this.sendMessage({type: 'mes', data: 'ready'}); break;
  177. }
  178. } else if (d.type == 'libs') {
  179. this.ready = true;
  180. this.libs = _.cloneDeep(d.data);
  181. if (!this.frameSrc)
  182. this.goToLink(this.libs.startLink);
  183. } else if (d.type == 'notify') {
  184. this.$root.notify.success(d.data, '', {position: 'bottom-right'});
  185. }
  186. }
  187. sendMessage(d) {
  188. (async() => {
  189. await this.checkOpener();
  190. if (this.opener && this.openerOrigin)
  191. this.opener.postMessage(Object.assign({}, {from: 'ExternalLibs'}, d), this.openerOrigin);
  192. })();
  193. }
  194. async checkOpener() {
  195. if (this.opener.closed) {
  196. await this.$root.stdDialog.alert('Потеряна связь с читалкой. Окно будет закрыто', 'Ошибка');
  197. window.close();
  198. }
  199. }
  200. commitLibs(libs) {
  201. this.sendMessage({type: 'libs', data: libs});
  202. }
  203. loadLibs() {
  204. const libs = this.libs;
  205. this.startLink = (libs.comment ? libs.comment + ' ': '') + this.removeProtocol(libs.startLink);
  206. this.rootLink = this.getOrigin(libs.startLink);
  207. this.updateSelectedLink();
  208. }
  209. get mode() {
  210. return this.$store.state.config.mode;
  211. }
  212. get header() {
  213. let result = (this.ready ? 'Библиотека' : 'Загрузка...');
  214. if (this.ready && this.startLink) {
  215. result += ` | ${this.startLink}`;
  216. }
  217. this.$root.$emit('set-app-title', result);
  218. return result;
  219. }
  220. updateSelectedLink() {
  221. if (!this.ready)
  222. return;
  223. const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
  224. if (index >= 0)
  225. this.selectedLink = this.libs.groups[index].s;
  226. }
  227. updateStartLink() {
  228. if (!this.ready)
  229. return;
  230. const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
  231. if (index >= 0) {
  232. let libs = _.cloneDeep(this.libs);
  233. libs.groups[index].s = this.selectedLink;
  234. libs.startLink = this.selectedLink;
  235. libs.comment = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
  236. this.goToLink(this.selectedLink);
  237. this.commitLibs(libs);
  238. }
  239. }
  240. get rootLinkOptions() {
  241. let result = [];
  242. if (!this.ready)
  243. return result;
  244. this.libs.groups.forEach(group => {
  245. result.push({label: this.removeProtocol(group.r), value: group.r});
  246. });
  247. return result;
  248. }
  249. get defaultRootLinkOptions() {
  250. let result = [];
  251. rstore.libsDefaults.groups.forEach(group => {
  252. result.push({label: this.removeProtocol(group.r), value: group.r});
  253. });
  254. return result;
  255. }
  256. get selectedLinkOptions() {
  257. let result = [];
  258. if (!this.ready)
  259. return result;
  260. const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
  261. if (index >= 0) {
  262. this.libs.groups[index].list.forEach(link => {
  263. result.push({label: (link.c ? link.c + ' ': '') + this.removeOrigin(link.l), value: link.l});
  264. });
  265. }
  266. return result;
  267. }
  268. openBookUrlInFrame() {
  269. if (this.bookUrl)
  270. this.goToLink(this.addProtocol(this.bookUrl));
  271. }
  272. goToLink(link) {
  273. if (!this.ready)
  274. return;
  275. this.frameSrc = this.makeProxySubst(link);
  276. //this.frameVisible = false;
  277. this.$nextTick(() => {
  278. this.frameVisible = true;
  279. });
  280. }
  281. addProtocol(url) {
  282. if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
  283. return 'http://' + url;
  284. return url;
  285. }
  286. removeProtocol(url) {
  287. return url.replace(/(^\w+:|^)\/\//, '');
  288. }
  289. getOrigin(url) {
  290. const parsed = new URL(url);
  291. return parsed.origin;
  292. }
  293. removeOrigin(url) {
  294. const parsed = new URL(url);
  295. const result = url.substring(parsed.origin.length);
  296. return (result ? result : '/');
  297. }
  298. getRootIndexByUrl(groups, url) {
  299. if (!this.ready)
  300. return -1;
  301. const origin = this.getOrigin(url);
  302. for (let i = 0; i < groups.length; i++) {
  303. if (groups[i].r == origin)
  304. return i;
  305. }
  306. return -1;
  307. }
  308. getListItemByLink(list, link) {
  309. for (const item of list) {
  310. if (item.l == link)
  311. return item;
  312. }
  313. return null;
  314. }
  315. getCommentByLink(list, link) {
  316. const item = this.getListItemByLink(list, link);
  317. return (item ? item.c : '');
  318. }
  319. makeProxySubst(url, reverse = false) {
  320. for (const [key, value] of Object.entries(proxySubst)) {
  321. if (reverse && value == url.substring(0, value.length)) {
  322. return key + url.substring(value.length);
  323. } else if (key == url.substring(0, key.length)) {
  324. return value + url.substring(key.length);
  325. }
  326. }
  327. return url;
  328. }
  329. onInputFocus(event) {
  330. event.target.select();
  331. }
  332. submitUrl() {
  333. if (this.bookUrl) {
  334. this.sendMessage({type: 'submitUrl', data: {
  335. url: this.makeProxySubst(this.addProtocol(this.bookUrl), true),
  336. force: true
  337. }});
  338. this.bookUrl = '';
  339. if (this.libs.closeAfterSubmit)
  340. this.close();
  341. }
  342. }
  343. addBookmark() {
  344. this.bookmarkLink = '';
  345. this.bookmarkDesc = '';
  346. this.addBookmarkVisible = true;
  347. this.$nextTick(() => {
  348. this.$refs.bookmarkLink.focus();
  349. });
  350. }
  351. updateBookmarkLink() {
  352. this.bookmarkLink = this.defaultRootLink;
  353. const index = this.getRootIndexByUrl(rstore.libsDefaults.groups, this.bookmarkLink);
  354. if (index >= 0) {
  355. this.bookmarkDesc = this.getCommentByLink(rstore.libsDefaults.groups[index].list, this.bookmarkLink);
  356. } else {
  357. this.bookmarkDesc = '';
  358. }
  359. }
  360. okAddBookmark() {
  361. const link = this.addProtocol(this.bookmarkLink);
  362. let index = this.getRootIndexByUrl(this.libs.groups, link);
  363. //есть группа в закладках
  364. if (index >= 0) {
  365. const item = this.getListItemByLink(this.libs.groups[index].list, link);
  366. if (!item || item.c != this.bookmarkDesc) {
  367. //добавляем
  368. let libs = _.cloneDeep(this.libs);
  369. libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
  370. this.commitLibs(libs);
  371. }
  372. } else {//нет группы в закладках
  373. //добавляем сначала группу
  374. let libs = _.cloneDeep(this.libs);
  375. libs.groups.push({r: this.getOrigin(link), s: link, list: []});
  376. index = this.getRootIndexByUrl(libs.groups, link);
  377. if (index >= 0)
  378. libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
  379. this.commitLibs(libs);
  380. }
  381. this.addBookmarkVisible = false;
  382. }
  383. bookmarkSettings() {
  384. }
  385. fullScreenToggle() {
  386. this.fullScreenActive = !this.fullScreenActive;
  387. if (this.fullScreenActive) {
  388. this.$q.fullscreen.request();
  389. } else {
  390. this.$q.fullscreen.exit();
  391. }
  392. }
  393. close() {
  394. this.sendMessage({type: 'close'});
  395. }
  396. keyHook() {
  397. if (this.$root.rootRoute() == '/external-libs') {
  398. if (this.$refs.dialogAddBookmark.active)
  399. return false;
  400. //недостатки сторонних ui
  401. const input = this.$refs.input.$refs.input;
  402. if (document.activeElement === input && event.type == 'keydown' && event.code == 'Enter') {
  403. this.submitUrl();
  404. return true;
  405. }
  406. if (event.type == 'keydown' && (event.code == 'Escape')) {
  407. this.close();
  408. }
  409. return true;
  410. }
  411. return false;
  412. }
  413. }
  414. //-----------------------------------------------------------------------------
  415. </script>
  416. <style scoped>
  417. .separator {
  418. height: 1px;
  419. background-color: #A0A0A0;
  420. }
  421. .full-screen-button {
  422. width: 30px;
  423. height: 30px;
  424. cursor: pointer;
  425. }
  426. .full-screen-button:hover {
  427. background-color: #69C05F;
  428. }
  429. </style>