TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(embedded-viewer): new tag, less dependencies,

Browse Source
This commit is contained in:
dannyrb 2019-09-05 21:22:54 -04:00
parent 81c2f60731
commit d588ddd830
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/latest/deployment/recipes/embedded-viewer.md
View File

@ -12,13 +12,8 @@ include tags. Here's how it works:
<ul> <ul>
<li> <li>
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <a href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
<code>bootstrap@3.3.7</code> <code>Google Font: Roboto</code>
</a>
</li>
<li>
<a href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap">
<code>Google Fonts, Sanchez & Roboto</code>
</a> </a>
</li> </li>
<li> <li>
@ -32,15 +27,13 @@ include tags. Here's how it works:
</a> </a>
</li> </li>
<li> <li>
<a href="https://unpkg.com/ohif-viewer/dist/index.umd.js"> <a href="https://unpkg.com/@ohif/viewer">
<code>ohif-viewer@latest</code> <code>@ohif/viewer@latest</code>
</a> </a>
</li> </li>
</ul> </ul>
<ol start="2"> <ol start="2">
<li>The <a href="">WADO Image Loader Codecs and Web Worker source code</a>
should be accessible from your server's root</li>
<li>Create a JS Object to hold the OHIF Viewer's configuration. Here are some <li>Create a JS Object to hold the OHIF Viewer's configuration. Here are some
example values that would allow the viewer to hit our public PACS:</li> example values that would allow the viewer to hit our public PACS:</li>
</ol> </ol>
@ -74,7 +67,7 @@ window.config = {
</li></ol> </li></ol>
```js ```js
// Made available by the `ohif-viewer` script included in step 1 // Made available by the `@ohif/viewer` script included in step 1
var Viewer = window.OHIFStandaloneViewer.App; var Viewer = window.OHIFStandaloneViewer.App;
var app = React.createElement(Viewer, window.config, null); var app = React.createElement(Viewer, window.config, null);
@ -89,16 +82,20 @@ First, check out this fully functional [CodeSandbox][code-sandbox] example. If
you're still having trouble, feel free to search or GitHub issues. Can't find you're still having trouble, feel free to search or GitHub issues. Can't find
anything related your problem? Create a new one. anything related your problem? Create a new one.
> When I include bootstrap, other styles on my page no longer work correctly. > My application's styles are impacting the OHIF Viewer's look and feel. What
> What can I do? > can I do?
When we include `bootsrap` (and the other dependencies), they are added When you include stylesheets and scripts, they are added globally. This has the
globally. This has the potential of causing conflicts with other scripts and potential of causing conflicts with other scripts and styles on the page. To
styles on the page. To prevent this, `embed` the viewer in a new/empty web page. prevent this, `embed` the viewer in a new/empty web page. Have that working?
Have that working? Good. Now `embed` that new page using an Good. Now `embed` that new page using an
[`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). [`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
This should produce the expected result while also protecting your page from any This should produce the expected result while also protecting your page from any
globally defined styles/scripts. globally defined styles/scripts.
<!--
LINKS
-->
[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9 [code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9