more examples

xkam · xkam · commit 9b7c52c1b8d0 · 2020-01-31T14:27:13.000+01:00
diff --git a/examples/cdn-es5/README.md b/examples/cdn-es5/README.md
@@ -0,0 +1,4 @@
+
+[Open fullscreen](https://html.activewidgets.com/cdn-es5/) | [Source on github](https://github.com/activewidgets/html/tree/master/examples/cdn-es5) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/html/tree/master/examples/cdn-es5)
+
+HTML (custom elements) example
diff --git a/examples/cdn-es5/index.html b/examples/cdn-es5/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>CDN (no build) - ActiveWidgets/HTML</title>
+
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise"></script>
+
+    <link href="https://cdn.activewidgets.com/html/3/ax.css" rel="stylesheet" />
+    <script src="https://cdn.activewidgets.com/html/3/ax.js"></script>
+
+    <link href="src/styles.css" rel="stylesheet" />
+</head>
+<body>
+    <ax-datagrid>Loading...</ax-datagrid>
+    <script src="src/index.js"></script>
+</body>
+</html>
diff --git a/examples/cdn-es5/package.json b/examples/cdn-es5/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "html-cdn-es5",
+  "version": "1.0.0",
+  "description": "CDN (no build) - ActiveWidgets/HTML",
+  "keywords": [],
+  "main": "src/index.js",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@activewidgets/html": "0.0.10"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1"
+  },
+  "private": true
+}
diff --git a/examples/cdn-es5/src/index.js b/examples/cdn-es5/src/index.js
@@ -0,0 +1,6 @@
+
+var el = document.querySelector('ax-datagrid');
+
+el.rows = [
+    { framework: 'none', source: 'CDN', language: 'ES5'}
+];
diff --git a/examples/cdn-es5/src/styles.css b/examples/cdn-es5/src/styles.css
@@ -0,0 +1,19 @@
+
+body {
+    margin: 60px;
+    font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
+}
+
+.ax-datagrid {
+    max-height: 80px;
+}
+
+.ax-headers-view {
+    font-weight: bold;
+    color: #666;
+    border-bottom: 1px solid #aaa;
+}
+
+.ax-gridlines {
+    border-bottom: 1px solid #eee;
+}
diff --git a/examples/columns/README.md b/examples/columns/README.md
@@ -0,0 +1,4 @@
+
+[Open fullscreen](https://html.activewidgets.com/columns/) | [Source on github](https://github.com/activewidgets/html/tree/master/examples/columns) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/html/tree/master/examples/columns)
+
+HTML (custom elements) example
diff --git a/examples/columns/index.html b/examples/columns/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>Columns, rows - ActiveWidgets/HTML</title>
+</head>
+<body>
+    <ax-datagrid>Loading...</ax-datagrid>
+    <script src="src/index.js"></script>
+</body>
+</html>
diff --git a/examples/columns/package.json b/examples/columns/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "html-columns",
+  "version": "1.0.0",
+  "description": "Columns, rows - ActiveWidgets/HTML",
+  "keywords": [],
+  "main": "src/index.js",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@activewidgets/html": "0.0.10"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1"
+  },
+  "private": true
+}
diff --git a/examples/columns/src/index.js b/examples/columns/src/index.js
@@ -0,0 +1,22 @@
+
+import '@activewidgets/html';
+import { northwind } from "@activewidgets/examples/data";
+import './styles.css';
+
+
+const el = document.querySelector('ax-datagrid');
+
+el.columns = [
+  {header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
+  {header: 'Company Name', field: 'companyName', width: 160},
+  {header: 'Contact', field: 'contactName', width: 120},
+  {header: 'Title', field: 'contactTitle', width: 120},
+  {header: 'Address', field: 'address', width: 120},
+  {header: 'City', field: 'city'},
+  {header: 'Zip', field: 'postalCode', align: 'right'},
+  {header: 'Phone', field: 'phone'},
+  {header: 'Fax', field: 'fax'},
+  {header: 'Country', field: 'country'}
+];
+
+el.rows = northwind.customers;
diff --git a/examples/columns/src/styles.css b/examples/columns/src/styles.css
@@ -0,0 +1,15 @@
+
+body {
+    margin: 60px;
+    font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
+}
+
+.ax-headers-view {
+    font-weight: bold;
+    color: #666;
+    border-bottom: 1px solid #aaa;
+}
+
+.ax-gridlines {
+    border-bottom: 1px solid #eee;
+}
diff --git a/examples/events/README.md b/examples/events/README.md
@@ -0,0 +1,4 @@
+
+[Open fullscreen](https://html.activewidgets.com/events/) | [Source on github](https://github.com/activewidgets/html/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/html/tree/master/examples/events)
+
+HTML (custom elements) example
diff --git a/examples/events/index.html b/examples/events/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>User events - ActiveWidgets/HTML</title>
+</head>
+<body>
+    <ax-datagrid>Loading...</ax-datagrid>
+    <p>&#10140; Click on a datagrid row to open an alert box</p>
+    <script src="src/index.js"></script>
+</body>
+</html>
diff --git a/examples/events/package.json b/examples/events/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "html-events",
+  "version": "1.0.0",
+  "description": "User events - ActiveWidgets/HTML",
+  "keywords": [],
+  "main": "src/index.js",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@activewidgets/html": "0.0.10"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1"
+  },
+  "private": true
+}
diff --git a/examples/events/src/index.js b/examples/events/src/index.js
@@ -0,0 +1,17 @@
+
+import '@activewidgets/html';
+import { columns, rows } from "@activewidgets/examples/data";
+import './styles.css';
+
+
+function onMouse({row}){
+    alert(`row ${row.key} clicked!`);
+}
+
+
+const el = document.querySelector('ax-datagrid');
+
+el.columns = columns;
+el.rows = rows;
+
+el.addEventListener('mouse', event => onMouse(event.detail), true);
diff --git a/examples/events/src/styles.css b/examples/events/src/styles.css
@@ -0,0 +1,19 @@
+
+body {
+    margin: 60px;
+    font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
+}
+
+.ax-datagrid {
+    max-height: 200px;
+}
+
+.ax-headers-view {
+    font-weight: bold;
+    color: #666;
+    border-bottom: 1px solid #aaa;
+}
+
+.ax-gridlines {
+    border-bottom: 1px solid #eee;
+}
diff --git a/examples/hello-world/src/index.js b/examples/hello-world/src/index.js
@@ -3,7 +3,7 @@ import '@activewidgets/html';
 import './styles.css';
 
 
