Home Explore Help
Sign In
liujunchi
/
osmd-extended
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Changed demo to use webpack-dev-server and host it with hot reload

Benjamin Giesinger 7 years ago
parent
5b3d8079ec
commit
ff439a1f69
4 changed files with 50 additions and 37 deletions
Split View Show Diff Stats
  1. 3 3
      demo/index.html
  2. 19 17
      demo/index.js
  3. 5 1
      package.json
  4. 23 16
      webpack.config.js

+ 3 - 3
demo/index.html
View File 

@@ -8,11 +8,11 @@
 
     <meta name="author" content="OpenSheetMusicDisplay contributors">
 
 
     <!-- Include opensheetmusicdisplay -->
 
-    <script src="osmd-debug.js"></script>
 
+    <!-- <script src="./osmd.js" type="text/javascript"></script> -->
 
 
     <!-- Include code and styles for this demo -->
 
-    <script src="demo.js"></script>
 
-    <link href="demo.css" media="all" rel="stylesheet"/>
 
+    <script src="./demo.js" type="text/javascript"></script>
 
+    <link href="./demo.css" media="all" rel="stylesheet"/>
 
     <link rel="icon" href="./favicon.ico?" type="image/x-icon"/>
 
 </head>
 
 <body>

+ 19 - 17
demo/demo.js → demo/index.js
View File 

@@ -1,11 +1,14 @@
 
+import { OSMD } from '../src/OSMD/OSMD';
 
+
 
 /*jslint browser:true */
 
 (function () {
 
     "use strict";
 
-    var OSMD;
 
+    var osmdObj;
 
     // The folder of the demo files
 
-    var folder = "sheets/",
 
+    var folder = "",
 
     // The available demos
 
         demos = {
 
+            "Beethoven - AnDieFerneGeliebte": "Beethoven_AnDieFerneGeliebte.xml",
 
             "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1.xml",
 
             "M. Clementi - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2.xml",
 
             "M. Clementi - Sonatina Op.36 No.3 Pt.1": "MuzioClementi_SonatinaOpus36No3_Part1.xml",
 
@@ -19,7 +22,6 @@
 
             "S. Joplin - The Entertainer": "ScottJoplin_The_Entertainer.xml",
 
             "ActorPreludeSample": "ActorPreludeSample.xml",
 
             "an chloe - mozart": "an chloe - mozart.xml",
 
-            "Beethoven - AnDieFerneGeliebte": "AnDieFerneGeliebte_Beethoven.xml",
 
             "das veilchen - mozart": "das veilchen - mozart.xml",
 
             "Dichterliebe01": "Dichterliebe01.xml",
 
             "mandoline - debussy": "mandoline - debussy.xml",
 
@@ -89,8 +91,8 @@
 
         };
 
 
         // Create OSMD object and canvas
 
-        OSMD = new opensheetmusicdisplay.OSMD(canvas, false);
 
-        OSMD.setLogLevel('info');
 
+        osmdObj = new OSMD(canvas, false);
 
+        osmdObj.setLogLevel('info');
 
         document.body.appendChild(canvas);
 
 
         // Set resize event handler
 
@@ -102,7 +104,7 @@
 
                 var width = document.body.clientWidth;
 
                 canvas.width = width;
 
                 try {
 
-                OSMD.render();
 
+                osmdObj.render();
 
                 } catch (e) {}
 
                 enable();
 
             }
 
@@ -111,28 +113,28 @@
 
         window.addEventListener("keydown", function(e) {
 
             var event = window.event ? window.event : e;
 
             if (event.keyCode === 39) {
 
-                OSMD.cursor.next();
 
+                osmdObj.cursor.next();
 
             }
 
         });
 
         nextCursorBtn.addEventListener("click", function() {
 
-            OSMD.cursor.next();
 
+            osmdObj.cursor.next();
 
         });
 
         resetCursorBtn.addEventListener("click", function() {
 
-            OSMD.cursor.reset();
 
+            osmdObj.cursor.reset();
 
         });
 
         hideCursorBtn.addEventListener("click", function() {
 
-            OSMD.cursor.hide();
 
+            osmdObj.cursor.hide();
 
         });
 
         showCursorBtn.addEventListener("click", function() {
 
-            OSMD.cursor.show();
 
+            osmdObj.cursor.show();
 
         });
 
 
         backendSelect.addEventListener("change", function(e) {
 
             var value = e.target.value;
 
             // clears the canvas element
 
             canvas.innerHTML = "";
 
-            OSMD = new opensheetmusicdisplay.OSMD(canvas, false, value);
 
-            OSMD.setLogLevel('info');
 
+            osmdObj = new opensheetmusicdisplay.OSMD(canvas, false, value);
 
+            osmdObj.setLogLevel('info');
 
             selectOnChange();
 
 
         });
 
@@ -174,9 +176,9 @@
 
             str = folder + select.value;
 
         }
 
         zoom = 1.0;
 
