iiif-viewer-link triggers event

IIIF-Commons · Sep 21, 2018 · a98d909 · a98d909
1 parent cbbe81f
commit a98d909
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 301 deletions.
diff --git a/dist/iiif-metadata-component.bundle.js b/dist/iiif-metadata-component.bundle.js
diff --git a/dist/iiif-metadata-component.d.ts b/dist/iiif-metadata-component.d.ts
@@ -1,4 +1,4 @@
-// iiif-metadata-component v1.1.8 https://github.com/iiif-commons/iiif-metadata-component#readme
+// iiif-metadata-component v1.1.9 https://github.com/iiif-commons/iiif-metadata-component#readme
 
 declare namespace IIIFComponents {
     class StringValue {
@@ -107,5 +107,6 @@ declare namespace IIIFComponents {
 }
 declare namespace IIIFComponents.MetadataComponent {
     class Events {
+        static IIIF_VIEWER_LINK_CLICKED: string;
     }
 }
diff --git a/dist/iiif-metadata-component.js b/dist/iiif-metadata-component.js
@@ -1,4 +1,4 @@
-// iiif-metadata-component v1.1.8 https://github.com/iiif-commons/iiif-metadata-component#readme
+// iiif-metadata-component v1.1.9 https://github.com/iiif-commons/iiif-metadata-component#readme
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifMetadataComponent = f()}})(function(){var define,module,exports;return (function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){
 (function (global){
 
@@ -397,6 +397,13 @@ var IIIFComponents;
             if (this._data.copyToClipboardEnabled && Utils.Clipboard.supportsCopy() && $label.text()) {
                 this._addCopyButton($metadataItem, $label, $values);
             }
+            var that = this;
+            $metadataItem.on('click', 'a.iiif-viewer-link', function (e) {
+                e.preventDefault();
+                var $a = $(e.target);
+                var href = $a.prop('href');
+                that.fire(MetadataComponent.Events.IIIF_VIEWER_LINK_CLICKED, href);
+            });
             return $metadataItem;
         };
         MetadataComponent.prototype._getLabelLocale = function (item) {
@@ -430,7 +437,14 @@ var IIIFComponents;
             value = value.replace('\n', '<br>'); // replace \n with <br>
             var $value = this._$metadataItemValueTemplate.clone();
             $value.html(value);
-            $value.targetBlank();
+            // loop through values looking for links with iiif-viewer-link class
+            // if found, add click handler
+            $value.find('a').each(function () {
+                var $a = $(this);
+                if (!$a.hasClass('iiif-viewer-link')) {
+                    $a.prop('target', '_blank');
+                }
+            });
             // rtl?
             if (locale) {
                 this._addReadingDirection($value, locale);
@@ -513,6 +527,7 @@ var IIIFComponents;
         var Events = /** @class */ (function () {
             function Events() {
             }
+            Events.IIIF_VIEWER_LINK_CLICKED = 'iiifViewerLinkClicked';
             return Events;
         }());
         MetadataComponent.Events = Events;

diff --git a/dist/iiif-metadata-component.min.js b/dist/iiif-metadata-component.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>iiif-metadata-component</title>
     <meta charset="utf-8">
@@ -9,17 +10,18 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
     <script src="https://unpkg.com/manifesto.js/dist/client/manifesto.bundle.js"></script>
     <script src="https://unpkg.com/@iiif/manifold/dist/manifold.js"></script>
+    <script src="https://unpkg.com/xss@1.0.3/dist/xss.js"></script>
     <script src="js/base-component.js"></script>
     <script src="js/iiif-metadata-component.js"></script>
     <script src="js/jquery-plugins.js"></script>
-    <script src="sanitize.js"></script>
     <script src="js/utils.js"></script>
     <style type="text/css">
         .options div {
             margin-bottom: 40px;
         }
     </style>
 </head>
+
 <body>
     <div class="testFixtureSelection">
         <button class="testFixture" data-json="http://wellcomelibrary.org/iiif/b18035978/manifest">Manifest metadata</button>
@@ -30,11 +32,14 @@
         <!-- resolves to http://bluemountain.princeton.edu/exist/restxq/iiif/bmtnaab_1920-02_01/manifest -->
         <button class="testFixture" data-json="http://bluemountain.princeton.edu/exist/restxq/iiif/collection/top">Collection</button>
         <button class="testFixture" data-json="https://edsilv.github.io/test-manifests/range-renderings.json">Multilingual</button>
-        <button class="testFixture" data-json="https://iiif-commons.github.io/iiif-av-component/examples/data/bl/sounds-tests/C465_13.json">Coalesce multiple values</button>
+        <button class="testFixture" data-json="https://iiif-commons.github.io/iiif-av-component/examples/data/bl/sounds-tests/C465_13.json">Coalesce
+            multiple values</button>
         <button class="testFixture" data-json="https://iiif-commons.github.io/iiif-av-component/examples/data/bl/sounds-tests/WS0003.json">Logo</button>
-        <button class="testFixture" data-json="https://edsilv.github.io/test-manifests/nested-range-metadata.json">Nested range metadata</button>
+        <button class="testFixture" data-json="https://edsilv.github.io/test-manifests/nested-range-metadata.json">Nested
+            range metadata</button>
         <button class="testFixture" data-json="https://edsilv.github.io/test-manifests/xss.json">xss</button>
-        <button class="testFixture" data-json="https://iiif-commons.github.io/iiif-av-component/examples/data/bl/sounds-tests/loose-ends/C1685_98_P3.json">loose ends</button>
+        <button class="testFixture" data-json="https://iiif-commons.github.io/iiif-av-component/examples/data/bl/sounds-tests/loose-ends/C1685_98_P3.json">loose
+            ends</button>
     </div>
 
     <div class="options">
@@ -92,12 +97,16 @@
                 collectionIndex: 0,
                 manifestIndex: 0,
                 locale: locale
-            }).then(function(helper){
+            }).then(function (helper) {
 
                 component = new IIIFComponents.MetadataComponent({
                     target: document.querySelector('#metadata')
                 });
 
+                component.on('iiifViewerLinkClicked', function(href) {
+                    console.log('clicked: ' + href);
+                });
+
                 var canvases = [helper.getCanvasByIndex(0)];
 
                 if (helper.getCanvasByIndex(1)) {
@@ -117,45 +126,34 @@
                     //manifestDisplayOrder: "attribution, publication date, license, title",
                     //manifestExclude: "license, attribution",
                     range: getRange(helper),
-                    sanitizer: function(html) {
-                        var elem = document.createElement('div');
-                        var $elem = $(elem);
-                        $elem.html(html);
-
-                        var s = new Sanitize({
-                            elements:   ['a', 'b', 'br', 'img', 'p', 'i', 'span'],
-                            attributes: {
-                                a: ['href'],
-                                img: ['src', 'alt']
-                            },
-                            protocols:  {
-                                a: { href: ['http', 'https'] },
-                                img: { src:  ['http', 'https']}
+                    sanitizer: function (html) {
+                        return filterXSS(html, {
+                            whiteList: {
+                                a: ["href", "title", "target", "class"],
+                                br: [],
+                                img: ["src"],
+                                span: []
                             }
                         });
-
-                        $elem.html(s.clean_node(elem));
-
-                        return $elem.html();
                     },
                     showAllLanguages: $('#allLanguages').is(':checked')
                 });
 
-            }).catch(function(e) {
+            }).catch(function (e) {
                 console.error(e);
             });
         };
 
-        $(function() {
+        $(function () {
 
-            $('.reverseGroups').click(function() {
+            $('.reverseGroups').click(function () {
                 var ul = $(".metadataGroupOrder").children("ol");
                 var groupOrder = $.makeArray(ul.children("li")).reverse();
                 ul.empty();
                 $.each(groupOrder, (i, v) => ul.append(v));
             });
 
-            $('.testFixture').click(function() {
+            $('.testFixture').click(function () {
                 loadManifest($(this).data('json'));
             });
 
@@ -164,4 +162,5 @@
     </script>
 
 </body>
-</html>
+
+</html>
diff --git a/examples/js/iiif-metadata-component.js b/examples/js/iiif-metadata-component.js
@@ -1,4 +1,4 @@
-// iiif-metadata-component v1.1.8 https://github.com/iiif-commons/iiif-metadata-component#readme
+// iiif-metadata-component v1.1.9 https://github.com/iiif-commons/iiif-metadata-component#readme
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.iiifMetadataComponent = f()}})(function(){var define,module,exports;return (function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){
 (function (global){
 
@@ -397,6 +397,13 @@ var IIIFComponents;
             if (this._data.copyToClipboardEnabled && Utils.Clipboard.supportsCopy() && $label.text()) {
                 this._addCopyButton($metadataItem, $label, $values);
             }
+            var that = this;
+            $metadataItem.on('click', 'a.iiif-viewer-link', function (e) {
+                e.preventDefault();
+                var $a = $(e.target);
+                var href = $a.prop('href');
+                that.fire(MetadataComponent.Events.IIIF_VIEWER_LINK_CLICKED, href);
+            });
             return $metadataItem;
         };
         MetadataComponent.prototype._getLabelLocale = function (item) {
@@ -430,7 +437,14 @@ var IIIFComponents;
             value = value.replace('\n', '<br>'); // replace \n with <br>
             var $value = this._$metadataItemValueTemplate.clone();
             $value.html(value);
-            $value.targetBlank();
+            // loop through values looking for links with iiif-viewer-link class
+            // if found, add click handler
+            $value.find('a').each(function () {
+                var $a = $(this);
+                if (!$a.hasClass('iiif-viewer-link')) {
+                    $a.prop('target', '_blank');
+                }
+            });
             // rtl?
             if (locale) {
                 this._addReadingDirection($value, locale);
@@ -513,6 +527,7 @@ var IIIFComponents;
         var Events = /** @class */ (function () {
             function Events() {
             }
+            Events.IIIF_VIEWER_LINK_CLICKED = 'iiifViewerLinkClicked';
             return Events;
         }());
         MetadataComponent.Events = Events;