├── linearicons └── fonts │ ├── Linearicons.ttf │ └── Linearicons.woff ├── font-awesome ├── fonts │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff └── css │ └── font-awesome.min.css ├── css ├── style.css ├── fixie-demo.css ├── highlight │ └── styles │ │ └── googlecode.css ├── prism.css ├── theme.css └── buttons.css ├── package.json ├── assets └── js │ ├── ie10-viewport-bug-workaround.js │ └── ie-emulation-modes-warning.js ├── bower.json ├── temp ├── template.html └── getTree.js ├── js ├── ngStorage.min.js ├── main.js ├── angular-script.js └── libs │ └── require │ └── require.js ├── src ├── treeGrid.css ├── treeGrid.css.bkp ├── tree-grid-directive.js.orig ├── tree-grid-directive.js ├── tree-grid-directive.js.bkp └── tree-grid-directive.js.bad ├── dist ├── ladda.min.js ├── spin.min.js └── ladda-themeless.min.css ├── README.md ├── terms.html ├── terms_new.html ├── terms.html.bkp ├── treeGridTerms.js.bkp └── treeGridTerms.js /linearicons/fonts/Linearicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ctech-charlescerecedo/terms-tree-grid/HEAD/linearicons/fonts/Linearicons.ttf -------------------------------------------------------------------------------- /linearicons/fonts/Linearicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ctech-charlescerecedo/terms-tree-grid/HEAD/linearicons/fonts/Linearicons.woff -------------------------------------------------------------------------------- /font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ctech-charlescerecedo/terms-tree-grid/HEAD/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ctech-charlescerecedo/terms-tree-grid/HEAD/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | # ATCM - Style guide 3 | 4 | 5 | 6 | */ 7 | 8 | /* ### ATCM ### */ 9 | @import url("guide.css"); 10 | @import url("inprogress.css"); 11 | /* ### Other ### */ 12 | 13 | @import url("theme.css"); 14 | @import url("buttons.css"); 15 | @import url("fixie-demo.css"); 16 | @import url("highlight/styles/googlecode.css"); 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-bootstrap-grid-tree", 3 | "version": "0.1.0", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "grunt": "~0.4.1", 7 | "grunt-contrib-coffee": "~0.7.0", 8 | "grunt-contrib-watch": "~0.5.1", 9 | "grunt-contrib-jade": "~0.8.0", 10 | "grunt-string-replace": "~0.2.7" 11 | }, 12 | "keywords":["angularjs","bootstrap","tree", "grid","widget"], 13 | "licence":"MIT" 14 | } -------------------------------------------------------------------------------- /assets/js/ie10-viewport-bug-workaround.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * IE10 viewport hack for Surface/desktop Windows 8 bug 3 | * Copyright 2014 Twitter, Inc. 4 | * Licensed under the Creative Commons Attribution 3.0 Unported License. For 5 | * details, see http://creativecommons.org/licenses/by/3.0/. 6 | */ 7 | 8 | // See the Getting Started docs for more information: 9 | // http://getbootstrap.com/getting-started/#support-ie10-width 10 | 11 | (function () { 12 | 'use strict'; 13 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 14 | var msViewportStyle = document.createElement('style') 15 | msViewportStyle.appendChild( 16 | document.createTextNode( 17 | '@-ms-viewport{width:auto!important}' 18 | ) 19 | ) 20 | document.querySelector('head').appendChild(msViewportStyle) 21 | } 22 | })(); 23 | 24 | -------------------------------------------------------------------------------- /css/fixie-demo.css: -------------------------------------------------------------------------------- 1 | e Example Usage 2 | 3 | [fixie.js](http://fixiejs.com/) is bundled with Kalei. 4 | 5 | "Just set class to fixie wherever you need dummy content. It works for headers, paragraphs, lists, images, and just about anything else." 6 | 7 | ## Example Heading and Paragraph 8 | 9 | ``` 10 |

11 |

12 | ``` 13 | */ 14 | h3.fixie-demo { 15 | color: #444; 16 | } 17 | p.fixie-demo { 18 | color: #555 ; 19 | } 20 | 21 | /* 22 | ## Example Fixie Images 23 | 24 | ``` 25 |
26 | 27 | 28 | 29 | 30 |
31 | ``` 32 | */ 33 | .fixie-demo img { 34 | float: left; 35 | margin-left: 10px; 36 | width:60px; 37 | height:60px; 38 | padding: 2px; 39 | border: 1px solid #ccc; 40 | } 41 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-bootstrap-grid-tree", 3 | "version": "0.1.0", 4 | "description":"A Grid That display Tree Control for AngularJS, using CSS animation and Bootstrap style", 5 | "main":["src/treeGrid.css","src/tree-grid-directive.js"], 6 | "licence":"MIT", 7 | "keywords":["angularjs","bootstrap","tree", "grid","widget"], 8 | "authors":["Md Khan"], 9 | "homepage" :"https://github.com/okigan/tree-grid-directive", 10 | "repository":{ 11 | "type":"git", 12 | "url":"git://github.com/okigan/tree-grid-directive" 13 | }, 14 | "ignore": [ 15 | "temp", 16 | "test", 17 | ".gitignore", 18 | "bower.json", 19 | "package.json", 20 | "README.md" 21 | ], 22 | "dependencies": { 23 | "angular": ">=1.1.16", 24 | "bootstrap": ">=2.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /css/highlight/styles/googlecode.css: -------------------------------------------------------------------------------- 1 | /* 2 | # Fixie Example Usage 3 | 4 | [fixie.js](http://fixiejs.com/) is bundled with Kalei. 5 | 6 | "Just set class to fixie wherever you need dummy content. It works for headers, paragraphs, lists, images, and just about anything else." 7 | 8 | ## Example Heading and Paragraph 9 | 10 | ``` 11 |

12 |

