Yidhra/TuiCss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into master

Browse Source
This commit is contained in:
Ellis 2022-11-15 09:25:08 -06:00 committed by GitHub
commit 07ade28249
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 718 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
.github/ISSUE_TEMPLATE/showcase-proposal.md vendored Normal file
View File

@ -0,0 +1,39 @@
---
name: Showcase Proposal
about: Proposal to publish a new content into wiki's Showcase page.
title: Proposal of showcase project - PROJECT_NAME
labels: showcase
assignees: ''
---
> Showcase proposal template
> Note: "*" fields are mandatory.
> Project Name: The name of the project that will be used as title of the section of the showcase.
Project Name *:
> Project Description: The description of the project that will be used as a paragraph after the title of the showcase.
Project Description *:
> Project Author: The author of the project that will be informed after the project description. (Keep if blank to don't show the author)
Project Author:
> Project Links: Links to access the project showcase. These links will be shown after project description.
Project Links:
> Project Images: Images of the project (can be the images with legends, or the links to it).
Project Images *:
> Additional Information: Other relevant information.
Additional Information:
> Feedback: If you want to give a feedback to the project, or a suggestion, please, enjoy this field!
Feedback:

19
.github/ISSUE_TEMPLATE/showcase-removal.md vendored Normal file
View File

@ -0,0 +1,19 @@
---
name: Showcase Removal
about: Remove a published content from wiki's Showcase page.
title: Removal of showcase project - PROJECT_NAME
labels: showcase
assignees: ''
---
> Remove showcase project template
> "*" fields are mandatory.
> Project Name: The name of the project to be removed from showcase page.
Project Name *:
> Reason: The reason for removal
Reason *:

18
CHANGELOG.md
View File

@ -1,6 +1,24 @@
# TuiCss ChangeLog
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
#### 2.1.1
Bugs
- Fixed memory leak due to setinterval for clocks: https://github.com/vinibiavatti1/TuiCss/pull/29
- Imported media queries classes to tuicss.scss: https://github.com/vinibiavatti1/TuiCss/issues/30
Examples
- Created the mobile example
#### 2.1.0
- .disabled classes
- Fixed the default radius border of inputs
- Removed pointer events of checkbox and radio button
- Tabs and buttons example pages
- Remove padding of inputs
- .no-border util
- Forecast example
#### 2.0.0
- Jquery removed (Now use vanilla Javascript)
- Chart example page

10
README.md
View File

@ -10,6 +10,8 @@
Text-based user interface CSS library
<br>
<a href="https://github.com/vinibiavatti1/TuiCss/wiki"><strong>-- Documentation --</strong></a>
<br>
<a href="https://github.com/vinibiavatti1/TuiCss/wiki/Showcase"><strong>-- Showcase --</strong></a>
<br><br>
<a href="https://badge.fury.io/js/tuicss">
<img src="https://badge.fury.io/js/tuicss.svg" alt="npm version badge">
@ -18,18 +20,18 @@
### About
TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a>, but some other frameworks were checked also to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start use this library!
TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very legible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a>, but some other frameworks were also checked to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start using this library!
<img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Demo.png" width="676">
### Getting Started
To start to use the TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. On the other hand, you can install the package with NPM using the following command:
To start to use TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. Alternatively, you can install the package with NPM using the following command:
```bash
$ npm install tuicss
```
For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the respoitory wiki.
For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the repository wiki.
### Documentation
Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute for this project.
Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute to this project.

83
dist/tuicss.css vendored
View File

@ -49,6 +49,60 @@ hr {
input, select, textarea {
width: 200px; }
/* Font (Options: 'Lucida Console' or 'DOS') */
/* Characters */
/* Theme */
/* Responsive */
/* Scrool */
/* Grid */
@media only screen and (max-width: 600px) {
.hide-on-small-only, .hide-on-small-and-down {
display: none !important; } }
@media only screen and (max-width: 992px) {
.hide-on-med-and-down {
display: none !important; } }
@media only screen and (min-width: 601px) {
.hide-on-med-and-up {
display: none !important; } }
@media only screen and (min-width: 600px) and (max-width: 992px) {
.hide-on-med-only {
display: none !important; } }
@media only screen and (min-width: 993px) {
.hide-on-large-only {
display: none !important; } }
@media only screen and (min-width: 1201px) {
.hide-on-extra-large-only {
display: none !important; } }
@media only screen and (min-width: 1201px) {
.show-on-extra-large {
display: block !important; } }
@media only screen and (min-width: 993px) {
.show-on-large {
display: block !important; } }
@media only screen and (min-width: 600px) and (max-width: 992px) {
.show-on-medium {
display: block !important; } }
@media only screen and (max-width: 600px) {
.show-on-small {
display: block !important; } }
@media only screen and (min-width: 601px) {
.show-on-medium-and-up {
display: block !important; } }
@media only screen and (max-width: 992px) {
.show-on-medium-and-down {
display: block !important; } }
/* Font (Options: 'Lucida Console' or 'DOS') */
/* Characters */
/* Theme */
@ -587,6 +641,9 @@ input, select, textarea {
.no-padding {
padding: 0px !important; }
.no-border {
border: none !important; }
.content {
padding: 12px; }
@ -603,6 +660,9 @@ input, select, textarea {
.cursor-default {
cursor: default !important; }
.disabled {
cursor: not-allowed !important; }
/* Components */
.tui-button {
display: inline-block;
@ -614,11 +674,14 @@ input, select, textarea {
cursor: pointer;
text-align: center;
box-shadow: 10px 10px black;
border-radius: 0px;
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.tui-button.disabled {
text-decoration: line-through; }
.tui-button:active {
background-color: #00a8a8 !important;
@ -648,13 +711,16 @@ input[type=button] {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.tui-checkbox.disabled {
color: #a8a8a8; }
.tui-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
top: 0px;
left: 0px; }
left: 0px;
pointer-events: none; }
.tui-checkbox span {
position: absolute;
@ -787,7 +853,10 @@ input[type=button] {
color: white;
outline: 0;
border: none;
padding: 1px; }
border-radius: 0px; }
.tui-input.disabled {
background-color: #a8a8a8;
color: black; }
.tui-input:focus {
background-color: yellow !important;
@ -888,13 +957,16 @@ input[type=button] {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.tui-radio.disabled {
color: #a8a8a8; }
.tui-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
top: 0px;
left: 0px; }
left: 0px;
pointer-events: none; }
.tui-radio span {
position: absolute;
@ -1172,6 +1244,8 @@ input[type=button] {
.tui-tab.active {
background-color: #a8a8a8;
color: #0000a8; }
.tui-tab.disabled {
text-decoration: line-through; }
.tui-tab-content {
display: none; }
@ -1182,6 +1256,9 @@ input[type=button] {
padding: 0px;
color: yellow;
outline: none; }
.tui-textarea.disabled {
background-color: #a8a8a8;
color: black; }
.tui-window {
background-color: #0000a8;

69
dist/tuicss.js vendored
View File

@ -30,6 +30,12 @@ function tabsController() {
for (const tab of tabs) {
// Add click listeners to them.
tab.addEventListener('click', function (e) {
// Check if the clicked tab is disabled
if(e.target.classList.contains("disabled")) {
return;
}
// Remove the 'active' class from any and all tabs.
for (const otherTab of tabs) {
otherTab.classList.remove('active');
@ -93,45 +99,44 @@ function datetimeController() {
// Kick off our clock interval stuff.
datetimeInterval();
setInterval(datetimeInterval, 1000);
// Synchronize time and set interval to control the clocks
setTimeout(() => {
setInterval(datetimeInterval, 1000);
}, 1000 - new Date().getMilliseconds());
function datetimeInterval() {
for (const clock of clocks) {
// Set the interval.
const interval = setInterval(() => {
// Technically we should have already returned earlier in the code, but to be on the safe side.
if (clock === null) {
clearInterval(interval);
return;
}
if (clock === null) {
continue;
}
// Get the format we want to display in the element.
let format = clock.getAttribute('data-format');
// Get the format we want to display in the element.
let format = clock.getAttribute('data-format');
// parse out the date and time into constants.
const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
// parse out the date and time into constants.
const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
// Replace based on the format.
format = format.replace('M', month);
format = format.replace('d', day);
format = format.replace('y', year);
format = format.replace('H', hour);
format = format.replace('h', hour12);
format = format.replace('m', minute);
format = format.replace('s', second);
format = format.replace('a', ampm);
// Replace based on the format.
format = format.replace('M', month);
format = format.replace('d', day);
format = format.replace('y', year);
format = format.replace('H', hour);
format = format.replace('h', hour12);
format = format.replace('m', minute);
format = format.replace('s', second);
format = format.replace('a', ampm);
// Show it in the element.
clock.innerHTML = format;
});
// Show it in the element.
clock.innerHTML = format;
}
}
}

2
dist/tuicss.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/tuicss.min.js vendored
View File

@ -1 +1 @@
function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});
function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=2===(o.getMonth()+"").length?o.getMonth()+1:"0"+(o.getMonth()+1),a=2===(o.getDay()+"").length?o.getDay()+1:"0"+(o.getDay()+1),s=o.getFullYear()+"",c=2===(o.getHours()+"").length?o.getHours():"0"+o.getHours(),l=(parseInt(c)+24)%"12"||"12",i=2===(o.getMinutes()+"").length?o.getMinutes():"0"+o.getMinutes(),d=2===(o.getSeconds()+"").length?o.getSeconds():"0"+o.getSeconds(),r=parseInt(c)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("y",s)).replace("H",c)).replace("h",l)).replace("m",i)).replace("s",d)).replace("a",r),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

34
examples/buttons.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
<title>Buttons Example</title>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
.tui-button {
width: 100% !important;
margin-bottom: 20px;
}
</style>
</head>
<style>
</style>
<body>
<div class="center" style="margin-top: 100px;">
<div class="tui-window blue-168" style="width: 200px;">
<fieldset class="tui-fieldset">
<legend>Buttons</legend>
<button class="tui-button">Button</button><br>
<input type="button" class="tui-button" value="Input" /><br>
<a href="#!" class="tui-button">Anchor</a><br>
<button class="tui-button orange-168 white-text">Custom</button><br>
<button class="tui-button red-168 disabled" disabled>Disabled</button><br>
<button class="tui-button" style="margin-bottom: 5px;">Focused</button><br>
</fieldset>
</div>
</div>
</body>
</html>

4
examples/chart.html
View File

@ -13,7 +13,7 @@
<div class="tui-window black-168 left-align">
<fieldset class="tui-fieldset">
<legend class="">Chart</legend>
<legend class="">Vertical Chart</legend>
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
<div class="tui-chart-display">
<div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
@ -49,7 +49,7 @@
<div class="tui-window black-168 left-align">
<fieldset class="tui-fieldset">
<legend class="">Horizontal Bar Chart</legend>
<legend class="">Horizontal Chart</legend>
<div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
<div class="tui-chart-display">
<div class="tui-chart-value red-168" style="width: 80%;">80%</div>

172
examples/forecast.html Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forecast Example</title>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
th, td {
padding: 10px!important;
border: none!important;
}
.tui-progress-bar {
margin-bottom: -4px;
}
</style>
</head>
<body>
<div class="tui-screen-800-600 bordered black-255" style="padding: 2px;">
<div class="red-168 full-width white-text" style="padding: 0px 10px;">
FORECAST 1.0
</div>
<br>
<table class="tui-table full-width no-border">
<thead class="white-255-text tui-border-double orange-168-border" style="margin-bottom: 5px;">
<tr class="left-align">
<th>#</th>
<th>LOCATION</th>
<th>TEMPERATURE</th>
<th>STATUS</th>
</tr>
</thead>
<tbody class="tui-border-double orange-168-border">
<tr>
<td class="red-168-text">1</td>
<td>Lisbon</td>
<td>
<span class="green-168-text">&nbsp;8.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 58%"></span>
</div>
]
</td>
<td class="blue-255-text">COLD</td>
</tr>
<tr>
<td class="red-168-text">2</td>
<td>Vancouver</td>
<td>
<span class="green-168-text">&nbsp;9.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 59%"></span>
</div>
]
</td>
<td class="blue-255-text">COLD</td>
</tr>
<tr>
<td class="red-168-text">3</td>
<td>Rio</td>
<td>
<span class="green-168-text">31.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 81%"></span>
</div>
]
</td>
<td class="yellow-255-text">WARM</td>
</tr>
<tr>
<td class="red-168-text">4</td>
<td>Sydney</td>
<td>
<span class="green-168-text">22.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 72%"></span>
</div>
]
</td>
<td class="yellow-255-text">WARM</td>
</tr>
<tr>
<td class="red-168-text">5</td>
<td>New York</td>
<td>
<span class="green-168-text">&nbsp;7.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 57%"></span>
</div>
]
</td>
<td class="blue-255-text">COLD</td>
</tr>
<tr>
<td class="red-168-text">6</td>
<td>London</td>
<td>
<span class="green-168-text">&nbsp;6.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 56%"></span>
</div>
]
</td>
<td class="blue-255-text">COLD</td>
</tr>
<tr>
<td class="red-168-text">7</td>
<td>Paris</td>
<td>
<span class="green-168-text">&nbsp;4.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 54%"></span>
</div>
]
</td>
<td class="cyan-255-text">VERY COLD</td>
</tr>
<tr>
<td class="red-168-text">8</td>
<td>Casablanca</td>
<td>
<span class="green-168-text">17.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 67%"></span>
</div>
]
</td>
<td class="green-168-text">NORMAL</td>
</tr>
<tr>
<td class="red-168-text">9</td>
<td>Reykjavik</td>
<td>
<span class="green-168-text">-1.0</span>
[
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
<span class="tui-progress red-255" style="width: 49%"></span>
</div>
]
</td>
<td class="cyan-255-text">VERY COLD</td>
</tr>
</tbody>
</table>
<div class="purple-168 full-width white-text" style="padding: 0px 10px; margin-top: 2px;">
<span class="red-168">HIGH</span>: Rio 31.0<br>
<span class="cyan-168">LESS</span>: Reykjavik -1.0
</div>
<br>
<div class="tui-window full-width no-shadow black">
<fieldset class="tui-fieldset center">
<button class="tui-button left">Previous</button>
<span class="center">9/201 records</span>
<button class="tui-button right">Next</button>
</fieldset>
</div>
<div class="red-168 full-width white-text" style="padding: 0px 10px;">
FORECAST 1.0
</div>
</div>
</body>
</html>

28
examples/input.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<html lang="en" class="tui-bg-blue-black tui-cursor">
<head>
<meta charset="UTF-8">
@ -8,7 +8,7 @@
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
.tui-input {
width: 300px;
width: 430px;
}
</style>
</head>
@ -18,6 +18,7 @@
<fieldset class="tui-fieldset">
<legend class="center">Form</legend>
Text.......: <input class="tui-input" value="text" /><br>
Disabled...: <input class="tui-input disabled" disabled value="disabled" /><br>
Number.....: <input class="tui-input" type="number" value="25" /><br>
Password...: <input class="tui-input" type="password" value="12345" /><br>
Color......: <input class="tui-input" type="color" value="#00FF00" /><br>
@ -25,6 +26,11 @@
<option>First</option>
<option>Second</option>
<option>Third</option>
<optgroup label="Group">
<option>First</option>
<option>Second</option>
<option>Third</option>
</optgroup>
</select><br>
Date.......: <input class="tui-input" type="date" value="2019-01-01" /><br>
Time.......: <input class="tui-input" type="datetime-local" value="2019-01-01T12:00" />
@ -39,8 +45,8 @@
<input type="checkbox" />
<span></span>
</label>
<label class="tui-checkbox">Third
<input type="checkbox" />
<label class="tui-checkbox disabled">Disabled
<input type="checkbox" disabled />
<span></span>
</label>
</fieldset>
@ -55,14 +61,17 @@
<input type="radio" name="radio" />
<span></span>
</label>
<label class="tui-radio">Third
<input type="radio" name="radio" />
<label class="tui-radio disabled">Disabled
<input type="radio" name="radio" disabled />
<span></span>
</label>
</fieldset>
<br>
Textarea<br>
<textarea class="tui-input" style="width: 100%"></textarea>
<textarea class="tui-input" style="width: 100%">Content ...</textarea>
<br>
Disabled Textarea<br>
<textarea class="tui-input disabled" disabled style="width: 100%">Disabled</textarea>
<br>
Multiple<br>
<select multiple class="tui-input" style="width: 100%">
@ -70,6 +79,11 @@
<option>First</option>
<option>Second</option>
<option>Third</option>
<optgroup label="Group">
<option>First</option>
<option>Second</option>
<option>Third</option>
</optgroup>
</select><br>
File <input class="tui-input full-width" type="file" />
</fieldset>

171
examples/mobile.html Normal file
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en" class="no-tui-scroll">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Example</title>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
.content {
padding: 40px 0px;
}
.post-img {
width: 100%;
border: 4px solid black;
}
.add-btn {
bottom: 0px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 999;
width: 50px;
height: 50px;
}
.post {
margin-bottom: 5px;
width: 100%;
}
</style>
</head>
<body class="tui-bg-blue-black relative">
<!-- Sidenav -->
<nav class="tui-sidenav absolute">
<ul>
<li>
<a href="#!">
<span class="red-168-text">P</span>rofile
<span class="tui-shortcut">ctrl+p</span>
</a>
</li>
<li>
<a href="#!">
<span class="red-168-text">S</span>earch
<span class="tui-shortcut">ctrl+s</span>
</a>
</li>
<li>
<a href="#!">
S<span class="red-168-text">t</span>ory
<span class="tui-shortcut">ctrl+t</span>
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
<nav class="tui-nav">
<span class="tui-datetime" data-format="h:m:s a"></span>
<ul>
<li class="tui-sidenav-button red-168-text">≡</li>
<li class="tui-dropdown hide-on-med-and-down">
<span class="red-168-text">P</span>rofile
<div class="tui-dropdown-content">
<ul>
<li>
<a href="#!">
<span class="red-168-text">A</span>vatar
</a>
</li>
<li>
<a href="#!">
P<span class="red-168-text">r</span>eferences
<span class="tui-shortcut">F3</span>
</a>
</li>
<li class="tui-dropdown block">
<span class="right">►</span>
<span class="red-168-text">M</span>ore
<div class="tui-dropdown-content">
<ul>
<li>
<a href="#!">
<span class="red-168-text">I</span>diom
</a>
</li>
<li>
<a href="#!">
<span class="red-168-text">B</span>locked Users
</a>
</li>
</ul>
</div>
</li>
<div class="tui-black-divider"></div>
<li>
<a href="#!">
<span class="red-168-text">S</span>tories
<span class="tui-shortcut">F10</span>
</a>
</li>
</ul>
</div>
</li>
<li class="tui-dropdown hide-on-med-and-down">
<span class="red-168-text">H</span>elp
</li>
</ul>
</nav>
<!-- Edit panel -->
<div class="content container">
<div class="row">
<div class="col s12 m12 l12 white-text center">
<h3>InstaTui</h3>
<hr>
The best old-school social network<br>
<span class="orange-255 black-text hide-on-small-only">(Try this in a mobile view)</span>
<span class="green-255 black-text hide-on-med-and-up">(√ Mobile view)</span>
</div>
</div>
<div class="row">
<div class="col s12 m4 l4">
<div class="post tui-window">
<fieldset class="tui-fieldset">
John Due says:
<hr>
<img class="post-img" src="resources/winxp.png" />
The winxp bg is amazing!
</fieldset>
</div>
</div>
<div class="col s12 m4 l4">
<div class="post tui-window">
<fieldset class="tui-fieldset">
Jane Due says:
<hr>
<img class="post-img" src="resources/disks.png" />
Bought my first 2 PC games!
</fieldset>
</div>
</div>
<div class="col s12 m4 l4">
<div class="post tui-window">
<fieldset class="tui-fieldset">
Astronaut says:
<hr>
<img class="post-img" src="resources/step.png" />
One small step for man one giant leap for mankind
</fieldset>
</div>
</div>
</div>
</div>
<!-- Status bar -->
<div class="tui-statusbar fixed" style="bottom: 0px;">
<ul>
<li class="right" style="margin-right: 10px;"><a href="#!">Search</a></li>
<li><a href="#!">Profile</a></li>
</ul>
</div>
<button class="tui-button red-168 white-255-text fixed add-btn">+</button>
</body>
</html>

BIN
examples/resources/disks.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
examples/resources/step.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
examples/resources/winxp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

40
examples/tabs.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
<title>Tabs Example</title>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
</head>
<style>
</style>
<body>
<div class="center" style="margin-top: 100px; margin-bottom: 100px;">
<div class="tui-panel white-168" style="width: 400px;">
<div class="tui-tabs red-168">
<ul>
<li><a class="tui-tab active" data-tab-content="tab-1-content">Tab 1</a></li>
<li><a class="tui-tab" data-tab-content="tab-2-content">Tab 2</a></li>
<li><a class="tui-tab disabled" data-tab-content="tab-3-content">Disabled</a></li>
</ul>
</div>
<div class="content black-255-text">
<div class="tui-tab-content" id="tab-1-content">
<h3>Content 1</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id. Temporibus, impedit reiciendis quidem ea quasi fugiat! Illum unde eaque porro sint voluptates corporis reiciendis tempora?
</div>
<div class="tui-tab-content" id="tab-2-content">
<h3>Content 2</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id.
</div>
<div class="tui-tab-content" id="tab-3-content">
<h3>Content 3</h3>
You could not see it!
</div>
</div>
</div>
</div>
</body>
</html>

14
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "tuicss",
"version": "2.0.1",
"version": "2.1.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -2876,9 +2876,9 @@
}
},
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"loud-rejection": {
@ -4852,9 +4852,9 @@
"dev": true
},
"y18n": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
"integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
"integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==",
"dev": true
},
"yallist": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "tuicss",
"version": "2.0.1",
"version": "2.1.1",
"description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
"keywords": [
"tui",

BIN
resources/TuiCss Form.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
resources/TuiCss Tabs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
resources/forecast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
resources/tuicss mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

4
src/components/button.scss
View File

@ -10,7 +10,11 @@
cursor: pointer;
text-align: center;
box-shadow: 10px 10px black;
border-radius: 0px;
@include disable-select;
&.disabled {
text-decoration: line-through;
}
}
.tui-button:active {
background-color: rgb(0, 168, 168)!important;

4
src/components/checkbox.scss
View File

@ -8,6 +8,9 @@
color: white;
padding-left: 30px;
@include disable-select;
&.disabled {
color: rgb(168, 168, 168)
}
}
.tui-checkbox input {
position: absolute;
@ -15,6 +18,7 @@
cursor: pointer;
top: 0px;
left: 0px;
pointer-events: none;
}
.tui-checkbox span {
position: absolute;

6
src/components/input.scss
View File

@ -3,7 +3,11 @@
color: white;
outline:0;
border: none;
padding: 1px;
border-radius: 0px;
&.disabled {
background-color: rgb(168, 168, 168);
color: black;
}
}
.tui-input:focus {
background-color: rgb(255, 255, 0)!important;

4
src/components/radio.scss
View File

@ -8,6 +8,9 @@
color: white;
padding-left: 30px;
@include disable-select;
&.disabled {
color: rgb(168, 168, 168)
}
}
.tui-radio input {
position: absolute;
@ -15,6 +18,7 @@
cursor: pointer;
top: 0px;
left: 0px;
pointer-events: none;
}
.tui-radio span {
position: absolute;

3
src/components/tabs.scss
View File

@ -20,6 +20,9 @@
background-color: rgb(168, 168, 168);
color: rgb(0, 0, 168);
}
&.disabled {
text-decoration: line-through;
}
}
.tui-tab-content {
display: none;

4
src/components/textarea.scss
View File

@ -4,4 +4,8 @@
padding: 0px;
color: rgb(255, 255, 0);
outline: none;
&.disabled {
background-color: rgb(168, 168, 168);
color: black;
}
}

