Auto resize to window's width

karma.conf.js

@@ -55,7 +55,7 @@ module.exports = function (config) {
 
         // level of logging
         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
+        logLevel: config.LOG_WARN,
 
         // enable / disable watching file and executing tests whenever any file changes
         autoWatch: false,

src/OSMD/OSMD.ts

@@ -8,17 +8,21 @@ import {MusicSheet} from "./../MusicalScore/MusicSheet";
 import {Cursor} from "./Cursor";
 import {openMxl} from "../Common/FileIO/Mxl";
 import {Promise} from "es6-promise";
+import {handleResize} from "./ResizeHandler";
 
 export class OSMD {
     /**
      * The easy way of displaying a MusicXML sheet music file
-     * @param container is either the id, or the actual "div" element which will host the music sheet
+     * @param container is either the ID, or the actual "div" element which will host the music sheet
+     * @autoResize automatically resize the sheet to full page width on window resize
      */
-    constructor(container: string|HTMLElement) {
+    constructor(container: string|HTMLElement, autoResize: boolean = false) {
         // Store container element
         if (typeof container === "string") {
+            // ID passed
             this.container = document.getElementById(<string>container);
         } else if (container && "appendChild" in <any>container) {
+            // Element passed
             this.container = <HTMLElement>container;
         }
         if (!this.container) {
@@ -37,6 +41,9 @@ export class OSMD {
         this.drawer = new VexFlowMusicSheetDrawer(this.heading, this.canvas);
         // Create the cursor
         this.cursor = new Cursor(inner, this);
+        if (autoResize) {
+            this.autoResize();
+        }
     }
 
     public cursor: Cursor;
@@ -141,4 +148,24 @@ export class OSMD {
         this.zoom = 1.0;
         this.resetHeadings();
     }
+
+    private autoResize(): void {
+        let self: OSMD = this;
+        handleResize(
+            () => {
+                // empty
+            },
+            () => {
+                let width: number = Math.max(
+                    document.documentElement.clientWidth,
+                    document.body.scrollWidth,
+                    document.documentElement.scrollWidth,
+                    document.body.offsetWidth,
+                    document.documentElement.offsetWidth
+                );
+                self.container.style.width = width + "px";
+                self.render();
+            }
+        );
+    }
 }

src/OSMD/ResizeHandler.ts

@@ -0,0 +1,44 @@
+/**
+ * Created by acondolu on 15/07/16.
+ */
+
+/**
+ * Helper function for managing window's onResize events
+ * @param startCallback
+ * @param endCallback
+ */
+export function handleResize(startCallback: () => void, endCallback: () => void): void {
+    "use strict";
+    let rtime: number;
+    let timeout: number = undefined;
+    let delta: number = 200;
+
+    function resizeEnd(): void {
+        //timeout = undefined;
+        window.clearTimeout(timeout);
+        if ((new Date()).getTime() - rtime < delta) {
+            timeout = window.setTimeout(resizeEnd, delta);
+        } else {
+            endCallback();
+        }
+    }
+
+    function resizeStart(): void {
+        rtime = (new Date()).getTime();
+        if (!timeout) {
+            startCallback();
+            rtime = (new Date()).getTime();
+            timeout = window.setTimeout(resizeEnd, delta);
+        }
+    }
+
+    if ((<any>window).attachEvent) {
+        // Support IE<9
+        (<any>window).attachEvent("onresize", resizeStart);
+    } else {
+        window.addEventListener("resize", resizeStart);
+    }
+
+    window.setTimeout(startCallback, 0);
+    window.setTimeout(endCallback, 1);
+}

test/Common/OSMD/OSMD.ts

@@ -11,4 +11,12 @@ describe("OSMD Main Export", () => {
         done();
     });
 
+    it("container", (done: MochaDone) => {
+        let div: HTMLElement = document.createElement("div");
+        chai.expect(() => {
+            return new OSMD(div);
+        }).to.not.throw(Error);
+        done();
+    });
+
 });