github.com/soulteary/pocket-bookcase@v0.0.0-20240428065142-0b5a9a0fc98a/internal/view/assets/js/component/bookmark.js (about)

     1  var template = `
     2  <div class="bookmark" :class="{list: ListMode, 'no-thumbnail': HideThumbnail, selected: selected}">
     3  	<a class="bookmark-selector" 
     4  		v-if="editMode" 
     5  		@click="selectBookmark">
     6  	</a>
     7  	<a class="bookmark-link" :href="mainURL" target="_blank" rel="noopener noreferrer">
     8  		<span class="thumbnail" v-if="thumbnailVisible" :style="thumbnailStyleURL"></span>
     9  		<p class="title" dir="auto">{{title}}
    10  			<i v-if="hasContent" class="fas fa-file-alt"></i>
    11  			<i v-if="hasArchive" class="fas fa-archive"></i>
    12  			<i v-if="public" class="fas fa-eye"></i>
    13  		</p>
    14  		<p class="excerpt" v-if="excerptVisible">{{excerpt}}</p>
    15  		<p class="id" v-show="ShowId">{{id}}</p>
    16  	</a>
    17  	<div class="bookmark-tags" v-if="tags.length > 0">
    18  		<a v-for="tag in tags" @click="tagClicked($event, tag.name)">{{tag.name}}</a>
    19  	</div>
    20  	<div class="spacer"></div>
    21  	<div class="bookmark-menu">
    22  		<a class="url" :href="url" target="_blank" rel="noopener noreferrer">
    23  			{{hostnameURL}}
    24  		</a>
    25  		<template v-if="!editMode && menuVisible">
    26  			<a title="Edit bookmark" @click="editBookmark">
    27  				<i class="fas fa-fw fa-pencil-alt"></i>
    28  			</a>
    29  			<a title="Delete bookmark" @click="deleteBookmark">
    30  				<i class="fas fa-fw fa-trash-alt"></i>
    31  			</a>
    32  			<a title="Update archive" @click="updateBookmark">
    33  				<i class="fas fa-fw fa-cloud-download-alt"></i>
    34  			</a>
    35              <a v-if="hasEbook" title="Download book" @click="downloadebook">
    36                  <i class="fas fa-fw fa-book"></i>
    37              </a>
    38  		</template>
    39  	</div>
    40  </div>`;
    41  
    42  export default {
    43  	template: template,
    44  	props: {
    45  		id: Number,
    46  		url: String,
    47  		title: String,
    48  		excerpt: String,
    49  		public: Number,
    50  		imageURL: String,
    51  		hasContent: Boolean,
    52  		hasArchive: Boolean,
    53  		hasEbook: Boolean,
    54  		index: Number,
    55  		ShowId: Boolean,
    56  		editMode: Boolean,
    57  		ListMode: Boolean,
    58  		HideThumbnail: Boolean,
    59  		HideExcerpt: Boolean,
    60  		selected: Boolean,
    61  		menuVisible: Boolean,
    62  		tags: {
    63  			type: Array,
    64  			default() {
    65  				return [];
    66  			},
    67  		},
    68  	},
    69  	computed: {
    70  		mainURL() {
    71  			if (this.hasContent) {
    72  				return new URL(`bookmark/${this.id}/content`, document.baseURI);
    73  			} else if (this.hasArchive) {
    74  				return new URL(`bookmark/${this.id}/archive`, document.baseURI);
    75  			} else {
    76  				return this.url;
    77  			}
    78  		},
    79  		ebookURL() {
    80  			if (this.hasEbook) {
    81  				return new URL(`bookmark/${this.id}/ebook`, document.baseURI);
    82  			} else {
    83  				return null;
    84  			}
    85  		},
    86  		hostnameURL() {
    87  			var url = new URL(this.url);
    88  			return url.hostname.replace(/^www\./, "");
    89  		},
    90  		thumbnailVisible() {
    91  			return this.imageURL !== "" && !this.HideThumbnail;
    92  		},
    93  		excerptVisible() {
    94  			return this.excerpt !== "" && !this.thumbnailVisible && !this.HideExcerpt;
    95  		},
    96  		thumbnailStyleURL() {
    97  			return {
    98  				backgroundImage: `url("${this.imageURL}")`,
    99  			};
   100  		},
   101  		eventItem() {
   102  			return {
   103  				id: this.id,
   104  				index: this.index,
   105  			};
   106  		},
   107  	},
   108  	methods: {
   109  		tagClicked(name, event) {
   110  			this.$emit("tag-clicked", name, event);
   111  		},
   112  		selectBookmark() {
   113  			this.$emit("select", this.eventItem);
   114  		},
   115  		editBookmark() {
   116  			this.$emit("edit", this.eventItem);
   117  		},
   118  		deleteBookmark() {
   119  			this.$emit("delete", this.eventItem);
   120  		},
   121  		updateBookmark() {
   122  			this.$emit("update", this.eventItem);
   123  		},
   124  		downloadebook() {
   125  			const id = this.id;
   126  			const ebook_url = new URL(`bookmark/${id}/ebook`, document.baseURI);
   127  			const downloadLink = document.createElement("a");
   128  			downloadLink.href = ebook_url.toString();
   129  			downloadLink.download = `${this.title}.epub`;
   130  			downloadLink.click();
   131  		},
   132  	},
   133  };