Initial implementation

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4

.gitignore

@@ -59,3 +59,9 @@ typings/
 
 # next.js build output
 .next
+
+# build output
+dist/
+
+# macos
+.DS_Store

.prettierrc.json

@@ -0,0 +1,16 @@
+{
+	"printWidth": 80,
+	"tabWidth": 4,
+	"useTabs": false,
+	"semi": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"bracketSpacing": true,
+	"jsxBracketSameLine": false,
+	"arrowParens": "always",
+	"filepath": "",
+	"requirePragma": false,
+	"insertPragma": false,
+	"parser": "typescript",
+	"proseWrap": "preserve"
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

html/index.ts

@@ -0,0 +1,112 @@
+import {
+    IColumnsCenterGrid,
+    IColumnsGrid,
+    IColumnsLeftGrid,
+    IColumnsStretchGrid,
+    IGrid,
+    IGridBase,
+    IPreset,
+    IRowsCenterGrid,
+    IRowsGrid,
+    IRowsStretchGrid,
+    IRowsTopGrid,
+    destroyGrid,
+    initializeGrid
+} from '../src/index';
+
+const defaultPreset: IPreset = {
+    grids: [
+        {
+            type: 'grid',
+            color: '#00000055',
+            size: 8
+        } as IGrid,
+
+        {
+            type: 'rows-top',
+            color: '#aaaaaa49',
+            gutter: 8,
+            height: 8,
+            offset: 8
+        } as IRowsTopGrid
+    ]
+};
+
+const xlg1920Preset = {
+    grids: [
+        {
+            type: 'columns-center',
+            color: '#aaaaaa49',
+            count: 12,
+            gutter: 32,
+            width: 92
+        } as IColumnsCenterGrid
+    ],
+    mediaQuery: '(min-width: 95rem)'
+};
+
+const lg1440Preset = {
+    grids: [
+        {
+            type: 'columns-stretch',
+            color: '#aaaaaa49',
+            count: 12,
+            gutter: 32,
+            margin: 32
+        } as IColumnsStretchGrid
+    ],
+    mediaQuery: '(min-width: 84rem) and (max-width: 94.99rem)'
+};
+
+const md1344Preset = {
+    grids: [
+        {
+            type: 'columns-stretch',
+            color: '#aaaaaa49',
+            count: 12,
+            gutter: 16,
+            margin: 16
+        } as IColumnsStretchGrid
+    ],
+    mediaQuery: '(min-width: 40rem) and (max-width: 83.99rem)'
+};
+
+const sm640Preset = {
+    grids: [
+        {
+            type: 'columns-stretch',
+            color: '#aaaaaa49',
+            count: 12,
+            gutter: 8,
+            margin: 16
+        } as IColumnsStretchGrid
+    ],
+    mediaQuery: '(min-width: 20rem) and (max-width: 39.99rem)'
+};
+
+const xs320Preset = {
+    grids: [
+        {
+            type: 'columns-stretch',
+            color: '#aaaaaa49',
+            count: 12,
+            gutter: 8,
+            margin: 8
+        } as IColumnsStretchGrid
+    ],
+    mediaQuery: '(max-width: 19.99rem)'
+};
+
+const token = initializeGrid(
+    defaultPreset,
+    xlg1920Preset,
+    lg1440Preset,
+    md1344Preset,
+    sm640Preset,
+    xs320Preset
+);
+
+const removegridButton = document.getElementById('removegrid');
+if (removegridButton) {
+    removegridButton.addEventListener('click', () => destroyGrid(token));
+}

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "pixel-grid",
+  "version": "0.1.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.js",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "tsc",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
+  },
+  "author": "Sergey Zwezdin",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-preset-env": "^1.7.0",
+    "copy-webpack-plugin": "^5.0.3",
+    "cross-env": "^5.2.0",
+    "ts-loader": "^6.0.4",
+    "tslint-config-airbnb": "^5.11.1",
+    "typescript": "^3.5.2",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "dependencies": {}
+}

src/buildLayout.ts

