Document Preview Issue

We have a custom mapping solution inside Community that allows geo-tagged posts from blogs, wikis, forums and media galleries to be displayed as map markers on the world map.

With media gallery posts in particular, when you click the marker you're presented with the post title, trimmed body text and a thumbnail representing the media that was uploaded.

A media gallery post on the map

A media gallery post represented on the map

The intent here is that when the thumbnail is clicked, a document previewer opens up and shows the contents of that file, exactly like what happens when doing the same action in the activity feed.  For instance, if I clicked that text file thumbnail I should get this:

A clipped top section of the document previewer that shows the contents of the text file

Half of the time, this works.  The rest of the time, and to our best efforts we cannot figure out a repeatable pattern, it does not open the previewer but instead changes the page to the post in question.  

From what I understand of the theater url code we're using, changing the page to post itself is a fallback option if the document previewer does not fire for some reason.

Here's a sample of the code that's generated for the above thumbnail:

<a class="ui-theater" id="theaterLink" href="https://community.apan.org/dans-sandbox/m/documents/57" data-theaterurl="/callback.ashx?__type=Telligent.Evolution.Api.Plugins.ActivityStories.MediaStoryType%2C%20Telligent.Evolution.Api&mediaId=f303f7c5-3afa-4604-bbf4-a32c7997687f&mediaGalleryId=2256">
    <img src="/cfs-filesystemfile/__key/communityserver-components-imagefileviewer/filetypeimages_2E00_/txt.png_2D00_50x50.png" border="0" alt="">
</a> 

When creating this code (over a year ago) I understood that creating a previewable file was 2 steps - 1) Include all the appropriate attributes in the anchor tag (seen above) and 2) call the javascript after page load that looks for the data-theaterurl enabled anchor tags and turns them into previewable files.

Here's the javascript code for #2, which I fire 1/2 a second after page load to ensure all the available items are loaded:

window.setTimeout(function () {
  $.telligent.evolution.ui.components.theater.add(document.getElementById('theaterLink'),
    {
      "theaterurl": "/callback.ashx?__type=Telligent.Evolution.Api.Plugins.ActivityStories.MediaStoryType%2C%20Telligent.Evolution.Api&mediaId=" + mediaId() +
      "&mediaGalleryId=" + galleryId()
    });
  $('.ui-theater').click(function (e) {
    window.setTimeout(function () {
      //due to having to hack Telligent's previewing system, additional previewers may come up per click. Remove all but the correct (first) one
      $('.theater-mask').not(':first').remove();
      $('.theater-container').not(':first').remove();
    }, 150);
  });
}, 500);

Any help as to why this *sometimes* fails to preview the document and instead changes the page to the post in question would be wonderful.

Thanks!

