@ucd-lib/theme-elements 0.0.16 → 0.0.17

package/.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "ignorePatterns" : ["*.tpl.js"]
+  "ignorePatterns" : ["*.tpl.js"],
+  "globals": {
+    "UCD_LIB_THEME_LOADER" : "readonly",
+    "WebComponents" : "readonly"
+  }
 }

package/brand/ucd-theme-subnav/ucd-theme-subnav.js

@@ -149,7 +149,6 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
    * @description Fires an 'item-click' event
    * @param {Object} item - The link item
    * @param {Array} location - The link location in links array
-   * @returns 
    */
   _dispatchItemClick(item, location){
     if (item.href) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -9,9 +9,12 @@
   "author": "jrmerz@ucdavis.edu",
   "license": "MIT",
   "dependencies": {
+    "@lit-labs/task": "^1.0.0",
     "@ucd-lib/theme-sass": "^5.0.15",
+    "dompurify": "^2.3.6",
     "ip-cidr": "^3.0.4",
     "lit": "^2.0.2",
+    "marked": "^4.0.14",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"
   }

package/ucdlib/ucdlib-md/ucdlib-md-content.js

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { MutationObserverController } from '../../utils/controllers';
+
+/**
+ * @class UcdlibMdContent
+ * @classdesc Component class for declaritively wrapping markdown and translating into sanitized html
+*/
+export default class UcdlibMdContent extends LitElement {
+
+  static get properties() {
+    return {};
+  }
+  
+  mutationObserver = new MutationObserverController(this, { characterData: true, attributes: false, childList: true, subtree: true });
+
+  constructor() {
+    super();
+  }
+
+  createRenderRoot() {
+    this.style.display = 'none';
+    return this;
+  }
+
+  _onChildListMutation() {
+    // send event to ucdlib-md
+    this.dispatchEvent(new CustomEvent('content-updated', { bubbles: true }));
+  }
+}
+
+customElements.define('ucdlib-md-content', UcdlibMdContent);

package/ucdlib/ucdlib-md/ucdlib-md.js

@@ -0,0 +1,120 @@
+import { LitElement, css } from 'lit';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { UcdlibMdContent } from './ucdlib-md-content.js';
+import { MutationObserverController } from '../../utils/controllers/mutation-observer.js';
+
+/**
+ * @class UcdlibMd
+ * @classdesc Component class for translating/displaying markdown into sanitized html
+ * @property {String} data - text to hold markdown code
+ * @property {Object} renderer - an object holding element functions to override the default markdown behavior 
+ *  Format: reference the Marked Renderer documentation at https://marked.js.org/using_pro#renderer
+ * @property {Object} use - marked use object
+ * @property {Object} options - marked options object
+*/
+export default class UcdlibMd extends LitElement {
+
+  static get properties() {
+    return {
+      // ignore: {type: String},
+      // exclude: {type: String},
+      // subset: {type: String},
+      data: {type: String},
+      renderer: {type: Object},
+      use: {type: Object},
+      options: {type: Object}
+    };
+  }
+
+  mutationObserver = new MutationObserverController(this, { characterData: true, attributes: false, childList: true, subtree: true });
+  
+  constructor() {
+    super();
+    this.data = '';
+    this.renderer = null;
+
+    this.renderedElement = document.createElement('div');
+    this.renderedElement.setAttribute('rendered', '');
+  }
+
+  createRenderRoot() {
+    this.appendChild(this.renderedElement);
+    return this;
+  }
+
+  _onChildListMutation() {
+    if( this.contentElement ) return;
+
+    // query children for ucdlib-md-content
+    // wire up listener if it exists
+    this.contentElement = this.querySelector('ucdlib-md-content');
+    if( this.contentElement ) {
+      this.contentElement.addEventListener('content-updated', this._updateFromContentElementMd.bind(this));
+    }
+  }
+
+  disconnectedCallback() {
+    if( this.contentElement ) {
+      this.contentElement.removeEventListener('content-updated', this._updateFromContentElementMd.bind(this));
+    }
+  }
+
+  /**
+   * @method updated
+   * @description Lit method called when element is updated.
+   */
+  updated() {
+    // config markdown renderer so elements are correctly styled
+    this._setRendererOverrides();
+  
+    // update markdown data with the latest, either when the content changes or data property is updated
+    this.data = DOMPurify.sanitize(marked.parse(this.data));
+    this.renderedElement.innerHTML = this.data;
+  }
+
+  /**
+   * @method _updateFromContentElementMd
+   * @description Updates the local data property with the text from the ucdlib-md-content element (if it exists)
+   * @private
+   */
+  _updateFromContentElementMd() {
+    // remove whitespace between lines
+    this.data = this.contentElement.innerText.split('\n').map(line => line.trim()).join('\n');
+  }
+  
+  /**
+   * @method _setRendererOverrides
+   * @description Updates the marked package renderer overrides to customize how element types are rendered
+   * @private
+   */
+  _setRendererOverrides() {
+    if (!this.renderer) {
+      this.renderer = {
+        list(body, ordered, start) {
+          let renderedContent = '';
+          if (ordered) {
+            renderedContent = `<ul class="list--multilevel">${body}</ul>`;
+          } else {
+            renderedContent = `<ul class="list--bordered">${body}</ul>`;
+          }
+          return renderedContent;
+        }
+      };
+    }
+
+    if (!this.options) {
+      this.options = { breaks: true, gfm: true };
+    }
+
+    if (!this.use) {
+      this.use = { renderer: this.renderer };
+    }
+
+    marked.use(this.use);
+    marked.setOptions(this.options);
+  }
+
+}
+
+customElements.define('ucdlib-md', UcdlibMd);

package/ucdlib/ucdlib-sils-permalink/README.md

@@ -0,0 +1,22 @@
+# SILS Permalink
+
+Allows users to easily add links to SILS permalinks in webpages.
+
+## Inline Version
+
+By default add simple links to the pages.  If you identified a tag inline like
+`<ucdlib-sils-permalink
+href="https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126"/>`,
+then the link would format as something like
+
+ * [Engineering victory : the Union siege of
+   Vicksburg](https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126)
+
+For more citation information, we'd could add
+
+*  `<ucdlib-sils-permalink href=".." cite="full" />` => [Solonick, Justin
+   S. Engineering Victory : the Union Siege of Vicksburg . Carbondale: Southern
+   Illinois University
+   Press, 2015. Print.](https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126)
+
+## Expanded Version

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink-controller.js

@@ -0,0 +1,36 @@
+import {Task} from '@lit-labs/task';
+
+export class PermalinkController {
+//   host;
+//   value;
+//   kinds = Names.kinds;
+//   task;
+  constructor(host, url) {
+    const baseUrl = url;
+    this.url = baseUrl;
+    this.host = host;
+    this.task = new Task(
+      this.host,
+      async () => {
+        const response = await fetch(`${baseUrl}`);
+        const result = await response.json();
+        const error = result.error;
+        if (error !== undefined) {
+          throw new Error(error);
+        }
+        return result;
+      },
+        
+      () => [this.url]
+    );
+
+  }
+
+
+  render(renderFunctions) {
+    return this.task.render(renderFunctions);
+  }
+
+
+
+}

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink.js

@@ -0,0 +1,322 @@
+import { LitElement} from 'lit';
+import {render, styles} from "./ucdlib-sils-permalink.tpl.js";
+import {PermalinkController} from './ucdlib-sils-permalink-controller.js';
+
+/**
+ * @class UcdlibSilsPermalink
+ * @description This component allows you to easily add individual objects from
+ * the UC SILS catalog into your webpage.
+ * @property {String} href - Pointer to the permalink
+ * @property {String} cite - Specify the citation style
+ *
+ * <ucdlib-sils-permalink href="https://search.library.ucdavis.edu/permalink/01UCD_INST/1uov27j/alma9981249369903126"/>
+ */
+
+export default class UcdlibSilsPermalink extends LitElement {
+  static get properties() {
+    return {
+      results : {type: Object, attribute:false},
+      permalink : {type: String},
+      image : {type: String},
+      title : {type: String},
+      authorFull : {type: String},
+      authorLast : {type: String, attribute:false},
+      authorFirst: {type: String, attribute:false},
+      authorID: {type: Array, attribute:false},
+      year : { type: String},
+      summary : {type: String},
+      tags : {type: Array},
+      host_url : {type: String},
+      teaserType : {type: String, attribute:false},
+      publisher : {type: String, attribute:false},
+      placePublication : {type: String, attribute:false},
+      notes : {type: Array, attribute:false},
+      language: {type: String, attribute:false},
+      randomClass: {type: String, attribute:false},
+      elemClass: {type: Array, attribute:false},
+      url: {type: String, attribute:false},
+      form: {type: Boolean, attribute:false},
+      isCustom: {type:Boolean},
+      index: {type:Number},
+      newPermalink: {type: Array, hasChanged(newVal, oldVal) {
+        return newVal !== oldVal;
+      }, attribute:false},
+
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.PENDING = false;
+    this.LOADING = false;
+    this.COMPLETE = false;
+    this.ERROR = false;
+    this.results = {};
+    this.loading = false;
+    this.resultsPerPage = 9999;
+    this.page = 1;
+    this.permalink = ''; 
+    this.authorLast = '';
+    this.authorFirst = '';
+    this.authorFull = '';
+    this.title = '';
+    this.year = '';
+    this.summary= '';
+    this.host_url= '';
+    this.tags = [];
+    this.authorID = [];
+    this.teaserType = '';
+    this.publisher = '';
+    this.placePublication = '';
+    this.notes = [];
+    this.language = '';
+    this.randomClass = '';
+    this.elemClass = ['tahoe', 'california', 'quad'];
+    this.image = '';
+    this.url = '';
+    this.isCustom = false;
+    this.newPermalink = [];
+    this.form = false;
+    this.index = 0;
+    this.tagEntryField = [{url: '', label: '', default: true}];
+    this.authorEntryField = [{value: '', default: true}];
+    this.errorMessage = 'Href is not a permalink.';
+    this.render=render.bind(this);
+
+  }
+  
+    /**
+   * @method firstUpdated
+   * 
+   * @description updated when the page first renders
+   * 
+   * @param {Object} changedProperties 
+   * 
+   */  
+  firstUpdated(changedProperties){
+    if(this.permalink != ''){
+       this.perma = new PermalinkController(this, this._requestUrl());
+       this.requestUpdate();
+    }
+  }
+
+
+
+  
+
+  validationLink(url){
+    // let match = url.match(/([^\/]+)([a-z0-9]+)$/g);
+
+    // let id = url.includes("/9fle3i/") ? 'L' : url.includes("/1hjlc2p/") ? 'PC' : 'Error';
+    // if(url.match(/https:\/\/search.library.ucdavis.edu\/permalink\/01UCD_INST\/([^\/]+)\/([a-zA-Z0-9_]*)/g)){
+    //   url = 'https://search.library.ucdavis.edu/primaws/rest/pub/pnxs/' + id + '/' + match[0] +'?vid=01UCD_INST:UCD&lang=en&search_scope=DN_and_CI';
+    //   return url;
+    // }
+    let id;
+    if(url != "") id = url.split("/alma")[1];
+
+    url = "https://open-na.hosted.exlibrisgroup.com/alma/01UCD_INST/bibs/" + id;
+
+    
+    return url;
+  }
+
+  _onPending(){
+    this.PENDING = true;
+  }
+ 
+
+  _onError(e){
+    this.ERROR = true;
+    console.log("Error:", e);
+  }
+
+  handleEdit() {
+    this.form = true;
+
+    this.requestUpdate();
+
+  }
+  handleDelete(){
+    let tempDelete = JSON.parse(sessionStorage.getItem("newPermalink"));
+
+    delete tempDelete[this.index];
+    tempDelete = Object.fromEntries(Object.entries(tempDelete).filter(([_, v]) => v != null));
+
+    this.requestUpdate;
+    sessionStorage.setItem("newPermalink", JSON.stringify(tempDelete));
+    location.reload();
+  }
+
+
+    /**
+   * @method _addTag
+   * 
+   * @description Bound to click event on website add button.  adds another 
+   * iteration of the element to the DOM and List
+   * 
+   * @param {Object} element 
+   * 
+   */  
+     _addTag(){
+      this.tagEntryField.push({url: '', label: '', default: false});
+      this.requestUpdate();
+    }
+
+  /**
+     * @method _addAuthor
+     * 
+     * @description Bound to click event of add email button.
+     * adds another iteration of the element to the DOM and List
+     * 
+     * @param {Object} element 
+     * 
+     */  
+  _addAuthor(){
+    this.authorEntryField.push({value: '', default: false});
+    this.requestUpdate();
+  }
+
+  /**
+     * @method _sendValues
+     * 
+     * @description Get the values from the form that is given.
+     * 
+     * @param {Object} element 
+     * 
+     */  
+   _sendValues(){
+    let formData = {};
+    let authorList = [];
+    let tagtitle = [];
+    let url = [];
+    let image = [];
+    let tags = [];
+
+    formData.title = this.shadowRoot.getElementById("permalink-title").value;
+    formData.year = this.shadowRoot.getElementById("permalink-date").value;
+    formData.summary = this.shadowRoot.getElementById("permalink-summary").value;
+    formData.image = this.shadowRoot.getElementById("permalink-image").value;
+    formData.permalink = this.shadowRoot.getElementById("permalink-permalink").value;
+
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-author']").values()){
+      authorList.push({"label" : i.value});
+    }
+    formData.author = authorList;
+    
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-image']").values())
+      image.push(i.value);
+    formData.image = image[0];
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-tags ']").values())
+      tagtitle.push(i.value);
+
+    for(let i of this.shadowRoot.querySelectorAll("[id^='permalink-tags-url']").values())
+      url.push(i.value);
+
+    for(let i in tagtitle)
+      tags[i] = {"@id": url[i], "label": tagtitle[i]};
+    formData.tags = tags;
+
+    if(sessionStorage.getItem("newPermalink")){
+      this.newPermalink = JSON.parse(sessionStorage.getItem("newPermalink"));
+      this.newPermalink = Object.values(this.newPermalink);
+
+    }
+
+    this.newPermalink.push(formData);
+    
+    this.form = false;
+
+    this.requestUpdate;
+    sessionStorage.setItem("newPermalink", JSON.stringify(this.newPermalink));
+    location.reload();
+
+
+  }
+
+  getCreatedPermalink(){
+    super.requestUpdate();
+
+    return this.newPermalink;
+  }
+
+
+  _onComplete(results){
+
+    /* Note:
+    ISBN has multiple options so later address which items to pick and whether
+    to use default thumbnail
+    */ 
+
+    this.COMPLETE = true;
+    this.PENDING = false;
+    this.LOADING = false;
+    this.results = results;
+    this.teaserType = this.results["@type"];
+    let img = []; 
+    for(let i = 0; i < this.results.identifier.length; i++){
+      if(this.results.identifier[i]['@type']){
+        if(this.results.identifier[i]['@type'].includes('bibo:isbn'))
+          img = img.concat(this.results.identifier[i].label);
+        if(this.results.identifier[i]['@type'].includes('bibo:ean'))
+          img = img.concat(this.results.identifier[i].label);
+        
+      }
+        
+    }
+    let identifer = img[0];
+
+    if(this.teaserType == 'Video' || this.teaserType == 'Music'){
+      this.image = 'https://syndetics.com/index.php?client=primo&isbn='+ identifer + '/sc.gif';
+    }
+    else{
+      this.image = 'https://syndetics.com/index.php?client=primo&isbn='+ identifer + '/sc.jpg';
+    }
+
+    this.year = this.results.date;
+    this.title = this.results.title.substring(0, this.results.title.lastIndexOf("/"));
+    this.authorFull = !Array.isArray(this.results.creator) ? [this.results.creator] : this.results.creator;
+
+    this.authorLast = this.authorFull[0];
+    this.authorFirst = this.authorFull[1];
+    this.summary = this.results.description;
+    this.publisher = this.results.publisher;
+    this.placePublication = this.results.place_of_publication.split(' ')[0];
+    this.language = this.results.language;
+
+    for (let i = 0; i < Object.keys(this.results.subject).length; i++){
+      this.tags = this.tags.concat({"id": this.results.subject[i]["@id"], "subject": this.results.subject[i]["label"]});
+    }
+    this.tags = this.results.subject;
+
+    this.notes = this.results.note;
+
+  }
+
+
+  _requestUrl(){
+    let url =this.permalink;
+    let validate = this.validationLink(url);
+    if(validate == this.errorMessage)  console.error(url);
+    this.requestUpdate();
+
+    
+    url = validate; 
+    return url;
+  }
+
+  _onLoading(){
+    this.LOADING = true;
+  }
+
+
+}
+
+customElements.define('ucdlib-sils-permalink',UcdlibSilsPermalink);

package/ucdlib/ucdlib-sils-permalink/ucdlib-sils-permalink.tpl.js

@@ -0,0 +1,337 @@
+import { html, css } from 'lit';
+
+import normalizeCss from "@ucd-lib/theme-sass/normalize.css.js";
+import teaserStyles from "@ucd-lib/theme-sass/4_component/_index.css.js";
+import baseStyles from "@ucd-lib/theme-sass/1_base_html/_index.css.js";
+import buttons from "@ucd-lib/theme-sass/2_base_class/_index.css.js";
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    form {
+      width:100%;
+    }
+    #tag {
+      width:75%;
+      display: inline-block;
+    }
+    #tag-color {
+      width:24%;
+      display: inline-block;    
+    }
+    #delete {
+      width:24%;
+      display: inline-block;    
+    }
+    #permalink-author {
+      width:75%;
+      display: inline-block;
+    }
+    #permalink-tags {
+      width:75%;
+      display: inline-block;  
+    }
+    #permalink-tags-url {
+      width:75%;
+      display: inline-block;  
+    }
+
+
+  `;
+
+  return [elementStyles,baseStyles,teaserStyles,normalizeCss, buttons];
+}
+
+export function render() {
+  return html`
+  <style>
+    .vm-teaser__figure.category_loading{
+      background-color:#dcdcdc;
+      height:165px;
+      width:135px;
+    }
+    .load_teaser_a{
+      background-color:#dcdcdc;
+      width: 85%;
+      height:25px;
+    }
+    .load_teaser_b{
+      background-color:#dcdcdc;
+      width: 67%;
+      height:20px;
+    }
+    .load_teaser_c{
+      background-color:#dcdcdc;
+      width: 33.3%;
+      height:18px;
+    }
+  </style>
+  <!-- 
+    Starts the Permalink Fetch
+  -->
+  ${this.perma ? html`
+    ${this.perma.render({
+      complete: (result) => this._onComplete(result),
+      initial: () => this._onLoading(),
+      pending: () => this._onPending(),
+      error: (e) => this._onError(e)
+      })
+    }`:html``
+  }
+
+  <article class="vm-teaser   ">
+  ${!this.LOADING ? html`
+      <!-- 
+        If it is completed permalink fetch
+      -->
+    ${!this.form ? 
+
+      html`
+      <!-- 
+        This is the original permalink read that fires if there is are 
+        attributes added to the permalink.  If the form is not triggered 
+      -->
+
+        <div class="vm-teaser__figure category">
+            <a href="${this.image}"><img src="${this.image}" alt="" class="" width="135" loading="eager" />
+            </a>
+        </div> 
+        <div class="vm-teaser__body">
+        <h3 class="vm-teaser__title"><a href="${this.host_url ? this.host_url : this.permalink}">${this.title}</a></h3>
+
+          <ul class="vm-teaser__byline">
+            <li>
+            
+            ${this.authorFull ? 
+                typeof this.authorFull === 'string' || this.authorFull instanceof String ? 
+                  JSON.parse(this.authorFull).map(author => author["label"] != "" ? html`<span class="byline"> ${author["label"]}.</span>--<br />` : html``)
+                  :this.authorFull.map(author => author["label"] != "" ? html`<span class="byline"> ${author["label"]}.</span>--<br />` : html``)
+              :html``
+            }
+            </li>
+            <li>${this.year}</li>
+          </ul>
+          <ul class="vm-teaser__categories">
+            ${this.tags ? 
+                typeof this.tags === 'string' || this.tags instanceof String ? 
+                  JSON.parse(this.tags).map(tag => html`<li class="vm-teaser__cat-marker tahoe"><a href="${tag['@id']}">${tag['label']}</a></li>`)
+                  :this.tags.map(tag => tag["label"] != "" ? html`<li class="vm-teaser__cat-marker ${this.elemClass[Math.floor(Math.random() * this.elemClass.length)]}"><a href="${tag['@id']}">${tag['label']}</a></li>`:html``)
+              :html``
+            }
+          </ul>
+          <div class="vm-teaser__summary">${this.summary}</div>
+        </div>
+        ${this.isCustom ? html`
+          <button id="delete-permalink" class="btn btn--alt2" @click="${this.handleDelete}">Delete Permalink</button>
+
+        `: html`
+          <button id="edit-permalink" class="btn--primary" @click="${this.handleEdit}">Edit Permalink</button>
+        `}
+ 
+      `:html`     
+      <!-- 
+        This is if the form is triggered meaning the edit permalink is occuring
+        so that it adds to the entries to the session.  Also takes info from what 
+        is already in the permalink.  This is the edit form
+      -->
+        <form method="post">
+        <!-- START OF FORM -->
+
+          <fieldset>
+
+            <!-- Title -->
+            <div class="field-container">
+              <label for="permalink-title">Title</label>
+              <input id="permalink-title" .value=${this.title ? this.title : ""} type="text" placeholder=${this.title ? this.title : "Enter Your Title"} />
+            </div>
+
+            <!-- Host URL -->
+            <div class="field-container">
+              <label for="permalink-permalink">Permalink Host URL</label>
+              <input id="permalink-permalink" .value=${this.permalink ? this.permalink : ""} type="text" placeholder=${this.permalink ? this.permalink : "Enter Your Title"} />
+            </div>
+
+
+            <br />
+            <br />
+            <br />
+
+
+            <!-- Author -->
+            ${this.authorFull ? 
+            html`
+              <!-- If permalink already has authors -->
+              <div class="author">
+                <div style="border-style: solid; margin: 25px 0; padding:5px;">
+                ${this.authorFull.map((author, index) => 
+                  html`
+                  <div class="field-container">
+                        <label for="permalink-author no-${index}">Author</label>
+                        <input id="permalink-author no-${index}" type="author" .value=${author['label']} placeholder="${author['label'].split(",")[0]}, ${author['label'].split(",")[1] ? author['label'].split(",")[1] : ""} " />
+                  </div> `  
+                )}
+                </div>
+                <br />
+                <div>
+
+                  <h5>New Author Entry</h5>
+                  ${this.authorEntryField.map((item, index) =>                
+                    html`
+                      <div class="field-container">
+                          <label for="permalink-author no-${index}">Author</label>
+                          <input id="permalink-author no-${index}" type="author" .value=${item.value} placeholder="Enter the Authors of the Work" />
+                      </div>
+    
+                    `
+                  )}
+                  <a @click="${this._addAuthor}" class="btn--alt3 btn--sm" >Add Author Field</a>
+                </div>
+              </div>
+            `   
+            :html`
+              <!-- If permalink DOES NOT has authors -->
+
+              <div>
+
+                <div class="author">
+                  <br />
+                  <h5>New Author Entry</h5>
+                  ${this.authorEntryField.map((item, index) =>                
+                  html`
+                    <div class="field-container">
+                        <label for="permalink-author no-${index}">Author</label>
+                        <input id="permalink-author no-${index}" type="author" .value=${item.value} placeholder="Enter the Authors of the Work" />
+                    </div>
+    
+                  `
+                  )}
+                  <a @click="${this._addAuthor}" class="btn--alt3 btn--sm" >Add Author Field</a>
+                </div>
+              </div>
+              `}
+
+
+            <br />
+            <br />
+            <br />
+
+            <!-- Year -->
+            <div class="field-container">
+              <label for="permalink-date">Year of Publication</label>
+              <input id="permalink-date" value=${this.year ? this.year : ""}  type="text" placeholder=${this.year ? this.year : "Year of Publication"} />
+            </div>
+
+            <!-- Image -->
+            <div class="field-container">
+              <label for="permalink-image">Image JPEG URL</label>
+              <input id="permalink-image" value=${this.image ? this.image : ""}  type="url" placeholder=${this.year ? this.year : "Year of Publication"} />
+            </div>
+            
+            <br />
+            <br />
+            <br />
+
+            <!-- Tags -->
+            ${this.tags ? 
+            html`
+
+              <!-- If permalink already has Tags -->
+                <div class="tag">
+                  <div style="border-style: solid; margin: 25px 0; padding:5px;">
+                  ${this.tags.map((tag, index)=> 
+                    html`
+                    <div id="tag"  class="field-container">
+                      <label for="permalink-tags no-${index}">Tag</label>
+                      <input id="permalink-tags no-${index}" type="url" .value=${tag['label']} placeholder="${tag['label']}" />
+                    </div>
+
+                    <label for="permalink-tags-url no-${index}">URL</label>
+                    <input id="permalink-tags-url no-${index}" .value=${tag['@id'] ? tag['@id']: ''} type="url" placeholder="${tag['@id'] ? tag['@id']: 'URL Not Defined'}" />
+
+                  <br />
+                  <br />
+                  <br />
+                `
+                )}
+                </div>
+
+              <h5>New Tag Entry</h5>
+                ${this.tagEntryField.map((item, index) =>                
+                  html`
+                    <div class="tag">
+                      <div id="tag" class="field-container">
+                        <label for="permalink-tags no-${index}">Tag</label>
+                        <input id="permalink-tags no-${index}" type="url" .value=${item.label} placeholder="Name Your Permalink Tag" />
+                        <label for="permalink-tags-url no-${index}">URL</label>
+                        <input id="permalink-tags-url no-${index}" .value=${item.url} type="url" placeholder="URL of Permalink Tag" />
+                      </div>
+                    </div>
+                  `
+                )}
+              
+                <br />
+                <a @click="${this._addTag}" id="form-apply"class="btn--alt3 btn--sm">Add Tag Field</a>
+              
+
+            `:html `
+              <!-- If permalink DOES NOT has Tags -->
+              <h5>New Tag Entry</h5>
+                ${this.tagEntryField.map((item, index) =>                
+                html`
+                  <div class="tag">
+                    <div id="tag" class="field-container">
+                      <label for="permalink-tags no-${index}">Tag</label>
+                      <input id="permalink-tags no-${index}" type="url" .value=${item.label} placeholder="Name Your Permalink Tag" />
+                      <label for="permalink-tags-url no-${index}">URL</label>
+                      <input id="permalink-tags-url no-${index}" .value=${item.url} type="url" placeholder="URL of Permalink Tag" />
+                    </div>
+                  </div>
+                `
+            
+                )}
+
+                <br />
+                <a @click="${this._addTag}" id="form-apply"class="btn--alt3 btn--sm">Add Tag Field</a>
+            
+            `}
+
+            <br />
+            <!-- Summary -->
+            <div class="field-container">
+              <label for="permalink-summary">Summary</label>
+              <textarea id="permalink-summary"  .value=${this.summary ? this.summary : ""} rows="5" placeholder=${this.summary ? this.summary : "Write Summary Here"}></textarea>
+            </div>
+
+
+          </fieldset>
+
+          <!-- Apply Button -->
+          <div class="field-container--small views-filters__submit-field">
+            <a @click="${this._sendValues}" class="btn--primary">Apply</a>
+            <a onClick="window.location.reload();" class="btn--alt">Cancel</a>
+          </div>
+
+        <!-- END OF FORM -->
+        </form>   
+      `}
+    `:html`
+      <!-- 
+        If it is in the loading stage of the permalink fetch
+        it will render this
+        look.
+      -->
+      <div class="vm-teaser__figure category_loading"></div>
+      <div class="vm-teaser__body">
+        <div class="load_teaser_a"></div>
+        <br/>
+        <div class="load_teaser_b"></div>
+        <br/>
+        <div class="load_teaser_c"></div>
+        <br/>
+        <div class="load_teaser_c"></div>
+      </div>
+    `}
+</article>
+`;
+}