Skip to content

Commit 3876e5b

Browse files
santushnathsantushnath
committed
Initial commit
0 parents  commit 3876e5b

File tree

76 files changed

+71107
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+71107
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea
2+
**.DS_Store
3+
assets/.DS_Store

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2024 EasyFrontend
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 all
13+
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 THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Easy Frontend - Bootstrap Components
2+
3+
[![EasyFrontend Editor](https://assets.easyfrontend.com/tailwind/images/builder-details.png)](http://easyfrontend.com/builder)
4+
5+
6+
Enhance your app with [EasyFrontend](https://easyfrontend.com) pre-build [Bootstrap v5](https://easyfrontend.com/bootstrap), [Tailwind CSS](https://easyfrontend.com/tailwind), [React JS](https://easyfrontend.com/react-js)
7+
components for designing modern website.
8+
9+
## Repositories
10+
11+
- [Bootstrap v5 Components](https://github.com/EasyFrontend-com/html-bootstrap-components)
12+
- [Bootstrap with React JS Components](https://github.com/EasyFrontend-com/react-bootstrap-components)
13+
- [Tailwind CSS Components](https://github.com/EasyFrontend-com/html-tailwindcss-components)
14+
- [Tailwind with React JS Components](https://github.com/EasyFrontend-com/react-tailwindcss-components)
15+

‎assets/demo/jquery-google-sheet-to-json.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// xx -- review best practices for jquery plugins
2+
( function ( $, window, document, undefined ) {
3+
'use strict';
4+
5+
// take a row in googl-ese json and return it as name:value pairs
6+
function rowToObject(cell){
7+
8+
var returner = {};
9+
10+
var properties = Object.getOwnPropertyNames(cell);
11+
// sorting is important for catching numbered properties below
12+
// name sure the un-numbered name is first
13+
properties.sort();
14+
15+
properties.forEach(function(key){
16+
17+
var val = cell[key].$t;
18+
19+
// don't bother with empty values
20+
// which also means properties will not be set for empty values!
21+
if(val === '') return;
22+
23+
if(key.substring(0,4) === 'gsx$'){
24+
var name = key.substr(4);
25+
26+
// the only tricky thing is to turn the property value into an array
27+
// if the property name has variations that end in a number
28+
// Address, Address1, Address2... etc.
29+
var num = name.charAt(name.length - 1);
30+
if(/^\d+$/.test(num)){ // indexed propery
31+
name = name.substr(0, name.length - 1);
32+
var arr = returner[name];
33+
// if arr is not an array, but exists its the unnumbered value: ex. Address
34+
// replace its position with an array and push it in first
35+
if(!Array.isArray(arr)){
36+
returner[name] = [];
37+
if(arr) returner[name].push(arr);
38+
}
39+
returner[name].push(val);
40+
} else returner[name] = val; // the basic case for a name/value pair
41+
}
42+
});
43+
return returner;
44+
}
45+
46+
$.googleSheetToJSON = function googleSheetToJSON(id, worksheet){
47+
48+
var deferred = new $.Deferred();
49+
var url = [
50+
'https://spreadsheets.google.com/feeds/list',
51+
id,
52+
(worksheet || 'od6'), // od6 is the default id of the first worksheet
53+
'public/values?alt=json&callback=?'].join('/');
54+
55+
$.getJSON(url)
56+
.done(function(data){
57+
// try to fail w/ info if we cant get any data from the sheets
58+
// very errorable these sheets, using a spacer row for instance
59+
// under the headers and boom! no data. meh.
60+
if(!data.feed) throw new Error('Unable to retrieve google spreadsheet JSON data for ' + url);
61+
if(!data.feed.entry) throw new Error('Google spreadsheet seems empty for ' + url);
62+
deferred.resolve(data.feed.entry.map(rowToObject));
63+
})
64+
.fail(deferred.reject);
65+
66+
return deferred.promise();
67+
};
68+
69+
} )( jQuery, window, document );

‎assets/demo/script.js‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
const colorSchemes = [
2+
{ label: "Light", value: "light", style: 'background-color: #fff' },
3+
{ label: "Gray", value: "gray", style: 'background-color: #d8e2ef' },
4+
{ label: "Dark Gray", value: "dark-gray", style: 'background-color: #5e6e82' },
5+
{ label: "Dark", value: "dark", style: 'background-color: #000' },
6+
];
7+
8+
const primaryColorSchemes = [
9+
{ label: "Primary", value: "primary", style: 'background-color: rgb(0, 122, 255);' },
10+
{ label: "Orange", value: "orange", style: 'background-color: rgb(245, 158, 11);' },
11+
{ label: "Red", value: "red", style: 'background-color: rgb(178, 39, 39);' },
12+
];
13+
14+
const bootstrapHeadInfo = [
15+
// { url: "../../assets/packages/bootstrap/bootstrap.min.css", type: "style" },
16+
{ url: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css", type: "style" },
17+
// { url: "../../assets/packages/bootstrap/bootstrap.bundle.min.js", type: "script" },
18+
{ url: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js", type: "script" },
19+
];
20+
const tailwindHeadInfo = [
21+
{ url: "../../assets/packages/tailwind/tailwind.css", type: 'style' },
22+
];
23+
const headInfo = [
24+
// demo color scheme (REQUIRED)
25+
{ url: "https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap", type: "style" },
26+
{ url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap", type: "style" },
27+
{ url: "../../assets/demo/style.css", type: "style" },
28+
29+
{ url: "../../assets/packages/jquery-3.6.0.min.js", type: "script" },
30+
{ url: "https://fonts.googleapis.com/css2?family=Roboto&display=swap", type: "style" },
31+
{ url: "../../assets/packages/fontawesome/all.min.css", type: "style" },
32+
// {url: '../../assets/packages/owl-carousel/owl.carousel.min.js', type: 'script'},
33+
];
34+
35+
document.addEventListener("DOMContentLoaded", function () {
36+
var body = document.getElementsByTagName("body")[0];
37+
var topNavbar = document.createElement("div");
38+
var topNavbarLeft = document.createElement("div");
39+
var topNavbarRight = document.createElement("div");
40+
topNavbar.classList = "demo-top-navbar";
41+
42+
43+
var colorSchemeContent = document.createElement("div");
44+
colorSchemeContent.classList = "ezy-color-scheme-group";
45+
colorSchemes.forEach(function (item) {
46+
var button = document.createElement("button");
47+
button.title = item.label;
48+
button.style = item.style;
49+
button.onclick = function () {
50+
changeColorScheme(item.value);
51+
};
52+
colorSchemeContent.append(button);
53+
});
54+
topNavbarLeft.append(colorSchemeContent);
55+
56+
var primaryColorSchemeContent = document.createElement("div");
57+
primaryColorSchemeContent.classList = "ezy-primary-color-scheme-group";
58+
primaryColorSchemes.forEach(function (item) {
59+
var button = document.createElement("button");
60+
button.title = item.label;
61+
button.style = item.style;
62+
button.onclick = function () {
63+
changePrimaryColorScheme(item.value);
64+
};
65+
primaryColorSchemeContent.append(button);
66+
});
67+
topNavbarLeft.append(primaryColorSchemeContent);
68+
69+
// var backButton = document.createElement("a");
70+
// backButton.innerHTML = "Back";
71+
// backButton.href = "../../";
72+
// backButton.classList = "back-button";
73+
74+
var typeChangeButton = document.createElement("button");
75+
typeChangeButton.title = "Check Typo";
76+
typeChangeButton.innerHTML = "Aa";
77+
typeChangeButton.onclick = function () {
78+
if (document.body.classList.contains("ezy-checktypo")) {
79+
document.body.classList.remove("ezy-checktypo");
80+
} else {
81+
document.body.classList.add("ezy-checktypo");
82+
}
83+
};
84+
85+
topNavbarRight.append(typeChangeButton);
86+
// topNavbarRight.append(backButton);
87+
88+
topNavbar.append(topNavbarLeft);
89+
topNavbar.append(topNavbarRight);
90+
body.append(topNavbar);
91+
92+
changeColorScheme(window.localStorage.getItem("colorScheme") || "light");
93+
changePrimaryColorScheme(window.localStorage.getItem("primaryColorScheme") || "primary");
94+
95+
// $elements = document.querySelectorAll('/(ezy__[a-z]*[0-9]*)([\s\"])/');
96+
var elements = document.querySelectorAll('[class^="ezy"]');
97+
var existingElements = [];
98+
99+
elements.forEach(function (e) {
100+
if (typeof e.className === "string") {
101+
var matchClasses = e.className.match(/(ezy__[a-z]*[0-9]*)(\s|\"|$)/i);
102+
103+
if (matchClasses && matchClasses[0] && !existingElements.includes(matchClasses[0])) {
104+
var optionCardId = matchClasses[0];
105+
var componentName = optionCardId.replace("ezy__", ``);
106+
var componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
107+
existingElements.push(optionCardId);
108+
109+
var optionCard = document.createElement("div");
110+
optionCard.classList = "ezy-option-card";
111+
optionCard.innerHTML = `<span>ID: <b>${optionCardId}</b></span><span>Component Name: <b>${componentName}</b></span>`;
112+
113+
e.parentNode.insertBefore(optionCard, e);
114+
}
115+
}
116+
});
117+
});
118+
119+
function appendHeadInfo(frame) {
120+
if (frame === "bootstrap") {
121+
bootstrapHeadInfo.forEach(function (item) {
122+
_addHeadInfo(item);
123+
});
124+
} else if (frame === "tailwind") {
125+
tailwindHeadInfo.forEach(function (item) {
126+
_addHeadInfo(item);
127+
});
128+
}
129+
130+
headInfo.forEach(function (item) {
131+
_addHeadInfo(item);
132+
});
133+
}
134+
135+
function _addHeadInfo(item) {
136+
var head = document.getElementsByTagName("head")[0];
137+
138+
var element;
139+
if (item.type === "script") {
140+
element = document.createElement("script");
141+
element.src = item.url;
142+
} else if (item.type === "style") {
143+
element = document.createElement("link");
144+
element.href = item.url;
145+
element.rel = "stylesheet";
146+
}
147+
148+
element && head.append(element);
149+
}
150+
151+
function changeColorScheme(color) {
152+
document.body.classList.remove("light", "gray", "dark", "dark-gray");
153+
154+
switch (color) {
155+
case "light":
156+
document.body.classList.add("light");
157+
window.localStorage.setItem("colorScheme", "light");
158+
break;
159+
case "gray":
160+
document.body.classList.add("gray");
161+
window.localStorage.setItem("colorScheme", "gray");
162+
break;
163+
case "dark":
164+
document.body.classList.add("dark");
165+
window.localStorage.setItem("colorScheme", "dark");
166+
break;
167+
case "dark-gray":
168+
document.body.classList.add("dark-gray");
169+
window.localStorage.setItem("colorScheme", "dark-gray");
170+
break;
171+
default:
172+
break;
173+
}
174+
}
175+
176+
function changePrimaryColorScheme(color) {
177+
document.body.classList.remove("ezy-primary", "ezy-orange", "ezy-red");
178+
179+
switch (color) {
180+
case "primary":
181+
document.body.classList.add("ezy-primary");
182+
window.localStorage.setItem("primaryColorScheme", "primary");
183+
break;
184+
case "orange":
185+
document.body.classList.add("ezy-orange");
186+
window.localStorage.setItem("primaryColorScheme", "orange");
187+
break;
188+
case "red":
189+
document.body.classList.add("ezy-red");
190+
window.localStorage.setItem("primaryColorScheme", "red");
191+
break;
192+
default:
193+
break;
194+
}
195+
}
196+
197+
var checkReady = function (callback) {
198+
if (window.jQuery) {
199+
callback(jQuery);
200+
} else {
201+
window.setTimeout(function () {
202+
checkReady(callback);
203+
}, 1000);
204+
}
205+
};

0 commit comments

Comments
 (0)