Chore: extract file loading icons to be used globally throughout prev…

…iew (box#490)
tonyjin · Nov 28, 2017 · ec2fc3b · ec2fc3b
1 parent 808270b
commit ec2fc3b
Show file tree

Hide file tree

Showing 18 changed files with 268 additions and 135 deletions.
diff --git a/src/lib/icons/icons.js b/src/lib/icons/icons.js
@@ -57,29 +57,6 @@ export const ICON_ARROW_LEFT = ARROW_LEFT;
 export const ICON_ARROW_RIGHT = ARROW_RIGHT;
 export const ICON_CHECK_MARK = CHECK_MARK;
 export const ICON_GEAR = GEAR;
-export const ICON_FILE_AUDIO = FILE_AUDIO;
-export const ICON_FILE_BOX_NOTE = FILE_BOX_NOTE;
-export const ICON_FILE_CODE = FILE_CODE;
-export const ICON_FILE_DEFAULT = FILE_DEFAULT;
-export const ICON_FILE_DICOM = FILE_DICOM;
-export const ICON_FILE_DOCUMENT = FILE_DOCUMENT;
-export const ICON_FILE_EXCEL = FILE_EXCEL;
-export const ICON_FILE_GOOGLE_DOC = FILE_GOOGLE_DOC;
-export const ICON_FILE_GOOGLE_SHEET = FILE_GOOGLE_SHEET;
-export const ICON_FILE_GOOGLE_SLIDE = FILE_GOOGLE_SLIDE;
-export const ICON_FILE_ILLUSTRATOR = FILE_ILLUSTRATOR;
-export const ICON_FILE_IMAGE = FILE_IMAGE;
-export const ICON_FILE_KEYNOTE = FILE_KEYNOTE;
-export const ICON_FILE_MEDIA = FILE_MEDIA;
-export const ICON_FILE_NUMBERS = FILE_NUMBERS;
-export const ICON_FILE_OBJ = FILE_OBJ;
-export const ICON_FILE_PAGES = FILE_PAGES;
-export const ICON_FILE_PDF = FILE_PDF;
-export const ICON_FILE_POWERPOINT = FILE_POWERPOINT;
-export const ICON_FILE_PRESENTATION = FILE_PRESENTATION;
-export const ICON_FILE_SPREADSHEET = FILE_SPREADSHEET;
-export const ICON_FILE_WORD = FILE_WORD;
-export const ICON_FILE_ZIP = FILE_ZIP;
 export const ICON_ANIMATION = ANIMATION;
 export const ICON_PAUSE = PAUSE;
 export const ICON_PLAY = PLAY;
@@ -91,3 +68,239 @@ export const ICON_FIND_DROP_UP = FIND_DROP_UP;
 export const ICON_CLOSE = CLOSE;
 export const ICON_SEARCH = SEARCH;
 export const ICON_PRINT_CHECKMARK = PRINT_CHECKMARK;
+
+const FILE_LOADING_ICONS = {
+    FILE_AUDIO,
+    FILE_BOX_NOTE,
+    FILE_CODE,
+    FILE_DEFAULT,
+    FILE_DICOM,
+    FILE_DOCUMENT,
+    FILE_EXCEL,
+    FILE_GOOGLE_DOC,
+    FILE_GOOGLE_SHEET,
+    FILE_GOOGLE_SLIDE,
+    FILE_ILLUSTRATOR,
+    FILE_IMAGE,
+    FILE_KEYNOTE,
+    FILE_MEDIA,
+    FILE_NUMBERS,
+    FILE_OBJ,
+    FILE_PAGES,
+    FILE_PDF,
+    FILE_POWERPOINT,
+    FILE_PRESENTATION,
+    FILE_SPREADSHEET,
+    FILE_WORD,
+    FILE_ZIP
+};
+
+export const ICON_FILE_MAP = {};
+
+// AUDIO ICON EXTENSIONS
+['aac', 'aif', 'aifc', 'aiff', 'amr', 'au', 'flac', 'm4a', 'mp3', 'ra', 'wav', 'wma'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_AUDIO';
+});
+
+// BOXNOTE ICON EXTENSIONS
+['boxnote'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_BOX_NOTE';
+});
+
+// CODE ICON EXTENSIONS
+[
+    'as',
+    'as3',
+    'asm',
+    'bat',
+    'c',
+    'cc',
+    'cmake',
+    'cpp',
+    'cs',
+    'css',
+    'cxx',
+    'diff',
+    'erb',
+    'groovy',
+    'h',
+    'haml',
+    'hh',
+    'htm',
+    'html',
+    'java',
+    'js',
+    'json',
+    'less',
+    'm',
+    'make',
+    'md',
+    'ml',
+    'mm',
+    'php',
+    'pl',
+    'plist',
+    'properties',
+    'py',
+    'rb',
+    'rst',
+    'sass',
+    'scala',
+    'script',
+    'scm',
+    'sml',
+    'sql',
+    'sh',
+    'vi',
+    'vim',
+    'webdoc',
+    'xml',
+    'xsd',
+    'xsl',
+    'yaml'
+].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_CODE';
+});
+
+// EXCEL ICON EXTENSIONS
+['xls', 'xlsm', 'xlsx'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_EXCEL';
+});
+
+// DOCUMENT ICON EXTENSIONS
+['log', 'msg', 'ods', 'rtf', 'txt', 'wpd'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_DOCUMENT';
+});
+
+// GOOGLE DOC ICON EXTENSIONS
+['gdoc'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_GOOGLE_DOC';
+});
+
+// GOOGLE SHEET ICON EXTENSIONS
+['gsheet'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_GOOGLE_SHEET';
+});
+
+// GOOGLE SLIDE ICON EXTENSIONS
+['gslide'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_GOOGLE_SLIDE';
+});
+
+// IMAGE ICON EXTENSIONS
+[
+    'ai',
+    'bmp',
+    'dcm',
+    'eps',
+    'gif',
+    'jpg',
+    'jpeg',
+    'png',
+    'ps',
+    'psd',
+    'svg',
+    'svs',
+    'swf',
+    'tga',
+    'tif',
+    'tiff'
+].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_IMAGE';
+});
+
+// KEYNOTE ICON EXTENSIONS
+['key'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_KEYNOTE';
+});
+
+// MEDIA ICON EXTENSIONS
+[
+    '3g2',
+    '3gp',
+    'avi',
+    'flv',
+    'm2v',
+    'm2ts',
+    'm4v',
+    'mkv',
+    'mov',
+    'mp4',
+    'mpeg',
+    'mpg',
+    'mts',
+    'ogg',
+    'qt',
+    'ts',
+    'wmv'
+].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_MEDIA';
+});
+
+// NUMBERS ICON EXTENSIONS
+['numbers'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_NUMBERS';
+});
+
+// OBJ ICON EXTENSIONS
+['3ds', 'box3d', 'dae', 'fbx', 'obj', 'ply', 'stl'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_OBJ';
+});
+
+// PAGES ICON EXTENSIONS
+['pages'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_PAGES';
+});
+
+// PDF ICON EXTENSIONS
+['pdf'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_PDF';
+});
+
+// POWERPOINT ICON EXTENSIONS
+['ppt', 'pptx'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_POWERPOINT';
+});
+
+// PRESENTATION ICON EXTENSIONS
+['odp'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_PRESENTATION';
+});
+
+// SPREADSHEET ICON EXTENSIONS
+['csv', 'tsv'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_SPREADSHEET';
+});
+
+// WORD ICON EXTENSIONS
+['doc', 'docx'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_WORD';
+});
+
+// ZIP ICON EXTENSIONS
+['tgz', 'zip'].forEach((extension) => {
+    ICON_FILE_MAP[extension] = 'FILE_ZIP';
+});
+
+/**
+ * Map from file extension to svg.
+ *
+ * @public
+ * @param {string} fileExtension - The extension of the file
+ * @return {HTMLElement} The SVG of the requested file icon
+ */
+export function getIconFromExtension(fileExtension) {
+    const iconName = ICON_FILE_MAP[fileExtension];
+    return FILE_LOADING_ICONS[iconName];
+}
+
+/**
+ * Map from icon file name to svg.
+ *
+ * @public
+ * @param {string} iconName - The name of the icon
+ * @return {HTMLElement} The SVG of the requested file icon
+ */
+export function getIconFromName(iconName) {
+    return FILE_LOADING_ICONS[iconName];
+}
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -29,7 +29,7 @@ import {
     STATUS_SUCCESS,
     STATUS_VIEWABLE
 } from '../constants';
