Merging 4.5.2 changes

acidb · Jan 24, 2019 · 8b956d3 · 8b956d3
1 parent a1ef109
commit 8b956d3
Show file tree

Hide file tree

Showing 33 changed files with 3,331 additions and 1,105 deletions.
diff --git a/examples/angular/package-lock.json b/examples/angular/package-lock.json
diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -21,7 +21,7 @@
         "@angular/platform-browser": "^5.2.11",
         "@angular/platform-browser-dynamic": "^5.2.11",
         "@angular/router": "^5.2.11",
-        "@mobiscroll/angular-lite": "^4.5.0",
+        "@mobiscroll/angular-lite": "^4.5.2",
         "core-js": "^2.5.7",
         "rxjs": "^5.5.11",
         "zone.js": "^0.8.26"

diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -1,23 +1,23 @@
 {
-  "name": "react-app",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@mobiscroll/react-lite": "^4.5.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "^2.1.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+    "name": "react-app",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@mobiscroll/react-lite": "^4.5.2",
+        "react": "^16.4.1",
+        "react-dom": "^16.4.1",
+        "react-scripts": "^2.1.3"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test --env=jsdom",
+        "eject": "react-scripts eject"
+    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not ie <= 11",
+        "not op_mini all"
+    ]
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mobiscroll",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "description": "Cross platform UI controls for progressive web an hybrid apps",
   "homepage": "https://mobiscroll.com/",
   "license": "Apache-2.0",

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/angular-lite",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "description": "Angular UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

diff --git a/packages/angularjs/package.json b/packages/angularjs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/angularjs-lite",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "description": "AngularJS UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

diff --git a/packages/javascript/package.json b/packages/javascript/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/javascript-lite",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "description": "Framework agnostic UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

diff --git a/packages/jquery/package.json b/packages/jquery/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/jquery-lite",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "description": "jQuery and jQuery Mobile UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@mobiscroll/react-lite",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "description": "React UI library for progressive web and hybrid apps",
     "homepage": "https://mobiscroll.com/",
     "license": "Apache-2.0",

