[oer-schema] Migrate embedded vocab to v1.2.0 + wire pedagogical elements to emit OER Schema

elements/a11y-media-player/a11y-media-player.js

@@ -6,6 +6,7 @@ import { LitElement, html, css } from "lit";
 import { DDD } from "@haxtheweb/d-d-d/d-d-d.js";
 import { FullscreenBehaviors } from "@haxtheweb/fullscreen-behaviors/fullscreen-behaviors.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
+import { SchemaBehaviors } from "@haxtheweb/schema-behaviors/schema-behaviors.js";
 import "@haxtheweb/anchor-behaviors/anchor-behaviors.js";
 import "@haxtheweb/responsive-utility/responsive-utility.js";
 import { normalizeEventPath } from "@haxtheweb/utils/lib/events.js";
@@ -105,7 +106,7 @@ import "./lib/a11y-media-youtube.js";
   * @demo ./demo/audio.html audio demo
   * @demo ./demo/youtube.html YouTube demo
   */
-class A11yMediaPlayer extends I18NMixin(FullscreenBehaviors(DDD)) {
+class A11yMediaPlayer extends SchemaBehaviors(I18NMixin(FullscreenBehaviors(DDD))) {
   //styles function
   static get styles() {
     return [
@@ -931,7 +932,9 @@ class A11yMediaPlayer extends I18NMixin(FullscreenBehaviors(DDD)) {
 
   // render function
   render() {
-    return html` <div class="sr-only" ?hidden="${!this.mediaCaption}">
+    return html` <meta property="oer:name" content="${this.mediaTitle}" />
+      <meta property="oer:uri" content="${this.source}" />
+      <div class="sr-only" ?hidden="${!this.mediaCaption}">
         ${this.mediaCaption}
       </div>
       <div id="player-section">
@@ -3526,6 +3529,7 @@ class A11yMediaPlayer extends I18NMixin(FullscreenBehaviors(DDD)) {
     if (super.firstUpdated) {
       super.firstUpdated(changedProperties);
     }
+    this.setAttribute("typeof", "oer:MediaObject");
     this.style.setProperty(
       "--a11y-media-transcript-max-height",
       this.height ? "146px" : "unset",

elements/ai-usage-license/ai-usage-license.js

@@ -5,6 +5,7 @@
 import { LitElement, html, css } from "lit";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
+import { SchemaBehaviors } from "@haxtheweb/schema-behaviors/schema-behaviors.js";
 
 /**
  * `ai-usage-license`
@@ -13,7 +14,7 @@ import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
  * @demo index.html
  * @element ai-usage-license
  */
-class AiUsageLicense extends I18NMixin(DDDSuper(LitElement)) {
+class AiUsageLicense extends SchemaBehaviors(I18NMixin(DDDSuper(LitElement))) {
   /**
    * LitElement constructable styles enhancement
    */
@@ -68,8 +69,16 @@ class AiUsageLicense extends I18NMixin(DDDSuper(LitElement)) {
     ]
   }
 
+  firstUpdated(changedProperties) {
+    if (super.firstUpdated) {
+      super.firstUpdated(changedProperties);
+    }
+    this.setAttribute("typeof", "oer:SupportingMaterial");
+  }
+
   render() {
     return html`
+      <meta property="oer:uri" content="${this.uri || this.licenseLink}" />
       <div class="license-body">
         ${this.licenseImage
           ? html`
@@ -159,6 +168,16 @@ class AiUsageLicense extends I18NMixin(DDDSuper(LitElement)) {
         type: String,
         attribute: "license-tag",
       },
+      /**
+       * OER Schema: URI for the AI Usage License (AIUL) reference page/code.
+       * Falls back to licenseLink when not explicitly set.
+       * NOTE: The v1.2.0 aiUsageConstraint property (domain [Task]) is not
+       * emitted here because this element is a SupportingMaterial badge,
+       * not a Task. aiUsageConstraint resolves once the vocab is integrated.
+       */
+      uri: {
+        type: String,
+      },
     }
   }
 
@@ -171,6 +190,7 @@ class AiUsageLicense extends I18NMixin(DDDSuper(LitElement)) {
     this.licenseLink = null;
     this.licenseDescription = null;
     this.licenseTag = null;
+    this.uri = null;
     this.__aiulDataPromise = null;
     this._setAIULData();
   }
@@ -217,6 +237,9 @@ class AiUsageLicense extends I18NMixin(DDDSuper(LitElement)) {
   }
 
   updated(changedProperties) {
+    if (super.updated) {
+      super.updated(changedProperties);
+    }
     changedProperties.forEach((oldValue, propName) => {
       if (propName === "license" || propName === "modifier") {
         this._licenseUpdated(this.license, this.modifier);
@@ -290,6 +313,13 @@ class AiUsageLicense extends I18NMixin(DDDSuper(LitElement)) {
             },
             icon: "image:photo",
           },
+          {
+            property: "uri",
+            title: "AIUL URI (OER Schema)",
+            description:
+              "OER Schema: URI for the AI Usage License reference page. Auto-populated from the license link when not set.",
+            inputMethod: "textfield",
+          },
         ],
         advanced: [],
       },

elements/bibliography-builder/bibliography-builder.js

@@ -3,6 +3,7 @@
  * @license Apache-2.0, see LICENSE for full text.
  */
 import { LitElement, html, css, render } from "lit";
+import { SchemaBehaviors } from "@haxtheweb/schema-behaviors/schema-behaviors.js";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
 import "@haxtheweb/simple-modal/simple-modal.js";
@@ -17,7 +18,9 @@ import "./lib/bibliography-item.js"
  * @demo index.html
  * @element bibliography-builder
  */
-export class BibliographyBuilder extends DDDSuper(I18NMixin(LitElement)) {
+export class BibliographyBuilder extends SchemaBehaviors(
+  DDDSuper(I18NMixin(LitElement)),
+) {
 
   static get tag() {
     return "bibliography-builder";
@@ -26,6 +29,7 @@ export class BibliographyBuilder extends DDDSuper(I18NMixin(LitElement)) {
   constructor() {
     super();
     this.title = "";
+    this.forCourse = "";
     this.t = this.t || {};
     this.t = {
       ...this.t,
@@ -49,7 +53,8 @@ export class BibliographyBuilder extends DDDSuper(I18NMixin(LitElement)) {
       ...super.properties,
       title: { type: String },
       exportMode: { type: String, attribute: "export-mode" },
-      citationArr: { type: Array, attribute: "citation-array" }
+      citationArr: { type: Array, attribute: "citation-array" },
+      forCourse: { type: String, attribute: "for-course" }
     };
   }
 
@@ -86,7 +91,8 @@ export class BibliographyBuilder extends DDDSuper(I18NMixin(LitElement)) {
   // Lit render the HTML
   render() {
     return html`
-    <div class="wrapper">
+    <div class="wrapper" typeof="oer:LearningComponent">
+      <meta property="oer:forCourse" content="${this.forCourse}" />
       <div class="title-card">
         <h3><span>${this.t.title}:</span> ${this.title}</h3>
         <button id="export-button" @click=${this._showExportModal}>Export</button>

elements/bibliography-builder/lib/bibliography-builder.haxProperties.json

@@ -25,6 +25,13 @@
         "title": "Citations",
         "description": "Citation items in this bibliography",
         "inputMethod": "code-editor"
+      },
+      {
+        "property": "forCourse",
+        "title": "Course",
+        "description": "Identifier or name of the Course this bibliography is for (OER Schema forCourse).",
+        "inputMethod": "textfield",
+        "icon": "link"
       }
     ]
   },

elements/bibliography-builder/lib/bibliography-item.js

@@ -3,6 +3,7 @@
  * @license Apache-2.0, see LICENSE for full text.
  */
 import { LitElement, html, css, render } from "lit";
+import { SchemaBehaviors } from "@haxtheweb/schema-behaviors/schema-behaviors.js";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
 import "@haxtheweb/simple-icon/lib/simple-icons.js";
@@ -15,7 +16,9 @@ import "@haxtheweb/hax-iconset/lib/simple-hax-iconset.js";
  * @demo index.html
  * @element bibliography-item
  */
-export class BibliographyItem extends DDDSuper(I18NMixin(LitElement)) {
+export class BibliographyItem extends SchemaBehaviors(
+  DDDSuper(I18NMixin(LitElement)),
+) {
 
   static get tag() {
     return "bibliography-item";
@@ -89,7 +92,8 @@ export class BibliographyItem extends DDDSuper(I18NMixin(LitElement)) {
   // Lit render the HTML
   render() {
     return html`
-    <div class="wrapper">
+    <div class="wrapper" typeof="oer:ReferencedMaterial">
+        <meta property="oer:uri" content="${this.url}" />
         <div class="citation">${this.exportAPA()}</div>
         <div class="copy-button">
             <simple-icon-button-lite
@@ -233,12 +237,12 @@ export class BibliographyItem extends DDDSuper(I18NMixin(LitElement)) {
   exportAPA(){
     switch(this.citationType) {
       case "journal":
-        return html`${this._formatAuthors()} ${this._formatDate().getPubYear()}. ${this.title}. <i>${this.publisher}</i>, ${this._formatSource().getJournalSource("APA")}. ${this.url}`;
+        return html`${this._formatAuthors()} ${this._formatDate().getPubYear()}. <span property="oer:name">${this.title}</span>. <i>${this.publisher}</i>, ${this._formatSource().getJournalSource("APA")}. ${this.url}`;
       case "book":
-        return html`${this._formatAuthors()} ${this._formatDate().getPubYear()}. <i>${this.title}</i> ${this._formatSource().getBookSource("APA")}. ${this.publisher}. ${this.url}`
+        return html`${this._formatAuthors()} ${this._formatDate().getPubYear()}. <i property="oer:name">${this.title}</i> ${this._formatSource().getBookSource("APA")}. ${this.publisher}. ${this.url}`
       case "web":
       default:
-        return html`${this._formatAuthors()} ${this._formatDate().getFullPubDate()}. <i>${this.title}</i>. ${this.publisher}. ${this.url}`
+        return html`${this._formatAuthors()} ${this._formatDate().getFullPubDate()}. <i property="oer:name">${this.title}</i>. ${this.publisher}. ${this.url}`
     }
   }
 

elements/career-timeline/career-timeline.js

@@ -5,6 +5,7 @@
 import { LitElement, html, css } from "lit";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
 import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
+import { SchemaBehaviors } from "@haxtheweb/schema-behaviors/schema-behaviors.js";
 import "./lib/career-org-item.js";
 
 /**
@@ -13,7 +14,7 @@ import "./lib/career-org-item.js";
  * @demo index.html
  * @element career-timeline
  */
-export class CareerTimeline extends DDDSuper(I18NMixin(LitElement)) {
+export class CareerTimeline extends SchemaBehaviors(DDDSuper(I18NMixin(LitElement))) {
 
   static get tag() {
     return "career-timeline";
@@ -59,9 +60,17 @@ export class CareerTimeline extends DDDSuper(I18NMixin(LitElement)) {
     `];
   }
 
+  firstUpdated(changedProperties) {
+    if (super.firstUpdated) {
+      super.firstUpdated(changedProperties);
+    }
+    this.setAttribute("typeof", "oer:LearningComponent");
+  }
+
   // Lit render the HTML
   render() {
     return html`
+      <meta property="oer:name" content="${this.title}" />
       <div class="wrapper">
         <slot></slot>
       </div>

elements/career-timeline/lib/career-timeline.haxProperties.json

@@ -24,7 +24,14 @@
     }
   },
   "settings": {
-    "configure": []
+    "configure": [
+      {
+        "property": "title",
+        "title": "Timeline Title",
+        "description": "A title for the career timeline (OER Schema: oer:name).",
+        "inputMethod": "textfield"
+      }
+    ]
   },
   "saveOptions": {
     "wipeSlot": false,

elements/citation-element/citation-element.js

@@ -60,9 +60,10 @@ class CitationElement extends SchemaBehaviors(DDDSuper(LitElement)) {
       <meta
         about="${this.relatedResource}"
         property="cc:attributionName"
-        typeof="oer:Text"
+        typeof="${this.typeof}"
         content="${this.title}"
       />
+      <meta about="${this.relatedResource}" property="oer:uri" content="${this.source}" />
       <meta
         rel="cc:license"
         href="${this.licenseLink}"
@@ -74,6 +75,8 @@ class CitationElement extends SchemaBehaviors(DDDSuper(LitElement)) {
           rel="noopener noreferrer"
           class="license-link"
           href="${this.source}"
+          property="oer:name"
+          content="${this.title}"
           >${this.title}</a
         >
         by
@@ -111,6 +114,7 @@ class CitationElement extends SchemaBehaviors(DDDSuper(LitElement)) {
     super();
     this.scope = "sibling";
     this.source = "";
+    this.typeof = "oer:ReferencedMaterial";
   }
   /**
    * LitElement properties changed
@@ -199,6 +203,13 @@ class CitationElement extends SchemaBehaviors(DDDSuper(LitElement)) {
       license: {
         type: String,
       },
+      /**
+       * OER Schema class for the cited work (default oer:ReferencedMaterial).
+       * Authors can override via the HAX editor to use a more specific OER class.
+       */
+      typeof: {
+        type: String,
+      },
     };
   }
   /**
@@ -360,6 +371,14 @@ class CitationElement extends SchemaBehaviors(DDDSuper(LitElement)) {
             inputMethod: "textfield",
             icon: "link",
           },
+          {
+            property: "typeof",
+            title: "OER Schema type",
+            description:
+              "OER Schema class for this citation. Defaults to oer:ReferencedMaterial; override only with a valid OER class (e.g. oer:SupportingMaterial).",
+            inputMethod: "textfield",
+            icon: "code",
+          },
         ],
         advanced: [],
       },