fix(demo/embedding): hide debug controls before rendering, always check showHeader option, only show debug controls by default on dev server (#661)

part of #661

demo/index.html

@@ -18,14 +18,14 @@
     <img src="./favicon.ico?" class="ui image">
     <%= htmlWebpackPlugin.options.title %>
 </h1>
-<div class="ui four column grid container" id="divControls">
+<div class="ui four column grid container" id="divControls" style="visibility: hidden">
     <div class="column">
         <h3 class="ui header">Select a sample:</h3>
-        <select class="ui selection dropdown" id="selectSample" style="width:320px; height:38%"></select>
+        <select class="ui selection dropdown" id="selectSample" style="width:320px; height:38%; visibility: hidden"></select>
     </div>
-    <div class="column">
+    <div class="column" id="backend-select-div" style="visibility: hidden">
         <h3 class="ui header">Render backend:</h3>
-        <select class="ui selection dropdown" id="backend-select" value="svg" style="height:38%">
+        <select class="ui selection dropdown" id="backend-select" value="svg" style="height:38%; visibility: hidden;">
             <option value="svg">SVG</option>
             <option value="canvas">Canvas</option>>
         </select>
@@ -83,7 +83,7 @@
     </div>
     <div class="column">
         <h3 class="ui header">Show bounding box for:</h3>
-        <select class="ui selection dropdown" id="selectBounding">
+        <select class="ui selection dropdown" id="selectBounding" style="visibility: hidden;">
             <option value="none">None</option>
             <option value="all">All</option>
             <option value="VexFlowMeasure">Measures</option>
@@ -128,7 +128,7 @@
     </div>
     <div class="column">
         <h3 class="ui header">Page size:</h3>
-        <select class="ui selection dropdown" id="selectPageSize">
+        <select class="ui selection dropdown" id="selectPageSize"  style="visibility: hidden;">
             <option value="endless">endless</option>
             <option value="A3 P">A3 Portrait</option>
             <option value="A3 L">A3 Landscape</option>

demo/index.js

@@ -69,11 +69,12 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         showCursorBtn,
         hideCursorBtn,
         backendSelect,
+        backendSelectDiv,
         debugReRenderBtn,
         debugClearBtn,
         selectPageSize,
         printPdfBtn;
-
+    
     // manage option setting and resetting for specific samples, e.g. in the autobeam sample autobeam is set to true, otherwise reset to previous state
     // TODO design a more elegant option state saving & restoring system, though that requires saving the options state in OSMD
     var minMeasureToDrawStashed = 1;
@@ -90,6 +91,12 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
     var showControls = true;
     var showZoomControl = true;
     var showHeader = true;
+    var showDebugControls = false;
+
+    if (process.env.OSMD_DEMO_TITLE) {
+        document.title = process.env.OSMD_DEMO_TITLE;
+    }
+
     // Initialization code
     function init() {
         var name, option;
@@ -102,11 +109,12 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         var paramZoom = findGetParameter('zoom');
         var paramOverflow = findGetParameter('overflow');
         var paramOpenUrl = findGetParameter('openUrl');
+        var paramDebugControls = findGetParameter('debugControls');
 
+        showHeader = (paramShowHeader !== '0');
         if (paramEmbedded !== undefined) {
-            showControls = (paramShowControls === '1');
-            showZoomControl = (paramShowZoomControl === '1');
-            showHeader = (paramShowHeader === '1');
+            showControls = (paramShowControls !== '0');
+            showZoomControl = (paramShowZoomControl !== '0');
         }
         if (paramZoom !== undefined) {
             if (paramZoom > 0.1 && paramZoom < 5.0) {
@@ -142,11 +150,29 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
         backendSelect = document.getElementById("backend-select");
+        backendSelectDiv = document.getElementById("backend-select-div");
         debugReRenderBtn = document.getElementById("debug-re-render-btn");
         debugClearBtn = document.getElementById("debug-clear-btn");
         selectPageSize = document.getElementById("selectPageSize");
         printPdfBtn = document.getElementById("print-pdf-btn");
 
+        //var defaultDisplayVisibleValue = "block"; // TODO in some browsers flow could be the better/default value
+        var defaultVisibilityValue = "visible";
+        var devDemoRunning = process.env.OSMD_DEBUG_CONTROLS;
+        showDebugControls = paramDebugControls === '1' || (devDemoRunning && paramDebugControls !== '0')
+        if (showDebugControls) {
+            var elementsToEnable = [
+                selectSample, selectBounding, selectPageSize, backendSelect, backendSelectDiv, divControls
+            ];
+            for (var i=0; i<elementsToEnable.length; i++) {
+                if (elementsToEnable[i].style) {
+                    elementsToEnable[i].style.visibility = defaultVisibilityValue;
+                }
+            }
+        } else {
+            divControls.style.display = "none";
+        }
+
         if (!showControls) {
             divControls.style.display = 'none';
         }
@@ -325,7 +351,6 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
             }
             console.log("[OSMD] selectSampleOnChange addEventListener change");
             // selectSampleOnChange();
-
         });
 
         if (paramOpenUrl !== undefined) {
@@ -351,7 +376,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
                 tmp = item.split('=');
                 if (tmp[0] === parameterName) {
                     result = decodeURIComponent(tmp[1]);
-                    console.log('Found param:' + parameterName + ' = ' + result);
+                    //console.log('Found param:' + parameterName + ' = ' + result);
                 }
             });
         return result;
