[wip] Use yarn to manage frontend dependencies

.gitignore

@@ -72,3 +72,9 @@ player/static/mfr/*
 !.gitkeep
 
 .cache
+
+# JS
+#######################
+
+node_modules
+node_modules/*

AUTHORS.rst

@@ -33,3 +33,4 @@ Contributors
 - Addison Schiller `@AddisonSchiller <https://github.com/AddisonSchiller>`_
 - Longze Chen `@cslzchen https://github.com/cslzchen`_
 - Jonathon Love `@jonathon-love https://github.com/jonathon-love`_
+- Joshua Bird `@birdbrained https://github.com/birdbrained`_

Dockerfile

@@ -64,6 +64,10 @@ ENV GIT_COMMIT ${GIT_COMMIT}
 
 RUN python setup.py develop
 
+RUN apt-get install nodejs \
+    apt-get install npm \
+    && npm run build
+
 EXPOSE 7778
 
 CMD ["gosu", "www-data", "invoke", "server"]

README.md

@@ -47,6 +47,14 @@ invoke install
 invoke server
 ```
 
+Also set up node for frontend packages. The recommended package manager is `yarn`.
+Webpack is used to build the packages. A script is included in `package.json` for convenience.
+
+```bash
+yarn
+yarn build
+```
+
 ### Configuring
 
 MFR configuration is done through a JSON file (`mfr-test.json`) that lives in the `.cos` directory of your home directory.  If this is your first time setting up MFR or its sister project, [WaterButler](https://github.com/CenterForOpenScience/waterbutler/), you probably do not have this directory and will need to create it:

mfr/extensions/audio/templates/viewer.mako

@@ -3,5 +3,4 @@
     Your browser does not support the audio tag.
 </audio>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/codepygments/static/css/default.css

@@ -66,7 +66,7 @@ pre {
     overflow: auto;
     display: block;
     padding: 9.5px;
-    margin: 0px 0px 10px;
+    margin: 0px 0px 0px 0px;
     font-size: 13px;
     line-height: 1.42857;
     background-color: #F5F5F5;
@@ -80,4 +80,4 @@ code, kbd, pre, samp {
 
 * {
     box-sizing: border-box;
-}
+}

mfr/extensions/codepygments/templates/viewer.mako

@@ -1,8 +1,7 @@
-<link rel="stylesheet" href="${base}/css/default.css">
+<script src="/assets/codepygments.js"></script>
 
 <div style="word-wrap: break-word;" class="mfrViewer">
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/docx/templates/viewer.mako

@@ -2,5 +2,4 @@
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/image/templates/viewer.mako

@@ -1,4 +1,3 @@
 <img style="max-width: 100%;" src="${url}">
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/ipynb/templates/viewer.mako

@@ -1,15 +1,14 @@
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="${base}/css/ipynb.css">
-<link rel="stylesheet" href="${base}/css/pygments.css">
-<link rel="stylesheet" href="/static/css/default.css">
+<link rel="stylesheet" href="/assets/ipynb.css">
+<link rel="stylesheet" href="/assets/md.css">
 
 <div style="word-wrap: break-word;" class="mfrViewer mfr-ipynb-body">
     ${body | n}
 </div>
 
+<script src="/assets/pygments.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>
 <script>
     (function () {
         MathJax.Hub.Config({

mfr/extensions/jamovi/templates/viewer.mako

@@ -2,5 +2,4 @@
   ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/jasp/templates/viewer.mako

@@ -2,5 +2,4 @@
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/jsc3d/templates/viewer.mako

@@ -1,77 +1,47 @@
-<link rel="stylesheet" href="/static/css/bootstrap.min.css">
 <style type="text/css">
     .popover {
         max-width: 100%;
     }
 </style>
-<script src="/static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
-<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
+
+<script>
+    window.fileUrl = '${url}';
+    window.ext = '${ext}';
+</script>
 
 <canvas id="mfrViewer" tabindex="-1"></canvas>
 <a style="position: absolute; top: 10px; right: 10px; cursor: pointer;"
    data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true"
    data-content="<p><b> Rotate:</b> Click and drag</p>
                  <p><b> Pan:</b> Ctrl + click and drag</p>
                  <p><b> Zoom:</b> Shift + click and drag up/down</p>">
-   <img src="${base}/images/question-circle.png">
+   <img src="/assets/question-circle.png">
 </a>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/jsc3d-init.js"></script>
+
+<script src="/assets/mfr.child.js"></script>
 
 <!--[if !IE]><!-->
-<script type="text/javascript" src="${base}/js/jsc3d.js"></script>
+<script type="text/javascript" src="/assets/jsc3d.js"></script>
 <!--<![endif]-->
 <!--[if IE]>
-<script type="text/javascript" src="${base}/js/jsc3d_ie.js"></script>
+<script type="text/javascript" src="/assets/jsc3d_ie.js"></script>
 <script type="text/javascript">
   JSC3D.Texture.cv = document.getElementById('mfrViewer');
 </script>
 <![endif]-->
-<script src="${base}/js/jsc3d.touch.js"></script>
-<script src="${base}/js/jsc3d.webgl.js"></script>
+<script src="/assets/jsc3d.touch.js"></script>
+<script src="/assets/jsc3d.webgl.js"></script>
 
 % if ext in ['.3ds']:
-<script src="${base}/js/jsc3d.3ds.js"></script>
+<script src="/assets/jsc3d.3ds.js"></script>
 % elif ext in ['.ctm']:
-<script src="${base}/js/jsc3d.ctm.js"></script>
+<script src="/assets/jsc3d.ctm.js"></script>
 % endif
 
 <script>
-    $(function () {
-        $('[data-toggle="popover"]').popover();
-        $('#mfrViewer').bind('contextmenu', function () { return false; });
-        window.focus();
-
-        var canvas = document.getElementById('mfrViewer');
-        canvas.width = window.innerWidth;
-        canvas.height = 500;
-
-        var viewer = new JSC3D.Viewer(canvas);
-        viewer.setParameter('SceneUrl', '${ext}');
-        viewer.setParameter('InitRotationX', -15);
-        viewer.setParameter('InitRotationY', 0);
-        viewer.setParameter('InitRotationZ', 0);
-        viewer.setParameter('ModelColor', '#CCCCCC');
-        viewer.setParameter('BackgroundColor1', '#FFFFFF');
-        viewer.setParameter('BackgroundColor2', '#FFFFFF');
-        viewer.setParameter('RenderMode', 'textureflat');
-        viewer.setParameter('MipMapping', 'on');
-        viewer.setParameter('Renderer', 'webgl');
-        viewer.setParameter('Definition', 'high');
+    console.log("FIRST");
+</script>
 
-        var _getLoader = JSC3D.LoaderSelector.getLoader;
-        JSC3D.LoaderSelector.getLoader = function (fileExtName) {
-            var loader = _getLoader(fileExtName);
-            if (!loader) {
-                return viewer.reportProgress('Unable to load renderer for file of type \'' + fileExtName + '\'', 0);
-            }
-            var _loadFromUrl = loader.loadFromUrl;
-            loader.loadFromUrl = _loadFromUrl.bind(loader, '${url}');
-            return loader;
-        };
 
-        viewer.init();
-        viewer.update();
-   });
-</script>

mfr/extensions/md/templates/viewer.mako

@@ -4,5 +4,4 @@
 ${body}
 </div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>

mfr/extensions/pdb/templates/viewer.mako

@@ -1,35 +1,34 @@
 <div id="mfrViewer"></div>
 
-<script src="/static/js/mfr.js"></script>
-<script src="/static/js/mfr.child.js"></script>
+<script src="/assets/mfr.child.js"></script>
 <script>
     window.pymChild.sendMessage('embed', 'embed-responsive-16by9');
 </script>
 
-<script src="/static/js/jquery-1.11.3.min.js"></script>
-<script src="${base}/js/gl-matrix.js"></script>
-<script src="${base}/js/core.js"></script>
-<script src="${base}/js/geom.js"></script>
-<script src="${base}/js/trace.js"></script>
-<script src="${base}/js/symmetry.js"></script>
-<script src="${base}/js/mol.js"></script>
-<script src="${base}/js/io.js"></script>
-<script src="${base}/js/vert-assoc.js"></script>
-<script src="${base}/js/buffer-allocators.js"></script>
-<script src="${base}/js/vertex-array-base.js"></script>
-<script src="${base}/js/indexed-vertex-array.js"></script>
-<script src="${base}/js/vertex-array.js"></script>
-<script src="${base}/js/chain-data.js"></script>
-<script src="${base}/js/geom-builders.js"></script>
-<script src="${base}/js/scene.js"></script>
-<script src="${base}/js/render.js"></script>
-<script src="${base}/js/shade.js"></script>
-<script src="${base}/js/cam.js"></script>
-<script src="${base}/js/shaders.js"></script>
-<script src="${base}/js/framebuffer.js"></script>
-<script src="${base}/js/slab.js"></script>
-<script src="${base}/js/animation.js"></script>
-<script src="${base}/js/viewer.js"></script>
+<script src="/assets/jquery-1.11.3.min.js"></script>
+<script src="/assets/gl-matrix.js"></script>
+<script src="/assets/core.js"></script>
+<script src="/assets/geom.js"></script>
+<script src="/assets/trace.js"></script>
+<script src="/assets/symmetry.js"></script>
+<script src="/assets/mol.js"></script>
+<script src="/assets/io.js"></script>
+<script src="/assets/vert-assoc.js"></script>
+<script src="/assets/buffer-allocators.js"></script>
+<script src="/assets/vertex-array-base.js"></script>
+<script src="/assets/indexed-vertex-array.js"></script>
+<script src="/assets/vertex-array.js"></script>
+<script src="/assets/chain-data.js"></script>
+<script src="/assets/geom-builders.js"></script>
+<script src="/assets/scene.js"></script>
+<script src="/assets/render.js"></script>
+<script src="/assets/shade.js"></script>
+<script src="/assets/cam.js"></script>
+<script src="/assets/shaders.js"></script>
+<script src="/assets/framebuffer.js"></script>
+<script src="/assets/slab.js"></script>
+<script src="/assets/animation.js"></script>
+<script src="/assets/viewer.js"></script>
 <script>
     (function () {
         var viewer = pv.Viewer($('#mfrViewer')[0], ${options});