Parents Reply Children
  • Ben you really are a star, this answers quite a few questions we've had.

    So I'm using the web console to try to see what I can get out of this method before going through all the gyrations of checking out code, removing the old hacky stuff, creating new code, etc. 

    I've grabbed the url of a word document we've got uploaded and plugged it into the JS call for the view API, logging the response to the console:

    jQuery.telligent.evolution.get({
       url: jQuery.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/ui/view.json',
       data: { 
          'url': 'https://community.apan.org/cfs-file/__key/telligent-evolution-components-attachments/13-6302-00-00-00-16-43-43/GIS-Overhaul-Prototyping.docx'
       },
       success: function(response) {
    		console.log(response)
       }
    });

    I do get a response, which is great.  So I'm taking the html in the response and plugging it into a simple DIV on the page to see what it looks like.  This is the HTML response:

    <style type="text/css">
    #m__dvc_d7ca447221fc4f578bfff217d4e84438.document-viewer-message { 
    	padding:3%;width:100%; 
    	background-color: #000; 
    	background: -moz-linear-gradient(top, #000002 0%, #212967 100%); 
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000002), color-stop(100%,#212967)); 
    	background: -webkit-linear-gradient(top, #000002 0%,#212967 100%); 
    	background: -o-linear-gradient(top, #000002 0%,#212967 100%); 
    	background: -ms-linear-gradient(top, #000002 0%,#212967 100%); 
    	background: linear-gradient(top, #000002 0%,#212967 100%);
    	margin: 0 auto; 
    }
    #m__dvc_d7ca447221fc4f578bfff217d4e84438.document-viewer-message h4 { 
    	text-align: center; 
    	color: #FFF; 
    	font-weight: normal; 
    	font-family: Helvetica, Arial, sans-serif; 
    	border: 0px; 
    }
    #m__dvc_d7ca447221fc4f578bfff217d4e84438.document-viewer-message .statusbar { 
    	width: 50px; 
    	height: 50px;
    	margin-left: auto; 
    	margin-right: auto; 
    	margin-top: 5%; 
    }
    </style>
    <div id='m__dvc_d7ca447221fc4f578bfff217d4e84438' class="document-viewer-message" style="display:none">
    	<h4></h4>
    	<div class="statusbar">
    		<img src="https://community.apan.org/resized-image/__size/0x0/__key/system/images/docpreview_2D00_spinner.gif" />
    	</div>
    </div>
    <div id='df__dvc_d7ca447221fc4f578bfff217d4e84438' class="document-viewer-default" style="display:none;">
    	<img src="https://community.apan.org/cfs-filesystemfile/__key/communityserver-components-imagefileviewer/filetypeimages_2E00_/docx.png_2D00_1060x0.png" border="0" alt="" />
    </div>
    <div id='dvc_d7ca447221fc4f578bfff217d4e84438' class="document-viewer-wrapper" style="display:none">
    	<div id='v__dvc_d7ca447221fc4f578bfff217d4e84438' ></div>
    	<script type="text/javascript" src="https://community.apan.org/utility/jquery/telligent.docpreview.js"></script>
    	<script type="text/javascript">
    		new DocumentViewer({"viewerParameters":{"jsonUrl":"https://community.apan.org/cfs-file/__key/docpreview-s/00-00-01-91-64/pages.js","pdfUrl":"https://community.apan.org/cfs-file/__key/docpreview-s/00-00-01-91-64/GIS-Overhaul-Prototyping.pdf","imageUrlFormats":[{"dpi":72,"format":"https://community.apan.org/cfs-file/__key/docpreview-s/00-00-01-91-64/{PAGE}.72.png"},{"dpi":150,"format":"https://community.apan.org/cfs-file/__key/docpreview-s/00-00-01-91-64/{PAGE}.150.png"}],"width":1060,"height":770,"keywordUrlFormat":"https://community.apan.org/cfs-file/__key/docpreview-s/00-00-01-91-64/{PAGE}.js"},"handlerUrl":"https://community.apan.org/callback.ashx?__type=Telligent.Evolution.DocumentPreview.DocumentViewerConfiguration%2C%20Telligent.Evolution.Extensions.DocumentPreview","viewerContainer":"v__dvc_d7ca447221fc4f578bfff217d4e84438","containerId":"dvc_d7ca447221fc4f578bfff217d4e84438","fileStore":"telligent.evolution.components.attachments","path":"13.6302.00.00.00.16.43.43","fileName":"GIS Overhaul Prototyping.docx","messageContainerId":"m__dvc_d7ca447221fc4f578bfff217d4e84438","message":"Your document has been uploaded successfully.  Your document is now being converted to show a preview.  Larger files may take longer…but you are free to navigate away from this page.","defaultViewId":"df__dvc_d7ca447221fc4f578bfff217d4e84438"});
    	</script>
    </div>

    Unfortunately it produces nothing on screen.  Is that because I'm doing this through the console and inserting code after page load?  Map marker info-windows are created dynamically when you click a map marker, not at page load, so the end result will be very close to what I'm doing here.

  • Update: I created a custom page, added an unfiltered html widget to it and pasted the response code above into it.  It shows up perfectly.  The only thing different I can see is the working version is there on page load and the non working version is not.

  • When inserting this content into an existing page, ensure that you are using jQuery -- this will ensure that the javascript is executed. $('#id_of_parent').html(response_html);