├── assets
    └── logo.png
├── examples
    ├── CSS
    │   ├── pacifico-regular-webfont.woff
    │   ├── pacifico-regular-webfont.woff2
    │   ├── stylesheet.css
    │   └── main.css
    ├── JS
    │   ├── main.js
    │   └── rotten.js
    └── index.html
├── .github
    ├── SECURITY.md
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    └── CONTRIBUTING.md
├── package.json
├── LICENSE.md
├── README.md
├── rotten.min.js
├── DOCSv1.9.0.md
├── DOCUMENTATION.md
├── rotten.js
└── development
    └── rotten.js


/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nguyenphuminh/rottenjs/HEAD/assets/logo.png


--------------------------------------------------------------------------------
/examples/CSS/pacifico-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nguyenphuminh/rottenjs/HEAD/examples/CSS/pacifico-regular-webfont.woff


--------------------------------------------------------------------------------
/examples/CSS/pacifico-regular-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nguyenphuminh/rottenjs/HEAD/examples/CSS/pacifico-regular-webfont.woff2


--------------------------------------------------------------------------------
/.github/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # Security Policy
 2 | 
 3 | ## Supported Versions
 4 | 
 5 | | Version | Supported          |
 6 | | ------- | ------------------ |
 7 | | 1.x.x   | :white_check_mark: |
 8 | | 1.2.x   | :x:                |
 9 | | 0.x.x   | :x:                |
10 | 


--------------------------------------------------------------------------------
/examples/CSS/stylesheet.css:
--------------------------------------------------------------------------------
 1 | /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 26, 2020 */
 2 | 
 3 | 
 4 | 
 5 | @font-face {
 6 |     font-family: 'pacificoregular';
 7 |     src: url('pacifico-regular-webfont.woff2') format('woff2'),
 8 |          url('pacifico-regular-webfont.woff') format('woff');
 9 |     font-weight: normal;
10 |     font-style: normal;
11 | 
12 | }


--------------------------------------------------------------------------------
/examples/JS/main.js:
--------------------------------------------------------------------------------
 1 | function add() {
 2 | 	name.input('',function(){
 3 | 		alert('Task is empty!');
 4 | 	},function(){
 5 | 		content = content + "<div class='taskbox' onmouseleave='this.style.backgroundColor=\"white\"' onmouseenter='this.style.backgroundColor=\"#efefef\"' onclick=\"this.outerHTML='';content=tasklist.html();localStorage.setItem('stuff', tasklist.html());\">" + name.input() + "<br/></div>";
 6 | 	});
 7 |     tasklist.html(content);
 8 |     localStorage.setItem('stuff', content);
 9 | }
10 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | Contributing to RottenJS!
 2 | ======================
 3 | 
 4 | Thanks for your interests in RottenJS, if you want to contribute to the project, please consider looking at the following notes!
 5 | 
 6 | ## First notes
 7 | Please contribute to "development/rotten.js".
 8 | 
 9 | ## Language
10 | We would prefer English as the main language for contributing, but you can use Vietnamese! 
11 | 
12 | ## Writing a Good Pull Request
13 | 
14 | - Make sure to write a rich description showing changes that you made, the upgrades on the project, what it would do, etc.
15 | 
16 | - Name your pull request nicely.
17 | 
18 | - Don't use any NSFW or weird contents in a pull request.
19 | 
20 | 
21 | That's all, thanks for your time with RottenJS!
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rottenjs",
 3 |   "version": "2.6.6",
 4 |   "description": "A light-weight Javascript library for DOM manipulation",
 5 |   "main": "rotten.min.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/nguyenphuminh/rottenjs.git"
12 |   },
13 |   "keywords": [
14 |     "javascript",
15 |     "javascript-library",
16 |     "javascript-framework",
17 |     "dom-manipulation"
18 |   ],
19 |   "author": "Nguyen Phu Minh",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/nguyenphuminh/rottenjs/issues"
23 |   },
24 |   "homepage": "https://github.com/nguyenphuminh/rottenjs#readme"
25 | }
26 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/examples/CSS/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 | 	font-family: helvetica;
 3 | }
 4 | 
 5 | body {
 6 | 	margin:0;
 7 | 	text-shadow: 2px 2px 4px darkgray;
 8 | 	background-color: lightgray;
 9 | }
10 | 
11 | .taskbox{
12 | 	width: 30%;
13 | 	padding: 1%;
14 | 	border:2px solid black;
15 | 	border-radius: 5px;
16 | 	background-color: white;
17 | 	margin-top: 1%;
18 | }
19 | .content{
20 | 	margin-top: 6%;
21 | }
22 | .header{
23 | 	color:#5246ab;
24 | 	font-family: pacificoregular;
25 | 	font-size: 130px;
26 | }
27 | .tasktitle{
28 | 	font-family: helvetica;
29 | 	font-size:30px;
30 | }
31 | 
32 | input{
33 | 	width:30%;
34 | 	border-radius: 5px;
35 | 	border:2px solid black;
36 | }
37 | button{
38 | 	margin-left: 3px;
39 | 	border-radius: 5px;
40 | 	border:2px solid #5246ab;
41 | 	background-color: #5246ab;
42 | 	color:white;
43 | 	cursor: pointer;
44 | 	transition: 0.3s;
45 | }
46 | button:hover{
47 | 	background-color: white;
48 | 	color:#5246ab;
49 | }
50 | 
51 | @media screen and (max-width: 700px) {
52 | 	.taskbox{
53 | 		width: 60%;
54 | 	}
55 | 	input{
56 | 		width:40%;
57 | 	}
58 | }


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2020 Nguyen Phu Minh
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<script src="./js/rotten.js"></script>
 5 | 	<meta charset="utf-8">
 6 | 	<link rel="stylesheet" type="text/css" href="./css/main.css">
 7 | 	<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">
 8 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 | </head>
10 | <body style="margin:0">
11 | 	<script type="text/javascript" src='./js/main.js'></script>
12 | 	<div class="content" align="center">
13 | 		<div class="header"></div>
14 | 		<br/>
15 | 		<br/>
16 | 		<br/>
17 | 		<input placeholder="Task" class='name'>
18 | 		<button onclick='add();'>Add</button><button onclick="localStorage.removeItem('stuff');tasklist.text('');content='';">Clear</button>
19 | 		<br/>
20 | 		<br/>
21 | 		<br/>
22 | 		<div class='tasktitle'>Tasks:</div>
23 | 		<br/>
24 | 		<div class='task'></div>
25 | 		<br/>
26 | 		<br/>
27 | 		<div>Note: Click on the task to clear it!</div>
28 | 		<br/>
29 | 		<p class='spin' style="position: fixed;bottom:1%;left:1%;">RJS</p>
30 | 	</div>
31 | 
32 | 	<script type="text/javascript">
33 | 		rDev.mobile(function(){
34 | 			alert('You are running this using a mobile device or emulator!');
35 | 		});
36 | 		let name = rt('.name');
37 | 		let tasklist = rt('.task');
38 | 		if (localStorage.getItem('stuff') != null){
39 | 			content = localStorage.getItem('stuff');
40 | 		} else {
41 | 			content='';
42 | 		}
43 | 		tasklist.html(content);
44 | 
45 | 		let obj=rt('.spin');
46 | 		obj.rotate(-1,{
47 | 			loop:true,
48 | 			delay:1,
49 | 			end:false
50 | 		});
51 | 
52 | 		let obj2=rt('.header');
53 | 		obj2.typing({
54 | 			str:'Todos',
55 | 			speed:100,
56 | 			clrPrev:true,
57 | 		});
58 | 	</script>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 	<img src='assets/logo.png'/>
 3 | 	<br/>
 4 | 	<p>A simple, light-weight Javascript library for DOM manipulation and UI development</p>
 5 | 	<br/>
 6 | 	<a href="https://github.com/nguyenphuminh/rottenjs/blob/master/LICENSE.md"><img src="https://img.shields.io/badge/license-MIT-orange.svg"/></a>
 7 | 	<a href="https://bundlephobia.com/package/rottenjs@2.6.5"><img src="https://badgen.net/bundlephobia/minzip/rottenjs"/></a>
 8 | 	<a href="https://npmcharts.com/compare/rottenjs?minimal=true"><img src="https://img.shields.io/npm/dm/rottenjs.svg?sanitize=true" alt="Downloads"></a>
 9 | 	<a href="https://www.npmjs.com/package/rottenjs"><img src="https://img.shields.io/npm/v/rottenjs.svg?sanitize=true" alt="Version"></a>
10 | 	<a href="https://github.com/nguyenphuminh/rottenjs/blob/main/.github/CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
11 | 	<a href="https://github.com/nguyenphuminh/rottenjs/search?l=javascript"><img alt="language" src="https://img.shields.io/badge/language-Javascript-purple.svg"></a>
12 | </div>
13 | 
14 | ## What is RottenJS ?
15 | RottenJS is a light-weight(2.6kb), all-in-one Javascript library. It can be used for DOM manipulation, but it also provides many utilites for you to create websites with charm. The library is recommended for personal projects as its very light and scale well with medium-sized websites, but not recommended for big websites that are in production. RottenJS is a perfect fit for you if you want to create projects quick and easy, or if you just want to mess around with open-source libraries. 
16 | 
17 | ## Comparision with other libraries/frameworks
18 | 
19 | | Size               | Rotten.js   | Cash        | Zepto 1.2.0 | jQuery Slim 3.4.1 |
20 | | ------------------ | ----------- | ----------- | ----------- | ----------------- |
21 | | Unminified         | **13.9 KB** | 36.5 KB     | 58.7 KB     | 227 KB            |
22 | | Minified           | **7.8 KB**  | 16 KB       | 26 KB       | 71 KB             |
23 | | Minified & Gzipped | **2.6 KB**  | 6 KB        | 9.8 KB      | 24.4 KB           |
24 | 
25 | When it comes to size, Rotten.js totally shine, so if you want your website to be fast and light, Rotten.js can be a great option!
26 | 
27 | ## Getting started
28 | ### Installation
29 | You can clone RottenJS with git:
30 | 
31 | 	git clone https://github.com/nguyenphuminh/RottenJS.git
32 | 
33 | Or you can just pull it from unpkg.com by adding this to your .html file:
34 | 
35 | 	<script src="https://unpkg.com/rottenjs"></script>
36 | 	
37 | Or from npm:
38 | 
39 | 	npm install rottenjs
40 | 
41 | If you're using NodeJS, please consider check out this code first:
42 | 
43 | 	// Import rottenjs to "rotten"
44 | 	const rotten = require("rottenjs");
45 | 	// Using rt()
46 | 	const rt = rotten.rt;
47 | 	// const rdom = rotten.rdom;
48 | 	// const rUI = rotten.rUI;
49 | 	// const rDev = rotten.rDev;
50 | 
51 | ### Documentations
52 | * <a href="DOCUMENTATION.md">Current</a>
53 | * <a href="DOCSv1.9.0.md">1.x versions</a>
54 | 
55 | ## Pros and Cons
56 | ### Pros
57 | * Written in pure Javascript, easy to setup and use, no toolings needed.
58 | * Lightweight.
59 | * All-in-one.
60 | 
61 | ### Cons
62 | * Not optimized.
63 | * Works not that well with big sites
64 | 
65 | ## Who is using RottenJS ?
66 | * <a href="https://github.com/joliorg">Jolio</a>
67 | * <a href="https://github.com/FreakC-Foundation">FreakC</a>
68 | 
69 | ## Social medias
70 | * <a href="https://www.facebook.com/Rottenjs-The-Javascript-Library-112227464032668">Facebook</a>
71 | * <a href="https://rottenjs.herokuapp.com">Website</a>
72 | 
73 | ## Copyrights and License
74 | Copyrights © 2020 Nguyen Phu Minh
75 | 
76 | This library is licensed under the MIT License
77 | 


