You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2020/09/16 22:21:55 UTC
[airavata-django-portal] branch
AIRAVATA-3370-new-improvement-clickable-urls-in-the-application updated:
AIRAVATA-3370 Linkify component to find links in text and turn into
hyperlinks
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch AIRAVATA-3370-new-improvement-clickable-urls-in-the-application
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
The following commit(s) were added to refs/heads/AIRAVATA-3370-new-improvement-clickable-urls-in-the-application by this push:
new 31e95c7 AIRAVATA-3370 Linkify component to find links in text and turn into hyperlinks
31e95c7 is described below
commit 31e95c7a6dcd8d75dbb10c19d4d0583cdb31fb4d
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Sep 16 18:21:35 2020 -0400
AIRAVATA-3370 Linkify component to find links in text and turn into hyperlinks
---
.../input-editors/InputEditorFormGroup.vue | 75 +++++++++++++---------
django_airavata/apps/workspace/yarn.lock | 5 ++
.../static/common/js/components/Linkify.vue | 34 ++++++++++
django_airavata/static/common/js/index.js | 4 +-
django_airavata/static/common/package.json | 1 +
django_airavata/static/common/yarn.lock | 5 ++
6 files changed, 91 insertions(+), 33 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorFormGroup.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorFormGroup.vue
index e1d40fc..bb35883 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorFormGroup.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorFormGroup.vue
@@ -1,39 +1,50 @@
<template>
- <b-form-group :label="label" :label-for="labelFor" :state="state" :description="description">
- <slot></slot>
- <template slot="invalid-feedback">
- <ul v-if="feedbackMessages && feedbackMessages.length > 1">
- <li v-for="feedback in feedbackMessages" :key="feedback">{{ feedback }}</li>
- </ul>
- <div v-else-if="feedbackMessages && feedbackMessages.length === 1">
- {{ feedbackMessages[0] }}
- </div>
- </template>
- </b-form-group>
+ <b-form-group
+ :label="label"
+ :label-for="labelFor"
+ :state="state"
+ :description="description"
+ >
+ <slot></slot>
+ <template slot="invalid-feedback">
+ <ul v-if="feedbackMessages && feedbackMessages.length > 1">
+ <li v-for="feedback in feedbackMessages" :key="feedback">
+ {{ feedback }}
+ </li>
+ </ul>
+ <div v-else-if="feedbackMessages && feedbackMessages.length === 1">
+ {{ feedbackMessages[0] }}
+ </div>
+ </template>
+ <linkify slot="description">{{ description }}</linkify>
+ </b-form-group>
</template>
<script>
-
+import { components } from "django-airavata-common-ui";
export default {
- name: 'input-editor-form-group',
- props: {
- label: {
- type: String,
- required: true,
- },
- labelFor: {
- type: String,
- required: true,
- },
- state: {
- type: String,
- },
- feedbackMessages: {
- type: Array,
- },
- description: {
- type: String,
- }
+ name: "input-editor-form-group",
+ props: {
+ label: {
+ type: String,
+ required: true
+ },
+ labelFor: {
+ type: String,
+ required: true
+ },
+ state: {
+ type: String
+ },
+ feedbackMessages: {
+ type: Array
},
-}
+ description: {
+ type: String
+ }
+ },
+ components: {
+ linkify: components.Linkify
+ }
+};
</script>
diff --git a/django_airavata/apps/workspace/yarn.lock b/django_airavata/apps/workspace/yarn.lock
index 2218ae3..877a7d4 100644
--- a/django_airavata/apps/workspace/yarn.lock
+++ b/django_airavata/apps/workspace/yarn.lock
@@ -6121,6 +6121,11 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+linkifyjs@^2.1.9:
+ version "2.1.9"
+ resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
+ integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+
load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
diff --git a/django_airavata/static/common/js/components/Linkify.vue b/django_airavata/static/common/js/components/Linkify.vue
new file mode 100644
index 0000000..1513f1f
--- /dev/null
+++ b/django_airavata/static/common/js/components/Linkify.vue
@@ -0,0 +1,34 @@
+<script>
+import * as linkify from "linkifyjs/";
+
+var getChildrenTextContent = function(children) {
+ return children
+ .map(function(node) {
+ return node.children ? getChildrenTextContent(node.children) : node.text;
+ })
+ .join("");
+};
+
+export default {
+ name: "linkify",
+
+ render: function(createElement) {
+ // Parse the contents of the element for links and turn them into links
+ const tokens = linkify.tokenize(
+ getChildrenTextContent(this.$slots.default)
+ );
+ const children = tokens.map(t => {
+ if (t.isLink) {
+ return createElement(
+ "a",
+ { attrs: { href: t.toHref("https"), target: "_blank" } },
+ t.toString()
+ );
+ } else {
+ return t.toString();
+ }
+ });
+ return createElement("span", null, children);
+ }
+};
+</script>
diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js
index 87ae172..3c960b2 100644
--- a/django_airavata/static/common/js/index.js
+++ b/django_airavata/static/common/js/index.js
@@ -12,6 +12,7 @@ import ExperimentStatusBadge from "./components/ExperimentStatusBadge";
import FavoriteToggle from "./components/FavoriteToggle";
import GatewayGroupsBadge from "./components/GatewayGroupsBadge";
import HumanDate from "./components/HumanDate.vue";
+import Linkify from "./components/Linkify.vue";
import MainLayout from "./components/MainLayout.vue";
import Pager from "./components/Pager.vue";
import ShareButton from "./components/ShareButton.vue";
@@ -53,6 +54,7 @@ const components = {
FavoriteToggle,
GatewayGroupsBadge,
HumanDate,
+ Linkify,
MainLayout,
ShareButton,
Sidebar,
@@ -61,7 +63,7 @@ const components = {
UnsavedChangesGuard,
Uppy,
ValidatedForm,
- ValidatedFormGroup,
+ ValidatedFormGroup
};
const errors = {
diff --git a/django_airavata/static/common/package.json b/django_airavata/static/common/package.json
index 3107c74..a7b5280 100644
--- a/django_airavata/static/common/package.json
+++ b/django_airavata/static/common/package.json
@@ -24,6 +24,7 @@
"clipboard": "^2.0.4",
"django-airavata-api": "link:../../apps/api",
"jquery": "^3.3.1",
+ "linkifyjs": "^2.1.9",
"moment": "^2.24.0",
"popper.js": "^1.14.6",
"terser": "^4.1.2",
diff --git a/django_airavata/static/common/yarn.lock b/django_airavata/static/common/yarn.lock
index 58fe97a..87443a4 100644
--- a/django_airavata/static/common/yarn.lock
+++ b/django_airavata/static/common/yarn.lock
@@ -5147,6 +5147,11 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+linkifyjs@^2.1.9:
+ version "2.1.9"
+ resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
+ integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+
load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"