Przeglądaj źródła

Работа над LibsPage

Book Pauk 4 lat temu
rodzic
commit
fd58568cf0
1 zmienionych plików z 19 dodań i 4 usunięć
  1. 19 4
      client/components/Reader/LibsPage/LibsPage.vue

+ 19 - 4
client/components/Reader/LibsPage/LibsPage.vue

@@ -26,14 +26,18 @@
                 </q-select>
                 </q-select>
                 <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus">
                 <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus">
                     <template v-slot:prepend>
                     <template v-slot:prepend>
-                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" size="12px"/>
-                        <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px"/>
+                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToStartLink" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
+                        </q-btn>
+                        <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
+                        </q-btn>
                     </template>
                     </template>
                 </q-input>
                 </q-input>
                 <q-btn rounded color="green-5" no-caps size="14px" @click="submitUrl">Открыть</q-btn>
                 <q-btn rounded color="green-5" no-caps size="14px" @click="submitUrl">Открыть</q-btn>
             </div>
             </div>
             <div class="separator"></div>
             <div class="separator"></div>
-            <iframe class="col fit" :src="frameSrc" frameborder="0"></iframe>
+            <iframe v-if="frameVisible" class="col fit" ref="frame" :src="frameSrc" sandbox="allow-same-origin" frameborder="0"></iframe>
         </div>
         </div>
     </Window>
     </Window>
 </template>
 </template>
@@ -65,6 +69,7 @@ export default @Component({
     }    
     }    
 })
 })
 class LibsPage extends Vue {
 class LibsPage extends Vue {
+    frameVisible = false;
     startLink = '';
     startLink = '';
     rootLink = '';
     rootLink = '';
     selectedLink = '';
     selectedLink = '';
@@ -81,6 +86,8 @@ class LibsPage extends Vue {
         this.$refs.window.init();
         this.$refs.window.init();
         if (!this.frameSrc)
         if (!this.frameSrc)
             this.frameSrc = this.libs.startLink;
             this.frameSrc = this.libs.startLink;
+        this.frameVisible = false;
+        this.frameVisible = true;
     }
     }
 
 
     get libs() {
     get libs() {
@@ -139,6 +146,14 @@ class LibsPage extends Vue {
             this.frameSrc = this.addProtocol(this.bookUrl);
             this.frameSrc = this.addProtocol(this.bookUrl);
     }
     }
 
 
+    goToStartLink() {
+        this.frameSrc = this.libs.startLink;
+        this.frameVisible = false;
+        this.$nextTick(() => {
+            this.frameVisible = true;
+        });
+    }
+
     addProtocol(url) {
     addProtocol(url) {
         if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
         if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
             return 'http://' + url;
             return 'http://' + url;
@@ -184,7 +199,7 @@ class LibsPage extends Vue {
 
 
     submitUrl() {
     submitUrl() {
         if (this.bookUrl) {
         if (this.bookUrl) {
-            this.$emit('load-book', {url: this.bookUrl, force: true});
+            this.$emit('load-book', {url: this.addProtocol(this.bookUrl), force: true});
             this.bookUrl = '';
             this.bookUrl = '';
         }
         }
     }
     }