patternfly-sass 0.0.0.pre.semantically.pre.released → 1.2.0

data/tests/components/bootstrap-treeview/app.js

@@ -0,0 +1,29 @@
+
+/**
+ * Module dependencies.
+ */
+
+var express = require('express');
+var http = require('http');
+var path = require('path');
+
+var app = express();
+
+// all environments
+app.set('port', process.env.PORT || 3000);
+app.use(express.favicon());
+app.use(express.logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded());
+app.use(express.methodOverride());
+app.use(express.static(path.join(__dirname, '/public')));
+app.use(express.static(path.join(__dirname, '/tests')));
+
+// development only
+if ('development' == app.get('env')) {
+  app.use(express.errorHandler());
+}
+
+http.createServer(app).listen(app.get('port'), function(){
+  console.log('Express server listening on port ' + app.get('port'));
+});

data/tests/components/bootstrap-treeview/bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "bootstrap-treeview",
+  "version": "1.0.2",
+  "homepage": "https://github.com/jonmiles/bootstrap-treeview",
+  "description": "Tree View for Twitter Bootstrap",
+  "main": [
+    "dist/bootstrap-treeview.min.js",
+    "dist/bootstrap-treeview.min.css"
+  ],
+  "keywords": [
+    "Twitter",
+    "Bootstrap",
+    "Tree",
+    "TreeView",
+    "Navigation"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "bootstrap": ">= 3.0.0",
+    "jquery": ">= 1.9.0"
+  },
+  "devDependencies": {}
+}

data/tests/components/bootstrap-treeview/dist/bootstrap-treeview.min.css

@@ -0,0 +1 @@
+.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.expand-collapse{width:1rem;height:1rem}.treeview span.icon{margin-left:10px;margin-right:5px}

data/tests/components/bootstrap-treeview/dist/bootstrap-treeview.min.js

