Merge pull request #764 from stupiduglyfool/master

Universal server side rendering
swimlane · Jun 1, 2017 · f9e7bc7 · f9e7bc7
2 parents 2163626 + a3974a9
commit f9e7bc7
Show file tree

Hide file tree

Showing 17 changed files with 33 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -23,8 +23,8 @@
     "build:aot": "ngc",
     "build:sass": "node-sass -r build/ -o build/",
     "build:css": "postcss --use autoprefixer dist/*.css -d dist/",
-    "copy:build": "cpx 'src/**/*' 'build'",
-    "copy:styles": "cpx 'build/**/*.css' 'release'",
+    "copy:build": "cpx -v \"src/**/*\" \"build\"",
+    "copy:styles": "cpx -v \"build/**/*.css\" \"release\"",
     "watch": "webpack --display-error-details --watch",
     "start": "webpack-dev-server",
     "start:hmr": "webpack-dev-server --env.HMR",

diff --git a/src/components/body/body-cell.component.ts b/src/components/body/body-cell.component.ts
@@ -6,6 +6,7 @@ import {
 import { Keys } from '../../utils';
 import { SortDirection } from '../../types';
 import { TableColumn } from '../../types/table-column.type';
+import { MouseEvent, KeyboardEvent } from '../../events';
 
 @Component({
   selector: 'datatable-body-cell',

diff --git a/src/components/body/body-row-wrapper.component.ts b/src/components/body/body-row-wrapper.component.ts
@@ -1,6 +1,7 @@
 import { 
   Component, Input, Output, EventEmitter, HostListener 
 } from '@angular/core';
+import { MouseEvent } from '../../events';
 
 @Component({
   selector: 'datatable-row-wrapper',

diff --git a/src/components/body/body-row.component.ts b/src/components/body/body-row.component.ts
@@ -6,6 +6,7 @@ import {
   columnsByPin, columnGroupWidths, columnsByPinArr, translateXY, Keys
 } from '../../utils';
 import { ScrollbarHelper } from '../../services';
+import { MouseEvent, KeyboardEvent } from '../../events';
 
 @Component({
   selector: 'datatable-body-row',

diff --git a/src/components/body/body.component.ts b/src/components/body/body.component.ts
@@ -4,6 +4,7 @@ import {
 import { translateXY, columnsByPin, columnGroupWidths, RowHeightCache } from '../../utils';
 import { SelectionType } from '../../types';
 import { ScrollerComponent } from './scroller.component';
+import { MouseEvent } from '../../events';
 
 @Component({
   selector: 'datatable-body',

diff --git a/src/components/body/scroller.component.ts b/src/components/body/scroller.component.ts
@@ -3,6 +3,8 @@ import {
   OnInit, OnDestroy, HostBinding
 } from '@angular/core';
 
+import { MouseEvent } from '../../events';
+
 @Component({
   selector: 'datatable-scroller',
   template: `

diff --git a/src/components/body/selection.component.ts b/src/components/body/selection.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Keys, selectRows, selectRowsBetween } from '../../utils';
 import { SelectionType } from '../../types';
+import { MouseEvent, KeyboardEvent } from '../../events';
 
 export interface Model {
   type: string;

diff --git a/src/components/datatable.component.ts b/src/components/datatable.component.ts
@@ -15,6 +15,7 @@ import { DataTableBodyComponent } from './body';
 import { DataTableColumnDirective } from './columns';
 import { DatatableRowDetailDirective } from './row-detail';
 import { DatatableFooterDirective } from './footer';
+import { MouseEvent } from '../events';
 
 @Component({
   selector: 'ngx-datatable',

diff --git a/src/components/header/header-cell.component.ts b/src/components/header/header-cell.component.ts
@@ -1,9 +1,9 @@
 import {
   Component, Input, EventEmitter, Output, HostBinding, HostListener
 } from '@angular/core';
-
 import { SortDirection, SortType, SelectionType, TableColumn } from '../../types';
 import { nextSortDir } from '../../utils';
+import { MouseEvent } from '../../events';
 
 @Component({
   selector: 'datatable-header-cell',

diff --git a/src/components/header/header.component.ts b/src/components/header/header.component.ts
@@ -4,6 +4,7 @@ import {
 import { SortType, SelectionType } from '../../types';
 import { columnsByPin, columnGroupWidths, columnsByPinArr, translateXY } from '../../utils';
 import { DataTableColumnDirective } from '../columns';
+import { MouseEvent } from '../../events';
 
 @Component({
   selector: 'datatable-header',

diff --git a/src/directives/draggable.directive.ts b/src/directives/draggable.directive.ts
@@ -4,6 +4,7 @@ import {
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/takeUntil';
+import { MouseEvent } from '../events';
 
 /**
  * Draggable Directive for Angular2

diff --git a/src/directives/long-press.directive.ts b/src/directives/long-press.directive.ts
@@ -5,6 +5,7 @@ import {
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/takeUntil';
+import { MouseEvent } from './../events';
 
 @Directive({ selector: '[long-press]' })
 export class LongPressDirective implements OnDestroy {

diff --git a/src/directives/resizeable.directive.ts b/src/directives/resizeable.directive.ts
@@ -3,6 +3,7 @@ import {
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
+import { MouseEvent } from '../events';
 import 'rxjs/add/operator/takeUntil';
 
 @Directive({

diff --git a/src/events.ts b/src/events.ts
@@ -0,0 +1,4 @@
+declare let global:any;
+
+export const MouseEvent = (global as any).MouseEvent as MouseEvent;
+export const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
diff --git a/src/utils/elm-from-point.ts b/src/utils/elm-from-point.ts
@@ -1,4 +1,4 @@
-if (!document.elementsFromPoint) {
+if (document !== undefined && !document.elementsFromPoint) {
   document.elementsFromPoint = elementsFromPoint;
 }
 
@@ -22,6 +22,8 @@ export function elementsFromPoint(x: number, y: number) {
   let i;
   let d;
 
+  //if (document === undefined) return elements;
+
   // get all elements via elementFromPoint, and remove them from hit-testing in order
   while ((current = document.elementFromPoint(x, y)) && elements.indexOf(current) === -1 && current != null) {
 

diff --git a/src/utils/prefixes.ts b/src/utils/prefixes.ts
@@ -1,32 +1,34 @@
 import { camelCase } from './camel-case';
 
 const cache = {};
-const testStyle = document.createElement('div').style;
+const testStyle = document !== undefined ? document.createElement('div').style : undefined;
 
 // Get Prefix
 // http://davidwalsh.name/vendor-prefix
 const prefix = (function() {
-  const styles = window.getComputedStyle(document.documentElement, '');
-  const pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/))[1];
-  const dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
+  const styles = window !== undefined ? window.getComputedStyle(document.documentElement, '') : undefined;
+  const pre = styles !== undefined ? (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/))[1] : undefined;
+  const dom = pre !== undefined ? ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1] : undefined;
 
-  return {
+  return dom ? {
     dom,
     lowercase: pre,
     css: `-${pre}-`,
     js: pre[0].toUpperCase() + pre.substr(1)
-  };
+  } : undefined;
 })();
 
 export function getVendorPrefixedName(property: string) {
   const name = camelCase(property);
 
-  if(!cache[name]) {
-    if(testStyle[prefix.css + property] !== undefined) {
+
+  if(!cache[name]) {    
+    if(prefix !== undefined && testStyle[prefix.css + property] !== undefined) {
       cache[name] = prefix.css + property;
     } else if(testStyle[property] !== undefined) {
       cache[name] = property;
     }
+
   }
 
   return cache[name];

diff --git a/src/utils/translate.ts b/src/utils/translate.ts
@@ -6,7 +6,7 @@ const transform = getVendorPrefixedName('transform');
 const backfaceVisibility = getVendorPrefixedName('backfaceVisibility');
 const hasCSSTransforms = !!getVendorPrefixedName('transform');
 const hasCSS3DTransforms = !!getVendorPrefixedName('perspective');
-const ua = window.navigator.userAgent;
+const ua = window ? window.navigator.userAgent : "Chrome";
 const isSafari = (/Safari\//).test(ua) && !(/Chrome\//).test(ua);
 
 export function translateXY(styles: any, x: number, y: number) {