Дополнительно отображаем тип файла в списке изображений

client/components/Reader/ContentsPage/ContentsPage.vue

@@ -62,7 +62,10 @@
             <div v-for="item in images" :key="item.key" class="column" style="width: 540px">
                 <div class="row item q-px-sm no-wrap">
                     <div class="col row clickable" @click="setBookPos(item.offset)">
-                        <div class="no-expand-button"></div>
+                        <div class="no-expand-button column justify-center items-center">
+                            <div v-show="item.type == 'image/jpeg'" class="image-type it-jpg-color row justify-center">JPG</div>
+                            <div v-show="item.type == 'image/png'" class="image-type it-png-color row justify-center">PNG</div>
+                        </div>
                         <div :style="item.indentStyle"></div>
                         <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
                         <div class="column justify-center">{{ item.perc }}%</div>
@@ -113,7 +116,7 @@ class ContentsPage extends Vue {
 
         //закладки
 
-        //далее формаирование оглавления
+        //далее формирование оглавления
         if (this.parsed == parsed)
             return;
 
@@ -192,16 +195,23 @@ class ContentsPage extends Vue {
         const ims = parsed.images;
         for (i = 0; i < ims.length; i++) {
             const image = ims[i];
+            let id = image.href;
+            if (id[0] == "#")
+                id = id.substr(1);
 
             const label = `Изображение ${image.num}`;
-            const indentStyle = getIndentStyle(0);
+            const indentStyle = getIndentStyle(1);
             const labelStyle = getLabelStyle(0);
 
             const p = parsed.para[image.paraIndex];
-            newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle});
+            newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset,
+                indentStyle, labelStyle, type: (parsed.binary[id] ? parsed.binary[id].type : '')});
         }
 
         this.images = newImages;
+
+        if (this.selectedTab == 'contents' && !this.contents.length && this.images.length)
+            this.selectedTab = 'images';
     }
 
     async expandClick(key) {
@@ -280,4 +290,18 @@ class ContentsPage extends Vue {
 .expanded-icon {
     transform: rotate(90deg);
 }
+
+.image-type {
+    border: 1px solid black;
+    border-radius: 6px;
+    font-size: 80%;
+    padding: 2px 0 2px 0;
+    width: 34px;
+}
+.it-jpg-color {
+    background: linear-gradient(to right, #fabc3d, #ffec6d);
+}
+.it-png-color {
+    background: linear-gradient(to right, #4bc4e5, #6bf4ff);
+}
 </style>

client/components/Reader/share/BookParser.js

@@ -211,7 +211,7 @@ export default class BookParser {
                             newParagraph(`<image href="${href}">${' '.repeat(maxImageLineCount)}</image>`, maxImageLineCount);
 
                         imageIndex++;
-                        this.images.push({paraIndex, num: imageIndex});
+                        this.images.push({paraIndex, num: imageIndex, href});
 
                         if (inPara && this.showInlineImagesInCenter)
                             newParagraph(' ', 1);
@@ -220,7 +220,7 @@ export default class BookParser {
                         newParagraph(`<image href="${href}">${' '.repeat(maxImageLineCount)}</image>`, maxImageLineCount);
 
                         imageIndex++;
-                        this.images.push({paraIndex, num: imageIndex});
+                        this.images.push({paraIndex, num: imageIndex, href});
                     }
                 }
             }