13 | ``` 14 | */ 15 | h3.fixie-demo { 16 | color: #444; 17 | } 18 | p.fixie-demo { 19 | color: #555 ; 20 | } 21 | 22 | /* 23 | ## Example Fixie Images 24 | 25 | ``` 26 |
27 | 28 | 29 | 30 | 31 |
32 | ``` 33 | */ 34 | .fixie-demo img { 35 | float: left; 36 | margin-left: 10px; 37 | width:60px; 38 | height:60px; 39 | padding: 2px; 40 | border: 1px solid #ccc; 41 | } 42 | -------------------------------------------------------------------------------- /temp/template.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/ngStorage.min.js: -------------------------------------------------------------------------------- 1 | /*! ngStorage 0.3.0 | Copyright (c) 2013 Gias Kay Lee | MIT License */"use strict";!function(){function a(a){return["$rootScope","$window",function(b,c){for(var d,e,f,g=c[a]||(console.warn("This browser does not support Web Storage!"),{}),h={$default:function(a){for(var b in a)angular.isDefined(h[b])||(h[b]=a[b]);return h},$reset:function(a){for(var b in h)"$"===b[0]||delete h[b];return h.$default(a)}},i=0;i code[class*="language-"], 54 | pre[class*="language-"] { 55 | background: #f5f2f0; 56 | } 57 | 58 | /* Inline code */ 59 | :not(pre) > code[class*="language-"] { 60 | padding: .1em; 61 | border-radius: .3em; 62 | } 63 | 64 | .token.comment, 65 | .token.prolog, 66 | .token.doctype, 67 | .token.cdata { 68 | color: slategray; 69 | } 70 | 71 | .token.punctuation { 72 | color: #999; 73 | } 74 | 75 | .namespace { 76 | opacity: .7; 77 | } 78 | 79 | .token.property, 80 | .token.tag, 81 | .token.boolean, 82 | .token.number { 83 | color: #905; 84 | } 85 | 86 | .token.selector, 87 | .token.attr-name, 88 | .token.string { 89 | color: #690; 90 | } 91 | 92 | .token.operator, 93 | .token.entity, 94 | .token.url, 95 | .language-css .token.string, 96 | .style .token.string { 97 | color: #a67f59; 98 | background: hsla(0,0%,100%,.5); 99 | } 100 | 101 | .token.atrule, 102 | .token.attr-value, 103 | .token.keyword { 104 | color: #07a; 105 | } 106 | 107 | 108 | .token.regex, 109 | .token.important { 110 | color: #e90; 111 | } 112 | 113 | .token.important { 114 | font-weight: bold; 115 | } 116 | 117 | .token.entity { 118 | cursor: help; 119 | } 120 | 121 | -------------------------------------------------------------------------------- /src/treeGrid.css: -------------------------------------------------------------------------------- 1 | /* 2 | treeGrid.css 3 | 4 | style for the tree-grid 5 | for both Bootstrap 2 and Bootstrap 3 6 | 7 | */ 8 | 9 | 10 | 11 | .tree-grid-animate-enter, 12 | .tree-grid-row.ng-enter { 13 | transition: 200ms linear all; 14 | position: relative; 15 | display: block; 16 | opacity: 0; 17 | max-height:0px; 18 | } 19 | .tree-grid-animate-enter.tree-grid-animate-enter-active, 20 | .tree-grid-row.ng-enter-active{ 21 | opacity: 1; 22 | max-height:30px; 23 | } 24 | 25 | .tree-grid-animate-leave, 26 | .tree-grid-row.ng-leave { 27 | transition: 200ms linear all; 28 | position: relative; 29 | display: block; 30 | height:30px; 31 | max-height: 30px; 32 | opacity: 1; 33 | } 34 | .tree-grid-animate-leave.tree-grid-animate-leave-active, 35 | .tree-grid-row.ng-leave-active { 36 | height: 0px; 37 | max-height:0px; 38 | opacity: 0; 39 | } 40 | 41 | 42 | /* 43 | ------------------------------------------ 44 | Angular 1.2.0 Animation 45 | */ 46 | 47 | 48 | .tree-grid-animate.ng-enter{ 49 | 50 | } 51 | .tree-grid-animate.ng-enter{ 52 | 53 | } 54 | 55 | 56 | 57 | 58 | /* 59 | end animation stuff 60 | ----------------------------------------- 61 | begin normal css stuff 62 | */ 63 | .tree-grid .tree-grid-row { 64 | padding: 0px; 65 | margin:0px; 66 | } 67 | .tree-grid .tree-grid-row td { 68 | padding: 1px; 69 | margin:0px; 70 | } 71 | 72 | .tree-grid .tree-grid-row a { 73 | padding: 3px 10px; 74 | } 75 | 76 | .tree-grid i.indented { 77 | padding: 2px; 78 | } 79 | 80 | .tree-grid { 81 | } 82 | .tree-grid .level-1 .indented { 83 | position: relative; 84 | left: 0px; 85 | } 86 | .tree-grid .level-2 .indented { 87 | position: relative; 88 | left: 6px; 89 | } 90 | .tree-grid .level-3 .indented { 91 | position: relative; 92 | left: 12px; 93 | } 94 | .tree-grid .level-4 .indented { 95 | position: relative; 96 | left: 18px; 97 | } 98 | .tree-grid .level-5 .indented { 99 | position: relative; 100 | left: 24px; 101 | } 102 | .tree-grid .level-6 .indented { 103 | position: relative; 104 | left: 30px; 105 | } 106 | .tree-grid .level-7 .indented { 107 | position: relative; 108 | left: 36px; 109 | } 110 | .tree-grid .level-8 .indented { 111 | position: relative; 112 | left: 42px; 113 | } 114 | .tree-grid .level-9 .indented { 115 | position: relative; 116 | left: 48px; 117 | } 118 | 119 | .tree-grid .tree-icon, 120 | .tree-label { 121 | cursor: pointer; 122 | } 123 | 124 | table.tree-grid { 125 | max-height: 500px; 126 | overflow-y: scroll; 127 | } 128 | -------------------------------------------------------------------------------- /src/treeGrid.css.bkp: -------------------------------------------------------------------------------- 1 | /* 2 | treeGrid.css 3 | 4 | style for the tree-grid 5 | for both Bootstrap 2 and Bootstrap 3 6 | 7 | */ 8 | 9 | 10 | 11 | .tree-grid-animate-enter, 12 | .tree-grid-row.ng-enter { 13 | transition: 200ms linear all; 14 | position: relative; 15 | display: block; 16 | opacity: 0; 17 | max-height:0px; 18 | } 19 | .tree-grid-animate-enter.tree-grid-animate-enter-active, 20 | .tree-grid-row.ng-enter-active{ 21 | opacity: 1; 22 | max-height:30px; 23 | } 24 | 25 | .tree-grid-animate-leave, 26 | .tree-grid-row.ng-leave { 27 | transition: 200ms linear all; 28 | position: relative; 29 | display: block; 30 | height:30px; 31 | max-height: 30px; 32 | opacity: 1; 33 | } 34 | .tree-grid-animate-leave.tree-grid-animate-leave-active, 35 | .tree-grid-row.ng-leave-active { 36 | height: 0px; 37 | max-height:0px; 38 | opacity: 0; 39 | } 40 | 41 | 42 | /* 43 | ------------------------------------------ 44 | Angular 1.2.0 Animation 45 | */ 46 | 47 | 48 | .tree-grid-animate.ng-enter{ 49 | 50 | } 51 | .tree-grid-animate.ng-enter{ 52 | 53 | } 54 | 55 | 56 | 57 | 58 | /* 59 | end animation stuff 60 | ----------------------------------------- 61 | begin normal css stuff 62 | */ 63 | .tree-grid .tree-grid-row { 64 | padding: 0px; 65 | margin:0px; 66 | } 67 | .tree-grid .tree-grid-row td { 68 | padding: 1px; 69 | margin:0px; 70 | } 71 | 72 | .tree-grid .tree-grid-row a { 73 | padding: 3px 10px; 74 | } 75 | 76 | .tree-grid i.indented { 77 | padding: 2px; 78 | } 79 | 80 | .tree-grid { 81 | } 82 | .tree-grid .level-1 .indented { 83 | position: relative; 84 | left: 0px; 85 | } 86 | .tree-grid .level-2 .indented { 87 | position: relative; 88 | left: 20px; 89 | } 90 | .tree-grid .level-3 .indented { 91 | position: relative; 92 | left: 40px; 93 | } 94 | .tree-grid .level-4 .indented { 95 | position: relative; 96 | left: 60px; 97 | } 98 | .tree-grid .level-5 .indented { 99 | position: relative; 100 | left: 80px; 101 | } 102 | .tree-grid .level-6 .indented { 103 | position: relative; 104 | left: 100px; 105 | } 106 | .tree-grid .level-7 .indented { 107 | position: relative; 108 | left: 120px; 109 | } 110 | .tree-grid .level-8 .indented { 111 | position: relative; 112 | left: 140px; 113 | } 114 | .tree-grid .level-9 .indented { 115 | position: relative; 116 | left: 160px; 117 | } 118 | 119 | .tree-grid .tree-icon, 120 | .tree-label { 121 | cursor: pointer; 122 | } 123 | 124 | table.tree-grid { 125 | max-height: 500px; 126 | overflow-y: scroll; 127 | } 128 | -------------------------------------------------------------------------------- /dist/ladda.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 0.9.4 (2014-06-21, 11:24) 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */ 8 | (function(t,e){"object"==typeof exports?module.exports=e(require("spin.js")):"function"==typeof define&&define.amd?define(["spin"],e):t.Ladda=e(t.Spinner)})(this,function(t){"use strict";function e(t){if(t===void 0)return console.warn("Ladda button target must be defined."),void 0;t.querySelector(".ladda-label")||(t.innerHTML=''+t.innerHTML+"");var e,n=document.createElement("span");n.className="ladda-spinner",t.appendChild(n);var r,a={start:function(){return e||(e=o(t)),t.setAttribute("disabled",""),t.setAttribute("data-loading",""),clearTimeout(r),e.spin(n),this.setProgress(0),this},startAfter:function(t){return clearTimeout(r),r=setTimeout(function(){a.start()},t),this},stop:function(){return t.removeAttribute("disabled"),t.removeAttribute("data-loading"),clearTimeout(r),e&&(r=setTimeout(function(){e.stop()},1e3)),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(e){e=Math.max(Math.min(e,1),0);var n=t.querySelector(".ladda-progress");0===e&&n&&n.parentNode?n.parentNode.removeChild(n):(n||(n=document.createElement("div"),n.className="ladda-progress",t.appendChild(n)),n.style.width=(e||0)*t.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),t.setAttribute("disabled",""),this},isLoading:function(){return t.hasAttribute("data-loading")},remove:function(){clearTimeout(r),t.removeAttribute("disabled",""),t.removeAttribute("data-loading",""),e&&(e.stop(),e=null);for(var n=0,i=u.length;i>n;n++)if(a===u[n]){u.splice(n,1);break}}};return u.push(a),a}function n(t,e){for(;t.parentNode&&t.tagName!==e;)t=t.parentNode;return e===t.tagName?t:void 0}function r(t){for(var e=["input","textarea"],n=[],r=0;e.length>r;r++)for(var a=t.getElementsByTagName(e[r]),i=0;a.length>i;i++)a[i].hasAttribute("required")&&n.push(a[i]);return n}function a(t,a){a=a||{};var i=[];"string"==typeof t?i=s(document.querySelectorAll(t)):"object"==typeof t&&"string"==typeof t.nodeName&&(i=[t]);for(var o=0,u=i.length;u>o;o++)(function(){var t=i[o];if("function"==typeof t.addEventListener){var s=e(t),u=-1;t.addEventListener("click",function(){var e=!0,i=n(t,"FORM");if(i!==void 0)for(var o=r(i),d=0;o.length>d;d++)""===o[d].value.replace(/^\s+|\s+$/g,"")&&(e=!1);e&&(s.startAfter(1),"number"==typeof a.timeout&&(clearTimeout(u),u=setTimeout(s.stop,a.timeout)),"function"==typeof a.callback&&a.callback.apply(null,[s]))},!1)}})()}function i(){for(var t=0,e=u.length;e>t;t++)u[t].stop()}function o(e){var n,r=e.offsetHeight;0===r&&(r=parseFloat(window.getComputedStyle(e).height)),r>32&&(r*=.8),e.hasAttribute("data-spinner-size")&&(r=parseInt(e.getAttribute("data-spinner-size"),10)),e.hasAttribute("data-spinner-color")&&(n=e.getAttribute("data-spinner-color"));var a=12,i=.2*r,o=.6*i,s=7>i?2:3;return new t({color:n||"#fff",lines:a,radius:i,length:o,width:s,zIndex:"auto",top:"auto",left:"auto",className:""})}function s(t){for(var e=[],n=0;t.length>n;n++)e.push(t[n]);return e}var u=[];return{bind:a,create:e,stopAll:i}}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | terms-tree-grid 2 | =========================== 3 | 4 | taken from tree-grid-directive 5 | =========================== 6 | 7 | A grid to display data in tree structure by using angular, bootstrap. 8 | 9 | ### It's open source (MIT license) 10 | Feel free to whatever you want to do with it. 11 | 12 | #### Demo:: [http://khan4019.github.io/tree-grid-directive/test/treeGrid.html](http://khan4019.github.io/tree-grid-directive/test/treeGrid.html) 13 | 14 | ### Mininum to start 15 | ------------------------------- 16 | Include src/treeGrid.css and src/tree-grid-directive.js in your html file after bootstrap and angular. Just add the following 17 | 18 | 19 | 20 | 21 | **tree_data:** is an array of objects. If object has child put them in 'children' array of the object. an example of tree-data will look like. 22 | 23 | $scope.tree_data = [ 24 | {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10", 25 | children:[ 26 | {Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time", 27 | children:[ 28 | {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"}, 29 | {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"} 30 | ] 31 | }, 32 | {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone", 33 | children:[ 34 | {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"} 35 | ] 36 | } 37 | ] 38 | }, 39 | {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"} 40 | ]; 41 | 42 | if you have an array sorted by primary key and parent Key, you can use getTree inside temp folder. 43 | 44 | ### More Options 45 | _____________________________ 46 | If you want more customization, you can use the following options 47 | 48 | 58 | 59 | 60 | 61 | **col_defs:** is an array of objects that allows you to customized column header. if displayName is not provided, field (object property) is used as display Name. 62 | 63 | $scope.col_defs = [ 64 | { field: "Description"}, 65 | { field: "DemographicId", displayName: "Demographic Id"}, 66 | { field: "ParentId", displayName: "Parent Id"}, 67 | { field: "Area"}, 68 | { field: "Population"}, 69 | { field: "TimeZone", displayName: "Time Zone"} 70 | ]; 71 | 72 | **expanding_property:** this is the property of the objects in 'tree_data' where you want to put the ability to expand and collapse. 73 | 74 | **my_tree:** you can use 'tree-control' to use expand all and collapse all. check it out in the link provided for demo 75 | 76 | **icons:** define Font Awesome, bootstrap glyphicon for expand, collapse and leaf 77 | 78 | **expand-level:** depth of the tree, you want to expand while loading 79 | 80 | **on-select:** a click handler while you are clicking on +/- 81 | 82 | $scope.my_tree_handler = function(branch){ 83 | console.log('you clicked on', branch) 84 | } 85 | 86 | ###custom template 87 | If you want to use custom template, change the template in line 10 src/tree-grid-directive.js. if you want to use template in html file, replace template="" by templateUrl="mytemplate.html" 88 | 89 | ####Inspired by [abn teee](https://github.com/nickperkinslondon/angular-bootstrap-nav-tree) 90 | -------------------------------------------------------------------------------- /dist/spin.min.js: -------------------------------------------------------------------------------- 1 | (function(t,e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Spinner=e()})(this,function(){"use strict";function t(t,e){var i,n=document.createElement(t||"div");for(i in e)n[i]=e[i];return n}function e(t){for(var e=1,i=arguments.length;i>e;e++)t.appendChild(arguments[e]);return t}function i(t,e,i,n){var r=["opacity",e,~~(100*t),i,n].join("-"),o=.01+100*(i/n),a=Math.max(1-(1-t)/e*(100-o),t),s=u.substring(0,u.indexOf("Animation")).toLowerCase(),l=s&&"-"+s+"-"||"";return c[r]||(p.insertRule("@"+l+"keyframes "+r+"{"+"0%{opacity:"+a+"}"+o+"%{opacity:"+t+"}"+(o+.01)+"%{opacity:1}"+(o+e)%100+"%{opacity:"+t+"}"+"100%{opacity:"+a+"}"+"}",p.cssRules.length),c[r]=1),r}function n(t,e){var i,n,r=t.style;for(e=e.charAt(0).toUpperCase()+e.slice(1),n=0;d.length>n;n++)if(i=d[n]+e,void 0!==r[i])return i;return void 0!==r[e]?e:void 0}function r(t,e){for(var i in e)t.style[n(t,i)||i]=e[i];return t}function o(t){for(var e=1;arguments.length>e;e++){var i=arguments[e];for(var n in i)void 0===t[n]&&(t[n]=i[n])}return t}function a(t,e){return"string"==typeof t?t:t[e%t.length]}function s(t){this.opts=o(t||{},s.defaults,f)}function l(){function i(e,i){return t("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',i)}p.addRule(".spin-vml","behavior:url(#default#VML)"),s.prototype.lines=function(t,n){function o(){return r(i("group",{coordsize:d+" "+d,coordorigin:-u+" "+-u}),{width:d,height:d})}function s(t,s,l){e(p,e(r(o(),{rotation:360/n.lines*t+"deg",left:~~s}),e(r(i("roundrect",{arcsize:n.corners}),{width:u,height:n.width,left:n.radius,top:-n.width>>1,filter:l}),i("fill",{color:a(n.color,t),opacity:n.opacity}),i("stroke",{opacity:0}))))}var l,u=n.length+n.width,d=2*u,c=2*-(n.width+n.length)+"px",p=r(o(),{position:"absolute",top:c,left:c});if(n.shadow)for(l=1;n.lines>=l;l++)s(l,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(l=1;n.lines>=l;l++)s(l);return e(t,p)},s.prototype.opacity=function(t,e,i,n){var r=t.firstChild;n=n.shadow&&n.lines||0,r&&r.childNodes.length>e+n&&(r=r.childNodes[e+n],r=r&&r.firstChild,r=r&&r.firstChild,r&&(r.opacity=i))}}var u,d=["webkit","Moz","ms","O"],c={},p=function(){var i=t("style",{type:"text/css"});return e(document.getElementsByTagName("head")[0],i),i.sheet||i.styleSheet}(),f={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",position:"absolute"};s.defaults={},o(s.prototype,{spin:function(e){this.stop();var i=this,n=i.opts,o=i.el=r(t(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex});if(n.radius+n.length+n.width,r(o,{left:n.left,top:n.top}),e&&e.insertBefore(o,e.firstChild||null),o.setAttribute("role","progressbar"),i.lines(o,i.opts),!u){var a,s=0,l=(n.lines-1)*(1-n.direction)/2,d=n.fps,c=d/n.speed,p=(1-n.opacity)/(c*n.trail/100),f=c/n.lines;(function h(){s++;for(var t=0;n.lines>t;t++)a=Math.max(1-(s+(n.lines-t)*f)%c*p,n.opacity),i.opacity(o,t*n.direction+l,a,n);i.timeout=i.el&&setTimeout(h,~~(1e3/d))})()}return i},stop:function(){var t=this.el;return t&&(clearTimeout(this.timeout),t.parentNode&&t.parentNode.removeChild(t),this.el=void 0),this},lines:function(n,o){function s(e,i){return r(t(),{position:"absolute",width:o.length+o.width+"px",height:o.width+"px",background:e,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/o.lines*d+o.rotate)+"deg) translate("+o.radius+"px"+",0)",borderRadius:(o.corners*o.width>>1)+"px"})}for(var l,d=0,c=(o.lines-1)*(1-o.direction)/2;o.lines>d;d++)l=r(t(),{position:"absolute",top:1+~(o.width/2)+"px",transform:o.hwaccel?"translate3d(0,0,0)":"",opacity:o.opacity,animation:u&&i(o.opacity,o.trail,c+d*o.direction,o.lines)+" "+1/o.speed+"s linear infinite"}),o.shadow&&e(l,r(s("#000","0 0 4px #000"),{top:"2px"})),e(n,e(l,s(a(o.color,d),"0 0 1px rgba(0,0,0,.1)")));return n},opacity:function(t,e,i){t.childNodes.length>e&&(t.childNodes[e].style.opacity=i)}});var h=r(t("group"),{behavior:"url(#default#VML)"});return!n(h,"transform")&&h.adj?l():u=n(h,"animation"),s}); -------------------------------------------------------------------------------- /terms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 |

45 |
46 | 47 |
48 |
49 | Favorites 50 | Search IMO 51 |
52 |
53 | 54 |
55 | 58 |
59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 | 71 | 74 |
75 | 76 |
Page {{page}}
77 |
78 |
79 | {{branch}} 80 |
81 | 82 |
83 |
84 | 85 | 86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /terms_new.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 |

45 |
46 | 47 |
48 |
49 | 50 |
51 | 54 |
55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 | 67 | 70 |
71 | 72 |
Page {{page}}
73 |
74 |
75 | {{branch}} 76 |
77 | 78 |
79 |
80 | 81 | 82 | 83 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /terms.html.bkp: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 |

45 |
46 | 47 |
48 |
49 | Favorites 50 | Search IMO 51 |
52 |
53 | 54 |
55 | 58 |
59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 | 71 | 74 |
75 | 76 |
Page {{page}}
77 |
78 |
79 | {{branch}} 80 |
81 | 82 |
83 |
84 | 85 | 86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 161 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /dist/ladda-themeless.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */.ladda-button{position:relative}.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;height:32px;top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label{position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);visibility:hidden;opacity:0;-webkit-transition:0.1s linear all !important;-moz-transition:0.1s linear all !important;-ms-transition:0.1s linear all !important;-o-transition:0.1s linear all !important;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{-webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{-webkit-transition:0.3s ease all !important;-moz-transition:0.3s ease all !important;-ms-transition:0.3s ease all !important;-o-transition:0.3s ease all !important;transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:-6px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:0}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 2000px transparent}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1} 8 | -------------------------------------------------------------------------------- /css/theme.css: -------------------------------------------------------------------------------- 1 | /* 2 | # Kalei Themes 3 | 4 | To make sure the code demo's are un-affected by Kaleis own styles we only set a few global styles 5 | 6 | The menu is **fixed** and the page contained simply aligns itself 200px from the left. 7 | 8 | */ 9 | 10 | html, body, .kalei { 11 | height: 100% !important; 12 | background: #f6f4f4; 13 | } 14 | 15 | body { 16 | background-color: #fff !important; 17 | margin: 0 !important; 18 | padding: 0 !important; 19 | } 20 | 21 | .kalei-style-menu-container { 22 | position: fixed; 23 | width: 300px; 24 | height: 100%; 25 | border-right: 1px solid #ccc; 26 | background-color: #fff; 27 | } 28 | 29 | .kalei-styleguide-menu { 30 | height: 100%; 31 | overflow-y: auto; 32 | overflow-x: hidden; 33 | } 34 | 35 | .kalei-style-page { 36 | margin-left: 300px; 37 | padding: 20px; 38 | background-color: #f6f4f4; 39 | } 40 | .kalei-sheet-submenu li:hover{ 41 | background-color: #BCBCBC; 42 | } 43 | .kalei-sheet-submenu li.active:hover{ 44 | background-color: #BCBCBC; 45 | } 46 | /* 47 | ## Headings and paragraphs 48 | ``` 49 |
50 |

Heading 1

51 |

Heading 2

52 |

Heading 3

53 |

Heading 4

54 |
Heading 5
55 |
Heading 6
56 |

57 | 62 |
63 | 64 | ``` 65 | */ 66 | 67 | .kalei-comments > h1, 68 | .kalei-comments > h2, 69 | .kalei-comments > h3, 70 | .kalei-comments > h4, 71 | .kalei-comments > h5, 72 | .kalei-comments > h5, 73 | .kalei-comments > h6, 74 | .kalei-comments > ul, 75 | .kalei-comments > ol, 76 | .kalei-comments > p a, 77 | .kalei-comments > p a:visited, 78 | .kalei-comments > a:visited, 79 | .kalei-comments > a, 80 | .kalei-styleguide-menu-heading > h1, 81 | .kalei-styleguide-menu > li > h3, 82 | .kalei-sheet-submenu li, 83 | .kalei-styleguide-menu-stylesheets, 84 | .kalei-comments > p { 85 | margin: 0; 86 | padding: 10px; 87 | color: #444; 88 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 89 | } 90 | 91 | .kalei-comments> p a, 92 | .kalei-comments> p a:visited { 93 | padding: 0; 94 | } 95 | 96 | .kalei-comments > iframe { 97 | margin-top: 10px; 98 | margin-left: 10px; 99 | } 100 | 101 | .kalei-comments > ul, 102 | .kalei-comments > ol { 103 | margin-left: 20px; 104 | } 105 | 106 | .kalei-comments > ul, 107 | .kalei-comments > ol, 108 | .kalei-comments > p { 109 | font-size: 16px; 110 | } 111 | 112 | /* 113 | ## CSS and Comments Layout 114 | 115 | These styles make sure the css code block is floated to the right correctly and the comments on the left 116 | 117 | ``` 118 |
119 | 120 |
121 |
122 |

