diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index e9d31581d7..47e586a26a 100644 --- a/.github/CHANGELOG.md +++ b/.github/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## ✨ 1.8.8 - Improved Item Targets [PR #292](https://github.com/Lissy93/dashy/pull/292) +- Adds support for `_top` and `_parent` anchor targets on items, Re: #289 +- Adds `appConfig.defaultOpeningMethod` option to specify default target +- Adds new icons to show items opening method on hover +- Refactors target checking, updates item target docs and schema + ## ⚡️ 1.8.7 - Bug Fixes and Improvements [PR #273](https://github.com/Lissy93/dashy/pull/273) - Clean URLs without the hash, now using history-mode routing - New initial main example conf.yml diff --git a/README.md b/README.md index 1309a11085..ea5ad6f831 100644 --- a/README.md +++ b/README.md @@ -304,6 +304,9 @@ One of the primary purposes of Dashy is to make launching commonly used apps and - `newtab` - The app will be launched in a new tab - `modal` - Launch app in a resizable/ movable popup modal on the current page - `workspace` - Changes to Workspace view, and launches app +- `top` - Opens in the top-most browsing context, useful if your accessing Dashy through an iframe + +You can also set the default opening method, which will be applied to all items that don't have a specified target, using `appConfig.defaultOpeningMethod`, to one of the above values. Even if the target is not set (or is set to `sametab`), you can still launch any given app in an alternative method: Alt + Click will open the modal, and Ctrl + Click will open in a new tab. You can also right-click on any item to see all options (as seen in the screenshot below). This custom context menu can be disabled by setting `appConfig.disableContextMenu: true`. diff --git a/docs/alternate-views.md b/docs/alternate-views.md index 29dc032cb4..2417316a6f 100644 --- a/docs/alternate-views.md +++ b/docs/alternate-views.md @@ -37,9 +37,12 @@ Dashy supports several different ways to launch your apps. The default opening m - `sametab` - The app will be launched in the current tab - `newtab` - The app will be launched in a new tab +- `top` - Opens in the top-most browsing context, useful if your accessing Dashy through an iframe - `modal` - Launch app in a resizable/ movable popup modal on the current page - `workspace` - Changes to Workspace view, and launches app +You can also set the default opening method, which will be applied to all items that don't have a specified target, using `appConfig.defaultOpeningMethod`, to one of the above values. + Even if the target is not set (or is set to `sametab`), you can still launch any given app in an alternative method: Alt + Click will open the modal, and Ctrl + Click will open in a new tab. You can also right-click on any item to see all options (as seen in the screenshot below). This custom context menu can be disabled by setting `appConfig.disableContextMenu: true`.

