minor changes according to dta integration

DARIAH-DE · Apr 21, 2017 · ca946bd · ca946bd
1 parent 53a4b17
commit ca946bd
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/data.html b/data.html
@@ -15,7 +15,7 @@ <h4>About</h4>
         <p>If you want to be able to annotate your own documents or data from a
             different repository, feel free to contribute to our source code
             on <a class="alert-link" href="https://github.com/DARIAH-DE/eXanore-viewer/">GitHub</a>
-            by adding a <a class="alert-link" href="https://github.com/DARIAH-DE/eXanore-viewer/blob/ec29c54890264394c6bfa27b17b4539cb244cffe/modules/customElements.xqm#L8">
+            by adding a <a class="alert-link" href="https://github.com/DARIAH-DE/eXanore-viewer/blob/master/modules/customElements.xqm#L12">
             URL schema</a> to access the data and a corresponding CSS.</p>
     </div>
 
@@ -36,5 +36,33 @@ <h4>About</h4>
                 elementMouseIsOver = document.elementFromPoint(x, y);
             $("#info").text( $( elementMouseIsOver ).attr("data-info") );
         });
+
+        // Create a class for the element
+        class TEIgraphic extends HTMLElement {
+          constructor() {
+            // Always call super first in constructor
+            super();
+
+            // Create a shadow root
+            var shadow = this.attachShadow({mode: 'open'});
+
+            // Create a standard img element and set it's attributes.
+            var img = document.createElement('img');
+            img.alt = "tei-graphic";
+            img.src = "https://textgridlab.org/1.0/digilib/rest/IIIF/" + this.getAttribute('url') + "/full/,400/0/native.jpg";
+     //       teiwidth = this.getAttribute('width');
+    //        img.width = teiwidth.substr(0, teiwidth.indexOf("px") );
+   //         img.height = '400';
+            img.className = 'tei-graphic';
+
+            // Add the image to the shadow root.
+            shadow.appendChild(img);
+            // we should add a link to image annotation!
+          }
+        }
+
+        // Define the new element
+        customElements.define('tei-graphic', TEIgraphic);
+
     </script>
 </div>
diff --git a/resources/css/tei.css b/resources/css/tei.css
@@ -332,6 +332,7 @@ TEI-formula {
   font-style: italic;
 }
 TEI-front {
+  color: grey;
   display: block;
   margin-bottom: 1em;
   padding-top: 0.5em;
@@ -439,8 +440,9 @@ TEI-body > TEI-div > TEI-div > TEI-div > TEI-head:before {
 }
 TEI-hi {
   display: inline;
-  background-color:yellow;
-  color: black;
+  font-style:italic;
+ /* background-color: yellow; */
+ /*  color: black; */
 }
 
 TEI-hi[rend] {