@@ -0,0 +1 @@
+!function(a,b,c,d){"use strict";var e="treeview",f=function(b,c){this.$element=a(b),this._element=b,this._elementId=this._element.id,this._styleId=this._elementId+"-style",this.tree=[],this.nodes=[],this.selectedNode={},this._init(c)};f.defaults={injectStyle:!0,levels:2,expandIcon:"glyphicon glyphicon-plus",collapseIcon:"glyphicon glyphicon-minus",emptyIcon:"glyphicon",nodeIcon:"glyphicon glyphicon-stop",color:d,backColor:d,borderColor:d,onhoverColor:"#F5F5F5",selectedColor:"#FFFFFF",selectedBackColor:"#428bca",enableLinks:!1,highlightSelected:!0,showBorder:!0,showTags:!1,onNodeSelected:d},f.prototype={remove:function(){this._destroy(),a.removeData(this,"plugin_"+e),a("#"+this._styleId).remove()},_destroy:function(){this.initialized&&(this.$wrapper.remove(),this.$wrapper=null,this._unsubscribeEvents()),this.initialized=!1},_init:function(b){b.data&&("string"==typeof b.data&&(b.data=a.parseJSON(b.data)),this.tree=a.extend(!0,[],b.data),delete b.data),this.options=a.extend({},f.defaults,b),this._setInitialLevels(this.tree,0),this._destroy(),this._subscribeEvents(),this._render()},_unsubscribeEvents:function(){this.$element.off("click"),"function"==typeof this.options.onNodeSelected&&this.$element.off("nodeSelected")},_subscribeEvents:function(){this._unsubscribeEvents(),this.$element.on("click",a.proxy(this._clickHandler,this)),"function"==typeof this.options.onNodeSelected&&this.$element.on("nodeSelected",this.options.onNodeSelected)},_clickHandler:function(b){this.options.enableLinks||b.preventDefault();var c=a(b.target),d=c.attr("class")?c.attr("class").split(" "):[],e=this._findNode(c);-1!=d.indexOf("click-expand")||-1!=d.indexOf("click-collapse")?(this._toggleNodes(e),this._render()):e&&(this._isSelectable(e)?this._setSelectedNode(e):(this._toggleNodes(e),this._render()))},_findNode:function(a){var b=a.closest("li.list-group-item").attr("data-nodeid"),c=this.nodes[b];return c||console.log("Error: node does not exist"),c},_triggerNodeSelectedEvent:function(b){this.$element.trigger("nodeSelected",[a.extend(!0,{},b)])},_setSelectedNode:function(a){a&&(a===this.selectedNode?this.selectedNode={}:this._triggerNodeSelectedEvent(this.selectedNode=a),this._render())},_setInitialLevels:function(b,c){if(b){c+=1;var e=this;a.each(b,function(a,b){c>=e.options.levels&&e._toggleNodes(b);var f=b.nodes?b.nodes:b._nodes?b._nodes:d;return f?e._setInitialLevels(f,c):void 0})}},_toggleNodes:function(a){(a.nodes||a._nodes)&&(a.nodes?(a._nodes=a.nodes,delete a.nodes):(a.nodes=a._nodes,delete a._nodes))},_isSelectable:function(a){return a.selectable!==!1},_render:function(){var b=this;b.initialized||(b.$element.addClass(e),b.$wrapper=a(b._template.list),b._injectStyle(),b.initialized=!0),b.$element.empty().append(b.$wrapper.empty()),b.nodes=[],b._buildTree(b.tree,0)},_buildTree:function(b,c){if(b){c+=1;var d=this;a.each(b,function(b,e){e.nodeId=d.nodes.length,d.nodes.push(e);for(var f=a(d._template.item).addClass("node-"+d._elementId).addClass(e===d.selectedNode?"node-selected":"").attr("data-nodeid",e.nodeId).attr("style",d._buildStyleOverride(e)),g=0;c-1>g;g++)f.append(d._template.indent);return f.append(e._nodes?a(d._template.expandCollapseIcon).addClass("click-expand").addClass(d.options.expandIcon):e.nodes?a(d._template.expandCollapseIcon).addClass("click-collapse").addClass(d.options.collapseIcon):a(d._template.expandCollapseIcon).addClass(d.options.emptyIcon)),f.append(a(d._template.icon).addClass(e.icon?e.icon:d.options.nodeIcon)),f.append(d.options.enableLinks?a(d._template.link).attr("href",e.href).append(e.text):e.text),d.options.showTags&&e.tags&&a.each(e.tags,function(b,c){f.append(a(d._template.badge).append(c))}),d.$wrapper.append(f),e.nodes?d._buildTree(e.nodes,c):void 0})}},_buildStyleOverride:function(a){var b="";return this.options.highlightSelected&&a===this.selectedNode?b+="color:"+this.options.selectedColor+";":a.color&&(b+="color:"+a.color+";"),this.options.highlightSelected&&a===this.selectedNode?b+="background-color:"+this.options.selectedBackColor+";":a.backColor&&(b+="background-color:"+a.backColor+";"),b},_injectStyle:function(){this.options.injectStyle&&!c.getElementById(this._styleId)&&a('<style type="text/css" id="'+this._styleId+'"> '+this._buildStyle()+" </style>").appendTo("head")},_buildStyle:function(){var a=".node-"+this._elementId+"{";return this.options.color&&(a+="color:"+this.options.color+";"),this.options.backColor&&(a+="background-color:"+this.options.backColor+";"),this.options.showBorder?this.options.borderColor&&(a+="border:1px solid "+this.options.borderColor+";"):a+="border:none;",a+="}",this.options.onhoverColor&&(a+=".node-"+this._elementId+":hover{background-color:"+this.options.onhoverColor+";}"),this._css+a},_template:{list:'<ul class="list-group"></ul>',item:'<li class="list-group-item"></li>',indent:'<span class="indent"></span>',expandCollapseIcon:'<span class="expand-collapse"></span>',icon:'<span class="icon"></span>',link:'<a href="#" style="color:inherit;"></a>',badge:'<span class="badge"></span>'},_css:".treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.expand-collapse{width:1rem;height:1rem}.treeview span.icon{margin-left:10px;margin-right:5px}"};var g=function(a){b.console&&b.console.error(a)};a.fn[e]=function(b,c){return this.each(function(){var d=a.data(this,"plugin_"+e);"string"==typeof b?d?a.isFunction(d[b])&&"_"!==b.charAt(0)?("string"==typeof c&&(c=[c]),d[b].apply(d,c)):g("No such method : "+b):g("Not initialized, can not call method : "+b):d?d._init(b):a.data(this,"plugin_"+e,new f(this,a.extend(!0,{},b)))})}}(jQuery,window,document);

data/tests/components/bootstrap-treeview/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "bootstrap-treeview",
+  "version": "1.0.0",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-uglify": "~0.2.4",
+    "grunt-contrib-cssmin": "~0.4.0",
+    "grunt-contrib-qunit": ">=0.2.1",
+    "grunt-contrib-watch": ">=0.3.1",
+    "grunt-contrib-copy": "~0.4.1",
+    "bower": "~1.2.7"
+  },
+  "dependencies": {
+    "phantomjs": "~1.9.2-2",
+    "express": "~3.4.2",
+    "ejs": "~0.8.5"
+  }
+}

data/tests/components/bootstrap-treeview/public/css/bootstrap-treeview.css