--------------------------------------------------------------------------------
/rotten.min.js:
--------------------------------------------------------------------------------
1 | function rt(e){"use strict";const t={el:document.querySelectorAll(e),attr:(e,l)=>{if(null==e){let e=[];return t.el.forEach(t=>e.push(t.attributes)),e}if(null==l)return t.el[0].getAttribute(e);t.el.forEach(t=>t.setAttribute(e,l))},mulAttr:e=>t.el.forEach(t=>e.forEach(e=>t.setAttribute(e[0],e[1]))),mulProp:e=>e.forEach(e=>t.el[0].setAttribute(e[0],e[1])),prop:(e,l)=>null==e?t.el[0].attributes:null==l?t.el[0].getAttribute(e):void t.el[0].setAttribute(e,l),mount:(e,l)=>{if(null!=e){let r=document.querySelector(e);r.innerHTML="back"===l?t.el[0].outerHTML+r.innerHTML:r.innerHTML+t.el[0].outerHTML}},removeAttr:e=>t.el.forEach(t=>t.removeAttribute(e)),removeProp:e=>t.el[0].removeAttribute(e),css:(e,l)=>{t.el.forEach(t=>{null===t.getAttribute("style")&&t.setAttribute("style","");let r=`;${t.getAttribute("style")};${e}:${l}`;t.setAttribute("style",r)})},mulCSS:e=>{t.el.forEach(t=>e.forEach(e=>{null===t.getAttribute("style")&&t.setAttribute("style","");let l=`;${t.getAttribute("style")};${e[0]}:${e[1]}`;t.setAttribute("style",l)}))},style:e=>{if(null==e)return t.el[0].getAttribute("style");t.el.forEach(t=>t.setAttribute("style",e))},hide:(e,l)=>{e=e||0,setTimeout(()=>{t.el.forEach(e=>e.style.display="none"),"function"==typeof l&&l()},e)},show:(e,l)=>{e=e||0,setTimeout(()=>{t.el.forEach(e=>e.style.display=""),"function"==typeof l&&l()},e)},fadeOut:(e,l)=>{null==e&&(e=0),t.el.forEach(t=>{t.style.opacity="0",t.style.transition=`opacity ${e}ms`}),setTimeout(l,e)},fadeIn:(e,l)=>{null==e&&(e=0),t.el.forEach(t=>{t.style.opacity="1",t.style.transition=`opacity ${e}ms`}),setTimeout(l,e)},text:e=>{if(null==e)return t.el[0].innerText;t.el.forEach(t=>t.innerText=e)},html:e=>{if(null==e)return t.el[0].innerHTML;t.el.forEach(t=>t.innerHTML=e)},body:e=>{if(null==e)return t.el[0].outerHTML;t.el.forEach(t=>t.outerHTML=e)},on:(e,l)=>t.el.forEach(t=>t.addEventListener(e,l)),off:(e,l)=>t.el.forEach(t=>t.removeEventListener(e,l)),append:e=>t.el.forEach(t=>t.innerHTML=`${t.innerHTML}${e}`),prepend:e=>t.el.forEach(t=>t.innerHTML=`${e}${t.innerHTML}`),remove:()=>t.el.forEach(e=>e.remove()),empty:()=>t.el.forEach(e=>e.innerHTML=""),input:(e,l,r)=>{let n=!1;if(null==e&&null==l&&null==r)return t.el[0].value;if("string"==typeof e)e===t.el[0].value?l():r();else if(Array.isArray(e)){for(i=0;i<e.length;i++)if(e[i]==t.el[0].value){n=!0,l();break}n||r()}},inputs:(e,l)=>{let r=!1;for(let l=0;l<e.length;l++)if("string"==typeof e[l].value)t.el[0].value===e[l].value&&(e[l].callback(),r=!0);else if(Array.isArray(e[l].value))for(let n=0;n<value.length;n++)if(e[l].value[n]===t.el[0].value){r=!0,e[l].callback();break}r||"function"!=typeof l||l()},val:e=>{if(null==e)return t.el[0].value;t.el[0].value=e},check:(e,l)=>{if("function"!=typeof e||"function"!=typeof l)return t.el[0].checked;t.el[0].checked?e():l()},click:e=>"function"==typeof e&&t.el.forEach(t=>t.onclick=(()=>e())),hover:(e,l)=>{null!=e&&void 0!==l&&null!==e&&t.el.forEach(t=>{t.onmouseleave=(()=>e()),t.onmouseenter=(()=>l())})},title:e=>{if("undefined"==typeof title||null===title)return t.el[0].title;t.el.forEach(t=>t.title=e)},scroll:()=>t.el[0].scrollIntoView({behavior:"smooth"}),newEl:(e,l,r,n)=>{if(null==r&&(r="front"),null!=e&&"undefined"!==l&&null!==l){let o=document.createElement(e);o.innerHTML=l,n.forEach(e=>o.setAttribute(e[0],e[1])),"front"===r?t.el.forEach(e=>e.append(o)):"back"===r&&t.el.forEach(e=>e.prepend(o))}},appendEl:(e,l)=>{l&&t.el.forEach(e=>e.innerHTML=""),t.el.forEach(t=>t.append(e))},disableEl:e=>t.el.forEach(t=>t.removeChild(e)),prependEl:e=>t.el.forEach(t=>t.prepend(e)),sameEl:e=>t.el[0].outerHTML===e.outerHTML,addClass:e=>t.el.forEach(t=>t.classList.add(e)),removeClass:e=>t.el.forEach(t=>t.classList.remove(e)),hasClass:e=>t.el[0].classList.contains(e),toggleClass:e=>t.el.forEach(t=>t.classList.toggle(e)),rotate:(e,l)=>{null==e&&(e=1);let r=e,n=0,o=1;l.loop?(void 0!==l.delay&&null!==l.delay||(l.delay=1),t.rot=setInterval(()=>{r>=1?n>=360&&(n=0,o++):n<=-360&&(n=0,o++),t.el[0].style.transform=`rotate(${n}deg)`,n+=r,o===l.count&&l.end&&clearInterval(t.rot)},l.delay)):t.el[0].style.transform=`rotate(${r}deg)`},tclick:e=>!(null==e)&&t.el.forEach(t=>t.ondblclick=e),parent:()=>t.el[0].parentNode,child:()=>t.el[0].children,first:()=>t.el[0],typing:e=>{let l=0,r=e.str,n=e.speed;if(e.clrPrev&&(t.el[0].innerHTML=""),e.loop){void 0!==e.delay&&null!==e.delay||(e.delay=1e3);let o=()=>{l<r.length&&(t.el[0].innerHTML+=r.charAt(l),l++,setTimeout(o,n))};o(),setInterval(()=>{l=0,t.el[0].innerHTML="",o()},n*r.length+e.delay)}else{let e=()=>{l<r.length&&(t.el[0].innerHTML+=r.charAt(l),l++,setTimeout(e,n))};e()}},siblings:()=>Array.prototype.filter.call(t.el[0].parentNode.children,e=>e!==t.el[0]),switch:e=>{let l,r;t.el.forEach(t=>{r=document.querySelector(e),l=t.outerHTML,t.outerHTML=r.outerHTML,r.outerHTML=l})},is:e=>t.el[0].outerHTML===e,same:e=>t.el[0].innerHTML===e,next:()=>t.el[0].nextElementSibling,prev:()=>t.el[0].previousElementSibling};return t}const rdom={el:(e,t,l)=>(nel=document.createElement(e),null!=t&&("string"==typeof t?nel.innerHTML=t:Array.isArray(t)&&t.forEach(e=>nel.append(e))),void 0!==typeof l&&null!==l&&l.forEach(e=>nel.setAttribute(e[0],e[1])),nel),render:(e,t,l,r)=>{r&&(t.innerHTML=""),null==l&&(l="front"),"front"===l?t.append(e):"back"===l&&t.prepend(e)},remove:(e,t)=>t.removeChild(e),attr:(e,t)=>t.forEach(t=>e.setAttribute(t[0],t[1])),style:(e,t)=>e.setAttribute("style",t),css:(e,t)=>{t.forEach(t=>{null===e.getAttribute("style")&&e.setAttribute("style","");let l=`${e.getAttribute("style")};${t[0]}:${t[1]}`;e.setAttribute("style",l)})},contains:(e,t)=>e!==t&&e.contains(t),on:(e,t,l)=>e.addEventListener(t,l),off:(e,t,l)=>e.removeEventListener(t,l)},rUI={setBGVideo:e=>{let t=document.querySelector("body");if(t.innerHTML='<video style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" autoplay loop class="baceo-vid" muted plays-inline><source src='+e.path+" type=video/"+e.type+"></video>"+t.innerHTML,void 0!==e.style&&null!==e.style){let t=document.querySelector(".baceo-vid").style;t+=e.style}},setBGImage:e=>{let t=document.querySelector("body");t.innerHTML=`<img style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" src="${e}"></img> ${t.innerHTML}`},setLoadBar:e=>{let t={};null!=e&&(t=e);let l=document.querySelector("body");l.innerHTML="<div class='processjs'></div>"+l.innerHTML;let r=document.querySelector(".processjs");void 0!==t.position&&null!==t.position||(t.position="absolute"),void 0!==t.size&&null!==t.size||(t.size="5px"),void 0!==t.color&&null!==t.color||(t.color="red"),r.style=`position: absolute;left:0;right:0;top:0;height:${t.size};background-color:${t.color}`,void 0!==t.speed&&null!==t.speed||(t.speed=3);let n=0,o=setInterval(()=>{n++,r.style.width=n+"%",101===n&&(clearInterval(o),r.outerHTML="")},t.speed)}},rDev={mobile:e=>(navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i))&&(void 0!==e||null!==e)&&e(),windows:e=>~navigator.appVersion.indexOf("Win")&&"function"==typeof e&&e(),mac:e=>~navigator.appVersion.indexOf("Mac")&&"function"==typeof e&&e(),linux:e=>~navigator.appVersion.indexOf("Linux")&&"function"==typeof e&&e(),unix:e=>~navigator.appVersion.indexOf("X11")&&"function"==typeof e&&e(),os:(e,t)=>~navigator.appVersion.indexOf(e)&&"function"==typeof t&&t(),current:()=>navigator.appVersion},rUtils={isArray:e=>Array.isArray(e),inArray:(e,t)=>t.indexOf(e),parseJSON:e=>JSON.parse(e),parseHTML:e=>{let t=document.implementation.createHTMLDocument();return t.body.innerHTML=e,t.body.children},isEmptyObject:e=>0===Object.keys(e).length,isOdd:e=>e%2!=0,now:()=>Date.now()};"object"==typeof module&&"object"==typeof module.exports&&(module.exports.rt=rt,module.exports.rDev=rDev,module.exports.rUI=rUI,module.exports.rdom=rdom,module.exports.rUtils=rUtils);


--------------------------------------------------------------------------------
/DOCSv1.9.0.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 	<img src='assets/logo.png'/>
  3 | 	<br/>
  4 | 	<p>A simple, light-weight (5kb) Javascript library for DOM manipulation and UI development</p>
  5 | 	<br/>
  6 | 	<a href="https://github.com/nguyenphuminh/rottenjs/blob/master/LICENSE.md"><img src="https://img.shields.io/badge/license-MIT-orange.svg"/></a>
  7 | 	<a href="https://npmcharts.com/compare/rottenjs?minimal=true"><img src="https://img.shields.io/npm/dm/rottenjs.svg?sanitize=true" alt="Downloads"></a>
  8 | 	<a href="https://www.npmjs.com/package/rottenjs"><img src="https://img.shields.io/npm/v/rottenjs.svg?sanitize=true" alt="Version"></a>
  9 | 	<a href="https://github.com/nguyenphuminh/rottenjs/blob/main/.github/CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
 10 | 	<a href="https://github.com/nguyenphuminh/rottenjs/search?l=javascript"><img alt="language" src="https://img.shields.io/badge/language-Javascript-purple.svg"></a>
 11 | </div>
 12 | 
 13 | ## Getting started
 14 | ### Installation
 15 | You can clone RottenJS with git:
 16 | 
 17 | 	git clone https://github.com/nguyenphuminh/RottenJS.git
 18 | 
 19 | Or install it in npm:
 20 | 
 21 | 	npm i rottenjs
 22 | 
 23 | ### Add RottenJS to your project
 24 | Add this tag to the 'head' tag of your .html files:
 25 | 
 26 | 	<script src='rotten.min.js' type='text/javascript'></script>
 27 | 
 28 | 
 29 | ## Functions
 30 | ### Create a Rotten object:
 31 | By using these codes, you can create a Rotten object!
 32 | 
 33 | HTML:
 34 | 
 35 | 	<div></div>
 36 | 
 37 | JS:
 38 | 
 39 | 	let obj = rotten('div');
 40 | 
 41 | ### Adding texts to the object
 42 | You can change text contents of a object by using:
 43 | 
 44 | 	obj.text('Hello, World!');
 45 | 
 46 | Also, you can change the innerHTML property too:
 47 | 
 48 | 	obj.html('<b>Hello, World!</b>');
 49 | 
 50 | To change the outer content (outerHTML), use:
 51 | 
 52 | 	obj.body('<div class='Text'>Hello,World</div>')
 53 | 
 54 | If no value has been given, it will print out the inner/outer HTML content of the object.
 55 | 
 56 | ### Append/Prepend texts to the object
 57 | This is how you can append/prepend texts:
 58 | 
 59 | 	obj.append(" <3");
 60 | 	obj.prepend("I said ");
 61 | 
 62 | ### Hide/Show object
 63 | You can hide the object with:
 64 | 	
 65 | 	obj.hide();
 66 | 
 67 | Notice that that will hide the object immediately, so to set the time for it to disapear, use:
 68 | 
 69 | 	obj.hide(millisecond);
 70 | 
 71 | Example:
 72 | 
 73 | 	obj.hide(1000); // Hide the object after 1 second.
 74 | 
 75 | You can also show the object again, using:
 76 | 
 77 | 	obj.show(millisecond);
 78 | 
 79 | You can add some callback when the object is show and hide! For example, this will alert 'The text has been shown' when the object is shown:
 80 | 
 81 | 	obj.show(3000, function(){
 82 | 		alert('The text has been shown');
 83 | 	});
 84 | 
 85 | ### Working with attributes
 86 | You can change/create a new attribute by:
 87 | 
 88 | 	obj.attr(attribute_name, value);
 89 | 
 90 | Example:
 91 | 
 92 | 	obj.attr('class', 'Hello');
 93 | 
 94 | If no value was given to the attribute, it will return the current value of the attribute instead.
 95 | 
 96 | You can remove attributes with:
 97 | 
 98 | 	obj.removeAttr(attribute_name);
 99 | 