-        OSMD.load(str).then(
 
+        osmdObj.load(str).then(
 
             function() {
 
-                return OSMD.render();
 
+                return osmdObj.render();
 
             },
 
             function(e) {
 
                 error("Error reading sheet: " + e);
 
@@ -208,8 +210,8 @@
 
     function scale() {
 
         disable();
 
         window.setTimeout(function(){
 
-            OSMD.zoom = zoom;
 
-            OSMD.render();
 
+            osmdObj.zoom = zoom;
 
+            osmdObj.render();
 
             enable();
 
         }, 0);
 
     }

+ 5 - 1
package.json
View File 

@@ -58,6 +58,9 @@
 
     "@types/chai": "^4.0.3",
 
     "@types/loglevel": "^1.4.29",
 
     "@types/mocha": "^2.2.40",
 
+    "babel-core": "^6.26.0",
 
+    "babel-loader": "^7.1.2",
 
+    "babel-preset-es2015": "^6.24.1",
 
     "browserify": "^14.0.0",
 
     "chai": "^4.1.0",
 
     "cz-conventional-changelog": "^2.0.0",
 
@@ -73,6 +76,7 @@
 
     "grunt-webpack": "^3.0.0",
 
     "grunt-webpack-server": "^0.1.0",
 
     "http-server": "^0.10.0",
 
+    "jquery": "^3.2.1",
 
     "jshint": "^2.9.4",
 
     "karma": "^1.1.1",
 
     "karma-base64-to-js-preprocessor": "^0.0.1",
 
@@ -93,7 +97,7 @@
 
     "typescript": "^2.6.1",
 
     "uglifyjs-webpack-plugin": "^1.0.1",
 
     "webpack": "^3.5.5",
 
-    "webpack-dev-server": "^2.9.1"
 
+    "webpack-dev-server": "2.7.1"
 
   },
 
   "config": {
 
     "commitizen": {

+ 23 - 16
webpack.config.js
View File 

@@ -2,14 +2,9 @@ var path = require('path');
 
 var webpack = require('webpack');
 
 
 module.exports = {
 
-  // entry: [
 
-  //   './src/OSMD/OSMD.ts'
 
-  //   // TODO: Add demo.js where the webdev server is implemented
 
-  //   //
 
-  // ],
 
   entry: {
 
-    'osmd': './src/OSMD/OSMD.ts',
 
-    'demo': './demo/demo.js'
 
+    'osmd': './src/OSMD/OSMD.ts', // Main library
 
+    'demo': './demo/index.js' // Demo index
 
   },
 
   output: {
 
       path: path.resolve(__dirname, 'build'),
 
@@ -22,26 +17,38 @@ module.exports = {
 
    module: {
 
        loaders: [
 
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
 
-           { test: /\.tsx?$/, loader: 'ts-loader' }
 
+           { test: /\.tsx?$/, loader: 'ts-loader' },
 
+           // all files with a '.js' extension. Mostly for the web demo.
 
+           { test: /\.jsx?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/,
 
+              query: {
 
+                presets: ['es2015'] 
+              }
 
+          },
 
        ]
 
    },
 
    plugins: [
 
      // build optimization plugins
 
      new webpack.LoaderOptionsPlugin({
 
       minimize: true,
 
-      debug: false
 
+      debug: true
 
     }),
 
-    new webpack.optimize.UglifyJsPlugin({
 
-        warnings: false,
 
-        beautify: false,
 
-        compress: true,
 
-        comments: false,
 
-        sourceMap: true
 
-      })
 
+    new webpack.ProvidePlugin({
 
+      $: 'jquery',
 
+      jQuery: 'jquery'
 
+    }),
 
+    // FIXME: use environment variable to control uglify.
 
+    // new webpack.optimize.UglifyJsPlugin({
 
+    //     warnings: false,
 
+    //     beautify: false,
 
+    //     compress: true,
 
+    //     comments: false,
 
+    //     sourceMap: true
 
+    //   })
 
   ],
 
   devServer: {
 
     contentBase: [
 
       path.join(__dirname, 'test/data'),
 
+      path.join(__dirname, 'build'),
 
       path.join(__dirname, 'demo')
 
       // TODO: fill in paths for demo data
 
     ],