Skip to content
This repository was archived by the owner on Jan 16, 2024. It is now read-only.

Commit 0e83881

Browse files
akashp1712akashp1712
committed
Add Preview of content being downloaded
Added Treeview using pure CSS and Javascript DOM.
1 parent fc21b3d commit 0e83881

File tree

5 files changed

+157
-4
lines changed

5 files changed

+157
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
.project
22
.settings
3+
.idea

‎css/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -566,7 +566,7 @@ textarea{
566566
}
567567

568568
#download-section a{
569-
float:left;
569+
float:right;
570570
width:48%;
571571
}
572572

‎css/tree-view.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* Framework starts from here ...
3+
* ------------------------------
4+
*/
5+
6+
.tree-block{
7+
border-radius: 4px;
8+
border: 1px solid #ccc;
9+
border-top: 0;
10+
border-left: 0;
11+
}
12+
13+
.tree,
14+
.tree ul {
15+
margin:0 0 0 1em; /* indentation */
16+
padding:0;
17+
list-style:none;
18+
color:#369;
19+
position:relative;
20+
}
21+
.tree ul {margin-left:.5em} /* (indentation/2) */
22+
23+
.tree:before,
24+
.tree ul:before {
25+
content:"";
26+
display:block;
27+
width:0;
28+
position:absolute;
29+
top:0;
30+
bottom:0;
31+
left:0;
32+
border-left:1px solid;
33+
}
34+
35+
.tree li {
36+
margin:0;
37+
padding:0 1.5em; /* indentation + .5em */
38+
line-height:2em; /* default list item's `line-height` */
39+
font-weight:bold;
40+
position:relative;
41+
}
42+
43+
.tree li:before {
44+
content:"";
45+
display:block;
46+
width:10px; /* same with indentation */
47+
height:0;
48+
border-top:1px solid;
49+
margin-top:-1px; /* border top width */
50+
position:absolute;
51+
top:1em; /* (line-height/2) */
52+
left:0;
53+
}
54+
55+
.tree li:last-child:before {
56+
background:white; /* same with body background */
57+
height:auto;
58+
top:1em; /* (line-height/2) */
59+
bottom:0;
60+
}

‎index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<meta name="viewport" content="width=device-width,initial-scale=1">
1515
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
1616
<link rel="stylesheet" href="css/style.css">
17+
<link rel="stylesheet" href="css/tree-view.css">
1718
<script src="js/libs/modernizr-2.0.6.min.js"></script>
1819
</head>
1920
<body>
@@ -105,9 +106,14 @@ <h3>License (LICENSE.txt)</h3>
105106
</label>
106107
</div>
107108
</div>
109+
<div class="customize-section">
110+
<h3>What's inside?</h3>
111+
<div class="tree-block">
112+
<!--This section will be fed by javascript.-->
113+
</div>
114+
</div>
108115
<div id="download-section" class="clearfix">
109-
<a id="download-link" href="#" style="width:100%">Download it!</a>
110-
<!--<a id="preview-link" href="#">What's inside?</a>-->
116+
<a id="download-link" href="#">Download it!</a>
111117
</div>
112118
</div>
113119
</div> <!-- #main -->

‎js/script.js‎

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ $(function(){
2929
var params;
3030
var modules = [];
3131
var stylelang = '';
32+
var preModules = {
33+
'main_py': 'main.py', 'setup_py': setup_py, 'readme_rst': 'README.rst',
34+
'requirements_txt': 'requirements.txt', 'manifest_in': 'MANIFEST.in',
35+
'gitignore': '.gitignore', 'config_handler': config_handler,
36+
'argparse': 'argparse_helper.py',
37+
'mit_license': 'LICENSE.txt', 'apache_license': 'LICENSE.txt',
38+
'gnu_license': 'LICENSE.txt', 'empty_license': 'LICENSE.txt'
39+
}
3240

3341
/**********
3442
EVENTS
@@ -64,6 +72,7 @@ $(function(){
6472
function update(){
6573
updateModules();
6674
updateUrls();
75+
updateTree();
6776
}
6877

6978
function updateModules(){
@@ -94,7 +103,84 @@ $(function(){
94103

95104
$('#preview-link').attr('href', config.baseUrl + 'print&' + modeParam + params);
96105
$('#download-link').attr('href', config.baseUrl + modeParam + params);
97-
}
106+
}
107+
108+
function updateTree(){
109+
110+
var ul=document.createElement('ul');
111+
for (var i = 0, curModule; curModule = modules[i++];){
112+
113+
if (typeof preModules[curModule] === 'function') {
114+
ul.innerHTML = ul.innerHTML + preModules[curModule]();
115+
} else {
116+
if (curModule in preModules) {
117+
var li=document.createElement('li');
118+
ul.appendChild(li);
119+
li.innerHTML=li.innerHTML + preModules[curModule];
120+
}
121+
}
122+
}
123+
124+
var parentLI=document.createElement('li');
125+
parentLI.innerHTML=parentLI.innerHTML + 'sample.zip'; // root folder
126+
parentLI.appendChild(ul);
127+
128+
var parentUL=document.createElement('ul');
129+
parentUL.className = "tree";
130+
parentUL.appendChild(parentLI);
131+
132+
var x = document.getElementsByClassName("tree-block");
133+
x[0].innerHTML = '';
134+
x[0].appendChild(parentUL);
135+
136+
}
137+
138+
/**************************
139+
HELPERS FOR TREE-VIEW
140+
**************************/
141+
142+
function setup_py() {
143+
var setupModules = {'sample': ['__init__.py','main.py'], 'test': ['test_basic.py']};
144+
145+
var ulTemp = document.createElement('ul');
146+
var liSetupFile=document.createElement('li');
147+
liSetupFile.innerHTML='setup.py';
148+
ulTemp.appendChild(liSetupFile);
149+
generateChildTree(ulTemp, setupModules);
150+
151+
return ulTemp.innerHTML;
152+
}
153+
154+
function config_handler() {
155+
156+
var setupModules = {'config': ['__init__.py','cfg.ini', 'cfg_handler.py']};
157+
var ulTemp = document.createElement('ul');
158+
generateChildTree(ulTemp, setupModules);
159+
return ulTemp.innerHTML;
160+
}
161+
162+
function generateChildTree(ulTemp, setupModules) {
163+
164+
for (var key in setupModules) {
165+
166+
var liFolder = document.createElement('li');
167+
liFolder.innerHTML = key; // root folder
168+
169+
var ulInside = document.createElement('ul');
170+
ulInside.className = 'tree';
171+
172+
childList = setupModules[key];
173+
for (var i = 0, childValue; childValue = childList[i++];){
174+
var liChild = document.createElement('li');
175+
ulInside.appendChild(liChild);
176+
liChild.innerHTML = childValue;
177+
}
178+
179+
liFolder.appendChild(ulInside);
180+
ulTemp.appendChild(liFolder);
181+
}
182+
}
183+
98184

99185
/***********
100186
HELPERS

0 commit comments

Comments
 (0)