100 | But, all of the methods above will targets all the elements, to only targets one element that is found first, use:
101 | 
102 | 	obj.prop(attribute_name, value);
103 | 	obj.removeProp(attribute_name);
104 | 
105 | To works with multiple attributes, you can use:
106 | 
107 | 	obj.mulAttr([attribute1, attribute2],[value1, value2]);
108 | 	obj.mulProp([attribute1, attribute2],[value1, value2]);
109 | 
110 | ### Working with styles and CSS
111 | You can easily change css property of an object using:
112 | 
113 | 	obj.css(property,value);
114 | 
115 | Example:
116 | 
117 | 	obj.css('font-size', '100px');
118 | 
119 | You can change the whole css style of an object:
120 | 
121 | 	obj.style(value);
122 | 
123 | Example:
124 | 
125 | 	obj.style(`
126 | 		font-size:20px;
127 | 		font-family:Arial;
128 | 	`);
129 | 
130 | To works with multiple css properties, you can use:
131 | 
132 | 	obj.mulCSS([property1,property2], [value1, value2]);
133 | 
134 | ### Events
135 | You can add an event by using:
136 | 
137 | 	obj.on(event,eventHandler)
138 | 
139 | Remove an event can be done by:
140 | 
141 | 	obj.off(event,eventHandler)
142 | 
143 | ### Remove elements of an object
144 | You can remove all the child elements of an object using:
145 | 
146 | 	obj.empty();
147 | 
148 | To remove the object entirely, use:
149 | 
150 | 	obj.remove();
151 | 
152 | ### Hover event
153 | To create a hover effect, you can type:
154 | 
155 | 	obj.hover(outhover, onhover);
156 | 
157 | Example:
158 | 
159 | 	obj.hover(function(){
160 | 		console.log('Out of text');
161 | 	},function(){
162 | 		console.log('On text');
163 | 	});
164 | 
165 | ### Mount a element onto another element
166 | 
167 | 	obj.mount(target,position);
168 | 
169 | Example:
170 | 
171 | 	// Append current element to the front of 'h1'
172 | 	obj.mount('h1');
173 | 
174 | 	// Prepend current element to the back of 'h1'
175 | 	obj.mount('h1','back');
176 | 
177 | ### Taking inputs from HTML form
178 | Taking input can be done by:
179 | 
180 | 	obj.input(); //Would return the input of the HTML input form
181 | 
182 | Or you can use:
183 | 
184 | 	obj.val(); //Would return the input of the HTML input form
185 | 
186 | If you want to compare this input to another input to do a callback, you can use:
187 | 
188 | 	obj.input(value_to_compare, callback, other);
189 | 	//If the input is the 'value_to_compare', executes callback(), or else, executes other().
190 | 
191 | To compare the input with multiple values which all executes one callback, you can insert an array like this:
192 | 
193 | 	obj.input([value1,value2,value3], callback, other);
194 | 	//If the input is 'value1','value2' or 'value3', executes callback(), or else, executes other().
195 | 
196 | To compare the input with multiple values, each having different callbacks, do this:
197 | 
198 | 	obj.inputs([
199 | 		{
200 | 			value:value1,
201 | 			callback:callback1,
202 | 		},
203 | 		{
204 | 			value:value2,
205 | 			callback:callback2,
206 | 		},
207 | 		{
208 | 			value:[value3_1,value3_2,value3_3],
209 | 			callback:callback3,
210 | 		}
211 | 	],original);
212 | 
213 | It will compare user's input with different values, then executes its callback. The "original" function will be execute if the input doesn't match any values listed.
214 | 
215 | If you want to set the value of the input tag, you can type in:
216 | 
217 | 	obj.val(value);
218 | 
219 | ### HTML form checkbox
220 | 
221 | 	// If checked, then executes checked()
222 | 	// If not checked, then executes unchecked()
223 | 	obj.check(checked,unchecked);
224 | 
225 | ### Two ways binding in HTML form (sort of)
226 | Binding with inputs:
227 | 	
228 | 	// Every times data changes, it will be inserted to 'target' and callback() will be executed.
229 | 	obj.applyEl(target,callback);
230 | 
231 | Binding with checkboxs:
232 | 
233 | 	// If checked, then executes checked().
234 | 	// If not checked, then executes unchecked().
235 | 	obj.aplCheckEl(checked,unchecked);
236 | 
237 | ### Click event
238 | You can add a click event for an object through:
239 | 
240 | 	obj.click(callback);
241 | 
242 | Example:
243 | 
244 | 	obj.click(function(){
245 | 		alert('You clicked me!');
246 | 	});
247 | 
248 | ### Scroll to an element smoothly
249 | 
250 | 	obj.scroll();
251 | 
252 | ### Classes
253 | Adding classes:
254 | 	
255 | 	obj.addClass(class_name);
256 | 
257 | Removing classes: 
258 | 
259 | 	obj.removeClass(class_name);
260 | 
261 | Check classes existence:
262 | 
263 | 	obj.hasClass(class_name);
264 | 
265 | Toggle classes:
266 | 
267 | 	obj.toggleClass(class_name);
268 | 
269 | Example:
270 | 
271 | 	obj.addClass('hello'); 
272 | 	obj.addClass('object');
273 | 	obj.removeClass('hello');
274 | 
275 | ### Create new child element
276 | 
277 | 	obj.newEl(tag_name,HTML_content,position,attributes,attributes_values);
278 | 
279 | Example:
280 | 
281 | 	obj.newEl('p','Hello guys'); //Append <p>Hello guys</p> to the parent node.
282 | 
283 | Prepend:
284 | 
285 | 	obj.newEl('p','Hello guys','back'); //Prepend <p>Hello guys</p> to the parent node.
286 | 
287 | You can also set attributes for it, example:
288 | 
289 | 	obj.newEl('p','Hello guys','front',['class','title'],['Hello','RottenJS Object']);
290 | 
291 | ### Create a new HTML element
292 | 
293 | 	let newElement = obj.createEl(tagname,content);
294 | 
295 | Example:
296 | 
297 | 	// Create new element consist of a "p" tag with innerHTML of 'Hello'
298 | 	let newElement = obj.createEl('p','Hello');
299 | 
300 | You can mount that element onto another element using appendEl and prependEl:
301 | 
302 | 	obj.appendEl(newElement);
303 | 	obj.prependEl(newElement);
304 | 
305 | The differences between append() and appendEl() is that append() can insert text to the innerHTML of the element, while appendEl can insert text and objects we have created!
306 | 
307 | You can also set attributes for those new elements you have created, example:
308 | 
309 | 	let newElement = obj.createEl('p','Hello',['class','title'],['Hello','RottenJS Object']);
310 | 
311 | To remove an element, use:
312 | 
313 | 	obj.disableEl(element);
314 | 
315 | Example:
316 | 
317 | 	let newElement = obj.createEl('p','Hello');
318 | 	obj.disableEl(newElement);
319 | 
320 | You can also remove normal element, example:
321 | 
322 | 	obj.disableEl(document.querySelector('div'));
323 | 
324 | ### Element's title
325 | Return element's title attribute:
326 | 
327 | 	obj.title();
328 | 
329 | Change element's title attribute:
330 | 
331 | 	obj.title(content);
332 | 
333 | ### Rotate object
334 | Rotate object can be easily done by:
335 | 
336 | 	obj.rotate(deg,{
337 | 		loop:/*true or false*/,
338 | 		delay:/*millisecond*/,
339 | 		count:/*number*/,
340 | 		end:/*true or false*/,
341 | 	});
342 | 
343 | The object will be rotated by 'deg' degree after 'delay'. It will rotate 'count' times. If 'loop' is set to false, then it will only rotate 'deg' one time only. If 'end' is set to false, then it will rotates endlessly. 
344 | 
345 | ### Typing animation
346 | Proceeding typing animations can be done with:
347 | 
348 | 	obj.typing({
349 | 		str:/*String to type*/,
350 | 		speed:/*Typing speed - millisecond*/,
351 | 		clrPrev:/*true or false*/,
352 | 		loop:/*true or false*/,
353 | 		delay:/*true or false*/
354 | 	});
355 | 
356 | Set 'clrPrev' to <b>true</b> if you want to clear the previous content before typing. If you set 'loop' to true, then it will write the string endlessly after 'delay' millisecond(s).
357 | 
358 | ### States of object (save current element to localStorage)
359 | Save current state:
360 | 
361 | 	obj.saveState();
362 | 
363 | Load saved state:
364 | 
365 | 	obj.loadState();
366 | 
367 | Remove saved state: 
368 | 
369 | 	obj.removeState();
370 | 
371 | ### Siblings
372 | 
373 | 	obj.siblings();
374 | 
375 | ### Return the number of milliseconds elapsed since January 1
376 | 
377 | 	obj.now();
378 | 
379 | ### Fade in and fade out animation
380 | 
381 | 	obj.fadeIn(time,callback);
382 | 	obj.fadeOut(time,callback);
383 | 
384 | ### Child and Parent nodes
385 | 
386 | 	obj.parent() - Return the parent node
387 | 	obj.child() - Return the child node
388 | 
389 | ### Condition checking
390 | 
391 | 	// Only render this element with the innerHTML of "data" if condition is true. If it is true, executes iftrue(), else, executes iffalse()
392 | 	obj.renderIf(condition,data,iftrue,iffalse);
393 | 
394 | Example:
395 | 
396 | 	obj.renderIf((obj.html() == "Stupid")),"Not stupid");
397 | 
398 | ### Using normal Javascript methods
399 | If you don't know, 'obj.el' is actually an array of DOM elements that was targetted, so you can apply Javascript methods.
400 | 
401 | Example:
402 | 
403 | 	// Change the innerHTML of the first elements that it meets
404 | 	obj.el[0].innerHTML = 'Hello, World!';
405 | 
406 | 	// Change all the innerHTML of all the elements that it meets
407 | 	obj.el.forEach(item => {
408 | 		item.innerHTML = "Hello, World!";
409 | 	})
410 | 
411 | In 1.2.x, 'obj.el' is just a variable that holds a single DOM element, but in 1.3.x, it is now an array containing multiple DOM elements that it founds.
412 | 
413 | ### Grabbing the next node found
414 | 
415 | 	obj.next()
416 | 
417 | ### Grabbing the previous node found
418 | 
419 | 	obj.prev()
420 | 
421 | ### Check if a parent node contains a child node
422 | 
423 | 	obj.contains(child, parent);
424 | 
425 | ### Check if the current node is the same as the other node
426 | 
427 | 	obj.is(other);
428 | 
429 | ### Grabbing the first node found
430 | You can use:
431 | 
432 | 	obj.el[0]
433 | 
434 | Or:
435 | 
436 | 	obj.first();
437 | 
438 | ### Parse datas
439 | Parse HTML string:
440 | 
441 | 	obj.parseHTML(string);
442 | 
443 | Parse JSON string:
444 | 
445 | 	obj.parseJSON(string);
446 | 
447 | ### Check if it's an array
448 | 
449 | 	obj.isArray(arr);
450 | 
451 | 
452 | ## Custom methods for web development using rottenUI
453 | 
454 | ### Add a background video
455 | 
456 | 	rottenUI.setBGVideo({
457 | 		path:/*Video file's path*/,
458 | 		type:/*File type(mp4,mov)*/,
459 | 		style:/*Optional style*/,
460 | 	});
461 | 
462 | ### Add a background image
463 | 
464 | 	rottenUI.setBGImage(img_path);
465 | 
466 | ### Change website's title
467 | 
468 | 	rottenUI.setTitle(title);
469 | 
470 | ### Change website's logo
471 | 
472 | 	rottenUI.setLogo(logo_path);
473 | 
474 | ### Add a top loading (intro) bar
475 | 
476 | 	rottenUI.setLoadBar({
477 | 		color:/*CSS Color*/,
478 | 		size:/*Size*/,
479 | 		speed:/*Millisecond*/,
480 | 		position:/*CSS Position*/
481 | 	});
482 | 
483 | ## Device detections using rotDev
484 | 
485 | 	rotDev.mobile(function(){
486 | 		//Execute if the user is using a mobile devive
487 | 	});
488 | 	rotDev.windows(function(){
489 | 		//Execute if the user is using a Windows devive
490 | 	});
491 | 	rotDev.mac(function(){
492 | 		//Execute if the user is using a Mac devive
493 | 	});
494 | 	rotDev.linux(function(){
495 | 		//Execute if the user is using a Linux devive
496 | 	});
497 | 	rotDev.unix(function(){
498 | 		//Execute if the user is using a Unix devive
499 | 	});
500 | 	rotDev.os(os_name,function(){
501 | 		//Execute if the user is using a the option "os_name" device
502 | 	});
503 | 
504 | ## Shorter RottenJS
505 | 
506 | 	// let obj = rotten('div');
507 | 	let obj = rt('');
508 | 
509 | 	// rottenUI.setTitle('Rotten App');
510 | 	rUI.setTitle('Rotten App');
511 | 
512 | 	/* 
513 | 	rotDev.mobile(function(){
514 | 		alert('This is a mobile device!');
515 | 	});
516 | 	*/
517 | 	rDev.mobile(function(){
518 | 		alert('This is a mobile device!');
519 | 	});


--------------------------------------------------------------------------------
/DOCUMENTATION.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 	<img src='assets/logo.png'/>
  3 | 	<br/>
  4 | 	<p>A simple, light-weight (5kb) Javascript library for DOM manipulation and UI development</p>
  5 | 	<br/>
  6 | 	<a href="https://github.com/nguyenphuminh/rottenjs/blob/master/LICENSE.md"><img src="https://img.shields.io/badge/license-MIT-orange.svg"/></a>
  7 | 	<a href="https://npmcharts.com/compare/rottenjs?minimal=true"><img src="https://img.shields.io/npm/dm/rottenjs.svg?sanitize=true" alt="Downloads"></a>
  8 | 	<a href="https://www.npmjs.com/package/rottenjs"><img src="https://img.shields.io/npm/v/rottenjs.svg?sanitize=true" alt="Version"></a>
  9 | 	<a href="https://github.com/nguyenphuminh/rottenjs/blob/main/.github/CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
 10 | 	<a href="https://github.com/nguyenphuminh/rottenjs/search?l=javascript"><img alt="language" src="https://img.shields.io/badge/language-Javascript-purple.svg"></a>
 11 | </div>
 12 | 
 13 | ## Getting started
 14 | ### Installation
 15 | You can clone RottenJS with git:
 16 | 
 17 | 	git clone https://github.com/nguyenphuminh/RottenJS.git
 18 | 
 19 | Or install it in npm:
 20 | 
 21 | 	npm i rottenjs
 22 | 
 23 | ### Add RottenJS to your project
 24 | Add this tag to the 'head' tag of your .html files:
 25 | 
 26 | 	<script src='rotten.min.js' type='text/javascript'></script>
 27 | 
 28 | 
 29 | ## DOM manipulation using 'rt'
 30 | ### Create a Rotten object:
 31 | By using these codes, you can create a Rotten object!
 32 | 
 33 | HTML:
 34 | 
 35 | 	<div></div>
 36 | 
 37 | JS:
 38 | 
 39 | 	let obj = rt('div');
 40 | 
 41 | ### Adding texts to the object
 42 | You can change text contents of a object by using:
 43 | 
 44 | 	obj.text('Hello, World!');
 45 | 
 46 | Also, you can change the innerHTML property too:
 47 | 
 48 | 	obj.html('<b>Hello, World!</b>');
 49 | 
 50 | To change the outer content (outerHTML), use:
 51 | 
 52 | 	obj.body('<div class='Text'>Hello,World</div>')
 53 | 
 54 | If no value has been given, it will print out the inner/outer HTML content of the object.
 55 | 
 56 | ### Append/Prepend texts to the object
 57 | This is how you can append/prepend texts:
 58 | 
 59 | 	obj.append(" <3");
 60 | 	obj.prepend("I said ");
 61 | 
 62 | ### Hide/Show object
 63 | You can hide the object with:
 64 | 	
 65 | 	obj.hide();
 66 | 
 67 | Notice that that will hide the object immediately, so to set the time for it to disapear, use:
 68 | 
 69 | 	obj.hide(millisecond);
 70 | 
 71 | Example:
 72 | 
 73 | 	obj.hide(1000); // Hide the object after 1 second.
 74 | 
 75 | You can also show the object again, using:
 76 | 
 77 | 	obj.show(millisecond);
 78 | 
 79 | You can add some callback when the object is show and hide! For example, this will alert 'The text has been shown' when the object is shown:
 80 | 
 81 | 	obj.show(3000, function(){
 82 | 		alert('The text has been shown');
 83 | 	});
 84 | 
 85 | ### Working with attributes
 86 | You can change/create a new attribute by:
 87 | 
 88 | 	obj.attr(attribute_name, value);
 89 | 
 90 | Example:
 91 | 
 92 | 	obj.attr('class', 'Hello');
 93 | 
 94 | If no value was given to the attribute, it will return the current value of the attribute instead.
 95 | 
 96 | You can remove attributes with:
 97 | 
 98 | 	obj.removeAttr(attribute_name);
 99 | 