@@ -0,0 +1,37 @@
+/* =========================================================
+ * bootstrap-treeview.css v1.0.2
+ * =========================================================
+ * Copyright 2013 Jonathan Miles 
+ * Project URL : http://www.jondmiles.com/bootstrap-treeview
+ *	
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+.treeview .list-group-item {
+	cursor: pointer;
+}
+
+.treeview span.indent {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.treeview span.expand-collapse {
+	width: 1rem;
+	height: 1rem;
+}
+
+.treeview span.icon {
+	margin-left: 10px;
+	margin-right: 5px;
+}

data/tests/components/bootstrap-treeview/public/example-dom.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap Tree View</title>
+    <link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
+    <link href="./css/bootstrap-treeview.css" rel="stylesheet">
+  </head>
+  <body>
+  	<div class="container">
+      <h1>Bootstrap Tree View - DOM Tree</h1>
+      <br/>
+      <div class="row">
+        <div class="col-sm-12">
+          <label for="treeview"></label>
+          <div id="treeview"/>
+        </div>
+      </div>
+    </div>
+    <script src="./bower_components/jquery/dist/jquery.js"></script>
+  	<script src="./js/bootstrap-treeview.js"></script>
+  	<script type="text/javascript">
+
+      function buildDomTree() {
+         
+        var data = [];
+
+        function walk(nodes, data) {
+          if (!nodes) { return; }
+          $.each(nodes, function (id, node) {
+            var obj = {
+              id: id,
+              text: node.nodeName + " - " + (node.innerText ? node.innerText : ''),
+              tags: [node.childElementCount > 0 ? node.childElementCount + ' child elements' : '']
+            };
+            if (node.childElementCount > 0) {
+              obj.nodes = [];
+              walk(node.children, obj.nodes);
+            }
+            data.push(obj);
+          });
+        }
+
+        walk($('html')[0].children, data);
+        return data;
+      }
+
+  		$(function() {
+
+        var options = {
+          bootstrap2: false, 
+          showTags: true,
+          levels: 5,
+          data: buildDomTree()
+        };
+
+  			$('#treeview').treeview(options);
+  		});
+  	</script>
+  </body>

data/tests/components/bootstrap-treeview/public/index.html

@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap Tree View</title>
+    <link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
+    <!-- <link href="./css/bootstrap-treeview.css" rel="stylesheet"> -->
+  </head>
+  <body>
+  	<div class="container">
+    	<h1>Bootstrap Tree View</h1>
+      <br/>
+      <div class="row">
+        <div class="col-sm-4">
+          <h2>Default</h2>
+          <div id="treeview1" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Collapsed</h2>
+          <div id="treeview2" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Expanded</h2>
+          <div id="treeview3" class=""></div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-4">
+          <h2>Blue Theme</h2>
+          <div id="treeview4" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Custom Icons</h2>
+          <div id="treeview5" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Tags as Badges</h2>
+          <div id="treeview6" class=""></div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-4">
+          <h2>Without Border</h2>
+          <div id="treeview7" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Colourful</h2>
+          <div id="treeview8" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Node Overrides</h2>
+          <div id="treeview9" class=""></div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-4">
+          <h2>Link enabled, or</h2>
+          <div id="treeview10" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Events</h2>
+          <div id="treeview11" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Output</h2>
+          <div id="event_output"></div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-4">
+          <h2>JSON Data</h2>
+          <div id="treeview12" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2></h2>
+          <div id="treeview13" class=""></div>
+        </div>
+        <div class="col-sm-4">
+          <h2></h2>
+          <div id="treeview14"></div>
+        </div>
+      </div>
+      <br/>
+      <br/>
+      <br/>
+      <br/>
+    </div>
+    <script src="./bower_components/jquery/dist/jquery.js"></script>
+  	<script src="./js/bootstrap-treeview.js"></script>
+  	<script type="text/javascript">
+
+  		$(function() {
+
+        var defaultData = [
+          {
+            text: 'Parent 1',
+            href: '#parent1',
+            tags: ['4'],
+            nodes: [
+              {
+                text: 'Child 1',
+                href: '#child1',
+                tags: ['2'],
+                nodes: [
+                  {
+                    text: 'Grandchild 1',
+                    href: '#grandchild1',
+                    tags: ['0']
+                  },
+                  {
+                    text: 'Grandchild 2',
+                    href: '#grandchild2',
+                    tags: ['0']
+                  }
+                ]
+              },
+              {
+                text: 'Child 2',
+                href: '#child2',
+                tags: ['0']
+              }
+            ]
+          },
+          {
+            text: 'Parent 2',
+            href: '#parent2',
+            tags: ['0']
+          },
+          {
+            text: 'Parent 3',
+            href: '#parent3',
+             tags: ['0']
+          },
+          {
+            text: 'Parent 4',
+            href: '#parent4',
+            tags: ['0']
+          },
+          {
+            text: 'Parent 5',
+            href: '#parent5'  ,
+            tags: ['0']
+          }
+        ];
+
+        var alternateData = [
+          {
+            text: 'Parent 1',
+            tags: ['2'],
+            nodes: [
+              {
+                text: 'Child 1',
+                tags: ['3'],
+                nodes: [
+                  {
+                    text: 'Grandchild 1',
+                    tags: ['6']
+                  },
+                  {
+                    text: 'Grandchild 2',
+                    tags: ['3']
+                  }
+                ]
+              },
+              {
+                text: 'Child 2',
+                tags: ['3']
+              }
+            ]
+          },
+          {
+            text: 'Parent 2',
+            tags: ['7']
+          },
+          {
+            text: 'Parent 3',
+            icon: 'glyphicon glyphicon-earphone',
+            href: '#demo',
+            tags: ['11']
+          },
+          {
+            text: 'Parent 4',
+            icon: 'glyphicon glyphicon-cloud-download',
+            href: '/demo.html',
+            tags: ['19'],
+            selected: true
+          },
+          {
+            text: 'Parent 5',
+            icon: 'glyphicon glyphicon-certificate',
+            color: 'pink',
+            backColor: 'red',
+            href: 'http://www.tesco.com',
+            tags: ['available','0']
+          }
+        ];
+
+        var json = '[' +
+          '{' +
+            '"text": "Parent 1",' +
+            '"nodes": [' +
+              '{' +
+                '"text": "Child 1",' +
+                '"nodes": [' +
+                  '{' +
+                    '"text": "Grandchild 1"' +
+                  '},' +
+                  '{' +
+                    '"text": "Grandchild 2"' +
+                  '}' +
+                ']' +
+              '},' +
+              '{' +
+                '"text": "Child 2"' +
+              '}' +
+            ']' +
+          '},' +
+          '{' +
+            '"text": "Parent 2"' +
+          '},' +
+          '{' +
+            '"text": "Parent 3"' +
+          '},' +
+          '{' +
+            '"text": "Parent 4"' +
+          '},' +
+          '{' +
+            '"text": "Parent 5"' +
+          '}' +
+        ']';
+
+
+        $('#treeview1').treeview({
+          data: defaultData
+        });
+
+        $('#treeview2').treeview({
+          levels: 1,
+          data: defaultData
+        });
+
+        $('#treeview3').treeview({
+          levels: 99,
+          data: defaultData
+        });
+
+        $('#treeview4').treeview({
+          
+          color: "#428bca",
+          data: defaultData
+        });
+
+        $('#treeview5').treeview({
+          color: "#428bca",
+          expandIcon: 'glyphicon glyphicon-chevron-right',
+          collapseIcon: 'glyphicon glyphicon-chevron-down',
+          nodeIcon: 'glyphicon glyphicon-bookmark',
+          data: defaultData
+        });
+
+        $('#treeview6').treeview({
+          color: "#428bca",
+          expandIcon: "glyphicon glyphicon-stop",
+          collapseIcon: "glyphicon glyphicon-unchecked",
+          nodeIcon: "glyphicon glyphicon-user",
+          showTags: true,
+          data: defaultData
+        });
+
+        $('#treeview7').treeview({
+          color: "#428bca",
+          showBorder: false,
+          data: defaultData
+        });
+
+        $('#treeview8').treeview({
+          expandIcon: "glyphicon glyphicon-stop",
+          collapseIcon: "glyphicon glyphicon-unchecked",
+          nodeIcon: "glyphicon glyphicon-user",
+          color: "yellow",
+          backColor: "purple",
+          onhoverColor: "orange",
+          borderColor: "red",
+          showBorder: false,
+          showTags: true,
+          highlightSelected: true, 
+          selectedColor: "yellow",
+          selectedBackColor: "darkorange",
+          data: defaultData
+        });
+
+        $('#treeview9').treeview({
+          expandIcon: "glyphicon glyphicon-stop",
+          collapseIcon: "glyphicon glyphicon-unchecked",
+          nodeIcon: "glyphicon glyphicon-user",
+          color: "yellow",
+          backColor: "purple",
+          onhoverColor: "orange",
+          borderColor: "red",
+          showBorder: false,
+          showTags: true,
+          highlightSelected: true, 
+          selectedColor: "yellow",
+          selectedBackColor: "darkorange",
+          data: alternateData
+        });
+
+        $('#treeview10').treeview({
+          color: "#428bca",
+          enableLinks: true,
+          data: defaultData
+        });
+
+        $('#treeview11').treeview({
+          color: "#428bca",
+          data: defaultData,
+          onNodeSelected: function(event, node) {
+            $('#event_output').prepend('<p>You clicked ' + node.text + '</p>');
+          }
+        });
+
+        // $('#treeview11').on('nodeSelected', function (event, node) {
+        //   $('#event_output').prepend('<p>You clicked ' + node.text + '</p>');
+        // });
+
+
+        $('#treeview12').treeview({
+          data: json
+        });
+
+  		});
+  	</script>
+  </body>
+</html>