-import { ICON_FILE_DEFAULT } from '../icons/icons';
+import { getIconFromExtension, getIconFromName } from '../icons/icons';
 
 const ANNOTATION_TYPE_DRAW = 'draw';
 const ANNOTATION_TYPE_POINT = 'point';
@@ -124,6 +124,11 @@ class BaseViewer extends EventEmitter {
      * @return {void}
      */
     setup() {
+        if (this.options.file) {
+            const fileExt = this.options.file.extension;
+            this.fileLoadingIcon = getIconFromExtension(fileExt);
+        }
+
         this.finishLoadingSetup();
 
         // Get the container dom element if selector was passed, in tests
@@ -167,7 +172,7 @@ class BaseViewer extends EventEmitter {
         }
 
         const iconWrapperEl = container.querySelector(SELECTOR_BOX_PREVIEW_ICON);
-        iconWrapperEl.innerHTML = this.fileLoadingIcon || ICON_FILE_DEFAULT;
+        iconWrapperEl.innerHTML = this.fileLoadingIcon || getIconFromName('FILE_DEFAULT');
     }
 
     /**

diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js
@@ -6,6 +6,7 @@ import RepStatus from '../../RepStatus';
 import fullscreen from '../../Fullscreen';
 import * as util from '../../util';
 import * as file from '../../file';
+import * as icons from '../../icons/icons';
 import * as constants from '../../constants';
 
 let base;
@@ -48,6 +49,7 @@ describe('lib/viewers/BaseViewer', () => {
 
     describe('setup()', () => {
         it('should set options, a container, bind event listeners, and set timeout', () => {
+            const getIconFromExtensionStub = sandbox.stub(icons, 'getIconFromExtension');
             sandbox.stub(base, 'addCommonListeners');
             sandbox.stub(base, 'areAnnotationsEnabled').returns(true);
             sandbox.stub(base, 'finishLoadingSetup');
@@ -63,8 +65,10 @@ describe('lib/viewers/BaseViewer', () => {
                 },
                 showAnnotations: true
             });
+
             expect(base.containerEl).to.have.class('bp');
             expect(base.addCommonListeners).to.be.called;
+            expect(getIconFromExtensionStub).to.be.called;
             expect(base.loadTimeout).to.be.a.number;
             expect(base.loadAnnotator).to.be.called;
         });

diff --git a/src/lib/viewers/box3d/Box3DViewer.js b/src/lib/viewers/box3d/Box3DViewer.js
@@ -19,7 +19,6 @@ import {
 } from './box3DConstants';
 import JS from './box3DAssets';
 import './Box3D.scss';
-import { ICON_FILE_OBJ } from '../../icons/icons';
 
 // Milliseconds to wait for model to load before cancelling Preview
 const LOAD_TIMEOUT = 50000;
@@ -63,8 +62,6 @@ class Box3DViewer extends BaseViewer {
      * @inheritdoc
      */
     setup() {
-        this.fileLoadingIcon = this.fileLoadingIcon || ICON_FILE_OBJ;
-
         // Call super() to set up common layout
         super.setup();
 

diff --git a/src/lib/viewers/box3d/image360/Image360Viewer.js b/src/lib/viewers/box3d/image360/Image360Viewer.js
@@ -2,7 +2,6 @@ import './Image360.scss';
 import Box3DViewer from '../Box3DViewer';
 import Box3DControls from '../Box3DControls';
 import Image360Renderer from './Image360Renderer';
-import { ICON_FILE_IMAGE } from '../../../icons/icons';
 
 const CSS_CLASS_IMAGE_360 = 'bp-image-360';
 const LOAD_TIMEOUT = 120000;
@@ -12,8 +11,6 @@ class Image360Viewer extends Box3DViewer {
      * @inheritdoc
      */
     setup() {
-        this.fileLoadingIcon = ICON_FILE_IMAGE;
-
         // Call super() to set up common layout
         super.setup();
 

diff --git a/src/lib/viewers/box3d/video360/Video360Viewer.js b/src/lib/viewers/box3d/video360/Video360Viewer.js
@@ -5,7 +5,6 @@ import Video360Controls from './Video360Controls';
 import Video360Renderer from './Video360Renderer';
 import sceneEntities from './SceneEntities';
 import { EVENT_TOGGLE_VR, EVENT_SHOW_VR_BUTTON } from '../box3DConstants';
-import { ICON_FILE_MEDIA } from '../../../icons/icons';
 import JS from '../box3DAssets';
 import './Video360.scss';
 
@@ -48,8 +47,6 @@ class Video360Viewer extends DashViewer {
 
     /** @inheritdoc */
     setup() {
-        this.fileLoadingIcon = ICON_FILE_MEDIA;
-
         // Call super() to set up common layout
         super.setup();