-let el = document.querySelector('ax-datagrid');
+const el = document.querySelector('ax-datagrid');
 
 el.rows = [
     { message: 'Hello, World!' }
diff --git a/examples/viewer/examples.js b/examples/viewer/examples.js
@@ -1,9 +1,15 @@
 ﻿
 import hello_world from '../hello-world/README.md';
+import cdn_es5 from '../cdn-es5/README.md';
+import columns from '../columns/README.md';
+import events from '../events/README.md';
 
 
 export const Local = {
-    'Hello, World!': {path: 'hello-world', readme: hello_world}
+    'Hello, World!': {path: 'hello-world', readme: hello_world},
+    'CDN (no build)': {path: 'cdn-es5', readme: cdn_es5},
+    'Columns, rows': {path: 'columns', readme: columns},
+    'User events': {path: 'events', readme: events}
 };
 
 
diff --git a/test/snapshots/local-js-cdn-es-5-1-snap.png b/test/snapshots/local-js-cdn-es-5-1-snap.png
diff --git a/test/snapshots/local-js-columns-1-snap.png b/test/snapshots/local-js-columns-1-snap.png
diff --git a/test/snapshots/local-js-hello-world-1-snap.png b/test/snapshots/local-js-hello-world-1-snap.png
diff --git a/test/visual/local.js b/test/visual/local.js
@@ -3,7 +3,7 @@ function local(name){
     return 'http://localhost:2345/' + name + '/';
 }
 
-['demo'].forEach(item => {
+['demo', 'hello-world', 'cdn-es5', 'columns'].forEach(item => {
     test(item, async () => {
         await page.goto(local(item));
         const image = await page.screenshot();

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
++
 +[Open fullscreen](https://html.activewidgets.com/cdn-es5/) | [Source on github](https://github.com/activewidgets/html/tree/master/examples/cdn-es5) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/html/tree/master/examples/cdn-es5)
++
 +HTML (custom elements) example