add issn_link widget to application form

DOAJ · Apr 7, 2023 · df578cb · df578cb
1 parent 595794a
commit df578cb
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 4 deletions.
diff --git a/portality/forms/application_forms.py b/portality/forms/application_forms.py
@@ -246,7 +246,8 @@ class FieldDefinitions:
         ],
         "widgets" : [
             "trim_whitespace",  # ~~^-> TrimWhitespace:FormWidget~~
-            "full_contents" # ~~^->FullContents:FormWidget~~
+            "full_contents", # ~~^->FullContents:FormWidget~~
+            "issn_link" # ~~^->IssnLink:FormWidget~~
         ],
         "contexts": {
             "public" : {
@@ -315,7 +316,8 @@ class FieldDefinitions:
         ],
         "widgets" : [
             "trim_whitespace",  # ~~^-> TrimWhitespace:FormWidget~~
-            "full_contents" # ~~^->FullContents:FormWidget~~
+            "full_contents", # ~~^->FullContents:FormWidget~~
+            "issn_link"  # ~~^->IssnLink:FormWidget~~
         ],
         "contexts": {
             "public" : {
@@ -2881,7 +2883,8 @@ def wtforms(field, settings):
     "full_contents" : "formulaic.widgets.newFullContents",  # ~~^->FullContents:FormWidget~~
     "load_editors" : "formulaic.widgets.newLoadEditors",    # ~~-> LoadEditors:FormWidget~~
     "trim_whitespace" : "formulaic.widgets.newTrimWhitespace",  # ~~-> TrimWhitespace:FormWidget~~
-    "note_modal" : "formulaic.widgets.newNoteModal" # ~~-> NoteModal:FormWidget~~
+    "note_modal" : "formulaic.widgets.newNoteModal", # ~~-> NoteModal:FormWidget~~,
+    "issn_link" : "formulaic.widgets.newIssnLink" # ~~-> IssnLink:FormWidget~~,
 }
 
 

diff --git a/portality/static/js/formulaic.js b/portality/static/js/formulaic.js
@@ -2045,6 +2045,64 @@ var formulaic = {
             };
 
             this.init()
-        }
+        },
+        newIssnLink : function(params) {
+            return edges.instantiate(formulaic.widgets.IssnLink, params)
+        },
+        IssnLink : function(params) {
+            this.fieldDef = params.fieldDef;
+            this.form = params.formulaic;
+            this.issn = params.issn;
+
+            this.ns = "formulaic-issnlink";
+
+            this.link = false;
+            this.url = "https://portal.issn.org/resource/ISSN/";
+
+            this.init = function() {
+                var elements = this.form.controlSelect.input(
+                    {name: this.fieldDef.name});
+                edges.on(elements, "keyup.IssnLink", this, "updateUrl");
+
+                for (var i = 0; i < elements.length; i++) {
+                    this.updateUrl(elements[i]);
+                }
+            };
+
+            this.updateUrl = function(element) {
+                var that = $(element);
+                var val = that.val();
+                var id = edges.css_id(this.ns, this.fieldDef.name);
+
+                var match = val.match(/[d0-9]{4}-{0,1}[0-9]{3}[0-9xX]{1}/);
+
+                if (val && match) {
+                    if (this.link) {
+                        this.link.text(val);
+                        this.link.attr("href", val);
+                    } else {
+                        var url = this.url + val;
+                        var classes = edges.css_classes(this.ns, "visit");
+                        that.after('<p><small><a id="' + id + '" class="' + classes + '" rel="noopener noreferrer" target="_blank" href="' + url + '">' + url + '</a></small></p>');
+
+                        var selector = edges.css_id_selector(this.ns, this.fieldDef.name);
+                        this.link = $(selector, this.form.context);
+                        var client = new XMLHttpRequest();
+                        client.open("GET", "https://portal.issn.org/resource/ISSN/0000-0000", true);
+                        client.send();
+                        client.onreadystatechange = function() {
+                            if(this.readyState == this.HEADERS_RECEIVED) {
+                                console.log(client.getResponseHeader("Location"));
+                            }
+                        }
+                    }
+                } else if (this.link) {
+                    this.link.remove();
+                    this.link = false;
+                }
+            };
+
+            this.init();
+        },
     }
 };