100 | But, all of the methods above will targets all the elements, to only targets one element that is found first, use:
101 | 
102 | 	obj.prop(attribute_name, value);
103 | 	obj.removeProp(attribute_name);
104 | 
105 | To works with multiple attributes, you can use:
106 | 
107 | 	obj.mulAttr([
108 | 		[attribute1, value1],
109 | 		[attribute2, value2]
110 | 	]);
111 | 	obj.mulProp([
112 | 		[attribute1, value1],
113 | 		[attribute2, value2]
114 | 	]);
115 | 
116 | ### Working with styles and CSS
117 | You can easily change css property of an object using:
118 | 
119 | 	obj.css(property,value);
120 | 
121 | Example:
122 | 
123 | 	obj.css('font-size', '100px');
124 | 
125 | You can change the whole css style of an object:
126 | 
127 | 	obj.style(value);
128 | 
129 | Example:
130 | 
131 | 	obj.style(`
132 | 		font-size:20px;
133 | 		font-family:Arial;
134 | 	`);
135 | 
136 | To works with multiple css properties, you can use:
137 | 
138 | 	obj.mulCSS([
139 | 		[property1, value1],
140 | 		[property2, value2]
141 | 	]);
142 | 
143 | ### Events
144 | You can add an event by using:
145 | 
146 | 	obj.on(event,eventHandler)
147 | 
148 | Remove an event can be done by:
149 | 
150 | 	obj.off(event,eventHandler)
151 | 
152 | ### Remove elements of an object
153 | You can remove all the child elements of an object using:
154 | 
155 | 	obj.empty();
156 | 
157 | To remove the object entirely, use:
158 | 
159 | 	obj.remove();
160 | 
161 | ### Hover event
162 | To create a hover effect, you can type:
163 | 
164 | 	obj.hover(outhover, onhover);
165 | 
166 | Example:
167 | 
168 | 	obj.hover(function(){
169 | 		console.log('Out of text');
170 | 	},function(){
171 | 		console.log('On text');
172 | 	});
173 | 
174 | ### Mount a element onto another element
175 | 
176 | 	obj.mount(target,position);
177 | 
178 | Example:
179 | 
180 | 	// Append current element to the front of 'h1'
181 | 	obj.mount('h1');
182 | 
183 | 	// Prepend current element to the back of 'h1'
184 | 	obj.mount('h1','back');
185 | 
186 | ### Taking inputs from HTML form
187 | Taking input can be done by:
188 | 
189 | 	obj.input(); //Would return the input of the HTML input form
190 | 
191 | Or you can use:
192 | 
193 | 	obj.val(); //Would return the input of the HTML input form
194 | 
195 | If you want to compare this input to another input to do a callback, you can use:
196 | 
197 | 	obj.input(value_to_compare, callback, other);
198 | 	//If the input is the 'value_to_compare', executes callback(), or else, executes other().
199 | 
200 | To compare the input with multiple values which all executes one callback, you can insert an array like this:
201 | 
202 | 	obj.input([value1,value2,value3], callback, other);
203 | 	//If the input is 'value1','value2' or 'value3', executes callback(), or else, executes other().
204 | 
205 | To compare the input with multiple values, each having different callbacks, do this:
206 | 
207 | 	obj.inputs([
208 | 		{
209 | 			value:value1,
210 | 			callback:callback1,
211 | 		},
212 | 		{
213 | 			value:value2,
214 | 			callback:callback2,
215 | 		},
216 | 		{
217 | 			value:[value3_1,value3_2,value3_3],
218 | 			callback:callback3,
219 | 		}
220 | 	],original);
221 | 
222 | It will compare user's input with different values, then executes its callback. The "original" function will be execute if the input doesn't match any values listed.
223 | 
224 | If you want to set the value of the input tag, you can type in:
225 | 
226 | 	obj.val(value);
227 | 
228 | ### HTML form checkbox
229 | 
230 | 	// If checked, then executes checked()
231 | 	// If not checked, then executes unchecked()
232 | 	obj.check(checked,unchecked);
233 | 
234 | ### Click event
235 | You can add a click event for an object through:
236 | 
237 | 	obj.click(callback);
238 | 
239 | Example:
240 | 
241 | 	obj.click(function(){
242 | 		alert('You clicked me!');
243 | 	});
244 | 
245 | ### Scroll to an element smoothly
246 | 
247 | 	obj.scroll();
248 | 
249 | ### Classes
250 | Adding classes:
251 | 	
252 | 	obj.addClass(class_name);
253 | 
254 | Removing classes: 
255 | 
256 | 	obj.removeClass(class_name);
257 | 
258 | Check classes existence:
259 | 
260 | 	obj.hasClass(class_name);
261 | 
262 | Toggle classes:
263 | 
264 | 	obj.toggleClass(class_name);
265 | 
266 | Example:
267 | 
268 | 	obj.addClass('hello'); 
269 | 	obj.addClass('object');
270 | 	obj.removeClass('hello');
271 | 
272 | ### Create new child element
273 | 
274 | 	obj.newEl(tag_name,HTML_content,position,attributes);
275 | 
276 | Example:
277 | 
278 | 	obj.newEl('p','Hello guys'); //Append <p>Hello guys</p> to the parent node.
279 | 
280 | Prepend:
281 | 
282 | 	obj.newEl('p','Hello guys','back'); //Prepend <p>Hello guys</p> to the parent node.
283 | 
284 | You can also set attributes for it, example:
285 | 
286 | 	obj.newEl('p','Hello guys','front',[
287 | 		['class','title']
288 | 	]);
289 | 
290 | ### Element's title
291 | Return element's title attribute:
292 | 
293 | 	obj.title();
294 | 
295 | Change element's title attribute:
296 | 
297 | 	obj.title(content);
298 | 
299 | ### Rotate object
300 | Rotate object can be easily done by:
301 | 
302 | 	obj.rotate(deg,{
303 | 		loop:/*true or false*/,
304 | 		delay:/*millisecond*/,
305 | 		count:/*number*/,
306 | 		end:/*true or false*/,
307 | 	});
308 | 
309 | The object will be rotated by 'deg' degree after 'delay'. It will rotate 'count' times. If 'loop' is set to false, then it will only rotate 'deg' one time only. If 'end' is set to false, then it will rotates endlessly. 
310 | 
311 | ### Typing animation
312 | Proceeding typing animations can be done with:
313 | 
314 | 	obj.typing({
315 | 		str:/*String to type*/,
316 | 		speed:/*Typing speed - millisecond*/,
317 | 		clrPrev:/*true or false*/,
318 | 		loop:/*true or false*/,
319 | 		delay:/*true or false*/
320 | 	});
321 | 
322 | Set 'clrPrev' to <b>true</b> if you want to clear the previous content before typing. If you set 'loop' to true, then it will write the string endlessly after 'delay' millisecond(s).
323 | 
324 | ### Siblings
325 | 
326 | 	obj.siblings();
327 | 
328 | ### Fade in and fade out animation
329 | 
330 | 	obj.fadeIn(time,callback);
331 | 	obj.fadeOut(time,callback);
332 | 
333 | ### Child and Parent nodes
334 | 
335 | 	obj.parent() - Return the parent node
336 | 	obj.child() - Return the child node
337 | 
338 | ### Condition checking
339 | 
340 | 	// Only render this element with the innerHTML of "data" if condition is true. If it is true, executes iftrue(), else, executes iffalse()
341 | 	obj.renderIf(condition,data,iftrue,iffalse);
342 | 
343 | Example:
344 | 
345 | 	obj.renderIf((obj.html() == "Stupid")),"Not stupid");
346 | 
347 | ### Using normal Javascript methods
348 | If you don't know, 'obj.el' is actually an array of DOM elements that was targetted, so you can apply Javascript methods.
349 | 
350 | Example:
351 | 
352 | 	// Change the innerHTML of the first elements that it meets
353 | 	obj.el[0].innerHTML = 'Hello, World!';
354 | 
355 | 	// Change all the innerHTML of all the elements that it meets
356 | 	obj.el.forEach(item => {
357 | 		item.innerHTML = "Hello, World!";
358 | 	})
359 | 
360 | In 1.2.x, 'obj.el' is just a variable that holds a single DOM element, but in 1.3.x, it is now an array containing multiple DOM elements that it founds.
361 | 
362 | ### Grabbing the next node found
363 | 
364 | 	obj.next()
365 | 
366 | ### Grabbing the previous node found
367 | 
368 | 	obj.prev()
369 | 
370 | ### Check if the current element's html is the same as a string
371 | 
372 | 	obj.is(other);
373 | 	
374 | ### Check if the current element is the same as another element
375 | 
376 | 	obj.sameEl(other);
377 | 
378 | ### Grabbing the first node found
379 | You can use:
380 | 
381 | 	obj.el[0]
382 | 
383 | Or:
384 | 
385 | 	obj.first();
386 | 
387 | 
388 | ## DOM rendering using 'rdom'
389 | 
390 | ### Create a new HTML element
391 | Create a HTML element:
392 | 
393 | 	let newElement = rdom.el(tagname,content,attributes);
394 | 
395 | Render that element:
396 | 
397 | 	rdom.render(newElement,parent_node,position,remove);
398 | 	// Position can be "front" or "back" to render the element to the front of back of the parent node. If being left blank or null, it will automatically set to 'front'.
399 | 	// Remove can be either true or false or blank. If true, it will replace the old element with the new one, if false, it will append/prepend it to the parent node.
400 | 
401 | Example:
402 | 
403 | 	// Create new element consist of a "p" tag with innerHTML of 'Hello'. It also has 'class' set to 'hello'.
404 | 	let newElement = rdom.el('p',['Hello', rdom.el('span', 'World')],[
405 | 		['class', 'hello']
406 | 	]);
407 | 
408 | Render it to the front of the body tag:
409 | 
410 | 	rdom.render(newElement,document.body,'front',true);
411 | 
412 | You can also mount that element onto another element using appendEl and prependEl of rt():
413 | 
414 | 	obj.appendEl(newElement);
415 | 	obj.prependEl(newElement);
416 | 
417 | The differences between append() and appendEl() is that append() can insert text to the innerHTML of the element, while appendEl() can HTML elements we have created!
418 | 
419 | To remove an element, use:
420 | 	
421 | 	rdom.remove(element,parent_node);
422 | 
423 | Remove in rt:
424 | 
425 | 	obj.disableEl(element);
426 | 
427 | You can set attribute using:
428 | 
429 | 	rdom.attr(el, [
430 | 		[attribute1, value1],
431 | 		[attribute2, value2]
432 | 	]);
433 | 
434 | Set style attribute:
435 | 
436 | 	rdom.style(el, style);
437 | 
438 | Using css:
439 | 
440 | 	rdom.css(el, [
441 | 		[property1, value1],
442 | 		[property2, value2]
443 | 	]);
444 | 
445 | Add/Remove events to the element:
446 | 
447 | 	rdom.on(el, event, callback);
448 | 	rdom.off(el, event, callback);
449 | 
450 | ### Check if a parent node contains a child node
451 | 
452 | 	obj.contains(child, parent);
453 | 
454 | ## Custom apis for web development using 'rUI'
455 | 
456 | ### Add a background video
457 | 
458 | 	rUI.setBGVideo({
459 | 		path:/*Video file's path*/,
460 | 		type:/*File type(mp4,mov)*/,
461 | 		style:/*Optional style*/,
462 | 	});
463 | 
464 | ### Add a background image
465 | 
466 | 	rUI.setBGImage(img_path);
467 | 
468 | ### Add a top loading (intro) bar
469 | 
470 | 	rUI.setLoadBar({
471 | 		color:/*CSS Color*/,
472 | 		size:/*Size*/,
473 | 		speed:/*Millisecond*/,
474 | 		position:/*CSS Position*/
475 | 	});
476 | 
477 | ## Device detections using 'rDev'
478 | 
479 | 	rDev.mobile(function(){
480 | 		//Execute if the user is using a mobile devive
481 | 	});
482 | 	rDev.windows(function(){
483 | 		//Execute if the user is using a Windows devive
484 | 	});
485 | 	rDev.mac(function(){
486 | 		//Execute if the user is using a Mac devive
487 | 	});
488 | 	rDev.linux(function(){
489 | 		//Execute if the user is using a Linux devive
490 | 	});
491 | 	rDev.unix(function(){
492 | 		//Execute if the user is using a Unix devive
493 | 	});
494 | 	rDev.os(os_name,function(){
495 | 		//Execute if the user is using a the option "os_name" device
496 | 	});
497 | 
498 | ## Utilities
499 | 
500 | ### Parse HTML:
501 | 	obj.parseHTML(string);
502 | 
503 | ### Parse JSON
504 | 	obj.parseJSON(string);
505 | 
506 | ### Check if argument is an array
507 | 	obj.isArray(arr);
508 | 
509 | ### Check is arg1 is in array arg2
510 | 
511 | 	obj.inArray(val, arr);
512 | 
513 | ### Check if number is odd
514 | 
515 | 	obj.isOdd(num);
516 | 
517 | ### Check if object is empty
518 | 
519 | 	obj.isEmptyObject(someObj);
520 | 
521 | ### Return the number of milliseconds elapsed since January 1
522 | 
523 | 	obj.now();
524 | 


