Restructring to make OSMD work via script tag.

Signed-off-by: Sebastian Haas <sebastian@haas.tech>

Gruntfile.js

@@ -31,25 +31,29 @@ module.exports = function (grunt) {
         // Browserify
         browserify: {
             dist: {
-                src: [].concat(typings, src),
+                src: ['src/OSMD/OSMD.ts'],
                 dest: '<%= outputDir.build %>/osmd.js',
                 options: {
-                    banner: "<%= banner %>"
+                    banner: "<%= banner %>",
+                    browserifyOptions: {
+                        standalone: 'opensheetmusicdisplay'
+                    }
                 }
             },
-            demo: {
-                src: [].concat(typings, src, ['demo/inject.ts']),
-                dest: '<%= outputDir.build %>/demo/osmd-demo.js',
+            debug: {
+                src: ['src/OSMD/OSMD.ts'],
+                dest: '<%= outputDir.build %>/osmd-debug.js',
                 options: {
                     banner: "<%= banner %>",
                     browserifyOptions: {
-                        debug: true
+                        debug: true,
+                        standalone: 'opensheetmusicdisplay'                        
                     }
                 }
             },
-            debug: {
+            test: {
                 src: [].concat(typings, src, test),
-                dest: '<%= outputDir.build %>/osmd-debug.js',
+                dest: '<%= outputDir.build %>/osmd-test.js',
                 options: {
                     banner: "<%= banner %>",
                     browserifyOptions: {
@@ -69,8 +73,7 @@ module.exports = function (grunt) {
                 },
                 banner: banner,
                 mangle: true,
-                mangleProperties: true,
-                preserveComments: 'all'
+                mangleProperties: true
             },
             bundle: {
                 files: {
@@ -158,7 +161,8 @@ module.exports = function (grunt) {
             demo: {
                 files: [
                     { src: ['*'], dest: '<%= outputDir.build %>/demo/sheets/', cwd: './test/data/', expand: true },
-                    { src: ['*.js', '*.css', '*.html'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' }
+                    { src: ['*.js', '*.css', '*.html'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' },
+                    { src: ['osmd-debug.js'], cwd: './build/', expand: true, dest: '<%= outputDir.build %>/demo/' }
                 ]
             }
         },
@@ -198,8 +202,8 @@ module.exports = function (grunt) {
     grunt.registerTask('docs',        'Builds class documentation to /build/docs',   ['typedoc']);
 
     // Build tasks
-    grunt.registerTask('build:demo',  'Builds the demo.',                            ['browserify:demo', 'copy:demo']);
-    grunt.registerTask('build:test',  'Builds the tests',                            ['browserify:debug']);
+    grunt.registerTask('build:demo',  'Builds the demo.',                            ['browserify:debug', 'copy:demo']);
+    grunt.registerTask('build:test',  'Builds the tests',                            ['browserify:test']);
     grunt.registerTask('build:dist',  'Builds for distribution on npm and Bower.',   ['browserify:dist', 'uglify', 'ts']);
 
     // Tests

demo/demo.js

@@ -1,10 +1,9 @@
 /*jslint browser:true */
 (function () {
     "use strict";
-    // The MusicSheet object
-    var sheet,
+    var OSMD;
     // The folder of the demo files
-        folder = "sheets/",
+    var folder = "sheets/",
     // The available demos
         demos = {
             "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1",
@@ -78,9 +77,9 @@
             scale();
         };
 
-        // Create sheet object and canvas
-        sheet = new window.OSMD(canvas);
-        sheet.setLogLevel('info');
+        // Create OSMD object and canvas
+        OSMD = new opensheetmusicdisplay.OSMD(canvas);
+        OSMD.setLogLevel('info');
         document.body.appendChild(canvas);
 
         // Set resize event handler
@@ -92,7 +91,7 @@
                 var width = document.body.clientWidth;
                 canvas.width = width;
                 try {
-                sheet.render();
+                OSMD.render();
                 } catch (e) {}
                 enable();
             }
@@ -101,17 +100,17 @@
         window.addEventListener("keydown", function(e) {
             var event = window.event ? window.event : e;
             if (event.keyCode === 39) {
-                sheet.cursor.next();
+                OSMD.cursor.next();
             }
         });
         nextCursorBtn.addEventListener("click", function() {
-            sheet.cursor.next();
+            OSMD.cursor.next();
         });
         hideCursorBtn.addEventListener("click", function() {
-            sheet.cursor.hide();
+            OSMD.cursor.hide();
         });
         showCursorBtn.addEventListener("click", function() {
-            sheet.cursor.show();
+            OSMD.cursor.show();
         });
     }
 
@@ -151,9 +150,9 @@
             str = folder + select.value + ".xml";
         }
         zoom = 1.0;
-        sheet.load(str).then(
+        OSMD.load(str).then(
             function() {
-                return sheet.render();
+                return OSMD.render();
             },
             function(e) {
                 error("Error reading sheet: " + e);
@@ -185,8 +184,8 @@
     function scale() {
         disable();
         window.setTimeout(function(){
-            sheet.zoom = zoom;
-            sheet.render();
+            OSMD.zoom = zoom;
+            OSMD.render();
             enable();
         }, 0);
     }

demo/index.html

@@ -8,7 +8,7 @@
     <meta name="author" content="OpenSheetMusicDisplay contributors">
 
     <!-- Include opensheetmusicdisplay -->
-    <script src="osmd-demo.js"></script>
+    <script src="osmd-debug.js"></script>
 
     <!-- Include code and styles for this demo -->
     <script src="demo.js"></script>

demo/inject.ts

@@ -1,7 +0,0 @@
-import { OSMD } from "./../src/OSMD/OSMD";
-
-/* This file injects OSMD in the window object.
- * !!! HANDLE WITH CARE !!!
- */
-
-(window as any).OSMD = OSMD;