fix a bug + allow dynamic resize

2017-05-01 09:52:04 -04:00 · 2017-05-01 09:52:04 -04:00 · 7aa4a8824c
--- a/index.html
+++ b/index.html
@ -1,6 +1,6 @@
 <!DOCTYPE html>

-<html lang="en" style="height:100%">
+<html lang="en">
 <head>
    <meta charset="utf-8" />
    <!-- VSS Framework --> 
@ -10,7 +10,7 @@
    <link rel="stylesheet" href="styles/style.css" type="text/css"/>
 </head>

-<body style="height:100%">
+<body>
    <script>
        VSS.init({
            explicitNotifyLoaded: true,
--- a/scripts/control.ts
+++ b/scripts/control.ts
@ -8,19 +8,40 @@ import { InputParser } from "./InputParser";
 import { Model } from "./model";
 import { colorControl } from "./view";
 import { ErrorView } from "./errorView";
+import * as VSSUtilsCore from "VSS/Utils/Core";
 import * as Q from "q";

 export class Controller {

    private _fieldName: string = "";
-
    private _inputs: IDictionaryStringTo<string>;
-
    private _model: Model;
-
    private _view: colorControl;

+    /**
+     * Store the last recorded window width to know
+     * when we have been shrunk and should resize
+     */
+    private _windowWidth: number;
+    private _minWindowWidthDelta: number = 10; // Minum change in window width to react to
+    private _windowResizeThrottleDelegate: Function;
+    private _bodyElement: HTMLBodyElement;
+
    constructor() {        
+        this._bodyElement = <HTMLBodyElement>document.getElementsByTagName("body").item(0);
+
+        this._windowResizeThrottleDelegate = VSSUtilsCore.throttledDelegate(this, 50, () => {
+            this._windowWidth = window.innerWidth;
+            this.resize();
+        });
+
+        this._windowWidth = window.innerWidth;
+        $(window).resize(() => {
+            if(Math.abs(this._windowWidth - window.innerWidth) > this._minWindowWidthDelta) {
+               this._windowResizeThrottleDelegate.call(this);
+            }
+        });
+
        this._initialize();
    }

@ -50,6 +71,8 @@ export class Controller {
                            this._model.selectPreviousOption();
                            this._updateInternal(this._model.getSelectedValue());
                        });
+
+                        this.resize();
                    }, this._handleError
                ).then(null, this._handleError);
            },
@ -84,4 +107,9 @@ export class Controller {
    public getFieldName(): string {
        return this._fieldName;
    }
+
+    protected resize() {
+        // Cast as any until declarations are updated
+        (VSS as any).resize(null, this._bodyElement.offsetHeight);  
+    }
 }
--- a/scripts/view.ts
+++ b/scripts/view.ts
@ -149,7 +149,7 @@ export class colorControl {

    private _click(evt: JQueryMouseEventObject): void {
        let itemClicked = $(evt.target).closest(".row").data("value");
-        if (!!itemClicked && !!this.onItemClicked) {
+        if (itemClicked != null && $.isFunction(this.onItemClicked)) {
            this.onItemClicked(itemClicked);
        }
    }
--- a/vss-extension.json
+++ b/vss-extension.json
@ -1,7 +1,7 @@
 {
    "manifestVersion": 1,
    "id": "color-form-control",
-    "version": "1.0.2",
+    "version": "1.0.3",
    "name": "Color picklist control",
    "description": "Add custom colors and labels for picklist fields.",
    "publisher": "ms-devlabs",