@@ -367,7 +392,15 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         disable();
         var isCustom = typeof str === "string";
         if (!isCustom) {
-            str = sampleFolder + selectSample.value;
+            if (selectSample) {
+                str = sampleFolder + selectSample.value;
+            } else {
+                if (samples && samples.length > 0) {
+                    str = sampleFolder + samples[0];
+                } else {
+                    return; // no sample to load right now
+                }
+            }
         }
         // zoom = 1.0;
 
@@ -522,14 +555,27 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
     // Enable/Disable Controls
     function disable() {
         document.body.style.opacity = 0.3;
-        selectSample.disabled = zoomIn.disabled = zoomOut.disabled = "disabled";
+        setDisabledForControls("disabled");
     }
+
     function enable() {
         document.body.style.opacity = 1;
-        selectSample.disabled = zoomIn.disabled = zoomOut.disabled = "";
+        setDisabledForControls("");
         logCanvasSize();
     }
 
+    function setDisabledForControls(disabledValue) {
+        if (selectSample) {
+            selectSample.disabled = disabledValue;
+        }
+        if (zoomIn) {
+            zoomIn.disabled = disabledValue;
+        }
+        if (zoomOut) {
+            zoomOut.disabled = disabledValue;
+        }
+    }
+
     // Register events: load, drag&drop
     window.addEventListener("load", function () {
         init();

webpack.dev.js

@@ -1,7 +1,17 @@
 var merge = require('webpack-merge')
 var common = require('./webpack.common.js')
+var webpack = require('webpack')
 
 module.exports = merge(common, {
     devtool: 'inline-source-map',
-    mode: 'development'
+    mode: 'development',
+    plugins: [
+        new webpack.EnvironmentPlugin({
+            STATIC_FILES_SUBFOLDER: false, // Set to other directory if NOT using webpack-dev-server
+            DEBUG: false,
+            OSMD_DEBUG_CONTROLS: true, // unfortunately, cross-env doesn't seem enough to set this in the demo when using npm start
+            OSMD_DEMO_TITLE: 'OpenSheetMusicDisplay Demo (Developer)',
+            DRAW_BOUNDING_BOX_ELEMENT: false //  Specifies the element to draw bounding boxes for (e.g. 'GraphicalLabels'). If 'all', bounding boxes are drawn for all elements.
+        })
+    ]
 })