[add] urlparams sample ( webix jet 1.3 )

webix-hub · Jan 10, 2018 · 9c3ed10 · 9c3ed10
1 parent b980c69
commit 9c3ed10
Show file tree

Hide file tree

Showing 7 changed files with 5,392 additions and 2 deletions.
diff --git a/.webroot b/.webroot
@@ -0,0 +1 @@
+http://127.0.0.1:8080
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@ <h3>Plugins</h3>
 <h3>Routers</h3>
 <ul>
 	<li><a href="./routers-url/">UrlRouter</a></li>
+    <li><a href="./urlparams.html">Url parameters</a></li>
 </ul>
 
 <h3>Recepies</h3>

diff --git a/package.json b/package.json
@@ -27,6 +27,6 @@
     "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {
-    "webix-jet": "^1.1.0"
+    "webix-jet": "^1.3.0"
   }
 }
diff --git a/sources/urlparams.js b/sources/urlparams.js
@@ -0,0 +1,80 @@
+import {JetApp, JetView, plugins } from "webix-jet";
+
+class TopView extends JetView {
+	config(){
+		return {
+			rows:[
+				{ view:"segmented", inputWidth:300, options:["full", "brief"], localId:"ms", on:{
+					onChange: function(){
+						this.$scope.setParam("mode", this.getValue(), true);
+					}
+				}},
+				{ $subview:true }
+			]
+		};
+	}
+	init(){
+		this.use(plugins.UrlParam, ["mode"]);
+
+		var mode = this.getParam("mode");
+		if (mode){
+			this.$$("ms").setValue(mode);
+		}
+	}
+}
+
+class SubView extends JetView {
+	config(){
+		return {
+			view:"template"
+		};
+	}
+	urlChange(view){
+		var id = this.getParam("id", true);
+		var mode = this.getParam("mode", true);
+		view.setHTML(mode+" mode for id="+id);
+	}
+}
+
+class DetailsView extends JetView {
+	config(){
+		return {
+			cols:[
+				{ width:200, view:"list", select:true, localId:"list",
+					on:{
+						onAfterSelect: (id) => {
+							this.setParam("id", id, true);
+						}
+					}
+				},
+				{ $subview:"sub" }
+			]
+		};
+	}
+	init(){
+		this.$$("list").parse([
+			{ id:1, value:"1. short data" },
+			{ id:2, value:"2. short data" },
+		]);
+	}
+	urlChange(){
+		var id = this.getParam("id");
+		if (id)
+			this.$$("list").select(id);
+	}
+}
+
+webix.ready(() => {
+	const app = new JetApp({
+		start:		"/top/full/details",
+		views:		{
+			top: TopView,
+			details: DetailsView,
+			sub: SubView
+		},
+		debug:true
+	});
+
+
+	app.render();
+});
diff --git a/urlparams.html b/urlparams.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title></title>
+	<!-- Webix Library -->
+	<script type="text/javascript" src="//cdn.webix.com/edge/webix.js"></script>
+	<link rel="stylesheet" type="text/css" href="//cdn.webix.com/edge/webix.css">
+
+	<!-- App -->
+	<script type="text/javascript" src="codebase/urlparams.js"></script>
+	<link rel="stylesheet" type="text/css" href="assets/app.css">
+
+</head>
+<body></body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -25,7 +25,8 @@ module.exports = function(env) {
 			"redirects" : "./sources/redirects.js",
 			"screensize" : "./sources/screensize.js",
 			"viewresolve" : "./sources/viewresolve.js",
-			"viewapp" : "./sources/viewapp.js"
+			"viewapp" : "./sources/viewapp.js",
+			"urlparams" : "./sources/urlparams.js"
 		},
 		output: {
 			path: path.join(__dirname, "codebase"),