--------------------------------------------------------------------------------
/rotten.js:
--------------------------------------------------------------------------------
  1 | function rt(selector){
  2 | 	"use strict";
  3 | 	let prevDisplay = '';
  4 | 	const obj = {
  5 | 		el: document.querySelectorAll(selector),
  6 | 		attr: (attr, value) => {
  7 | 			if (typeof attr === "undefined" || attr === null) {
  8 | 				let attrList = [];
  9 | 				obj.el.forEach(item => attrList.push(item.attributes));
 10 | 				return attrList;
 11 | 			}
 12 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute(attr);
 13 | 			obj.el.forEach(item => item.setAttribute(attr, value));
 14 | 		},
 15 | 		mulAttr: (attr) => obj.el.forEach(item => attr.forEach(value => item.setAttribute(value[0],value[1]))),
 16 | 		mulProp: (attr) => attr.forEach(value => obj.el[0].setAttribute(value[0],value[1])),
 17 | 		prop: (attr, value) => {
 18 | 			if (typeof attr === "undefined" || attr === null) return obj.el[0].attributes;
 19 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute(attr);
 20 | 			obj.el[0].setAttribute(attr, value);
 21 | 		},
 22 | 		mount: (target, pos) => {
 23 | 			if (!(typeof target === "undefined" || target === null)){
 24 | 				let tg = document.querySelector(target);
 25 | 				tg.innerHTML = pos === "back" ? obj.el[0].outerHTML + tg.innerHTML : tg.innerHTML + obj.el[0].outerHTML;
 26 | 			}
 27 | 		},
 28 | 		removeAttr: value => obj.el.forEach(item => item.removeAttribute(value)),
 29 | 		removeProp: value => obj.el[0].removeAttribute(value),
 30 | 		css: (property, value) => {
 31 | 			obj.el.forEach(item => {
 32 | 				if (item.getAttribute('style') === null) item.setAttribute('style', '');
 33 | 				let new_value = `;${item.getAttribute('style')};${property}:${value}`;
 34 | 				item.setAttribute('style', new_value);
 35 | 			});
 36 | 		},
 37 | 		mulCSS: (property) => {
 38 | 			obj.el.forEach(item => property.forEach(value => {
 39 | 				if (item.getAttribute('style') === null) item.setAttribute('style', '');
 40 | 				let new_value = `;${item.getAttribute('style')};${value[0]}:${value[1]}`;
 41 | 				item.setAttribute('style', new_value);
 42 | 			}));
 43 | 		},
 44 | 		style: value => {
 45 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute('style');
 46 | 			obj.el.forEach(item => item.setAttribute('style', value));
 47 | 		},
 48 | 		hide: (time, callback) => {
 49 | 			time = time || 0;
 50 | 			setTimeout(()=>{
 51 | 				obj.el.forEach(item => item.style.display = 'none');
 52 | 				if (typeof callback === "function") callback();
 53 | 			}, time);
 54 | 		},
 55 | 		show: (time, callback) => {
 56 | 			time = time || 0;
 57 | 			setTimeout(()=>{
 58 | 				obj.el.forEach(item => item.style.display = prevDisplay);
 59 | 				if (typeof callback === "function") callback();
 60 | 			}, time);
 61 | 		},
 62 | 		fadeOut: (time, callback) => {
 63 | 			if (typeof time === "undefined" || time === null) time = 0;
 64 | 			obj.el.forEach(item => {
 65 | 				item.style.opacity ='0';
 66 | 				item.style.transition = `opacity ${time}ms`;
 67 | 			});
 68 | 			setTimeout(callback, time);
 69 | 		},
 70 | 		fadeIn: (time, callback) => {
 71 | 			if (typeof time === "undefined" || time === null) time = 0;
 72 | 			obj.el.forEach(item => {
 73 | 				item.style.opacity = '1';
 74 | 				item.style.transition = `opacity ${time}ms`;
 75 | 			});
 76 | 			setTimeout(callback,time);
 77 | 		},
 78 | 		text: value => {
 79 | 			if (typeof value === "undefined" || value === null) return obj.el[0].innerText;
 80 | 			obj.el.forEach(item => item.innerText = value);
 81 | 		},
 82 | 		html: value => {
 83 | 			if (typeof value === "undefined" || value === null) return obj.el[0].innerHTML;
 84 | 			obj.el.forEach(item => item.innerHTML = value);
 85 | 		},
 86 | 		body: value => {
 87 | 			if (typeof value === "undefined" || value === null) return obj.el[0].outerHTML;
 88 | 			obj.el.forEach(item => item.outerHTML = value);
 89 | 		},
 90 | 		on: (event, callback) => obj.el.forEach(item => item.addEventListener(event, callback)),
 91 | 		off: (event, callback) => obj.el.forEach(item => item.removeEventListener(event, callback)),
 92 | 		append: value => obj.el.forEach(item => item.innerHTML=`${item.innerHTML}${value}`),
 93 | 		prepend: value => obj.el.forEach(item => item.innerHTML=`${value}${item.innerHTML}`),
 94 | 		remove: () => obj.el.forEach(item => item.remove()),
 95 | 		empty: () => obj.el.forEach(item => item.innerHTML=''),
 96 | 		input: (value,callback,other) => {
 97 | 			let denied = false;
 98 | 			if (value == undefined && callback == undefined && other == undefined)
 99 | 				return obj.el[0].value;
100 | 			else {
101 | 				if (typeof value === 'string'){
102 | 					if (value === obj.el[0].value)
103 | 						callback();
104 | 					else
105 | 						other();
106 | 				} else if (Array.isArray(value)){
107 | 					for (i=0;i<value.length;i++){
108 | 						if (value[i] == obj.el[0].value){
109 | 							denied=true;
110 | 							callback();
111 | 							break;
112 | 						}
113 | 					}	
114 | 					if (!denied) other();
115 | 				}
116 | 			}
117 | 		},
118 | 		inputs: (option, original) => {
119 | 			let denied = false;
120 | 			for (let i = 0; i < option.length; i++){
121 | 				if (typeof option[i].value === 'string'){
122 | 					if (obj.el[0].value === option[i].value){
123 | 						option[i].callback();
124 | 						denied = true;
125 | 					}
126 | 				} else if (Array.isArray(option[i].value)) {
127 | 					for (let j = 0; j < value.length; j++){
128 | 						if (option[i].value[j] === obj.el[0].value){
129 | 							denied = true;
130 | 							option[i].callback();
131 | 							break;
132 | 						}
133 | 					}
134 | 				}
135 | 			}
136 | 			if (!denied && typeof original === "function") original();
137 | 		},
138 | 		val: value => {
139 | 			if (typeof value === "undefined" || value === null)
140 | 				return obj.el[0].value;
141 | 			else
142 | 				obj.el[0].value = value;
143 | 		},
144 | 		check: (checked, unchecked) => {
145 | 			if (typeof checked === "function" && typeof unchecked === "function"){
146 | 				if (obj.el[0].checked)
147 | 					checked();
148 | 				else
149 | 					unchecked();
150 | 			} else {
151 | 				return obj.el[0].checked
152 | 			}
153 | 		},
154 | 		click: callback => typeof callback === "function" && obj.el.forEach(item => item.onclick = () => callback()),
155 | 		hover: (outhover, onhover) => {
156 | 			if (!(typeof outhover === "undefined" || outhover === null) && !(typeof onhover === "undefined" || outhover === null)) {
157 | 				obj.el.forEach(item => {
158 | 					item.onmouseleave = () => outhover();
159 | 					item.onmouseenter = () => onhover();
160 | 				});
161 | 			}
162 | 		},
163 | 		title: value => {
164 | 			if (typeof title === "undefined" || title === null) return obj.el[0].title;
165 | 			obj.el.forEach(item => item.title = value);
166 | 		},
167 | 		scroll: () => obj.el[0].scrollIntoView({ behavior: 'smooth' }),
168 | 		newEl: (tag,content,pos,attr) => {
169 | 			if (typeof pos === "undefined" || pos === null) pos = 'front';
170 | 			if (!(typeof tag === "undefined" || tag === null) && !(content === "undefined" || content === null)){
171 | 				let nel = document.createElement(tag);
172 | 				nel.innerHTML = content;
173 | 				attr.forEach(value => nel.setAttribute(value[0],value[1]));
174 | 				if (pos === 'front')
175 | 					obj.el.forEach(item => item.append(nel));
176 | 				else if (pos === 'back')
177 | 					obj.el.forEach(item => item.prepend(nel));
178 | 			}
179 | 		},
180 | 		appendEl: (value, remove) => {
181 | 			if (remove) obj.el.forEach(item => item.innerHTML='');
182 | 			obj.el.forEach(item => item.append(value));
183 | 		},
184 | 		disableEl: value => obj.el.forEach(item => item.removeChild(value)),
185 | 		prependEl: value => obj.el.forEach(item => item.prepend(value)),
186 | 		sameEl: target => obj.el[0].outerHTML === target.outerHTML,
187 | 		addClass: value => obj.el.forEach(item => item.classList.add(value)),
188 | 		removeClass: value => obj.el.forEach(item => item.classList.remove(value)),
189 | 		hasClass: value => obj.el[0].classList.contains(value),
190 | 		toggleClass: value => obj.el.forEach(item => item.classList.toggle(value)),
191 | 		rotate: (deg,loop) => {
192 | 			if (typeof deg === "undefined" || deg === null) deg = 1;
193 | 			let rotSp=deg, rotI=0, rotCt=1;
194 | 			if (loop.loop){
195 | 				if (typeof loop.delay === "undefined" || loop.delay === null) loop.delay=1;
196 | 				obj.rot = setInterval(()=>{
197 | 					if (rotSp >= 1){
198 | 						if (rotI >= 360) {
199 | 							rotI=0;
200 | 							rotCt++;
201 | 						}
202 | 					} else {
203 | 						if (rotI <= -360) {
204 | 							rotI=0;
205 | 							rotCt++;
206 | 						}
207 | 					}
208 | 					obj.el[0].style.transform = `rotate(${rotI}deg)`;
209 | 					rotI+=rotSp;
210 | 					if (rotCt === loop.count && loop.end) clearInterval(obj.rot);
211 | 				},loop.delay);
212 | 			} else {
213 | 				obj.el[0].style.transform = `rotate(${rotSp}deg)`;
214 | 			}
215 | 		},
216 | 		tclick: (callback) => !(typeof callback === "undefined" || callback === null) && obj.el.forEach(item => item.ondblclick = callback),
217 | 		parent: () => obj.el[0].parentNode,
218 | 		child: () => obj.el[0].children,
219 | 		first: () => obj.el[0],
220 | 		typing: option => {
221 | 			let i = 0, text = option.str, speed = option.speed;
222 | 			if (option.clrPrev) obj.el[0].innerHTML='';
223 | 			if (option.loop) {
224 | 				if (typeof option.delay === "undefined" || option.delay === null) option.delay=1000;
225 | 				let type=() => {
226 | 					if (i < text.length) {
227 | 						obj.el[0].innerHTML += text.charAt(i);
228 | 						i++;
229 | 						setTimeout(type, speed);
230 | 					}
231 | 				}
232 | 				type();
233 | 				setInterval(()=>{
234 | 					i = 0;
235 | 					obj.el[0].innerHTML='';
236 | 					type();
237 | 				},speed*text.length+option.delay);
238 | 			} else {
239 | 				let type=()=>{
240 | 					if (i < text.length) {
241 | 						obj.el[0].innerHTML += text.charAt(i);
242 | 						i++;
243 | 						setTimeout(type, speed);
244 | 					}
245 | 				}
246 | 				type();
247 | 			}
248 | 		},
249 | 		siblings: () => Array.prototype.filter.call(obj.el[0].parentNode.children, child => child !== obj.el[0]),
250 | 		switch: target => {
251 | 			let swap,tar;
252 | 			obj.el.forEach(item => {
253 | 				tar = document.querySelector(target);
254 | 				swap = item.outerHTML;
255 | 				item.outerHTML = tar.outerHTML;
256 | 				tar.outerHTML = swap;
257 | 			});
258 | 		},
259 | 		is: target => obj.el[0].outerHTML === target,
260 | 		same: target => obj.el[0].innerHTML === target,
261 | 		next: () => obj.el[0].nextElementSibling,
262 | 		prev: () => obj.el[0].previousElementSibling
263 | 	}
264 | 	return obj;
265 | }
266 | const rdom = {
267 | 	el: (tag,content,attr) => {
268 | 		nel = document.createElement(tag);
269 | 		if (!(typeof content === "undefined" || content === null)) {
270 | 			if (typeof content === "string") 
271 | 				nel.innerHTML = content;
272 | 			else if (Array.isArray(content))
273 | 				content.forEach(item => nel.append(item));
274 | 		} 
275 | 		if (!(typeof attr === undefined || attr === null)) attr.forEach(value => nel.setAttribute(value[0],value[1]));
276 | 		return nel;
277 | 	},
278 | 	render: (value,target,pos,remove) => {
279 | 		if (remove) target.innerHTML = '';
280 | 		if (typeof pos === "undefined" || pos === null) pos = 'front';
281 | 		if (pos === 'front')
282 | 			target.append(value);
283 | 		else if (pos === 'back')
284 | 			target.prepend(value);
285 | 	},
286 | 	remove: (value,target) => target.removeChild(value),
287 | 	attr: (el, attribute) => attribute.forEach(value => el.setAttribute(value[0],value[1])),
288 | 	style: (el, property) => el.setAttribute('style',property),
289 | 	css: (el, property) => {
290 | 		property.forEach(value => {
291 | 			if (el.getAttribute('style') === null) el.setAttribute('style', '');
292 | 			let new_value = `${el.getAttribute('style')};${value[0]}:${value[1]}`
293 | 			el.setAttribute('style', new_value)
294 | 		});
295 | 	},
296 | 	contains: (el, child) => el !== child && el.contains(child),
297 | 	on: (el, event, callback) => el.addEventListener(event, callback),
298 | 	off: (el, event, callback) => el.removeEventListener(event, callback) 
299 | };
300 | const rUI = {
301 | 	setBGVideo: obj => {
302 | 		let a = document.querySelector("body");
303 | 		a.innerHTML = '<video style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" autoplay loop class="baceo-vid" muted plays-inline><source src='+obj.path+' type=video/'+obj.type+'></video>'+a.innerHTML;
304 | 		if (!(typeof obj.style === "undefined" || obj.style === null)){
305 | 			let b = document.querySelector(".baceo-vid").style;
306 | 			b = b + obj.style;
307 | 		}
308 | 	},
309 | 	setBGImage: path => {
310 | 		let a = document.querySelector("body");
311 | 		a.innerHTML = `<img style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" src="${path}"></img> ${a.innerHTML}`;
312 | 	},
313 | 	setLoadBar: obj => {
314 | 		let opt = {};
315 | 		if (!(typeof obj === "undefined" || obj === null)) opt = obj; 
316 | 		let body = document.querySelector("body");
317 | 		body.innerHTML = "<div class='processjs'></div>" + body.innerHTML;
318 | 		let line = document.querySelector(".processjs");
319 | 		if (typeof opt.position === "undefined" || opt.position === null) opt.position = "absolute";
320 | 		if (typeof opt.size === "undefined" || opt.size === null) opt.size = "5px";
321 | 		if (typeof opt.color === "undefined" || opt.color === null) opt.color = "red";
322 | 		line.style = `position: absolute;left:0;right:0;top:0;height:${opt.size};background-color:${opt.color}`;
323 | 		if (typeof opt.speed === "undefined" || opt.speed === null) opt.speed = 3;
324 | 		let count = 0;
325 | 		let loop = setInterval(()=>{
326 | 			count++;
327 | 			line.style.width = count + "%";
328 | 			if (count === 101){
329 | 				clearInterval(loop);
330 | 				line.outerHTML = "";
331 | 			}
332 | 		},opt.speed);
333 | 	}
334 | }
335 | const rDev = {
336 | 	mobile: callback => 
337 | 		((navigator.userAgent.match(/Android/i) 
338 | 		|| navigator.userAgent.match(/webOS/i) 
339 | 		|| navigator.userAgent.match(/iPhone/i) 
340 | 		|| navigator.userAgent.match(/iPad/i) 
341 | 		|| navigator.userAgent.match(/iPod/i) 
342 | 		|| navigator.userAgent.match(/BlackBerry/i) 
343 | 		|| navigator.userAgent.match(/Windows Phone/i))
344 | 		&& (typeof callback !== "undefined" || callback !== null)
345 | 		) && callback(),
346 | 	windows: callback => (~navigator.appVersion.indexOf("Win") && typeof callback === "function") && callback(),
347 | 	mac: callback => (~navigator.appVersion.indexOf("Mac") && typeof callback === "function") && callback(),
348 | 	linux: callback => (~navigator.appVersion.indexOf("Linux") && typeof callback === "function") && callback(),
349 | 	unix: callback => (~navigator.appVersion.indexOf("X11") && typeof callback === "function") && callback(),
350 | 	os: (os,callback) => (~navigator.appVersion.indexOf(os) && typeof callback === "function") && callback(),
351 | 	current: () => navigator.appVersion
352 | }
353 | const rUtils = {
354 | 	isArray: arr => Array.isArray(arr),
355 | 	inArray: (val, arr) => arr.indexOf(val),
356 | 	parseJSON: str => JSON.parse(str),
357 | 	parseHTML: str => {
358 | 		let tmp = document.implementation.createHTMLDocument();
359 | 		tmp.body.innerHTML = str;
360 | 		return tmp.body.children;
361 | 	},
362 | 	isEmptyObject: obj => Object.keys(obj).length === 0,
363 | 	isOdd: num => num % 2 !== 0,
364 | 	now: () => Date.now()
365 | }
366 | if (typeof module === "object" && typeof module.exports === "object") {
367 | 	module.exports.rt = rt;
368 | 	module.exports.rDev = rDev;
369 | 	module.exports.rUI = rUI;
370 | 	module.exports.rdom = rdom;
371 | 	module.exports.rUtils = rUtils;
372 | }
373 | 