This is a test Kalei comment.

123 |
124 |
125 | 126 |
127 | ``` 128 | */ 129 | 130 | .kalei-style-page > .kalei-documentation { 131 | position: relative; 132 | } 133 | 134 | .kalei-comments-container { 135 | position: relative; 136 | width: 100%; 137 | } 138 | 139 | /* 140 | ## Code demos 141 | 142 | When you use Markdown code blocks ```, Kalei automatically renders the code as HTML and beneath it shows the code block with syntax highlighting. 143 | ``` 144 | 
145 |   
146 |     .kalei-comments > pre > code,
147 |     .kalei-css-container > pre > code {
148 |       font-size: 11px;
149 |       opacity: 0.7;
150 |       white-space: pre-wrap;
151 |       padding: 10px;
152 |     }
153 |   
154 |
155 | ``` 156 | */ 157 | 158 | .kalei-css-container { 159 | -webkit-box-sizing: border-box; 160 | -moz-box-sizing: border-box; 161 | -o-box-sizing: border-box; 162 | box-sizing: border-box; 163 | } 164 | 165 | .kalei-comments > pre > code, 166 | .kalei-css-container > pre > code { 167 | padding: 10px; 168 | font-size: 11px; 169 | white-space: pre-wrap; 170 | } 171 | 172 | .kalei-css-container, 173 | .kalei-comments > pre > code { 174 | opacity: 0.3; 175 | } 176 | 177 | .kalei-comments > pre > code:hover, 178 | .kalei-css-container:hover { 179 | opacity: 1; 180 | } 181 | 182 | .kalei-css-container.kalei-no-css { 183 | display: none; 184 | } 185 | 186 | .kalei-comments > pre { 187 | position: relative; 188 | margin: 0; 189 | padding: 20px; 190 | border: 1px solid #ebebeb; 191 | border-top: none; 192 | border-radius: 0 0 3px 3px; 193 | } 194 | 195 | .kalei-comments > pre > code:before { 196 | content: "Code"; 197 | position: absolute; 198 | top: -1px; 199 | left: -1px; 200 | padding: 3px 7px; 201 | color: #ebebeb; 202 | font-size: 12px; 203 | font-weight: bold; 204 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 205 | border-radius: 0 0 4px 0; 206 | background-color: #444; 207 | opacity: 0.3; 208 | } 209 | 210 | .kalei-comments > pre > code:hover:before { 211 | opacity: 1; 212 | } 213 | 214 | .kalei-comments { 215 | padding: 20px; 216 | margin: 0 0 20px 0; 217 | -webkit-box-sizing: border-box; 218 | -moz-box-sizing: border-box; 219 | -o-box-sizing: border-box; 220 | box-sizing: border-box; 221 | border: 1px solid #ccc; 222 | border-radius: 3px; 223 | background-color: #fff; 224 | } 225 | 226 | body .codedemo { 227 | position: relative; 228 | padding: 40px; 229 | font-size: 100%; 230 | border-radius: 3px 3px 0 0; 231 | border: 1px solid #ebebeb; 232 | } 233 | 234 | *:not(.codedemo) .kalei-styleguide-menu-heading h1 { 235 | margin: 20px 0; 236 | padding-left: 20px; 237 | color: #444; 238 | font-size: 22px; 239 | } 240 | 241 | *:not(.codedemo) .kalei-styleguide-menu-heading, 242 | .styleguide-menu-heading:visited { 243 | text-decoration: none; 244 | } 245 | 246 | *:not(.codedemo) .kalei-styleguide-menu-heading:hover { 247 | color: #222; 248 | } 249 | 250 | *:not(.codedemo) .kalei-styleguide-menu { 251 | list-style: none; 252 | margin: 0; 253 | padding: 0; 254 | } 255 | 256 | body .codedemo:after { 257 | content: "Example"; 258 | position: absolute; 259 | top: -1px; 260 | left: -1px; 261 | padding: 3px 7px; 262 | color: #ebebeb; 263 | font-size: 12px; 264 | font-weight: bold; 265 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 266 | border-radius: 3px 0 3px 0; 267 | background-color: #444; 268 | } 269 | 270 | 271 | .kalei-styleguide-menu-stylesheets { 272 | margin-top: 20px; 273 | padding: 10px 20px; 274 | color: #fff; 275 | font-weight: bold; 276 | font-size: 16px; 277 | background-color: #75eb33; 278 | text-shadow: 0 0 1px #777; 279 | } 280 | 281 | .kalei-styleguide-menu > li > h3 { 282 | margin-top: 20px; 283 | padding-left: 20px; 284 | color: #444; 285 | font-weight: bold; 286 | font-size: 16px; 287 | 288 | } 289 | 290 | .kalei-styleguide-menu-link { 291 | display: block; 292 | position: relative; 293 | height: 100%; 294 | padding: 10px 0 10px 30px; 295 | color: #555; 296 | font-weight: bold; 297 | font-family: Arial; 298 | font-size: 14px; 299 | text-decoration: none; 300 | } 301 | 302 | 303 | .kalei-styleguide-menu-link:hover, 304 | .kalei-styleguide-menu-link.active { 305 | color: #ebebeb; 306 | background-color: #444; 307 | } 308 | 309 | .kalei-styleguide-menu-link:hover:after, 310 | .kalei-styleguide-menu-link.active:after { 311 | display: block; 312 | content: ""; 313 | position: absolute; 314 | top: 50%; 315 | left: 10px; 316 | margin-top: -6px; 317 | border-width: 6px 0 6px 6px; 318 | border-style: solid; 319 | border-color: transparent #f7f7f7; 320 | } 321 | 322 | .kalei-sheet-submenu li.active { 323 | background: #ebebeb; 324 | } 325 | 326 | .kalei-sheet-submenu ul { 327 | margin: 0; 328 | padding: 0; 329 | } 330 | .kalei-sheet-submenu li { 331 | padding: 10px 10px 10px 40px; 332 | cursor: pointer; 333 | font-size: 14px; 334 | } 335 | 336 | 337 | -------------------------------------------------------------------------------- /treeGridTerms.js.bkp: -------------------------------------------------------------------------------- 1 | /* 2 | * termGridTree v1.0.0 3 | * Homepage: https://github.com/ctech-charlescerecedo/terms-tree-grid 4 | * Copyright 2015 Chen Tech, Inc. 5 | */ 6 | 7 | 8 | /* 9 | * Controller 10 | */ 11 | (function() { 12 | var app, deps; 13 | 14 | deps = ['treeGrid', 'ngStorage']; 15 | 16 | app = angular.module('treeGridTest', deps); 17 | 18 | app.factory('termService', function($http){ 19 | console.log("termService Called"); 20 | }); 21 | 22 | app.controller('treeGridController', function($http, $scope, $timeout, $localStorage, termService) { 23 | var tree; 24 | var rawTreeData =[{}]; 25 | var search_array = []; 26 | 27 | $scope.favorite = "fav"; 28 | $scope.page = 0; 29 | $scope.limit1 = 1; 30 | $scope.limit2 = 10; 31 | 32 | $scope.next = function(){ 33 | $scope.page++; 34 | //$localStorage.terms = $scope.terms; 35 | $scope.limit1 = $scope.limit1 + 10; 36 | $scope.limit2 = $scope.limit2 + 10; 37 | $scope.searchTerm(); 38 | 39 | } 40 | $scope.prev = function(){ 41 | if($scope.page == 1){ 42 | alert("Already at the begining!"); 43 | }else{ 44 | $scope.page--; 45 | $scope.limit1 = $scope.limit1 - 10; 46 | $scope.limit2 = $scope.limit2 - 10; 47 | $scope.searchTerm(); 48 | } 49 | } 50 | 51 | // Call Term Service 52 | $scope.fn_search = function(){ 53 | $http.defaults.useXDomain = true; // Enable CORS cross domains 54 | $scope.loading = true; // Let loading button know we are starting 55 | if($scope.page == 0){ 56 | $scope.page = 1; 57 | $scope.limit1 = 1; 58 | $scope.limit2 = 10; 59 | } 60 | 61 | if($scope.favorite == "fav"){ 62 | //console.log("favorite selected"); 63 | var reg = /^\d+[.]+\d+$/; 64 | if(reg.test($scope.searchValue)){ 65 | return $http.get("http://terms.azurewebsites.net/api/term/" + $scope.searchValue + "/codenumber/" + $scope.limit1 + "/" + $scope.limit2). 66 | success(function(data){ 67 | return data; 68 | }). 69 | error(function(data, status, headers, config){ 70 | console.log(status); 71 | console.log(data); 72 | console.log(headers); 73 | console.log(config); 74 | $scope.loading = false; // Let loading button know we are done 75 | }); 76 | }else{ 77 | return $http.get("http://terms.azurewebsites.net/api/term/" + $scope.searchValue + "/codename/" + $scope.limit1 + "/" + $scope.limit2). 78 | success(function(data){ 79 | return data; 80 | }). 81 | error(function(data, status, headers, config){ 82 | console.log(status); 83 | console.log(data); 84 | console.log(headers); 85 | console.log(config); 86 | $scope.loading = false; // Let loading button know we are done 87 | }); 88 | } 89 | }else{ 90 | //console.log("imo selected"); 91 | return $http.get("http://terms.azurewebsites.net/api/term/" + $scope.searchValue + "/10/" + $scope.page). 92 | success(function(data){ 93 | return data; 94 | }). 95 | error(function(data, status, headers, config){ 96 | console.log(status); 97 | console.log(data); 98 | console.log(headers); 99 | console.log(config); 100 | $scope.loading = false; // Let loading button know we are done 101 | }); 102 | } 103 | } 104 | 105 | // Search Function 106 | $scope.searchTerm = function(actionText){ 107 | console.log(actionText); 108 | 109 | // Reset the search string and page number 110 | if(typeof actionText !== 'undefined'){ 111 | $scope.searchValue = actionText; 112 | $scope.page = 0; 113 | } 114 | 115 | if(typeof search_array[$scope.page] == 'undefined'){ 116 | $scope.fn_search().then(function(resp){ 117 | $scope.terms = resp.data.terms; 118 | rawTreeData = $scope.terms; 119 | //console.log(rawTreeData); 120 | myTreeData = getTree(rawTreeData, 'Id', 'ParentTermId'); 121 | $scope.tree_data = myTreeData; 122 | $scope.loading = false; // Let loading button know we are done 123 | console.log($scope.tree_data); 124 | search_array[$scope.page] = $scope.tree_data; 125 | }); 126 | }else{ 127 | $scope.tree_data = search_array[$scope.page]; 128 | } 129 | } 130 | 131 | var myTreeData = getTree(rawTreeData, 'Id', 'ParentTermId'); 132 | $scope.tree_data = myTreeData; 133 | $scope.my_tree = tree = {}; 134 | $scope.expanding_property = "Code"; 135 | 136 | //{ field: "CodeSystemId"}, 137 | $scope.col_defs = [ 138 | { field: "CodeName"}, 139 | { field: "Description"} 140 | ]; 141 | $scope.my_tree_handler = function(branch){ 142 | console.log('you clicked on', branch); 143 | $scope.branch = branch; 144 | } 145 | 146 | 147 | function getTree(data, primaryIdName, parentIdName){ 148 | if(!data || data.length==0 || !primaryIdName ||!parentIdName) 149 | return []; 150 | var tree = [], 151 | rootIds = [], 152 | item = data[0], 153 | primaryKey = item[primaryIdName], 154 | treeObjs = {}, 155 | parentId, 156 | parent, 157 | len = data.length, 158 | i = 0; 159 | 160 | 161 | // Do Root Nodes first 162 | while(i;\^+-_!&*='`~@#\$)(,%\/\\]/g,''); 112 | actionText = actionText.trim(); 113 | console.log(actionText); 114 | $scope.searchValue = actionText; 115 | $scope.page = 0; 116 | } 117 | 118 | if(typeof search_array[$scope.page] == 'undefined'){ 119 | $scope.fn_search().then(function(resp){ 120 | $scope.terms = resp.data.terms; 121 | rawTreeData = $scope.terms; 122 | //console.log(rawTreeData); 123 | myTreeData = getTree(rawTreeData, 'Id', 'ParentTermId'); 124 | $scope.tree_data = myTreeData; 125 | $scope.loading = false; // Let loading button know we are done 126 | console.log($scope.tree_data); 127 | search_array[$scope.page] = $scope.tree_data; 128 | }); 129 | }else{ 130 | $scope.tree_data = search_array[$scope.page]; 131 | } 132 | } 133 | 134 | var myTreeData = getTree(rawTreeData, 'Id', 'ParentTermId'); 135 | $scope.tree_data = myTreeData; 136 | $scope.my_tree = tree = {}; 137 | $scope.expanding_property = "Code"; 138 | 139 | //{ field: "CodeSystemId"}, 140 | $scope.col_defs = [ 141 | { field: "CodeName"}, 142 | { field: "Description"} 143 | ]; 144 | $scope.my_tree_handler = function(branch){ 145 | console.log('you clicked on', branch); 146 | $scope.branch = branch; 147 | } 148 | 149 | 150 | function getTree(data, primaryIdName, parentIdName){ 151 | if(!data || data.length==0 || !primaryIdName ||!parentIdName) 152 | return []; 153 | var tree = [], 154 | rootIds = [], 155 | item = data[0], 156 | primaryKey = item[primaryIdName], 157 | treeObjs = {}, 158 | parentId, 159 | parent, 160 | len = data.length, 161 | i = 0; 162 | 163 | 164 | // Do Root Nodes first 165 | while(i0&&(f.splice(a-1,2),a-=2);a=p.pkgs[f=b[0]];b=b.join("/");a&&b===f+"/"+a.main&&(b=f)}else b.indexOf("./")=== 9 | 0&&(b=b.substring(2));return b}function h(b,l){var f=b?b.indexOf("!"):-1,a=null,d=l?l.name:null,i=b,e,h;f!==-1&&(a=b.substring(0,f),b=b.substring(f+1,b.length));a&&(a=c(a,d));b&&(a?e=(f=m[a])&&f.normalize?f.normalize(b,function(b){return c(b,d)}):c(b,d):(e=c(b,d),h=E[e],h||(h=g.nameToUrl(e,null,l),E[e]=h)));return{prefix:a,name:e,parentMap:l,url:h,originalName:i,fullName:a?a+"!"+(e||""):e}}function k(){var b=!0,l=p.priorityWait,f,a;if(l){for(a=0;f=l[a];a++)if(!s[f]){b=!1;break}b&&delete p.priorityWait}return b} 10 | function j(b,l,f){return function(){var a=ga.call(arguments,0),c;if(f&&J(c=a[a.length-1]))c.__requireJsBuild=!0;a.push(l);return b.apply(null,a)}}function q(b,l){var a=j(g.require,b,l);Z(a,{nameToUrl:j(g.nameToUrl,b),toUrl:j(g.toUrl,b),defined:j(g.requireDefined,b),specified:j(g.requireSpecified,b),isBrowser:d.isBrowser});return a}function o(b){var l,a,c,C=b.callback,i=b.map,e=i.fullName,ba=b.deps;c=b.listeners;if(C&&J(C)){if(p.catchError.define)try{a=d.execCb(e,b.callback,ba,m[e])}catch(k){l=k}else a= 11 | d.execCb(e,b.callback,ba,m[e]);if(e)(C=b.cjsModule)&&C.exports!==void 0&&C.exports!==m[e]?a=m[e]=b.cjsModule.exports:a===void 0&&b.usingExports?a=m[e]:(m[e]=a,F[e]&&(Q[e]=!0))}else e&&(a=m[e]=C,F[e]&&(Q[e]=!0));if(D[b.id])delete D[b.id],b.isDone=!0,g.waitCount-=1,g.waitCount===0&&(I=[]);delete R[e];if(d.onResourceLoad&&!b.placeholder)d.onResourceLoad(g,i,b.depArray);if(l)return a=(e?h(e).url:"")||l.fileName||l.sourceURL,c=l.moduleTree,l=N("defineerror",'Error evaluating module "'+e+'" at location "'+ 12 | a+'":\n'+l+"\nfileName:"+a+"\nlineNumber: "+(l.lineNumber||l.line),l),l.moduleName=e,l.moduleTree=c,d.onError(l);for(l=0;C=c[l];l++)C(a)}function r(b,a){return function(f){b.depDone[a]||(b.depDone[a]=!0,b.deps[a]=f,b.depCount-=1,b.depCount||o(b))}}function u(b,a){var f=a.map,c=f.fullName,h=f.name,i=L[b]||(L[b]=m[b]),e;if(!a.loading)a.loading=!0,e=function(b){a.callback=function(){return b};o(a);s[a.id]=!0;w()},e.fromText=function(b,a){var l=O;s[b]=!1;g.scriptCount+=1;g.fake[b]=!0;l&&(O=!1);d.exec(a); 13 | l&&(O=!0);g.completeLoad(b)},c in m?e(m[c]):i.load(h,q(f.parentMap,!0),e,p)}function v(b){D[b.id]||(D[b.id]=b,I.push(b),g.waitCount+=1)}function B(b){this.listeners.push(b)}function t(b,a){var f=b.fullName,c=b.prefix,d=c?L[c]||(L[c]=m[c]):null,i,e;f&&(i=R[f]);if(!i&&(e=!0,i={id:(c&&!d?M++ +"__p@:":"")+(f||"__r@"+M++),map:b,depCount:0,depDone:[],depCallbacks:[],deps:[],listeners:[],add:B},y[i.id]=!0,f&&(!c||L[c])))R[f]=i;c&&!d?(f=t(h(c),!0),f.add(function(){var a=h(b.originalName,b.parentMap),a=t(a, 14 | !0);i.placeholder=!0;a.add(function(b){i.callback=function(){return b};o(i)})})):e&&a&&(s[i.id]=!1,g.paused.push(i),v(i));return i}function x(b,a,f,c){var b=h(b,c),d=b.name,i=b.fullName,e=t(b),k=e.id,j=e.deps,n;if(i){if(i in m||s[k]===!0||i==="jquery"&&p.jQuery&&p.jQuery!==f().fn.jquery)return;y[k]=!0;s[k]=!0;i==="jquery"&&f&&S(f())}e.depArray=a;e.callback=f;for(f=0;f0)){if(p.priorityWait)if(k())w();else return;for(j in s)if(!(j in K)&&(c=!0,!s[j]))if(a)b+=j+" ";else{h=!0;break}if(c||g.waitCount){if(a&&b)return j=N("timeout","Load timeout for modules: "+b),j.requireType="timeout",j.requireModules=b,d.onError(j);if(h||g.scriptCount){if((G||ca)&&!W)W=setTimeout(function(){W=0;A()},50)}else{if(g.waitCount){for(H= 17 | 0;b=I[H];H++)z(b,{});g.paused.length&&w();X<5&&(X+=1,A())}X=0;d.checkReadyState()}}}}var g,w,p={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},catchError:{}},P=[],y={require:!0,exports:!0,module:!0},E={},m={},s={},D={},I=[],T={},M=0,R={},L={},F={},Q={},Y=0;S=function(b){if(!g.jQuery&&(b=b||(typeof jQuery!=="undefined"?jQuery:null))&&!(p.jQuery&&b.fn.jquery!==p.jQuery)&&("holdReady"in b||"readyWait"in b))if(g.jQuery=b,n(["jquery",[],function(){return jQuery}]),g.scriptCount)V(b,!0),g.jQueryIncremented= 18 | !0};w=function(){var b,a,c,h,j,i;Y+=1;if(g.scriptCount<=0)g.scriptCount=0;for(;P.length;)if(b=P.shift(),b[0]===null)return d.onError(N("mismatch","Mismatched anonymous define() module: "+b[b.length-1]));else n(b);if(!p.priorityWait||k())for(;g.paused.length;){j=g.paused;g.pausedCount+=j.length;g.paused=[];for(h=0;b=j[h];h++)a=b.map,c=a.url,i=a.fullName,a.prefix?u(a.prefix,b):!T[c]&&!s[i]&&(d.load(g,i,c),c.indexOf("empty:")!==0&&(T[c]=!0));g.startTime=(new Date).getTime();g.pausedCount-=j.length}Y=== 19 | 1&&A();Y-=1};g={contextName:a,config:p,defQueue:P,waiting:D,waitCount:0,specified:y,loaded:s,urlMap:E,urlFetched:T,scriptCount:0,defined:m,paused:[],pausedCount:0,plugins:L,needFullExec:F,fake:{},fullExec:Q,managerCallbacks:R,makeModuleMap:h,normalize:c,configure:function(b){var a,c,d;b.baseUrl&&b.baseUrl.charAt(b.baseUrl.length-1)!=="/"&&(b.baseUrl+="/");a=p.paths;d=p.pkgs;Z(p,b,!0);if(b.paths){for(c in b.paths)c in K||(a[c]=b.paths[c]);p.paths=a}if((a=b.packagePaths)||b.packages){if(a)for(c in a)c in 20 | K||$(d,a[c],c);b.packages&&$(d,b.packages);p.pkgs=d}if(b.priority)c=g.requireWait,g.requireWait=!1,g.takeGlobalQueue(),w(),g.require(b.priority),w(),g.requireWait=c,p.priorityWait=b.priority;if(b.deps||b.callback)g.require(b.deps||[],b.callback)},requireDefined:function(b,a){return h(b,a).fullName in m},requireSpecified:function(b,a){return h(b,a).fullName in y},require:function(b,c,f){if(typeof b==="string"){if(J(c))return d.onError(N("requireargs","Invalid require call"));if(d.get)return d.get(g, 21 | b,c);c=h(b,c);b=c.fullName;return!(b in m)?d.onError(N("notloaded","Module name '"+c.fullName+"' has not been loaded yet for context: "+a)):m[b]}(b&&b.length||c)&&x(null,b,c,f);if(!g.requireWait)for(;!g.scriptCount&&g.paused.length;)g.takeGlobalQueue(),w();return g.require},takeGlobalQueue:function(){U.length&&(ha.apply(g.defQueue,[g.defQueue.length-1,0].concat(U)),U=[])},completeLoad:function(b){var a;for(g.takeGlobalQueue();P.length;)if(a=P.shift(),a[0]===null){a[0]=b;break}else if(a[0]===b)break; 22 | else n(a),a=null;a?n(a):n([b,[],b==="jquery"&&typeof jQuery!=="undefined"?function(){return jQuery}:null]);S();d.isAsync&&(g.scriptCount-=1);w();d.isAsync||(g.scriptCount-=1)},toUrl:function(a,c){var d=a.lastIndexOf("."),h=null;d!==-1&&(h=a.substring(d,a.length),a=a.substring(0,d));return g.nameToUrl(a,h,c)},nameToUrl:function(a,h,f){var j,k,i,e,m=g.config,a=c(a,f&&f.fullName);if(d.jsExtRegExp.test(a))h=a+(h?h:"");else{j=m.paths;k=m.pkgs;f=a.split("/");for(e=f.length;e>0;e--)if(i=f.slice(0,e).join("/"), 23 | j[i]){f.splice(0,e,j[i]);break}else if(i=k[i]){a=a===i.name?i.location+"/"+i.main:i.location;f.splice(0,e,a);break}h=f.join("/")+(h||".js");h=(h.charAt(0)==="/"||h.match(/^\w+:/)?"":m.baseUrl)+h}return m.urlArgs?h+((h.indexOf("?")===-1?"?":"&")+m.urlArgs):h}};g.jQueryCheck=S;g.resume=w;return g}function ia(){var a,c,d;if(n&&n.readyState==="interactive")return n;a=document.getElementsByTagName("script");for(c=a.length-1;c>-1&&(d=a[c]);c--)if(d.readyState==="interactive")return n=d;return null}var ja= 24 | /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ka=/require\(\s*["']([^'"\s]+)["']\s*\)/g,ea=/^\.\//,aa=/\.js$/,M=Object.prototype.toString,r=Array.prototype,ga=r.slice,ha=r.splice,G=!!(typeof window!=="undefined"&&navigator&&document),ca=!G&&typeof importScripts!=="undefined",la=G&&navigator.platform==="PLAYSTATION 3"?/^complete$/:/^(complete|loaded)$/,da=typeof opera!=="undefined"&&opera.toString()==="[object Opera]",K={},t={},U=[],n=null,X=0,O=!1,d,r={},I,v,x,y,u,z,A,H,B,S,W;if(typeof define==="undefined"){if(typeof requirejs!== 25 | "undefined")if(J(requirejs))return;else r=requirejs,requirejs=void 0;typeof require!=="undefined"&&!J(require)&&(r=require,require=void 0);d=requirejs=function(a,c,d){var k="_",j;!E(a)&&typeof a!=="string"&&(j=a,E(c)?(a=c,c=d):a=[]);if(j&&j.context)k=j.context;d=t[k]||(t[k]=fa(k));j&&d.configure(j);return d.require(a,c)};d.config=function(a){return d(a)};require||(require=d);d.toUrl=function(a){return t._.toUrl(a)};d.version="1.0.2";d.jsExtRegExp=/^\/|:|\?|\.js$/;v=d.s={contexts:t,skipAsync:{}};if(d.isAsync= 26 | d.isBrowser=G)if(x=v.head=document.getElementsByTagName("head")[0],y=document.getElementsByTagName("base")[0])x=v.head=y.parentNode;d.onError=function(a){throw a;};d.load=function(a,c,h){d.resourcesReady(!1);a.scriptCount+=1;d.attach(h,a,c);if(a.jQuery&&!a.jQueryIncremented)V(a.jQuery,!0),a.jQueryIncremented=!0};define=function(a,c,d){var k,j;typeof a!=="string"&&(d=c,c=a,a=null);E(c)||(d=c,c=[]);!c.length&&J(d)&&d.length&&(d.toString().replace(ja,"").replace(ka,function(a,d){c.push(d)}),c=(d.length=== 27 | 1?["require"]:["require","exports","module"]).concat(c));if(O&&(k=I||ia()))a||(a=k.getAttribute("data-requiremodule")),j=t[k.getAttribute("data-requirecontext")];(j?j.defQueue:U).push([a,c,d])};define.amd={multiversion:!0,plugins:!0,jQuery:!0};d.exec=function(a){return eval(a)};d.execCb=function(a,c,d,k){return c.apply(k,d)};d.addScriptToDom=function(a){I=a;y?x.insertBefore(a,y):x.appendChild(a);I=null};d.onScriptLoad=function(a){var c=a.currentTarget||a.srcElement,h;if(a.type==="load"||c&&la.test(c.readyState))n= 28 | null,a=c.getAttribute("data-requirecontext"),h=c.getAttribute("data-requiremodule"),t[a].completeLoad(h),c.detachEvent&&!da?c.detachEvent("onreadystatechange",d.onScriptLoad):c.removeEventListener("load",d.onScriptLoad,!1)};d.attach=function(a,c,h,k,j,n){var o;if(G)return k=k||d.onScriptLoad,o=c&&c.config&&c.config.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),o.type=j||"text/javascript",o.charset="utf-8",o.async=!v.skipAsync[a],c&&o.setAttribute("data-requirecontext", 29 | c.contextName),o.setAttribute("data-requiremodule",h),o.attachEvent&&!da?(O=!0,n?o.onreadystatechange=function(){if(o.readyState==="loaded")o.onreadystatechange=null,o.attachEvent("onreadystatechange",k),n(o)}:o.attachEvent("onreadystatechange",k)):o.addEventListener("load",k,!1),o.src=a,n||d.addScriptToDom(o),o;else ca&&(importScripts(a),c.completeLoad(h));return null};if(G){u=document.getElementsByTagName("script");for(H=u.length-1;H>-1&&(z=u[H]);H--){if(!x)x=z.parentNode;if(A=z.getAttribute("data-main")){if(!r.baseUrl)u= 30 | A.split("/"),z=u.pop(),u=u.length?u.join("/")+"/":"./",r.baseUrl=u,A=z.replace(aa,"");r.deps=r.deps?r.deps.concat(A):[A];break}}}d.checkReadyState=function(){var a=v.contexts,c;for(c in a)if(!(c in K)&&a[c].waitCount)return;d.resourcesReady(!0)};d.resourcesReady=function(a){var c,h;d.resourcesDone=a;if(d.resourcesDone)for(h in a=v.contexts,a)if(!(h in K)&&(c=a[h],c.jQueryIncremented))V(c.jQuery,!1),c.jQueryIncremented=!1};d.pageLoaded=function(){if(document.readyState!=="complete")document.readyState= 31 | "complete"};if(G&&document.addEventListener&&!document.readyState)document.readyState="loading",window.addEventListener("load",d.pageLoaded,!1);d(r);if(d.isAsync&&typeof setTimeout!=="undefined")B=v.contexts[r.context||"_"],B.requireWait=!0,setTimeout(function(){B.requireWait=!1;B.takeGlobalQueue();B.jQueryCheck();B.scriptCount||B.resume();d.checkReadyState()},0)}})(); 32 | 33 | -------------------------------------------------------------------------------- /css/buttons.css: -------------------------------------------------------------------------------- 1 | /* 2 | ## RKD TEST Buttons 3 | ### sub test 4 | text text 5 | 6 | This is an example !!! 7 | 8 | */ 9 | 10 | 11 | /* 12 | ## Base Button 13 | ``` 14 | Publish post 15 | Save as draft 16 | ``` 17 | ## Grouped buttons 18 | 19 | Groups of buttons can be created by wrapping them in an element given a class of button-group. A less important group of buttons can be marked out by adding a further class, minor-group. 20 | 21 | ``` 22 | 28 | ``` 29 | ## Mixed group 30 | Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class button-container. 31 | ``` 32 |
33 | Compose new 34 | 35 |
36 | Archive 37 | Report spam 38 | Delete 39 |
40 | 41 |
42 | Move to 43 | Labels 44 |
45 |
46 | ``` 47 | 48 | */ 49 | 50 | .button { 51 | position: relative; 52 | overflow: visible; 53 | display: inline-block; 54 | padding: 0.5em 1em; 55 | border: 1px solid #d4d4d4; 56 | margin: 0; 57 | text-decoration: none; 58 | text-align: center; 59 | text-shadow: 1px 1px 0 #fff; 60 | font:11px/normal sans-serif; 61 | color: #333; 62 | white-space: nowrap; 63 | cursor: pointer; 64 | outline: none; 65 | background-color: #ececec; 66 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); 67 | background-image: -moz-linear-gradient(#f4f4f4, #ececec); 68 | background-image: -ms-linear-gradient(#f4f4f4, #ececec); 69 | background-image: -o-linear-gradient(#f4f4f4, #ececec); 70 | background-image: linear-gradient(#f4f4f4, #ececec); 71 | -moz-background-clip: padding; /* for Firefox 3.6 */ 72 | background-clip: padding-box; 73 | border-radius: 0.2em; 74 | /* IE hacks */ 75 | zoom: 1; 76 | *display: inline; 77 | } 78 | 79 | .button:hover, 80 | .button:focus, 81 | .button:active, 82 | .button.active { 83 | border-color: #3072b3; 84 | border-bottom-color: #2a65a0; 85 | text-decoration: none; 86 | text-shadow: -1px -1px 0 rgba(0,0,0,0.3); 87 | color: #fff; 88 | background-color: #3c8dde; 89 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); 90 | background-image: -moz-linear-gradient(#599bdc, #3072b3); 91 | background-image: -o-linear-gradient(#599bdc, #3072b3); 92 | background-image: linear-gradient(#599bdc, #3072b3); 93 | } 94 | 95 | .button:active, 96 | .button.active { 97 | border-color: #2a65a0; 98 | border-bottom-color: #3884cd; 99 | background-color: #3072b3; 100 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); 101 | background-image: -moz-linear-gradient(#3072b3, #599bdc); 102 | background-image: -ms-linear-gradient(#3072b3, #599bdc); 103 | background-image: -o-linear-gradient(#3072b3, #599bdc); 104 | background-image: linear-gradient(#3072b3, #599bdc); 105 | } 106 | 107 | .button::-moz-focus-inner { 108 | padding: 0; 109 | border: 0; 110 | } 111 | 112 | 113 | 114 | 115 | .button.icon:before { 116 | content: ""; 117 | position: relative; 118 | top: 1px; 119 | float:left; 120 | width: 12px; 121 | height: 12px; 122 | margin: 0 0.75em 0 -0.25em; 123 | background: url(gh-icons.png) 0 99px no-repeat; 124 | } 125 | 126 | .button.arrowup.icon:before { background-position: 0 0; } 127 | .button.arrowup.icon:hover:before, 128 | .button.arrowup.icon:focus:before, 129 | .button.arrowup.icon:active:before { background-position: -12px 0; } 130 | 131 | .button.arrowdown.icon:before { background-position: 0 -12px; } 132 | .button.arrowdown.icon:hover:before, 133 | .button.arrowdown.icon:focus:before, 134 | .button.arrowdown.icon:active:before { background-position: -12px -12px; } 135 | 136 | .button.arrowleft.icon:before { background-position: 0 -24px; } 137 | .button.arrowleft.icon:hover:before, 138 | .button.arrowleft.icon:focus:before, 139 | .button.arrowleft.icon:active:before { background-position: -12px -24px; } 140 | 141 | .button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; } 142 | .button.arrowright.icon:hover:before, 143 | .button.arrowright.icon:focus:before, 144 | .button.arrowright.icon:active:before { background-position: -12px -36px; } 145 | 146 | .button.approve.icon:before { background-position: 0 -48px; } 147 | .button.approve.icon:hover:before, 148 | .button.approve.icon:focus:before, 149 | .button.approve.icon:active:before { background-position: -12px -48px; } 150 | 151 | .button.add.icon:before { background-position: 0 -288px; } 152 | .button.add.icon:hover:before, 153 | .button.add.icon:focus:before, 154 | .button.add.icon:active:before { background-position: -12px -288px; } 155 | 156 | .button.remove.icon:before { background-position: 0 -60px; } 157 | .button.remove.icon:hover:before, 158 | .button.remove.icon:focus:before, 159 | .button.remove.icon:active:before { background-position: -12px -60px; } 160 | 161 | .button.log.icon:before { background-position: 0 -72px; } 162 | .button.log.icon:hover:before, 163 | .button.log.icon:focus:before, 164 | .button.log.icon:active:before { background-position: -12px -72px; } 165 | 166 | .button.calendar.icon:before { background-position: 0 -84px; } 167 | .button.calendar.icon:hover:before, 168 | .button.calendar.icon:focus:before, 169 | .button.calendar.icon:active:before { background-position: -12px -84px; } 170 | 171 | .button.chat.icon:before { background-position: 0 -96px; } 172 | .button.chat.icon:hover:before, 173 | .button.chat.icon:focus:before, 174 | .button.chat.icon:active:before { background-position: -12px -96px; } 175 | 176 | .button.clock.icon:before { background-position: 0 -108px; } 177 | .button.clock.icon:hover:before, 178 | .button.clock.icon:focus:before, 179 | .button.clock.icon:active:before { background-position: -12px -108px; } 180 | 181 | .button.settings.icon:before { background-position: 0 -120px; } 182 | .button.settings.icon:hover:before, 183 | .button.settings.icon:focus:before, 184 | .button.settings.icon:active:before { background-position: -12px -120px; } 185 | 186 | .button.comment.icon:before { background-position: 0 -132px; } 187 | .button.comment.icon:hover:before, 188 | .button.comment.icon:focus:before, 189 | .button.comment.icon:active:before { background-position: -12px -132px; } 190 | 191 | .button.fork.icon:before { background-position: 0 -144px; } 192 | .button.fork.icon:hover:before, 193 | .button.fork.icon:focus:before, 194 | .button.fork.icon:active:before { background-position: -12px -144px; } 195 | 196 | .button.like.icon:before { background-position: 0 -156px; } 197 | .button.like.icon:hover:before, 198 | .button.like.icon:focus:before, 199 | .button.like.icon:active:before { background-position: -12px -156px; } 200 | 201 | .button.favorite.icon:before { background-position: 0 -348px; } 202 | .button.favorite.icon:hover:before, 203 | .button.favorite.icon:focus:before, 204 | .button.favorite.icon:active:before { background-position: -12px -348px; } 205 | 206 | .button.home.icon:before { background-position: 0 -168px; } 207 | .button.home.icon:hover:before, 208 | .button.home.icon:focus:before, 209 | .button.home.icon:active:before { background-position: -12px -168px; } 210 | 211 | .button.key.icon:before { background-position: 0 -180px; } 212 | .button.key.icon:hover:before, 213 | .button.key.icon:focus:before, 214 | .button.key.icon:active:before { background-position: -12px -180px; } 215 | 216 | .button.lock.icon:before { background-position: 0 -192px; } 217 | .button.lock.icon:hover:before, 218 | .button.lock.icon:focus:before, 219 | .button.lock.icon:active:before { background-position: -12px -192px; } 220 | 221 | .button.unlock.icon:before { background-position: 0 -204px; } 222 | .button.unlock.icon:hover:before, 223 | .button.unlock.icon:focus:before, 224 | .button.unlock.icon:active:before { background-position: -12px -204px; } 225 | 226 | .button.loop.icon:before { background-position: 0 -216px; } 227 | .button.loop.icon:hover:before, 228 | .button.loop.icon:focus:before, 229 | .button.loop.icon:active:before { background-position: -12px -216px; } 230 | 231 | .button.search.icon:before { background-position: 0 -228px; } 232 | .button.search.icon:hover:before, 233 | .button.search.icon:focus:before, 234 | .button.search.icon:active:before { background-position: -12px -228px; } 235 | 236 | .button.mail.icon:before { background-position: 0 -240px; } 237 | .button.mail.icon:hover:before, 238 | .button.mail.icon:focus:before, 239 | .button.mail.icon:active:before { background-position: -12px -240px; } 240 | 241 | .button.move.icon:before { background-position: 0 -252px; } 242 | .button.move.icon:hover:before, 243 | .button.move.icon:focus:before, 244 | .button.move.icon:active:before { background-position: -12px -252px; } 245 | 246 | .button.edit.icon:before { background-position: 0 -264px; } 247 | .button.edit.icon:hover:before, 248 | .button.edit.icon:focus:before, 249 | .button.edit.icon:active:before { background-position: -12px -264px; } 250 | 251 | .button.pin.icon:before { background-position: 0 -276px; } 252 | .button.pin.icon:hover:before, 253 | .button.pin.icon:focus:before, 254 | .button.pin.icon:active:before { background-position: -12px -276px; } 255 | 256 | .button.reload.icon:before { background-position: 0 -300px; } 257 | .button.reload.icon:hover:before, 258 | .button.reload.icon:focus:before, 259 | .button.reload.icon:active:before { background-position: -12px -300px; } 260 | 261 | .button.rss.icon:before { background-position: 0 -312px; } 262 | .button.rss.icon:hover:before, 263 | .button.rss.icon:focus:before, 264 | .button.rss.icon:active:before { background-position: -12px -312px; } 265 | 266 | .button.tag.icon:before { background-position: 0 -324px; } 267 | .button.tag.icon:hover:before, 268 | .button.tag.icon:focus:before, 269 | .button.tag.icon:active:before { background-position: -12px -324px; } 270 | 271 | .button.trash.icon:before { background-position: 0 -336px; } 272 | .button.trash.icon:hover:before, 273 | .button.trash.icon:focus:before, 274 | .button.trash.icon:active:before { background-position: -12px -336px; } 275 | 276 | .button.user.icon:before { background-position: 0 -360px; } 277 | .button.user.icon:hover:before, 278 | .button.user.icon:focus:before, 279 | .button.user.icon:active:before { background-position: -12px -360px; } 280 | 281 | 282 | 283 | .button.primary { 284 | font-weight: bold; 285 | } 286 | 287 | 288 | .button.danger { 289 | color: #900; 290 | } 291 | 292 | .button.danger:hover, 293 | .button.danger:focus, 294 | .button.danger:active { 295 | border-color: #b53f3a; 296 | border-bottom-color: #a0302a; 297 | color: #fff; 298 | background-color: #dc5f59; 299 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); 300 | background-image: -moz-linear-gradient(#dc5f59, #b33630); 301 | background-image: -ms-linear-gradient(#dc5f59, #b33630); 302 | background-image: -o-linear-gradient(#dc5f59, #b33630); 303 | background-image: linear-gradient(#dc5f59, #b33630); 304 | } 305 | 306 | .button.danger:active, 307 | .button.danger.active { 308 | border-color: #a0302a; 309 | border-bottom-color: #bf4843; 310 | background-color: #b33630; 311 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59)); 312 | background-image: -moz-linear-gradient(#b33630, #dc5f59); 313 | background-image: -ms-linear-gradient(#b33630, #dc5f59); 314 | background-image: -o-linear-gradient(#b33630, #dc5f59); 315 | background-image: linear-gradient(#b33630, #dc5f59); 316 | } 317 | 318 | 319 | .button.pill { 320 | border-radius: 50em; 321 | } 322 | 323 | 324 | .button.disable { 325 | opacity: 0.5; 326 | } 327 | 328 | 329 | .button.big { 330 | font-size: 14px; 331 | } 332 | 333 | .button.big.icon:before { 334 | top: 0; 335 | } 336 | 337 | 338 | 339 | .button-group { 340 | display: inline-block; 341 | list-style: none; 342 | padding: 0; 343 | margin: 0; 344 | zoom: 1; 345 | *display: inline; 346 | } 347 | 348 | .button + .button, 349 | .button + .button-group, 350 | .button-group + .button, 351 | .button-group + .button-group { 352 | margin-left: 15px; 353 | } 354 | 355 | .button-group li { 356 | float: left; 357 | padding: 0; 358 | margin: 0; 359 | } 360 | 361 | .button-group .button { 362 | float: left; 363 | margin-left: -1px; 364 | } 365 | 366 | .button-group > .button:not(:first-child):not(:last-child), 367 | .button-group li:not(:first-child):not(:last-child) .button { 368 | border-radius: 0; 369 | } 370 | 371 | .button-group > .button:first-child, 372 | .button-group li:first-child .button { 373 | margin-left: 0; 374 | border-top-right-radius: 0; 375 | border-bottom-right-radius: 0; 376 | } 377 | 378 | .button-group > .button:last-child, 379 | .button-group li:last-child > .button { 380 | border-top-left-radius: 0; 381 | border-bottom-left-radius: 0; 382 | } 383 | 384 | 385 | .button-group.minor-group .button { 386 | border: 1px solid #d4d4d4; 387 | text-shadow: none; 388 | background-image: none; 389 | background-color: #fff; 390 | } 391 | 392 | .button-group.minor-group .button:hover, 393 | .button-group.minor-group .button:focus { 394 | background-color: #599bdc; 395 | } 396 | 397 | .button-group.minor-group .button:active, 398 | .button-group.minor-group .button.active { 399 | background-color: #3072b3; 400 | } 401 | 402 | .button-group.minor-group .button.icon:before { 403 | opacity: 0.8; 404 | } 405 | 406 | 407 | .button-container .button, 408 | .button-container .button-group { 409 | vertical-align: top; 410 | } 411 | 412 | -------------------------------------------------------------------------------- /font-awesome/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"} 5 | -------------------------------------------------------------------------------- /src/tree-grid-directive.js.orig: -------------------------------------------------------------------------------- 1 | 2 | (function() { 3 | var module; 4 | 5 | module = angular.module('treeGrid', []); 6 | 7 | module.directive('treeGrid', [ 8 | '$timeout', function($timeout) { 9 | return { 10 | restrict: 'E', 11 | //templateUrl:'tree-grid-template.html', 12 | //template:"
{{expandingProperty}}{{col.displayName || col.field}}
{{row.branch[expandingProperty]}}{{row.branch[col.field]}}
", 13 | template: 14 | "
\ 15 |
\ 16 | \ 17 | \ 18 | \ 19 | \ 20 | \ 21 | \ 22 | \ 23 | \ 25 | \ 31 | \ 32 | \ 33 | \ 34 |
{{expandingProperty}}{{col.displayName || col.field}}
\ 28 | \ 29 | {{row.branch[expandingProperty]}}\ 30 | {{row.branch[col.field]}}
\ 35 |
", 36 | replace: true, 37 | scope: { 38 | treeData: '=', 39 | colDefs:'=', 40 | expandOn:'=', 41 | onSelect: '&', 42 | initialSelection: '@', 43 | treeControl: '=' 44 | }, 45 | link: function(scope, element, attrs) { 46 | var error, expandingProperty, expand_all_parents, expand_level, for_all_ancestors, for_each_branch, get_parent, n, on_treeData_change, select_branch, selected_branch, tree; 47 | 48 | error = function(s) { 49 | console.log('ERROR:' + s); 50 | debugger; 51 | return void 0; 52 | }; 53 | 54 | if (attrs.iconExpand == null) { 55 | attrs.iconExpand = 'icon-plus glyphicon glyphicon-plus fa fa-plus'; 56 | } 57 | if (attrs.iconCollapse == null) { 58 | attrs.iconCollapse = 'icon-minus glyphicon glyphicon-minus fa fa-minus'; 59 | } 60 | if (attrs.iconLeaf == null) { 61 | attrs.iconLeaf = 'icon-file glyphicon glyphicon-file fa fa-file'; 62 | } 63 | if (attrs.expandLevel == null) { 64 | attrs.expandLevel = '3'; 65 | } 66 | 67 | expand_level = parseInt(attrs.expandLevel, 10); 68 | 69 | if (!scope.treeData) { 70 | alert('no treeData defined for the tree!'); 71 | return; 72 | } 73 | if (scope.treeData.length == null) { 74 | if (treeData.label != null) { 75 | scope.treeData = [treeData]; 76 | } else { 77 | alert('treeData should be an array of root branches'); 78 | return; 79 | } 80 | } 81 | if(attrs.expandOn){ 82 | expandingProperty = scope.expandOn; 83 | scope.expandingProperty = scope.expandOn; 84 | } 85 | else{ 86 | var _firstRow = scope.treeData[0], 87 | _keys = Object.keys(_firstRow); 88 | for(var i =0, len = _keys.length; i 0) { 222 | f = function(e) { 223 | if (typeof e === 'string') { 224 | return { 225 | label: e, 226 | children: [] 227 | }; 228 | } else { 229 | return e; 230 | } 231 | }; 232 | return branch.children = (function() { 233 | var _i, _len, _ref, _results; 234 | _ref = branch.children; 235 | _results = []; 236 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 237 | child = _ref[_i]; 238 | _results.push(f(child)); 239 | } 240 | return _results; 241 | })(); 242 | } 243 | } else { 244 | return branch.children = []; 245 | } 246 | }); 247 | add_branch_to_list = function(level, branch, visible) { 248 | var child, child_visible, tree_icon, _i, _len, _ref, _results; 249 | if (branch.expanded == null) { 250 | branch.expanded = false; 251 | } 252 | if (!branch.children || branch.children.length === 0) { 253 | tree_icon = attrs.iconLeaf; 254 | } else { 255 | if (branch.expanded) { 256 | tree_icon = attrs.iconCollapse; 257 | } else { 258 | tree_icon = attrs.iconExpand; 259 | } 260 | } 261 | branch.level = level; 262 | scope.tree_rows.push({ 263 | level: level, 264 | branch: branch, 265 | label: branch[expandingProperty], 266 | tree_icon: tree_icon, 267 | visible: visible 268 | }); 269 | if (branch.children != null) { 270 | _ref = branch.children; 271 | _results = []; 272 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 273 | child = _ref[_i]; 274 | child_visible = visible && branch.expanded; 275 | _results.push(add_branch_to_list(level + 1, child, child_visible)); 276 | } 277 | return _results; 278 | } 279 | }; 280 | _ref = scope.treeData; 281 | _results = []; 282 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 283 | root_branch = _ref[_i]; 284 | _results.push(add_branch_to_list(1, root_branch, true)); 285 | } 286 | return _results; 287 | }; 288 | 289 | scope.$watch('treeData', on_treeData_change, true); 290 | 291 | if (attrs.initialSelection != null) { 292 | for_each_branch(function(b) { 293 | if (b.label === attrs.initialSelection) { 294 | return $timeout(function() { 295 | return select_branch(b); 296 | }); 297 | } 298 | }); 299 | } 300 | n = scope.treeData.length; 301 | for_each_branch(function(b, level) { 302 | b.level = level; 303 | return b.expanded = b.level < expand_level; 304 | }); 305 | if (scope.treeControl != null) { 306 | if (angular.isObject(scope.treeControl)) { 307 | tree = scope.treeControl; 308 | tree.expand_all = function() { 309 | return for_each_branch(function(b, level) { 310 | return b.expanded = true; 311 | }); 312 | }; 313 | tree.collapse_all = function() { 314 | return for_each_branch(function(b, level) { 315 | return b.expanded = false; 316 | }); 317 | }; 318 | tree.get_first_branch = function() { 319 | n = scope.treeData.length; 320 | if (n > 0) { 321 | return scope.treeData[0]; 322 | } 323 | }; 324 | tree.select_first_branch = function() { 325 | var b; 326 | b = tree.get_first_branch(); 327 | return tree.select_branch(b); 328 | }; 329 | tree.get_selected_branch = function() { 330 | return selected_branch; 331 | }; 332 | tree.get_parent_branch = function(b) { 333 | return get_parent(b); 334 | }; 335 | tree.select_branch = function(b) { 336 | select_branch(b); 337 | return b; 338 | }; 339 | tree.get_children = function(b) { 340 | return b.children; 341 | }; 342 | tree.select_parent_branch = function(b) { 343 | var p; 344 | if (b == null) { 345 | b = tree.get_selected_branch(); 346 | } 347 | if (b != null) { 348 | p = tree.get_parent_branch(b); 349 | if (p != null) { 350 | tree.select_branch(p); 351 | return p; 352 | } 353 | } 354 | }; 355 | tree.add_branch = function(parent, new_branch) { 356 | if (parent != null) { 357 | parent.children.push(new_branch); 358 | parent.expanded = true; 359 | } else { 360 | scope.treeData.push(new_branch); 361 | } 362 | return new_branch; 363 | }; 364 | tree.add_root_branch = function(new_branch) { 365 | tree.add_branch(null, new_branch); 366 | return new_branch; 367 | }; 368 | tree.expand_branch = function(b) { 369 | if (b == null) { 370 | b = tree.get_selected_branch(); 371 | } 372 | if (b != null) { 373 | b.expanded = true; 374 | return b; 375 | } 376 | }; 377 | tree.collapse_branch = function(b) { 378 | if (b == null) { 379 | b = selected_branch; 380 | } 381 | if (b != null) { 382 | b.expanded = false; 383 | return b; 384 | } 385 | }; 386 | tree.get_siblings = function(b) { 387 | var p, siblings; 388 | if (b == null) { 389 | b = selected_branch; 390 | } 391 | if (b != null) { 392 | p = tree.get_parent_branch(b); 393 | if (p) { 394 | siblings = p.children; 395 | } else { 396 | siblings = scope.treeData; 397 | } 398 | return siblings; 399 | } 400 | }; 401 | tree.get_next_sibling = function(b) { 402 | var i, siblings; 403 | if (b == null) { 404 | b = selected_branch; 405 | } 406 | if (b != null) { 407 | siblings = tree.get_siblings(b); 408 | n = siblings.length; 409 | i = siblings.indexOf(b); 410 | if (i < n) { 411 | return siblings[i + 1]; 412 | } 413 | } 414 | }; 415 | tree.get_prev_sibling = function(b) { 416 | var i, siblings; 417 | if (b == null) { 418 | b = selected_branch; 419 | } 420 | siblings = tree.get_siblings(b); 421 | n = siblings.length; 422 | i = siblings.indexOf(b); 423 | if (i > 0) { 424 | return siblings[i - 1]; 425 | } 426 | }; 427 | tree.select_next_sibling = function(b) { 428 | var next; 429 | if (b == null) { 430 | b = selected_branch; 431 | } 432 | if (b != null) { 433 | next = tree.get_next_sibling(b); 434 | if (next != null) { 435 | return tree.select_branch(next); 436 | } 437 | } 438 | }; 439 | tree.select_prev_sibling = function(b) { 440 | var prev; 441 | if (b == null) { 442 | b = selected_branch; 443 | } 444 | if (b != null) { 445 | prev = tree.get_prev_sibling(b); 446 | if (prev != null) { 447 | return tree.select_branch(prev); 448 | } 449 | } 450 | }; 451 | tree.get_first_child = function(b) { 452 | var _ref; 453 | if (b == null) { 454 | b = selected_branch; 455 | } 456 | if (b != null) { 457 | if (((_ref = b.children) != null ? _ref.length : void 0) > 0) { 458 | return b.children[0]; 459 | } 460 | } 461 | }; 462 | tree.get_closest_ancestor_next_sibling = function(b) { 463 | var next, parent; 464 | next = tree.get_next_sibling(b); 465 | if (next != null) { 466 | return next; 467 | } else { 468 | parent = tree.get_parent_branch(b); 469 | return tree.get_closest_ancestor_next_sibling(parent); 470 | } 471 | }; 472 | tree.get_next_branch = function(b) { 473 | var next; 474 | if (b == null) { 475 | b = selected_branch; 476 | } 477 | if (b != null) { 478 | next = tree.get_first_child(b); 479 | if (next != null) { 480 | return next; 481 | } else { 482 | next = tree.get_closest_ancestor_next_sibling(b); 483 | return next; 484 | } 485 | } 486 | }; 487 | tree.select_next_branch = function(b) { 488 | var next; 489 | if (b == null) { 490 | b = selected_branch; 491 | } 492 | if (b != null) { 493 | next = tree.get_next_branch(b); 494 | if (next != null) { 495 | tree.select_branch(next); 496 | return next; 497 | } 498 | } 499 | }; 500 | tree.last_descendant = function(b) { 501 | var last_child; 502 | if (b == null) { 503 | debugger; 504 | } 505 | n = b.children.length; 506 | if (n === 0) { 507 | return b; 508 | } else { 509 | last_child = b.children[n - 1]; 510 | return tree.last_descendant(last_child); 511 | } 512 | }; 513 | tree.get_prev_branch = function(b) { 514 | var parent, prev_sibling; 515 | if (b == null) { 516 | b = selected_branch; 517 | } 518 | if (b != null) { 519 | prev_sibling = tree.get_prev_sibling(b); 520 | if (prev_sibling != null) { 521 | return tree.last_descendant(prev_sibling); 522 | } else { 523 | parent = tree.get_parent_branch(b); 524 | return parent; 525 | } 526 | } 527 | }; 528 | return tree.select_prev_branch = function(b) { 529 | var prev; 530 | if (b == null) { 531 | b = selected_branch; 532 | } 533 | if (b != null) { 534 | prev = tree.get_prev_branch(b); 535 | if (prev != null) { 536 | tree.select_branch(prev); 537 | return prev; 538 | } 539 | } 540 | }; 541 | } 542 | } 543 | } 544 | }; 545 | } 546 | ]); 547 | 548 | }).call(this); 549 | -------------------------------------------------------------------------------- /src/tree-grid-directive.js: -------------------------------------------------------------------------------- 1 | 2 | (function() { 3 | var module; 4 | 5 | module = angular.module('treeGrid', []); 6 | 7 | module.directive('treeGrid', [ 8 | '$timeout', function($timeout) { 9 | return { 10 | restrict: 'E', 11 | //templateUrl:'tree-grid-template.html', 12 | //template:"
{{expandingProperty}}{{col.displayName || col.field}}
{{row.branch[expandingProperty]}}{{row.branch[col.field]}}
", 13 | template: 14 | "
\ 15 |
\ 16 | \ 17 | \ 18 | \ 19 | \ 20 | \ 21 | \ 22 | \ 23 | \ 25 | \ 31 | \ 32 | \ 33 | \ 34 |
{{expandingProperty}}{{col.displayName || col.field}}
\ 28 | \ 29 | {{row.branch[expandingProperty]}}\ 30 | {{row.branch[col.field]}}
\ 35 |
", 36 | replace: true, 37 | scope: { 38 | treeData: '=', 39 | colDefs:'=', 40 | expandOn:'=', 41 | onSelect: '&', 42 | initialSelection: '@', 43 | treeControl: '=' 44 | }, 45 | link: function(scope, element, attrs) { 46 | var error, expandingProperty, expand_all_parents, expand_level, for_all_ancestors, for_each_branch, get_parent, n, on_treeData_change, select_branch, selected_branch, tree; 47 | 48 | error = function(s) { 49 | console.log('ERROR:' + s); 50 | debugger; 51 | return void 0; 52 | }; 53 | 54 | if (attrs.iconExpand == null) { 55 | //attrs.iconExpand = 'icon-plus glyphicon glyphicon-plus fa fa-plus'; 56 | attrs.iconExpand = 'fa fa-chevron-down'; 57 | } 58 | if (attrs.iconCollapse == null) { 59 | //attrs.iconCollapse = 'icon-minus glyphicon glyphicon-minus fa fa-minus'; 60 | attrs.iconCollapse = 'fa fa-chevron-up'; 61 | } 62 | if (attrs.iconLeaf == null) { 63 | //attrs.iconLeaf = 'icon-file glyphicon glyphicon-file fa fa-file'; 64 | attrs.iconLeaf = 'fa fa-asterisk'; 65 | } 66 | if (attrs.expandLevel == null) { 67 | attrs.expandLevel = '3'; 68 | } 69 | 70 | expand_level = parseInt(attrs.expandLevel, 10); 71 | 72 | if (!scope.treeData) { 73 | alert('no treeData defined for the tree!'); 74 | return; 75 | } 76 | if (scope.treeData.length == null) { 77 | if (treeData.label != null) { 78 | scope.treeData = [treeData]; 79 | } else { 80 | alert('treeData should be an array of root branches'); 81 | return; 82 | } 83 | } 84 | if(attrs.expandOn){ 85 | expandingProperty = scope.expandOn; 86 | scope.expandingProperty = scope.expandOn; 87 | } 88 | else{ 89 | var _firstRow = scope.treeData[0], 90 | _keys = Object.keys(_firstRow); 91 | for(var i =0, len = _keys.length; i 0) { 225 | f = function(e) { 226 | if (typeof e === 'string') { 227 | return { 228 | label: e, 229 | children: [] 230 | }; 231 | } else { 232 | return e; 233 | } 234 | }; 235 | return branch.children = (function() { 236 | var _i, _len, _ref, _results; 237 | _ref = branch.children; 238 | _results = []; 239 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 240 | child = _ref[_i]; 241 | _results.push(f(child)); 242 | } 243 | return _results; 244 | })(); 245 | } 246 | } else { 247 | return branch.children = []; 248 | } 249 | }); 250 | add_branch_to_list = function(level, branch, visible) { 251 | var child, child_visible, tree_icon, _i, _len, _ref, _results; 252 | if (branch.expanded == null) { 253 | branch.expanded = false; 254 | } 255 | if (!branch.children || branch.children.length === 0) { 256 | tree_icon = attrs.iconLeaf; 257 | } else { 258 | if (branch.expanded) { 259 | tree_icon = attrs.iconCollapse; 260 | } else { 261 | tree_icon = attrs.iconExpand; 262 | } 263 | } 264 | branch.level = level; 265 | scope.tree_rows.push({ 266 | level: level, 267 | branch: branch, 268 | label: branch[expandingProperty], 269 | tree_icon: tree_icon, 270 | visible: visible 271 | }); 272 | if (branch.children != null) { 273 | _ref = branch.children; 274 | _results = []; 275 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 276 | child = _ref[_i]; 277 | child_visible = visible && branch.expanded; 278 | _results.push(add_branch_to_list(level + 1, child, child_visible)); 279 | } 280 | return _results; 281 | } 282 | }; 283 | _ref = scope.treeData; 284 | _results = []; 285 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 286 | root_branch = _ref[_i]; 287 | _results.push(add_branch_to_list(1, root_branch, true)); 288 | } 289 | return _results; 290 | }; 291 | 292 | scope.$watch('treeData', on_treeData_change, true); 293 | 294 | if (attrs.initialSelection != null) { 295 | for_each_branch(function(b) { 296 | if (b.label === attrs.initialSelection) { 297 | return $timeout(function() { 298 | return select_branch(b); 299 | }); 300 | } 301 | }); 302 | } 303 | n = scope.treeData.length; 304 | for_each_branch(function(b, level) { 305 | b.level = level; 306 | return b.expanded = b.level < expand_level; 307 | }); 308 | if (scope.treeControl != null) { 309 | if (angular.isObject(scope.treeControl)) { 310 | tree = scope.treeControl; 311 | tree.expand_all = function() { 312 | return for_each_branch(function(b, level) { 313 | return b.expanded = true; 314 | }); 315 | }; 316 | tree.collapse_all = function() { 317 | return for_each_branch(function(b, level) { 318 | return b.expanded = false; 319 | }); 320 | }; 321 | tree.get_first_branch = function() { 322 | n = scope.treeData.length; 323 | if (n > 0) { 324 | return scope.treeData[0]; 325 | } 326 | }; 327 | tree.select_first_branch = function() { 328 | var b; 329 | b = tree.get_first_branch(); 330 | return tree.select_branch(b); 331 | }; 332 | tree.get_selected_branch = function() { 333 | return selected_branch; 334 | }; 335 | tree.get_parent_branch = function(b) { 336 | return get_parent(b); 337 | }; 338 | tree.select_branch = function(b) { 339 | select_branch(b); 340 | return b; 341 | }; 342 | tree.get_children = function(b) { 343 | return b.children; 344 | }; 345 | tree.select_parent_branch = function(b) { 346 | var p; 347 | if (b == null) { 348 | b = tree.get_selected_branch(); 349 | } 350 | if (b != null) { 351 | p = tree.get_parent_branch(b); 352 | if (p != null) { 353 | tree.select_branch(p); 354 | return p; 355 | } 356 | } 357 | }; 358 | tree.add_branch = function(parent, new_branch) { 359 | if (parent != null) { 360 | parent.children.push(new_branch); 361 | parent.expanded = true; 362 | } else { 363 | scope.treeData.push(new_branch); 364 | } 365 | return new_branch; 366 | }; 367 | tree.add_root_branch = function(new_branch) { 368 | tree.add_branch(null, new_branch); 369 | return new_branch; 370 | }; 371 | tree.expand_branch = function(b) { 372 | if (b == null) { 373 | b = tree.get_selected_branch(); 374 | } 375 | if (b != null) { 376 | b.expanded = true; 377 | return b; 378 | } 379 | }; 380 | tree.collapse_branch = function(b) { 381 | if (b == null) { 382 | b = selected_branch; 383 | } 384 | if (b != null) { 385 | b.expanded = false; 386 | return b; 387 | } 388 | }; 389 | tree.get_siblings = function(b) { 390 | var p, siblings; 391 | if (b == null) { 392 | b = selected_branch; 393 | } 394 | if (b != null) { 395 | p = tree.get_parent_branch(b); 396 | if (p) { 397 | siblings = p.children; 398 | } else { 399 | siblings = scope.treeData; 400 | } 401 | return siblings; 402 | } 403 | }; 404 | tree.get_next_sibling = function(b) { 405 | var i, siblings; 406 | if (b == null) { 407 | b = selected_branch; 408 | } 409 | if (b != null) { 410 | siblings = tree.get_siblings(b); 411 | n = siblings.length; 412 | i = siblings.indexOf(b); 413 | if (i < n) { 414 | return siblings[i + 1]; 415 | } 416 | } 417 | }; 418 | tree.get_prev_sibling = function(b) { 419 | var i, siblings; 420 | if (b == null) { 421 | b = selected_branch; 422 | } 423 | siblings = tree.get_siblings(b); 424 | n = siblings.length; 425 | i = siblings.indexOf(b); 426 | if (i > 0) { 427 | return siblings[i - 1]; 428 | } 429 | }; 430 | tree.select_next_sibling = function(b) { 431 | var next; 432 | if (b == null) { 433 | b = selected_branch; 434 | } 435 | if (b != null) { 436 | next = tree.get_next_sibling(b); 437 | if (next != null) { 438 | return tree.select_branch(next); 439 | } 440 | } 441 | }; 442 | tree.select_prev_sibling = function(b) { 443 | var prev; 444 | if (b == null) { 445 | b = selected_branch; 446 | } 447 | if (b != null) { 448 | prev = tree.get_prev_sibling(b); 449 | if (prev != null) { 450 | return tree.select_branch(prev); 451 | } 452 | } 453 | }; 454 | tree.get_first_child = function(b) { 455 | var _ref; 456 | if (b == null) { 457 | b = selected_branch; 458 | } 459 | if (b != null) { 460 | if (((_ref = b.children) != null ? _ref.length : void 0) > 0) { 461 | return b.children[0]; 462 | } 463 | } 464 | }; 465 | tree.get_closest_ancestor_next_sibling = function(b) { 466 | var next, parent; 467 | next = tree.get_next_sibling(b); 468 | if (next != null) { 469 | return next; 470 | } else { 471 | parent = tree.get_parent_branch(b); 472 | return tree.get_closest_ancestor_next_sibling(parent); 473 | } 474 | }; 475 | tree.get_next_branch = function(b) { 476 | var next; 477 | if (b == null) { 478 | b = selected_branch; 479 | } 480 | if (b != null) { 481 | next = tree.get_first_child(b); 482 | if (next != null) { 483 | return next; 484 | } else { 485 | next = tree.get_closest_ancestor_next_sibling(b); 486 | return next; 487 | } 488 | } 489 | }; 490 | tree.select_next_branch = function(b) { 491 | var next; 492 | if (b == null) { 493 | b = selected_branch; 494 | } 495 | if (b != null) { 496 | next = tree.get_next_branch(b); 497 | if (next != null) { 498 | tree.select_branch(next); 499 | return next; 500 | } 501 | } 502 | }; 503 | tree.last_descendant = function(b) { 504 | var last_child; 505 | if (b == null) { 506 | debugger; 507 | } 508 | n = b.children.length; 509 | if (n === 0) { 510 | return b; 511 | } else { 512 | last_child = b.children[n - 1]; 513 | return tree.last_descendant(last_child); 514 | } 515 | }; 516 | tree.get_prev_branch = function(b) { 517 | var parent, prev_sibling; 518 | if (b == null) { 519 | b = selected_branch; 520 | } 521 | if (b != null) { 522 | prev_sibling = tree.get_prev_sibling(b); 523 | if (prev_sibling != null) { 524 | return tree.last_descendant(prev_sibling); 525 | } else { 526 | parent = tree.get_parent_branch(b); 527 | return parent; 528 | } 529 | } 530 | }; 531 | return tree.select_prev_branch = function(b) { 532 | var prev; 533 | if (b == null) { 534 | b = selected_branch; 535 | } 536 | if (b != null) { 537 | prev = tree.get_prev_branch(b); 538 | if (prev != null) { 539 | tree.select_branch(prev); 540 | return prev; 541 | } 542 | } 543 | }; 544 | } 545 | } 546 | } 547 | }; 548 | } 549 | ]); 550 | 551 | }).call(this); 552 | -------------------------------------------------------------------------------- /src/tree-grid-directive.js.bkp: -------------------------------------------------------------------------------- 1 | 2 | (function() { 3 | var module; 4 | 5 | module = angular.module('treeGrid', []); 6 | 7 | module.directive('treeGrid', [ 8 | '$timeout', function($timeout) { 9 | return { 10 | restrict: 'E', 11 | //templateUrl:'tree-grid-template.html', 12 | //template:"
{{expandingProperty}}{{col.displayName || col.field}}
{{row.branch[expandingProperty]}}{{row.branch[col.field]}}
", 13 | template: 14 | "
\ 15 |
\ 16 | \ 17 | \ 18 | \ 19 | \ 20 | \ 21 | \ 22 | \ 23 | \ 25 | \ 31 | \ 32 | \ 33 | \ 34 |
{{expandingProperty}}{{col.displayName || col.field}}
\ 28 | \ 29 | {{row.branch[expandingProperty]}}\ 30 | {{row.branch[col.field]}}
\ 35 |
", 36 | replace: true, 37 | scope: { 38 | treeData: '=', 39 | colDefs:'=', 40 | expandOn:'=', 41 | onSelect: '&', 42 | initialSelection: '@', 43 | treeControl: '=' 44 | }, 45 | link: function(scope, element, attrs) { 46 | var error, expandingProperty, expand_all_parents, expand_level, for_all_ancestors, for_each_branch, get_parent, n, on_treeData_change, select_branch, selected_branch, tree; 47 | 48 | error = function(s) { 49 | console.log('ERROR:' + s); 50 | debugger; 51 | return void 0; 52 | }; 53 | 54 | if (attrs.iconExpand == null) { 55 | //attrs.iconExpand = 'icon-plus glyphicon glyphicon-plus fa fa-plus'; 56 | attrs.iconExpand = 'fa fa-chevron-down'; 57 | } 58 | if (attrs.iconCollapse == null) { 59 | //attrs.iconCollapse = 'icon-minus glyphicon glyphicon-minus fa fa-minus'; 60 | attrs.iconCollapse = 'fa fa-chevron-up'; 61 | } 62 | if (attrs.iconLeaf == null) { 63 | //attrs.iconLeaf = 'icon-file glyphicon glyphicon-file fa fa-file'; 64 | attrs.iconLeaf = 'fa fa-asterisk'; 65 | } 66 | if (attrs.expandLevel == null) { 67 | attrs.expandLevel = '3'; 68 | } 69 | 70 | expand_level = parseInt(attrs.expandLevel, 10); 71 | 72 | if (!scope.treeData) { 73 | alert('no treeData defined for the tree!'); 74 | return; 75 | } 76 | if (scope.treeData.length == null) { 77 | if (treeData.label != null) { 78 | scope.treeData = [treeData]; 79 | } else { 80 | alert('treeData should be an array of root branches'); 81 | return; 82 | } 83 | } 84 | if(attrs.expandOn){ 85 | expandingProperty = scope.expandOn; 86 | scope.expandingProperty = scope.expandOn; 87 | } 88 | else{ 89 | var _firstRow = scope.treeData[0], 90 | _keys = Object.keys(_firstRow); 91 | for(var i =0, len = _keys.length; i 0) { 225 | f = function(e) { 226 | if (typeof e === 'string') { 227 | return { 228 | label: e, 229 | children: [] 230 | }; 231 | } else { 232 | return e; 233 | } 234 | }; 235 | return branch.children = (function() { 236 | var _i, _len, _ref, _results; 237 | _ref = branch.children; 238 | _results = []; 239 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 240 | child = _ref[_i]; 241 | _results.push(f(child)); 242 | } 243 | return _results; 244 | })(); 245 | } 246 | } else { 247 | return branch.children = []; 248 | } 249 | }); 250 | add_branch_to_list = function(level, branch, visible) { 251 | var child, child_visible, tree_icon, _i, _len, _ref, _results; 252 | if (branch.expanded == null) { 253 | branch.expanded = false; 254 | } 255 | if (!branch.children || branch.children.length === 0) { 256 | tree_icon = attrs.iconLeaf; 257 | } else { 258 | if (branch.expanded) { 259 | tree_icon = attrs.iconCollapse; 260 | } else { 261 | tree_icon = attrs.iconExpand; 262 | } 263 | } 264 | branch.level = level; 265 | scope.tree_rows.push({ 266 | level: level, 267 | branch: branch, 268 | label: branch[expandingProperty], 269 | tree_icon: tree_icon, 270 | visible: visible 271 | }); 272 | if (branch.children != null) { 273 | _ref = branch.children; 274 | _results = []; 275 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 276 | child = _ref[_i]; 277 | child_visible = visible && branch.expanded; 278 | _results.push(add_branch_to_list(level + 1, child, child_visible)); 279 | } 280 | return _results; 281 | } 282 | }; 283 | _ref = scope.treeData; 284 | _results = []; 285 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 286 | root_branch = _ref[_i]; 287 | _results.push(add_branch_to_list(1, root_branch, true)); 288 | } 289 | return _results; 290 | }; 291 | 292 | scope.$watch('treeData', on_treeData_change, true); 293 | 294 | if (attrs.initialSelection != null) { 295 | for_each_branch(function(b) { 296 | if (b.label === attrs.initialSelection) { 297 | return $timeout(function() { 298 | return select_branch(b); 299 | }); 300 | } 301 | }); 302 | } 303 | n = scope.treeData.length; 304 | for_each_branch(function(b, level) { 305 | b.level = level; 306 | return b.expanded = b.level < expand_level; 307 | }); 308 | if (scope.treeControl != null) { 309 | if (angular.isObject(scope.treeControl)) { 310 | tree = scope.treeControl; 311 | tree.expand_all = function() { 312 | return for_each_branch(function(b, level) { 313 | return b.expanded = true; 314 | }); 315 | }; 316 | tree.collapse_all = function() { 317 | return for_each_branch(function(b, level) { 318 | return b.expanded = false; 319 | }); 320 | }; 321 | tree.get_first_branch = function() { 322 | n = scope.treeData.length; 323 | if (n > 0) { 324 | return scope.treeData[0]; 325 | } 326 | }; 327 | tree.select_first_branch = function() { 328 | var b; 329 | b = tree.get_first_branch(); 330 | return tree.select_branch(b); 331 | }; 332 | tree.get_selected_branch = function() { 333 | return selected_branch; 334 | }; 335 | tree.get_parent_branch = function(b) { 336 | return get_parent(b); 337 | }; 338 | tree.select_branch = function(b) { 339 | select_branch(b); 340 | return b; 341 | }; 342 | tree.get_children = function(b) { 343 | return b.children; 344 | }; 345 | tree.select_parent_branch = function(b) { 346 | var p; 347 | if (b == null) { 348 | b = tree.get_selected_branch(); 349 | } 350 | if (b != null) { 351 | p = tree.get_parent_branch(b); 352 | if (p != null) { 353 | tree.select_branch(p); 354 | return p; 355 | } 356 | } 357 | }; 358 | tree.add_branch = function(parent, new_branch) { 359 | if (parent != null) { 360 | parent.children.push(new_branch); 361 | parent.expanded = true; 362 | } else { 363 | scope.treeData.push(new_branch); 364 | } 365 | return new_branch; 366 | }; 367 | tree.add_root_branch = function(new_branch) { 368 | tree.add_branch(null, new_branch); 369 | return new_branch; 370 | }; 371 | tree.expand_branch = function(b) { 372 | if (b == null) { 373 | b = tree.get_selected_branch(); 374 | } 375 | if (b != null) { 376 | b.expanded = true; 377 | return b; 378 | } 379 | }; 380 | tree.collapse_branch = function(b) { 381 | if (b == null) { 382 | b = selected_branch; 383 | } 384 | if (b != null) { 385 | b.expanded = false; 386 | return b; 387 | } 388 | }; 389 | tree.get_siblings = function(b) { 390 | var p, siblings; 391 | if (b == null) { 392 | b = selected_branch; 393 | } 394 | if (b != null) { 395 | p = tree.get_parent_branch(b); 396 | if (p) { 397 | siblings = p.children; 398 | } else { 399 | siblings = scope.treeData; 400 | } 401 | return siblings; 402 | } 403 | }; 404 | tree.get_next_sibling = function(b) { 405 | var i, siblings; 406 | if (b == null) { 407 | b = selected_branch; 408 | } 409 | if (b != null) { 410 | siblings = tree.get_siblings(b); 411 | n = siblings.length; 412 | i = siblings.indexOf(b); 413 | if (i < n) { 414 | return siblings[i + 1]; 415 | } 416 | } 417 | }; 418 | tree.get_prev_sibling = function(b) { 419 | var i, siblings; 420 | if (b == null) { 421 | b = selected_branch; 422 | } 423 | siblings = tree.get_siblings(b); 424 | n = siblings.length; 425 | i = siblings.indexOf(b); 426 | if (i > 0) { 427 | return siblings[i - 1]; 428 | } 429 | }; 430 | tree.select_next_sibling = function(b) { 431 | var next; 432 | if (b == null) { 433 | b = selected_branch; 434 | } 435 | if (b != null) { 436 | next = tree.get_next_sibling(b); 437 | if (next != null) { 438 | return tree.select_branch(next); 439 | } 440 | } 441 | }; 442 | tree.select_prev_sibling = function(b) { 443 | var prev; 444 | if (b == null) { 445 | b = selected_branch; 446 | } 447 | if (b != null) { 448 | prev = tree.get_prev_sibling(b); 449 | if (prev != null) { 450 | return tree.select_branch(prev); 451 | } 452 | } 453 | }; 454 | tree.get_first_child = function(b) { 455 | var _ref; 456 | if (b == null) { 457 | b = selected_branch; 458 | } 459 | if (b != null) { 460 | if (((_ref = b.children) != null ? _ref.length : void 0) > 0) { 461 | return b.children[0]; 462 | } 463 | } 464 | }; 465 | tree.get_closest_ancestor_next_sibling = function(b) { 466 | var next, parent; 467 | next = tree.get_next_sibling(b); 468 | if (next != null) { 469 | return next; 470 | } else { 471 | parent = tree.get_parent_branch(b); 472 | return tree.get_closest_ancestor_next_sibling(parent); 473 | } 474 | }; 475 | tree.get_next_branch = function(b) { 476 | var next; 477 | if (b == null) { 478 | b = selected_branch; 479 | } 480 | if (b != null) { 481 | next = tree.get_first_child(b); 482 | if (next != null) { 483 | return next; 484 | } else { 485 | next = tree.get_closest_ancestor_next_sibling(b); 486 | return next; 487 | } 488 | } 489 | }; 490 | tree.select_next_branch = function(b) { 491 | var next; 492 | if (b == null) { 493 | b = selected_branch; 494 | } 495 | if (b != null) { 496 | next = tree.get_next_branch(b); 497 | if (next != null) { 498 | tree.select_branch(next); 499 | return next; 500 | } 501 | } 502 | }; 503 | tree.last_descendant = function(b) { 504 | var last_child; 505 | if (b == null) { 506 | debugger; 507 | } 508 | n = b.children.length; 509 | if (n === 0) { 510 | return b; 511 | } else { 512 | last_child = b.children[n - 1]; 513 | return tree.last_descendant(last_child); 514 | } 515 | }; 516 | tree.get_prev_branch = function(b) { 517 | var parent, prev_sibling; 518 | if (b == null) { 519 | b = selected_branch; 520 | } 521 | if (b != null) { 522 | prev_sibling = tree.get_prev_sibling(b); 523 | if (prev_sibling != null) { 524 | return tree.last_descendant(prev_sibling); 525 | } else { 526 | parent = tree.get_parent_branch(b); 527 | return parent; 528 | } 529 | } 530 | }; 531 | return tree.select_prev_branch = function(b) { 532 | var prev; 533 | if (b == null) { 534 | b = selected_branch; 535 | } 536 | if (b != null) { 537 | prev = tree.get_prev_branch(b); 538 | if (prev != null) { 539 | tree.select_branch(prev); 540 | return prev; 541 | } 542 | } 543 | }; 544 | } 545 | } 546 | } 547 | }; 548 | } 549 | ]); 550 | 551 | }).call(this); 552 | -------------------------------------------------------------------------------- /src/tree-grid-directive.js.bad: -------------------------------------------------------------------------------- 1 | 2 | (function() { 3 | var module; 4 | 5 | module = angular.module('treeGrid', []); 6 | 7 | module.directive('treeGrid', [ 8 | '$timeout', function($timeout) { 9 | return { 10 | restrict: 'E', 11 | //templateUrl:'tree-grid-template.html', 12 | //template:"
{{expandingProperty}}{{col.displayName || col.field}}
{{row.branch[expandingProperty]}}{{row.branch[col.field]}}
", 13 | template: 14 | "
\ 15 |
\ 16 | \ 17 | \ 18 | \ 19 | \ 20 | \ 21 | \ 22 | \ 23 | \ 25 | \ 33 | 34 | \ 35 | \ 36 | \ 37 |
{{expandingProperty}}{{col.displayName || col.field}}
26 | \ 29 | 30 | \ 31 | {{row.branch[expandingProperty]}}\ 32 | {{row.branch[col.field]}}
\ 38 |
", 39 | replace: true, 40 | scope: { 41 | treeData: '=', 42 | colDefs:'=', 43 | expandOn:'=', 44 | onSelect: '&', 45 | initialSelection: '@', 46 | treeControl: '=' 47 | }, 48 | link: function(scope, element, attrs) { 49 | var error, expandingProperty, expand_all_parents, expand_level, for_all_ancestors, for_each_branch, get_parent, n, on_treeData_change, select_branch, selected_branch, tree; 50 | 51 | error = function(s) { 52 | console.log('ERROR:' + s); 53 | debugger; 54 | return void 0; 55 | }; 56 | 57 | if (attrs.iconExpand == null) { 58 | //attrs.iconExpand = 'icon-plus glyphicon glyphicon-plus fa fa-plus'; 59 | attrs.iconExpand = 'fa fa-chevron-down'; 60 | } 61 | if (attrs.iconCollapse == null) { 62 | //attrs.iconCollapse = 'icon-minus glyphicon glyphicon-minus fa fa-minus'; 63 | attrs.iconCollapse = 'fa fa-chevron-up'; 64 | } 65 | if (attrs.iconLeaf == null) { 66 | //attrs.iconLeaf = 'icon-file glyphicon glyphicon-file fa fa-file'; 67 | attrs.iconLeaf = 'fa fa-asterisk'; 68 | } 69 | if (attrs.expandLevel == null) { 70 | attrs.expandLevel = '3'; 71 | } 72 | 73 | expand_level = parseInt(attrs.expandLevel, 10); 74 | 75 | if (!scope.treeData) { 76 | alert('no treeData defined for the tree!'); 77 | return; 78 | } 79 | if (scope.treeData.length == null) { 80 | if (treeData.label != null) { 81 | scope.treeData = [treeData]; 82 | } else { 83 | alert('treeData should be an array of root branches'); 84 | return; 85 | } 86 | } 87 | if(attrs.expandOn){ 88 | expandingProperty = scope.expandOn; 89 | scope.expandingProperty = scope.expandOn; 90 | } 91 | else{ 92 | var _firstRow = scope.treeData[0], 93 | _keys = Object.keys(_firstRow); 94 | for(var i =0, len = _keys.length; i 0) { 228 | f = function(e) { 229 | if (typeof e === 'string') { 230 | return { 231 | label: e, 232 | children: [] 233 | }; 234 | } else { 235 | return e; 236 | } 237 | }; 238 | return branch.children = (function() { 239 | var _i, _len, _ref, _results; 240 | _ref = branch.children; 241 | _results = []; 242 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 243 | child = _ref[_i]; 244 | _results.push(f(child)); 245 | } 246 | return _results; 247 | })(); 248 | } 249 | } else { 250 | return branch.children = []; 251 | } 252 | }); 253 | add_branch_to_list = function(level, branch, visible) { 254 | var child, child_visible, tree_icon, _i, _len, _ref, _results; 255 | if (branch.expanded == null) { 256 | branch.expanded = false; 257 | } 258 | if (!branch.children || branch.children.length === 0) { 259 | tree_icon = attrs.iconLeaf; 260 | } else { 261 | if (branch.expanded) { 262 | tree_icon = attrs.iconCollapse; 263 | } else { 264 | tree_icon = attrs.iconExpand; 265 | } 266 | } 267 | branch.level = level; 268 | scope.tree_rows.push({ 269 | level: level, 270 | branch: branch, 271 | label: branch[expandingProperty], 272 | tree_icon: tree_icon, 273 | visible: visible 274 | }); 275 | if (branch.children != null) { 276 | _ref = branch.children; 277 | _results = []; 278 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 279 | child = _ref[_i]; 280 | child_visible = visible && branch.expanded; 281 | _results.push(add_branch_to_list(level + 1, child, child_visible)); 282 | } 283 | return _results; 284 | } 285 | }; 286 | _ref = scope.treeData; 287 | _results = []; 288 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 289 | root_branch = _ref[_i]; 290 | _results.push(add_branch_to_list(1, root_branch, true)); 291 | } 292 | return _results; 293 | }; 294 | 295 | scope.$watch('treeData', on_treeData_change, true); 296 | 297 | if (attrs.initialSelection != null) { 298 | for_each_branch(function(b) { 299 | if (b.label === attrs.initialSelection) { 300 | return $timeout(function() { 301 | return select_branch(b); 302 | }); 303 | } 304 | }); 305 | } 306 | n = scope.treeData.length; 307 | for_each_branch(function(b, level) { 308 | b.level = level; 309 | return b.expanded = b.level < expand_level; 310 | }); 311 | if (scope.treeControl != null) { 312 | if (angular.isObject(scope.treeControl)) { 313 | tree = scope.treeControl; 314 | tree.expand_all = function() { 315 | return for_each_branch(function(b, level) { 316 | return b.expanded = true; 317 | }); 318 | }; 319 | tree.collapse_all = function() { 320 | return for_each_branch(function(b, level) { 321 | return b.expanded = false; 322 | }); 323 | }; 324 | tree.get_first_branch = function() { 325 | n = scope.treeData.length; 326 | if (n > 0) { 327 | return scope.treeData[0]; 328 | } 329 | }; 330 | tree.select_first_branch = function() { 331 | var b; 332 | b = tree.get_first_branch(); 333 | return tree.select_branch(b); 334 | }; 335 | tree.get_selected_branch = function() { 336 | return selected_branch; 337 | }; 338 | tree.get_parent_branch = function(b) { 339 | return get_parent(b); 340 | }; 341 | tree.select_branch = function(b) { 342 | select_branch(b); 343 | return b; 344 | }; 345 | tree.get_children = function(b) { 346 | return b.children; 347 | }; 348 | tree.select_parent_branch = function(b) { 349 | var p; 350 | if (b == null) { 351 | b = tree.get_selected_branch(); 352 | } 353 | if (b != null) { 354 | p = tree.get_parent_branch(b); 355 | if (p != null) { 356 | tree.select_branch(p); 357 | return p; 358 | } 359 | } 360 | }; 361 | tree.add_branch = function(parent, new_branch) { 362 | if (parent != null) { 363 | parent.children.push(new_branch); 364 | parent.expanded = true; 365 | } else { 366 | scope.treeData.push(new_branch); 367 | } 368 | return new_branch; 369 | }; 370 | tree.add_root_branch = function(new_branch) { 371 | tree.add_branch(null, new_branch); 372 | return new_branch; 373 | }; 374 | tree.expand_branch = function(b) { 375 | if (b == null) { 376 | b = tree.get_selected_branch(); 377 | } 378 | if (b != null) { 379 | b.expanded = true; 380 | return b; 381 | } 382 | }; 383 | tree.collapse_branch = function(b) { 384 | if (b == null) { 385 | b = selected_branch; 386 | } 387 | if (b != null) { 388 | b.expanded = false; 389 | return b; 390 | } 391 | }; 392 | tree.get_siblings = function(b) { 393 | var p, siblings; 394 | if (b == null) { 395 | b = selected_branch; 396 | } 397 | if (b != null) { 398 | p = tree.get_parent_branch(b); 399 | if (p) { 400 | siblings = p.children; 401 | } else { 402 | siblings = scope.treeData; 403 | } 404 | return siblings; 405 | } 406 | }; 407 | tree.get_next_sibling = function(b) { 408 | var i, siblings; 409 | if (b == null) { 410 | b = selected_branch; 411 | } 412 | if (b != null) { 413 | siblings = tree.get_siblings(b); 414 | n = siblings.length; 415 | i = siblings.indexOf(b); 416 | if (i < n) { 417 | return siblings[i + 1]; 418 | } 419 | } 420 | }; 421 | tree.get_prev_sibling = function(b) { 422 | var i, siblings; 423 | if (b == null) { 424 | b = selected_branch; 425 | } 426 | siblings = tree.get_siblings(b); 427 | n = siblings.length; 428 | i = siblings.indexOf(b); 429 | if (i > 0) { 430 | return siblings[i - 1]; 431 | } 432 | }; 433 | tree.select_next_sibling = function(b) { 434 | var next; 435 | if (b == null) { 436 | b = selected_branch; 437 | } 438 | if (b != null) { 439 | next = tree.get_next_sibling(b); 440 | if (next != null) { 441 | return tree.select_branch(next); 442 | } 443 | } 444 | }; 445 | tree.select_prev_sibling = function(b) { 446 | var prev; 447 | if (b == null) { 448 | b = selected_branch; 449 | } 450 | if (b != null) { 451 | prev = tree.get_prev_sibling(b); 452 | if (prev != null) { 453 | return tree.select_branch(prev); 454 | } 455 | } 456 | }; 457 | tree.get_first_child = function(b) { 458 | var _ref; 459 | if (b == null) { 460 | b = selected_branch; 461 | } 462 | if (b != null) { 463 | if (((_ref = b.children) != null ? _ref.length : void 0) > 0) { 464 | return b.children[0]; 465 | } 466 | } 467 | }; 468 | tree.get_closest_ancestor_next_sibling = function(b) { 469 | var next, parent; 470 | next = tree.get_next_sibling(b); 471 | if (next != null) { 472 | return next; 473 | } else { 474 | parent = tree.get_parent_branch(b); 475 | return tree.get_closest_ancestor_next_sibling(parent); 476 | } 477 | }; 478 | tree.get_next_branch = function(b) { 479 | var next; 480 | if (b == null) { 481 | b = selected_branch; 482 | } 483 | if (b != null) { 484 | next = tree.get_first_child(b); 485 | if (next != null) { 486 | return next; 487 | } else { 488 | next = tree.get_closest_ancestor_next_sibling(b); 489 | return next; 490 | } 491 | } 492 | }; 493 | tree.select_next_branch = function(b) { 494 | var next; 495 | if (b == null) { 496 | b = selected_branch; 497 | } 498 | if (b != null) { 499 | next = tree.get_next_branch(b); 500 | if (next != null) { 501 | tree.select_branch(next); 502 | return next; 503 | } 504 | } 505 | }; 506 | tree.last_descendant = function(b) { 507 | var last_child; 508 | if (b == null) { 509 | debugger; 510 | } 511 | n = b.children.length; 512 | if (n === 0) { 513 | return b; 514 | } else { 515 | last_child = b.children[n - 1]; 516 | return tree.last_descendant(last_child); 517 | } 518 | }; 519 | tree.get_prev_branch = function(b) { 520 | var parent, prev_sibling; 521 | if (b == null) { 522 | b = selected_branch; 523 | } 524 | if (b != null) { 525 | prev_sibling = tree.get_prev_sibling(b); 526 | if (prev_sibling != null) { 527 | return tree.last_descendant(prev_sibling); 528 | } else { 529 | parent = tree.get_parent_branch(b); 530 | return parent; 531 | } 532 | } 533 | }; 534 | return tree.select_prev_branch = function(b) { 535 | var prev; 536 | if (b == null) { 537 | b = selected_branch; 538 | } 539 | if (b != null) { 540 | prev = tree.get_prev_branch(b); 541 | if (prev != null) { 542 | tree.select_branch(prev); 543 | return prev; 544 | } 545 | } 546 | }; 547 | } 548 | } 549 | } 550 | }; 551 | } 552 | ]); 553 | 554 | }).call(this); 555 | --------------------------------------------------------------------------------