├── _config.yml
├── .DS_Store
├── demo
├── .DS_Store
├── css
│ ├── .DS_Store
│ └── style.css
├── js
│ ├── .DS_Store
│ ├── test.js
│ ├── versioning.js
│ └── jquery.js
├── test.htm
├── ex1.htm
├── ex2.htm
├── ex3.htm
├── ex4.htm
└── ex5.htm
├── _images
└── 4colWithBarExample.png
├── .gitignore
├── package.json
├── gulpfile.js
├── LICENSE
├── README.md
├── dist
├── CoolRoadmap.min.css
└── CoolRoadmap.min.js
└── src
├── CoolRoadmap.less
└── CoolRoadmap.js
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mikedeshazer/CoolRoadmap/HEAD/.DS_Store
--------------------------------------------------------------------------------
/demo/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mikedeshazer/CoolRoadmap/HEAD/demo/.DS_Store
--------------------------------------------------------------------------------
/demo/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mikedeshazer/CoolRoadmap/HEAD/demo/css/.DS_Store
--------------------------------------------------------------------------------
/demo/js/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mikedeshazer/CoolRoadmap/HEAD/demo/js/.DS_Store
--------------------------------------------------------------------------------
/_images/4colWithBarExample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mikedeshazer/CoolRoadmap/HEAD/_images/4colWithBarExample.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore vscode
2 | *.code-workspace
3 | .vscode/*
4 | !.vscode/settings.json
5 | !.vscode/tasks.json
6 | !.vscode/launch.json
7 | !.vscode/extensions.json
8 |
9 | # Node
10 | node_modules
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "coolroadmap",
3 | "version": "0.1.0",
4 | "description": "Roadmap Visualization",
5 | "scripts": {
6 | "test": "echo \"Error: no test specified\" && exit 1"
7 | },
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/mikedeshazer/CoolRoadmap.git"
11 | },
12 | "author": "",
13 | "license": "ISC",
14 | "bugs": {
15 | "url": "https://github.com/mikedeshazer/CoolRoadmap/issues"
16 | },
17 | "homepage": "https://github.com/mikedeshazer/CoolRoadmap#readme",
18 | "devDependencies": {
19 | "gulp": "^3.9.1",
20 | "gulp-concat": "^2.6.1",
21 | "gulp-csso": "^3.0.1",
22 | "gulp-less": "^3.5.0",
23 | "gulp-sourcemaps": "^2.6.4"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var path = require('path');
3 | var minifyCSS = require('gulp-csso');
4 | var less = require('gulp-less');
5 | var concat = require('gulp-concat');
6 | var sourcemaps = require('gulp-sourcemaps');
7 |
8 | gulp.task('css-min', function() {
9 | return gulp
10 | .src('src/**/*.less')
11 | .pipe(less({
12 | paths: [ path.join(__dirname, 'less', 'includes') ]
13 | }))
14 | .pipe(minifyCSS())
15 | .pipe(concat('CoolRoadmap.min.css'))
16 | .pipe(gulp.dest('dist/'));
17 | });
18 |
19 | gulp.task('js-min', function() {
20 | return gulp
21 | .src('src/**/*.js')
22 | .pipe(concat('CoolRoadmap.min.js'))
23 | .pipe(gulp.dest('dist/'));
24 | });
25 |
26 | gulp.task('watch', function() {
27 | return gulp.watch('src/**/*', ['build']);
28 | })
29 |
30 | gulp.task('build', [
31 | 'css-min',
32 | 'js-min'
33 | ]);
34 |
35 | gulp.task('default', [
36 | 'build',
37 | 'watch'
38 | ]);
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2010-2018 Google, Inc. http://angularjs.org
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/demo/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |
3 | color: #FFF;
4 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
5 | }
6 |
7 |
8 | .compBox{
9 | position:fixed;
10 | padding:15px;
11 | overflow:scroll;
12 |
13 | }
14 |
15 | #categoriesBox{
16 | width:50%;
17 | height:30%;
18 | left:0px;
19 | top:0px;
20 | background-color:#000;
21 | }
22 |
23 | #milestonesBox{
24 | width:50%;
25 | height:30%;
26 | right:0px;
27 | top:0px;
28 | background-color:#000;
29 | }
30 |
31 |
32 | #renderingBox{
33 | background-color: #15182d;
34 | overflow:scroll;
35 | width:70%;
36 | height:70%;
37 | left:0px;
38 | bottom:0px;
39 | width: calc(70% - 60px);
40 | }
41 |
42 | #sourceBox{
43 | width:30%;
44 | height:70%;
45 | right:0px;
46 | bottom:0px;
47 | background-color:#000;
48 | }
49 |
50 |
51 |
52 | textarea{
53 | min-height:40%;
54 | width:90%;
55 | left:5%;
56 | position:relative;
57 | background-color:#2F323B;
58 | color:#fff;
59 | font-size:10px;
60 | }
--------------------------------------------------------------------------------
/demo/test.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Add Categories First
18 |
23 |
24 |
25 |
26 |
27 |
Add Milestones To Categories
28 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
54 |
55 |
56 |
57 |
58 |
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/demo/js/test.js:
--------------------------------------------------------------------------------
1 | function renderRoadmapTest(data, type){
2 |
3 | if(type=="category"){
4 | catObj = $.parseJSON($('#catJSON').val());
5 | catObj.push(data);
6 | $('#catJSON').val(JSON.stringify(catObj));
7 |
8 |
9 | setTimeout(function(){
10 | mObj = $.parseJSON($('#milesJSON').val());
11 |
12 | mObj['belongsToColumn'] = parseInt(mObj['belongsToColumn']);
13 | for(i in mObj){
14 | mObj[i]['belongsToColumn'] = parseInt(mObj[i]['belongsToColumn']);
15 | }
16 |
17 | roadmapRender($.parseJSON($('#catJSON').val()), mObj );
18 |
19 | }, 100)
20 | }
21 | else{
22 | mObj = $.parseJSON($('#milesJSON').val());
23 | mObj.push(data);
24 | for(i in mObj){
25 | mObj[i]['belongsToColumn'] = parseInt(mObj[i]['belongsToColumn']);
26 | }
27 |
28 | $('#milesJSON').val(JSON.stringify(mObj));
29 |
30 | setTimeout(function(){
31 | roadmapRender($.parseJSON($('#catJSON').val()), mObj );
32 |
33 | }, 100)
34 | }
35 |
36 |
37 |
38 | }
39 |
40 | function roadmapRender(catData, milesData){
41 |
42 | roadmap1 = new roadmap('renderingBox');
43 | roadmap1.columns(catData);
44 | roadmap1.milestones(milesData);
45 |
46 | }
47 |
48 | function addCategory(){
49 |
50 | var newCatData = $('#title').val();
51 | renderRoadmapTest(newCatData, "category");
52 | }
53 |
54 |
55 | function addMilestone(){
56 |
57 | newMileData = $('#milesForm').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})
58 | renderRoadmapTest(newMileData, "milestone");
59 | }
60 |
61 |
62 |
63 | /*
64 |
65 |
66 | Categories:
67 |
68 |
69 |
70 | milestones:
71 |
72 |
73 | title
74 | description
75 | status
76 | release Note
77 | ingegratesWith:
78 | difficulty
79 |
80 | */
--------------------------------------------------------------------------------
/demo/js/versioning.js:
--------------------------------------------------------------------------------
1 |
2 | //example input
3 | /*
4 | versionThis(
5 | [
6 | {"name":"1 milestone name", "difficulty":5},{"name":"2 milestone name", "difficulty":2}, {"name":" 3 milestone name", "difficulty":20}
7 | ],
8 | "2 decimals",
9 | 1
10 | )
11 |
12 |
13 |
14 | // returns:
15 | // ["0.19.0", "0.26.0", "1.0.0"]
16 |
17 | */
18 |
19 | function versionThis(milestoneObjs, format, startingPoint){
20 |
21 | if(typeof format !="string"){
22 | format = "2 decimals";
23 | }
24 | if(typeof startingPoint !="number"){
25 | startingPoint="1";
26 | }
27 | startingPoint= startingPoint.toString();
28 |
29 | //all the milestone objects for a category are sent here, first to last
30 | var difficulty= 0;
31 |
32 | var responseSkeleton = ['0.10.0', '0.25.0', '0.40.0', '0.80.0', '0.90.0', '1.0.0']
33 | for( i in milestoneObjs){
34 | difficulty= difficulty+ milestoneObjs[i]['difficulty'];
35 |
36 | }
37 |
38 |
39 | var lastGeneratedMilestoneNum = 0;
40 | var loopCount = 0;
41 | responseSkeleton=[];
42 | for (j in milestoneObjs){
43 | var thisWeight = milestoneObjs[j]['difficulty']/difficulty;
44 | thisMilestoneVersion = lastGeneratedMilestoneNum+ thisWeight;
45 | lastGeneratedMilestoneNum = thisMilestoneVersion;
46 |
47 | if(format == "2 decimals"){
48 |
49 | if(loopCount >=milestoneObjs.length-1){
50 | var endingPoint = parseInt(startingPoint)+1;
51 | responseSkeleton.push(endingPoint.toString()+".0.0");
52 | }
53 | else{
54 | responseSkeleton.push(startingPoint.toString()+""+lastGeneratedMilestoneNum.toFixed(2).toString().replace("0.", ".")+".0");
55 | }
56 |
57 | }
58 |
59 |
60 | else{
61 |
62 | if(loopCount >=milestoneObjs.length-1){
63 | var endingPoint = parseInt(startingPoint)+1;
64 | responseSkeleton.push(endingPoint+".0");
65 | }
66 | else{
67 | responseSkeleton.push(startingPoint+"."+lastGeneratedMilestoneNum.toFixed(2).toString().replace("0.", "."));
68 | }
69 |
70 | }
71 |
72 |
73 |
74 | loopCount=loopCount+1;
75 | }
76 |
77 | return responseSkeleton;
78 | }
79 |
80 |
--------------------------------------------------------------------------------
/demo/ex1.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Cool Roadmap Demo
4 |
5 |
13 |
14 |
15 | Cool Roadmap Demo - 1 Column
16 |
17 |
18 |
19 |
20 |
69 |
70 |
--------------------------------------------------------------------------------
/demo/ex2.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Cool Roadmap Demo
4 |
5 |
13 |
14 |
15 | Cool Roadmap Demo - 2 Column
16 |
17 |
18 |
19 |
20 |
94 |
95 |
--------------------------------------------------------------------------------
/demo/ex3.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Cool Roadmap Demo
4 |
5 |
13 |
14 |
15 | Cool Roadmap Demo - 3 Column
16 |
17 |
18 |
19 |
20 |
109 |
110 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CoolRoadmap
2 |
3 | 
4 |
5 | [1 Column Example](https://htmlpreview.github.io/?https://github.com/mikedeshazer/CoolRoadmap/blob/master/demo/ex1.htm) •
6 | [2 Column Example](https://htmlpreview.github.io/?https://github.com/mikedeshazer/CoolRoadmap/blob/master/demo/ex2.htm) •
7 | [3 Column Example](https://htmlpreview.github.io/?https://github.com/mikedeshazer/CoolRoadmap/blob/master/demo/ex3.htm) •
8 | [4 Column Example](https://htmlpreview.github.io/?https://github.com/mikedeshazer/CoolRoadmap/blob/master/demo/ex4.htm) •
9 | [10 Column Example](https://htmlpreview.github.io/?https://github.com/mikedeshazer/CoolRoadmap/blob/master/demo/ex5.htm)
10 |
11 | ## Getting started
12 |
13 | Getting started demos are in the demo folder. The ex4.htm is probably the best example to get started with. Tests can be conducted via the demo/test.htm file.
14 |
15 | Add `dist/CoolRoadmap.min.js` and `dist/CoolRoadmap.min.css` to your project and your html file and create a new roadmap with some columns and milestones.
16 |
17 | ```html
18 |
19 |
20 |
21 |
45 | ```
46 |
47 | ## API
48 |
49 | ```javascript
50 | var myroadmap = new roadmap('idForWrapperDiv');
51 | ```
52 |
53 | ### roadmap.columns(columns)
54 |
55 | Create the columns for the roadmap. The `columns` argument if an array of string column titles.
56 |
57 | ```javascript
58 | myroadmap.columns([
59 | 'Column 1',
60 | 'Column 2'
61 | ])
62 | ```
63 |
64 | ### roadmap.milestones(milestones)
65 |
66 | Create the columns for the roadmap. The `milestones` argument is an object containing the data for the milestone. The object structure is defined as:
67 |
68 | ```javascript
69 | {
70 | title: // Milestone title
71 | descriptionHTML: // Milestone descriptive text/HTML to be shown on click
72 | belongsToColumn: // The column number that the milestone belongs to (starts at 1)
73 | forwardConnect: [
74 | // The column of the node this node connects to,
75 | // The milestone rank of the node this node connects to
76 | ]
77 | rank: // The order in which this node should appear in the column (0 is the bottom and lowest rank)
78 | difficult: // The amount of which this milestone contributes to the percent complete
79 | status: // If defined as "complete" this milestone is marked as complete
80 | }
81 | ```
82 |
83 | ```javascript
84 | myroadmap.milestones([
85 | {
86 | title: 'Rank 0 - col 1',
87 | descriptionHTML: 'HTML is even supported ',
88 | belongsToColumn: 1,
89 | rank: 0,
90 | difficulty: 10
91 | }
92 | ])
93 | ```
94 |
95 | ### roadmap.style(columnColors)
96 |
97 | Define the colors for the nodes in each column. The `columnColors` argument is an array of strings containing the color (hex or rgb) for each defined column.
98 |
99 | ```javascript
100 | myroadmap.columnColors(['#6a4bcc', '#04a2fa', '#e7327d', '#662b6b'])
101 | ```
102 |
103 | ### roadmap.markComplete(milestonesComplete)
104 |
105 | Define which milestones are complete to drive the percent complete of the column. The `milestonesComplete` argument is an array of arrays of integers of which are the ranks that are complete for each column.
106 |
107 | ```javascript
108 | myroadmap.columnColors([
109 | [0, 3], // Column 1 - Rank 0 and 3
110 | [2] // Column 2 - Rank 2
111 | ])
112 | ```
113 |
114 |
115 | ## Features
116 |
117 | * Create a nice roadmap to show for yourn projects
118 | * Connect roadmap items across columns
119 | * Simple to style each node
120 | * Overall progress bar
121 |
122 | ## Donate
123 |
124 | Bitcoin: 1J5KSzvYa3cD2nP3CrZpFwv4eanMdYqeF5
125 |
126 | Ether: 0xed7dBeb7998Ec79D99379dA81c4b54f74abc69d4
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/demo/ex4.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Cool Roadmap Demo
4 |
5 |
13 |
14 |
15 | Cool Roadmap Demo - 4 Column
16 |
17 |
18 |
19 |
20 |
137 |
138 |
--------------------------------------------------------------------------------
/demo/ex5.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Cool Roadmap Demo
4 |
5 |
13 |
14 |
15 | Cool Roadmap Demo - 10 Column
16 |
17 |
18 |
19 |
20 |
203 |
204 |
--------------------------------------------------------------------------------
/dist/CoolRoadmap.min.css:
--------------------------------------------------------------------------------
1 | .coolRoadmap-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:100000;display:flex;align-items:center;justify-content:center}.coolRoadmap-lightbox .coolRoadmap-modal{position:relative;width:100%;max-width:420px;padding:25px;border:2px solid #7180f3;background:#1b1e36;box-shadow:0 2px 6px rgba(0,0,0,.25);border-radius:5px;color:#d4d5de;font-weight:300}.coolRoadmap-lightbox .coolRoadmap-modal:before{width:64px;height:64px;content:'X';position:absolute;top:0;right:0;cursor:pointer;color:#6f7ff6;justify-content:center;align-items:center;display:flex;font-weight:700}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-title{font-size:20px;margin-bottom:16px;color:#fff;font-weight:500}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-title .coolRoadmap-version{color:#8c8fa6;font-weight:300;margin-left:7px}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-footer{margin-top:20px}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-footer .coolRoadmap-detailsButton{float:right;text-align:center;background:#15182d;border:2px solid #2e3148;padding:5px 12px;border-radius:5px;font-size:16px;font-weight:400;cursor:pointer}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-footer .coolRoadmap-status{float:left;text-align:center;padding-left:20px;color:#8c8fa6;font-weight:300;margin-top:7px;min-height:15px}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-footer .coolRoadmap-status:before{position:absolute;content:"";width:15px;height:15px;background-size:contain;margin-top:4px;margin-left:-22px}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-footer .coolRoadmap-status.coolRoadmap-inProgress:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZwdCIgaGVpZ2h0PSIxNnB0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDojZGRjNDIyO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA3Ljk5MjE4OCAxNS44Mzk4NDQgQyA2LjQzMzU5NCAxNS44Mzk4NDQgNC44NzUgMTUuODM5ODQ0IDMuMzIwMzEyIDE1LjgzNTkzOCBDIDMuMTUyMzQ0IDE1LjgzNTkzOCAyLjk2ODc1IDE1LjgxNjQwNiAyLjgxNjQwNiAxNS43NTM5MDYgQyAyLjUxOTUzMSAxNS42MzI4MTIgMi4zODY3MTkgMTUuMzc4OTA2IDIuNDEwMTU2IDE1LjA2NjQwNiBDIDIuNDM3NSAxNC43MzgyODEgMi42OTkyMTkgMTQuNDUzMTI1IDMuMDA3ODEyIDE0LjQ2MDkzOCBDIDMuMzUxNTYyIDE0LjQ2NDg0NCAzLjQwNjI1IDE0LjMwMDc4MSAzLjM5ODQzOCAxNC4wMTU2MjUgQyAzLjM5MDYyNSAxMy40ODgyODEgMy40MDYyNSAxMi45NjQ4NDQgMy4zOTg0MzggMTIuNDM3NSBDIDMuMzkwNjI1IDExLjg5NDUzMSAzLjYwMTU2MiAxMS40NDE0MDYgMy45NjA5MzggMTEuMDQyOTY5IEMgNC42MzY3MTkgMTAuMjkyOTY5IDUuMzA4NTk0IDkuNTM5MDYyIDUuOTcyNjU2IDguNzg1MTU2IEMgNi40NTMxMjUgOC4yMzA0NjkgNi40NTcwMzEgNy43Njk1MzEgNS45ODA0NjkgNy4yMjY1NjIgQyA1LjMxNjQwNiA2LjQ2ODc1IDQuNjQ4NDM4IDUuNzE0ODQ0IDMuOTcyNjU2IDQuOTY4NzUgQyAzLjYwMTU2MiA0LjU2MjUgMy4zOTA2MjUgNC4xMDE1NjIgMy4zOTg0MzggMy41NDI5NjkgQyAzLjQwMjM0NCAzLjAwNzgxMiAzLjM5MDYyNSAyLjQ2ODc1IDMuMzk4NDM4IDEuOTI5Njg4IEMgMy4zOTg0MzggMS42OTE0MDYgMy4zNTE1NjIgMS41NDY4NzUgMy4wNTQ2ODggMS41NDI5NjkgQyAyLjcwMzEyNSAxLjU0Mjk2OSAyLjQzNzUgMS4yNTc4MTIgMi4zOTg0MzggMC45MTQwNjIgQyAyLjM2NzE4OCAwLjYxMzI4MSAyLjU5Mzc1IDAuMjk2ODc1IDIuOTI5Njg4IDAuMjA3MDMxIEMgMy4wNTg1OTQgMC4xNzE4NzUgMy4xOTkyMTkgMC4xNjAxNTYgMy4zMzU5MzggMC4xNjAxNTYgQyA2LjQ1MzEyNSAwLjE2MDE1NiA5LjU2NjQwNiAwLjE2MDE1NiAxMi42Nzk2ODggMC4xNjAxNTYgQyAxMi43OTI5NjkgMC4xNjAxNTYgMTIuOTEwMTU2IDAuMTY0MDYyIDEzLjAxOTUzMSAwLjE4NzUgQyAxMy4zNzEwOTQgMC4yNzM0MzggMTMuNjI1IDAuNTg1OTM4IDEzLjYwMTU2MiAwLjg5ODQzOCBDIDEzLjU3NDIxOSAxLjI0NjA5NCAxMy4yOTY4NzUgMS41MzEyNSAxMi45MjE4NzUgMS41NDI5NjkgQyAxMi42NzU3ODEgMS41NTA3ODEgMTIuNjAxNTYyIDEuNjU2MjUgMTIuNjAxNTYyIDEuODc4OTA2IEMgMTIuNjA1NDY5IDIuNDE0MDYyIDEyLjU5Mzc1IDIuOTU3MDMxIDEyLjYwNTQ2OSAzLjQ5MjE4OCBDIDEyLjYxNzE4OCA0LjA3NDIxOSAxMi40MDYyNSA0LjU1ODU5NCAxMi4wMTU2MjUgNC45ODA0NjkgQyAxMS4zOTA2MjUgNS42NjQwNjIgMTAuNzkyOTY5IDYuMzc4OTA2IDEwLjE1NjI1IDcuMDUwNzgxIEMgOS41MzUxNTYgNy43MDcwMzEgOS41MjczNDQgOC4yODUxNTYgMTAuMTY3OTY5IDguOTU3MDMxIEMgMTAuODA4NTk0IDkuNjI4OTA2IDExLjQwMjM0NCAxMC4zNDM3NSAxMi4wMjczNDQgMTEuMDI3MzQ0IEMgMTIuMzk4NDM4IDExLjQzMzU5NCAxMi42MDkzNzUgMTEuODk0NTMxIDEyLjYwMTU2MiAxMi40NTMxMjUgQyAxMi41OTc2NTYgMTIuOTkyMTg4IDEyLjYwOTM3NSAxMy41MzEyNSAxMi42MDE1NjIgMTQuMDY2NDA2IEMgMTIuNjAxNTYyIDE0LjMwNDY4OCAxMi42NDg0MzggMTQuNDUzMTI1IDEyLjk0NTMxMiAxNC40NTMxMjUgQyAxMy4yOTY4NzUgMTQuNDUzMTI1IDEzLjU2NjQwNiAxNC43NDIxODggMTMuNjAxNTYyIDE1LjA3ODEyNSBDIDEzLjYzMjgxMiAxNS4zNjMyODEgMTMuNDE0MDYyIDE1LjY4MzU5NCAxMy4xMDE1NjIgMTUuNzc3MzQ0IEMgMTIuOTY0ODQ0IDE1LjgyMDMxMiAxMi44MTI1IDE1LjgzMjAzMSAxMi42NjQwNjIgMTUuODMyMDMxIEMgMTEuMTA1NDY5IDE1LjgzOTg0NCA5LjU0Njg3NSAxNS44Mzk4NDQgNy45OTIxODggMTUuODM5ODQ0IFogTSA3Ljk5MjE4OCAxNC40NDUzMTIgQyA4Ljk1MzEyNSAxNC40NDUzMTIgOS45MTQwNjIgMTQuNDM3NSAxMC44NzUgMTQuNDQ5MjE5IEMgMTEuMTQwNjI1IDE0LjQ1MzEyNSAxMS4yNTM5MDYgMTQuMzcxMDk0IDExLjI0NjA5NCAxNC4wOTc2NTYgQyAxMS4yMzA0NjkgMTMuNTkzNzUgMTEuMjY1NjI1IDEzLjA4OTg0NCAxMS4yMzA0NjkgMTIuNTg1OTM4IEMgMTEuMjE0ODQ0IDEyLjM3NSAxMS4xMjUgMTIuMTMyODEyIDEwLjk4ODI4MSAxMS45NzY1NjIgQyAxMC4zMjgxMjUgMTEuMTk5MjE5IDkuNjQ0NTMxIDEwLjQ0NTMxMiA4Ljk2NDg0NCA5LjY4MzU5NCBDIDguMDU0Njg4IDguNjY0MDYyIDguMDU4NTk0IDcuMzIwMzEyIDguOTc2NTYyIDYuMzAwNzgxIEMgOS42NjAxNTYgNS41NDI5NjkgMTAuMzM5ODQ0IDQuNzg1MTU2IDExIDQuMDExNzE5IEMgMTEuMTMyODEyIDMuODU5Mzc1IDExLjIxODc1IDMuNjI4OTA2IDExLjIzMDQ2OSAzLjQyOTY4OCBDIDExLjI2NTYyNSAyLjkxNDA2MiAxMS4yMzQzNzUgMi4zOTg0MzggMTEuMjQ2MDk0IDEuODgyODEyIEMgMTEuMjUgMS42Mjg5MDYgMTEuMTQwNjI1IDEuNTQ2ODc1IDEwLjg5NDUzMSAxLjU1MDc4MSBDIDguOTcyNjU2IDEuNTU4NTk0IDcuMDQ2ODc1IDEuNTU4NTk0IDUuMTI1IDEuNTQ2ODc1IEMgNC44MjgxMjUgMS41NDY4NzUgNC43NSAxLjY2NDA2MiA0Ljc1MzkwNiAxLjkzNzUgQyA0Ljc2OTUzMSAyLjQwNjI1IDQuNzMwNDY5IDIuODc1IDQuNzY5NTMxIDMuMzQzNzUgQyA0Ljc5Mjk2OSAzLjU4NTkzOCA0Ljg4MjgxMiAzLjg2NzE4OCA1LjAzNTE1NiA0LjA0Njg3NSBDIDUuNjkxNDA2IDQuODI4MTI1IDYuMzgyODEyIDUuNTc4MTI1IDcuMDU4NTk0IDYuMzM5ODQ0IEMgNy45MTc5NjkgNy4zMTI1IDcuOTM3NSA4LjY2NDA2MiA3LjA4OTg0NCA5LjYyMTA5NCBDIDYuNDk2MDk0IDEwLjI5Njg3NSA1LjkwMjM0NCAxMC45ODQzNzUgNS4yNzczNDQgMTEuNjM2NzE5IEMgNC44OTQ1MzEgMTIuMDM1MTU2IDQuNjgzNTk0IDEyLjQ1MzEyNSA0Ljc1MzkwNiAxMy4wMTU2MjUgQyA0Ljc4OTA2MiAxMy4zMDg1OTQgNC43NjE3MTkgMTMuNjA5Mzc1IDQuNzYxNzE5IDEzLjkwNjI1IEMgNC43NjE3MTkgMTQuNDQxNDA2IDQuNzYxNzE5IDE0LjQ0MTQwNiA1LjI4MTI1IDE0LjQ0MTQwNiBDIDYuMTgzNTk0IDE0LjQ0NTMxMiA3LjA4NTkzOCAxNC40NDUzMTIgNy45OTIxODggMTQuNDQ1MzEyIFogTSA3Ljk5MjE4OCAxNC40NDUzMTIgIi8+CjwvZz4KPC9zdmc+Cg==)}.coolRoadmap-lightbox .coolRoadmap-modal .coolRoadmap-footer .coolRoadmap-status.coolRoadmap-complete:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZwdCIgaGVpZ2h0PSIxNnB0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDojNGFjZjRhO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA3LjEzMjgxMiAwLjE5MTQwNiBDIDQuODY3MTg4IDAuNDY4NzUgMi44OTQ1MzEgMS42MzY3MTkgMS41OTM3NSAzLjQ2ODc1IEMgMC41ODU5MzggNC44ODY3MTkgMC4xMDkzNzUgNi40ODQzNzUgMC4xNjQwNjIgOC4yNjE3MTkgQyAwLjIyNjU2MiAxMC4yOTI5NjkgMS4wMTE3MTkgMTIuMTA5Mzc1IDIuNDU3MDMxIDEzLjU1MDc4MSBDIDMuNjM2NzE5IDE0LjcyNjU2MiA1LjA0Mjk2OSAxNS40NjA5MzggNi43MDMxMjUgMTUuNzUzOTA2IEMgNy4wODIwMzEgMTUuODIwMzEyIDcuMjY5NTMxIDE1LjgzMjAzMSA3Ljk4NDM3NSAxNS44MzU5MzggQyA4Ljg5ODQzOCAxNS44MzU5MzggOS4yMTA5MzggMTUuODAwNzgxIDkuOTY4NzUgMTUuNjA5Mzc1IEMgMTEuNDEwMTU2IDE1LjI0NjA5NCAxMi44NTkzNzUgMTQuMzYzMjgxIDEzLjgzMjAzMSAxMy4yNjU2MjUgQyAxNC44ODY3MTkgMTIuMDcwMzEyIDE1LjUwNzgxMiAxMC43NjU2MjUgMTUuNzczNDM4IDkuMTk1MzEyIEMgMTUuODcxMDk0IDguNjEzMjgxIDE1Ljg1OTM3NSA3LjMwMDc4MSAxNS43NTM5MDYgNi43MDMxMjUgQyAxNS40NTcwMzEgNS4wNDI5NjkgMTQuNzI2NTYyIDMuNjM2NzE5IDEzLjU1MDc4MSAyLjQ1NzAzMSBDIDEyLjM3ODkwNiAxLjI4MTI1IDEwLjk2NDg0NCAwLjU0Njg3NSA5LjMxMjUgMC4yNTM5MDYgQyA4LjgzNTkzOCAwLjE3MTg3NSA3LjU4OTg0NCAwLjEzMjgxMiA3LjEzMjgxMiAwLjE5MTQwNiBaIE0gMTEuNzUzOTA2IDMuNjk1MzEyIEMgMTEuOTE3OTY5IDMuODU1NDY5IDExLjkwMjM0NCAzLjg5MDYyNSAxMS4zMzU5MzggNC41NzQyMTkgQyAxMC4yMzgyODEgNS44OTQ1MzEgOS4xNDQ1MzEgNy44NTkzNzUgOC4yNTc4MTIgMTAuMTEzMjgxIEMgNy45ODQzNzUgMTAuNzkyOTY5IDcuNTAzOTA2IDEyLjIxMDkzOCA3LjQ2MDkzOCAxMi40NDUzMTIgQyA3LjQ0OTIxOSAxMi41MTU2MjUgNy40MjU3ODEgMTIuNTgyMDMxIDcuNDEwMTU2IDEyLjU4OTg0NCBDIDcuMzk0NTMxIDEyLjYwMTU2MiA3LjIwMzEyNSAxMi40NDE0MDYgNi45ODgyODEgMTIuMjM4MjgxIEMgNS42MTcxODggMTAuOTU3MDMxIDQuMzMyMDMxIDkuOTQxNDA2IDMuNjUyMzQ0IDkuNTg1OTM4IEMgMy4zMjAzMTIgOS40MTAxNTYgMy4yMzgyODEgOS4zMjAzMTIgMy4yODEyNSA5LjE3NTc4MSBDIDMuMzE2NDA2IDkuMDQ2ODc1IDMuNDAyMzQ0IDguOTgwNDY5IDMuNTI3MzQ0IDguOTgwNDY5IEMgMy45MDIzNDQgOC45ODA0NjkgNS4xNjc5NjkgOS44ODI4MTIgNi42NzE4NzUgMTEuMjIyNjU2IEMgNi45NTcwMzEgMTEuNDgwNDY5IDcuMTM2NzE5IDExLjYxNzE4OCA3LjE0ODQzOCAxMS41ODk4NDQgQyA3LjE1NjI1IDExLjU2NjQwNiA3LjI0NjA5NCAxMS4zMDg1OTQgNy4zNDM3NSAxMS4wMjM0MzggQyA4LjMwODU5NCA4LjE5MTQwNiA5LjgwNDY4OCA1LjQzNzUgMTEuMjE0ODQ0IDMuODc1IEMgMTEuNDkyMTg4IDMuNTc0MjE5IDExLjYwMTU2MiAzLjUzOTA2MiAxMS43NTM5MDYgMy42OTUzMTIgWiBNIDExLjc1MzkwNiAzLjY5NTMxMiAiLz4KPC9nPgo8L3N2Zz4K)}.coolRoadmap-overallProgress{width:100%;height:50px;background:#1b1e36}.coolRoadmap-overallProgress .coolRoadmap-progressBar{background:#2e3148;height:100%}.coolRoadmap-overallProgress .coolRoadmap-progressContent{float:right;font-size:20px;font-weight:700;margin-top:-40px;margin-right:20px}.coolRoadmap-container{max-width:946.66666667px;overflow-x:auto;margin:0 auto}.coolRoadmap-container.center{max-width:none;width:100%;text-align:center}.coolRoadmap-container.center .coolRoadmap-wrapper{display:flex;flex-flow:row nowrap;justify-content:center}.coolRoadmap-container.center .coolRoadmap-wrapper .coolRoadmap-column{flex:1;display:block;margin-right:0;padding-right:20px;max-width:200}.coolRoadmap-container.center .coolRoadmap-wrapper .coolRoadmap-column:last-child{padding-right:0}.coolRoadmap-container.center .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node{width:auto}.coolRoadmap-container .coolRoadmap-wrapper{position:relative;white-space:nowrap}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column{width:200px;display:inline-block;margin-right:20px;vertical-align:top}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column:last-child{margin-right:0}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node{margin:40px 0;width:200px;height:50px;position:relative;z-index:1;border:2px solid #2e3148;background:#15182d;text-align:center;vertical-align:middle;font-size:12px;font-weight:500;border-radius:5px}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node:hover{border-color:#3f54f3!important;cursor:pointer}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node:hover:after{background:#3f54f3!important}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node:after{position:absolute;width:25px;height:5px;bottom:-2px;right:-2px;background:#2e3148;border-radius:5px 0 5px 0;content:"...";color:#fff;font-size:12px;font-weight:700;padding-top:0;padding-bottom:8px;display:flex;align-items:center;justify-content:center}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node .coolRoadmap-title{margin-top:6px;font-size:10px;font-weight:300;color:#8c8fa6;line-height:18px}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-complete{background:#1b1e36;border-color:#6a4bcc}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-spacer{border:0;height:54px;background:0 0}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-arrow.coolRoadmap-noEnd:before,.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-header:after,.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-spacer:after{display:none}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-header{border-color:#1b1e36;height:80px;position:relative;line-height:52px;border-radius:0}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-header:hover{border-color:#1b1e36!important}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-header .coolRoadmap-progress{width:100%;background-color:#2e3148;position:absolute;bottom:0}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-header .coolRoadmap-progress .coolRoadmap-progressBar{top:0;position:absolute;height:100%;background-color:#242638}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-column .coolRoadmap-node.coolRoadmap-header .coolRoadmap-progress .coolRoadmap-progressContent{position:relative;z-index:2;font-size:12px;line-height:12px;font-weight:700;padding:4px 0}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-arrow{position:absolute;top:-7px;z-index:-1;left:calc(104%);height:3px;background-color:#6a4bcc;transform-origin:left}.coolRoadmap-container .coolRoadmap-wrapper .coolRoadmap-arrow:before{right:-7px;top:2px;position:absolute;transform-origin:right top;content:"";box-sizing:border-box;transform:rotate(45deg);border-width:5px;border-style:solid;border-color:#6a4bcc;border-bottom-color:transparent!important;border-left-color:transparent!important}
--------------------------------------------------------------------------------
/src/CoolRoadmap.less:
--------------------------------------------------------------------------------
1 | @classNamePrefix: coolRoadmap-;
2 | @nodeWidth: 200;
3 | @nodeHeight: 50;
4 | @spacerHeight: @nodeHeight+4;
5 | @columnSpacing: 20;
6 | @progressContentSize: 12;
7 | @progrssContentPadding: 4;
8 |
9 | @inProgressIcon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZwdCIgaGVpZ2h0PSIxNnB0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDojZGRjNDIyO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA3Ljk5MjE4OCAxNS44Mzk4NDQgQyA2LjQzMzU5NCAxNS44Mzk4NDQgNC44NzUgMTUuODM5ODQ0IDMuMzIwMzEyIDE1LjgzNTkzOCBDIDMuMTUyMzQ0IDE1LjgzNTkzOCAyLjk2ODc1IDE1LjgxNjQwNiAyLjgxNjQwNiAxNS43NTM5MDYgQyAyLjUxOTUzMSAxNS42MzI4MTIgMi4zODY3MTkgMTUuMzc4OTA2IDIuNDEwMTU2IDE1LjA2NjQwNiBDIDIuNDM3NSAxNC43MzgyODEgMi42OTkyMTkgMTQuNDUzMTI1IDMuMDA3ODEyIDE0LjQ2MDkzOCBDIDMuMzUxNTYyIDE0LjQ2NDg0NCAzLjQwNjI1IDE0LjMwMDc4MSAzLjM5ODQzOCAxNC4wMTU2MjUgQyAzLjM5MDYyNSAxMy40ODgyODEgMy40MDYyNSAxMi45NjQ4NDQgMy4zOTg0MzggMTIuNDM3NSBDIDMuMzkwNjI1IDExLjg5NDUzMSAzLjYwMTU2MiAxMS40NDE0MDYgMy45NjA5MzggMTEuMDQyOTY5IEMgNC42MzY3MTkgMTAuMjkyOTY5IDUuMzA4NTk0IDkuNTM5MDYyIDUuOTcyNjU2IDguNzg1MTU2IEMgNi40NTMxMjUgOC4yMzA0NjkgNi40NTcwMzEgNy43Njk1MzEgNS45ODA0NjkgNy4yMjY1NjIgQyA1LjMxNjQwNiA2LjQ2ODc1IDQuNjQ4NDM4IDUuNzE0ODQ0IDMuOTcyNjU2IDQuOTY4NzUgQyAzLjYwMTU2MiA0LjU2MjUgMy4zOTA2MjUgNC4xMDE1NjIgMy4zOTg0MzggMy41NDI5NjkgQyAzLjQwMjM0NCAzLjAwNzgxMiAzLjM5MDYyNSAyLjQ2ODc1IDMuMzk4NDM4IDEuOTI5Njg4IEMgMy4zOTg0MzggMS42OTE0MDYgMy4zNTE1NjIgMS41NDY4NzUgMy4wNTQ2ODggMS41NDI5NjkgQyAyLjcwMzEyNSAxLjU0Mjk2OSAyLjQzNzUgMS4yNTc4MTIgMi4zOTg0MzggMC45MTQwNjIgQyAyLjM2NzE4OCAwLjYxMzI4MSAyLjU5Mzc1IDAuMjk2ODc1IDIuOTI5Njg4IDAuMjA3MDMxIEMgMy4wNTg1OTQgMC4xNzE4NzUgMy4xOTkyMTkgMC4xNjAxNTYgMy4zMzU5MzggMC4xNjAxNTYgQyA2LjQ1MzEyNSAwLjE2MDE1NiA5LjU2NjQwNiAwLjE2MDE1NiAxMi42Nzk2ODggMC4xNjAxNTYgQyAxMi43OTI5NjkgMC4xNjAxNTYgMTIuOTEwMTU2IDAuMTY0MDYyIDEzLjAxOTUzMSAwLjE4NzUgQyAxMy4zNzEwOTQgMC4yNzM0MzggMTMuNjI1IDAuNTg1OTM4IDEzLjYwMTU2MiAwLjg5ODQzOCBDIDEzLjU3NDIxOSAxLjI0NjA5NCAxMy4yOTY4NzUgMS41MzEyNSAxMi45MjE4NzUgMS41NDI5NjkgQyAxMi42NzU3ODEgMS41NTA3ODEgMTIuNjAxNTYyIDEuNjU2MjUgMTIuNjAxNTYyIDEuODc4OTA2IEMgMTIuNjA1NDY5IDIuNDE0MDYyIDEyLjU5Mzc1IDIuOTU3MDMxIDEyLjYwNTQ2OSAzLjQ5MjE4OCBDIDEyLjYxNzE4OCA0LjA3NDIxOSAxMi40MDYyNSA0LjU1ODU5NCAxMi4wMTU2MjUgNC45ODA0NjkgQyAxMS4zOTA2MjUgNS42NjQwNjIgMTAuNzkyOTY5IDYuMzc4OTA2IDEwLjE1NjI1IDcuMDUwNzgxIEMgOS41MzUxNTYgNy43MDcwMzEgOS41MjczNDQgOC4yODUxNTYgMTAuMTY3OTY5IDguOTU3MDMxIEMgMTAuODA4NTk0IDkuNjI4OTA2IDExLjQwMjM0NCAxMC4zNDM3NSAxMi4wMjczNDQgMTEuMDI3MzQ0IEMgMTIuMzk4NDM4IDExLjQzMzU5NCAxMi42MDkzNzUgMTEuODk0NTMxIDEyLjYwMTU2MiAxMi40NTMxMjUgQyAxMi41OTc2NTYgMTIuOTkyMTg4IDEyLjYwOTM3NSAxMy41MzEyNSAxMi42MDE1NjIgMTQuMDY2NDA2IEMgMTIuNjAxNTYyIDE0LjMwNDY4OCAxMi42NDg0MzggMTQuNDUzMTI1IDEyLjk0NTMxMiAxNC40NTMxMjUgQyAxMy4yOTY4NzUgMTQuNDUzMTI1IDEzLjU2NjQwNiAxNC43NDIxODggMTMuNjAxNTYyIDE1LjA3ODEyNSBDIDEzLjYzMjgxMiAxNS4zNjMyODEgMTMuNDE0MDYyIDE1LjY4MzU5NCAxMy4xMDE1NjIgMTUuNzc3MzQ0IEMgMTIuOTY0ODQ0IDE1LjgyMDMxMiAxMi44MTI1IDE1LjgzMjAzMSAxMi42NjQwNjIgMTUuODMyMDMxIEMgMTEuMTA1NDY5IDE1LjgzOTg0NCA5LjU0Njg3NSAxNS44Mzk4NDQgNy45OTIxODggMTUuODM5ODQ0IFogTSA3Ljk5MjE4OCAxNC40NDUzMTIgQyA4Ljk1MzEyNSAxNC40NDUzMTIgOS45MTQwNjIgMTQuNDM3NSAxMC44NzUgMTQuNDQ5MjE5IEMgMTEuMTQwNjI1IDE0LjQ1MzEyNSAxMS4yNTM5MDYgMTQuMzcxMDk0IDExLjI0NjA5NCAxNC4wOTc2NTYgQyAxMS4yMzA0NjkgMTMuNTkzNzUgMTEuMjY1NjI1IDEzLjA4OTg0NCAxMS4yMzA0NjkgMTIuNTg1OTM4IEMgMTEuMjE0ODQ0IDEyLjM3NSAxMS4xMjUgMTIuMTMyODEyIDEwLjk4ODI4MSAxMS45NzY1NjIgQyAxMC4zMjgxMjUgMTEuMTk5MjE5IDkuNjQ0NTMxIDEwLjQ0NTMxMiA4Ljk2NDg0NCA5LjY4MzU5NCBDIDguMDU0Njg4IDguNjY0MDYyIDguMDU4NTk0IDcuMzIwMzEyIDguOTc2NTYyIDYuMzAwNzgxIEMgOS42NjAxNTYgNS41NDI5NjkgMTAuMzM5ODQ0IDQuNzg1MTU2IDExIDQuMDExNzE5IEMgMTEuMTMyODEyIDMuODU5Mzc1IDExLjIxODc1IDMuNjI4OTA2IDExLjIzMDQ2OSAzLjQyOTY4OCBDIDExLjI2NTYyNSAyLjkxNDA2MiAxMS4yMzQzNzUgMi4zOTg0MzggMTEuMjQ2MDk0IDEuODgyODEyIEMgMTEuMjUgMS42Mjg5MDYgMTEuMTQwNjI1IDEuNTQ2ODc1IDEwLjg5NDUzMSAxLjU1MDc4MSBDIDguOTcyNjU2IDEuNTU4NTk0IDcuMDQ2ODc1IDEuNTU4NTk0IDUuMTI1IDEuNTQ2ODc1IEMgNC44MjgxMjUgMS41NDY4NzUgNC43NSAxLjY2NDA2MiA0Ljc1MzkwNiAxLjkzNzUgQyA0Ljc2OTUzMSAyLjQwNjI1IDQuNzMwNDY5IDIuODc1IDQuNzY5NTMxIDMuMzQzNzUgQyA0Ljc5Mjk2OSAzLjU4NTkzOCA0Ljg4MjgxMiAzLjg2NzE4OCA1LjAzNTE1NiA0LjA0Njg3NSBDIDUuNjkxNDA2IDQuODI4MTI1IDYuMzgyODEyIDUuNTc4MTI1IDcuMDU4NTk0IDYuMzM5ODQ0IEMgNy45MTc5NjkgNy4zMTI1IDcuOTM3NSA4LjY2NDA2MiA3LjA4OTg0NCA5LjYyMTA5NCBDIDYuNDk2MDk0IDEwLjI5Njg3NSA1LjkwMjM0NCAxMC45ODQzNzUgNS4yNzczNDQgMTEuNjM2NzE5IEMgNC44OTQ1MzEgMTIuMDM1MTU2IDQuNjgzNTk0IDEyLjQ1MzEyNSA0Ljc1MzkwNiAxMy4wMTU2MjUgQyA0Ljc4OTA2MiAxMy4zMDg1OTQgNC43NjE3MTkgMTMuNjA5Mzc1IDQuNzYxNzE5IDEzLjkwNjI1IEMgNC43NjE3MTkgMTQuNDQxNDA2IDQuNzYxNzE5IDE0LjQ0MTQwNiA1LjI4MTI1IDE0LjQ0MTQwNiBDIDYuMTgzNTk0IDE0LjQ0NTMxMiA3LjA4NTkzOCAxNC40NDUzMTIgNy45OTIxODggMTQuNDQ1MzEyIFogTSA3Ljk5MjE4OCAxNC40NDUzMTIgIi8+CjwvZz4KPC9zdmc+Cg==';
10 | @completedIcon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZwdCIgaGVpZ2h0PSIxNnB0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDojNGFjZjRhO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA3LjEzMjgxMiAwLjE5MTQwNiBDIDQuODY3MTg4IDAuNDY4NzUgMi44OTQ1MzEgMS42MzY3MTkgMS41OTM3NSAzLjQ2ODc1IEMgMC41ODU5MzggNC44ODY3MTkgMC4xMDkzNzUgNi40ODQzNzUgMC4xNjQwNjIgOC4yNjE3MTkgQyAwLjIyNjU2MiAxMC4yOTI5NjkgMS4wMTE3MTkgMTIuMTA5Mzc1IDIuNDU3MDMxIDEzLjU1MDc4MSBDIDMuNjM2NzE5IDE0LjcyNjU2MiA1LjA0Mjk2OSAxNS40NjA5MzggNi43MDMxMjUgMTUuNzUzOTA2IEMgNy4wODIwMzEgMTUuODIwMzEyIDcuMjY5NTMxIDE1LjgzMjAzMSA3Ljk4NDM3NSAxNS44MzU5MzggQyA4Ljg5ODQzOCAxNS44MzU5MzggOS4yMTA5MzggMTUuODAwNzgxIDkuOTY4NzUgMTUuNjA5Mzc1IEMgMTEuNDEwMTU2IDE1LjI0NjA5NCAxMi44NTkzNzUgMTQuMzYzMjgxIDEzLjgzMjAzMSAxMy4yNjU2MjUgQyAxNC44ODY3MTkgMTIuMDcwMzEyIDE1LjUwNzgxMiAxMC43NjU2MjUgMTUuNzczNDM4IDkuMTk1MzEyIEMgMTUuODcxMDk0IDguNjEzMjgxIDE1Ljg1OTM3NSA3LjMwMDc4MSAxNS43NTM5MDYgNi43MDMxMjUgQyAxNS40NTcwMzEgNS4wNDI5NjkgMTQuNzI2NTYyIDMuNjM2NzE5IDEzLjU1MDc4MSAyLjQ1NzAzMSBDIDEyLjM3ODkwNiAxLjI4MTI1IDEwLjk2NDg0NCAwLjU0Njg3NSA5LjMxMjUgMC4yNTM5MDYgQyA4LjgzNTkzOCAwLjE3MTg3NSA3LjU4OTg0NCAwLjEzMjgxMiA3LjEzMjgxMiAwLjE5MTQwNiBaIE0gMTEuNzUzOTA2IDMuNjk1MzEyIEMgMTEuOTE3OTY5IDMuODU1NDY5IDExLjkwMjM0NCAzLjg5MDYyNSAxMS4zMzU5MzggNC41NzQyMTkgQyAxMC4yMzgyODEgNS44OTQ1MzEgOS4xNDQ1MzEgNy44NTkzNzUgOC4yNTc4MTIgMTAuMTEzMjgxIEMgNy45ODQzNzUgMTAuNzkyOTY5IDcuNTAzOTA2IDEyLjIxMDkzOCA3LjQ2MDkzOCAxMi40NDUzMTIgQyA3LjQ0OTIxOSAxMi41MTU2MjUgNy40MjU3ODEgMTIuNTgyMDMxIDcuNDEwMTU2IDEyLjU4OTg0NCBDIDcuMzk0NTMxIDEyLjYwMTU2MiA3LjIwMzEyNSAxMi40NDE0MDYgNi45ODgyODEgMTIuMjM4MjgxIEMgNS42MTcxODggMTAuOTU3MDMxIDQuMzMyMDMxIDkuOTQxNDA2IDMuNjUyMzQ0IDkuNTg1OTM4IEMgMy4zMjAzMTIgOS40MTAxNTYgMy4yMzgyODEgOS4zMjAzMTIgMy4yODEyNSA5LjE3NTc4MSBDIDMuMzE2NDA2IDkuMDQ2ODc1IDMuNDAyMzQ0IDguOTgwNDY5IDMuNTI3MzQ0IDguOTgwNDY5IEMgMy45MDIzNDQgOC45ODA0NjkgNS4xNjc5NjkgOS44ODI4MTIgNi42NzE4NzUgMTEuMjIyNjU2IEMgNi45NTcwMzEgMTEuNDgwNDY5IDcuMTM2NzE5IDExLjYxNzE4OCA3LjE0ODQzOCAxMS41ODk4NDQgQyA3LjE1NjI1IDExLjU2NjQwNiA3LjI0NjA5NCAxMS4zMDg1OTQgNy4zNDM3NSAxMS4wMjM0MzggQyA4LjMwODU5NCA4LjE5MTQwNiA5LjgwNDY4OCA1LjQzNzUgMTEuMjE0ODQ0IDMuODc1IEMgMTEuNDkyMTg4IDMuNTc0MjE5IDExLjYwMTU2MiAzLjUzOTA2MiAxMS43NTM5MDYgMy42OTUzMTIgWiBNIDExLjc1MzkwNiAzLjY5NTMxMiAiLz4KPC9nPgo8L3N2Zz4K';
11 |
12 | .@{classNamePrefix}lightbox {
13 | position: fixed;
14 | top: 0;
15 | left: 0;
16 | width: 100%;
17 | height: 100%;
18 | background-color: rgba(0, 0, 0, 0.5);
19 | z-index: 100000;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 |
24 | .@{classNamePrefix}modal {
25 | position: relative;
26 | width: 100%;
27 | max-width: 420px;
28 | padding: 25px;
29 | border: 2px solid #7180f3;
30 | background: #1b1e36;
31 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
32 | border-radius: 5px;
33 | color: #d4d5de;
34 | font-weight: 300;
35 |
36 | &:before {
37 | width: 64px;
38 | height: 64px;
39 | content: 'X';
40 | position: absolute;
41 | top: 0;
42 | right: 0;
43 | cursor: pointer;
44 | color: #6f7ff6;
45 | justify-content: center;
46 | align-items: center;
47 | display: flex;
48 | font-weight: bold;
49 | }
50 |
51 | .@{classNamePrefix}title {
52 | font-size: 20px;
53 | margin-bottom: 16px;
54 | color: #fff;
55 | font-weight: 500;
56 |
57 | .@{classNamePrefix}version {
58 | color: #8c8fa6;
59 | font-weight: 300;
60 | margin-left: 7px;
61 | }
62 | }
63 |
64 | .@{classNamePrefix}footer {
65 | margin-top: 20px;
66 |
67 | .@{classNamePrefix}detailsButton {
68 | float: right;
69 | text-align: center;
70 | background: #15182d;
71 | border: 2px solid #2e3148;
72 | padding: 5px 12px;
73 | border-radius: 5px;
74 | font-size: 16px;
75 | font-weight: 400;
76 | cursor: pointer;
77 | }
78 |
79 | .@{classNamePrefix}status {
80 | float: left;
81 | text-align: center;
82 | padding-left: 20px;
83 | color: #8c8fa6;
84 | font-weight: 300;
85 | margin-top: 7px;
86 | min-height: 15px;
87 |
88 | &:before{
89 | position: absolute;
90 | content: "";
91 | background-size: contain;
92 | width: 15px;
93 | height: 15px;
94 | background-size: contain;
95 | margin-top: 4px;
96 | margin-left: -22px;
97 | }
98 |
99 | &.@{classNamePrefix}inProgress:before{
100 | background-image: url(@inProgressIcon);
101 | }
102 |
103 | &.@{classNamePrefix}complete:before{
104 | background-image: url(@completedIcon);
105 | }
106 | }
107 | }
108 | }
109 | }
110 |
111 | .@{classNamePrefix}overallProgress {
112 | width: 100%;
113 | height: 50px;
114 | background: #1b1e36;
115 |
116 | .@{classNamePrefix}progressBar {
117 | background: #2e3148;
118 | height: 100%;
119 | }
120 |
121 | .@{classNamePrefix}progressContent {
122 | float: right;
123 | font-size: 20px;
124 | font-weight: bold;
125 | margin-top: -40px;
126 | margin-right: 20px;
127 | }
128 | }
129 |
130 | .@{classNamePrefix}container {
131 | max-width: (@nodeWidth*4) + (@columnSpacing*4) + (@nodeWidth/3) + 0px;
132 | overflow-x: auto;
133 | margin: 0 auto;
134 |
135 | &.center {
136 | max-width: none;
137 | width: 100%;
138 | text-align: center;
139 |
140 | .@{classNamePrefix}wrapper {
141 | display: flex;
142 | flex-flow: row nowrap;
143 | justify-content: center;
144 |
145 | .@{classNamePrefix}column {
146 | flex: 1;
147 | display: block;
148 | margin-right: 0;
149 | padding-right: ~'@{columnSpacing}px';
150 | max-width: @nodeWidth;
151 |
152 | &:last-child {
153 | padding-right: 0;
154 | }
155 |
156 | .@{classNamePrefix}node {
157 | width: auto;
158 | }
159 | }
160 | }
161 | }
162 |
163 | .@{classNamePrefix}wrapper {
164 | position: relative;
165 | white-space: nowrap;
166 |
167 | .@{classNamePrefix}column {
168 | width: ~'@{nodeWidth}px';
169 | display: inline-block;
170 | margin-right: ~'@{columnSpacing}px';
171 | vertical-align: top;
172 |
173 | &:last-child {
174 | margin-right: 0;
175 | }
176 |
177 | .@{classNamePrefix}node {
178 | margin: 40px 0;
179 | width: ~'@{nodeWidth}px';
180 | height: ~'@{nodeHeight}px';
181 | position: relative;
182 | z-index: 1;
183 | border: 2px solid #2e3148;
184 | background: #15182d;
185 | text-align: center;
186 | vertical-align: middle;
187 | font-size: 12px;
188 | font-weight: 500;
189 | border-radius: 5px;
190 |
191 | &:hover {
192 | border-color: #3f54f3 !important;
193 | cursor: pointer;
194 |
195 | &:after {
196 | background: #3f54f3 !important;
197 | }
198 | }
199 |
200 | &:after {
201 | position: absolute;
202 | width: 25px;
203 | height: 5px;
204 | bottom: -2px;
205 | right: -2px;
206 | background: #2e3148;
207 | border-radius: 5px 0 5px 0;
208 | content: "...";
209 | color: #fff;
210 | font-size: 12px;
211 | font-weight: bold;
212 | padding-top: 0px;
213 | padding-bottom: 8px;
214 | display: flex;
215 | align-items: center;
216 | justify-content: center;
217 | }
218 |
219 | .@{classNamePrefix}title {
220 | margin-top: 6px;
221 | font-size: 10px;
222 | font-weight: 300;
223 | color: #8c8fa6;
224 | line-height: 18px;
225 | }
226 |
227 | &.@{classNamePrefix}complete {
228 | background: #1b1e36;
229 | border-color: #6a4bcc;
230 | }
231 |
232 | &.@{classNamePrefix}spacer {
233 | border: none;
234 | height: ~'@{spacerHeight}px';
235 | background: transparent;
236 |
237 | &:after {
238 | display: none;
239 | }
240 | }
241 |
242 | &.@{classNamePrefix}header {
243 | border-color: #1b1e36;
244 | height: 80px;
245 | position: relative;
246 | line-height: 80 - (@progressContentSize + (@progrssContentPadding * 4)) + 0px;
247 | border-radius: 0;
248 |
249 | &:after {
250 | display: none;
251 | }
252 |
253 | &:hover {
254 | border-color: #1b1e36 !important;
255 | }
256 |
257 | .@{classNamePrefix}progress {
258 | width: 100%;
259 | background-color: #2e3148;
260 | position: absolute;
261 | bottom: 0;
262 |
263 | .@{classNamePrefix}progressBar {
264 | top: 0;
265 | position: absolute;
266 | height: 100%;
267 | background-color: #242638;
268 | }
269 |
270 | .@{classNamePrefix}progressContent {
271 | position: relative;
272 | z-index: 2;
273 | font-size: ~'@{progressContentSize}px';
274 | line-height: ~'@{progressContentSize}px';
275 | font-weight: bold;
276 | padding: ~'@{progrssContentPadding}px 0';
277 | }
278 | }
279 | }
280 | }
281 | }
282 |
283 | .@{classNamePrefix}arrow {
284 | position: absolute;
285 | z-index: -1;
286 | top: -7px;
287 | z-index: -1;
288 | left: calc(100% + 4px);
289 | height: 3px;
290 | background-color: #6a4bcc;
291 | transform-origin: left;
292 |
293 | &:before{
294 | right: -7px;
295 | top: 2px;
296 | position: absolute;
297 | transform-origin: right top;
298 | content: "";
299 | box-sizing: border-box;
300 | transform: rotate(45deg);
301 | border-width: 5px;
302 | border-style: solid;
303 | border-color: #6a4bcc;
304 | border-bottom-color: transparent !important;
305 | border-left-color: transparent !important;
306 | }
307 |
308 | &.@{classNamePrefix}noEnd {
309 | &:before {
310 | display: none;
311 | }
312 | }
313 | }
314 | }
315 | }
--------------------------------------------------------------------------------
/dist/CoolRoadmap.min.js:
--------------------------------------------------------------------------------
1 | function roadmap(wrapperDivID) {
2 | var roadmap = {
3 | classNamePrefix: 'coolRoadmap-',
4 | wrapperDivID: wrapperDivID,
5 | wrapperElement: document.getElementById(wrapperDivID),
6 | data: [],
7 | nodeWidth: -1,
8 | nodeHeight: -1,
9 | columnSpacing: -1,
10 | nodeSpacing: -1,
11 | columnColors: [],
12 | defaultMilestoneDifficulty: 10,
13 | milestoneCompleteData: [],
14 | userData: {
15 | columnNames: [],
16 | milestones: []
17 | }
18 | }
19 |
20 | function _processUserData() {
21 | roadmap.data = [];
22 |
23 | _processColumns();
24 | _processMilestones();
25 | }
26 |
27 | function columns(columnNames) {
28 | roadmap.userData.columnNames = columnNames;
29 |
30 | _processUserData();
31 | _build();
32 | }
33 |
34 | function milestones(milestones) {
35 | roadmap.userData.milestones = milestones;
36 |
37 | _processUserData();
38 | _build();
39 | }
40 |
41 | function _processColumns() {
42 | roadmap.userData.columnNames.forEach(function(columnName) {
43 | roadmap.data.push({
44 | name: columnName,
45 | progressComplete: 0,
46 | totalDifficulty: 0,
47 | milestones: []
48 | })
49 | })
50 | }
51 |
52 | function _processMilestones() {
53 | var milestones = roadmap.userData.milestones;
54 | var milestoneRankMax = 0;
55 | var milestoneRankMin = 99999999;
56 |
57 | roadmap.data.forEach(function(column, idx) {
58 | roadmap.data[idx].milestones = [];
59 | })
60 |
61 | milestones.forEach(function(milestone, idx) {
62 | if (!milestone.belongsToColumn) {
63 | milestone.belongsToColumn = 1;
64 | }
65 |
66 | var columnIdx = milestone.belongsToColumn - 1;
67 |
68 | if (!roadmap.data[columnIdx]) {
69 | if (roadmap.userData.columnNames.length > 0) {
70 | console.log(milestone);
71 | console.warn('Milestone has invaid belongsToColumn');
72 | }
73 |
74 | return;
75 | }
76 |
77 | if (!milestone.rank) {
78 | milestone.rank = roadmap.data[columnIdx].milestones.length;
79 | }
80 |
81 | milestone.rank = parseFloat(milestone.rank);
82 |
83 | if (milestone.rank < 0) {
84 | console.log(milestone);
85 | throw new Error('Milestone has invaid rank - Ranks must be non-negative numbers');
86 | }
87 |
88 | if (milestone.rank % 1 !== 0) {
89 | console.log(milestone);
90 | throw new Error('Milestone has invaid rank - Ranks must be whole numbers');
91 | }
92 |
93 | milestone.rank = parseInt(milestone.rank);
94 |
95 | if (roadmap.data[columnIdx].milestones[milestone.rank]) {
96 | console.log(milestone);
97 | throw new Error('Milestone has invaid rank - A milestone with that rank is already defined');
98 | }
99 |
100 | if (!milestone.difficulty) {
101 | milestone.difficulty = roadmap.defaultMilestoneDifficulty;
102 | }
103 |
104 | milestone.difficulty = parseInt(milestone.difficulty);
105 |
106 | roadmap.data[columnIdx].milestones[milestone.rank] = milestone;
107 |
108 | roadmap.data[columnIdx].totalDifficulty += milestone.difficulty;
109 |
110 | if (milestone.rank > milestoneRankMax) {
111 | milestoneRankMax = milestone.rank;
112 | }
113 |
114 | if (milestone.rank < milestoneRankMin) {
115 | milestoneRankMin = milestone.rank;
116 | }
117 | })
118 |
119 | roadmap.data.forEach(function(column, columnIdx) {
120 | var count = milestoneRankMin;
121 |
122 | if (column.milestones.length > 0 && column.milestones[column.milestones.length - 1].rank !== milestoneRankMax) {
123 | var replacingRank = column.milestones.length - 1;
124 |
125 | roadmap.data[columnIdx].milestones[milestoneRankMax] = column.milestones[replacingRank];
126 | roadmap.data[columnIdx].milestones[milestoneRankMax].rank = milestoneRankMax;
127 | roadmap.data[columnIdx].milestones[replacingRank] = null;
128 | }
129 |
130 | while (count <= milestoneRankMax && count >= milestoneRankMin) {
131 | if (!column.milestones[count]) {
132 | roadmap.data[columnIdx].milestones[count] = {
133 | spacer: true,
134 | belongsToColumn: columnIdx + 1,
135 | rank: count
136 | }
137 | }
138 |
139 | var nextBelow = getNextBelowMilestone(columnIdx, count);
140 | if (!roadmap.data[columnIdx].milestones[count].status ||
141 | (nextBelow && nextBelow.status === 'pending')
142 | ) {
143 | roadmap.data[columnIdx].milestones[count].status = 'pending';
144 | }
145 |
146 | count++;
147 | }
148 |
149 | count = milestoneRankMax;
150 | while (count >= milestoneRankMin) {
151 | if (!roadmap.data[columnIdx].milestones[count].spacer) {
152 | var nextAbove = null;
153 | var innerCount = count + 0;
154 |
155 | while (nextAbove === null) {
156 | innerCount++;
157 |
158 | if (!roadmap.data[columnIdx].milestones[innerCount]) {
159 | nextAbove = false;
160 | } else if (!roadmap.data[columnIdx].milestones[innerCount].spacer) {
161 | nextAbove = innerCount;
162 | }
163 | }
164 |
165 | if (roadmap.data[columnIdx].milestones[count].forwardConnect && typeof roadmap.data[columnIdx].milestones[count].forwardConnect[0] !== "object") {
166 | roadmap.data[columnIdx].milestones[count].forwardConnect = [
167 | [
168 | roadmap.data[columnIdx].milestones[count].forwardConnect[0],
169 | roadmap.data[columnIdx].milestones[count].forwardConnect[1]
170 | ]
171 | ];
172 | } else if (!roadmap.data[columnIdx].milestones[count].forwardConnect) {
173 | roadmap.data[columnIdx].milestones[count].forwardConnect = [];
174 | }
175 |
176 | if (nextAbove && !hasNextAboveForwardConnect(roadmap.data[columnIdx].milestones[count].forwardConnect)) {
177 | roadmap.data[columnIdx].milestones[count].forwardConnect.push([
178 | columnIdx + 1, nextAbove
179 | ])
180 | }
181 |
182 | function hasNextAboveForwardConnect(forwardConnect) {
183 | var hasIt = false;
184 |
185 | roadmap.data[columnIdx].milestones[count].forwardConnect.forEach(function(innerForwardConnect) {
186 | if (innerForwardConnect[0] === columnIdx + 1 && innerForwardConnect[1] === nextAbove) {
187 | hasIt = true;
188 | }
189 | })
190 |
191 | return hasIt;
192 | }
193 | }
194 |
195 | count--;
196 | }
197 |
198 | roadmap.data[columnIdx].milestoneVersions = versionThis(roadmap.data[columnIdx].milestones, '2 decimals', 1);
199 | })
200 | }
201 |
202 | function style(columnColors) {
203 | roadmap.columnColors = columnColors;
204 |
205 | _build();
206 | }
207 |
208 | function markComplete(milestoneCompleteData) {
209 | roadmap.milestoneCompleteData = milestoneCompleteData;
210 |
211 | _build();
212 | }
213 |
214 | window.onresize = function() {
215 | if (roadmap.data.length <= 5) {
216 | roadmap.nodeWidth = -1;
217 | roadmap.nodeHeight = -1;
218 | roadmap.columnSpacing = -1;
219 | roadmap.nodeSpacing = -1;
220 |
221 | _build();
222 | }
223 | }
224 |
225 | function _build() {
226 | var columnCount = 0;
227 |
228 | // Empty the wrapper element
229 | roadmap.wrapperElement.innerHTML = '';
230 |
231 | // Create our container
232 | var container = document.createElement('div');
233 | container.classList = roadmap.classNamePrefix + 'container';
234 |
235 | var overallProgress = document.createElement('div');
236 | var overallProgressInner = document.createElement('div');
237 | var overallProgressContent = document.createElement('div');
238 | overallProgressInner.classList = roadmap.classNamePrefix + 'progressBar';
239 | overallProgress.classList = roadmap.classNamePrefix + 'overallProgress';
240 | overallProgressContent.classList = roadmap.classNamePrefix + 'progressContent';
241 |
242 | if (roadmap.data.length <= 5) {
243 | container.classList += ' center';
244 | }
245 |
246 | // Create our wrapper
247 | var wrapper = document.createElement('div');
248 | wrapper.classList = roadmap.classNamePrefix + 'wrapper';
249 |
250 | // build and add the columns and milestone nodes
251 | roadmap.data.forEach(function(columnData, idx) {
252 | columnCount++;
253 | var columnElem = buildColumn(columnData, idx);
254 |
255 | var milstoneRanks = Object.keys(columnData.milestones).sort(function(a, b) {return a - b;}).reverse();
256 | var milestoneCount = 0;
257 | milstoneRanks.forEach(function(rank) {
258 | var milestone = columnData.milestones[rank];
259 | if (roadmap.nodeWidth === -1) {
260 | // Dynamically get the width, height, and spacing of a node in a column
261 | var fakeMilestoneElem = buildMilestone(milestone, idx, milestoneCount);
262 | var fakeColumn = columnElem.cloneNode(true);
263 | fakeColumn.appendChild(fakeMilestoneElem);
264 |
265 | var count = 1;
266 | while (count <= roadmap.data.length) {
267 | wrapper.appendChild(fakeColumn.cloneNode(true));
268 | count++;
269 | }
270 |
271 | container.appendChild(wrapper);
272 | container.style.visibility = 'hidden';
273 | roadmap.wrapperElement.appendChild(container);
274 |
275 | var milestoneComputedStyle = getComputedStyle(
276 | document.getElementsByClassName(roadmap.classNamePrefix + 'milestone')[0]
277 | );
278 | var columnComputedStyle = getComputedStyle(
279 | document.getElementsByClassName(roadmap.classNamePrefix + 'column')[0]
280 | );
281 |
282 | roadmap.nodeWidth = document.getElementsByClassName('coolRoadmap-milestone')[0].offsetWidth + 4;
283 | roadmap.nodeHeight = parseInt(milestoneComputedStyle.getPropertyValue('height').replace('px', '')) + 4;
284 | roadmap.nodeSpacing = parseInt(milestoneComputedStyle.getPropertyValue('margin-bottom').replace('px', ''));
285 | roadmap.columnSpacing = parseInt(columnComputedStyle.getPropertyValue('padding-right').replace('px', ''));
286 |
287 | wrapper.innerHTML = '';
288 | container.innerHTML = '';
289 | container.style.visibility = 'visible';
290 | roadmap.wrapperElement.innerHTML = '';
291 | }
292 |
293 | var milestoneElem = buildMilestone(milestone, idx, milestoneCount);
294 | columnElem.appendChild(milestoneElem);
295 | milestoneCount++;
296 | })
297 |
298 | wrapper.appendChild(columnElem);
299 | })
300 |
301 | var totalPercent = 0;
302 |
303 | roadmap.data.forEach(function(columnData) {
304 | totalPercent += parseInt(columnData.progressComplete);
305 | })
306 |
307 | totalPercent /= roadmap.data.length;
308 |
309 | overallProgressInner.style.width = totalPercent + '%';
310 | overallProgressContent.innerText = totalPercent + '% Complete';
311 | overallProgress.appendChild(overallProgressInner);
312 | overallProgress.appendChild(overallProgressContent);
313 |
314 | // Add the overall progress to the parent
315 | roadmap.wrapperElement.appendChild(overallProgress);
316 |
317 | // Add the wrapper to the container
318 | container.appendChild(wrapper);
319 |
320 | // Add the container to the parent
321 | roadmap.wrapperElement.appendChild(container);
322 |
323 |
324 |
325 | function buildColumn(columnData, columnIdx) {
326 | var totalComplete = 0;
327 | var completedMilestones = [];
328 |
329 | if (roadmap.milestoneCompleteData[columnIdx]) {
330 | roadmap.milestoneCompleteData[columnIdx].sort().forEach(function(milestoneNum) {
331 | if (getNextBelowMilestone(columnIdx, milestoneNum).status !== 'pending' && roadmap.data[columnIdx].milestones[milestoneNum] && !roadmap.data[columnIdx].milestones[milestoneNum].spacer) {
332 | roadmap.data[columnIdx].milestones[milestoneNum].status = 'complete';
333 | totalComplete += columnData.milestones[milestoneNum].difficulty;
334 | completedMilestones.push(milestoneNum);
335 | }
336 | });
337 | }
338 |
339 | columnData.milestones.forEach(function(milestone, idx) {
340 | if (!milestone.spacer && milestone.status === 'complete' && completedMilestones.indexOf(idx) === -1) {
341 | totalComplete += milestone.difficulty;
342 | completedMilestones.push(idx);
343 | }
344 | })
345 |
346 | roadmap.data[columnIdx].progressComplete = ((totalComplete / columnData.totalDifficulty) * 100).toFixed(0);
347 |
348 | if (isNaN(roadmap.data[columnIdx].progressComplete)) {
349 | roadmap.data[columnIdx].progressComplete = 100;
350 | }
351 |
352 | var column = document.createElement('div');
353 | column.classList = roadmap.classNamePrefix + 'column';
354 |
355 | var header = document.createElement('div');
356 | var headerProgressBar = document.createElement('div');
357 | var headerProgressBarInner = document.createElement('div');
358 | var headerProgressBarContent = document.createElement('div');
359 |
360 | headerProgressBarInner.style.width = columnData.progressComplete + '%';
361 | headerProgressBarInner.classList = roadmap.classNamePrefix + 'progressBar';
362 | if (roadmap.columnColors[columnIdx]) {
363 | headerProgressBarInner.style.backgroundColor = roadmap.columnColors[columnIdx];
364 | }
365 |
366 | headerProgressBar.classList = roadmap.classNamePrefix + 'progress';
367 |
368 | headerProgressBarContent.innerText = columnData.progressComplete + '% Complete';
369 | headerProgressBarContent.classList = roadmap.classNamePrefix + 'progressContent';
370 |
371 | headerProgressBar.appendChild(headerProgressBarInner);
372 | headerProgressBar.appendChild(headerProgressBarContent);
373 |
374 | header.innerText = columnData.name;
375 | header.onclick = lightbox.bind(this, columnData, null, true);
376 | header.appendChild(headerProgressBar);
377 | header.classList = roadmap.classNamePrefix + 'node ' + roadmap.classNamePrefix + 'header';
378 |
379 | column.appendChild(header);
380 |
381 | return column;
382 | }
383 |
384 | function buildMilestone(milestone, columnIdx, milestoneCount) {
385 | var milstoneElem = document.createElement('div');
386 |
387 | if (milestone.title) {
388 | var title = document.createElement('div');
389 | var version = document.createElement('div');
390 |
391 | title.innerText = milestone.title;
392 | title.classList += roadmap.classNamePrefix + 'title';
393 | version.innerText = roadmap.data[columnIdx].milestoneVersions[milestoneCount];
394 |
395 | milstoneElem.appendChild(title);
396 | milstoneElem.appendChild(version);
397 | }
398 |
399 | milstoneElem.onclick = lightbox.bind(this, milestone, columnIdx, false);
400 | milstoneElem.classList = roadmap.classNamePrefix + 'node ' + roadmap.classNamePrefix + 'milestone';
401 | milstoneElem.style.zIndex = milestone.rank;
402 |
403 | if (milestone.spacer) {
404 | milstoneElem.classList += ' ' + roadmap.classNamePrefix + 'spacer'
405 | }
406 |
407 | if (milestone.status === 'complete') {
408 | if (roadmap.columnColors[columnIdx]) {
409 | milstoneElem.style.borderColor = roadmap.columnColors[columnIdx];
410 | pseudoStyle(milstoneElem, 'after', 'background', roadmap.columnColors[columnIdx]);
411 | }
412 |
413 | milstoneElem.classList += ' ' + roadmap.classNamePrefix + 'complete';
414 | }
415 |
416 | if (milestone.forwardConnect) {
417 | milestone.forwardConnect.forEach(function(forwardConnect) {
418 | var startColor = '#2e3148';
419 | var endColor = '#2e3148';
420 | var arrowElem = document.createElement('div');
421 |
422 | arrowElem.classList = roadmap.classNamePrefix + 'arrow';
423 |
424 | var heightDiffIdx = milestone.rank - forwardConnect[1];
425 | var widthDiffIdx = forwardConnect[0] - milestone.belongsToColumn;
426 |
427 | var heightDiff = heightDiffIdx * (roadmap.nodeHeight + roadmap.nodeSpacing);
428 | var widthDiff = widthDiffIdx * (roadmap.nodeWidth + roadmap.columnSpacing);
429 | var isNoEnd = true;
430 |
431 | var paddingAndArrow = 12 + (4 * Math.abs(heightDiffIdx));
432 |
433 | if (milestone.status === 'complete') {
434 | startColor = roadmap.columnColors[columnIdx];
435 | endColor = roadmap.columnColors[columnIdx + widthDiffIdx];
436 | }
437 |
438 | if (widthDiffIdx === 0 && heightDiffIdx < 0) {
439 | // Arrow is pointing N
440 | arrowElem.style.left = '50%';
441 | heightDiff += roadmap.nodeHeight + paddingAndArrow;
442 | isNoEnd = false;
443 | } else if (widthDiffIdx > 0 && heightDiffIdx < 0) {
444 | // Arrow is poining NE
445 | widthDiff -= ((roadmap.nodeWidth / 4) * 3);
446 | heightDiff += roadmap.nodeHeight + (2 * Math.abs(heightDiffIdx));
447 | } else if (widthDiffIdx > 0 && heightDiffIdx === 0) {
448 | // Arrow is pointing E
449 | arrowElem.style.top = '50%'
450 | widthDiff -= roadmap.nodeWidth + (14 * Math.abs(widthDiffIdx));
451 | } else if (widthDiffIdx > 0 && heightDiffIdx > 0) {
452 | // Arrow is pointing SE
453 | arrowElem.style.top = '100%'
454 | widthDiff -= ((roadmap.nodeWidth / 4) * 3);
455 | heightDiff -= roadmap.nodeHeight + (2 * Math.abs(heightDiffIdx));
456 | } else if (widthDiffIdx === 0 && heightDiffIdx > 0) {
457 | // Arrow is pointing S
458 | arrowElem.style.left = '50%';
459 | arrowElem.style.top = roadmap.nodeHeight + 5;
460 | heightDiff -= roadmap.nodeHeight + paddingAndArrow;
461 | isNoEnd = false;
462 | } else if (widthDiffIdx < 0 && heightDiffIdx > 0) {
463 | // Arrow is pointing SW
464 | arrowElem.style.left = '-3px';
465 | arrowElem.style.top = '100%'
466 | widthDiff += ((roadmap.nodeWidth / 4) * 3);
467 | heightDiff -= roadmap.nodeHeight + (2 * Math.abs(heightDiffIdx));
468 | } else if (widthDiffIdx < 0 && heightDiffIdx === 0) {
469 | // Arrow is pointing W
470 | arrowElem.style.left = '-3px';
471 | arrowElem.style.top = '50%'
472 | widthDiff += roadmap.nodeWidth + (8 * Math.abs(heightDiffIdx));
473 | } else if (widthDiffIdx < 0 && heightDiffIdx < 0) {
474 | // Arrow is pointing NW
475 | arrowElem.style.left = '25%';
476 | widthDiff += ((roadmap.nodeWidth / 4) * 2);
477 | heightDiff += roadmap.nodeHeight + 10;
478 | }
479 |
480 | // Determine the degrees that the other node is from this node
481 | var transformDegrees = Math.atan2(heightDiff, widthDiff) * 180 / Math.PI;
482 | // Determine the distance from the other node
483 | var distance = Math.hypot(heightDiff, widthDiff);
484 |
485 | if (isNoEnd) {
486 | arrowElem.classList += ' ' + roadmap.classNamePrefix + 'noEnd';
487 | }
488 |
489 | arrowElem.style.transform = "rotate(" + transformDegrees + "deg)";
490 | arrowElem.style.width = distance;
491 | if (startColor) {
492 | arrowElem.style.backgroundImage = 'linear-gradient(to right, ' + startColor + ', ' + endColor + ')';
493 | pseudoStyle(arrowElem, 'before', 'border-color', endColor);
494 | }
495 |
496 | milstoneElem.appendChild(arrowElem);
497 | });
498 | }
499 |
500 | return milstoneElem;
501 | }
502 | }
503 |
504 | function lightbox(milestone, columnIdx, isColumn) {
505 | var lightboxElement = document.createElement('div');
506 | var modalElement = document.createElement('div');
507 | var titleElement = document.createElement('div');
508 | var versionElement = document.createElement('span');
509 | var statusElement = document.createElement('div');
510 | var footerElement = document.createElement('div');
511 |
512 | lightboxElement.classList = roadmap.classNamePrefix + 'lightbox';
513 | modalElement.classList = roadmap.classNamePrefix + 'modal';
514 | titleElement.classList = roadmap.classNamePrefix + 'title';
515 | versionElement.classList = roadmap.classNamePrefix + 'version';
516 | statusElement.classList = roadmap.classNamePrefix + 'status';
517 | footerElement.classList = roadmap.classNamePrefix + 'footer';
518 |
519 | if (!isColumn) {
520 | titleElement.innerText = milestone.title;
521 | } else {
522 | titleElement.innerText = milestone.name;
523 | }
524 |
525 | if (!isColumn) {
526 | versionElement.innerText = roadmap.data[columnIdx].milestoneVersions[milestone.rank];
527 | titleElement.appendChild(versionElement);
528 | }
529 |
530 | modalElement.appendChild(titleElement);
531 |
532 | if (!isColumn) {
533 | if (milestone.status !== 'pending' && (!milestone.descriptionHTML || milestone.descriptionHTML === '')) {
534 | modalElement.innerHTML += 'To Be Announced';
535 | } else {
536 | modalElement.innerHTML += milestone.descriptionHTML;
537 | }
538 | } else {
539 | modalElement.innerHTML += 'Final version of ' + milestone.name + ' before we launch. Features are frozen';
540 | }
541 |
542 | statusElement.classList += ' ' + roadmap.classNamePrefix + 'inProgress';
543 | statusElement.innerText = 'In Progress';
544 |
545 | if (!isColumn && milestone.status === 'complete') {
546 | statusElement.classList += ' ' + roadmap.classNamePrefix + 'complete';
547 |
548 | if (milestone.released) {
549 | statusElement.innerText = 'Released ' + milestone.released;
550 | } else {
551 | statusElement.innerText = '';
552 | }
553 | } else if (isColumn && milestone.progressComplete === '100') {
554 | statusElement.classList += ' ' + roadmap.classNamePrefix + 'complete';
555 | statusElement.innerText = 'Released';
556 | }
557 |
558 | footerElement.appendChild(statusElement);
559 |
560 | if (milestone.moreInfoURL) {
561 | var detailsButton = document.createElement('div');
562 | detailsButton.classList = roadmap.classNamePrefix + 'detailsButton';
563 |
564 | detailsButton.innerText = 'Details';
565 | detailsButton.onclick = function() {
566 | window.open(milestone.moreInfoURL, '_blank');
567 | }
568 |
569 | footerElement.appendChild(detailsButton);
570 | }
571 |
572 | modalElement.appendChild(footerElement);
573 | lightboxElement.appendChild(modalElement);
574 | lightboxElement.onclick = close;
575 | document.body.appendChild(lightboxElement);
576 |
577 | function close() {
578 | lightboxElement.remove();
579 | }
580 | }
581 |
582 | function getNextAboveMilestone(column, rank) {
583 | var nextAbove = null;
584 | var innerCount = rank + 0;
585 |
586 | while (nextAbove === null) {
587 | innerCount++;
588 |
589 | if (!roadmap.data[column].milestones[innerCount]) {
590 | nextAbove = false;
591 | } else if (!roadmap.data[column].milestones[innerCount].spacer) {
592 | nextAbove = roadmap.data[column].milestones[innerCount];
593 | }
594 | }
595 |
596 | return nextAbove;
597 | }
598 |
599 | function getNextBelowMilestone(column, rank) {
600 | var nextBelow = null;
601 | var innerCount = rank + 0;
602 |
603 | while (nextBelow === null) {
604 | innerCount--;
605 |
606 | if (!roadmap.data[column].milestones[innerCount]) {
607 | nextBelow = false;
608 | } else if (!roadmap.data[column].milestones[innerCount].spacer) {
609 | nextBelow = roadmap.data[column].milestones[innerCount];
610 | }
611 | }
612 |
613 | return nextBelow;
614 | }
615 |
616 | function getMilestone(column, rank) {
617 | return roadmap.data[column].milestones[rank];
618 | }
619 |
620 | function versionThis(milestoneObjs, format, startingPoint) {
621 | if (typeof format != "string") {
622 | format = "2 decimals";
623 | }
624 |
625 | if (typeof startingPoint != "number") {
626 | startingPoint = "1";
627 | }
628 |
629 | startingPoint = startingPoint.toString();
630 |
631 | //all the milestone objects for a category are sent here, first to last
632 | var difficulty= 0;
633 | var responseSkeleton = ['0.10.0', '0.25.0', '0.40.0', '0.80.0', '0.90.0', '1.0.0'];
634 | var milestoneCount = 0;
635 | var milstoneRanks = Object.keys(milestoneObjs).sort(function(a, b) {return a - b;});
636 |
637 | milstoneRanks.forEach(function(i) {
638 | if (!milestoneObjs[i].spacer) {
639 | milestoneCount++;
640 | difficulty += milestoneObjs[i].difficulty;
641 | }
642 | });
643 |
644 | var lastGeneratedMilestoneNum = 0;
645 | var loopCount = 0;
646 | responseSkeleton=[];
647 |
648 | milstoneRanks.forEach(function(i) {
649 | if (!milestoneObjs[i].spacer) {
650 | var thisWeight = milestoneObjs[i].difficulty / difficulty;
651 |
652 | lastGeneratedMilestoneNum += thisWeight;
653 |
654 | if(format == "2 decimals"){
655 | if(loopCount >= milestoneCount - 1){
656 | var endingPoint = parseInt(startingPoint) + 1;
657 | responseSkeleton.push(endingPoint.toString() + ".0.0");
658 | } else {
659 | responseSkeleton.push(startingPoint.toString() + "" + lastGeneratedMilestoneNum.toFixed(2).toString().replace("0.", ".") + ".0");
660 | }
661 | } else {
662 | if (loopCount >= milestoneCount - 1) {
663 | var endingPoint = parseInt(startingPoint) + 1;
664 | responseSkeleton.push(endingPoint + ".0");
665 | } else{
666 | responseSkeleton.push(startingPoint + "." + lastGeneratedMilestoneNum.toFixed(2).toString().replace("0.", "."));
667 | }
668 | }
669 |
670 | loopCount = loopCount + 1;
671 | } else {
672 | responseSkeleton.push("");
673 | }
674 | });
675 |
676 | return responseSkeleton.reverse();
677 | }
678 |
679 | function pseudoStyle(hostElement, pseudoElement, prop, value){
680 | var _sheetId = "pseudoStyles";
681 | var _head = document.head || document.getElementsByTagName('head')[0];
682 | var _sheet = document.getElementById(_sheetId) || document.createElement('style');
683 | _sheet.id = _sheetId;
684 | var className = "pseudoStyle" + Math.floor(Math.random() * (999999999 + 1));
685 |
686 | hostElement.className += " " + className;
687 |
688 | _sheet.innerHTML += "." + roadmap.classNamePrefix + "container ." + className + ":" + pseudoElement + "{" + prop + ":" + value + " !important}";
689 | _head.appendChild(_sheet);
690 | };
691 |
692 | return {
693 | columns: columns,
694 | milestones: milestones,
695 | style: style,
696 | markComplete: markComplete
697 | };
698 | }
--------------------------------------------------------------------------------
/src/CoolRoadmap.js:
--------------------------------------------------------------------------------
1 | function roadmap(wrapperDivID) {
2 | var roadmap = {
3 | classNamePrefix: 'coolRoadmap-',
4 | wrapperDivID: wrapperDivID,
5 | wrapperElement: document.getElementById(wrapperDivID),
6 | data: [],
7 | nodeWidth: -1,
8 | nodeHeight: -1,
9 | columnSpacing: -1,
10 | nodeSpacing: -1,
11 | columnColors: [],
12 | defaultMilestoneDifficulty: 10,
13 | milestoneCompleteData: [],
14 | userData: {
15 | columnNames: [],
16 | milestones: []
17 | }
18 | }
19 |
20 | function _processUserData() {
21 | roadmap.data = [];
22 |
23 | _processColumns();
24 | _processMilestones();
25 | }
26 |
27 | function columns(columnNames) {
28 | roadmap.userData.columnNames = columnNames;
29 |
30 | _processUserData();
31 | _build();
32 | }
33 |
34 | function milestones(milestones) {
35 | roadmap.userData.milestones = milestones;
36 |
37 | _processUserData();
38 | _build();
39 | }
40 |
41 | function _processColumns() {
42 | roadmap.userData.columnNames.forEach(function(columnName) {
43 | roadmap.data.push({
44 | name: columnName,
45 | progressComplete: 0,
46 | totalDifficulty: 0,
47 | milestones: []
48 | })
49 | })
50 | }
51 |
52 | function _processMilestones() {
53 | var milestones = roadmap.userData.milestones;
54 | var milestoneRankMax = 0;
55 | var milestoneRankMin = 99999999;
56 |
57 | roadmap.data.forEach(function(column, idx) {
58 | roadmap.data[idx].milestones = [];
59 | })
60 |
61 | milestones.forEach(function(milestone, idx) {
62 | if (!milestone.belongsToColumn) {
63 | milestone.belongsToColumn = 1;
64 | }
65 |
66 | var columnIdx = milestone.belongsToColumn - 1;
67 |
68 | if (!roadmap.data[columnIdx]) {
69 | if (roadmap.userData.columnNames.length > 0) {
70 | console.log(milestone);
71 | console.warn('Milestone has invaid belongsToColumn');
72 | }
73 |
74 | return;
75 | }
76 |
77 | if (!milestone.rank) {
78 | milestone.rank = roadmap.data[columnIdx].milestones.length;
79 | }
80 |
81 | milestone.rank = parseFloat(milestone.rank);
82 |
83 | if (milestone.rank < 0) {
84 | console.log(milestone);
85 | throw new Error('Milestone has invaid rank - Ranks must be non-negative numbers');
86 | }
87 |
88 | if (milestone.rank % 1 !== 0) {
89 | console.log(milestone);
90 | throw new Error('Milestone has invaid rank - Ranks must be whole numbers');
91 | }
92 |
93 | milestone.rank = parseInt(milestone.rank);
94 |
95 | if (roadmap.data[columnIdx].milestones[milestone.rank]) {
96 | console.log(milestone);
97 | throw new Error('Milestone has invaid rank - A milestone with that rank is already defined');
98 | }
99 |
100 | if (!milestone.difficulty) {
101 | milestone.difficulty = roadmap.defaultMilestoneDifficulty;
102 | }
103 |
104 | milestone.difficulty = parseInt(milestone.difficulty);
105 |
106 | roadmap.data[columnIdx].milestones[milestone.rank] = milestone;
107 |
108 | roadmap.data[columnIdx].totalDifficulty += milestone.difficulty;
109 |
110 | if (milestone.rank > milestoneRankMax) {
111 | milestoneRankMax = milestone.rank;
112 | }
113 |
114 | if (milestone.rank < milestoneRankMin) {
115 | milestoneRankMin = milestone.rank;
116 | }
117 | })
118 |
119 | roadmap.data.forEach(function(column, columnIdx) {
120 | var count = milestoneRankMin;
121 |
122 | if (column.milestones.length > 0 && column.milestones[column.milestones.length - 1].rank !== milestoneRankMax) {
123 | var replacingRank = column.milestones.length - 1;
124 |
125 | roadmap.data[columnIdx].milestones[milestoneRankMax] = column.milestones[replacingRank];
126 | roadmap.data[columnIdx].milestones[milestoneRankMax].rank = milestoneRankMax;
127 | roadmap.data[columnIdx].milestones[replacingRank] = null;
128 | }
129 |
130 | while (count <= milestoneRankMax && count >= milestoneRankMin) {
131 | if (!column.milestones[count]) {
132 | roadmap.data[columnIdx].milestones[count] = {
133 | spacer: true,
134 | belongsToColumn: columnIdx + 1,
135 | rank: count
136 | }
137 | }
138 |
139 | var nextBelow = getNextBelowMilestone(columnIdx, count);
140 | if (!roadmap.data[columnIdx].milestones[count].status ||
141 | (nextBelow && nextBelow.status === 'pending')
142 | ) {
143 | roadmap.data[columnIdx].milestones[count].status = 'pending';
144 | }
145 |
146 | count++;
147 | }
148 |
149 | count = milestoneRankMax;
150 | while (count >= milestoneRankMin) {
151 | if (!roadmap.data[columnIdx].milestones[count].spacer) {
152 | var nextAbove = null;
153 | var innerCount = count + 0;
154 |
155 | while (nextAbove === null) {
156 | innerCount++;
157 |
158 | if (!roadmap.data[columnIdx].milestones[innerCount]) {
159 | nextAbove = false;
160 | } else if (!roadmap.data[columnIdx].milestones[innerCount].spacer) {
161 | nextAbove = innerCount;
162 | }
163 | }
164 |
165 | if (roadmap.data[columnIdx].milestones[count].forwardConnect && typeof roadmap.data[columnIdx].milestones[count].forwardConnect[0] !== "object") {
166 | roadmap.data[columnIdx].milestones[count].forwardConnect = [
167 | [
168 | roadmap.data[columnIdx].milestones[count].forwardConnect[0],
169 | roadmap.data[columnIdx].milestones[count].forwardConnect[1]
170 | ]
171 | ];
172 | } else if (!roadmap.data[columnIdx].milestones[count].forwardConnect) {
173 | roadmap.data[columnIdx].milestones[count].forwardConnect = [];
174 | }
175 |
176 | if (nextAbove && !hasNextAboveForwardConnect(roadmap.data[columnIdx].milestones[count].forwardConnect)) {
177 | roadmap.data[columnIdx].milestones[count].forwardConnect.push([
178 | columnIdx + 1, nextAbove
179 | ])
180 | }
181 |
182 | function hasNextAboveForwardConnect(forwardConnect) {
183 | var hasIt = false;
184 |
185 | roadmap.data[columnIdx].milestones[count].forwardConnect.forEach(function(innerForwardConnect) {
186 | if (innerForwardConnect[0] === columnIdx + 1 && innerForwardConnect[1] === nextAbove) {
187 | hasIt = true;
188 | }
189 | })
190 |
191 | return hasIt;
192 | }
193 | }
194 |
195 | count--;
196 | }
197 |
198 | roadmap.data[columnIdx].milestoneVersions = versionThis(roadmap.data[columnIdx].milestones, '2 decimals', 1);
199 | })
200 | }
201 |
202 | function style(columnColors) {
203 | roadmap.columnColors = columnColors;
204 |
205 | _build();
206 | }
207 |
208 | function markComplete(milestoneCompleteData) {
209 | roadmap.milestoneCompleteData = milestoneCompleteData;
210 |
211 | _build();
212 | }
213 |
214 | window.onresize = function() {
215 | if (roadmap.data.length <= 5) {
216 | roadmap.nodeWidth = -1;
217 | roadmap.nodeHeight = -1;
218 | roadmap.columnSpacing = -1;
219 | roadmap.nodeSpacing = -1;
220 |
221 | _build();
222 | }
223 | }
224 |
225 | function _build() {
226 | var columnCount = 0;
227 |
228 | // Empty the wrapper element
229 | roadmap.wrapperElement.innerHTML = '';
230 |
231 | // Create our container
232 | var container = document.createElement('div');
233 | container.classList = roadmap.classNamePrefix + 'container';
234 |
235 | var overallProgress = document.createElement('div');
236 | var overallProgressInner = document.createElement('div');
237 | var overallProgressContent = document.createElement('div');
238 | overallProgressInner.classList = roadmap.classNamePrefix + 'progressBar';
239 | overallProgress.classList = roadmap.classNamePrefix + 'overallProgress';
240 | overallProgressContent.classList = roadmap.classNamePrefix + 'progressContent';
241 |
242 | if (roadmap.data.length <= 5) {
243 | container.classList += ' center';
244 | }
245 |
246 | // Create our wrapper
247 | var wrapper = document.createElement('div');
248 | wrapper.classList = roadmap.classNamePrefix + 'wrapper';
249 |
250 | // build and add the columns and milestone nodes
251 | roadmap.data.forEach(function(columnData, idx) {
252 | columnCount++;
253 | var columnElem = buildColumn(columnData, idx);
254 |
255 | var milstoneRanks = Object.keys(columnData.milestones).sort(function(a, b) {return a - b;}).reverse();
256 | var milestoneCount = 0;
257 | milstoneRanks.forEach(function(rank) {
258 | var milestone = columnData.milestones[rank];
259 | if (roadmap.nodeWidth === -1) {
260 | // Dynamically get the width, height, and spacing of a node in a column
261 | var fakeMilestoneElem = buildMilestone(milestone, idx, milestoneCount);
262 | var fakeColumn = columnElem.cloneNode(true);
263 | fakeColumn.appendChild(fakeMilestoneElem);
264 |
265 | var count = 1;
266 | while (count <= roadmap.data.length) {
267 | wrapper.appendChild(fakeColumn.cloneNode(true));
268 | count++;
269 | }
270 |
271 | container.appendChild(wrapper);
272 | container.style.visibility = 'hidden';
273 | roadmap.wrapperElement.appendChild(container);
274 |
275 | var milestoneComputedStyle = getComputedStyle(
276 | document.getElementsByClassName(roadmap.classNamePrefix + 'milestone')[0]
277 | );
278 | var columnComputedStyle = getComputedStyle(
279 | document.getElementsByClassName(roadmap.classNamePrefix + 'column')[0]
280 | );
281 |
282 | roadmap.nodeWidth = document.getElementsByClassName('coolRoadmap-milestone')[0].offsetWidth + 4;
283 | roadmap.nodeHeight = parseInt(milestoneComputedStyle.getPropertyValue('height').replace('px', '')) + 4;
284 | roadmap.nodeSpacing = parseInt(milestoneComputedStyle.getPropertyValue('margin-bottom').replace('px', ''));
285 | roadmap.columnSpacing = parseInt(columnComputedStyle.getPropertyValue('padding-right').replace('px', ''));
286 |
287 | wrapper.innerHTML = '';
288 | container.innerHTML = '';
289 | container.style.visibility = 'visible';
290 | roadmap.wrapperElement.innerHTML = '';
291 | }
292 |
293 | var milestoneElem = buildMilestone(milestone, idx, milestoneCount);
294 | columnElem.appendChild(milestoneElem);
295 | milestoneCount++;
296 | })
297 |
298 | wrapper.appendChild(columnElem);
299 | })
300 |
301 | var totalPercent = 0;
302 |
303 | roadmap.data.forEach(function(columnData) {
304 | totalPercent += parseInt(columnData.progressComplete);
305 | })
306 |
307 | totalPercent /= roadmap.data.length;
308 |
309 | overallProgressInner.style.width = totalPercent.toFixed(0) + '%';
310 | overallProgressContent.innerText = totalPercent.toFixed(0) + '% Complete';
311 | overallProgress.appendChild(overallProgressInner);
312 | overallProgress.appendChild(overallProgressContent);
313 |
314 | // Add the overall progress to the parent
315 | roadmap.wrapperElement.appendChild(overallProgress);
316 |
317 | // Add the wrapper to the container
318 | container.appendChild(wrapper);
319 |
320 | // Add the container to the parent
321 | roadmap.wrapperElement.appendChild(container);
322 |
323 |
324 |
325 | function buildColumn(columnData, columnIdx) {
326 | var totalComplete = 0;
327 | var completedMilestones = [];
328 |
329 | if (roadmap.milestoneCompleteData[columnIdx]) {
330 | roadmap.milestoneCompleteData[columnIdx].sort().forEach(function(milestoneNum) {
331 | if (getNextBelowMilestone(columnIdx, milestoneNum).status !== 'pending' && roadmap.data[columnIdx].milestones[milestoneNum] && !roadmap.data[columnIdx].milestones[milestoneNum].spacer) {
332 | roadmap.data[columnIdx].milestones[milestoneNum].status = 'complete';
333 | totalComplete += columnData.milestones[milestoneNum].difficulty;
334 | completedMilestones.push(milestoneNum);
335 | }
336 | });
337 | }
338 |
339 | columnData.milestones.forEach(function(milestone, idx) {
340 | if (!milestone.spacer && milestone.status === 'complete' && completedMilestones.indexOf(idx) === -1) {
341 | totalComplete += milestone.difficulty;
342 | completedMilestones.push(idx);
343 | }
344 | })
345 |
346 | roadmap.data[columnIdx].progressComplete = ((totalComplete / columnData.totalDifficulty) * 100).toFixed(0);
347 |
348 | if (isNaN(roadmap.data[columnIdx].progressComplete)) {
349 | roadmap.data[columnIdx].progressComplete = 100;
350 | }
351 |
352 | var column = document.createElement('div');
353 | column.classList = roadmap.classNamePrefix + 'column';
354 |
355 | var header = document.createElement('div');
356 | var headerProgressBar = document.createElement('div');
357 | var headerProgressBarInner = document.createElement('div');
358 | var headerProgressBarContent = document.createElement('div');
359 |
360 | headerProgressBarInner.style.width = columnData.progressComplete + '%';
361 | headerProgressBarInner.classList = roadmap.classNamePrefix + 'progressBar';
362 | if (roadmap.columnColors[columnIdx]) {
363 | headerProgressBarInner.style.backgroundColor = roadmap.columnColors[columnIdx];
364 | }
365 |
366 | headerProgressBar.classList = roadmap.classNamePrefix + 'progress';
367 |
368 | headerProgressBarContent.innerText = columnData.progressComplete + '% Complete';
369 | headerProgressBarContent.classList = roadmap.classNamePrefix + 'progressContent';
370 |
371 | headerProgressBar.appendChild(headerProgressBarInner);
372 | headerProgressBar.appendChild(headerProgressBarContent);
373 |
374 | header.innerText = columnData.name;
375 | header.onclick = lightbox.bind(this, columnData, null, true);
376 | header.appendChild(headerProgressBar);
377 | header.classList = roadmap.classNamePrefix + 'node ' + roadmap.classNamePrefix + 'header';
378 |
379 | column.appendChild(header);
380 |
381 | return column;
382 | }
383 |
384 | function buildMilestone(milestone, columnIdx, milestoneCount) {
385 | var milstoneElem = document.createElement('div');
386 |
387 | if (milestone.title) {
388 | var title = document.createElement('div');
389 | var version = document.createElement('div');
390 |
391 | title.innerText = milestone.title;
392 | title.classList += roadmap.classNamePrefix + 'title';
393 | version.innerText = roadmap.data[columnIdx].milestoneVersions[milestoneCount];
394 |
395 | milstoneElem.appendChild(title);
396 | milstoneElem.appendChild(version);
397 | }
398 |
399 | milstoneElem.onclick = lightbox.bind(this, milestone, columnIdx, false);
400 | milstoneElem.classList = roadmap.classNamePrefix + 'node ' + roadmap.classNamePrefix + 'milestone';
401 | milstoneElem.style.zIndex = milestone.rank;
402 |
403 | if (milestone.spacer) {
404 | milstoneElem.classList += ' ' + roadmap.classNamePrefix + 'spacer'
405 | }
406 |
407 | if (milestone.status === 'complete') {
408 | if (roadmap.columnColors[columnIdx]) {
409 | milstoneElem.style.borderColor = roadmap.columnColors[columnIdx];
410 | pseudoStyle(milstoneElem, 'after', 'background', roadmap.columnColors[columnIdx]);
411 | }
412 |
413 | milstoneElem.classList += ' ' + roadmap.classNamePrefix + 'complete';
414 | }
415 |
416 | if (milestone.forwardConnect) {
417 | milestone.forwardConnect.forEach(function(forwardConnect) {
418 | var startColor = '#2e3148';
419 | var endColor = '#2e3148';
420 | var arrowElem = document.createElement('div');
421 |
422 | arrowElem.classList = roadmap.classNamePrefix + 'arrow';
423 |
424 | var heightDiffIdx = milestone.rank - forwardConnect[1];
425 | var widthDiffIdx = forwardConnect[0] - milestone.belongsToColumn;
426 |
427 | var heightDiff = heightDiffIdx * (roadmap.nodeHeight + roadmap.nodeSpacing);
428 | var widthDiff = widthDiffIdx * (roadmap.nodeWidth + roadmap.columnSpacing);
429 | var isNoEnd = true;
430 |
431 | var paddingAndArrow = 12 + (4 * Math.abs(heightDiffIdx));
432 |
433 | if (milestone.status === 'complete') {
434 | startColor = roadmap.columnColors[columnIdx];
435 | endColor = roadmap.columnColors[columnIdx + widthDiffIdx];
436 | }
437 |
438 | if (widthDiffIdx === 0 && heightDiffIdx < 0) {
439 | // Arrow is pointing N
440 | arrowElem.style.left = '50%';
441 | heightDiff += roadmap.nodeHeight + paddingAndArrow;
442 | isNoEnd = false;
443 | } else if (widthDiffIdx > 0 && heightDiffIdx < 0) {
444 | // Arrow is poining NE
445 | widthDiff -= ((roadmap.nodeWidth / 4) * 3);
446 | heightDiff += roadmap.nodeHeight + (2 * Math.abs(heightDiffIdx));
447 | } else if (widthDiffIdx > 0 && heightDiffIdx === 0) {
448 | // Arrow is pointing E
449 | arrowElem.style.top = '50%'
450 | widthDiff -= roadmap.nodeWidth + (14 * Math.abs(widthDiffIdx));
451 | } else if (widthDiffIdx > 0 && heightDiffIdx > 0) {
452 | // Arrow is pointing SE
453 | arrowElem.style.top = '100%'
454 | widthDiff -= ((roadmap.nodeWidth / 4) * 3);
455 | heightDiff -= roadmap.nodeHeight + (2 * Math.abs(heightDiffIdx));
456 | } else if (widthDiffIdx === 0 && heightDiffIdx > 0) {
457 | // Arrow is pointing S
458 | arrowElem.style.left = '50%';
459 | arrowElem.style.top = roadmap.nodeHeight + 5;
460 | heightDiff -= roadmap.nodeHeight + paddingAndArrow;
461 | isNoEnd = false;
462 | } else if (widthDiffIdx < 0 && heightDiffIdx > 0) {
463 | // Arrow is pointing SW
464 | arrowElem.style.left = '-3px';
465 | arrowElem.style.top = '100%'
466 | widthDiff += ((roadmap.nodeWidth / 4) * 3);
467 | heightDiff -= roadmap.nodeHeight + (2 * Math.abs(heightDiffIdx));
468 | } else if (widthDiffIdx < 0 && heightDiffIdx === 0) {
469 | // Arrow is pointing W
470 | arrowElem.style.left = '-3px';
471 | arrowElem.style.top = '50%'
472 | widthDiff += roadmap.nodeWidth + (8 * Math.abs(heightDiffIdx));
473 | } else if (widthDiffIdx < 0 && heightDiffIdx < 0) {
474 | // Arrow is pointing NW
475 | arrowElem.style.left = '25%';
476 | widthDiff += ((roadmap.nodeWidth / 4) * 2);
477 | heightDiff += roadmap.nodeHeight + 10;
478 | }
479 |
480 | // Determine the degrees that the other node is from this node
481 | var transformDegrees = Math.atan2(heightDiff, widthDiff) * 180 / Math.PI;
482 | // Determine the distance from the other node
483 | var distance = Math.hypot(heightDiff, widthDiff);
484 |
485 | if (isNoEnd) {
486 | arrowElem.classList += ' ' + roadmap.classNamePrefix + 'noEnd';
487 | }
488 |
489 | arrowElem.style.transform = "rotate(" + transformDegrees + "deg)";
490 | arrowElem.style.width = distance;
491 | if (startColor) {
492 | arrowElem.style.backgroundImage = 'linear-gradient(to right, ' + startColor + ', ' + endColor + ')';
493 | pseudoStyle(arrowElem, 'before', 'border-color', endColor);
494 | }
495 |
496 | milstoneElem.appendChild(arrowElem);
497 | });
498 | }
499 |
500 | return milstoneElem;
501 | }
502 | }
503 |
504 | function lightbox(milestone, columnIdx, isColumn) {
505 | var lightboxElement = document.createElement('div');
506 | var modalElement = document.createElement('div');
507 | var titleElement = document.createElement('div');
508 | var versionElement = document.createElement('span');
509 | var statusElement = document.createElement('div');
510 | var footerElement = document.createElement('div');
511 |
512 | lightboxElement.classList = roadmap.classNamePrefix + 'lightbox';
513 | modalElement.classList = roadmap.classNamePrefix + 'modal';
514 | titleElement.classList = roadmap.classNamePrefix + 'title';
515 | versionElement.classList = roadmap.classNamePrefix + 'version';
516 | statusElement.classList = roadmap.classNamePrefix + 'status';
517 | footerElement.classList = roadmap.classNamePrefix + 'footer';
518 |
519 | if (!isColumn) {
520 | titleElement.innerText = milestone.title;
521 | } else {
522 | titleElement.innerText = milestone.name;
523 | }
524 |
525 | if (!isColumn) {
526 | versionElement.innerText = roadmap.data[columnIdx].milestoneVersions[milestone.rank];
527 | titleElement.appendChild(versionElement);
528 | }
529 |
530 | modalElement.appendChild(titleElement);
531 |
532 | if (!isColumn) {
533 | if (milestone.status !== 'pending' && (!milestone.descriptionHTML || milestone.descriptionHTML === '')) {
534 | modalElement.innerHTML += 'To Be Announced';
535 | } else {
536 | modalElement.innerHTML += milestone.descriptionHTML;
537 | }
538 | } else {
539 | modalElement.innerHTML += 'Final version of ' + milestone.name + ' before we launch. Features are frozen';
540 | }
541 |
542 | statusElement.classList += ' ' + roadmap.classNamePrefix + 'inProgress';
543 | statusElement.innerText = 'In Progress';
544 |
545 | if (!isColumn && milestone.status === 'complete') {
546 | statusElement.classList += ' ' + roadmap.classNamePrefix + 'complete';
547 |
548 | if (milestone.released) {
549 | statusElement.innerText = 'Released ' + milestone.released;
550 | } else {
551 | statusElement.innerText = '';
552 | }
553 | } else if (isColumn && milestone.progressComplete === '100') {
554 | statusElement.classList += ' ' + roadmap.classNamePrefix + 'complete';
555 | statusElement.innerText = 'Released';
556 | }
557 |
558 | footerElement.appendChild(statusElement);
559 |
560 | if (milestone.moreInfoURL) {
561 | var detailsButton = document.createElement('div');
562 | detailsButton.classList = roadmap.classNamePrefix + 'detailsButton';
563 |
564 | detailsButton.innerText = 'Details';
565 | detailsButton.onclick = function() {
566 | window.open(milestone.moreInfoURL, '_blank');
567 | }
568 |
569 | footerElement.appendChild(detailsButton);
570 | }
571 |
572 | modalElement.appendChild(footerElement);
573 | lightboxElement.appendChild(modalElement);
574 | lightboxElement.onclick = close;
575 | document.body.appendChild(lightboxElement);
576 |
577 | function close() {
578 | lightboxElement.remove();
579 | }
580 | }
581 |
582 | function getNextAboveMilestone(column, rank) {
583 | var nextAbove = null;
584 | var innerCount = rank + 0;
585 |
586 | while (nextAbove === null) {
587 | innerCount++;
588 |
589 | if (!roadmap.data[column].milestones[innerCount]) {
590 | nextAbove = false;
591 | } else if (!roadmap.data[column].milestones[innerCount].spacer) {
592 | nextAbove = roadmap.data[column].milestones[innerCount];
593 | }
594 | }
595 |
596 | return nextAbove;
597 | }
598 |
599 | function getNextBelowMilestone(column, rank) {
600 | var nextBelow = null;
601 | var innerCount = rank + 0;
602 |
603 | while (nextBelow === null) {
604 | innerCount--;
605 |
606 | if (!roadmap.data[column].milestones[innerCount]) {
607 | nextBelow = false;
608 | } else if (!roadmap.data[column].milestones[innerCount].spacer) {
609 | nextBelow = roadmap.data[column].milestones[innerCount];
610 | }
611 | }
612 |
613 | return nextBelow;
614 | }
615 |
616 | function getMilestone(column, rank) {
617 | return roadmap.data[column].milestones[rank];
618 | }
619 |
620 | function versionThis(milestoneObjs, format, startingPoint) {
621 | if (typeof format != "string") {
622 | format = "2 decimals";
623 | }
624 |
625 | if (typeof startingPoint != "number") {
626 | startingPoint = "1";
627 | }
628 |
629 | startingPoint = startingPoint.toString();
630 |
631 | //all the milestone objects for a category are sent here, first to last
632 | var difficulty= 0;
633 | var responseSkeleton = ['0.10.0', '0.25.0', '0.40.0', '0.80.0', '0.90.0', '1.0.0'];
634 | var milestoneCount = 0;
635 | var milstoneRanks = Object.keys(milestoneObjs).sort(function(a, b) {return a - b;});
636 |
637 | milstoneRanks.forEach(function(i) {
638 | if (!milestoneObjs[i].spacer) {
639 | milestoneCount++;
640 | difficulty += milestoneObjs[i].difficulty;
641 | }
642 | });
643 |
644 | var lastGeneratedMilestoneNum = 0;
645 | var loopCount = 0;
646 | responseSkeleton=[];
647 |
648 | milstoneRanks.forEach(function(i) {
649 | if (!milestoneObjs[i].spacer) {
650 | var thisWeight = milestoneObjs[i].difficulty / difficulty;
651 |
652 | lastGeneratedMilestoneNum += thisWeight;
653 |
654 | if(format == "2 decimals"){
655 | if(loopCount >= milestoneCount - 1){
656 | var endingPoint = parseInt(startingPoint) + 1;
657 | responseSkeleton.push(endingPoint.toString() + ".0.0");
658 | } else {
659 | responseSkeleton.push(startingPoint.toString() + "" + lastGeneratedMilestoneNum.toFixed(2).toString().replace("0.", ".") + ".0");
660 | }
661 | } else {
662 | if (loopCount >= milestoneCount - 1) {
663 | var endingPoint = parseInt(startingPoint) + 1;
664 | responseSkeleton.push(endingPoint + ".0");
665 | } else{
666 | responseSkeleton.push(startingPoint + "." + lastGeneratedMilestoneNum.toFixed(2).toString().replace("0.", "."));
667 | }
668 | }
669 |
670 | loopCount = loopCount + 1;
671 | } else {
672 | responseSkeleton.push("");
673 | }
674 | });
675 |
676 | return responseSkeleton.reverse();
677 | }
678 |
679 | function pseudoStyle(hostElement, pseudoElement, prop, value){
680 | var _sheetId = "pseudoStyles";
681 | var _head = document.head || document.getElementsByTagName('head')[0];
682 | var _sheet = document.getElementById(_sheetId) || document.createElement('style');
683 | _sheet.id = _sheetId;
684 | var className = "pseudoStyle" + Math.floor(Math.random() * (999999999 + 1));
685 |
686 | hostElement.className += " " + className;
687 |
688 | _sheet.innerHTML += "." + roadmap.classNamePrefix + "container ." + className + ":" + pseudoElement + "{" + prop + ":" + value + " !important}";
689 | _head.appendChild(_sheet);
690 | };
691 |
692 | return {
693 | columns: columns,
694 | milestones: milestones,
695 | style: style,
696 | markComplete: markComplete
697 | };
698 | }
--------------------------------------------------------------------------------
/demo/js/jquery.js:
--------------------------------------------------------------------------------
1 | /*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){"use strict";var n=[],r=e.document,i=Object.getPrototypeOf,o=n.slice,a=n.concat,s=n.push,u=n.indexOf,l={},c=l.toString,f=l.hasOwnProperty,p=f.toString,d=p.call(Object),h={},g=function e(t){return"function"==typeof t&&"number"!=typeof t.nodeType},y=function e(t){return null!=t&&t===t.window},v={type:!0,src:!0,noModule:!0};function m(e,t,n){var i,o=(t=t||r).createElement("script");if(o.text=e,n)for(i in v)n[i]&&(o[i]=n[i]);t.head.appendChild(o).parentNode.removeChild(o)}function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[c.call(e)]||"object":typeof e}var b="3.3.1",w=function(e,t){return new w.fn.init(e,t)},T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;w.fn=w.prototype={jquery:"3.3.1",constructor:w,length:0,toArray:function(){return o.call(this)},get:function(e){return null==e?o.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=w.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return w.each(this,e)},map:function(e){return this.pushStack(w.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(o.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n0&&t-1 in e)}var E=function(e){var t,n,r,i,o,a,s,u,l,c,f,p,d,h,g,y,v,m,x,b="sizzle"+1*new Date,w=e.document,T=0,C=0,E=ae(),k=ae(),S=ae(),D=function(e,t){return e===t&&(f=!0),0},N={}.hasOwnProperty,A=[],j=A.pop,q=A.push,L=A.push,H=A.slice,O=function(e,t){for(var n=0,r=e.length;n+~]|"+M+")"+M+"*"),z=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),X=new RegExp(W),U=new RegExp("^"+R+"$"),V={ID:new RegExp("^#("+R+")"),CLASS:new RegExp("^\\.("+R+")"),TAG:new RegExp("^("+R+"|[*])"),ATTR:new RegExp("^"+I),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+P+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},G=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Q=/^[^{]+\{\s*\[native \w/,J=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,K=/[+~]/,Z=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ee=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},te=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ne=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},re=function(){p()},ie=me(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{L.apply(A=H.call(w.childNodes),w.childNodes),A[w.childNodes.length].nodeType}catch(e){L={apply:A.length?function(e,t){q.apply(e,H.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function oe(e,t,r,i){var o,s,l,c,f,h,v,m=t&&t.ownerDocument,T=t?t.nodeType:9;if(r=r||[],"string"!=typeof e||!e||1!==T&&9!==T&&11!==T)return r;if(!i&&((t?t.ownerDocument||t:w)!==d&&p(t),t=t||d,g)){if(11!==T&&(f=J.exec(e)))if(o=f[1]){if(9===T){if(!(l=t.getElementById(o)))return r;if(l.id===o)return r.push(l),r}else if(m&&(l=m.getElementById(o))&&x(t,l)&&l.id===o)return r.push(l),r}else{if(f[2])return L.apply(r,t.getElementsByTagName(e)),r;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return L.apply(r,t.getElementsByClassName(o)),r}if(n.qsa&&!S[e+" "]&&(!y||!y.test(e))){if(1!==T)m=t,v=e;else if("object"!==t.nodeName.toLowerCase()){(c=t.getAttribute("id"))?c=c.replace(te,ne):t.setAttribute("id",c=b),s=(h=a(e)).length;while(s--)h[s]="#"+c+" "+ve(h[s]);v=h.join(","),m=K.test(e)&&ge(t.parentNode)||t}if(v)try{return L.apply(r,m.querySelectorAll(v)),r}catch(e){}finally{c===b&&t.removeAttribute("id")}}}return u(e.replace(B,"$1"),t,r,i)}function ae(){var e=[];function t(n,i){return e.push(n+" ")>r.cacheLength&&delete t[e.shift()],t[n+" "]=i}return t}function se(e){return e[b]=!0,e}function ue(e){var t=d.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function le(e,t){var n=e.split("|"),i=n.length;while(i--)r.attrHandle[n[i]]=t}function ce(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function fe(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function pe(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function de(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&ie(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function he(e){return se(function(t){return t=+t,se(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function ge(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}n=oe.support={},o=oe.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},p=oe.setDocument=function(e){var t,i,a=e?e.ownerDocument||e:w;return a!==d&&9===a.nodeType&&a.documentElement?(d=a,h=d.documentElement,g=!o(d),w!==d&&(i=d.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",re,!1):i.attachEvent&&i.attachEvent("onunload",re)),n.attributes=ue(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ue(function(e){return e.appendChild(d.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=Q.test(d.getElementsByClassName),n.getById=ue(function(e){return h.appendChild(e).id=b,!d.getElementsByName||!d.getElementsByName(b).length}),n.getById?(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){return e.getAttribute("id")===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n=t.getElementById(e);return n?[n]:[]}}):(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){var n="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&g)return t.getElementsByClassName(e)},v=[],y=[],(n.qsa=Q.test(d.querySelectorAll))&&(ue(function(e){h.appendChild(e).innerHTML=" ",e.querySelectorAll("[msallowcapture^='']").length&&y.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||y.push("\\["+M+"*(?:value|"+P+")"),e.querySelectorAll("[id~="+b+"-]").length||y.push("~="),e.querySelectorAll(":checked").length||y.push(":checked"),e.querySelectorAll("a#"+b+"+*").length||y.push(".#.+[+~]")}),ue(function(e){e.innerHTML=" ";var t=d.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&y.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&y.push(":enabled",":disabled"),h.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&y.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),y.push(",.*:")})),(n.matchesSelector=Q.test(m=h.matches||h.webkitMatchesSelector||h.mozMatchesSelector||h.oMatchesSelector||h.msMatchesSelector))&&ue(function(e){n.disconnectedMatch=m.call(e,"*"),m.call(e,"[s!='']:x"),v.push("!=",W)}),y=y.length&&new RegExp(y.join("|")),v=v.length&&new RegExp(v.join("|")),t=Q.test(h.compareDocumentPosition),x=t||Q.test(h.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return f=!0,0;var r=!e.compareDocumentPosition-!t.compareDocumentPosition;return r||(1&(r=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!n.sortDetached&&t.compareDocumentPosition(e)===r?e===d||e.ownerDocument===w&&x(w,e)?-1:t===d||t.ownerDocument===w&&x(w,t)?1:c?O(c,e)-O(c,t):0:4&r?-1:1)}:function(e,t){if(e===t)return f=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===d?-1:t===d?1:i?-1:o?1:c?O(c,e)-O(c,t):0;if(i===o)return ce(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?ce(a[r],s[r]):a[r]===w?-1:s[r]===w?1:0},d):d},oe.matches=function(e,t){return oe(e,null,null,t)},oe.matchesSelector=function(e,t){if((e.ownerDocument||e)!==d&&p(e),t=t.replace(z,"='$1']"),n.matchesSelector&&g&&!S[t+" "]&&(!v||!v.test(t))&&(!y||!y.test(t)))try{var r=m.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return oe(t,d,null,[e]).length>0},oe.contains=function(e,t){return(e.ownerDocument||e)!==d&&p(e),x(e,t)},oe.attr=function(e,t){(e.ownerDocument||e)!==d&&p(e);var i=r.attrHandle[t.toLowerCase()],o=i&&N.call(r.attrHandle,t.toLowerCase())?i(e,t,!g):void 0;return void 0!==o?o:n.attributes||!g?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null},oe.escape=function(e){return(e+"").replace(te,ne)},oe.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},oe.uniqueSort=function(e){var t,r=[],i=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&e.slice(0),e.sort(D),f){while(t=e[o++])t===e[o]&&(i=r.push(o));while(i--)e.splice(r[i],1)}return c=null,e},i=oe.getText=function(e){var t,n="",r=0,o=e.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=i(e)}else if(3===o||4===o)return e.nodeValue}else while(t=e[r++])n+=i(t);return n},(r=oe.selectors={cacheLength:50,createPseudo:se,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(Z,ee),e[3]=(e[3]||e[4]||e[5]||"").replace(Z,ee),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||oe.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&oe.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return V.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=a(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(Z,ee).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=E[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&E(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=oe.attr(r,e);return null==i?"!="===t:!t||(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i.replace($," ")+" ").indexOf(n)>-1:"|="===t&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",y=t.parentNode,v=s&&t.nodeName.toLowerCase(),m=!u&&!s,x=!1;if(y){if(o){while(g){p=t;while(p=p[g])if(s?p.nodeName.toLowerCase()===v:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?y.firstChild:y.lastChild],a&&m){x=(d=(l=(c=(f=(p=y)[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1])&&l[2],p=d&&y.childNodes[d];while(p=++d&&p&&p[g]||(x=d=0)||h.pop())if(1===p.nodeType&&++x&&p===t){c[e]=[T,d,x];break}}else if(m&&(x=d=(l=(c=(f=(p=t)[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1]),!1===x)while(p=++d&&p&&p[g]||(x=d=0)||h.pop())if((s?p.nodeName.toLowerCase()===v:1===p.nodeType)&&++x&&(m&&((c=(f=p[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]=[T,x]),p===t))break;return(x-=i)===r||x%r==0&&x/r>=0}}},PSEUDO:function(e,t){var n,i=r.pseudos[e]||r.setFilters[e.toLowerCase()]||oe.error("unsupported pseudo: "+e);return i[b]?i(t):i.length>1?(n=[e,e,"",t],r.setFilters.hasOwnProperty(e.toLowerCase())?se(function(e,n){var r,o=i(e,t),a=o.length;while(a--)e[r=O(e,o[a])]=!(n[r]=o[a])}):function(e){return i(e,0,n)}):i}},pseudos:{not:se(function(e){var t=[],n=[],r=s(e.replace(B,"$1"));return r[b]?se(function(e,t,n,i){var o,a=r(e,null,i,[]),s=e.length;while(s--)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),t[0]=null,!n.pop()}}),has:se(function(e){return function(t){return oe(e,t).length>0}}),contains:se(function(e){return e=e.replace(Z,ee),function(t){return(t.textContent||t.innerText||i(t)).indexOf(e)>-1}}),lang:se(function(e){return U.test(e||"")||oe.error("unsupported lang: "+e),e=e.replace(Z,ee).toLowerCase(),function(t){var n;do{if(n=g?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===h},focus:function(e){return e===d.activeElement&&(!d.hasFocus||d.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:de(!1),disabled:de(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!r.pseudos.empty(e)},header:function(e){return Y.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:he(function(){return[0]}),last:he(function(e,t){return[t-1]}),eq:he(function(e,t,n){return[n<0?n+t:n]}),even:he(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:he(function(e,t,n){for(var r=n<0?n+t:n;++r1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function be(e,t,n){for(var r=0,i=t.length;r-1&&(o[l]=!(a[l]=f))}}else v=we(v===a?v.splice(h,v.length):v),i?i(null,a,v,u):L.apply(a,v)})}function Ce(e){for(var t,n,i,o=e.length,a=r.relative[e[0].type],s=a||r.relative[" "],u=a?1:0,c=me(function(e){return e===t},s,!0),f=me(function(e){return O(t,e)>-1},s,!0),p=[function(e,n,r){var i=!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):f(e,n,r));return t=null,i}];u1&&xe(p),u>1&&ve(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace(B,"$1"),n,u0,i=e.length>0,o=function(o,a,s,u,c){var f,h,y,v=0,m="0",x=o&&[],b=[],w=l,C=o||i&&r.find.TAG("*",c),E=T+=null==w?1:Math.random()||.1,k=C.length;for(c&&(l=a===d||a||c);m!==k&&null!=(f=C[m]);m++){if(i&&f){h=0,a||f.ownerDocument===d||(p(f),s=!g);while(y=e[h++])if(y(f,a||d,s)){u.push(f);break}c&&(T=E)}n&&((f=!y&&f)&&v--,o&&x.push(f))}if(v+=m,n&&m!==v){h=0;while(y=t[h++])y(x,b,a,s);if(o){if(v>0)while(m--)x[m]||b[m]||(b[m]=j.call(u));b=we(b)}L.apply(u,b),c&&!o&&b.length>0&&v+t.length>1&&oe.uniqueSort(u)}return c&&(T=E,l=w),x};return n?se(o):o}return s=oe.compile=function(e,t){var n,r=[],i=[],o=S[e+" "];if(!o){t||(t=a(e)),n=t.length;while(n--)(o=Ce(t[n]))[b]?r.push(o):i.push(o);(o=S(e,Ee(i,r))).selector=e}return o},u=oe.select=function(e,t,n,i){var o,u,l,c,f,p="function"==typeof e&&e,d=!i&&a(e=p.selector||e);if(n=n||[],1===d.length){if((u=d[0]=d[0].slice(0)).length>2&&"ID"===(l=u[0]).type&&9===t.nodeType&&g&&r.relative[u[1].type]){if(!(t=(r.find.ID(l.matches[0].replace(Z,ee),t)||[])[0]))return n;p&&(t=t.parentNode),e=e.slice(u.shift().value.length)}o=V.needsContext.test(e)?0:u.length;while(o--){if(l=u[o],r.relative[c=l.type])break;if((f=r.find[c])&&(i=f(l.matches[0].replace(Z,ee),K.test(u[0].type)&&ge(t.parentNode)||t))){if(u.splice(o,1),!(e=i.length&&ve(u)))return L.apply(n,i),n;break}}}return(p||s(e,d))(i,t,!g,n,!t||K.test(e)&&ge(t.parentNode)||t),n},n.sortStable=b.split("").sort(D).join("")===b,n.detectDuplicates=!!f,p(),n.sortDetached=ue(function(e){return 1&e.compareDocumentPosition(d.createElement("fieldset"))}),ue(function(e){return e.innerHTML=" ","#"===e.firstChild.getAttribute("href")})||le("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&ue(function(e){return e.innerHTML=" ",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||le("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ue(function(e){return null==e.getAttribute("disabled")})||le(P,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),oe}(e);w.find=E,w.expr=E.selectors,w.expr[":"]=w.expr.pseudos,w.uniqueSort=w.unique=E.uniqueSort,w.text=E.getText,w.isXMLDoc=E.isXML,w.contains=E.contains,w.escapeSelector=E.escape;var k=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&w(e).is(n))break;r.push(e)}return r},S=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},D=w.expr.match.needsContext;function N(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var A=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,t,n){return g(t)?w.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?w.grep(e,function(e){return e===t!==n}):"string"!=typeof t?w.grep(e,function(e){return u.call(t,e)>-1!==n}):w.filter(t,e,n)}w.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?w.find.matchesSelector(r,e)?[r]:[]:w.find.matches(e,w.grep(t,function(e){return 1===e.nodeType}))},w.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(w(e).filter(function(){for(t=0;t1?w.uniqueSort(n):n},filter:function(e){return this.pushStack(j(this,e||[],!1))},not:function(e){return this.pushStack(j(this,e||[],!0))},is:function(e){return!!j(this,"string"==typeof e&&D.test(e)?w(e):e||[],!1).length}});var q,L=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(w.fn.init=function(e,t,n){var i,o;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(i="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:L.exec(e))||!i[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(i[1]){if(t=t instanceof w?t[0]:t,w.merge(this,w.parseHTML(i[1],t&&t.nodeType?t.ownerDocument||t:r,!0)),A.test(i[1])&&w.isPlainObject(t))for(i in t)g(this[i])?this[i](t[i]):this.attr(i,t[i]);return this}return(o=r.getElementById(i[2]))&&(this[0]=o,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):g(e)?void 0!==n.ready?n.ready(e):e(w):w.makeArray(e,this)}).prototype=w.fn,q=w(r);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};w.fn.extend({has:function(e){var t=w(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&w.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?w.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?u.call(w(e),this[0]):u.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(w.uniqueSort(w.merge(this.get(),w(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}w.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return k(e,"parentNode")},parentsUntil:function(e,t,n){return k(e,"parentNode",n)},next:function(e){return P(e,"nextSibling")},prev:function(e){return P(e,"previousSibling")},nextAll:function(e){return k(e,"nextSibling")},prevAll:function(e){return k(e,"previousSibling")},nextUntil:function(e,t,n){return k(e,"nextSibling",n)},prevUntil:function(e,t,n){return k(e,"previousSibling",n)},siblings:function(e){return S((e.parentNode||{}).firstChild,e)},children:function(e){return S(e.firstChild)},contents:function(e){return N(e,"iframe")?e.contentDocument:(N(e,"template")&&(e=e.content||e),w.merge([],e.childNodes))}},function(e,t){w.fn[e]=function(n,r){var i=w.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=w.filter(r,i)),this.length>1&&(O[e]||w.uniqueSort(i),H.test(e)&&i.reverse()),this.pushStack(i)}});var M=/[^\x20\t\r\n\f]+/g;function R(e){var t={};return w.each(e.match(M)||[],function(e,n){t[n]=!0}),t}w.Callbacks=function(e){e="string"==typeof e?R(e):w.extend({},e);var t,n,r,i,o=[],a=[],s=-1,u=function(){for(i=i||e.once,r=t=!0;a.length;s=-1){n=a.shift();while(++s-1)o.splice(n,1),n<=s&&s--}),this},has:function(e){return e?w.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||u()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!r}};return l};function I(e){return e}function W(e){throw e}function $(e,t,n,r){var i;try{e&&g(i=e.promise)?i.call(e).done(t).fail(n):e&&g(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}w.extend({Deferred:function(t){var n=[["notify","progress",w.Callbacks("memory"),w.Callbacks("memory"),2],["resolve","done",w.Callbacks("once memory"),w.Callbacks("once memory"),0,"resolved"],["reject","fail",w.Callbacks("once memory"),w.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},"catch":function(e){return i.then(null,e)},pipe:function(){var e=arguments;return w.Deferred(function(t){w.each(n,function(n,r){var i=g(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&g(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){var o=0;function a(t,n,r,i){return function(){var s=this,u=arguments,l=function(){var e,l;if(!(t=o&&(r!==W&&(s=void 0,u=[e]),n.rejectWith(s,u))}};t?c():(w.Deferred.getStackHook&&(c.stackTrace=w.Deferred.getStackHook()),e.setTimeout(c))}}return w.Deferred(function(e){n[0][3].add(a(0,e,g(i)?i:I,e.notifyWith)),n[1][3].add(a(0,e,g(t)?t:I)),n[2][3].add(a(0,e,g(r)?r:W))}).promise()},promise:function(e){return null!=e?w.extend(e,i):i}},o={};return w.each(n,function(e,t){var a=t[2],s=t[5];i[t[1]]=a.add,s&&a.add(function(){r=s},n[3-e][2].disable,n[3-e][3].disable,n[0][2].lock,n[0][3].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=o.call(arguments),a=w.Deferred(),s=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?o.call(arguments):n,--t||a.resolveWith(r,i)}};if(t<=1&&($(e,a.done(s(n)).resolve,a.reject,!t),"pending"===a.state()||g(i[n]&&i[n].then)))return a.then();while(n--)$(i[n],s(n),a.reject);return a.promise()}});var B=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;w.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&B.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},w.readyException=function(t){e.setTimeout(function(){throw t})};var F=w.Deferred();w.fn.ready=function(e){return F.then(e)["catch"](function(e){w.readyException(e)}),this},w.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--w.readyWait:w.isReady)||(w.isReady=!0,!0!==e&&--w.readyWait>0||F.resolveWith(r,[w]))}}),w.ready.then=F.then;function _(){r.removeEventListener("DOMContentLoaded",_),e.removeEventListener("load",_),w.ready()}"complete"===r.readyState||"loading"!==r.readyState&&!r.documentElement.doScroll?e.setTimeout(w.ready):(r.addEventListener("DOMContentLoaded",_),e.addEventListener("load",_));var z=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===x(n)){i=!0;for(s in n)z(e,t,s,n[s],!0,o,a)}else if(void 0!==r&&(i=!0,g(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(w(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){K.remove(this,e)})}}),w.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=J.get(e,t),n&&(!r||Array.isArray(n)?r=J.access(e,t,w.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=w.queue(e,t),r=n.length,i=n.shift(),o=w._queueHooks(e,t),a=function(){w.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return J.get(e,n)||J.access(e,n,{empty:w.Callbacks("once memory").add(function(){J.remove(e,[t+"queue",n])})})}}),w.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""," "],thead:[1,""],col:[2,""],tr:[2,""],td:[3,""],_default:[0,"",""]};ge.optgroup=ge.option,ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td;function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&N(e,t)?w.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n-1)i&&i.push(o);else if(l=w.contains(o.ownerDocument,o),a=ye(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}!function(){var e=r.createDocumentFragment().appendChild(r.createElement("div")),t=r.createElement("input");t.setAttribute("type","radio"),t.setAttribute("checked","checked"),t.setAttribute("name","t"),e.appendChild(t),h.checkClone=e.cloneNode(!0).cloneNode(!0).lastChild.checked,e.innerHTML="",h.noCloneChecked=!!e.cloneNode(!0).lastChild.defaultValue}();var be=r.documentElement,we=/^key/,Te=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ce=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function ke(){return!1}function Se(){try{return r.activeElement}catch(e){}}function De(e,t,n,r,i,o){var a,s;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(s in t)De(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=ke;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return w().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=w.guid++)),e.each(function(){w.event.add(this,t,i,r,n)})}w.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=J.get(e);if(y){n.handler&&(n=(o=n).handler,i=o.selector),i&&w.find.matchesSelector(be,i),n.guid||(n.guid=w.guid++),(u=y.events)||(u=y.events={}),(a=y.handle)||(a=y.handle=function(t){return"undefined"!=typeof w&&w.event.triggered!==t.type?w.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(M)||[""]).length;while(l--)d=g=(s=Ce.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=w.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=w.event.special[d]||{},c=w.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&w.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),w.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=J.hasData(e)&&J.get(e);if(y&&(u=y.events)){l=(t=(t||"").match(M)||[""]).length;while(l--)if(s=Ce.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){f=w.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,y.handle)||w.removeEvent(e,d,y.handle),delete u[d])}else for(d in u)w.event.remove(e,d+t[l],n,r,!0);w.isEmptyObject(u)&&J.remove(e,"handle events")}},dispatch:function(e){var t=w.event.fix(e),n,r,i,o,a,s,u=new Array(arguments.length),l=(J.get(this,"events")||{})[t.type]||[],c=w.event.special[t.type]||{};for(u[0]=t,n=1;n=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:w.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,Ae=/