--------------------------------------------------------------------------------
/development/rotten.js:
--------------------------------------------------------------------------------
  1 | function rt(selector){
  2 | 	"use strict";
  3 | 	let prevDisplay = '';
  4 | 	const obj = {
  5 | 		el: document.querySelectorAll(selector),
  6 | 		attr: (attr, value) => {
  7 | 			if (typeof attr === "undefined" || attr === null) {
  8 | 				let attrList = [];
  9 | 				obj.el.forEach(item => attrList.push(item.attributes));
 10 | 				return attrList;
 11 | 			}
 12 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute(attr);
 13 | 			obj.el.forEach(item => item.setAttribute(attr, value));
 14 | 		},
 15 | 		mulAttr: (attr) => obj.el.forEach(item => attr.forEach(value => item.setAttribute(value[0],value[1]))),
 16 | 		mulProp: (attr) => attr.forEach(value => obj.el[0].setAttribute(value[0],value[1])),
 17 | 		prop: (attr, value) => {
 18 | 			if (typeof attr === "undefined" || attr === null) return obj.el[0].attributes;
 19 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute(attr);
 20 | 			obj.el[0].setAttribute(attr, value);
 21 | 		},
 22 | 		mount: (target, pos) => {
 23 | 			if (!(typeof target === "undefined" || target === null)){
 24 | 				let tg = document.querySelector(target);
 25 | 				tg.innerHTML = pos === "back" ? obj.el[0].outerHTML + tg.innerHTML : tg.innerHTML + obj.el[0].outerHTML;
 26 | 			}
 27 | 		},
 28 | 		removeAttr: value => obj.el.forEach(item => item.removeAttribute(value)),
 29 | 		removeProp: value => obj.el[0].removeAttribute(value),
 30 | 		css: (property, value) => {
 31 | 			obj.el.forEach(item => {
 32 | 				if (item.getAttribute('style') === null) item.setAttribute('style', '');
 33 | 				let new_value = `;${item.getAttribute('style')};${property}:${value}`;
 34 | 				item.setAttribute('style', new_value);
 35 | 			});
 36 | 		},
 37 | 		mulCSS: (property) => {
 38 | 			obj.el.forEach(item => property.forEach(value => {
 39 | 				if (item.getAttribute('style') === null) item.setAttribute('style', '');
 40 | 				let new_value = `;${item.getAttribute('style')};${value[0]}:${value[1]}`;
 41 | 				item.setAttribute('style', new_value);
 42 | 			}));
 43 | 		},
 44 | 		style: value => {
 45 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute('style');
 46 | 			obj.el.forEach(item => item.setAttribute('style', value));
 47 | 		},
 48 | 		hide: (time, callback) => {
 49 | 			time = time || 0;
 50 | 			setTimeout(()=>{
 51 | 				obj.el.forEach(item => item.style.display = 'none');
 52 | 				if (typeof callback === "function") callback();
 53 | 			}, time);
 54 | 		},
 55 | 		show: (time, callback) => {
 56 | 			time = time || 0;
 57 | 			setTimeout(()=>{
 58 | 				obj.el.forEach(item => item.style.display = prevDisplay);
 59 | 				if (typeof callback === "function") callback();
 60 | 			}, time);
 61 | 		},
 62 | 		fadeOut: (time, callback) => {
 63 | 			if (typeof time === "undefined" || time === null) time = 0;
 64 | 			obj.el.forEach(item => {
 65 | 				item.style.opacity ='0';
 66 | 				item.style.transition = `opacity ${time}ms`;
 67 | 			});
 68 | 			setTimeout(callback, time);
 69 | 		},
 70 | 		fadeIn: (time, callback) => {
 71 | 			if (typeof time === "undefined" || time === null) time = 0;
 72 | 			obj.el.forEach(item => {
 73 | 				item.style.opacity = '1';
 74 | 				item.style.transition = `opacity ${time}ms`;
 75 | 			});
 76 | 			setTimeout(callback,time);
 77 | 		},
 78 | 		text: value => {
 79 | 			if (typeof value === "undefined" || value === null) return obj.el[0].innerText;
 80 | 			obj.el.forEach(item => item.innerText = value);
 81 | 		},
 82 | 		html: value => {
 83 | 			if (typeof value === "undefined" || value === null) return obj.el[0].innerHTML;
 84 | 			obj.el.forEach(item => item.innerHTML = value);
 85 | 		},
 86 | 		body: value => {
 87 | 			if (typeof value === "undefined" || value === null) return obj.el[0].outerHTML;
 88 | 			obj.el.forEach(item => item.outerHTML = value);
 89 | 		},
 90 | 		on: (event, callback) => obj.el.forEach(item => item.addEventListener(event, callback)),
 91 | 		off: (event, callback) => obj.el.forEach(item => item.removeEventListener(event, callback)),
 92 | 		append: value => obj.el.forEach(item => item.innerHTML=`${item.innerHTML}${value}`),
 93 | 		prepend: value => obj.el.forEach(item => item.innerHTML=`${value}${item.innerHTML}`),
 94 | 		remove: () => obj.el.forEach(item => item.remove()),
 95 | 		empty: () => obj.el.forEach(item => item.innerHTML=''),
 96 | 		input: (value,callback,other) => {
 97 | 			let denied = false;
 98 | 			if (value == undefined && callback == undefined && other == undefined)
 99 | 				return obj.el[0].value;
100 | 			else {
101 | 				if (typeof value === 'string'){
102 | 					if (value === obj.el[0].value)
103 | 						callback();
104 | 					else
105 | 						other();
106 | 				} else if (Array.isArray(value)){
107 | 					for (i=0;i<value.length;i++){
108 | 						if (value[i] == obj.el[0].value){
109 | 							denied=true;
110 | 							callback();
111 | 							break;
112 | 						}
113 | 					}	
114 | 					if (!denied) other();
115 | 				}
116 | 			}
117 | 		},
118 | 		inputs: (option, original) => {
119 | 			let denied = false;
120 | 			for (let i = 0; i < option.length; i++){
121 | 				if (typeof option[i].value === 'string'){
122 | 					if (obj.el[0].value === option[i].value){
123 | 						option[i].callback();
124 | 						denied = true;
125 | 					}
126 | 				} else if (Array.isArray(option[i].value)) {
127 | 					for (let j = 0; j < value.length; j++){
128 | 						if (option[i].value[j] === obj.el[0].value){
129 | 							denied = true;
130 | 							option[i].callback();
131 | 							break;
132 | 						}
133 | 					}
134 | 				}
135 | 			}
136 | 			if (!denied && typeof original === "function") original();
137 | 		},
138 | 		val: value => {
139 | 			if (typeof value === "undefined" || value === null)
140 | 				return obj.el[0].value;
141 | 			else
142 | 				obj.el[0].value = value;
143 | 		},
144 | 		check: (checked, unchecked) => {
145 | 			if (typeof checked === "function" && typeof unchecked === "function"){
146 | 				if (obj.el[0].checked)
147 | 					checked();
148 | 				else
149 | 					unchecked();
150 | 			} else {
151 | 				return obj.el[0].checked
152 | 			}
153 | 		},
154 | 		click: callback => typeof callback === "function" && obj.el.forEach(item => item.onclick = () => callback()),
155 | 		hover: (outhover, onhover) => {
156 | 			if (!(typeof outhover === "undefined" || outhover === null) && !(typeof onhover === "undefined" || outhover === null)) {
157 | 				obj.el.forEach(item => {
158 | 					item.onmouseleave = () => outhover();
159 | 					item.onmouseenter = () => onhover();
160 | 				});
161 | 			}
162 | 		},
163 | 		title: value => {
164 | 			if (typeof title === "undefined" || title === null) return obj.el[0].title;
165 | 			obj.el.forEach(item => item.title = value);
166 | 		},
167 | 		scroll: () => obj.el[0].scrollIntoView({ behavior: 'smooth' }),
168 | 		newEl: (tag,content,pos,attr) => {
169 | 			if (typeof pos === "undefined" || pos === null) pos = 'front';
170 | 			if (!(typeof tag === "undefined" || tag === null) && !(content === "undefined" || content === null)){
171 | 				let nel = document.createElement(tag);
172 | 				nel.innerHTML = content;
173 | 				attr.forEach(value => nel.setAttribute(value[0],value[1]));
174 | 				if (pos === 'front')
175 | 					obj.el.forEach(item => item.append(nel));
176 | 				else if (pos === 'back')
177 | 					obj.el.forEach(item => item.prepend(nel));
178 | 			}
179 | 		},
180 | 		appendEl: (value, remove) => {
181 | 			if (remove) obj.el.forEach(item => item.innerHTML='');
182 | 			obj.el.forEach(item => item.append(value));
183 | 		},
184 | 		disableEl: value => obj.el.forEach(item => item.removeChild(value)),
185 | 		prependEl: value => obj.el.forEach(item => item.prepend(value)),
186 | 		sameEl: target => obj.el[0].outerHTML === target.outerHTML,
187 | 		addClass: value => obj.el.forEach(item => item.classList.add(value)),
188 | 		removeClass: value => obj.el.forEach(item => item.classList.remove(value)),
189 | 		hasClass: value => obj.el[0].classList.contains(value),
190 | 		toggleClass: value => obj.el.forEach(item => item.classList.toggle(value)),
191 | 		rotate: (deg,loop) => {
192 | 			if (typeof deg === "undefined" || deg === null) deg = 1;
193 | 			let rotSp=deg, rotI=0, rotCt=1;
194 | 			if (loop.loop){
195 | 				if (typeof loop.delay === "undefined" || loop.delay === null) loop.delay=1;
196 | 				obj.rot = setInterval(()=>{
197 | 					if (rotSp >= 1){
198 | 						if (rotI >= 360) {
199 | 							rotI=0;
200 | 							rotCt++;
201 | 						}
202 | 					} else {
203 | 						if (rotI <= -360) {
204 | 							rotI=0;
205 | 							rotCt++;
206 | 						}
207 | 					}
208 | 					obj.el[0].style.transform = `rotate(${rotI}deg)`;
209 | 					rotI+=rotSp;
210 | 					if (rotCt === loop.count && loop.end) clearInterval(obj.rot);
211 | 				},loop.delay);
212 | 			} else {
213 | 				obj.el[0].style.transform = `rotate(${rotSp}deg)`;
214 | 			}
215 | 		},
216 | 		tclick: (callback) => !(typeof callback === "undefined" || callback === null) && obj.el.forEach(item => item.ondblclick = callback),
217 | 		parent: () => obj.el[0].parentNode,
218 | 		child: () => obj.el[0].children,
219 | 		first: () => obj.el[0],
220 | 		typing: option => {
221 | 			let i = 0, text = option.str, speed = option.speed;
222 | 			if (option.clrPrev) obj.el[0].innerHTML='';
223 | 			if (option.loop) {
224 | 				if (typeof option.delay === "undefined" || option.delay === null) option.delay=1000;
225 | 				let type=() => {
226 | 					if (i < text.length) {
227 | 						obj.el[0].innerHTML += text.charAt(i);
228 | 						i++;
229 | 						setTimeout(type, speed);
230 | 					}
231 | 				}
232 | 				type();
233 | 				setInterval(()=>{
234 | 					i = 0;
235 | 					obj.el[0].innerHTML='';
236 | 					type();
237 | 				},speed*text.length+option.delay);
238 | 			} else {
239 | 				let type=()=>{
240 | 					if (i < text.length) {
241 | 						obj.el[0].innerHTML += text.charAt(i);
242 | 						i++;
243 | 						setTimeout(type, speed);
244 | 					}
245 | 				}
246 | 				type();
247 | 			}
248 | 		},
249 | 		siblings: () => Array.prototype.filter.call(obj.el[0].parentNode.children, child => child !== obj.el[0]),
250 | 		switch: target => {
251 | 			let swap,tar;
252 | 			obj.el.forEach(item => {
253 | 				tar = document.querySelector(target);
254 | 				swap = item.outerHTML;
255 | 				item.outerHTML = tar.outerHTML;
256 | 				tar.outerHTML = swap;
257 | 			});
258 | 		},
259 | 		is: target => obj.el[0].outerHTML === target,
260 | 		same: target => obj.el[0].innerHTML === target,
261 | 		next: () => obj.el[0].nextElementSibling,
262 | 		prev: () => obj.el[0].previousElementSibling
263 | 	}
264 | 	return obj;
265 | }
266 | const rdom = {
267 | 	el: (tag,content,attr) => {
268 | 		nel = document.createElement(tag);
269 | 		if (!(typeof content === "undefined" || content === null)) {
270 | 			if (typeof content === "string") 
271 | 				nel.innerHTML = content;
272 | 			else if (Array.isArray(content))
273 | 				content.forEach(item => nel.append(item));
274 | 		} 
275 | 		if (!(typeof attr === undefined || attr === null)) attr.forEach(value => nel.setAttribute(value[0],value[1]));
276 | 		return nel;
277 | 	},
278 | 	render: (value,target,pos,remove) => {
279 | 		if (remove) target.innerHTML = '';
280 | 		if (typeof pos === "undefined" || pos === null) pos = 'front';
281 | 		if (pos === 'front')
282 | 			target.append(value);
283 | 		else if (pos === 'back')
284 | 			target.prepend(value);
285 | 	},
286 | 	remove: (value,target) => target.removeChild(value),
287 | 	attr: (el, attribute) => attribute.forEach(value => el.setAttribute(value[0],value[1])),
288 | 	style: (el, property) => el.setAttribute('style',property),
289 | 	css: (el, property) => {
290 | 		property.forEach(value => {
291 | 			if (el.getAttribute('style') === null) el.setAttribute('style', '');
292 | 			let new_value = `${el.getAttribute('style')};${value[0]}:${value[1]}`
293 | 			el.setAttribute('style', new_value)
294 | 		});
295 | 	},
296 | 	contains: (el, child) => el !== child && el.contains(child),
297 | 	on: (el, event, callback) => el.addEventListener(event, callback),
298 | 	off: (el, event, callback) => el.removeEventListener(event, callback) 
299 | };
300 | const rUI = {
301 | 	setBGVideo: obj => {
302 | 		let a = document.querySelector("body");
303 | 		a.innerHTML = '<video style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" autoplay loop class="baceo-vid" muted plays-inline><source src='+obj.path+' type=video/'+obj.type+'></video>'+a.innerHTML;
304 | 		if (!(typeof obj.style === "undefined" || obj.style === null)){
305 | 			let b = document.querySelector(".baceo-vid").style;
306 | 			b = b + obj.style;
307 | 		}
308 | 	},
309 | 	setBGImage: path => {
310 | 		let a = document.querySelector("body");
311 | 		a.innerHTML = `<img style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" src="${path}"></img> ${a.innerHTML}`;
312 | 	},
313 | 	setLoadBar: obj => {
314 | 		let opt = {};
315 | 		if (!(typeof obj === "undefined" || obj === null)) opt = obj; 
316 | 		let body = document.querySelector("body");
317 | 		body.innerHTML = "<div class='processjs'></div>" + body.innerHTML;
318 | 		let line = document.querySelector(".processjs");
319 | 		if (typeof opt.position === "undefined" || opt.position === null) opt.position = "absolute";
320 | 		if (typeof opt.size === "undefined" || opt.size === null) opt.size = "5px";
321 | 		if (typeof opt.color === "undefined" || opt.color === null) opt.color = "red";
322 | 		line.style = `position: absolute;left:0;right:0;top:0;height:${opt.size};background-color:${opt.color}`;
323 | 		if (typeof opt.speed === "undefined" || opt.speed === null) opt.speed = 3;
324 | 		let count = 0;
325 | 		let loop = setInterval(()=>{
326 | 			count++;
327 | 			line.style.width = count + "%";
328 | 			if (count === 101){
329 | 				clearInterval(loop);
330 | 				line.outerHTML = "";
331 | 			}
332 | 		},opt.speed);
333 | 	}
334 | }
335 | const rDev = {
336 | 	mobile: callback => 
337 | 		((navigator.userAgent.match(/Android/i) 
338 | 		|| navigator.userAgent.match(/webOS/i) 
339 | 		|| navigator.userAgent.match(/iPhone/i) 
340 | 		|| navigator.userAgent.match(/iPad/i) 
341 | 		|| navigator.userAgent.match(/iPod/i) 
342 | 		|| navigator.userAgent.match(/BlackBerry/i) 
343 | 		|| navigator.userAgent.match(/Windows Phone/i))
344 | 		&& (typeof callback !== "undefined" || callback !== null)
345 | 		) && callback(),
346 | 	windows: callback => (~navigator.appVersion.indexOf("Win") && typeof callback === "function") && callback(),
347 | 	mac: callback => (~navigator.appVersion.indexOf("Mac") && typeof callback === "function") && callback(),
348 | 	linux: callback => (~navigator.appVersion.indexOf("Linux") && typeof callback === "function") && callback(),
349 | 	unix: callback => (~navigator.appVersion.indexOf("X11") && typeof callback === "function") && callback(),
350 | 	os: (os,callback) => (~navigator.appVersion.indexOf(os) && typeof callback === "function") && callback(),
351 | 	current: () => navigator.appVersion
352 | }
353 | const rUtils = {
354 | 	isArray: arr => Array.isArray(arr),
355 | 	inArray: (val, arr) => arr.indexOf(val),
356 | 	parseJSON: str => JSON.parse(str),
357 | 	parseHTML: str => {
358 | 		let tmp = document.implementation.createHTMLDocument();
359 | 		tmp.body.innerHTML = str;
360 | 		return tmp.body.children;
361 | 	},
362 | 	isEmptyObject: obj => Object.keys(obj).length === 0,
363 | 	isOdd: num => num % 2 !== 0,
364 | 	now: () => Date.now()
365 | }
366 | if (typeof module === "object" && typeof module.exports === "object") {
367 | 	module.exports.rt = rt;
368 | 	module.exports.rDev = rDev;
369 | 	module.exports.rUI = rUI;
370 | 	module.exports.rdom = rdom;
371 | 	module.exports.rUtils = rUtils;
372 | }
373 | 


