koding · gokmen · Aug 2, 2017 · Jul 29, 2017 · Jul 29, 2017 · Jul 29, 2017
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ build
 dist
 bundle.js
 coverage
+examples/kd.*
diff --git a/Makefile b/Makefile
@@ -42,19 +42,14 @@ development: $(TARGETS)
 				}); \
 			});"
 
-example: watch-example
-	@$(BIN)/serve
-
-watch-example:
-	@$(BIN)/watchify \
-		-v \
-		-g coffeeify \
-		--extension=".coffee" \
-		--outfile example/bundle.js \
-		--debug \
-		example/index.js &
+example: dist
+	@echo ' - Running example server...'
+	@cp ./dist/kd.js  examples/
+	@cp ./dist/kd.css examples/
+	@$(BIN)/serve examples -o
 
 js:
+	@echo ' - Browserify and Uglify...'
 	@$(BIN)/browserify \
 		-g coffeeify \
 		--extension=".coffee" \
@@ -67,18 +62,21 @@ js:
 		-o kd.min.js
 
 css:
+	@echo ' - Stylus and clean-css...'
 	@$(BIN)/stylus \
 		--include-css \
 		--print \
 		lib/styles/index.styl \
 	| $(BIN)/cleancss \
-		--s0 \
-		--output kd.css
+		-O0 \
+		-o kd.css
 
 clean: clean_dist
 	@rm -fr build
 
 clean_dist:
+	@echo ' - Cleanup...'
 	@rm -fr dist
+	@rm -f examples/kd.*
 
 .PHONY: example dist
diff --git a/examples/dia/dia.js b/examples/dia/dia.js
@@ -0,0 +1,107 @@
+var main = new kd.View()
+main.appendToDomBody()
+
+var scene = new kd.DiaScene({
+  cssClass: 'main-scene',
+})
+
+scene.addContainer(
+  (container1 = new kd.DiaContainer({
+    cssClass: 'container-1',
+    draggable: true,
+    partial: 'drag me',
+  })),
+  { x: 60, y: 60 }
+)
+
+scene.addContainer(
+  (container2 = new kd.DiaContainer({
+    cssClass: 'container-2',
+    draggable: true,
+    partial: 'drag me',
+  })),
+  { x: 500, y: 100 }
+)
+
+var circle1 = container1.addDia(
+  new kd.DiaObject({
+    cssClass: 'circle',
+    partial: 'drag me',
+  }),
+  { x: 20, y: 20 }
+)
+
+var circle2 = container2.addDia(
+  new kd.DiaObject({
+    cssClass: 'circle',
+    partial: 'drag me',
+  }),
+  { x: 20, y: 20 }
+)
+
+var square1 = container1.addDia(
+  new kd.DiaObject({
+    cssClass: 'square',
+    partial: 'drag me',
+  }),
+  { x: 100, y: 100 }
+)
+
+var square2 = container2.addDia(
+  new kd.DiaObject({
+    cssClass: 'square',
+    partial: 'drag me',
+  }),
+  { x: 100, y: 100 }
+)
+
+var connection1 = scene.connect(
+  { dia: circle1, joint: 'right' },
+  { dia: circle2, joint: 'left' }
+)
+
+var connection2 = scene.connect(
+  { dia: square1, joint: 'right' },
+  { dia: square2, joint: 'left' }
+)
+
+var transfer1, transfer2
+
+function startTransfer1() {
+  transfer1 = scene.addTransfer(connection1, {
+    text: 'ping',
+    duration: 3000,
+    color: 'blue',
+  })
+  scene.once(`Transfer-${transfer1}-Done`, () => {
+    transfer1 = scene.addTransfer(connection1, {
+      text: 'pong',
+      duration: 3000,
+      color: 'green',
+      reverse: true,
+    })
+    scene.once(`Transfer-${transfer1}-Done`, startTransfer1)
+  })
+}
+
+function startTransfer2() {
+  transfer2 = scene.addTransfer(connection2, {
+    duration: 1000,
+    size: 4,
+    color: 'red',
+  })
+  scene.on(`Transfer-${transfer2}-Done`, () => {
+    transfer2 = scene.addTransfer(connection2, {
+      size: 4,
+      duration: 1000,
+      color: 'blue',
+      reverse: true,
+    })
+    scene.once(`Transfer-${transfer2}-Done`, startTransfer2)
+  })
+}
+
+startTransfer1()
+startTransfer2()
+
+main.addSubView(scene)
diff --git a/examples/dia/index.html b/examples/dia/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>kd.js Examples - dia</title>
+  <link rel="stylesheet" href="../kd.css">
+  <script src="../kd.js"></script>
+  <style type="text/css">
+    body {
+      font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
+      font-size: 12px;
+    }
+    .main-scene {
+      width: 100vw;
+      height: 100vh;
+    }
+    .container-1, .container-2 {
+      background: #eee;
+    }
+  </style>
+</head>
+<body>
+  <script src="dia.js"></script>
+</body>
+</html>
diff --git a/examples/drag.js → examples/drag/drag.js b/examples/drag.js → examples/drag/drag.js
@@ -1,5 +1,3 @@
-var kd = require('../lib/index')
-
 var main = new kd.View({ cssClass: 'lobilo' })
 main.appendToDomBody()
 

diff --git a/examples/drag.html → examples/drag/index.html b/examples/drag.html → examples/drag/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
-  <link rel="stylesheet" href="/dist/kd.css">
+  <title>kd.js Examples - drag</title>
+  <link rel="stylesheet" href="../kd.css">
   <style>
     body, html {
       margin: 0;
@@ -34,9 +34,9 @@
       height: 50px;
     }
   </style>
+  <script src="../kd.js"></script>
 </head>
 <body>
-
-  <script src="/example/bundle.js"></script>
+  <script src="drag.js"></script>
 </body>
 </html>
diff --git a/examples/flex/flex.js b/examples/flex/flex.js
@@ -0,0 +1,60 @@
+var main = new kd.View()
+main.appendToDomBody()
+
+var flex = new kd.FlexSplit({
+  cssClass: 'mainview',
+  resizable: true,
+  type: kd.Flex.VERTICAL,
+  views: [
+    new kd.FlexSplit({
+      sizes: [40, 60],
+      views: [
+        new kd.View({ partial: 'left top' }),
+        new kd.View({ partial: 'left bottom' }),
+      ],
+    }),
+    new kd.FlexSplit({
+      sizes: [20, 80],
+      views: [
+        new kd.View({ partial: 'right top' }),
+        new kd.View({ partial: 'right bottom' }),
+      ],
+    }),
+  ],
+})
+
+var input = new kd.InputView()
+var form = new kd.View()
+
+form.addSubView(input)
+form.addSubView(
+  new kd.ButtonView({
+    title: "i'm a button. type in your name and click on me",
+    callback: function() {
+      alert('sup ' + input.getValue())
+    },
+  })
+)
+
+var tabs = new kd.TabView({
+  hideHandleCloseIcons: true,
+  attributes: {
+    style: 'height: 100vh',
+  },
+  paneData: [
+    {
+      title: 'tab1',
+      partial: "that's me, tab1",
+    },
+    {
+      title: 'form',
+      view: form,
+    },
+    {
+      title: 'flex split',
+      view: flex,
+    },
+  ],
+})
+
+main.addSubView(tabs)
diff --git a/examples/flex/index.html b/examples/flex/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>kd.js Examples - flex</title>
+  <link rel="stylesheet" href="../kd.css">
+  <script src="../kd.js"></script>
+</head>
+<body>
+  <script src="flex.js"></script>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
diff --git a/examples/index.js b/examples/index.js