[EMB-137] Add loader to file-renderer (and TypeScripted it)

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Test: make sure all translations files contain all terms
 - Use ember-decorators (first application: `institution-carousel` component)
 - Added isPublic, authenticated, and resource dimensions to trackPage()
+- defaultTo utility for initializing component arguments
+- Loading indicator to file-renderer component
 
 ### Changed
 - TypeScript: Rename files to .ts

app/components/file-renderer/component.ts

@@ -0,0 +1,46 @@
+import { action, computed } from '@ember-decorators/object';
+import { not } from '@ember-decorators/object/computed';
+import Component from '@ember/component';
+import config from 'ember-get-config';
+import defaultTo from 'ember-osf-web/utils/default-to';
+
+/**
+ * @module ember-osf
+ * @submodule components
+ */
+
+/**
+ * Render the provided url in an iframe via MFR
+ *
+ * Sample usage:
+ * ```handlebars
+ * {{file-renderer
+ *   download=model.links.download
+ *     width="800" height="1000" allowfullscreen=true}}
+ * ```
+ * @class FileRenderer
+ */
+export default class FileRenderer extends Component {
+    download: string;
+    width: string = defaultTo(this.width, '100%');
+    height: string = defaultTo(this.height, '100%');
+    allowfullscreen: boolean = defaultTo(this.allowfullscreen, true);
+    version: string | null = defaultTo(this.version, null);
+    showLoadingIndicator: boolean = defaultTo(this.showLoadingIndicator, true);
+
+    @not('showLoadingIndicator') showIframe: boolean;
+
+    @computed('download', 'version')
+    get mfrUrl(this: FileRenderer) {
+        let download = `${this.download}?direct&mode=render&initialWidth=766`;
+        if (this.version) {
+            download += `&version=${this.version}`;
+        }
+        return `${config.OSF.renderUrl}?url=${encodeURIComponent(download)}`;
+    }
+
+    @action
+    loaded(this: FileRenderer) {
+        this.set('showLoadingIndicator', false);
+    }
+}

app/components/file-renderer/template.hbs

@@ -1,4 +1,18 @@
 {{#if download}}
-    <iframe src={{mfrUrl}} width={{width}} title={{t 'file_detail.mfr_iframe_title'}} height={{height}} scrolling="yes" marginheight="0" frameborder="0" allowfullscreen={{allowfullscreen}}>
+    {{#if showLoadingIndicator}}
+        {{loading-indicator dark=true}}
+    {{/if}}
+    <iframe
+        src={{mfrUrl}}
+        width={{width}}
+        title={{t 'file_detail.mfr_iframe_title'}}
+        height={{height}}
+        scrolling="yes"
+        marginheight="0"
+        frameborder="0"
+        allowfullscreen={{allowfullscreen}}
+        class={{if showIframe 'show' 'hidden'}}
+        onload={{action 'loaded'}}
+    >
     </iframe>
 {{/if}}

app/guid-file/template.hbs

@@ -113,13 +113,12 @@
                 (eq show 'view_edit')
             )}}
                 <div id='mfrIframeParent' class='{{if (and (eq show "view_edit") canEdit) "col-sm-6"}}'>
-                    {{#file-renderer
+                    {{file-renderer
                         download=model.file.links.download
                         version=mfrVersion
                         height="700"
                         width="99%"
                     }}
-                    {{/file-renderer}}
                 </div>
             {{/if}}
             {{#if (and

app/utils/default-to.ts

@@ -0,0 +1,3 @@
+export default function defaultTo<T, TDefault>(value: T, defaultValue: TDefault) {
+    return (typeof value === 'undefined' ? defaultValue : value) as T extends undefined ? TDefault : T;
+}

package.json

@@ -123,7 +123,7 @@
     "toastr": "^2.1.4",
     "tslint-consistent-codestyle": "^1.11.1",
     "tslint-eslint-rules": "^5.0.0",
-    "typescript": "^2.7.1",
+    "typescript": "^2.8.1",
     "typescript-eslint-parser": "^13.0.0"
   },
   "engines": {

tests/unit/utils/default-to-test.ts

@@ -0,0 +1,24 @@
+import defaultTo from 'ember-osf-web/utils/default-to';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | default-to', () => {
+    test('it returns value when defined', assert => {
+        const value = 'foo';
+        const defaultValue = 'bar';
+        const result: string = defaultTo(value, defaultValue);
+        assert.equal(result, value);
+    });
+
+    test('it returns defaultValue when undefined', assert => {
+        const defaultValue = 'bar';
+        const result: string = defaultTo(undefined, defaultValue);
+        assert.equal(result, defaultValue);
+    });
+
+    test('it returns value when null', assert => {
+        const value = null;
+        const defaultValue = 'bar';
+        const result: string | null = defaultTo(value, defaultValue);
+        assert.equal(result, value);
+    });
+});

yarn.lock

@@ -10364,9 +10364,9 @@ typescript-eslint-parser@^13.0.0:
     lodash.unescape "4.0.1"
     semver "5.5.0"
 
-typescript@^2.7.1:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+typescript@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.1.tgz#6160e4f8f195d5ba81d4876f9c0cc1fbc0820624"
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.5"