@@ -0,0 +1,68 @@
+import {
+    IColumnsCenterGrid,
+    IColumnsLeftGrid,
+    IColumnsStretchGrid,
+    IGrid,
+    IPreset,
+    IRowsCenterGrid,
+    IRowsStretchGrid,
+    IRowsTopGrid
+} from './grid.interfaces';
+
+import columnsCenter from './layout/columnsCenter';
+import columnsLeft from './layout/columnsLeft';
+import columnsStretch from './layout/columnsStretch';
+import gridLayout from './layout/grid';
+import rowsCenter from './layout/rowsCenter';
+import rowsStretch from './layout/rowsStretch';
+import rowsTop from './layout/rowsTop';
+
+const buildLayout: (root: HTMLElement, presets: IPreset[]) => void = (
+    root,
+    presets
+) => {
+    if (root) {
+        // Cleanup root element
+        while (root.firstChild) {
+            root.removeChild(root.firstChild);
+        }
+
+        // Build grid layouts
+        if (presets) {
+            for (const preset of presets.filter(
+                (p) =>
+                    p.grids &&
+                    p.grids.length > 0 &&
+                    (!p.mediaQuery || window.matchMedia(p.mediaQuery).matches)
+            )) {
+                for (const grid of preset.grids) {
+                    if (grid.type === 'grid') {
+                        gridLayout(root, grid as IGrid);
+                    } else if (grid.type === 'columns-center') {
+                        columnsCenter(root, grid as IColumnsCenterGrid);
+                    } else if (grid.type === 'columns-stretch') {
+                        columnsStretch(root, grid as IColumnsStretchGrid);
+                    } else if (grid.type === 'columns-left') {
+                        columnsLeft(root, grid as IColumnsLeftGrid);
+                    } else if (grid.type === 'rows-center') {
+                        rowsCenter(root, grid as IRowsCenterGrid);
+                    } else if (grid.type === 'rows-stretch') {
+                        rowsStretch(root, grid as IRowsStretchGrid);
+                    } else if (grid.type === 'rows-top') {
+                        rowsTop(root, grid as IRowsTopGrid);
+                    } else {
+                        if (grid.type) {
+                            console.warn(
+                                `Unknown grid layout type "${grid.type}"`
+                            );
+                        } else {
+                            console.warn(`Grid type is not defined`);
+                        }
+                    }
+                }
+            }
+        }
+    }
+};
+
+export default buildLayout;

src/dom/buildRootElement.ts

@@ -0,0 +1,21 @@
+/**
+ * Create empty div element and append it to the end of the body
+ * @param id Element's identifier
+ */
+const buildRootElement: (id: string) => HTMLElement = (id) => {
+    const result = document.createElement('div');
+
+    result.id = id;
+    result.style.position = 'absolute';
+    result.style.top = '0';
+    result.style.left = '0';
+    result.style.right = '0';
+    result.style.pointerEvents = 'none';
+    result.style.overflow = 'hidden';
+
+    document.body.appendChild(result);
+
+    return result;
+};
+
+export default buildRootElement;

src/dom/invalidateGridHeight.ts

@@ -0,0 +1,21 @@
+import getDocumentHeight from '../helpers/getDocumentHeight';
+
+/**
+ * Invalidate grid element height
+ * @param element Grid's root element
+ */
+const invalidateGridHeight: (element: HTMLElement) => void = (
+    element: HTMLElement
+) => {
+    // Hide grid before measuring document height
+    element.style.display = 'none';
+
+    // Measure document height
+    const height = getDocumentHeight();
+
+    // Update Grid's height and show
+    element.style.height = `${height}px`;
+    element.style.display = 'block';
+};
+
+export default invalidateGridHeight;

src/events/subscribeWindowResize.ts

@@ -0,0 +1,22 @@
+const subscribeWindowResize: (onResize: () => void) => () => void = (
+    onResize
+) => {
+    let running = false;
+
+    const handler: () => void = () => {
+        if (running) {
+            return;
+        }
+        running = true;
+        requestAnimationFrame(function() {
+            onResize();
+            running = false;
+        });
+    };
+
+    window.addEventListener('resize', handler);
+
+    return handler;
+};
+
+export default subscribeWindowResize;

src/events/unsubscribeWindowResize.ts

@@ -0,0 +1,5 @@
+const subscribeWindowResize: (handler: () => void) => void = (handler) => {
+    window.removeEventListener('resize', handler);
+};
+
+export default subscribeWindowResize;