Skip to content

Commit 60f6bac

Browse files
negarjfnegarjf
authoredOct 20, 2020
[Feature] generate navbar dynamically (#118)
* create a variable to store categories * create a variable to store tools * register variables globaly in footer * create a template class to generate navbar items dynamiclly * initiate navbar template in the general js file * update README and CONTRIBUTING files * provide a template example for tool's html file with all the necessary scripts and elements * rename example file to boilerplate * Update README and CONTRIBUTING files * Revert "Color Converter Added (#119)" This reverts commit fe26108.
1 parent 2564b63 commit 60f6bac

File tree

8 files changed

+157
-292
lines changed

8 files changed

+157
-292
lines changed
 

‎CONTRIBUTING.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
- Please make sure your folder is in any one of the Folder `conversionTools`,`mathmeticlaTools`,`financeTools` or `dailyUseTools`. For example if you want to work on length conversion tool then place your folder in the `conversionTools` folder. The list for tools with their respective folder is mentioned above
1919
- The name of your folder should be the name o the tool you are working on for example: if you want to work on length conversion tool, Then name your folder would be `length`.
2020
- Under your folder name your files as follows. For length conversion tool the files would be `length.html`, `length.css`,`length.js`
21+
- Copy the content of `boilerplate.template` to your tool's html file and follow the comments marked with **$**.
2122
- At the end link your files properly
2223
- Add your name to the footer of your tool's html you are working on. For example if you are working on length conversion tool then
2324
add your name in the footer of `lenght.html`.
24-
- `Add navbar` in your tool's HTML file you can `copy the navbar from index.html`
2525
- `Add screenShot` of your Tool in PR Message and in your Tool's Folder.
2626
- At the end add your tool to the `assets/config/tools.js` under the related category
2727

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ If you want to add Color Gradients to your code [click here](https://backgroundg
134134
- Please make sure your folder is in any one of the Folder `conversionTools`,`mathmeticlaTools`,`financeTools` or `dailyUseTools`. For example if you want to work on length conversion tool then place your folder in the `conversionTools` folder. The list for tools with their respective folder is mentioned above
135135
- The name of your folder should be the name o the tool you are working on for example: if you want to work on length conversion tool, Then name your folder would be `length`.
136136
- Under your folder name your files as follows. For length conversion tool the files would be `length.html`, `length.css`,`length.js`
137-
- At the end add your tool to the `assets/config/tools.js` under the related category
137+
- Copy the content of `boilerplate.template` to your tool's html file and follow the comments marked with **$**.
138+
- At the end add your tool to the `assers/config/tools.js` under the related category
138139
- Add your name to the footer of your tool's html you are working on. For example if you are working on length conversion tool then
139140
add your name in the footer of `lenght.html`.
140141

‎assets/scripts/app.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* General App Scrips
3+
* Notice: Only general scripts should be placed here
4+
* Created by Negar Jamalifard
5+
* */
6+
7+
(function (){
8+
const template = new Templates();
9+
template.appendNavItems();
10+
})()

‎assets/scripts/templates.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Template class to generate html templates
3+
*/
4+
class Templates {
5+
constructor(categories = UTILITY_CATEGORIES, tools = UTILITY_TOOLS) {
6+
this.categories = categories;
7+
this.tools = tools;
8+
}
9+
10+
// ------- TEMPLATES --------
11+
static navItemTemplate (categoryTitle, dropdownMenu){
12+
return (
13+
`<div class="btn-group d-none d-md-block py-2">
14+
<button
15+
type="button"
16+
class="btn btn-link text-light dropdown-toggle text-decoration-none"
17+
data-toggle="dropdown">
18+
${categoryTitle}
19+
</button>
20+
<div class="dropdown-menu">
21+
${dropdownMenu}
22+
</div>
23+
</div>`
24+
)
25+
};
26+
27+
static dropdownMenuTemplate (url, title) {
28+
return (`<a href="${url}" class="dropdown-item">${title}</a>`)
29+
}
30+
31+
32+
// ------- NODE GENERATOR --------
33+
generateDropdownList (category) {
34+
const tools = this.tools[category];
35+
if(!tools && !tools.length) {
36+
return [];
37+
}
38+
39+
return tools.map(tool => Templates.dropdownMenuTemplate(category + tool.url, tool.title));
40+
}
41+
42+
generateNavItems () {
43+
if(!this.categories) {
44+
return [];
45+
}
46+
47+
return Object.keys(this.categories).map(category => {
48+
return Templates.navItemTemplate(category, this.generateDropdownList(category).join(''));
49+
})
50+
}
51+
52+
53+
// ------- APPEND TO DOM --------
54+
appendNavItems() {
55+
const navItems = this.generateNavItems();
56+
const navItemsString = navItems.join('');
57+
58+
$('#uNavbar').children().first().after(navItemsString);
59+
}
60+
61+
}
62+

‎boilerplate.template

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#6610f2">
7+
<link rel="icon" type="image/ico" href="../../favicon.ico"/>
8+
<title><!--$TOOL TITLE$--> | Utility Website</title>
9+
10+
<!-- Styles -->
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
12+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
13+
<link rel="stylesheet" href="../../assets/styles/style.css">
14+
15+
<!--$YOUR TOOL STYLES$-->
16+
</head>
17+
<body>
18+
<!-- Navbar -->
19+
<nav class="site-header sticky-top py-1 text-light">
20+
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center" id="uNavbar">
21+
<a class="py-2 text-light" href="../../index.html">
22+
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
23+
</a>
24+
<!-- Dynamic Navbar Elements -->
25+
<div class="btn-group d-none d-md-block py-2">
26+
<button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
27+
</div>
28+
</div>
29+
</nav>
30+
31+
<section class="container mb-5">
32+
<!--$YOUR TOOL$-->
33+
</section>
34+
35+
<!-- Footer -->
36+
<footer class="border-top py-3 px-4">
37+
<div class="row align-items-center">
38+
<div class="col-md-6">
39+
<p class="m-0">Copyright &copy; 2020 codeezzi</p>
40+
<p class="m-0">Page Created by
41+
<!--$YOUR NAME AND/OR GITHUB LINK$-->
42+
</p>
43+
44+
</div>
45+
<div class="col-md-6 text-md-right">
46+
<a href="https://backgroundgradients.com/" class="text-dark" target="blank">Background Gradients</a>
47+
<span class="text-muted mx-2">|</span>
48+
<a href="../../contributors.html" class="text-dark" target="blank">Contributors</a>
49+
<span class="text-muted mx-2">|</span>
50+
<a href="#" class="text-dark">Terms of Use</a>
51+
<span class="text-muted mx-2">|</span>
52+
<a href="#" class="text-dark">Privacy Policy</a>
53+
</div>
54+
</div>
55+
</footer>
56+
<!-- Footer End -->
57+
58+
<!--Scripts-->
59+
<!-- Global Scripts: Should load in all pages -->
60+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
61+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
62+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
63+
<script src="../../assets/config/categories.js"></script>
64+
<script src="../../assets/config/tools.js"></script>
65+
<script src="../../assets/scripts/templates.js"></script>
66+
<script src="../../assets/scripts/app.js"></script>
67+
<!-- END of Global Scripts -->
68+
69+
70+
<!--$YOUR CUSTOM SCRIPTS$-->
71+
72+
</body>
73+
</html>

‎dailyUseTools/colorConverter/colorConverter.html

-226
This file was deleted.

‎dailyUseTools/colorConverter/colorConverter.png

-123 KB
Binary file not shown.

‎index.html

+9-64
Original file line numberDiff line numberDiff line change
@@ -15,77 +15,16 @@
1515
<body>
1616
<!-- Navbar -->
1717
<nav class="site-header sticky-top py-1 text-light">
18-
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
18+
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center" id="uNavbar">
1919
<a class="py-2 text-light" href="index.html">
2020
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
2121
</a>
2222

23-
<div class="btn-group d-none d-md-block py-2">
24-
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Conversion Tools</button>
25-
<div class="dropdown-menu">
26-
27-
<a href="/conversionTools/Angle_Conversion/angleconversions.html" class="dropdown-item">Angle Conversion Tool</a>
28-
<a href="/conversionTools/density/density.html" class="dropdown-item">Density Conversion Tool</a>
29-
<a href="/conversionTools/Energy/energy.html" class="dropdown-item">Energy Conversion Tool</a>
30-
<a href="/conversionTools/fuelEfficiency/fuel.html" class="dropdown-item">Fuel Efficiency Calculator</a>
31-
<a href="/conversionTools/image/image.html" class="dropdown-item">Image Conversion Tool</a>
32-
<a href="/conversionTools/imagePdf/imagePdf.html" class="dropdown-item">Image to PDF Conversion Tool</a>
33-
<a href="/conversionTools/length/length.html" class="dropdown-item">Length Conversion Tool</a>
34-
<a href="/conversionTools/power/power.html" class="dropdown-item">Power Conversion Tool</a>
35-
<a href="/conversionTools/pressure/pressure.html" class="dropdown-item">Pressure Conversion Tool</a>
36-
<a href="/conversionTools/temperture/temperture.html" class="dropdown-item">Temperture Conversion Tool</a>
37-
<a href="/conversionTools/Torque/torque.html" class="dropdown-item">Torque Conversion Tool</a>
38-
<a href="#" class="dropdown-item">Demo</a>
39-
40-
</div>
41-
</div>
23+
<!-- Dynamic Navbar Elements -->
4224

4325
<div class="btn-group d-none d-md-block py-2">
44-
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Daily Use Tools</button>
45-
<div class="dropdown-menu">
46-
47-
<a href="/dailyUseTools/bmicalculator/bmi-calculator.html" class="dropdown-item">BMI Calculator</a>
48-
<a href="/dailyUseTools/notes/notes.html" class="dropdown-item">Take Notes</a>
49-
<a href="/dailyUseTools/passwordGenerator/passwordGenerator.html" class="dropdown-item">Password Generator</a>
50-
<a href="#" class="dropdown-item">Demo</a>
51-
52-
</div>
26+
<button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
5327
</div>
54-
<div class="btn-group d-none d-md-block py-2">
55-
<button
56-
type="button"
57-
class="btn btn-link text-light dropdown-toggle text-decoration-none"
58-
data-toggle="dropdown">
59-
Finance Tools
60-
</button>
61-
<div class="dropdown-menu">
62-
63-
<a href="/financeTools/compound-interest-calculator/compoundinterestcalculator.html" class="dropdown-item">Compound Interest Calculator</a>
64-
<a href="/financeTools/discountcalculator/discount.html" class="dropdown-item">Discount Calculator</a>
65-
<a href="/financeTools/emiCalculator/emi-calculator.html" class="dropdown-item">EMI Calculator</a>
66-
<a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="dropdown-item">Mortgage Calculator</a>
67-
<a href="/financeTools/retirementcalaculator/index.html" class="dropdown-item">Retirement Calculator</a>
68-
<a href="/financeTools/service-tax-calculator/tools.html" class="dropdown-item">Service Tax Calculator</a>
69-
<a href="#" class="dropdown-item">Demo</a>
70-
71-
</div>
72-
</div>
73-
74-
<div class="btn-group d-none d-md-block py-2">
75-
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Mathematical Tools</button>
76-
<div class="dropdown-menu">
77-
78-
<a href="/mathmeticalTools/percentageCalculator/percentageCalculator.html" class="dropdown-item">Percentage Calculator</a>
79-
<a href="/mathmeticalTools/decimalToFraction/decimalToFraction.html" class="dropdown-item">Decimal to Fraction</a>
80-
<a href="#" class="dropdown-item">Demo</a>
81-
82-
</div>
83-
</div>
84-
85-
<div class="btn-group d-none d-md-block py-2">
86-
<button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
87-
88-
</div>
8928

9029
</div>
9130
</nav>
@@ -267,10 +206,16 @@ <h5 class="card-title">Mortgage Calculator</h5>
267206
<!-- Footer End -->
268207

269208
<!--Scripts-->
209+
210+
<!-- Global Scripts: Should load in all pages -->
270211
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
271212
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
272213
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
273214
<script src="assets/config/categories.js"></script>
274215
<script src="assets/config/tools.js"></script>
216+
<script src="assets/scripts/templates.js"></script>
217+
<script src="assets/scripts/app.js"></script>
218+
<!-- END of Global Scripts -->
219+
275220
</body>
276221
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.