🔀 Merge pull request gchq#292 from Lissy93/FEATURE/advanced-item-targets

[FEATURE] Improved Item Opening Method Options
Fixes gchq#289

.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

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`.
 

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`.
 
 <p align="center">

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`

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 <kbd>Tab</kbd> to cycle through results, and <kbd>Shift</kbd> + <kbd>Tab</kbd> to go backwards. Or use the arrow keys, <kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd> and <kbd>←</kbd>.
 
 ## Launching Apps
-You can launch a elected app by hitting <kbd>Enter</kbd>. This will open the app using your default opening method, specified in `target` (either `newtab`, `sametab`, `modal` or `workspace`). You can also use <kbd>Alt</kbd> + <kbd>Enter</kbd> to open the app in a pop-up modal, or <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 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 <kbd>Enter</kbd>. This will open the app using your default opening method, specified in `target` (either `newtab`, `sametab`, `modal`, `top` or `workspace`). You can also use <kbd>Alt</kbd> + <kbd>Enter</kbd> to open the app in a pop-up modal, or <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 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. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "license": "MIT",
   "main": "server",
   "scripts": {

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) {

src/components/LinkItems/Item.vue

@@ -3,8 +3,8 @@
     <a @click="itemOpened"
       @mouseup.right="openContextMenu"
       @contextmenu.prevent
-      :href="(target !== 'modal' && target !== 'workspace') ? url : '#'"
-      :target="target === 'newtab' ? '_blank' : ''"
+      :href="hyperLinkHref"
+      :target="anchorTarget"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer" tabindex="0"
@@ -21,7 +21,7 @@
         v-bind:style="customStyles" class="bounce" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon || itemSize === 'small'"
-        :openingMethod="target"  position="bottom right"
+        :openingMethod="accumulatedTarget"  position="bottom right"
         :hotkey="hotkey" />
       <!-- Status indicator dot (if enabled) showing weather srevice is availible -->
       <StatusIndicator
@@ -49,7 +49,12 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
 import ContextMenu from '@/components/LinkItems/ContextMenu';
-import { localStorageKeys, serviceEndpoints } from '@/utils/defaults';
+import {
+  localStorageKeys,
+  serviceEndpoints,
+  openingMethod as defaultOpeningMethod,
+} from '@/utils/defaults';
+import { targetValidator } from '@/utils/ConfigHelpers';
 
 export default {
   name: 'Item',
@@ -66,8 +71,7 @@ export default {
     hotkey: Number, // Shortcut for quickly launching app
     target: { // Where resource will open, either 'newtab', 'sametab' or 'modal'
       type: String,
-      default: 'newtab',
-      validator: (value) => ['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"';
       }
     },

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -5,6 +5,9 @@
       <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
       <IframeOpenIcon v-else-if="openingMethod === 'modal'" />
       <WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
+      <ParentOpenIcon v-else-if="openingMethod === 'parent'" />
+      <TopOpenIcon v-else-if="openingMethod === 'top'" />
+      <UnknownIcon v-else />
     </div>
     <div v-if="hotkey" :class="`hotkey-denominator ${makeClass(position, isSmall, isTransparent)}`">
       {{ 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,
   },
 };
 </script>

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;
+};

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"
                   ],

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',