Hiding the document download link

[smartps]

I've added a PDF file to a module (+ -> File -> [select a pdf])

It is displayed in a pdf viewer with buttons to zoom and navigate through pages.

Above the PDF viewer is a link to download the file (see attached pic).

I would like to prevent the link being seen. I've seen how people can hide things using CSS but I can't see any particular CSS class being applied to the download link (see attached for the source).

Has anyone managed to hide this or can offer any advice?

Thanks.

 Paul

[themidiman · Accepted solution]

Interesting challenge...

This view in Canvas doesn't have any unique ways to target just this element within this view, but a brute force method of doing this could go in a JavaScript override file in your theme editor:

$("#content div")[0].style.display = "none";‍

In plain English this is basically jQuery telling the document to take the first <div> element within the #content" id and set its display CSS rule to "none". The first div contains the <span> which in turn contains the <a> element AND the text with the file's size. Hiding that div will do what you are proposing, (I think).  

With that being said, I need to emphasize that this has not been tested to not affect any other areas of the Canvas UI. It could have disastrous results if you don't test this or find a way to lock it down just to when a module file item is clicked and displays the file. This will work for any renderable file that the DocViewer supports...not just PDF files.

I just wanted to let you know that you can do this via the JavaScript console as a proof of concept.  You will need to explore this on your own and accept the risks of overriding the Canvas default behavior this way. 

[SoMtnCommColl]

Has this been tested yet? It's been four years 🙂

[robotcars]

@SoMtnCommColl 

There is not much specificity in the previous suggestion. It would hide the first div in any #content container.

Looking at this now, there is a download="true" attribute in the anchor for the downloadable file. Worth discussing/identifying if there are places where it should be shown or not, or other locations where files are content with a download vs preview.

A safer suggestion might be (JS)

// hide download link for content files
[...document.querySelectorAll('div#content.ic-Layout-contentMain div:has(span > a[download="true"])')].forEach(d => {
	d.style.visibility = 'hidden';
})

or (CSS)

/* hide download link for content files */
div#content.ic-Layout-contentMain div:has(> span > a[download="true"]) {
  visibility: hidden;
}

The above works for files as module items, it does not stop a doc view download, or a link in a page to a file, which offers a download option, those require different selectors. This also doesn't prevent a user from viewing the source, getting the url, and adding /download to the file url to get it.