69
src/js/tuicss.js
View File

@ -30,6 +30,12 @@ function tabsController() {
for (const tab of tabs) {
// Add click listeners to them.
tab.addEventListener('click', function (e) {
// Check if the clicked tab is disabled
if(e.target.classList.contains("disabled")) {
return;
}
// Remove the 'active' class from any and all tabs.
for (const otherTab of tabs) {
otherTab.classList.remove('active');
@ -93,45 +99,44 @@ function datetimeController() {
// Kick off our clock interval stuff.
datetimeInterval();
setInterval(datetimeInterval, 1000);
// Synchronize time and set interval to control the clocks
setTimeout(() => {
setInterval(datetimeInterval, 1000);
}, 1000 - new Date().getMilliseconds());
function datetimeInterval() {
for (const clock of clocks) {
// Set the interval.
const interval = setInterval(() => {
// Technically we should have already returned earlier in the code, but to be on the safe side.
if (clock === null) {
clearInterval(interval);
return;
}
if (clock === null) {
continue;
}
// Get the format we want to display in the element.
let format = clock.getAttribute('data-format');
// Get the format we want to display in the element.
let format = clock.getAttribute('data-format');
// parse out the date and time into constants.
const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
// parse out the date and time into constants.
const today = new Date();
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
const year = today.getFullYear() + '';
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
const hour12 = (parseInt(hour) + 24) % '12' || '12';
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
// Replace based on the format.
format = format.replace('M', month);
format = format.replace('d', day);
format = format.replace('y', year);
format = format.replace('H', hour);
format = format.replace('h', hour12);
format = format.replace('m', minute);
format = format.replace('s', second);
format = format.replace('a', ampm);
// Replace based on the format.
format = format.replace('M', month);
format = format.replace('d', day);
format = format.replace('y', year);
format = format.replace('H', hour);
format = format.replace('h', hour12);
format = format.replace('m', minute);
format = format.replace('s', second);
format = format.replace('a', ampm);
// Show it in the element.
clock.innerHTML = format;
});
// Show it in the element.
clock.innerHTML = format;
}
}
}

7
src/styles/util.scss
View File

@ -65,6 +65,9 @@
.no-padding {
padding: 0px!important;
}
.no-border {
border: none!important;
}
.content {
padding: 12px;
}
@ -78,3 +81,7 @@
.cursor-default {
cursor: default !important;
}
.disabled {
cursor: not-allowed!important;
}

1
src/tuicss.scss
View File

@ -1,5 +1,6 @@
/* Styles */
@import './styles/global.scss';
@import './styles/media.scss';
@import './styles/color.scss';
@import './styles/util.scss';