ExternalLibs.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. <template>
  2. <Window ref="window" @close="close" margin="2px">
  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" ref="rootLink" v-model="rootLink" :options="rootLinkOptions" @input="rootLinkInput"
  15. @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
  16. style="width: 230px"
  17. dropdown-icon="la la-angle-down la-sm"
  18. rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
  19. >
  20. <template v-slot:prepend>
  21. <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="12px">
  22. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
  23. </q-btn>
  24. <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px">
  25. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки</q-tooltip>
  26. </q-btn>
  27. </template>
  28. <template v-slot:selected>
  29. <div style="overflow: hidden; white-space: nowrap;">{{ rootLinkWithoutProtocol }}</div>
  30. </template>
  31. </q-select>
  32. <q-select class="q-mr-sm" ref="selectedLink" v-model="selectedLink" :options="selectedLinkOptions" @input="selectedLinkInput" style="width: 50px"
  33. @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
  34. dropdown-icon="la la-angle-down la-sm"
  35. rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
  36. >
  37. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip>
  38. </q-select>
  39. <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги"
  40. @focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
  41. >
  42. <template v-slot:prepend>
  43. <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(selectedLink, true)" size="12px">
  44. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
  45. </q-btn>
  46. <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px" :disabled="!bookUrl">
  47. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
  48. </q-btn>
  49. </template>
  50. <template v-slot:append>
  51. <q-btn round dense color="blue" icon="la la-cog" @click.stop="openOptions" size="12px">
  52. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
  53. </q-btn>
  54. </template>
  55. </q-input>
  56. <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl" :disabled="!bookUrl">Открыть
  57. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть в читалке</q-tooltip>
  58. </q-btn>
  59. </div>
  60. <div class="separator"></div>
  61. <div class="col fit" style="position: relative;">
  62. <iframe v-if="frameVisible" class="fit" ref="frame" :src="frameSrc" frameborder="0"></iframe>
  63. <div v-show="transparentLayoutVisible" ref="transparentLayout" class="fit transparent-layout" @click="transparentLayoutClick"></div>
  64. </div>
  65. <Dialog ref="dialogAddBookmark" v-model="addBookmarkVisible">
  66. <template slot="header">
  67. <div class="row items-center">
  68. <q-icon class="q-mr-sm" name="la la-bookmark" size="28px"></q-icon>
  69. <div v-if="addBookmarkMode == 'edit'">Редактировать закладку</div>
  70. <div v-else>Добавить закладку</div>
  71. </div>
  72. </template>
  73. <div class="q-mx-md row">
  74. <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" @keydown="bookmarkLinkKeyDown"
  75. placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus">
  76. </q-input>
  77. <q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px"
  78. dropdown-icon="la la-angle-down la-sm"
  79. outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
  80. >
  81. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Предустановленные ссылки</q-tooltip>
  82. </q-select>
  83. </div>
  84. <div class="q-mx-md q-mt-md">
  85. <q-input class="col q-mr-sm" ref="bookmarkDesc" outlined dense bg-color="white" v-model="bookmarkDesc" @keydown="bookmarkDescKeyDown"
  86. placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus">
  87. </q-input>
  88. </div>
  89. <template slot="footer">
  90. <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
  91. <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark" :disabled="!bookmarkLink">OK</q-btn>
  92. </template>
  93. </Dialog>
  94. </div>
  95. <BookmarkSettings v-if="bookmarkSettingsActive" ref="bookmarkSettings" :libs="libs" :addBookmarkVisible="addBookmarkVisible"
  96. @do-action="doAction" @close="closeBookmarkSettings">
  97. </BookmarkSettings>
  98. </Window>
  99. </template>
  100. <script>
  101. //-----------------------------------------------------------------------------
  102. import Vue from 'vue';
  103. import Component from 'vue-class-component';
  104. import _ from 'lodash';
  105. import Window from '../share/Window.vue';
  106. import Dialog from '../share/Dialog.vue';
  107. import BookmarkSettings from './BookmarkSettings/BookmarkSettings.vue';
  108. import rstore from '../../store/modules/reader';
  109. import * as utils from '../../share/utils';
  110. import * as lu from './linkUtils';
  111. const proxySubst = {
  112. 'http://flibusta.is': 'http://b.liberama.top:23480',
  113. };
  114. export default @Component({
  115. components: {
  116. Window,
  117. Dialog,
  118. BookmarkSettings
  119. },
  120. watch: {
  121. libs: function() {
  122. this.loadLibs();
  123. },
  124. defaultRootLink: function() {
  125. this.updateBookmarkLink();
  126. },
  127. bookUrl: function(newValue) {
  128. const value = lu.addProtocol(newValue);
  129. const subst = this.makeProxySubst(value, true);
  130. if (value != subst) {
  131. this.$nextTick(() => {
  132. this.bookUrl = subst;
  133. });
  134. }
  135. },
  136. bookmarkLink: function(newValue) {
  137. const value = lu.addProtocol(newValue);
  138. const subst = this.makeProxySubst(value, true);
  139. if (value != subst) {
  140. this.$nextTick(() => {
  141. this.bookmarkLink = subst;
  142. });
  143. }
  144. },
  145. }
  146. })
  147. class ExternalLibs extends Vue {
  148. ready = false;
  149. frameVisible = false;
  150. rootLink = '';
  151. selectedLink = '';
  152. frameSrc = '';
  153. bookUrl = '';
  154. libs = {};
  155. fullScreenActive = false;
  156. addBookmarkVisible = false;
  157. transparentLayoutVisible = false;
  158. addBookmarkMode = '';
  159. bookmarkLink = '';
  160. bookmarkDesc = '';
  161. defaultRootLink = '';
  162. bookmarkSettingsActive = false;
  163. created() {
  164. this.$root.addKeyHook(this.keyHook);
  165. document.addEventListener('fullscreenchange', () => {
  166. this.fullScreenActive = (document.fullscreenElement !== null);
  167. });
  168. this.debouncedGoToLink = _.debounce((link, force) => {
  169. this.goToLink(link, force);
  170. }, 100, {'maxWait':200});
  171. //this.commit = this.$store.commit;
  172. //this.commit('reader/setLibs', rstore.libsDefaults);
  173. }
  174. mounted() {
  175. //Поправка метода toggleOption компонента select фреймворка quasar, необходимо другое поведение
  176. //$emit('input'.. вызывается всегда
  177. this.toggleOption = function(opt, keepOpen) {
  178. if (this.editable !== true || opt === void 0 || this.isOptionDisabled(opt) === true) {
  179. return;
  180. }
  181. const optValue = this.getOptionValue(opt);
  182. if (this.multiple !== true) {
  183. if (keepOpen !== true) {
  184. this.updateInputValue(this.fillInput === true ? this.getOptionLabel(opt) : '', true, true);
  185. this.hidePopup();
  186. }
  187. this.$refs.target !== void 0 && this.$refs.target.focus();
  188. this.$emit('input', this.emitValue === true ? optValue : opt);
  189. }
  190. };
  191. this.$refs.rootLink.toggleOption = this.toggleOption;
  192. this.$refs.selectedLink.toggleOption = this.toggleOption;
  193. (async() => {
  194. //подождем this.mode
  195. let i = 0;
  196. while(!this.mode && i < 100) {
  197. await utils.sleep(100);
  198. i++;
  199. }
  200. if (this.mode != 'liberama.top') {
  201. this.$router.replace('/404');
  202. return;
  203. }
  204. this.$refs.window.init();
  205. this.opener = null;
  206. const host = window.location.host;
  207. const openerHost = (host.indexOf('b.') == 0 ? host.substring(2) : host);
  208. const openerOrigin1 = `http://${openerHost}`;
  209. const openerOrigin2 = `https://${openerHost}`;
  210. window.addEventListener('message', (event) => {
  211. if (event.origin !== openerOrigin1 && event.origin !== openerOrigin2)
  212. return;
  213. if (!_.isObject(event.data) || event.data.from != 'LibsPage')
  214. return;
  215. if (event.origin == openerOrigin1)
  216. this.opener = window.opener;
  217. else
  218. this.opener = event.source;
  219. this.openerOrigin = event.origin;
  220. //console.log(event);
  221. this.recvMessage(event.data);
  222. });
  223. //Ожидаем родителя
  224. i = 0;
  225. while(!this.opener) {
  226. await utils.sleep(1000);
  227. i++;
  228. if (i >= 5) {
  229. await this.$root.stdDialog.alert('Нет связи с читалкой. Окно будет закрыто', 'Ошибка');
  230. window.close();
  231. }
  232. }
  233. //Проверка закрытия родительского окна
  234. while(this.opener) {
  235. await this.checkOpener();
  236. await utils.sleep(1000);
  237. }
  238. })();
  239. }
  240. recvMessage(d) {
  241. if (d.type == 'mes') {
  242. switch(d.data) {
  243. case 'hello': this.sendMessage({type: 'mes', data: 'ready'}); break;
  244. }
  245. } else if (d.type == 'libs') {
  246. this.ready = true;
  247. this.libs = _.cloneDeep(d.data);
  248. } else if (d.type == 'notify') {
  249. this.$root.notify.success(d.data, '', {position: 'bottom-right'});
  250. }
  251. }
  252. sendMessage(d) {
  253. (async() => {
  254. await this.checkOpener();
  255. if (this.opener && this.openerOrigin)
  256. this.opener.postMessage(Object.assign({}, {from: 'ExternalLibs'}, d), this.openerOrigin);
  257. })();
  258. }
  259. async checkOpener() {
  260. if (this.opener.closed) {
  261. await this.$root.stdDialog.alert('Потеряна связь с читалкой. Окно будет закрыто', 'Ошибка');
  262. window.close();
  263. }
  264. }
  265. commitLibs(libs) {
  266. this.sendMessage({type: 'libs', data: libs});
  267. }
  268. loadLibs() {
  269. const libs = this.libs;
  270. this.selectedLink = libs.startLink;
  271. this.updateStartLink();
  272. }
  273. doAction(event) {
  274. switch (event.action) {
  275. case 'setLibs': this.commitLibs(event.data); break;
  276. case 'setRootLink': this.rootLink = event.data; this.rootLinkInput(); break;
  277. case 'setSelectedLink': this.selectedLink = event.data; this.selectedLinkInput(); break;
  278. case 'editBookmark': this.addBookmark('edit', event.data.link, event.data.desc); break;
  279. case 'addBookmark': this.addBookmark('add'); break;
  280. }
  281. }
  282. get mode() {
  283. return this.$store.state.config.mode;
  284. }
  285. get header() {
  286. let result = (this.ready ? 'Библиотека' : 'Загрузка...');
  287. if (this.ready && this.selectedLink) {
  288. result += ` | ${(this.libs.comment ? this.libs.comment + ' ': '') + lu.removeProtocol(this.libs.startLink)}`;
  289. }
  290. this.$root.$emit('set-app-title', result);
  291. return result;
  292. }
  293. get rootLinkWithoutProtocol() {
  294. return lu.removeProtocol(this.rootLink);
  295. }
  296. updateSelectedLinkByRoot() {
  297. if (!this.ready)
  298. return;
  299. const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
  300. if (index >= 0)
  301. this.selectedLink = this.libs.groups[index].s;
  302. else
  303. this.selectedLink = '';
  304. }
  305. updateStartLink(force) {
  306. if (!this.ready)
  307. return;
  308. let index = -1;
  309. try {
  310. this.rootLink = lu.getOrigin(this.selectedLink);
  311. index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
  312. } catch(e) {
  313. //
  314. }
  315. if (index >= 0) {
  316. let libs = _.cloneDeep(this.libs);
  317. const com = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
  318. if (libs.groups[index].s != this.selectedLink ||
  319. libs.startLink != this.selectedLink ||
  320. libs.comment != com) {
  321. libs.groups[index].s = this.selectedLink;
  322. libs.startLink = this.selectedLink;
  323. libs.comment = com;
  324. this.commitLibs(libs);
  325. }
  326. this.debouncedGoToLink(this.selectedLink, force);
  327. } else {
  328. this.rootLink = '';
  329. this.selectedLink = '';
  330. this.debouncedGoToLink(this.selectedLink, true);
  331. }
  332. }
  333. get rootLinkOptions() {
  334. let result = [];
  335. if (!this.ready)
  336. return result;
  337. this.libs.groups.forEach(group => {
  338. result.push({label: lu.removeProtocol(group.r), value: group.r});
  339. });
  340. return result;
  341. }
  342. get defaultRootLinkOptions() {
  343. let result = [];
  344. rstore.libsDefaults.groups.forEach(group => {
  345. result.push({label: lu.removeProtocol(group.r), value: group.r});
  346. });
  347. return result;
  348. }
  349. get selectedLinkOptions() {
  350. let result = [];
  351. if (!this.ready)
  352. return result;
  353. const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
  354. if (index >= 0) {
  355. this.libs.groups[index].list.forEach(link => {
  356. result.push({label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l), value: link.l});
  357. });
  358. }
  359. return result;
  360. }
  361. openBookUrlInFrame() {
  362. if (this.bookUrl) {
  363. this.goToLink(lu.addProtocol(this.bookUrl), true);
  364. }
  365. }
  366. goToLink(link, force) {
  367. if (!this.ready || !link)
  368. return;
  369. if (!link) {
  370. this.frameVisible = false;
  371. return;
  372. }
  373. const newLink = this.makeProxySubst(link);
  374. if (force || newLink != this.frameSrc) {
  375. this.frameSrc = newLink;
  376. this.frameVisible = false;
  377. this.$nextTick(() => {
  378. this.frameVisible = true;
  379. this.$nextTick(() => {
  380. if (this.$refs.frame)
  381. this.$refs.frame.contentWindow.focus();
  382. });
  383. });
  384. }
  385. }
  386. getCommentByLink(list, link) {
  387. const item = lu.getListItemByLink(list, link);
  388. return (item ? item.c : '');
  389. }
  390. makeProxySubst(url, reverse = false) {
  391. for (const [key, value] of Object.entries(proxySubst)) {
  392. if (reverse && value == url.substring(0, value.length)) {
  393. return key + url.substring(value.length);
  394. } else if (!reverse && key == url.substring(0, key.length)) {
  395. return value + url.substring(key.length);
  396. }
  397. }
  398. return url;
  399. }
  400. selectAllOnFocus(event) {
  401. if (event.target.select)
  402. event.target.select();
  403. }
  404. rootLinkInput() {
  405. this.updateSelectedLinkByRoot();
  406. this.updateStartLink(true);
  407. }
  408. selectedLinkInput() {
  409. this.updateStartLink(true);
  410. }
  411. submitUrl() {
  412. if (this.bookUrl) {
  413. this.sendMessage({type: 'submitUrl', data: {
  414. url: this.bookUrl,
  415. force: true
  416. }});
  417. this.bookUrl = '';
  418. if (this.libs.closeAfterSubmit)
  419. this.close();
  420. }
  421. }
  422. addBookmark(mode = 'add', link = '', desc = '') {
  423. if (mode == 'edit') {
  424. this.editBookmarkLink = this.bookmarkLink = link;
  425. this.editBookmarkDesc = this.bookmarkDesc = desc;
  426. } else {
  427. this.bookmarkLink = this.bookUrl;
  428. this.bookmarkDesc = '';
  429. }
  430. this.addBookmarkMode = mode;
  431. this.addBookmarkVisible = true;
  432. this.$nextTick(() => {
  433. this.$refs.bookmarkLink.focus();
  434. this.$refs.defaultRootLink.toggleOption = this.toggleOption;
  435. });
  436. }
  437. updateBookmarkLink() {
  438. const index = lu.getSafeRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
  439. if (index >= 0) {
  440. this.bookmarkLink = rstore.libsDefaults.groups[index].s;
  441. this.bookmarkDesc = this.getCommentByLink(rstore.libsDefaults.groups[index].list, this.bookmarkLink);
  442. } else {
  443. this.bookmarkLink = '';
  444. this.bookmarkDesc = '';
  445. }
  446. }
  447. defaultRootLinkInput() {
  448. this.updateBookmarkLink();
  449. }
  450. bookmarkLinkKeyDown(event) {
  451. if (event.key == 'Enter') {
  452. this.$refs.bookmarkDesc.focus();
  453. event.preventDefault();
  454. }
  455. }
  456. bookmarkDescKeyDown(event) {
  457. if (event.key == 'Enter') {
  458. event.stopPropagation();
  459. event.preventDefault();
  460. this.okAddBookmark();
  461. }
  462. }
  463. async okAddBookmark() {
  464. if (!this.bookmarkLink)
  465. return;
  466. const link = (this.addBookmarkMode == 'edit' ? lu.addProtocol(this.editBookmarkLink) : lu.addProtocol(this.bookmarkLink));
  467. let index = -1;
  468. try {
  469. index = lu.getRootIndexByUrl(this.libs.groups, link);
  470. } catch (e) {
  471. await this.$root.stdDialog.alert('Неверный формат ссылки', 'Ошибка');
  472. return;
  473. }
  474. let libs = _.cloneDeep(this.libs);
  475. //добавление
  476. //есть группа в закладках
  477. if (index >= 0) {
  478. const item = lu.getListItemByLink(libs.groups[index].list, link);
  479. //редактирование
  480. if (item && this.addBookmarkMode == 'edit') {
  481. if (item) {
  482. //редактируем
  483. item.l = link;
  484. item.c = this.bookmarkDesc;
  485. this.commitLibs(libs);
  486. } else {
  487. await this.$root.stdDialog.alert('Не удалось отредактировать закладку', 'Ошибка');
  488. }
  489. } else if (!item) {
  490. //добавляем
  491. if (libs.groups[index].list.length >= 100) {
  492. await this.$root.stdDialog.alert('Достигнут предел количества закладок для этого сайта', 'Ошибка');
  493. return;
  494. }
  495. libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
  496. this.commitLibs(libs);
  497. } else if (item.c != this.bookmarkDesc) {
  498. if (await this.$root.stdDialog.confirm(`Такая закладка уже существует с другим описанием.<br>` +
  499. `Заменить '${this.$sanitize(item.c)}' на '${this.$sanitize(this.bookmarkDesc)}'?`, ' ')) {
  500. item.c = this.bookmarkDesc;
  501. this.commitLibs(libs);
  502. } else
  503. return;
  504. } else {
  505. await this.$root.stdDialog.alert('Такая закладка уже существует', ' ');
  506. return;
  507. }
  508. } else {//нет группы в закладках
  509. if (libs.groups.length >= 100) {
  510. await this.$root.stdDialog.alert('Достигнут предел количества различных сайтов в закладках', 'Ошибка');
  511. return;
  512. }
  513. //добавляем сначала группу
  514. libs.groups.push({r: lu.getOrigin(link), s: link, list: []});
  515. index = lu.getSafeRootIndexByUrl(libs.groups, link);
  516. if (index >= 0)
  517. libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
  518. this.commitLibs(libs);
  519. }
  520. this.addBookmarkVisible = false;
  521. }
  522. fullScreenToggle() {
  523. this.fullScreenActive = !this.fullScreenActive;
  524. if (this.fullScreenActive) {
  525. this.$q.fullscreen.request();
  526. } else {
  527. this.$q.fullscreen.exit();
  528. }
  529. }
  530. transparentLayoutClick() {
  531. this.transparentLayoutVisible = false;
  532. }
  533. onSelectPopupShow() {
  534. this.transparentLayoutVisible = true;
  535. }
  536. onSelectPopupHide() {
  537. this.transparentLayoutVisible = false;
  538. }
  539. close() {
  540. this.sendMessage({type: 'close'});
  541. }
  542. bookUrlKeyDown(event) {
  543. if (event.key == 'Enter') {
  544. this.submitUrl();
  545. event.preventDefault();
  546. }
  547. }
  548. bookmarkSettings() {
  549. this.bookmarkSettingsActive = true;
  550. this.$nextTick(() => {
  551. this.$refs.bookmarkSettings.init();
  552. });
  553. }
  554. closeBookmarkSettings() {
  555. this.bookmarkSettingsActive = false;
  556. }
  557. openOptions() {
  558. }
  559. keyHook(event) {
  560. if (this.$root.rootRoute() == '/external-libs') {
  561. if (this.$root.stdDialog.active)
  562. return false;
  563. if (this.bookmarkSettingsActive && this.$refs.bookmarkSettings.keyHook(event))
  564. return true;
  565. if (this.addBookmarkVisible)
  566. return false;
  567. if (event.type == 'keydown' && event.key == 'F4') {
  568. this.addBookmark();
  569. return true;
  570. }
  571. if (event.type == 'keydown' && event.key == 'Escape' &&
  572. (document.activeElement != this.$refs.rootLink.$refs.target || !this.$refs.rootLink.menu) &&
  573. (document.activeElement != this.$refs.selectedLink.$refs.target || !this.$refs.selectedLink.menu)
  574. ) {
  575. this.close();
  576. return true;
  577. }
  578. }
  579. return false;
  580. }
  581. }
  582. //-----------------------------------------------------------------------------
  583. </script>
  584. <style scoped>
  585. .separator {
  586. height: 1px;
  587. background-color: #A0A0A0;
  588. }
  589. .full-screen-button {
  590. width: 30px;
  591. height: 30px;
  592. cursor: pointer;
  593. }
  594. .full-screen-button:hover {
  595. background-color: #69C05F;
  596. }
  597. .transparent-layout {
  598. top: 0;
  599. left: 0;
  600. position: absolute;
  601. }
  602. </style>