diff --git a/src/js/classes/frame.d.ts b/src/js/classes/frame.d.ts
@@ -12,10 +12,13 @@ export interface MbscFrameOptions extends MbscCoreOptions {
     focusOnClose?: boolean | string | HTMLElement;
     focusTrap?: boolean;
     headerText?: string | boolean | ((formattedValue: string) => string);
+    layout?: 'liquid' | 'fixed';
     scrollLock?: boolean;
     showOnFocus?: boolean;
     showOnTap?: boolean;
     touchUi?: boolean;
+    labelStyle?: 'stacked' | 'inline' | 'floating';
+    inputStyle?: 'underline' | 'box' | 'outline';
 
     // Events
     onBeforeClose?(event: { valueText: string, button: string }, inst: any): void;

diff --git a/src/js/classes/frame.js b/src/js/classes/frame.js
@@ -36,7 +36,6 @@ export const Frame = function (el, settings, inherit) {
         btn,
         ctx,
         doAnim,
-        firstPosition,
         hasContext,
         isModal,
         isInserted,
@@ -111,6 +110,7 @@ export const Frame = function (el, settings, inherit) {
     function onShow(prevFocus) {
         if (!prevFocus && !isAndroid && that._activeElm) {
             //overlay.focus();
+            lastFocus = new Date();
             that._activeElm.focus();
         }
         //that.ariaMessage(s.ariaMessage);
@@ -174,24 +174,21 @@ export const Frame = function (el, settings, inherit) {
     }
 
     function onPosition() {
-        if (firstPosition) {
-            firstPosition = false;
-            return;
-        }
         clearTimeout(posDebounce);
         posDebounce = setTimeout(function () {
-            that.position(true);
-            // Trigger reflow, needed on iOS safari, when orientation is changed
-            popup.style.visibility = 'hidden';
-            popup.offsetHeight;
-            popup.style.visibility = '';
+            if (that.position(true)) {
+                // Trigger reflow, needed on iOS safari, when orientation is changed
+                popup.style.visibility = 'hidden';
+                popup.offsetHeight;
+                popup.style.visibility = '';
+            }
         }, 200);
     }
 
     function onFocus(ev) {
         if (mobiscroll.activeInstance == that && ev.target.nodeType && !overlay.contains(ev.target) && new Date() - lastFocus > 100) {
-            that._activeElm.focus();
             lastFocus = new Date();
+            that._activeElm.focus();
         }
     }
 
@@ -226,7 +223,6 @@ export const Frame = function (el, settings, inherit) {
         }
 
         isInserted = true;
-        firstPosition = true;
 
         that._markupInserted($markup);
 
@@ -320,6 +316,10 @@ export const Frame = function (el, settings, inherit) {
     }
 
     function show(beforeShow, $elm) {
+        if (that._isVisible) {
+            return;
+        }
+
         if (beforeShow) {
             beforeShow();
         }
@@ -367,6 +367,8 @@ export const Frame = function (el, settings, inherit) {
             isWrapped,
             newHeight,
             newWidth,
+            oldHeight,
+            oldWidth,
             width,
             top,
             left,
@@ -380,11 +382,12 @@ export const Frame = function (el, settings, inherit) {
             return false;
         }
 
+        oldWidth = wndWidth;
+        oldHeight = wndHeight;
         newHeight = markup.offsetHeight;
         newWidth = markup.offsetWidth;
 
         if (!newWidth || !newHeight || (wndWidth === newWidth && wndHeight === newHeight && check)) {
-            firstPosition = false;
             return;
         }
 
@@ -433,6 +436,8 @@ export const Frame = function (el, settings, inherit) {
                 target: markup,
                 popup: popup,
                 hasTabs: isWrapped,
+                oldWidth: oldWidth,
+                oldHeight: oldHeight,
                 windowWidth: newWidth,
                 windowHeight: newHeight
             }) === false || !isModal) {
@@ -513,6 +518,8 @@ export const Frame = function (el, settings, inherit) {
         css.left = Math.floor(left);
 
         $popup.css(css);
+
+        return true;
     };
 
     /**
@@ -901,6 +908,7 @@ export const Frame = function (el, settings, inherit) {
                 mobiscroll.activeInstance = prevInst;
             }
             $(window).off('keydown', onWndKeyDown);
+            $wnd.off('focusin', onFocus);
         }
 
         // Hide wheels and overlay
@@ -916,9 +924,6 @@ export const Frame = function (el, settings, inherit) {
             }
 
             that._detachEvents($markup);
-
-            // Stop positioning on window resize
-            $wnd.off('focusin', onFocus);
         }
 
         if (callback) {

diff --git a/src/js/classes/input.js b/src/js/classes/input.js
@@ -1,6 +1,6 @@
 import { FormControl, addIconToggle } from './form-control';
 
-const events = ['focus', 'change', 'blur'];
+const events = ['focus', 'change', 'blur', 'animationstart'];
 
 export class Input extends FormControl {
     constructor(elm, settings) {
@@ -15,20 +15,14 @@ export class Input extends FormControl {
         events.forEach(ev => {
             this._$elm.on(ev, this.checkLabel);
         });
-
-        setTimeout(() => {
-            // if label is floating and input is autofill, add floating active class
-            // input has no value yet
-            if (this._isFloating && this._$elm.is('*:-webkit-autofill')) {
-                this._$parent.addClass('mbsc-label-floating-active');
-            }
-        });
     }
 
-
     checkLabel(ev) {
         if (this._isFloating) {
-            if (this._elm.value || (ev && ev.type == 'focus')) {
+            // In case of autofill in webkit browsers the animationstart event will fire 
+            // due to the empty animation added in the css,
+            // because there's no other event in case of the initial autofill
+            if (this._elm.value || (ev && (ev.type == 'focus' || (ev.type == 'animationstart' && this._$elm.is('*:-webkit-autofill'))))) {
                 this._$parent.addClass('mbsc-label-floating-active');
             } else {
                 this._$parent.removeClass('mbsc-label-floating-active');

diff --git a/src/js/classes/scroller.d.ts b/src/js/classes/scroller.d.ts
@@ -4,7 +4,6 @@ export interface MbscScrollerOptions extends MbscFrameOptions {
     // Settings
     circular?: boolean | Array<boolean>;
     height?: number;
-    layout?: 'liquid' | 'fixed';
     maxWidth?: number | Array<number>;
     minWidth?: number | Array<number>;
     multiline?: number;

diff --git a/src/js/classes/scroller.js b/src/js/classes/scroller.js
@@ -647,8 +647,8 @@ export const Scroller = function (el, settings, inherit) {
                     '<div aria-live="off" aria-label="' + lbl + '"' + (w.multiple ? ' aria-multiselectable="true"' : '') + ' role="listbox" data-index="' + l + '" class="mbsc-sc-whl"' + ' style="' +
                     'height:' + (s.rows * itemHeight * (scroll3d ? 1.1 : 1)) + 'px;">' +
                     (showScrollArrows ?
-                        '<div data-index="' + l + '" data-step="1" class="mbsc-sc-btn mbsc-sc-btn-plus ' + (s.btnPlusClass || '') + '" style="height:' + itemHeight + 'px;line-height:' + itemHeight + 'px;"></div>' + // + button
-                        '<div data-index="' + l + '" data-step="-1" class="mbsc-sc-btn mbsc-sc-btn-minus ' + (s.btnMinusClass || '') + '" style="height:' + itemHeight + 'px;line-height:' + itemHeight + 'px;"></div>' : '') + // - button
+                        '<div data-index="' + l + '" data-step="1" class="mbsc-sc-btn mbsc-sc-btn-plus ' + (s.btnPlusClass || '') + '"></div>' + // + button
+                        '<div data-index="' + l + '" data-step="-1" class="mbsc-sc-btn mbsc-sc-btn-minus ' + (s.btnMinusClass || '') + '"></div>' : '') + // - button
                     '<div class="mbsc-sc-lbl">' + lbl + '</div>' + // Wheel label
                     '<div class="mbsc-sc-whl-c"' +
                     ' style="height:' + itemHeight3d + 'px;margin-top:-' + (itemHeight3d / 2 + 1) + 'px;' + style + '">' +

diff --git a/src/js/classes/scrollview-base.angular.ts b/src/js/classes/scrollview-base.angular.ts
@@ -20,8 +20,10 @@ import { MbscScrollViewOptions } from './scrollview';
 export class MbscNotifyItemService {
     private _instanceSubject: Subject<any> = new Subject();
     private _addRemoveSubject: Subject<any> = new Subject();
+    public inst: any = null;
 
     notifyInstanceReady(instance: any) {
+        this.inst = instance;
         this._instanceSubject.next(instance);
     }
 
@@ -58,6 +60,9 @@ export class MbscScrollItemBase implements AfterViewInit, OnDestroy {
         this.notifyItemService.onInstanceReady().subscribe((instance: any) => {
             this._instance = instance;
         });
+        if (notifyItemService.inst) {
+            this._instance = notifyItemService.inst;
+        }
     }
 
     ngAfterViewInit() {

diff --git a/src/js/core/core.js b/src/js/core/core.js
@@ -1,5 +1,5 @@
 /*!
- * Mobiscroll v4.5.0
+ * Mobiscroll v4.5.2
  * http://mobiscroll.com
  *
  * Copyright 2010-2018, Acid Media
@@ -76,7 +76,7 @@ extend(util, {
 
 ms = extend(mobiscroll, {
     $: $,
-    version: '4.5.0',
+    version: '4.5.2',
     autoTheme: 'mobiscroll',
     themes: {
         form: {},

diff --git a/src/js/forms.angular.ts b/src/js/forms.angular.ts
@@ -22,6 +22,7 @@ import {
     MbscOptionsService,
     AfterViewInit,
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     NgModule,
     CommonModule,
     emptyOrTrue
@@ -379,7 +380,7 @@ export class MbscCheckbox extends MbscFormValueBase {
         return this._colorClass;
     }
 
-    constructor(hostElem: ElementRef, @Optional() formService: MbscOptionsService, @Optional() control: NgControl) {
+    constructor(hostElem: ElementRef, public cdr: ChangeDetectorRef, @Optional() formService: MbscOptionsService, @Optional() control: NgControl) {
         super(hostElem, formService, control, false);
     }
 
@@ -389,6 +390,14 @@ export class MbscCheckbox extends MbscFormValueBase {
         let options = extend({}, this._inheritedOptions, this.inlineEvents(), this.options, this.inlineOptions());
         this._instance = new CheckBox(this._initElem.nativeElement, options);
     }
+
+    /** Overwritten to work with onPush change detection strategy 
+     * When using the onPush changedetection strategy and the value is set from the model, 
+     * the UI doesn't change (because there is no input change) unless we trigger a change manually */
+    writeValue(v: any) {
+        this._value = v;
+        this.cdr.detectChanges();
+    }
 }
 
 @Component({