Merge pull request #111 from Quorafind/feat/refresh-button

feat: support refresh button

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "surfing",
 	"name": "Surfing",
-	"version": "0.6.7",
+	"version": "0.7.0",
 	"minAppVersion": "1.0.0",
 	"description": "Surf the Net in Obsidian.",
 	"author": "Boninall & Windily-cloud",

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "surfing",
-	"version": "0.6.7",
-	"description": "Surf the Net in Obsidian.",
+	"version": "0.7.0",
+	"description": "Use surfing to surf the net in Obsidian.",
 	"main": "main.js",
 	"scripts": {
 		"dev": "npm run lint && node esbuild.config.mjs",

src/component/HeaderBar.ts

@@ -1,21 +1,38 @@
 import SurfingPlugin from "../surfingIndex";
 import { t } from "../translations/helper";
+import { ItemView, setIcon } from "obsidian";
 
 export class HeaderBar {
 	plugin: SurfingPlugin;
 	private searchBar: HTMLInputElement;
 	private onSearchBarEnterListener = new Array<(url: string) => void>;
+	private view: ItemView;
 	removeChild = true;
 
-	constructor(parent: Element, plugin: SurfingPlugin, removeChild?: boolean) {
+	constructor(parent: Element, plugin: SurfingPlugin, view: ItemView, removeChild?: boolean) {
 		this.plugin = plugin;
+		this.view = view;
+
 		if (removeChild !== undefined) this.removeChild = removeChild;
 		// CSS class removes the gradient at the right of the header bar.
 		parent.addClass("wb-header-bar");
 		// Remove default title from header bar.
 		// Use Obsidian API to remove the title.
 		if (this.removeChild) parent.empty();
 
+		if (this.plugin.settings.showRefreshButton && removeChild) {
+			const refreshButton = parent.createEl("div", {
+				cls: "wb-refresh-button"
+			});
+			refreshButton.addEventListener("click", () => {
+				this.view.leaf.rebuildView();
+			});
+
+			setIcon(refreshButton, "refresh-cw");
+
+			console.log("refresh button added");
+		}
+
 		// Create search bar in header bar.
 		// Use Obsidian CreateEL method.
 		this.searchBar = parent.createEl("input", {

src/surfingIndex.ts

@@ -110,7 +110,7 @@ export default class SurfingPlugin extends Plugin {
 		if (currentView.getViewType() != "empty") return;
 		// Check if the "New tab" view has already been processed and has a header bar already.
 		if (!currentView.headerEl.children[2].hasClass("web-browser-header-bar")) {
-			const headerBar = new HeaderBar(currentView.headerEl.children[2], this);
+			const headerBar = new HeaderBar(currentView.headerEl.children[2], this, currentView);
 			// Focus on current inputEl
 			if (!this.settings.showSearchBarInPage) headerBar.focus();
 			headerBar.addOnSearchBarEnterListener((url: string) => {
@@ -340,7 +340,7 @@ export default class SurfingPlugin extends Plugin {
 				const currentView = this.app.workspace.getActiveViewOfType(MarkdownView);
 				if (!currentView) return;
 				if (currentView.headerEl.childNodes.length > 4) return;
-				const searchBarEl = new HeaderBar(currentView.headerEl, this, false);
+				const searchBarEl = new HeaderBar(currentView.headerEl, this, currentView, false);
 				searchBarEl.addOnSearchBarEnterListener((url: string) => {
 					SurfingView.spawnWebBrowserView(false, { url });
 				});

src/surfingPluginSetting.ts

@@ -26,6 +26,7 @@ export interface SurfingSettings {
 	markdownPath: string;
 	highlightFormat: string;
 	openInSameTab: boolean;
+	showRefreshButton: boolean;
 	highlightInSameTab: boolean;
 	openInObsidianWeb: boolean;
 	useCustomIcons: boolean;
@@ -54,12 +55,12 @@ obsidian
 `
 
 const defaultColumnList = [
-    "name",
-    "description",
-    "category",
-    "tags",
-    "created",
-    "modified",
+	"name",
+	"description",
+	"category",
+	"tags",
+	"created",
+	"modified",
 ];
 
 export const DEFAULT_SETTINGS: SurfingSettings = {
@@ -76,6 +77,7 @@ export const DEFAULT_SETTINGS: SurfingSettings = {
 	highlightFormat: '[{CONTENT}]({URL})',
 	highlightInSameTab: false,
 	openInSameTab: false,
+	showRefreshButton: false,
 	openInObsidianWeb: false,
 	useCustomIcons: false,
 	useWebview: false,
@@ -121,10 +123,10 @@ export const SEARCH_ENGINES: SearchEngine[] = [
 ];
 
 const tabNameToTabIconId: Record<string, string> = {
-    General: 'chrome',
-    Search: 'search',
-    Theme: 'brush',
-    Bookmark: 'bookmark'
+	General: 'chrome',
+	Search: 'search',
+	Theme: 'brush',
+	Bookmark: 'bookmark'
 };
 
 export class DropdownRecord {
@@ -355,6 +357,7 @@ export class SurfingSettingTab extends PluginSettingTab {
 
 	private generateGeneralSettings(tabName: string, wbContainerEl: HTMLElement) {
 		this.addOpenInSameTab(tabName, wbContainerEl);
+		this.addRefreshButton(tabName, wbContainerEl);
 		this.addHighlightFormat(tabName, wbContainerEl);
 		this.addMarkdownPath(tabName, wbContainerEl);
 		this.addReplaceIframeInCanvas(tabName, wbContainerEl);
@@ -400,6 +403,22 @@ export class SurfingSettingTab extends PluginSettingTab {
 		this.searchZeroState.createEl(Platform.isMobile ? 'h3' : 'h2', { text: 'No settings match search' }).style.textAlign = 'center';
 	}
 
+	private addRefreshButton(tabName: string, wbContainerEl: HTMLElement) {
+		const settingName = t('Show Refresh Button Near Search Bar');
+		const setting = new Setting(wbContainerEl)
+			.setName(settingName)
+			.addToggle((toggle) => {
+				toggle
+					.setValue(this.plugin.settings.showRefreshButton)
+					.onChange(async (value) => {
+						this.plugin.settings.showRefreshButton = value;
+						this.applySettingsUpdate();
+					});
+			})
+
+		this.addSettingToMasterSettingsList(tabName, setting.settingEl, settingName);
+	}
+
 	private addInpageSearch(tabName: string, wbContainerEl: HTMLElement) {
 		const settingName = t('Show Search Bar In Empty Page');
 		const setting = new Setting(wbContainerEl)

src/surfingView.ts

@@ -415,7 +415,7 @@ export class SurfingView extends ItemView {
 
 
 		// Create search bar in the header bar.
-		this.headerBar = new HeaderBar(this.headerEl.children[2], this.plugin);
+		this.headerBar = new HeaderBar(this.headerEl.children[2], this.plugin, this, true);
 
 		// Create favicon image element.
 		this.favicon = document.createElement("img") as HTMLImageElement;

src/translations/locale/en.ts

@@ -71,4 +71,5 @@ export default {
 	"Pagination": "Pagination",
 	"Category": "Category",
 	"Default Column List": "Default Column List",
+	'Show Refresh Button Near Search Bar': 'Show Refresh Button Near Search Bar',
 };

src/translations/locale/zh-cn.ts

@@ -69,4 +69,5 @@ export default {
 	"Pagination": "分页",
 	"Category": "分类",
 	"Default Column List": "默认的列",
+	'Show Refresh Button Near Search Bar': '在搜索栏旁边显示刷新按钮',
 };

styles.css

@@ -575,6 +575,16 @@ div[data-type^="empty"].workspace-leaf-content
 	display: flex;
 }
 
+.wb-refresh-button, .wb-refresh-button .lucide-refresh-cw {
+	height: var(--size-4-4);
+	width: var(--size-4-4);
+	color: var(--color-base-50);
+}
+
+.wb-refresh-button {
+	margin-right: var(--size-4-2);
+}
+
 /*.wb-bookmark-manager-icon .lucide-bookmark {*/
 /*	height: 16px;*/
 /*	width: 16px;*/

versions.json

@@ -29,5 +29,6 @@
 	"0.6.4": "1.0.0",
 	"0.6.5": "1.0.0",
 	"0.6.6": "1.0.0",
-	"0.6.7": "1.0.0"
+	"0.6.7": "1.0.0",
+	"0.7.0": "1.0.0"
 }