Merge pull request #530 from IIIF/add_content_state_links

Adding Content State encode

_includes/content-state-viewers.html

@@ -0,0 +1,39 @@
+{% if include.viewers %}
+{% assign viewers = include.viewers | split: "," %}
+{% else %}
+{% assign viewers = page.viewers %}
+{% endif %}
+[JSON-LD]({{ include.iiif-content }}) {% for viewerTxt in viewers %}{% assign viewer = viewerTxt | strip %}| {% include viewer_link.html type=viewer manifest=include.iiif-content class="content-state" %}{% endfor %}
+
+{% if page.code %}
+{% include code_links.html %}
+{% endif %}
+
+<script>
+    function encodeContentState(plainContentState) {
+        let uriEncoded = encodeURIComponent(plainContentState);  // using built in function
+        let base64 = btoa(uriEncoded);                           // using built in function
+        let base64url = base64.replace(/\+/g, "-").replace(/\//g, "_");
+        let base64urlNoPadding = base64url.replace(/=/g, "");
+        return base64urlNoPadding;
+    }
+
+    const links = document.getElementsByClassName("content-state");
+
+    Array.from(links).forEach(link => {
+        link.title = "Generating iiif-content link...."
+        fetch(link.dataset.iiifContent).then(response=> {
+            response.json().then (anno => {
+                const encoded = encodeContentState(JSON.stringify(anno));
+
+                if (/iiif-content=.*&/.test(link.href)){
+                    link.href = link.href.replace(/iiif-content=.*&/, "iiif-content=" + encoded + '&');
+                } else {
+                    link.href = link.href.replace(/iiif-content=.*$/, "iiif-content=" + encoded);
+                }    
+                link.title = "";
+            })
+
+        });
+    });
+</script>

_includes/viewer_link.html

@@ -59,4 +59,4 @@
 {% else %}    
     {% capture default_text %}Unknown Viewer type '{{ include.type}}'{% endcapture %}
     {% capture viewer_url %}{{manifest_url |strip}}{% endcapture %}
-{% endif %}<a href="{{ viewer_url | strip }}" target="_blank">{{ include.text | default: default_text }}</a>
+{% endif %}<a href="{{ viewer_url | strip }}" class="{{ include.class }}" data-iiif-content="{{manifest_url |strip}}" target="_blank">{{ include.text | default: default_text }}</a>

recipe/0485-contentstate-canvas-region/index.md

@@ -70,12 +70,10 @@ Eventually, we can create an anchor tag with the link as the `href` attribute to
 <a href="https://example.org/viewer?iiif-content=JTdCJTIyJTQwY29udGV4dCUyMiUzQSUyMmh0dHAlM0ElMkYlMkZpaWlmLmlvJTJGYXBpJTJGcHJlc2VudGF0aW9uJTJGMyUyRmNvbnRleHQuanNvbiUyMiUyQyUyMmlkJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZleGFtcGxlLm9yZyUyRmltcG9ydCUyRjElMjIlMkMlMjJ0eXBlJTIyJTNBJTIyQW5ub3RhdGlvbiUyMiUyQyUyMm1vdGl2YXRpb24lMjIlM0ElNUIlMjJjb250ZW50U3RhdGUlMjIlNUQlMkMlMjJ0YXJnZXQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGaWlpZi5pbyUyRmFwaSUyRmNvb2tib29rJTJGcmVjaXBlJTJGMDAwOS1ib29rLTElMkZjYW52YXMlMkZwMiUyM3h5d2glM0QxNTI4JTJDMzAyNCUyQzM0NCUyQzQwOCUyMiUyQyUyMnR5cGUlMjIlM0ElMjJDYW52YXMlMjIlMkMlMjJwYXJ0T2YlMjIlM0ElNUIlN0IlMjJpZCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGaWlpZi5pbyUyRmFwaSUyRmNvb2tib29rJTJGcmVjaXBlJTJGMDAwOS1ib29rLTElMkZtYW5pZmVzdC5qc29uJTIyJTJDJTIydHlwZSUyMiUzQSUyMk1hbmlmZXN0JTIyJTdEJTVEJTdEJTdE">Link for visualizing the region of a Canvas using a viewer.</a>
 ```
 
-{% include manifest_links.html viewers="UV, Mirador, Curation" manifest="annotation.json" %}
+{% include content-state-viewers.html iiif-content="annotation.json" viewers="Mirador, Clover" %}
 
 {% include jsonviewer.html src="annotation.json" %}
 
-
-
 ## Related Recipes
 
 * [Simplest Manifest - Image][0001] shows the basic structure of a IIIF Manifest using presentation API 3.0.