diff --git a/docs/configuring.md b/docs/configuring.md index ebe39c9b45..5d13fbe5f4 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -74,6 +74,7 @@ Tips: --- | --- | --- | --- **`language`** | `string` | _Optional_ | The 2 (or 4-digit) [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language, e.g. `en` or `en-GB`. This must be a language that the app has already been [translated](https://github.com/Lissy93/dashy/tree/master/src/assets/locales) into. If your language is unavailable, Dashy will fallback to English. By default Dashy will attempt to auto-detect your language, although this may not work on some privacy browsers. **`startingView`** | `enum` | _Optional_ | Which page to load by default, and on the base page or domain root. You can still switch to different views from within the UI. Can be either `default`, `minimal` or `workspace`. Defaults to `default` +**`defaultOpeningMethod`** | `enum` | _Optional_ | The default opening method for items, if no `target` is specified for a given item. Can be either `newtab`, `sametab`, `top`, `parent`, `modal` or `workspace`. Defaults to `newtab` **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping each of your services and display their status as a dot next to each item. This can be overridden by setting `statusCheck` under each item. Defaults to `false` **`statusCheckInterval`** | `boolean` | _Optional_ | The number of seconds between checks. If set to `0` then service will only be checked on initial page load, which is usually the desired functionality. If value is less than `10` you may experience a hit in performance. Defaults to `0` **`webSearch`** | `object` | _Optional_ | Configuration options for the web search feature, set your default search engine, opening method or disable web search. See [`webSearch`](#appconfigwebsearch-optional) @@ -181,7 +182,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)** **`description`** | `string` | _Optional_ | Additional info about an item, which is shown in the tooltip on hover, or visible on large tiles **`url`** | `string` | Required | The URL / location of web address for when the item is clicked **`icon`** | `string` | _Optional_ | The icon for a given item. Can be a font-awesome icon, favicon, remote URL or local URL. See [`item.icon`](#sectionicon-and-sectionitemicon) -**`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab`, `modal` or `workspace`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `modal` will open a pop-up modal with the content displayed within that iframe. Note that for the iframe to load, you must have set the CORS headers to either allow `*` ot allow the domain that you are hosting Dashy on, for some websites and self-hosted services, this is already set. +**`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab`, `top`, `parent`, `modal` or `workspace`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `modal` will open a pop-up modal and `workspace` will open in the Workspace view. Defaults to `newtab` **`hotkey`** | `number` | _Optional_ | Give frequently opened applications a numeric hotkey, between `0 - 9`. You can then just press that key to launch that application. **`tags`** | `string[]` | _Optional_ | A list of tags, which can be used for improved search **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping the URL associated with the current service, and display its status as a dot next to the item. The value here will override `appConfig.statusCheck` so you can turn off or on checks for a given service. Defaults to `appConfig.statusCheck`, falls back to `false` diff --git a/docs/searching.md b/docs/searching.md index 870618d151..e699f97d71 100644 --- a/docs/searching.md +++ b/docs/searching.md @@ -7,7 +7,7 @@ One of the primary purposes of Dashy is to allow you to quickly find and launch You can navigate through your items or search results using the keyboard. You can use Tab to cycle through results, and Shift + Tab to go backwards. Or use the arrow keys, ↑, →, ↓ and ←. ## Launching Apps -You can launch a elected app by hitting Enter. This will open the app using your default opening method, specified in `target` (either `newtab`, `sametab`, `modal` or `workspace`). You can also use Alt + Enter to open the app in a pop-up modal, or Ctrl + Enter to open it in a new tab. For all available opening methods, just right-click on an item, to bring up the context menu. +You can launch a elected app by hitting Enter. This will open the app using your default opening method, specified in `target` (either `newtab`, `sametab`, `modal`, `top` or `workspace`). You can also use Alt + Enter to open the app in a pop-up modal, or Ctrl + Enter to open it in a new tab. For all available opening methods, just right-click on an item, to bring up the context menu. ## Tags By default, items are filtered by the `title` attribute, as well as the hostname (extracted from `url`), the `provider` and `description`. If you need to find results based on text which isn't included in these attributes, then you can add `tags` to a given item. diff --git a/package.json b/package.json index d885af331e..9525224a4d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Dashy", - "version": "1.8.7", + "version": "1.8.8", "license": "MIT", "main": "server", "scripts": { diff --git a/src/assets/interface-icons/open-parent.svg b/src/assets/interface-icons/open-parent.svg new file mode 100644 index 0000000000..09f695910d --- /dev/null +++ b/src/assets/interface-icons/open-parent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/open-top.svg b/src/assets/interface-icons/open-top.svg new file mode 100644 index 0000000000..b93ecf0db4 --- /dev/null +++ b/src/assets/interface-icons/open-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/open-workspace.svg b/src/assets/interface-icons/open-workspace.svg index b0a186ca7a..6c0590d80d 100644 --- a/src/assets/interface-icons/open-workspace.svg +++ b/src/assets/interface-icons/open-workspace.svg @@ -1,20 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/interface-icons/unknown-icon.svg b/src/assets/interface-icons/unknown-icon.svg new file mode 100644 index 0000000000..2a3a5c6639 --- /dev/null +++ b/src/assets/interface-icons/unknown-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue index 0970971416..ef90c53d29 100644 --- a/src/components/Configuration/JsonEditor.vue +++ b/src/components/Configuration/JsonEditor.vue @@ -156,7 +156,7 @@ export default { localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo)); } if (data.appConfig) { - data.appConfig.auth = this.config.appConfig.auth || []; + data.appConfig.auth = this.config.appConfig.auth || {}; localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(data.appConfig)); } if (data.appConfig.theme) { diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index cc89198e13..645ccdafc8 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -3,8 +3,8 @@ ['newtab', 'sametab', 'modal', 'workspace'].indexOf(value) !== -1, + validator: targetValidator, }, itemSize: String, enableStatusCheck: Boolean, @@ -80,6 +84,25 @@ export default { appConfig() { return this.$store.getters.appConfig; }, + accumulatedTarget() { + return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod; + }, + /* Convert config target value, into HTML anchor target attribute */ + anchorTarget() { + const target = this.accumulatedTarget; + switch (target) { + case 'sametab': return '_self'; + case 'newtab': return '_blank'; + case 'parent': return '_parent'; + case 'top': return '_top'; + default: return undefined; + } + }, + /* Get the href value for the anchor, if not opening in modal/ workspace */ + hyperLinkHref() { + const noAnchorNeeded = ['modal', 'workspace']; + return noAnchorNeeded.includes(this.accumulatedTarget) ? '#' : this.url; + }, }, data() { return { @@ -105,10 +128,10 @@ export default { methods: { /* Called when an item is clicked, manages the opening of modal & resets the search field */ itemOpened(e) { - if (e.altKey || this.target === 'modal') { + if (e.altKey || this.accumulatedTarget === 'modal') { e.preventDefault(); this.$emit('triggerModal', this.url); - } else if (this.target === 'workspace') { + } else if (this.accumulatedTarget === 'workspace') { router.push({ name: 'workspace', query: { url: this.url } }); } else { this.$emit('itemClicked'); @@ -151,12 +174,15 @@ export default { classes: `item-description-tooltip tooltip-is-${this.itemSize}`, }; }, - /* Used by certain themes, which display an icon with animated CSS */ + /* Used by certain themes (material), to show animated CSS icon */ getUnicodeOpeningIcon() { - switch (this.target) { + switch (this.accumulatedTarget) { case 'newtab': return '"\\f360"'; case 'sametab': return '"\\f24d"'; + case 'parent': return '"\\f3bf"'; + case 'top': return '"\\f102"'; case 'modal': return '"\\f2d0"'; + case 'workspace': return '"\\f0b1"'; default: return '"\\f054"'; } }, diff --git a/src/components/LinkItems/ItemOpenMethodIcon.vue b/src/components/LinkItems/ItemOpenMethodIcon.vue index 17ce4782a1..b33aa382b5 100644 --- a/src/components/LinkItems/ItemOpenMethodIcon.vue +++ b/src/components/LinkItems/ItemOpenMethodIcon.vue @@ -5,6 +5,9 @@ + + +

{{ hotkey }} @@ -20,11 +23,14 @@ import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg'; import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg'; import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg'; import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg'; +import ParentOpenIcon from '@/assets/interface-icons/open-parent.svg'; +import TopOpenIcon from '@/assets/interface-icons/open-top.svg'; +import UnknownIcon from '@/assets/interface-icons/unknown-icon.svg'; export default { name: 'ItemOpenMethodIcon', props: { - openingMethod: String, // newtab | sametab | modal | workspace + openingMethod: String, // newtab | sametab | parent | top | modal | workspace isSmall: Boolean, // If true, will apply small class position: String, // Position classes: top, bottom, left, right isTransparent: Boolean, // If true, will apply opacity @@ -44,6 +50,9 @@ export default { SameTabOpenIcon, IframeOpenIcon, WorkspaceOpenIcon, + ParentOpenIcon, + TopOpenIcon, + UnknownIcon, }, }; diff --git a/src/utils/ConfigHelpers.js b/src/utils/ConfigHelpers.js index d8ce987f5e..974f9935f7 100644 --- a/src/utils/ConfigHelpers.js +++ b/src/utils/ConfigHelpers.js @@ -7,6 +7,8 @@ import { theme as defaultTheme, language as defaultLanguage, } from '@/utils/defaults'; +import ErrorHandler from '@/utils/ErrorHandler'; +import ConfigSchema from '@/utils/ConfigSchema.json'; /** * Initiates the Accumulator class and generates a complete config object @@ -97,3 +99,17 @@ export const getUsersLanguage = () => { const langObj = languages.find(lang => lang.code === langCode); return langObj; }; + +/** + * validator for item target attribute + * Uses enum values from config schema, and shows warning if invalid + * @param {String} target + * @returns {Boolean} isValid + */ +export const targetValidator = (target) => { + const acceptedTargets = ConfigSchema.properties.sections.items + .properties.items.items.properties.target.enum; + const isTargetValid = acceptedTargets.indexOf(target) !== -1; + if (!isTargetValid) ErrorHandler(`Unknown target value: ${target}`); + return isTargetValid; +}; diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index 3c0651237d..8612ae2feb 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -76,6 +76,18 @@ "default": "default", "description": "Which page to load by default, and on the base page or domain root. You can still switch to different views from within the UI" }, + "defaultOpeningMethod": { + "enum": [ + "newtab", + "sametab", + "parent", + "top", + "modal", + "workspace" + ], + "default": "newtab", + "description": "The default opening method for items. Only used if no item.target is specified" + }, "theme": { "type": "string", "default": "callisto", @@ -554,6 +566,8 @@ "enum": [ "newtab", "sametab", + "parent", + "top", "modal", "workspace" ], diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 1bfe09c4be..b89a64028e 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -139,6 +139,8 @@ module.exports = { metaTagData: [ { name: 'description', content: 'A simple static homepage for you\'re server' }, ], + /* If no 'target' specified, this is the default opening method */ + openingMethod: 'newtab', /* Default option for Toast messages */ toastedOptions: { position: 'bottom-center',