{"__symbolic":"module","version":4,"metadata":{"ArtstorViewer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"artstor-viewer","template":"<div class=\"asset-viewer\" [class.fullscreen]=\"isFullscreen\" [class.multi-view]=\"isMultiView\" (contextmenu)=\"disableContextMenu($event)\"> <!-- Large thumbnail fallback  - Thumbnail is always showing, and hidden by other viewers placed on top - This allows search crawlers to find the thumbnail --> <div id=\"fallbackViewer\"><img class=\"item item--thumbnail\" alt=\"{{ asset.title }}\" [attr.src]=\"asset.thumbnail_url\" (error)=\"asset.fallbackThumbnailUrl()\"></div> <div class=\"more-results overlay-wrap--center\" id=\"loader-wrapper\" *ngIf=\"state == 0\"><i class=\"icon-asterisk icon-spin icon-large\"></i></div> <!-- IIIF Image Viewer--> <div [class.aiw-hidden]=\"state != 1\"> <div class=\"item osd-wrap\" [attr.id]=\"osdViewerId\" [attr.zoomValue]=\"lastZoomValue\"></div> </div> <!-- Video Player--> <div class=\"video-player\" [class.aiw-hidden]=\"state != 2\"> <iframe id=\"{{ 'kalturaIframe-' + index }}\" frameborder=\"0\"></iframe> </div> <!--panorama Krpano viewer--> <div class=\"krpano-viewer osd-wrap\" [class.aiw-hidden]=\"state != 3\"> <div class=\"pano\" id=\"pano-{{ index }}\"></div> </div> <!--Viewer Buttons--> <div *ngIf=\"!thumbnailMode\"> <div class=\"button-group asset-viewer__buttons\" id=\"imageButtons-{{ osdViewerId }}\"> <button class=\"btn btn--icon btn--zoomIn\" [class.aiw-hidden]=\"state != 1\" id=\"zoomIn-{{ osdViewerId}}\" title=\"Zoom In\"><i class=\"icon icon-zoom-in\"></i></button><button class=\"btn btn--icon btn--zoomOut\" [class.aiw-hidden]=\"state != 1\" id=\"zoomOut-{{ osdViewerId }}\" title=\"Zoom Out\"><i class=\"icon icon-zoom-out\"></i></button><button class=\"btn btn--icon btn--zoomFit\" [class.aiw-hidden]=\"state != 1\" id=\"zoomFit-{{ osdViewerId }}\" title=\"Zoom Fit\"><i class=\"icon icon-fit\"></i></button><button class=\"btn btn--icon btn--fullScreen\" *ngIf=\"!isFullscreen\" id=\"fullScreen-{{ osdViewerId }}\" (click)=\"togglePresentationMode()\" title=\"Full Screen\"><i class=\"icon icon-fullscreen\"></i></button><button class=\"btn btn--icon\" *ngIf=\"isFullscreen && assetCompareCount > 1\" (click)=\"removeAsset.emit(asset)\" title=\"Remove from Comparison\"><i class=\"icon icon-close\"></i></button> </div> <!-- Hide if not multi view (do not use ngIf, OSD needs to bind) --> <!-- Bottom right arrow style --> <!-- <div [class.aiw-hidden]=\"!isMultiView\" class=\"button-group asset-viewer__pagination\" id=\"imagePageButtons-{{ osdViewerId }}\"> <button class=\"btn btn--icon btn--prev\" id=\"previousButton-{{ osdViewerId}}\"><</button><span class=\"btn-divider\"></span><button class=\"btn btn--icon btn--next\" id=\"nextButton-{{ osdViewerId}}\">></button> </div> --> <!-- Edge pagination arrow style --> <div [class.aiw-hidden]=\"!isMultiView\" class=\"asset-viewer__edge-arrows\" id=\"imagePageButtons-{{ osdViewerId }}\"> <button class=\"btn btn--icon btn--prev\" id=\"previousButton-{{ osdViewerId}}\"><i class=\"icon icon-prev--white\"></i></button><button class=\"btn btn--icon btn--next\" id=\"nextButton-{{ osdViewerId}}\"><i class=\"icon icon-next--white\"></i></button> </div> <div *ngIf=\"isMultiView\" class=\"asset-viewer_multi-view-info\"> <b>{{ multiViewPage }}</b> of <b>{{ multiViewCount }}</b> <button *ngIf=\"hasMultiViewHelp()\" (click)=\"multiViewHelp.emit()\" class=\"help-icon\">?</button> </div> <div class=\"fullscreen-metadata\" *ngIf=\"isFullscreen\" [class.slideAway]=\"!showCaption\"> <div class=\"vertical-center-wrap\"><i class=\"icon icon-direction icon-left\" *ngIf=\"assetCompareCount == 1 && !quizMode\" [class.disabled]=\"assetNumber <= 1\" title=\"Previous in results\" (click)=\"prevPage.emit()\"></i> <div class=\"title\" [innerHtml]=\"asset.title\"></div><i class=\"icon icon-direction icon-right\" *ngIf=\"assetCompareCount == 1 && !quizMode\" [class.disabled]=\"assetNumber >= assetGroupCount\" title=\"Next in results\" (click)=\"nextPage.emit()\"></i> <div class=\"meta-block small\"> <div class=\"creator\" [innerHtml]=\"asset.creator\"></div> <div class=\"date\" [innerHtml]=\"asset.date\"></div> </div> </div> </div> </div> </div>","styles":["/*20px: 20px; 90vh: 90vh; 600px: 600px; 50vh: 50vh; #f1f8f1: #f1f8f1; // Breakpoints $xsphone: 320px; 576px: 576px; $tablet: 768px; $desktop: 992px;*/ .aiw-hidden { display: none; pointer-events: none; } .mwEmbedKalturaIframe { min-height: 600px !important; } .asset-viewer { text-align: center; padding: 0; z-index: 0; position: relative; height: 90vh; min-height: 600px; overflow: hidden; } .asset-viewer:hover .asset-viewer__buttons  { opacity: 1; } @media(max-width: 576px) { .asset-viewer { height: 50vh; min-height: 50vh; } .asset-viewer .asset-viewer__buttons { opacity: 1; } } .asset-viewer__buttons { opacity: 0; transition: opacity 0.2s linear; position: absolute; top: 20px; left: 20px; z-index: 1000; padding: 10px; } @media(max-width: 576px) { .asset-viewer__buttons { top: calc(100% - 40px); left: 50%; transform: translateX(-50%); } } .asset-viewer__pagination { position: absolute; bottom: 215px; right: 15px; z-index: 1000; padding: 0px; } .asset-viewer__edge-arrows { opacity: 0; transition: opacity 0.2s linear; position: absolute; pointer-events: none; top: calc(50% - 120px); width: 100%; } .asset-viewer:hover .asset-viewer__edge-arrows { opacity: 1; } .asset-viewer__edge-arrows .btn { pointer-events: all; width: 42px; height: 42px; border-radius: 50%; background: rgba(66,66,66,0.6); } .asset-viewer__edge-arrows .btn .icon { width: 24px; height: 24px; } .asset-viewer__edge-arrows .btn:hover, .asset-viewer__edge-arrows .btn:active { background: rgba(66,66,66,1.0); } .asset-viewer__edge-arrows .btn--prev { float: left; margin: 5px; margin-left: 5px 5px 5px 28px; } .asset-viewer__edge-arrows .btn--next { float: right; margin: 5px 28px 5px 5px; } .asset-viewer__pagination .btn { color: #fff; background: rgba(0,0,0,0.7); } .asset-viewer__pagination .btn:hover, .asset-viewer__pagination .btn:active { background: rgba(0,0,0); color: #ddd; } .asset-viewer__pagination .btn::disabled, .asset-viewer__pagination .btn[disabled] { color: #444 !important; background: rgba(0,0,0,0.7) !important; } .asset-viewer__pagination .btn:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .asset-viewer__pagination .btn:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .asset-viewer_multi-view-info { position: absolute; left: 21px; bottom: 147px; z-index: 1000; color: #fff; font-family: Verdana; } .btn-divider { display: inline-block; width: 1px; height: 20px; margin: 0px -0.5px; background: rgb(0,0,0); z-index: 1001; vertical-align: middle; } .video-player { min-height: 600px; min-height: 90vh; } @media(max-width: 576px) { .video-player { height: 50vh; min-height: 50vh; } } .video-player iframe { min-width:100%; min-height: 600px; min-height: 90vh; } .osd-wrap { position: relative; height: 600px; height: 90vh; width: 100%; min-height: 90vh; background: #000; } @media(max-width: 576px) { .osd-wrap { height: 50vh; min-height: 50vh; } } .asset-viewer.fullscreen { min-height: 100%; width: 100%; z-index: 1; padding: 0px; } .asset-viewer.fullscreen .item  { position: absolute !important; width: 100%; height: 100%; min-height: 100% !important; } .asset-viewer-1 { width: 100%; } .asset-viewer-2 { width: 50%; } .asset-viewer-3 { width: 33.3%; } .asset-viewer-4 { width: 25%; } .asset-viewer-5 { width: 20%; } .asset-viewer-6 { width: 16.66%; } .asset-viewer-7 { width: 14.285%; } .asset-viewer-8 { width: 12.5%; } .asset-viewer-9 { width: 11.11%; } .asset-viewer-10 { width: 10%; } .asset-viewer-11 { width: 9.09%; } .asset-viewer-12 { width: 8.33%; } .asset-viewer-13 { width: 7.69%; } .asset-viewer-14 { width: 7.14%; } .asset-viewer-15 { width: 6.66%; } .asset-viewer-16 { width: 6.25%; } .asset-viewer-17 { width: 5.88%; } .asset-viewer-18 { width: 5.55%; } .asset-viewer-19 { width: 5.26%; } .asset-viewer-20 { width: 5%; } .item.item--thumbnail, .asset-viewer.fullscreen .item.item--thumbnail { position: absolute; width: auto; height: auto; min-height:0px !important; min-width:0px; max-height: 100%; max-width: 100%; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: -1; } .fullscreen-metadata { position: absolute; background: #f1f8f1; left: 0px; bottom: 0px; z-index: 1; opacity: 0.98; width: 100%; height: 80px; padding: 20px; transition: transform 0.2s linear; transform: translateY(0px); } .fullscreen-metadata.slideAway { transform: translateY(100%); } .fullscreen-metadata i{ vertical-align: top; margin: 3px; cursor: pointer; } .fullscreen-metadata .title{ font-family: 'Lyon Display Web', Georgia, Times; font-size: 18px; display: inline-block; width: 350px; margin: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .fullscreen-metadata .page-tooltip{ font-weight: normal; font-size: 10px; min-width: 120px; line-height: 21px; display: block; position: absolute; z-index: 5000; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3); background: white; color: black; padding: 2px 15px 0px; opacity: 0; -webkit-transition: opacity linear 0.3s; -moz-transition: opacity linear 0.3s; transition: opacity linear 0.3s; } .fullscreen-metadata:hover .page-tooltip{ opacity: 1; } .fullscreen-metadata .caption-link{ display: inline-block; float: left; font-size: 12px; cursor: pointer; border-bottom: 1px dotted #373a3c; } .caption-cntnr{ display: block; padding: 10px; position: absolute; bottom: 0px; background: rgba(255,255,255,0.95); width: 100%; } .pano { width: 100%; height: 100%; } .help-icon { display: inline-block; border: 0px solid transparent; border-radius: 50%; background: #777; color: #fff; font-weight: bold; font-size: 10px; height: 15px; width: 15px; line-height: 15px; padding: 0px; margin: 0 5px; cursor: pointer; } /** OpenSeaDragon Overrides **/ .referencestrip { position: absolute !important; bottom: 0px !important; height: 175px !important; min-width: 500px !important; width: 100% !important; display: block !important; float: none !important; margin: 0px !important; opacity: 1 !important; white-space: nowrap !important; overflow-x: scroll !important; overflow-y: hidden !important; touch-action: auto !important; padding-left: 12px !important; padding-right: 12px !important; } .referencestrip::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } #referencestrip > div { /* background: rgb(153, 153, 153) */ background: rgb(0,0,0) !important; padding: 0px !important; margin: 0px 5px !important; } /* .referencestrip > div[style^=\"background: rgb(153, 153, 153)\"] { background:  #000 !important; } */ .referencestrip canvas { opacity: 0.5; cursor:  pointer !important; -webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -ms-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; } .referencestrip .displayregion{ /* cursor: pointer !important; */ z-index: -1 !important; } .asset-viewer__edge-arrows .btn:disabled{ cursor: default !important; } .referencestrip > div[style^=\"background: rgb(153, 153, 153)\"] canvas, .referencestrip canvas:hover { /* border: 2px solid #C9510D !important; */ opacity: 1 !important; padding: 0px !important; } .referencestrip::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(255,255,255,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.7); width: 5px; } /* Select BOTTOM LEFT positioning div */ .openseadragon-canvas + div + div + div + div { position: static !important; } .referencestrip > div { background: #000 !important; border: 2px solid transparent !important; margin: 0px 5px !important; display: inline-block !important; float: none !important; height: 165px !important; width: 150px !important; position: relative !important; touch-action: auto !important; /* padding: 60px 0px 0px 0px !important; */ /* cursor: pointer !important; */ } .navigator { position: absolute !important; bottom: 10px !important; z-index: 1 !important; left: 10px !important; border: 3px solid rgb(0,0,0) !important; opacity: 0.95; margin-bottom: 0px !important; } .multi-view .navigator { bottom: 205px !important; } [class$=\"-displayregion\"] { border: 2px solid rgb(224, 11, 11) !important; } "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"}}]}],"members":{"groupId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"assetCompareCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"assetGroupCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"assetNumber":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"assets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"prevAssetResults":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"isFullscreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"showCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"quizMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"testEnv":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"thumbnailMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"encrypted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"assetId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"legacyFlag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"openLibraryFlag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"fullscreenChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":5}}]}],"nextPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":88,"character":5}}]}],"prevPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":89,"character":5}}]}],"removeAsset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":90,"character":5}}]}],"assetDrawer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"multiViewHelp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":92,"character":5}}]}],"assetMetadata":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"multiViewPageViaArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":5}}]}],"multiViewPageViaThumbnail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":121,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"loadAssetById":[{"__symbolic":"method"}],"loadViewer":[{"__symbolic":"method"}],"loadIIIF":[{"__symbolic":"method"}],"loadOpenSea":[{"__symbolic":"method"}],"loadKrpanoViewer":[{"__symbolic":"method"}],"embedKrpano":[{"__symbolic":"method"}],"requestFullScreen":[{"__symbolic":"method"}],"exitFullScreen":[{"__symbolic":"method"}],"changeHandler":[{"__symbolic":"method"}],"togglePresentationMode":[{"__symbolic":"method"}],"setFullscreen":[{"__symbolic":"method"}],"loadKaltura":[{"__symbolic":"method"}],"disableContextMenu":[{"__symbolic":"method"}],"hasMultiViewHelp":[{"__symbolic":"method"}],"getUrl":[{"__symbolic":"method"}],"buildAsset":[{"__symbolic":"method"}],"getMetadata":[{"__symbolic":"method"}],"getEncryptedMetadata":[{"__symbolic":"method"}],"mapMetadata":[{"__symbolic":"method"}],"getFpxInfo":[{"__symbolic":"method"}]}},"ArtstorViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":8,"character":26}],"declarations":[{"__symbolic":"reference","name":"ArtstorViewer"}],"providers":[{"__symbolic":"reference","name":"ArtstorViewer"}],"exports":[{"__symbolic":"reference","name":"ArtstorViewer"}]}]}],"members":{}}},"origins":{"ArtstorViewer":"./src/component/artstor-viewer.component","ArtstorViewerModule":"./src/module"},"importAs":"artstor-viewer"}