[add] initial version

DHTMLX · Mar 15, 2017 · 7c6b11a · 7c6b11a
commit 7c6b11a
Show file tree

Hide file tree

Showing 19 changed files with 5,823 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+ { 
+ 	"presets":  [
+    	["es2015", { "loose":true, modules:false }]
+	],
+	"plugins": [
+
+	]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,33 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals":{ 
+        "dhx":false,
+        "dhtmlXWindows":false,
+        "dhtmlx":false,
+        "dhtmlxEvent":false,
+        "require" : false,
+        "google" : false
+    },
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": [
+            "error",
+            "tab",
+            { "SwitchCase":1 }
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+codebase/*.js
+codebase/*.css
+
+*.zip
+dist/
+.Ds_store
+*.tgz
+*.log
+.vscode
diff --git a/README.md b/README.md
@@ -0,0 +1,27 @@
+DHTMLX Optimus - starter
+-------------------------
+
+### How to run standalone
+
+```
+npm install
+npm run server
+```
+
+After that, open http://localhost:8080 in the browser
+
+
+### How to run with Apache
+
+```
+npm install
+npm run watch
+```
+
+
+### More NPM commands
+
+- `npm run codebase` - rebuilds js file in codebase folder
+- `npm run lint` - check codebase
+- `npm run build` - build standalone package
+- `npm run deploy` - deploy to live server
diff --git a/codebase/imgs/projects.png b/codebase/imgs/projects.png
diff --git a/codebase/imgs/settings.png b/codebase/imgs/settings.png
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,98 @@
+var pkg = require("./package.json");
+var webpack_config = require("./webpack.config.js");
+var webpack2 = require('webpack');
+
+var gulp = require("gulp");
+var gutil = require("gulp-util");
+
+
+var es = require("event-stream");
+var webpack = require("webpack-stream");
+var clean = require("gulp-clean");
+var eslint = require("gulp-eslint");
+
+var uglify = require("gulp-uglify");
+var minify = require("gulp-cssnano");
+
+var rename = require("gulp-rename");
+var filter = require("gulp-filter");
+var replace = require("gulp-replace");
+
+gulp.task("lint", function(){
+	return gulp.src(["sources/**/*.js"])
+		.pipe(eslint())
+		.pipe(eslint.format())
+		.pipe(eslint.failAfterError());
+});
+
+gulp.task("clean", function() {
+	return gulp.src([
+		"./codebase/*.js",
+		"./dist/**/*",
+		"./codebase/*.map",
+		"./codebase/*.css"
+	], {
+		read: false
+	}).pipe(clean());
+});
+
+//JS and CSS files
+function codebase_stream() {
+	var cssfiles = filter("**/*.css", {
+		restore: true
+	});
+	var jsfiles = filter("**/*.js", {
+		restore: true
+	});
+	var ignoremaps = filter(["**/*.js", "**/*.css"]);
+
+	return gulp.src([pkg.main])
+		.pipe(webpack(webpack_config, webpack2))
+		.pipe(ignoremaps)
+		.pipe(jsfiles)
+		.pipe(uglify({
+			"mangle": { "toplevel": true },
+			"preserveComments": "license"
+		}))
+		.pipe(jsfiles.restore)
+		.pipe(cssfiles)
+		.pipe(minify().on("error", gutil.log))
+		.pipe(cssfiles.restore);
+}
+
+//package for deploy
+gulp.task("build", ["clean"], function() {
+	var package_name = pkg.name + "_v" + pkg.version;
+
+	//build codebase
+	var codebase = codebase_stream()
+		.pipe(rename(function(path) {
+			path.dirname = "codebase/" + path.dirname;
+		}));
+
+	var dhtmlx_files = gulp.src(["codebase/**/*"],{
+		dot: false,
+		base: "./"
+	});
+
+	var server_files = gulp.src(["server/**/*"], {
+		dot: false,
+		base: "./"
+	});
+
+	var htmlfile = gulp.src(["index.html"], {
+		dot: false,
+		base: "./"
+	}).pipe(replace("node_modules/handlebars/dist/", "codebase/"));
+
+	var pack = [codebase, server_files, dhtmlx_files, htmlfile];
+
+	return es.merge.apply(es, pack)
+		.pipe(gulp.dest("./dist/" + package_name));
+});
+
+gulp.task("deploy", ["build"], function(){
+	var package_name = pkg.name + "_v" + pkg.version;
+	var res = require('child_process').execSync("rsync -ar ./dist/"+package_name+"/* "+pkg.deployPath);
+	console.log(res.toString("utf8"));
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>DHX Optimus</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
+
+	<!-- DHTMLX Library -->
+	<link rel="stylesheet" type="text/css" href="//cdn.dhtmlx.com/edge/fonts/font_awesome/css/font-awesome.min.css">
+	<link href="//cdn.dhtmlx.com/edge/dhtmlx.css" rel="stylesheet"></link>
+	<script src="//cdn.dhtmlx.com/edge/dhtmlx.js"></script>
+
+	<!-- App -->
+	<link href="codebase/app.css" rel="stylesheet"></link>
+	<script type="text/javascript" src="codebase/app.js"></script>
+</head>
+<body>
+	<script type="text/javascript">
+		 new MyApp({}).render();
+	</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "optimus-start",
+  "version": "1.0.0",
+  "description": "Starter package for DHTMLX Optimus",
+  "deployPath": "dhtmlx.com:/dummy/",
+  "localURL": "http://127.0.0.1/dhtmlx/demos/crm/",
+  "main": "app.js",
+  "scripts": {
+    "lint": "gulp lint",
+    "codebase": "webpack",
+    "watch": "webpack --watch",
+    "server": "webpack-dev-server",
+    "build": "gulp build",
+    "deploy": "gulp deploy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DHTMLX/optimus-start.git"
+  },
+  "keywords": [
+    "dhtmlx",
+    "optimus",
+    "ui",
+    "framework"
+  ],
+  "author": "Stanislaw Wolski",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DHTMLX/optimus-start/issues"
+  },
+  "homepage": "https://github.com/DHTMLX/optimus-start#readme",
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.0",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-es2015-loose": "^8.0.0",
+    "css-loader": "^0.27.3",
+    "dhx-optimus": "^0.2.0",
+    "eslint": "^3.17.1",
+    "event-stream": "^3.3.4",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "gulp": "^3.9.1",
+    "gulp-clean": "^0.3.2",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-eslint": "^3.0.1",
+    "gulp-filter": "^5.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.5.4",
+    "gulp-uglify": "^2.1.0",
+    "gulp-util": "^3.0.8",
+    "handlebars": "^4.0.6",
+    "handlebars-loader": "^1.4.0",
+    "less": "^2.7.2",
+    "less-loader": "^3.0.0",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.0.0",
+    "webpack-livereload-plugin": "^0.10.0",
+    "webpack-stream": "^3.2.0"
+  }
+}
diff --git a/sources/app.js b/sources/app.js
@@ -0,0 +1,17 @@
+import "less/app.less";
+
+import {DHXApp} from "dhx-optimus";
+import {TopView} from "views/top.js";
+
+
+class MyApp extends DHXApp{
+	constructor(config){
+		super(config);
+		this.attachEvent("ToolbarClick", (id) => dhtmlx.alert(id + " button was clicked"));
+	}
+	render(){
+		this.show(TopView);
+	}
+}
+
+window.MyApp = MyApp;
diff --git a/sources/less/app.less b/sources/less/app.less
@@ -0,0 +1,22 @@
+html, body {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	overflow: hidden;
+}
+
+.work_in_progress{
+	width:100%;
+	font-size:25px;
+	text-align: center;
+	position: relative;
+	top: 50%;
+	margin-top: -40px;
+	font-family: Tahoma;
+}
+
+.about_author{
+	font-size: 12px;
+	font-family: Tahoma;
+	padding:20px;
+}
diff --git a/sources/templates/about.html b/sources/templates/about.html
@@ -0,0 +1,2 @@
+<div class='work_in_progress'>{{name}}</div>
+<div class='about_author'> By {{author}} <br>version {{version}}</div>
diff --git a/sources/views/about.js b/sources/views/about.js
@@ -0,0 +1,12 @@
+import {DHXView} from "dhx-optimus";
+var about = require("templates/about.html");
+
+export class AboutView extends DHXView{
+	render(){
+		this.ui = this.root.attachHTMLString(about({
+			name:"DHTMLX Optimus starter",
+			author: "Stanislaw Wolski",
+			version: "0.x"
+		}));
+	}
+}
diff --git a/sources/views/projects.js b/sources/views/projects.js
@@ -0,0 +1,7 @@
+import {DHXView} from "dhx-optimus";
+
+export class ProjectsView extends DHXView{
+	render(){
+		this.ui = this.root.attachHTMLString("<div class='work_in_progress'>Main Dashboard</div>");
+	}
+}
diff --git a/sources/views/sidebar.js b/sources/views/sidebar.js
@@ -0,0 +1,33 @@
+import {DHXView} from "dhx-optimus";
+
+export class SidebarView extends DHXView{
+	render(){
+		this.ui = this.root.attachSidebar({
+			template: "tiles",
+			icons_path: "codebase/imgs/"
+		});
+		this.ui.attachEvent("onSelect", (id) => this.callEvent("SideBar", [id]) );
+		this._load();
+	}
+
+	_load(){
+		const struct = {
+			items:[
+				{
+					id:"projects",
+					text: "Projects",
+					icon: "projects.png",
+					selected: true
+				},
+				{
+					id:"about",
+					text: "About",
+					icon: "settings.png"
+				}
+			]
+		};
+
+		this.ui.loadStruct(struct);
+	}
+
+}