From: bochard Date: Mon, 9 Jun 2025 11:02:55 +0000 (+0800) Subject: new RPG theme and app name X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=955b32f26eeb647a033f892194e241b6f3612508;p=QuestLog.git new RPG theme and app name --- diff --git a/README.md b/README.md index d0bde01..24a7c12 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -### WinDo-7 -a web-based todo app with windows 7 theme that could somehow help you get productive. +### QuestLog +a web-based todo app with RPG theme that might gonna help you get productive. -windows 7 theme: [khang_nd/7.css](https://github.com/khang-nd/7.css) +RPG theme: [RonenNess/RPGUI](https://github.com/RonenNess/RPGUI) _(under development...)_ \ No newline at end of file diff --git a/database.sql b/database.sql index 68838c2..0c12700 100644 --- a/database.sql +++ b/database.sql @@ -1,9 +1,9 @@ -CREATE DATABASE IF NOT EXISTS windo7; +CREATE DATABASE IF NOT EXISTS QuestLog; -USE windo7; +USE QuestLog; CREATE TABLE users ( - user_id INT(11) NOT NULL AUTO_INCREMENT, + user_id INT(11) NOT NULL AUTO_INCREMENT, username VARCHAR(20) NOT NULL, email VARCHAR(30) NOT NULL, pwd VARCHAR(255) NOT NULL, @@ -12,7 +12,7 @@ CREATE TABLE users ( ); CREATE TABLE tasks ( - task_id INT(11) NOT NULL AUTO_INCREMENT, + task_id INT(11) NOT NULL AUTO_INCREMENT, task VARCHAR(255) NOT NULL, created_datetime DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, user_id int(11) NOT NULL, diff --git a/dist/LICENSE.txt b/dist/LICENSE.txt new file mode 100644 index 0000000..71ba02d --- /dev/null +++ b/dist/LICENSE.txt @@ -0,0 +1,23 @@ +RPGUI (RPG gui for web games) is distributed with the zlib-license: + +/* + This software is provided 'as-is', without any express or implied + warranty. In no event will the authors be held liable for any damages + arising from the use of this software. + + Permission is granted to anyone to use this software for any purpose, + including commercial applications, and to alter it and redistribute it + freely, subject to the following restrictions: + + 1. The origin of this software must not be misrepresented; you must not + claim that you wrote the original software. If you use this software + in a product, an acknowledgment in the product documentation would be + appreciated but is not required. + 2. Altered source versions must be plainly marked as such, and must not be + misrepresented as being the original software. + 3. This notice may not be removed or altered from any source distribution. + + Ronen Ness + ronenness@gmail.com + +*/ \ No newline at end of file diff --git a/dist/README.md b/dist/README.md new file mode 100644 index 0000000..8cf34fc --- /dev/null +++ b/dist/README.md @@ -0,0 +1,56 @@ +# RPGUI +Lightweight framework for old-school RPG GUI in web! + +## Live example + +Live examples can be found [here](http://ronenness.github.io/RPGUI/). + +## What is it? +This framework provide out-of-the-box GUI for web games with old-school RPG style. +Once including this lib all you need to do is start adding regular html elements with RPGUI classes, and RPGUI will do all the rest! + +![alt tag](https://raw.githubusercontent.com/RonenNess/RPGUI/master/screenshot.jpg) +(Image is slightly outdated.) + +**RPGUI is a css+js framework for client side only, you don't need to require it on node.js side.** + +## Key Features +The following are the key features of RPGUI: + +- Using RPGUI don't require coding at all! Just using css classes. +- A complete and whole CSS system that will cover most HTML elements. +- Containers with several type of frames. +- Dragging functionality. +- Beautiful sliders and progress bars. +- Customized cursors with 8-bit style. +- A collection of build-in icons for rpgs. +- Neat checkboxes and Radio buttons. +- Styled buttons. +- Sophisticated dropdown widget (based on <select>). +- Pretty listbox (based on <select>). +- Very easy to use. Create game GUI in seconds with only plain html code. +- No dependencies, works right out of the box! +- Very lightweight - just ~25kb of css/js, + 1.5Mb of resources (images). + +RPGUI should work on all modern browsers, tested and confirmed on Chrome, FireFox, Opera, and Internet Explorer edge*. + +## How to use + +RPGUI docs can be found at the [github repo](https://github.com/RonenNess/RPGUI#rpgui), or you can watch some live example [here](http://ronenness.github.io/RPGUI/). + +## Credits + +- PRGUI default theme uses the public-domain graphics made by Buch, aka Michele Bucelli ()http://opengameart.org/users/buch). +- Special thanks to titoasty (https://github.com/titoasty) that contributed a lot to this lib. + +## License + +RPGUI is distributed under the zlib-license, and is absolutely free for use in any purpose (personal, educational, commercial, etc..). +See LICENSE.txt for more info. + +## Contact Me + +For issues / bugs use the Report Issue button. +For anything else, feel free to contact me: ronenness@gmail.com. + + diff --git a/dist/img/background-image-golden.png b/dist/img/background-image-golden.png new file mode 100644 index 0000000..c69405d Binary files /dev/null and b/dist/img/background-image-golden.png differ diff --git a/dist/img/background-image-golden2.png b/dist/img/background-image-golden2.png new file mode 100644 index 0000000..6a75a49 Binary files /dev/null and b/dist/img/background-image-golden2.png differ diff --git a/dist/img/background-image-grey.png b/dist/img/background-image-grey.png new file mode 100644 index 0000000..7fcaf03 Binary files /dev/null and b/dist/img/background-image-grey.png differ diff --git a/dist/img/background-image.png b/dist/img/background-image.png new file mode 100644 index 0000000..37e35e0 Binary files /dev/null and b/dist/img/background-image.png differ diff --git a/dist/img/border-image-golden.png b/dist/img/border-image-golden.png new file mode 100644 index 0000000..97bf501 Binary files /dev/null and b/dist/img/border-image-golden.png differ diff --git a/dist/img/border-image-golden2.png b/dist/img/border-image-golden2.png new file mode 100644 index 0000000..785341e Binary files /dev/null and b/dist/img/border-image-golden2.png differ diff --git a/dist/img/border-image-grey.png b/dist/img/border-image-grey.png new file mode 100644 index 0000000..8cba42b Binary files /dev/null and b/dist/img/border-image-grey.png differ diff --git a/dist/img/border-image.png b/dist/img/border-image.png new file mode 100644 index 0000000..d6c2379 Binary files /dev/null and b/dist/img/border-image.png differ diff --git a/dist/img/button-background.png b/dist/img/button-background.png new file mode 100644 index 0000000..24b725a Binary files /dev/null and b/dist/img/button-background.png differ diff --git a/dist/img/button-down.png b/dist/img/button-down.png new file mode 100644 index 0000000..57a7f07 Binary files /dev/null and b/dist/img/button-down.png differ diff --git a/dist/img/button-golden-down.png b/dist/img/button-golden-down.png new file mode 100644 index 0000000..af8e49d Binary files /dev/null and b/dist/img/button-golden-down.png differ diff --git a/dist/img/button-golden-hover.png b/dist/img/button-golden-hover.png new file mode 100644 index 0000000..a437e07 Binary files /dev/null and b/dist/img/button-golden-hover.png differ diff --git a/dist/img/button-golden-left.png b/dist/img/button-golden-left.png new file mode 100644 index 0000000..b07d42d Binary files /dev/null and b/dist/img/button-golden-left.png differ diff --git a/dist/img/button-golden-right.png b/dist/img/button-golden-right.png new file mode 100644 index 0000000..bba1cee Binary files /dev/null and b/dist/img/button-golden-right.png differ diff --git a/dist/img/button-golden.png b/dist/img/button-golden.png new file mode 100644 index 0000000..21d479e Binary files /dev/null and b/dist/img/button-golden.png differ diff --git a/dist/img/button-hover.png b/dist/img/button-hover.png new file mode 100644 index 0000000..ae73206 Binary files /dev/null and b/dist/img/button-hover.png differ diff --git a/dist/img/button.png b/dist/img/button.png new file mode 100644 index 0000000..de267f7 Binary files /dev/null and b/dist/img/button.png differ diff --git a/dist/img/checkbox-golden-off.png b/dist/img/checkbox-golden-off.png new file mode 100644 index 0000000..b2cd898 Binary files /dev/null and b/dist/img/checkbox-golden-off.png differ diff --git a/dist/img/checkbox-golden-on.png b/dist/img/checkbox-golden-on.png new file mode 100644 index 0000000..b01dffc Binary files /dev/null and b/dist/img/checkbox-golden-on.png differ diff --git a/dist/img/checkbox-off.png b/dist/img/checkbox-off.png new file mode 100644 index 0000000..4dd5796 Binary files /dev/null and b/dist/img/checkbox-off.png differ diff --git a/dist/img/checkbox-on.png b/dist/img/checkbox-on.png new file mode 100644 index 0000000..f32b538 Binary files /dev/null and b/dist/img/checkbox-on.png differ diff --git a/dist/img/cursor/cursor.cur b/dist/img/cursor/cursor.cur new file mode 100644 index 0000000..c21d448 Binary files /dev/null and b/dist/img/cursor/cursor.cur differ diff --git a/dist/img/cursor/default.png b/dist/img/cursor/default.png new file mode 100644 index 0000000..edc2c48 Binary files /dev/null and b/dist/img/cursor/default.png differ diff --git a/dist/img/cursor/grab-close.png b/dist/img/cursor/grab-close.png new file mode 100644 index 0000000..128f3f0 Binary files /dev/null and b/dist/img/cursor/grab-close.png differ diff --git a/dist/img/cursor/grab-open.png b/dist/img/cursor/grab-open.png new file mode 100644 index 0000000..3e786f5 Binary files /dev/null and b/dist/img/cursor/grab-open.png differ diff --git a/dist/img/cursor/point.png b/dist/img/cursor/point.png new file mode 100644 index 0000000..58a3158 Binary files /dev/null and b/dist/img/cursor/point.png differ diff --git a/dist/img/cursor/select.png b/dist/img/cursor/select.png new file mode 100644 index 0000000..d1db34f Binary files /dev/null and b/dist/img/cursor/select.png differ diff --git a/dist/img/hr-golden.png b/dist/img/hr-golden.png new file mode 100644 index 0000000..cd8a27e Binary files /dev/null and b/dist/img/hr-golden.png differ diff --git a/dist/img/hr.png b/dist/img/hr.png new file mode 100644 index 0000000..c9a7a3f Binary files /dev/null and b/dist/img/hr.png differ diff --git a/dist/img/icons/armor-slot.png b/dist/img/icons/armor-slot.png new file mode 100644 index 0000000..1408cac Binary files /dev/null and b/dist/img/icons/armor-slot.png differ diff --git a/dist/img/icons/empty-slot.png b/dist/img/icons/empty-slot.png new file mode 100644 index 0000000..d90de1c Binary files /dev/null and b/dist/img/icons/empty-slot.png differ diff --git a/dist/img/icons/exclamation.png b/dist/img/icons/exclamation.png new file mode 100644 index 0000000..788e656 Binary files /dev/null and b/dist/img/icons/exclamation.png differ diff --git a/dist/img/icons/helmet-slot.png b/dist/img/icons/helmet-slot.png new file mode 100644 index 0000000..f17c16c Binary files /dev/null and b/dist/img/icons/helmet-slot.png differ diff --git a/dist/img/icons/magic-slot.png b/dist/img/icons/magic-slot.png new file mode 100644 index 0000000..b58bd8f Binary files /dev/null and b/dist/img/icons/magic-slot.png differ diff --git a/dist/img/icons/potion-blue.png b/dist/img/icons/potion-blue.png new file mode 100644 index 0000000..277b654 Binary files /dev/null and b/dist/img/icons/potion-blue.png differ diff --git a/dist/img/icons/potion-green.png b/dist/img/icons/potion-green.png new file mode 100644 index 0000000..a2bdc6e Binary files /dev/null and b/dist/img/icons/potion-green.png differ diff --git a/dist/img/icons/potion-red.png b/dist/img/icons/potion-red.png new file mode 100644 index 0000000..be8f7e7 Binary files /dev/null and b/dist/img/icons/potion-red.png differ diff --git a/dist/img/icons/potion-slot.png b/dist/img/icons/potion-slot.png new file mode 100644 index 0000000..dd9974c Binary files /dev/null and b/dist/img/icons/potion-slot.png differ diff --git a/dist/img/icons/ring-slot.png b/dist/img/icons/ring-slot.png new file mode 100644 index 0000000..fa3e0c9 Binary files /dev/null and b/dist/img/icons/ring-slot.png differ diff --git a/dist/img/icons/shield-slot.png b/dist/img/icons/shield-slot.png new file mode 100644 index 0000000..e1acc24 Binary files /dev/null and b/dist/img/icons/shield-slot.png differ diff --git a/dist/img/icons/shield.png b/dist/img/icons/shield.png new file mode 100644 index 0000000..1db5250 Binary files /dev/null and b/dist/img/icons/shield.png differ diff --git a/dist/img/icons/shoes-slot.png b/dist/img/icons/shoes-slot.png new file mode 100644 index 0000000..5c77df9 Binary files /dev/null and b/dist/img/icons/shoes-slot.png differ diff --git a/dist/img/icons/sword.png b/dist/img/icons/sword.png new file mode 100644 index 0000000..9a0d434 Binary files /dev/null and b/dist/img/icons/sword.png differ diff --git a/dist/img/icons/weapon-slot.png b/dist/img/icons/weapon-slot.png new file mode 100644 index 0000000..109c749 Binary files /dev/null and b/dist/img/icons/weapon-slot.png differ diff --git a/dist/img/progress-bar-left.png b/dist/img/progress-bar-left.png new file mode 100644 index 0000000..a3d3072 Binary files /dev/null and b/dist/img/progress-bar-left.png differ diff --git a/dist/img/progress-bar-right.png b/dist/img/progress-bar-right.png new file mode 100644 index 0000000..a1155c2 Binary files /dev/null and b/dist/img/progress-bar-right.png differ diff --git a/dist/img/progress-bar-track.png b/dist/img/progress-bar-track.png new file mode 100644 index 0000000..bb3ed4f Binary files /dev/null and b/dist/img/progress-bar-track.png differ diff --git a/dist/img/progress-blue.png b/dist/img/progress-blue.png new file mode 100644 index 0000000..2c2d14d Binary files /dev/null and b/dist/img/progress-blue.png differ diff --git a/dist/img/progress-green.png b/dist/img/progress-green.png new file mode 100644 index 0000000..a7a1b84 Binary files /dev/null and b/dist/img/progress-green.png differ diff --git a/dist/img/progress-red.png b/dist/img/progress-red.png new file mode 100644 index 0000000..a96e14d Binary files /dev/null and b/dist/img/progress-red.png differ diff --git a/dist/img/progress.png b/dist/img/progress.png new file mode 100644 index 0000000..1edb42e Binary files /dev/null and b/dist/img/progress.png differ diff --git a/dist/img/radio-golden-off.png b/dist/img/radio-golden-off.png new file mode 100644 index 0000000..6030c48 Binary files /dev/null and b/dist/img/radio-golden-off.png differ diff --git a/dist/img/radio-golden-on.png b/dist/img/radio-golden-on.png new file mode 100644 index 0000000..c09ddae Binary files /dev/null and b/dist/img/radio-golden-on.png differ diff --git a/dist/img/radio-off.png b/dist/img/radio-off.png new file mode 100644 index 0000000..a29328d Binary files /dev/null and b/dist/img/radio-off.png differ diff --git a/dist/img/radio-on.png b/dist/img/radio-on.png new file mode 100644 index 0000000..282b121 Binary files /dev/null and b/dist/img/radio-on.png differ diff --git a/dist/img/scrollbar-button.png b/dist/img/scrollbar-button.png new file mode 100644 index 0000000..4e105ce Binary files /dev/null and b/dist/img/scrollbar-button.png differ diff --git a/dist/img/scrollbar-thumb.png b/dist/img/scrollbar-thumb.png new file mode 100644 index 0000000..460894a Binary files /dev/null and b/dist/img/scrollbar-thumb.png differ diff --git a/dist/img/scrollbar-track.png b/dist/img/scrollbar-track.png new file mode 100644 index 0000000..9441e7d Binary files /dev/null and b/dist/img/scrollbar-track.png differ diff --git a/dist/img/select-background-image.png b/dist/img/select-background-image.png new file mode 100644 index 0000000..cde4785 Binary files /dev/null and b/dist/img/select-background-image.png differ diff --git a/dist/img/select-border-image.png b/dist/img/select-border-image.png new file mode 100644 index 0000000..526c4ed Binary files /dev/null and b/dist/img/select-border-image.png differ diff --git a/dist/img/slider-left-golden.png b/dist/img/slider-left-golden.png new file mode 100644 index 0000000..5924091 Binary files /dev/null and b/dist/img/slider-left-golden.png differ diff --git a/dist/img/slider-left.png b/dist/img/slider-left.png new file mode 100644 index 0000000..c12cd1e Binary files /dev/null and b/dist/img/slider-left.png differ diff --git a/dist/img/slider-right-golden.png b/dist/img/slider-right-golden.png new file mode 100644 index 0000000..25b8f43 Binary files /dev/null and b/dist/img/slider-right-golden.png differ diff --git a/dist/img/slider-right.png b/dist/img/slider-right.png new file mode 100644 index 0000000..8a9e5e0 Binary files /dev/null and b/dist/img/slider-right.png differ diff --git a/dist/img/slider-thumb-golden.png b/dist/img/slider-thumb-golden.png new file mode 100644 index 0000000..22d7e96 Binary files /dev/null and b/dist/img/slider-thumb-golden.png differ diff --git a/dist/img/slider-thumb.png b/dist/img/slider-thumb.png new file mode 100644 index 0000000..1004389 Binary files /dev/null and b/dist/img/slider-thumb.png differ diff --git a/dist/img/slider-track-golden.png b/dist/img/slider-track-golden.png new file mode 100644 index 0000000..da2c683 Binary files /dev/null and b/dist/img/slider-track-golden.png differ diff --git a/dist/img/slider-track.png b/dist/img/slider-track.png new file mode 100644 index 0000000..9405512 Binary files /dev/null and b/dist/img/slider-track.png differ diff --git a/dist/package.json b/dist/package.json new file mode 100644 index 0000000..dd9a92d --- /dev/null +++ b/dist/package.json @@ -0,0 +1,28 @@ +{ + "name": "rpgui", + "version": "1.0.3", + "description": "Lightweight framework for old-school RPG GUI in web!", + "main": "", + "dependencies": { + }, + "repository": { + "type": "git", + "url": "git+https://github.com/RonenNess/RPGUI.git" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "gui", + "rpg", + "game", + "interface", + "ui" + ], + "bugs": { + "url": "https://github.com/RonenNess/RPGUI/issues" + }, + "author": "Ronen Ness", + "license": "Zlib", + "homepage": "http://ronenness.github.io/RPGUI/" +} diff --git a/dist/rpgui.css b/dist/rpgui.css new file mode 100644 index 0000000..c31f010 --- /dev/null +++ b/dist/rpgui.css @@ -0,0 +1,972 @@ +/* +Import the font stylesheet. +If not supported you can add backup via: + +inside your html file. +*/ +@import url("https://fonts.googleapis.com/css?family=Press+Start+2P"); +/** +* Customized scrollbars +*/ +/* to get pixelated images (nearest-neighbor filter) on all browsers */ +.rpgui-pixelated { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: -webkit-optimize-contrast; + image-rendering: -webkit-crisp-edges; + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: pixelated; } + +/* unselectable text */ +.rpgui-noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +/* center things */ +.rpgui-center { + text-align: center; + align-content: center; } + +/* rotate object 90 degrees */ +.rpgui-rotate-90 { + /* rotate 90 degrees */ + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + /* rotate from center-left side */ + -ms-transform-origin: 0% 50%; + /* IE 9 */ + -webkit-transform-origin: 0% 50%; + /* Chrome, Safari, Opera */ + transform-origin: 0% 50%; } + +/** +* Styling for buttons +*/ +/* button style */ +.rpgui-button { + /* hide button default stuff */ + background-color: Transparent; + background-repeat: no-repeat; + border: none; + overflow: hidden; + outline: none; + /* background */ + background: url("img/button.png") no-repeat no-repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; + background-size: 100% 100%; + /* font size */ + font-size: 1.0em; + /* default size and display */ + max-width: 100%; + min-width: 140px; + height: 60px; + display: inline-block; + /* padding */ + padding-left: 35px; + padding-right: 35px; } + +/* button hover */ +.rpgui-button.hover, +.rpgui-button:hover { + background-image: url("img/button-hover.png"); } + +/* button clicked */ +.rpgui-button.down, +.rpgui-button:active { + background-image: url("img/button-down.png"); } + +/* golden button stuff */ +.rpgui-button.golden p { + display: inline-block; } + +/* golden button style */ +.rpgui-button.golden { + /* hide button default stuff */ + background-color: Transparent; + background-repeat: no-repeat; + border: none; + overflow: hidden; + outline: none; + /* background */ + background: url("img/button-golden.png") no-repeat no-repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; + background-size: 100% 80%; + /* default size and display */ + max-width: 100%; + min-width: 140px; + height: 60px; + display: inline-block; + /* padding */ + padding-top: 5px; + padding-left: 35px; + padding-right: 35px; + overflow: visible; } + +/* button hover */ +.rpgui-button.golden.hover, +.rpgui-button.golden:hover { + background-image: url("img/button-golden-hover.png"); } + +/* button clicked */ +.rpgui-button.golden.down, +.rpgui-button.golden:active { + background-image: url("img/button-golden-down.png"); } + +.rpgui-button.golden:before { + white-space: nowrap; + display: inline-block; + content: ""; + width: 34px; + display: block; + height: 110%; + background: transparent url("img/button-golden-left.png") no-repeat right center; + background-size: 100% 100%; + margin: 0 0 0 0; + left: 0px; + float: left; + margin-left: -46px; + margin-top: -5%; } + +.rpgui-button.golden:after { + white-space: nowrap; + display: block; + content: ""; + width: 34px; + height: 110%; + background: transparent url("img/button-golden-right.png") no-repeat left center; + background-size: 100% 100%; + margin: 0 0 0 0; + right: 0px; + float: right; + margin-right: -46px; + margin-top: -5%; } + +/* +.rpgui-button.golden:hover:before { + + background-image: url('img/button-golden-left-hover.png'); +} + +.rpgui-button.golden:hover:after { + + background-image: url('img/button-golden-right-hover.png'); +} +*/ +/** +* style for checkboxes +*/ +/* basic checkbox */ +.rpgui-content input[type=checkbox].rpgui-checkbox { + display: none; } + +.rpgui-content input[type=checkbox].rpgui-checkbox + label { + background: url("img/checkbox-off.png") no-repeat; + line-height: 24px; + display: inline-block; + background-size: auto 100%; + padding-left: 34px; + height: 24px; + margin-top: 10px; + margin-bottom: 10px; } + +.rpgui-content input[type=checkbox].rpgui-checkbox:checked + label { + background: url("img/checkbox-on.png") no-repeat; + line-height: 24px; + display: inline-block; + background-size: auto 100%; + padding-left: 34px; + height: 24px; } + +/* golden checkbox */ +.rpgui-content input[type=checkbox].rpgui-checkbox.golden + label { + background: url("img/checkbox-golden-off.png") no-repeat; + background-size: auto 100%; } + +.rpgui-content input[type=checkbox].rpgui-checkbox.golden:checked + label { + background: url("img/checkbox-golden-on.png") no-repeat; + background-size: auto 100%; } + +/** +* global content styling +*/ +/* game div with background image*/ +.rpgui-content { + padding: 0 0 0 0; + margin: 0 0 0 0; + width: 100%; + height: 100%; + left: 0px; + top: 0px; + position: fixed; + overflow: hidden; + font-size: 0.8em; } + +/* general rules to apply on anything inside the content */ +.rpgui-content * { + /* remove outline effect for input elements etc */ + outline: none; + /* prevent dragging */ + user-drag: none; + -webkit-user-drag: none; + /* prevent text selecting */ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + /* pixelated enlargement filter (to keep the pixel-art style when enlarging pictures) */ + -ms-interpolation-mode: nearest-neighbor; + image-rendering: -webkit-optimize-contrast; + image-rendering: -webkit-crisp-edges; + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: pixelated; + /* default font */ + font-family: 'Press Start 2P', cursive; } + +/** +* customized divs (containers) and framed objects (background and frame image). +*/ +/* game div without background image*/ +.rpgui-container { + /* position style and default z */ + position: fixed; + z-index: 10; + overflow: show; } + +/* game div with background image*/ +.rpgui-container.framed { + /* border */ + border-style: solid; + border-image-source: url("img/border-image.png"); + border-image-repeat: repeat; + border-image-slice: 6 6 6 6; + border-image-width: 18px; + border-width: 15px; + padding: 12px; + /* internal border */ + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + /* background */ + background: url("img/background-image.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* game div with golden background image*/ +.rpgui-container.framed-golden { + /* border */ + border-style: solid; + border-image-source: url("img/border-image-golden.png"); + border-image-repeat: repeat; + border-image-slice: 4 4 4 4; + border-image-width: 18px; + border-width: 15px; + padding: 12px; + /* internal border */ + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + /* background */ + background: url("img/background-image-golden.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* game div with golden2 background image*/ +.rpgui-container.framed-golden-2 { + /* border */ + border-style: solid; + border-image-source: url("img/border-image-golden2.png"); + border-image-repeat: repeat; + border-image-slice: 8 8 8 8; + border-image-width: 18px; + border-width: 15px; + padding: 12px; + /* internal border */ + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + /* background */ + background: url("img/background-image-golden2.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* game div with soft grey background image*/ +.rpgui-container.framed-grey { + position: relative; + /* border */ + border-style: solid; + border-image-source: url("img/border-image-grey.png"); + border-image-repeat: repeat; + border-image-slice: 3 3 3 3; + border-image-width: 7px; + border-width: 7px; + padding: 12px; + /* internal border */ + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + /* background */ + background: url("img/background-image-grey.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/** +* different cursor graphics +*/ +/* default cursor important */ +/* this rule is for when you specifically request this cursor class */ +.rpgui-cursor-default { + cursor: url("img/cursor/default.png"), auto !important; } + +/* default cursor, not important, for all elements without any other rule. */ +.rpgui-content, +label { + cursor: url("img/cursor/default.png"), auto; } + +/* pointer / hand cursor important */ +/* this rule is for when you specifically request this cursor class */ +.rpgui-cursor-point, +.rpgui-cursor-point * { + cursor: url("img/cursor/point.png") 10 0, auto !important; } + +/* pointer / hand cursor, not important, for all elements that have pointer by-default */ +.rpgui-content a, +.rpgui-content button, +.rpgui-button, +.rpgui-slider-container, +.rpgui-content input[type=radio].rpgui-radio + label, +.rpgui-list-imp, +.rpgui-dropdown-imp, +.rpgui-content input[type=checkbox].rpgui-checkbox + label { + cursor: url("img/cursor/point.png") 10 0, auto; } + +/* for input / text selection important */ +/* this rule is for when you specifically request this cursor class */ +.rpgui-cursor-select, +.rpgui-cursor-select * { + cursor: url("img/cursor/select.png") 10 0, auto !important; } + +/* for input / text selection, not important, for all elements that have pointer by-default */ +.rpgui-cursor-select, +.rpgui-content input, +.rpgui-content textarea { + cursor: url("img/cursor/select.png") 10 0, auto; } + +/* for grabbing stuff */ +/* this rule is for when you specifically request this cursor class */ +.rpgui-cursor-grab-open, +.rpgui-cursor-grab-open * { + cursor: url("img/cursor/grab-open.png") 10 0, auto !important; } + +/* for grabbing stuff */ +/* this rule is for when you specifically request this cursor class */ +.rpgui-cursor-grab-close, +.rpgui-cursor-grab-close * { + cursor: url("img/cursor/grab-close.png") 10 0, auto !important; } + +/** +* Customized dropdown with rpgui design. +*/ +/* dropdown box implemented with list (see rpgui-dropdown.js for details) */ +/* note! this class rule affect both the dropdown header and the list elements! */ +.rpgui-dropdown-imp, +.rpgui-dropdown { + /* font */ + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + color: white; + /* default size */ + min-height: 40px; + margin-top: 0px; + /* border */ + border-style: solid; + border-width: 7px 7px 7px 7px; + -moz-border-image: url("img/select-border-image.png") 10% repeat repeat; + -webkit-border-image: url("img/select-border-image.png") 10% repeat repeat; + -o-border-image: url("img/select-border-image.png") 10% repeat repeat; + border-image: url("img/select-border-image.png") 10% repeat repeat; + /* background */ + background: url("img/select-background-image.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* dropdown options list */ +ul.rpgui-dropdown-imp { + padding: 0 0 0 0 !important; + z-index: 100; } + +/* note! this affect only the dropdown header */ +/* shows the currently selected value from select element */ +.rpgui-content .rpgui-dropdown-imp-header { + color: white !important; + min-height: 22px !important; + padding: 5px 10px 0 10px !important; + margin: 0 0 0 0 !important; + position: relative !important; } + +/* dropdown options */ +.rpgui-dropdown-imp li { + /* font */ + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + color: white; + height: 16px; + /* remove the dot */ + list-style-type: none; + /* padding */ + padding-top: 6px; + padding-bottom: 6px; + padding-left: 6px; + /* background */ + background: url("img/select-background-image.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* dropdown options hover */ +.rpgui-dropdown-imp li:hover { + color: yellow; } + +/* dropdown hover */ +.rpgui-dropdown-imp:hover { + color: yellow; } + +/** +* hr styling +*/ +/* rpgui hr */ +.rpgui-content hr { + display: block; + border: 0px; + height: 10px; + background: url("img/hr.png") repeat-x top left; } + +/* rpgui golden hr */ +.rpgui-content hr.golden { + display: block; + border: 0px; + height: 10px; + background: url("img/hr-golden.png") no-repeat top left; + background-size: 100% 100%; } + +/** +* Icon styles. +*/ +.rpgui-icon { + display: inline-block; + background-size: 100% 100%; + background-repeat: no-repeat; + width: 64px; + height: 64px; } + +.rpgui-icon.sword { + background-image: url("img/icons/sword.png"); } + +.rpgui-icon.shield { + background-image: url("img/icons/shield.png"); } + +.rpgui-icon.exclamation { + background-image: url("img/icons/exclamation.png"); } + +.rpgui-icon.potion-red { + background-image: url("img/icons/potion-red.png"); } + +.rpgui-icon.potion-green { + background-image: url("img/icons/potion-green.png"); } + +.rpgui-icon.potion-blue { + background-image: url("img/icons/potion-blue.png"); } + +.rpgui-icon.weapon-slot { + background-image: url("img/icons/weapon-slot.png"); } + +.rpgui-icon.shield-slot { + background-image: url("img/icons/shield-slot.png"); } + +.rpgui-icon.armor-slot { + background-image: url("img/icons/armor-slot.png"); } + +.rpgui-icon.helmet-slot { + background-image: url("img/icons/helmet-slot.png"); } + +.rpgui-icon.ring-slot { + background-image: url("img/icons/ring-slot.png"); } + +.rpgui-icon.potion-slot { + background-image: url("img/icons/potion-slot.png"); } + +.rpgui-icon.magic-slot { + background-image: url("img/icons/magic-slot.png"); } + +.rpgui-icon.shoes-slot { + background-image: url("img/icons/shoes-slot.png"); } + +.rpgui-icon.empty-slot { + background-image: url("img/icons/empty-slot.png"); } + +/** +* input styling +*/ +/* input/textarea input */ +.rpgui-content input, +.rpgui-content textarea { + /* set size and colors */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 0.9em; + line-height: 32px; + background: #4e4a4e; + max-width: 100%; + width: 100%; + padding-left: 10px; + /* for ie */ + min-height: 30px; + /* enable text selecting */ + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); } + +/* textarea extra rules */ +.rpgui-content textarea { + line-height: 22px; + padding-top: 7px; + height: 80px; + resize: none; } + +/* selection highlight */ +.rpgui-content input::selection, +.rpgui-content textarea::selection { + background: rgba(0, 0, 0, 0.5); } + +.rpgui-content input::-moz-selection, +.rpgui-content textarea::-moz-selection { + background: rgba(0, 0, 0, 0.5); } + +/* dropdown box implemented with list (see rpgui-dropdown.js for details) */ +/* note! this class rule affect both the dropdown header and the list elements! */ +.rpgui-list-imp { + /* font */ + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + color: white; + /* default size */ + min-height: 40px; + margin-top: 0px; + /* scrollers */ + overflow-x: hidden; + overflow-y: scroll; + /* border */ + border-style: solid; + border-width: 7px 7px 7px 7px; + -moz-border-image: url("img/select-border-image.png") 10% repeat repeat; + -webkit-border-image: url("img/select-border-image.png") 10% repeat repeat; + -o-border-image: url("img/select-border-image.png") 10% repeat repeat; + border-image: url("img/select-border-image.png") 10% repeat repeat; + /* background */ + background: url("img/select-background-image.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* dropdown options list */ +ul.rpgui-list-imp { + padding: 0 0 0 0 !important; + z-index: 100; } + +/* dropdown options */ +.rpgui-list-imp li { + /* font */ + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + color: white; + height: 16px; + margin-left: 5px !important; + /* remove the dot */ + list-style-type: none; + /* padding */ + padding-top: 6px; + padding-bottom: 6px; + padding-left: 6px; + /* background */ + background: url("img/select-background-image.png") repeat repeat; + background-clip: padding-box; + background-origin: padding-box; + background-position: center; } + +/* list options hover */ +.rpgui-list-imp li:hover { + color: yellow; } + +/* list hover */ +.rpgui-list-imp:hover { + color: yellow; } + +.rpgui-list-imp .rpgui-selected { + background: rgba(0, 0, 0, 0.3); } + +/** +* Paragraphs and headers while inside an rpgui container. +*/ +/* default gui header */ +.rpgui-content h1 { + /* color and border */ + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.14em; + /* center text */ + text-align: center; + /* padding */ + padding: 0 0 0 0; + margin: 7px 7px 17px 7px; } + +/* default gui header2 */ +.rpgui-content h2 { + /* color and border */ + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.25em; + /* center text */ + text-align: center; + /* padding */ + padding: 0 0 0 0; + margin: 7px 7px 17px 7px; } + +/* default gui header3 */ +.rpgui-content h3 { + /* color and border */ + color: white; + font-weight: 1; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.15em; + text-decoration: underline; + /* center text */ + text-align: center; + /* padding */ + padding: 0 0 0 0; + margin: 7px 7px 17px 7px; } + +/* default gui header4 */ +.rpgui-content h4 { + /* color and border */ + color: white; + font-weight: 1; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.0em; + text-decoration: underline; + /* center text */ + text-align: center; + /* padding */ + padding: 0 0 0 0; + margin: 7px 7px 17px 7px; } + +/* default p */ +.rpgui-content p { + /* color and border */ + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.0em; + line-height: 22px; } + +/* default span */ +.rpgui-content span { + /* color and border */ + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.0em; + line-height: 22px; } + +/* default gui link */ +.rpgui-content a { + /* color and border */ + color: yellow; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.0em; + line-height: 22px; + text-decoration: none; } + +/* default gui link */ +.rpgui-content a:hover { + text-decoration: underline; } + +/* default gui label */ +.rpgui-content label { + /* color and border */ + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.0em; + line-height: 20px; + display: inline; } + +/* default gui label */ +.rpgui-content li { + /* color and border */ + margin-left: 20px; + color: white; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + font-size: 1.0em; + line-height: 22px; } + +/* +* progress bar styling +*/ +/* progress bar container */ +.rpgui-progress { + height: 42px; + width: 100%; + margin-top: 5px; + margin-bottom: 5px; + position: relative; } + +/* progress bar left edge */ +.rpgui-progress-left-edge { + position: absolute; + height: 42px; + width: 40px; + left: 0px; + background-image: url("img/progress-bar-left.png"); + background-size: 100% 100%; } + +/* progress bar right edge */ +.rpgui-progress-right-edge { + position: absolute; + height: 42px; + width: 40px; + right: 0px; + background-image: url("img/progress-bar-right.png"); + background-size: 100% 100%; } + +/* progress bar background track */ +.rpgui-progress-track { + position: absolute; + height: 42px; + left: 40px; + right: 40px; + background-image: url("img/progress-bar-track.png"); + background-repeat: repeat-x; + background-size: 36px 100%; } + +/* progress bar - the fill itself */ +.rpgui-progress-fill { + position: absolute; + top: 9px; + bottom: 8px; + left: 0; + width: 100%; + background-image: url("img/progress.png"); + background-repeat: repeat-x; + background-size: 36px 100%; } + +/* progress bar - blue color */ +.rpgui-progress-fill.blue { + background-image: url("img/progress-blue.png"); } + +/* progress bar - green color */ +.rpgui-progress-fill.green { + background-image: url("img/progress-green.png"); } + +/* progress bar - red color */ +.rpgui-progress-fill.red { + background-image: url("img/progress-red.png"); } + +/** +* style for radioes +*/ +/* radio box */ +.rpgui-content input[type=radio].rpgui-radio { + display: none; } + +.rpgui-content input[type=radio].rpgui-radio + label { + background: url("img/radio-off.png") no-repeat; + line-height: 24px; + display: inline-block; + background-size: auto 100%; + padding-left: 34px; + height: 24px; + margin-top: 8px; + margin-bottom: 8px; } + +.rpgui-content input[type=radio].rpgui-radio:checked + label { + background: url("img/radio-on.png") no-repeat; + line-height: 24px; + display: inline-block; + background-size: auto 100%; + padding-left: 34px; + height: 24px; } + +/* golden radio */ +.rpgui-content .rpgui-radio.golden + label { + background: url("img/radio-golden-off.png") no-repeat !important; + background-size: auto 100% !important; } + +.rpgui-content .rpgui-radio.golden:checked + label { + background: url("img/radio-golden-on.png") no-repeat !important; + background-size: auto 100% !important; } + +/** +* Rules for misc and general things. +*/ +/* set scrollbars for webkit browsers (like chrome) */ +.rpgui-content ::-webkit-scrollbar, +.rpgui-content::-webkit-scrollbar { + width: 18px; } + +/* Track */ +.rpgui-content ::-webkit-scrollbar-track, +.rpgui-content::-webkit-scrollbar-track { + background-image: url("img/scrollbar-track.png"); + background-size: 18px 60px; + background-repeat: repeat-y; } + +/* Handle */ +.rpgui-content ::-webkit-scrollbar-thumb, +.rpgui-content::-webkit-scrollbar-thumb { + background-image: url("img/scrollbar-thumb.png"); + background-size: 100% 100%; + background-repeat: no-repeat; } + +/* buttons */ +.rpgui-content ::-webkit-scrollbar-button, +.rpgui-content::-webkit-scrollbar-button { + background-image: url("img/scrollbar-button.png"); + background-size: 100% 100%; + background-repeat: no-repeat; } + +/** +* for disabled elements +*/ +/* disabled object */ +.rpgui-disabled, +.rpgui-content :disabled, +.rpgui-content input[type=radio]:disabled + label, +.rpgui-content input[type=checkbox]:disabled + label, +.rpgui-content input[type=range]:disabled + .rpgui-slider-container, +.rpgui-content :disabled + .rpgui-dropdown-imp, +.rpgui-content :disabled + .rpgui-dropdown-imp + .rpgui-dropdown-imp, +.rpgui-content :disabled + .rpgui-list-imp { + cursor: url("img/cursor/default.png"), auto; + -webkit-filter: grayscale(1); + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + filter: url(#greyscale); + filter: url("data:image/svg+xml;utf8,#grayscale"); + filter: gray; + color: #999; } + +/** +* Rules for the slider. +*/ +/* regular slider stuff */ +/* slider container */ +.rpgui-slider-container { + height: 20px; + width: 100%; + margin-top: 15px; + margin-bottom: 15px; + position: relative; } + +/* slider left edge */ +.rpgui-slider-left-edge { + position: absolute; + height: 20px; + width: 20px; + left: 0px; + background-image: url("img/slider-left.png"); + background-size: 100% 100%; } + +/* slider right edge */ +.rpgui-slider-right-edge { + position: absolute; + height: 20px; + width: 20px; + right: 0px; + background-image: url("img/slider-right.png"); + background-size: 100% 100%; } + +/* slider background track */ +.rpgui-slider-track { + position: absolute; + height: 20px; + left: 0; + right: 0; + background-image: url("img/slider-track.png"); + background-repeat: repeat-x; + background-size: 24px 100%; } + +/* the part of the slider that moves and indicates the value */ +.rpgui-slider-thumb { + position: absolute; + height: 30px; + width: 15px; + margin-top: -5px; + left: 40px; + background-image: url("img/slider-thumb.png"); + background-size: 100% 100%; } + +/* golden slider stuff */ +/* golden slider container */ +.rpgui-slider-container.golden { + height: 30px; + width: 100%; + margin-top: 15px; + margin-bottom: 15px; + position: relative; } + +/* golden slider left edge */ +.rpgui-slider-left-edge.golden { + position: absolute; + height: 30px; + width: 30px; + left: 0px; + background-image: url("img/slider-left-golden.png"); + background-size: 100% 100%; } + +/* golden slider right edge */ +.rpgui-slider-right-edge.golden { + position: absolute; + height: 30px; + width: 30px; + right: 0px; + background-image: url("img/slider-right-golden.png"); + background-size: 100% 100%; } + +/* golden slider background track */ +.rpgui-slider-track.golden { + position: absolute; + height: 30px; + left: 0; + right: 0; + background-image: url("img/slider-track-golden.png"); + background-repeat: repeat-x; + background-size: 40px 100%; } + +/* golden the part of the slider that moves and indicates the value */ +.rpgui-slider-thumb.golden { + position: absolute; + height: 36px; + width: 18px; + margin-top: -4px; + left: 40px; + background-image: url("img/slider-thumb-golden.png"); + background-size: 100% 100%; } diff --git a/dist/rpgui.js b/dist/rpgui.js new file mode 100644 index 0000000..18ed970 --- /dev/null +++ b/dist/rpgui.js @@ -0,0 +1,1027 @@ +RPGUI = (function() { + +/** +* init rpgui. +* this is the first file included in the compiled js. +*/ + +// rpgui global namespace +var RPGUI = RPGUI || {}; + +// lib version +RPGUI.version = 1.03; + +// author +RPGUI.author = "Ronen Ness"; + +// if true, will init rpgui as soon as page loads +// if you set to false you need to call RPGUI.init(); yourself. +RPGUI.init_on_load = true; +window.addEventListener("load", function() +{ + if (RPGUI.init_on_load) {RPGUI.init();} +}); + +// init RPGUI and everything related +RPGUI.init = function() +{ + if (RPGUI._was_init) {throw "RPGUI was already init!";} + for (var i = 0; i < RPGUI.__init_list.length; ++i) + { + RPGUI.__init_list[i](); + } + RPGUI._was_init = true; +} + +// list of functions to run as part of the init process +RPGUI.__init_list = []; + +// add a function to be called as part of the init process. +// note: order is preserve. you may use this function to init things after RPGUI is fully loaded, since +// all RPGUI will have its init functions during the inclusion of the script. +RPGUI.on_load = function(callback) +{ + // if was already init call immediately + if (RPGUI._was_init) {callback();} + + // add to init list + RPGUI.__init_list.push(callback); +} +/** +* Used to provide unified, easy javascript access to customized elements. +*/ + + +// different callbacks for different methods and types +RPGUI.__update_funcs = {}; +RPGUI.__create_funcs = {}; +RPGUI.__get_funcs = {} +RPGUI.__set_funcs = {}; + +// create a customized rpgui element ("list", "dropbox", etc.) +// note: this function expect the original html element. +RPGUI.create = function(element, rpgui_type) +{ + // call the creation func and set type + if (RPGUI.__create_funcs[rpgui_type]) + { + element.dataset['rpguitype'] = rpgui_type; + RPGUI.__create_funcs[rpgui_type](element); + } + // not a valid type? exception. + else + { + throw "Not a valid rpgui type! options: " + Object.keys(RPGUI.__create_funcs); + } +} + +// update an element after you changed it manually via javascript. +// note: this function expect the original html element. +RPGUI.update = function(element) +{ + // if have update callback for this type, use it + var type = element.dataset['rpguitype'] + if (RPGUI.__update_funcs[type]) + { + RPGUI.__update_funcs[type](element); + } + // if not, use the default (firing update event) + else + { + RPGUI.fire_event(element, "change"); + } +} + + +// set & update the value of an element. +// note: this function expect the original html element. +RPGUI.set_value = function(element, value) +{ + // if have set value callback for this type, use it + var type = element.dataset['rpguitype']; + if (RPGUI.__set_funcs[type]) + { + RPGUI.__set_funcs[type](element, value); + } + // if not, use the default (setting "value" member) + else + { + element.value = value; + } + + // trigger update + RPGUI.update(element); +} + + + +// get the value of an element. +// note: this function expect the original html element. +RPGUI.get_value = function(element) +{ + // if have get value callback for this type, use it + var type = element.dataset['rpguitype']; + if (RPGUI.__get_funcs[type]) + { + return RPGUI.__get_funcs[type](element); + } + // if not, use the default (getting the "value" member) + else + { + return element.value; + } +} +/** +* This script generate the rpgui checkbox class. +* This will replace automatically every element that has the "rpgui-checkbox" class. +*/ + + +// class name we will convert to special checkbox +var _checkbox_class = "rpgui-checkbox"; + +// create a rpgui-checkbox from a given element. +// note: element must be of type "checkbox" for this to work properly. +RPGUI.__create_funcs["checkbox"] = function(element) +{ + RPGUI.add_class(element, _checkbox_class); + create_checkbox(element); +}; + +// set function to set value of the checkbox +RPGUI.__set_funcs["checkbox"] = function(elem, value) +{ + elem.checked = value; +}; + +// set function to get value of the checkbox +RPGUI.__get_funcs["checkbox"] = function(elem) +{ + return elem.checked; +}; + +// init all checkbox elements on page load +RPGUI.on_load(function() +{ + // get all the input elements we need to upgrade + var elems = document.getElementsByClassName(_checkbox_class); + + // iterate the selects and upgrade them + for (var i = 0; i < elems.length; ++i) + { + RPGUI.create(elems[i], "checkbox"); + } +}); + +// upgrade a single "input" element to the beautiful checkbox class +function create_checkbox(elem) +{ + // get next sibling, assuming its the checkbox label. + // this object will be turned into the new checkbox. + var new_checkbox = elem.nextSibling; + + // validate + if (!new_checkbox || new_checkbox.tagName !== "LABEL") + { + throw "After a '" + _checkbox_class + "' there must be a label!"; + } + + // copy all event listeners and events + RPGUI.copy_event_listeners(elem, new_checkbox); + + // do the click event for the new checkbox + (function(elem, new_checkbox) + { + new_checkbox.addEventListener("click", function() + { + if (!elem.disabled) + { + RPGUI.set_value(elem, !elem.checked); + } + + }); + })(elem, new_checkbox); +} + +/** +* Init rpgui content and what's inside. +*/ + +// init all the rpgui containers and their children +RPGUI.on_load(function() +{ + // get all containers and iterate them + var contents = document.getElementsByClassName("rpgui-content"); + for (var i = 0; i < contents.length; ++i) + { + // get current container and init it + var content = contents[i]; + + // prevent dragging + RPGUI.prevent_drag(content); + + // set default cursor + RPGUI.set_cursor(content, "default"); + } +}); + +/** +* This script add the dragging functionality to all elements with "rpgui-draggable" class. +*/ + + +// element currently dragged +var _curr_dragged = null; +var _curr_dragged_point = null; +var _dragged_z = 1000; + +// class name we consider as draggable +var _draggable_class = "rpgui-draggable"; + +// set element as draggable +// note: this also add the "rpgui-draggable" css class to the element. +RPGUI.__create_funcs["draggable"] = function(element) +{ + // prevent forms of default dragging on this element + element.draggable = false; + element.ondragstart = function() {return false;} + + // add the mouse down event listener + RPGUI.add_class(element, _draggable_class); + element.addEventListener('mousedown', mouseDown); +}; + +// init all draggable elements (objects with "rpgui-draggable" class) +RPGUI.on_load(function() +{ + // init all draggable elements + var elems = document.getElementsByClassName(_draggable_class); + for (var i = 0; i < elems.length; ++i) + { + RPGUI.create(elems[i], "draggable"); + } + + // add mouseup event on window to stop dragging + window.addEventListener('mouseup', mouseUp); +}); + +// stop drag +function mouseUp(e) +{ + _curr_dragged = null; + window.removeEventListener('mousemove', divMove); +} + +// start drag +function mouseDown(e){ + + // set dragged object and make sure its really draggable + var target = e.target || e.srcElement; + if (!RPGUI.has_class(target, _draggable_class)) {return;} + + _curr_dragged = target; + + // set holding point + var rect = _curr_dragged.getBoundingClientRect(); + _curr_dragged_point = {x: rect.left-e.clientX, y: rect.top-e.clientY}; + + // add z-index to top this element + target.style.zIndex = _dragged_z++; + + // begin dragging + window.addEventListener('mousemove', divMove, true); + +} + +// dragging +function divMove(e){ + if (_curr_dragged) + { + _curr_dragged.style.position = 'absolute'; + _curr_dragged.style.left = (e.clientX + _curr_dragged_point.x) + 'px'; + _curr_dragged.style.top = (e.clientY + _curr_dragged_point.y) + 'px'; + } +} + +/** + * This script generate the rpgui progress-bar class. + * This will replace automatically every
element that has the "rpgui-progress" class. + */ + + +// class name we will convert to special progress +var _progress_class = "rpgui-progress"; + +// create a rpgui-progress from a given element. +// note: element must be of type "range" for this to work properly. +RPGUI.__create_funcs["progress"] = function(element) +{ + RPGUI.add_class(element, _progress_class); + create_progress(element); +}; + +// set function to set value of the progress bar +// value should be in range of 0 - 1.0 +RPGUI.__set_funcs["progress"] = function(elem, value) +{ + // get trackbar and progress bar elements + var track = RPGUI.get_child_with_class(elem, "rpgui-progress-track"); + var progress = RPGUI.get_child_with_class(track, "rpgui-progress-fill"); + + // get the two edges + var edge_left = RPGUI.get_child_with_class(elem, "rpgui-progress-left-edge"); + var edge_right = RPGUI.get_child_with_class(elem, "rpgui-progress-right-edge"); + + // set progress width + progress.style.left = "0px"; + progress.style.width = (value * 100) + "%"; +}; + +// init all progress elements on page load +RPGUI.on_load(function() +{ + // get all the select elements we need to upgrade + var elems = document.getElementsByClassName(_progress_class); + + // iterate the selects and upgrade them + for (var i = 0; i < elems.length; ++i) + { + RPGUI.create(elems[i], "progress"); + } +}); + +// upgrade a single "input" element to the beautiful progress class +function create_progress(elem) +{ + // create the containing div for the new progress + progress_container = elem; + + // insert the progress container + RPGUI.insert_after(progress_container, elem); + + // create progress parts (edges, track, thumb) + + // track + var track = RPGUI.create_element("div"); + RPGUI.add_class(track, "rpgui-progress-track"); + progress_container.appendChild(track); + + // left edge + var left_edge = RPGUI.create_element("div"); + RPGUI.add_class(left_edge, "rpgui-progress-left-edge"); + progress_container.appendChild(left_edge); + + // right edge + var right_edge = RPGUI.create_element("div"); + RPGUI.add_class(right_edge, "rpgui-progress-right-edge"); + progress_container.appendChild(right_edge); + + // the progress itself + var progress = RPGUI.create_element("div"); + RPGUI.add_class(progress, "rpgui-progress-fill"); + track.appendChild(progress); + + // set color + if (RPGUI.has_class(elem, "blue")) {progress.className += " blue";} + if (RPGUI.has_class(elem, "red")) {progress.className += " red";} + if (RPGUI.has_class(elem, "green")) {progress.className += " green";} + + // set starting default value + var starting_val = elem.dataset.value !== undefined ? parseFloat(elem.dataset.value) : 1; + RPGUI.set_value(elem, starting_val); +} + +/** +* This script generate the rpgui radio class. +* This will replace automatically every element that has the "rpgui-radio" class. +*/ + + +// class name we will convert to special radio +var _radio_class = "rpgui-radio"; + +// create a rpgui-radio from a given element. +// note: element must be of type "radio" for this to work properly. +RPGUI.__create_funcs["radio"] = function(element) +{ + RPGUI.add_class(element, _radio_class); + create_radio(element); +}; + +// set function to set value of the radio +RPGUI.__set_funcs["radio"] = function(elem, value) +{ + elem.checked = value; +}; + +// set function to get value of the radio button +RPGUI.__get_funcs["radio"] = function(elem) +{ + return elem.checked; +}; + +// init all radio elements on page load +RPGUI.on_load(function() +{ + // get all the input elements we need to upgrade + var elems = document.getElementsByClassName(_radio_class); + + // iterate the selects and upgrade them + for (var i = 0; i < elems.length; ++i) + { + RPGUI.create(elems[i], "radio"); + } +}); + +// upgrade a single "input" element to the beautiful radio class +function create_radio(elem) +{ + // get next sibling, assuming its the radio label. + // this object will be turned into the new radio. + var new_radio = elem.nextSibling; + + // validate + if (!new_radio || new_radio.tagName !== "LABEL") + { + throw "After a '" + _radio_class + "' there must be a label!"; + } + + // copy all event listeners and events + RPGUI.copy_event_listeners(elem, new_radio); + + // do the click event for the new radio + (function(elem, new_radio) + { + new_radio.addEventListener("click", function() + { + if (!elem.disabled) + { + RPGUI.set_value(elem, true); + } + }); + })(elem, new_radio); +} + +/** +* This script generate the rpgui dropdown element that has the "rpgui-dropdown" class. +*/ + + +// class name we will convert to dropdown +var _dropdown_class = "rpgui-dropdown"; + +// create a rpgui-dropdown from a given element. +// note: element must be . +* This will replace automatically every with