--------------------------------------------------------------------------------
/examples/JS/rotten.js:
--------------------------------------------------------------------------------
  1 | function rt(selector){
  2 | 	"use strict";
  3 | 	let prevDisplay = '';
  4 | 	const obj = {
  5 | 		el: document.querySelectorAll(selector),
  6 | 		attr: (attr, value) => {
  7 | 			if (typeof attr === "undefined" || attr === null) {
  8 | 				let attrList = [];
  9 | 				obj.el.forEach(item => attrList.push(item.attributes));
 10 | 				return attrList;
 11 | 			}
 12 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute(attr);
 13 | 			obj.el.forEach(item => item.setAttribute(attr, value));
 14 | 		},
 15 | 		mulAttr: (attr) => obj.el.forEach(item => attr.forEach(value => item.setAttribute(value[0],value[1]))),
 16 | 		mulProp: (attr) => attr.forEach(value => obj.el[0].setAttribute(value[0],value[1])),
 17 | 		prop: (attr, value) => {
 18 | 			if (typeof attr === "undefined" || attr === null) return obj.el[0].attributes;
 19 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute(attr);
 20 | 			obj.el[0].setAttribute(attr, value);
 21 | 		},
 22 | 		mount: (target, pos) => {
 23 | 			if (!(typeof target === "undefined" || target === null)){
 24 | 				let tg = document.querySelector(target);
 25 | 				tg.innerHTML = pos === "back" ? obj.el[0].outerHTML + tg.innerHTML : tg.innerHTML + obj.el[0].outerHTML;
 26 | 			}
 27 | 		},
 28 | 		removeAttr: value => obj.el.forEach(item => item.removeAttribute(value)),
 29 | 		removeProp: value => obj.el[0].removeAttribute(value),
 30 | 		css: (property, value) => {
 31 | 			obj.el.forEach(item => {
 32 | 				if (item.getAttribute('style') === null) item.setAttribute('style', '');
 33 | 				let new_value = `;${item.getAttribute('style')};${property}:${value}`;
 34 | 				item.setAttribute('style', new_value);
 35 | 			});
 36 | 		},
 37 | 		mulCSS: (property) => {
 38 | 			obj.el.forEach(item => property.forEach(value => {
 39 | 				if (item.getAttribute('style') === null) item.setAttribute('style', '');
 40 | 				let new_value = `;${item.getAttribute('style')};${value[0]}:${value[1]}`;
 41 | 				item.setAttribute('style', new_value);
 42 | 			}));
 43 | 		},
 44 | 		style: value => {
 45 | 			if (typeof value === "undefined" || value === null) return obj.el[0].getAttribute('style');
 46 | 			obj.el.forEach(item => item.setAttribute('style', value));
 47 | 		},
 48 | 		hide: (time, callback) => {
 49 | 			time = time || 0;
 50 | 			setTimeout(()=>{
 51 | 				obj.el.forEach(item => item.style.display = 'none');
 52 | 				if (typeof callback === "function") callback();
 53 | 			}, time);
 54 | 		},
 55 | 		show: (time, callback) => {
 56 | 			time = time || 0;
 57 | 			setTimeout(()=>{
 58 | 				obj.el.forEach(item => item.style.display = prevDisplay);
 59 | 				if (typeof callback === "function") callback();
 60 | 			}, time);
 61 | 		},
 62 | 		fadeOut: (time, callback) => {
 63 | 			if (typeof time === "undefined" || time === null) time = 0;
 64 | 			obj.el.forEach(item => {
 65 | 				item.style.opacity ='0';
 66 | 				item.style.transition = `opacity ${time}ms`;
 67 | 			});
 68 | 			setTimeout(callback, time);
 69 | 		},
 70 | 		fadeIn: (time, callback) => {
 71 | 			if (typeof time === "undefined" || time === null) time = 0;
 72 | 			obj.el.forEach(item => {
 73 | 				item.style.opacity = '1';
 74 | 				item.style.transition = `opacity ${time}ms`;
 75 | 			});
 76 | 			setTimeout(callback,time);
 77 | 		},
 78 | 		text: value => {
 79 | 			if (typeof value === "undefined" || value === null) return obj.el[0].innerText;
 80 | 			obj.el.forEach(item => item.innerText = value);
 81 | 		},
 82 | 		html: value => {
 83 | 			if (typeof value === "undefined" || value === null) return obj.el[0].innerHTML;
 84 | 			obj.el.forEach(item => item.innerHTML = value);
 85 | 		},
 86 | 		body: value => {
 87 | 			if (typeof value === "undefined" || value === null) return obj.el[0].outerHTML;
 88 | 			obj.el.forEach(item => item.outerHTML = value);
 89 | 		},
 90 | 		on: (event, callback) => obj.el.forEach(item => item.addEventListener(event, callback)),
 91 | 		off: (event, callback) => obj.el.forEach(item => item.removeEventListener(event, callback)),
 92 | 		append: value => obj.el.forEach(item => item.innerHTML=`${item.innerHTML}${value}`),
 93 | 		prepend: value => obj.el.forEach(item => item.innerHTML=`${value}${item.innerHTML}`),
 94 | 		remove: () => obj.el.forEach(item => item.remove()),
 95 | 		empty: () => obj.el.forEach(item => item.innerHTML=''),
 96 | 		input: (value,callback,other) => {
 97 | 			let denied = false;
 98 | 			if (value == undefined && callback == undefined && other == undefined)
 99 | 				return obj.el[0].value;
100 | 			else {
101 | 				if (typeof value === 'string'){
102 | 					if (value === obj.el[0].value)
103 | 						callback();
104 | 					else
105 | 						other();
106 | 				} else if (Array.isArray(value)){
107 | 					for (i=0;i<value.length;i++){
108 | 						if (value[i] == obj.el[0].value){
109 | 							denied=true;
110 | 							callback();
111 | 							break;
112 | 						}
113 | 					}	
114 | 					if (!denied) other();
115 | 				}
116 | 			}
117 | 		},
118 | 		inputs: (option, original) => {
119 | 			let denied = false;
120 | 			for (let i = 0; i < option.length; i++){
121 | 				if (typeof option[i].value === 'string'){
122 | 					if (obj.el[0].value === option[i].value){
123 | 						option[i].callback();
124 | 						denied = true;
125 | 					}
126 | 				} else if (Array.isArray(option[i].value)) {
127 | 					for (let j = 0; j < value.length; j++){
128 | 						if (option[i].value[j] === obj.el[0].value){
129 | 							denied = true;
130 | 							option[i].callback();
131 | 							break;
132 | 						}
133 | 					}
134 | 				}
135 | 			}
136 | 			if (!denied && typeof original === "function") original();
137 | 		},
138 | 		val: value => {
139 | 			if (typeof value === "undefined" || value === null)
140 | 				return obj.el[0].value;
141 | 			else
142 | 				obj.el[0].value = value;
143 | 		},
144 | 		check: (checked, unchecked) => {
145 | 			if (typeof checked === "function" && typeof unchecked === "function"){
146 | 				if (obj.el[0].checked)
147 | 					checked();
148 | 				else
149 | 					unchecked();
150 | 			} else {
151 | 				return obj.el[0].checked
152 | 			}
153 | 		},
154 | 		click: callback => typeof callback === "function" && obj.el.forEach(item => item.onclick = () => callback()),
155 | 		hover: (outhover, onhover) => {
156 | 			if (!(typeof outhover === "undefined" || outhover === null) && !(typeof onhover === "undefined" || outhover === null)) {
157 | 				obj.el.forEach(item => {
158 | 					item.onmouseleave = () => outhover();
159 | 					item.onmouseenter = () => onhover();
160 | 				});
161 | 			}
162 | 		},
163 | 		title: value => {
164 | 			if (typeof title === "undefined" || title === null) return obj.el[0].title;
165 | 			obj.el.forEach(item => item.title = value);
166 | 		},
167 | 		scroll: () => obj.el[0].scrollIntoView({ behavior: 'smooth' }),
168 | 		newEl: (tag,content,pos,attr) => {
169 | 			if (typeof pos === "undefined" || pos === null) pos = 'front';
170 | 			if (!(typeof tag === "undefined" || tag === null) && !(content === "undefined" || content === null)){
171 | 				let nel = document.createElement(tag);
172 | 				nel.innerHTML = content;
173 | 				attr.forEach(value => nel.setAttribute(value[0],value[1]));
174 | 				if (pos === 'front')
175 | 					obj.el.forEach(item => item.append(nel));
176 | 				else if (pos === 'back')
177 | 					obj.el.forEach(item => item.prepend(nel));
178 | 			}
179 | 		},
180 | 		appendEl: (value, remove) => {
181 | 			if (remove) obj.el.forEach(item => item.innerHTML='');
182 | 			obj.el.forEach(item => item.append(value));
183 | 		},
184 | 		disableEl: value => obj.el.forEach(item => item.removeChild(value)),
185 | 		prependEl: value => obj.el.forEach(item => item.prepend(value)),
186 | 		sameEl: target => obj.el[0].outerHTML === target.outerHTML,
187 | 		addClass: value => obj.el.forEach(item => item.classList.add(value)),
188 | 		removeClass: value => obj.el.forEach(item => item.classList.remove(value)),
189 | 		hasClass: value => obj.el[0].classList.contains(value),
190 | 		toggleClass: value => obj.el.forEach(item => item.classList.toggle(value)),
191 | 		rotate: (deg,loop) => {
192 | 			if (typeof deg === "undefined" || deg === null) deg = 1;
193 | 			let rotSp=deg, rotI=0, rotCt=1;
194 | 			if (loop.loop){
195 | 				if (typeof loop.delay === "undefined" || loop.delay === null) loop.delay=1;
196 | 				obj.rot = setInterval(()=>{
197 | 					if (rotSp >= 1){
198 | 						if (rotI >= 360) {
199 | 							rotI=0;
200 | 							rotCt++;
201 | 						}
202 | 					} else {
203 | 						if (rotI <= -360) {
204 | 							rotI=0;
205 | 							rotCt++;
206 | 						}
207 | 					}
208 | 					obj.el[0].style.transform = `rotate(${rotI}deg)`;
209 | 					rotI+=rotSp;
210 | 					if (rotCt === loop.count && loop.end) clearInterval(obj.rot);
211 | 				},loop.delay);
212 | 			} else {
213 | 				obj.el[0].style.transform = `rotate(${rotSp}deg)`;
214 | 			}
215 | 		},
216 | 		tclick: (callback) => !(typeof callback === "undefined" || callback === null) && obj.el.forEach(item => item.ondblclick = callback),
217 | 		parent: () => obj.el[0].parentNode,
218 | 		child: () => obj.el[0].children,
219 | 		first: () => obj.el[0],
220 | 		typing: option => {
221 | 			let i = 0, text = option.str, speed = option.speed;
222 | 			if (option.clrPrev) obj.el[0].innerHTML='';
223 | 			if (option.loop) {
224 | 				if (typeof option.delay === "undefined" || option.delay === null) option.delay=1000;
225 | 				let type=() => {
226 | 					if (i < text.length) {
227 | 						obj.el[0].innerHTML += text.charAt(i);
228 | 						i++;
229 | 						setTimeout(type, speed);
230 | 					}
231 | 				}
232 | 				type();
233 | 				setInterval(()=>{
234 | 					i = 0;
235 | 					obj.el[0].innerHTML='';
236 | 					type();
237 | 				},speed*text.length+option.delay);
238 | 			} else {
239 | 				let type=()=>{
240 | 					if (i < text.length) {
241 | 						obj.el[0].innerHTML += text.charAt(i);
242 | 						i++;
243 | 						setTimeout(type, speed);
244 | 					}
245 | 				}
246 | 				type();
247 | 			}
248 | 		},
249 | 		siblings: () => Array.prototype.filter.call(obj.el[0].parentNode.children, child => child !== obj.el[0]),
250 | 		switch: target => {
251 | 			let swap,tar;
252 | 			obj.el.forEach(item => {
253 | 				tar = document.querySelector(target);
254 | 				swap = item.outerHTML;
255 | 				item.outerHTML = tar.outerHTML;
256 | 				tar.outerHTML = swap;
257 | 			});
258 | 		},
259 | 		is: target => obj.el[0].outerHTML === target,
260 | 		same: target => obj.el[0].innerHTML === target,
261 | 		next: () => obj.el[0].nextElementSibling,
262 | 		prev: () => obj.el[0].previousElementSibling
263 | 	}
264 | 	return obj;
265 | }
266 | const rdom = {
267 | 	el: (tag,content,attr) => {
268 | 		nel = document.createElement(tag);
269 | 		if (!(typeof content === "undefined" || content === null)) {
270 | 			if (typeof content === "string") 
271 | 				nel.innerHTML = content;
272 | 			else if (Array.isArray(content))
273 | 				content.forEach(item => nel.append(item));
274 | 		} 
275 | 		if (!(typeof attr === undefined || attr === null)) attr.forEach(value => nel.setAttribute(value[0],value[1]));
276 | 		return nel;
277 | 	},
278 | 	render: (value,target,pos,remove) => {
279 | 		if (remove) target.innerHTML = '';
280 | 		if (typeof pos === "undefined" || pos === null) pos = 'front';
281 | 		if (pos === 'front')
282 | 			target.append(value);
283 | 		else if (pos === 'back')
284 | 			target.prepend(value);
285 | 	},
286 | 	remove: (value,target) => target.removeChild(value),
287 | 	attr: (el, attribute) => attribute.forEach(value => el.setAttribute(value[0],value[1])),
288 | 	style: (el, property) => el.setAttribute('style',property),
289 | 	css: (el, property) => {
290 | 		property.forEach(value => {
291 | 			if (el.getAttribute('style') === null) el.setAttribute('style', '');
292 | 			let new_value = `${el.getAttribute('style')};${value[0]}:${value[1]}`
293 | 			el.setAttribute('style', new_value)
294 | 		});
295 | 	},
296 | 	contains: (el, child) => el !== child && el.contains(child),
297 | 	on: (el, event, callback) => el.addEventListener(event, callback),
298 | 	off: (el, event, callback) => el.removeEventListener(event, callback) 
299 | };
300 | const rUI = {
301 | 	setBGVideo: obj => {
302 | 		let a = document.querySelector("body");
303 | 		a.innerHTML = '<video style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" autoplay loop class="baceo-vid" muted plays-inline><source src='+obj.path+' type=video/'+obj.type+'></video>'+a.innerHTML;
304 | 		if (!(typeof obj.style === "undefined" || obj.style === null)){
305 | 			let b = document.querySelector(".baceo-vid").style;
306 | 			b = b + obj.style;
307 | 		}
308 | 	},
309 | 	setBGImage: path => {
310 | 		let a = document.querySelector("body");
311 | 		a.innerHTML = `<img style="position:fixed; right:0; top:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1" src="${path}"></img> ${a.innerHTML}`;
312 | 	},
313 | 	setLoadBar: obj => {
314 | 		let opt = {};
315 | 		if (!(typeof obj === "undefined" || obj === null)) opt = obj; 
316 | 		let body = document.querySelector("body");
317 | 		body.innerHTML = "<div class='processjs'></div>" + body.innerHTML;
318 | 		let line = document.querySelector(".processjs");
319 | 		if (typeof opt.position === "undefined" || opt.position === null) opt.position = "absolute";
320 | 		if (typeof opt.size === "undefined" || opt.size === null) opt.size = "5px";
321 | 		if (typeof opt.color === "undefined" || opt.color === null) opt.color = "red";
322 | 		line.style = `position: absolute;left:0;right:0;top:0;height:${opt.size};background-color:${opt.color}`;
323 | 		if (typeof opt.speed === "undefined" || opt.speed === null) opt.speed = 3;
324 | 		let count = 0;
325 | 		let loop = setInterval(()=>{
326 | 			count++;
327 | 			line.style.width = count + "%";
328 | 			if (count === 101){
329 | 				clearInterval(loop);
330 | 				line.outerHTML = "";
331 | 			}
332 | 		},opt.speed);
333 | 	}
334 | }
335 | const rDev = {
336 | 	mobile: callback => 
337 | 		((navigator.userAgent.match(/Android/i) 
338 | 		|| navigator.userAgent.match(/webOS/i) 
339 | 		|| navigator.userAgent.match(/iPhone/i) 
340 | 		|| navigator.userAgent.match(/iPad/i) 
341 | 		|| navigator.userAgent.match(/iPod/i) 
342 | 		|| navigator.userAgent.match(/BlackBerry/i) 
343 | 		|| navigator.userAgent.match(/Windows Phone/i))
344 | 		&& (typeof callback !== "undefined" || callback !== null)
345 | 		) && callback(),
346 | 	windows: callback => (~navigator.appVersion.indexOf("Win") && typeof callback === "function") && callback(),
347 | 	mac: callback => (~navigator.appVersion.indexOf("Mac") && typeof callback === "function") && callback(),
348 | 	linux: callback => (~navigator.appVersion.indexOf("Linux") && typeof callback === "function") && callback(),
349 | 	unix: callback => (~navigator.appVersion.indexOf("X11") && typeof callback === "function") && callback(),
350 | 	os: (os,callback) => (~navigator.appVersion.indexOf(os) && typeof callback === "function") && callback(),
351 | 	current: () => navigator.appVersion
352 | }
353 | const rUtils = {
354 | 	isArray: arr => Array.isArray(arr),
355 | 	inArray: (val, arr) => arr.indexOf(val),
356 | 	parseJSON: str => JSON.parse(str),
357 | 	parseHTML: str => {
358 | 		let tmp = document.implementation.createHTMLDocument();
359 | 		tmp.body.innerHTML = str;
360 | 		return tmp.body.children;
361 | 	},
362 | 	isEmptyObject: obj => Object.keys(obj).length === 0,
363 | 	isOdd: num => num % 2 !== 0,
364 | 	now: () => Date.now()
365 | }
366 | if (typeof module === "object" && typeof module.exports === "object") {
367 | 	module.exports.rt = rt;
368 | 	module.exports.rDev = rDev;
369 | 	module.exports.rUI = rUI;
370 | 	module.exports.rdom = rdom;
371 | 	module.exports.rUtils = rUtils;
372 | }
373 | 


--------------------------------------------------------------------------------