rename to demo and minimum

sean-codes · Nov 18, 2017 · 657aa1e · 657aa1e
1 parent a93ecd0
commit 657aa1e
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 0 deletions.
diff --git a/example/demo.css b/example/demo.css
@@ -0,0 +1,61 @@
+#myKanBan {
+  height: 100%;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+#myKanBan lane lane-title {
+  background: #333;
+  color: #FFF;
+}
+
+card mycard-container, ghost mycard-container {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  padding-bottom: 0px;
+  overflow: hidden;
+}
+
+card mycard-container mycard-content, ghost mycard-container mycard-content {
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+card mycard-container mycard-title, ghost mycard-container mycard-title {
+  background: #444;
+  color: #FFF;
+  padding: 10px;
+}
+
+card mycard-container mycard-title button, ghost mycard-container mycard-title button {
+  display: inline;
+  float: right;
+  padding: 0px 5px;
+}
+
+card mycard-container mycard-title button:hover, ghost mycard-container mycard-title button:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+card mycard-container mycard-text, ghost mycard-container mycard-text {
+  position: relative;
+  padding: 20px 10px;
+  font-size: 0.8em;
+  color: #FFF;
+}
+
+card mycard-container .bg-green, ghost mycard-container .bg-green {
+  background: #33A852;
+}
+
+card mycard-container .bg-blue, ghost mycard-container .bg-blue {
+  background: #5FC3EB;
+}
+
+card mycard-container .bg-orange, ghost mycard-container .bg-orange {
+  background: #ffb440;
+}
+
+card mycard-container .bg-red, ghost mycard-container .bg-red {
+  background: #ff4747;
+}
diff --git a/example/demo.html b/example/demo.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+   <head>
+      <link rel="stylesheet" href="./../dist/styles.css">
+      <link rel="stylesheet" href="./demo.css">
+   </head>
+   <body>
+      <div id="myKanBan"></div>
+
+      <script src="./../dist/scripts.js"></script>
+      <script>
+
+         // Templates
+         var cardTemplate = (content) => { return `
+            <mycard-container>
+               <mycard-content>
+                  <mycard-title>${content.title}</mycard-title>
+                  <mycard-text class="bg-${content.status}">
+                     ${content.text}
+                  </mycard-text>
+               <mycard-content>
+            </mycard-container>
+         `}
+         var laneTemplate = (content) => { return content }
+
+         // Create the board
+         var mykanban = new KanbanBoard('#myKanBan')
+
+         // Add Lanes
+         mykanban.addLane(new KanbanLane('lane1', 'Lane 1', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane2', 'Lane 2', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane3', 'Lane 3', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane4', 'Lane 4', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane5', 'Lane 5', laneTemplate))
+
+         // Add Cards
+         //mykanban.addCard(new KanbanCard('card1', 'lane1', 'demo 1', cardTemplate))
+         addABunchOfRandomCards(10)
+
+         function addABunchOfRandomCards(count){
+            var lanes = ['lane1', 'lane2', 'lane3', 'lane4', 'lane5']
+            var titles = ['A task', 'New task', 'Yesterday', 'The title']
+            var texts = ['Some test content', 'Different test content', 'This is a test']
+            var status = ['green', 'blue', 'orange', 'red']
+            for(var i = 0; i < count; i++){
+               content = {
+                  title: choose(titles),
+                  text: choose(texts),
+                  status: choose(status)
+               }
+               mykanban.addCard(new KanbanCard('card_'+Math.random()*100000000000000000, choose(lanes), content, cardTemplate))
+            }
+         }
+         function choose(arr){
+            return arr[Math.floor(Math.random()*arr.length)]
+         }
+         /*
+
+         document.body.onload = function() {
+            // User Code
+            kanban = new Kanban({
+               selector: '#myKanBan',
+               htmlLane: (title) => { return title },
+               htmlCard: (content) => {
+                  return `
+                     <mycard-container>
+                        <mycard-content>
+                           <mycard-title>${content.title}</mycard-title>
+                           <mycard-text class="bg-${content.status}">
+                              ${content.text}
+                           </mycard-text>
+                        <mycard-content>
+                     </mycard-container>
+                  `
+               },
+               lanes: [
+                  { id: 'lane1', content: 'Lane 1' },
+                  { id: 'lane2', content: 'Lane 2' },
+                  { id: 'lane3', content: 'Lane 3' },
+                  { id: 'lane4', content: 'Lane 4' },
+                  { id: 'lane5', content: 'Lane 5' }
+               ],
+               cards: randomCards(10)
+            })
+
+            // Functions for generating random cards
+            function randomCards(count){
+               var cards = []
+               for(var i = 0; i < count; i++){
+                  cards.push(randomCard())
+               }
+               return cards
+            }
+            function randomCard(){
+
+            }
+
+            function choose(arr){
+               return arr[Math.floor(Math.random()*arr.length)]
+            }
+         }
+         */
+      </script>
+   </body>
+</html>
diff --git a/example/minimum.html b/example/minimum.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+   <head>
+      <link rel="stylesheet" href="./../dist/styles.css">
+   </head>
+   <body>
+      <style>
+         #myKanBan{ height: 100% }
+         kanban lane-title{
+            color:#FFF;
+            background:#222;
+         }
+         kanban card, kanban ghost {
+            background:#465;
+            padding:20px;
+         }
+      </style>
+      <div id="myKanBan"></div>
+
+      <script src="./../dist/scripts.js"></script>
+      <script>
+
+         // Templates
+         var cardTemplate = (content) => { return content }
+         var laneTemplate = (content) => { return content }
+
+         // Create the board
+         var mykanban = new KanbanBoard('#myKanBan')
+
+         // Add Lanes
+         mykanban.addLane(new KanbanLane('lane1', 'Lane 1', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane2', 'Lane 2', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane3', 'Lane 3', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane4', 'Lane 4', laneTemplate))
+         mykanban.addLane(new KanbanLane('lane5', 'Lane 5', laneTemplate))
+
+         // Add Cards
+         mykanban.addCard(new KanbanCard('card1', 'lane1', 'demo 1', cardTemplate))
+
+      </script>
+   </body>
+</html>