42 |
--------------------------------------------------------------------------------
/src/styles/_input.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * input styling
3 | */
4 |
5 | /* input/textarea input */
6 | .rpgui-content input,
7 | .rpgui-content textarea
8 | {
9 | /* set size and colors */
10 | -webkit-box-sizing : border-box;
11 | -moz-box-sizing : border-box;
12 | box-sizing : border-box;
13 | color: white;
14 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
15 | font-size: 0.9em;
16 | line-height: 32px;
17 | background: #4e4a4e;
18 | max-width: 100%;
19 | width: 100%;
20 | padding-left:10px;
21 |
22 | /* for ie */
23 | min-height: 30px;
24 |
25 | /* enable text selecting */
26 | -webkit-touch-callout: text;
27 | -webkit-user-select: text;
28 | -khtml-user-select: text;
29 | -moz-user-select: text;
30 | -ms-user-select: text;
31 | user-select: text;
32 | -webkit-tap-highlight-color: rgba(0,0,0,0.5);
33 |
34 | }
35 |
36 | /* textarea extra rules */
37 | .rpgui-content textarea
38 | {
39 | line-height: 22px;
40 | padding-top: 7px;
41 | height: 80px;
42 | resize: none;
43 | }
44 |
45 | /* selection highlight */
46 | .rpgui-content input::selection,
47 | .rpgui-content textarea::selection {
48 | background: rgba(0,0,0,0.5);
49 | }
50 | .rpgui-content input::-moz-selection,
51 | .rpgui-content textarea::-moz-selection {
52 | background: rgba(0,0,0,0.5);
53 | }
--------------------------------------------------------------------------------
/src/styles/_content.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * global content styling
3 | */
4 |
5 | /* game div with background image*/
6 | .rpgui-content
7 | {
8 | padding: 0 0 0 0;
9 | margin: 0 0 0 0;
10 | width: 100%;
11 | height: 100%;
12 | left: 0px;
13 | top: 0px;
14 | position: fixed;
15 | overflow: hidden;
16 | font-size: 0.8em;
17 | }
18 |
19 | /* general rules to apply on anything inside the content */
20 | .rpgui-content * {
21 |
22 | /* remove outline effect for input elements etc */
23 | outline: none;
24 |
25 | /* prevent dragging */
26 | user-drag: none;
27 | -webkit-user-drag: none;
28 |
29 | /* prevent text selecting */
30 | -webkit-touch-callout: none;
31 | -webkit-user-select: none;
32 | -khtml-user-select: none;
33 | -moz-user-select: none;
34 | -ms-user-select: none;
35 | user-select: none;
36 | -webkit-tap-highlight-color: rgba(0,0,0,0);
37 |
38 | /* pixelated enlargement filter (to keep the pixel-art style when enlarging pictures) */
39 | -ms-interpolation-mode: nearest-neighbor;
40 | image-rendering: -webkit-optimize-contrast;
41 | image-rendering: -webkit-crisp-edges;
42 | image-rendering: -moz-crisp-edges;
43 | image-rendering: -o-crisp-edges;
44 | image-rendering: pixelated;
45 |
46 | /* default font */
47 | font-family: 'Press Start 2P', cursive;
48 | }
49 |
--------------------------------------------------------------------------------
/src/scripts/init.js:
--------------------------------------------------------------------------------
1 | /**
2 | * init rpgui.
3 | * this is the first file included in the compiled js.
4 | */
5 |
6 | // rpgui global namespace
7 | var RPGUI = RPGUI || {};
8 |
9 | // lib version
10 | RPGUI.version = 1.04;
11 |
12 | // author
13 | RPGUI.author = "Ronen Ness";
14 |
15 | // if true, will init rpgui as soon as page loads
16 | // if you set to false you need to call RPGUI.init(); yourself.
17 | RPGUI.init_on_load = true;
18 | window.addEventListener("load", function()
19 | {
20 | if (RPGUI.init_on_load) {RPGUI.init();}
21 | });
22 |
23 | // init RPGUI and everything related
24 | RPGUI.init = function()
25 | {
26 | if (RPGUI._was_init) {throw "RPGUI was already init!";}
27 | for (var i = 0; i < RPGUI.__init_list.length; ++i)
28 | {
29 | RPGUI.__init_list[i]();
30 | }
31 | RPGUI._was_init = true;
32 | }
33 |
34 | // list of functions to run as part of the init process
35 | RPGUI.__init_list = [];
36 |
37 | // add a function to be called as part of the init process.
38 | // note: order is preserve. you may use this function to init things after RPGUI is fully loaded, since
39 | // all RPGUI will have its init functions during the inclusion of the script.
40 | RPGUI.on_load = function(callback)
41 | {
42 | // if was already init call immediately
43 | if (RPGUI._was_init) {callback();}
44 |
45 | // add to init list
46 | RPGUI.__init_list.push(callback);
47 | }
--------------------------------------------------------------------------------
/examples/paragraphs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
26 |
27 |
Header 1
28 |
29 |
Header 2
30 |
31 |
Header 3
32 |
33 |
Header 4
34 |
35 |
Hello, this is a paragparh,
and this is a link.
36 |
Here's a span,
37 |
38 |
39 |
Here's a plain list (not listbox):
40 |
41 | item 1
42 | item 2
43 | item 3
44 |
45 |
46 |
25 |
26 |
27 |
Everything
28 |
29 |
Here
30 |
31 |
Will
32 |
33 |
Have
34 |
35 |
HAND cursor.
36 |
37 |
38 |
yessss.
39 |
40 |
41 |
42 |
43 |
44 |
Everything
45 |
46 |
Here
47 |
48 |
Will
49 |
50 |
Have
51 |
52 |
SELECT cursor.
53 |
54 |
55 |
yessss.
56 |
57 |
But this text will have the open-hand cursor.
58 |
59 |
60 |
61 |
25 |
26 |
This is a basic rpgui-container with "framed" class.
27 |
28 |
[Internal grey frame].
29 |
30 |
31 |
32 |
33 |
This is a basic rpgui-container with "framed-golden" class.
34 |
35 |
36 |
37 |
This is a basic rpgui-container with "framed-golden-2" class.
38 |
39 |
40 |
41 |
You don't have to use frames though. This text is inside a 'rpgui-container' but without a frame.
42 |
43 |
44 |
45 |
This is a grey-framed container ("framed-grey" class).
46 |
47 |
48 |
49 |
And this one is draggable!
Go ahead, try and drag me ^_^
50 |
51 |
52 |
element that has the "rpgui-progress" class.
4 | */
5 |
6 |
7 | // class name we will convert to special progress
8 | var _progress_class = "rpgui-progress";
9 |
10 | // create a rpgui-progress from a given element.
11 | // note: element must be
of type "range" for this to work properly.
12 | RPGUI.__create_funcs["progress"] = function(element)
13 | {
14 | RPGUI.add_class(element, _progress_class);
15 | create_progress(element);
16 | };
17 |
18 | // set function to set value of the progress bar
19 | // value should be in range of 0 - 1.0
20 | RPGUI.__set_funcs["progress"] = function(elem, value)
21 | {
22 | // get trackbar and progress bar elements
23 | var track = RPGUI.get_child_with_class(elem, "rpgui-progress-track");
24 | var progress = RPGUI.get_child_with_class(track, "rpgui-progress-fill");
25 |
26 | // get the two edges
27 | var edge_left = RPGUI.get_child_with_class(elem, "rpgui-progress-left-edge");
28 | var edge_right = RPGUI.get_child_with_class(elem, "rpgui-progress-right-edge");
29 |
30 | // set progress width
31 | progress.style.left = "0px";
32 | progress.style.width = (value * 100) + "%";
33 | };
34 |
35 | // init all progress elements on page load
36 | RPGUI.on_load(function()
37 | {
38 | // get all the select elements we need to upgrade
39 | var elems = document.getElementsByClassName(_progress_class);
40 |
41 | // iterate the selects and upgrade them
42 | for (var i = 0; i < elems.length; ++i)
43 | {
44 | RPGUI.create(elems[i], "progress");
45 | }
46 | });
47 |
48 | // upgrade a single "input" element to the beautiful progress class
49 | function create_progress(elem)
50 | {
51 | // create the containing div for the new progress
52 | progress_container = elem;
53 |
54 | // insert the progress container
55 | RPGUI.insert_after(progress_container, elem);
56 |
57 | // create progress parts (edges, track, thumb)
58 |
59 | // track
60 | var track = RPGUI.create_element("div");
61 | RPGUI.add_class(track, "rpgui-progress-track");
62 | progress_container.appendChild(track);
63 |
64 | // left edge
65 | var left_edge = RPGUI.create_element("div");
66 | RPGUI.add_class(left_edge, "rpgui-progress-left-edge");
67 | progress_container.appendChild(left_edge);
68 |
69 | // right edge
70 | var right_edge = RPGUI.create_element("div");
71 | RPGUI.add_class(right_edge, "rpgui-progress-right-edge");
72 | progress_container.appendChild(right_edge);
73 |
74 | // the progress itself
75 | var progress = RPGUI.create_element("div");
76 | RPGUI.add_class(progress, "rpgui-progress-fill");
77 | track.appendChild(progress);
78 |
79 | // set color
80 | if (RPGUI.has_class(elem, "blue")) {progress.className += " blue";}
81 | if (RPGUI.has_class(elem, "red")) {progress.className += " red";}
82 | if (RPGUI.has_class(elem, "green")) {progress.className += " green";}
83 |
84 | // set starting default value
85 | var starting_val = elem.dataset.value !== undefined ? parseFloat(elem.dataset.value) : 1;
86 | RPGUI.set_value(elem, starting_val);
87 | }
88 |
--------------------------------------------------------------------------------
/src/styles/_paragraphs_and_headers.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Paragraphs and headers while inside an rpgui container.
3 | */
4 |
5 |
6 | /* default gui header */
7 | .rpgui-content h1
8 | {
9 | /* color and border */
10 | color: white;
11 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
12 | font-size: 1.14em;
13 |
14 | /* center text */
15 | text-align: center;
16 |
17 | /* padding */
18 | padding: 0 0 0 0;
19 | margin: 7px 7px 17px 7px;
20 | }
21 |
22 |
23 | /* default gui header2 */
24 | .rpgui-content h2
25 | {
26 | /* color and border */
27 | color: white;
28 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
29 | font-size: 1.25em;
30 |
31 | /* center text */
32 | text-align: center;
33 |
34 | /* padding */
35 | padding: 0 0 0 0;
36 | margin: 7px 7px 17px 7px;
37 | }
38 |
39 | /* default gui header3 */
40 | .rpgui-content h3
41 | {
42 | /* color and border */
43 | color: white;
44 | font-weight: 1;
45 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
46 | font-size: 1.15em;
47 | text-decoration: underline;
48 |
49 | /* center text */
50 | text-align: center;
51 |
52 | /* padding */
53 | padding: 0 0 0 0;
54 | margin: 7px 7px 17px 7px;
55 | }
56 |
57 | /* default gui header4 */
58 | .rpgui-content h4
59 | {
60 | /* color and border */
61 | color: white;
62 | font-weight: 1;
63 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
64 | font-size: 1.0em;
65 | text-decoration: underline;
66 |
67 | /* center text */
68 | text-align: center;
69 |
70 | /* padding */
71 | padding: 0 0 0 0;
72 | margin: 7px 7px 17px 7px;
73 | }
74 |
75 | /* default p */
76 | .rpgui-content p
77 | {
78 | /* color and border */
79 | color: white;
80 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
81 | font-size: 1.0em;
82 | line-height: 22px;
83 | }
84 |
85 | /* default span */
86 | .rpgui-content span
87 | {
88 | /* color and border */
89 | color: white;
90 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
91 | font-size: 1.0em;
92 | line-height: 22px;
93 | }
94 |
95 | /* default gui link */
96 | .rpgui-content a
97 | {
98 | /* color and border */
99 | color: yellow;
100 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
101 | font-size: 1.0em;
102 | line-height: 22px;
103 | text-decoration: none;
104 | }
105 | /* default gui link */
106 | .rpgui-content a:hover
107 | {
108 | text-decoration: underline;
109 | }
110 |
111 | /* default gui label */
112 | .rpgui-content label
113 | {
114 | /* color and border */
115 | color: white;
116 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
117 | font-size: 1.0em;
118 | line-height: 20px;
119 | display: inline;
120 | }
121 |
122 | /* default gui label */
123 | .rpgui-content li
124 | {
125 | /* color and border */
126 | margin-left:20px;
127 | color: white;
128 | text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
129 | font-size: 1.0em;
130 | line-height: 22px;
131 | }
132 |
133 |
--------------------------------------------------------------------------------
/src/styles/_containers_and_frames.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * customized divs (containers) and framed objects (background and frame image).
3 | */
4 |
5 | /* game div without background image*/
6 | .rpgui-container
7 | {
8 | /* position style and default z */
9 | position: fixed;
10 | z-index: 10;
11 |
12 | overflow: show;
13 | }
14 |
15 | /* game div with background image*/
16 | .rpgui-container.framed
17 | {
18 | /* border */
19 | border-style: solid;
20 | border-image-source: url("img/border-image.png");
21 | border-image-repeat: repeat;
22 | border-image-slice: 6 6 6 6;
23 | border-image-width: 18px;
24 | border-width: 15px;
25 | padding: 12px;
26 |
27 | /* internal border */
28 | box-sizing: border-box;
29 | -moz-box-sizing: border-box;
30 | -webkit-box-sizing: border-box;
31 |
32 | /* background */
33 | background: url("img/background-image.png") repeat repeat;
34 | background-clip: padding-box;
35 | background-origin: padding-box;
36 | background-position: center;
37 | }
38 |
39 | /* game div with golden background image*/
40 | .rpgui-container.framed-golden
41 | {
42 | /* border */
43 | border-style: solid;
44 | border-image-source: url("img/border-image-golden.png");
45 | border-image-repeat: repeat;
46 | border-image-slice: 4 4 4 4;
47 | border-image-width: 18px;
48 | border-width: 15px;
49 | padding: 12px;
50 |
51 | /* internal border */
52 | box-sizing: border-box;
53 | -moz-box-sizing: border-box;
54 | -webkit-box-sizing: border-box;
55 |
56 | /* background */
57 | background: url("img/background-image-golden.png") repeat repeat;
58 | background-clip: padding-box;
59 | background-origin: padding-box;
60 | background-position: center;
61 | }
62 |
63 | /* game div with golden2 background image*/
64 | .rpgui-container.framed-golden-2
65 | {
66 | /* border */
67 | border-style: solid;
68 | border-image-source: url("img/border-image-golden2.png");
69 | border-image-repeat: repeat;
70 | border-image-slice: 8 8 8 8;
71 | border-image-width: 18px;
72 | border-width: 15px;
73 | padding: 12px;
74 |
75 | /* internal border */
76 | box-sizing: border-box;
77 | -moz-box-sizing: border-box;
78 | -webkit-box-sizing: border-box;
79 |
80 | /* background */
81 | background: url("img/background-image-golden2.png") repeat repeat;
82 | background-clip: padding-box;
83 | background-origin: padding-box;
84 | background-position: center;
85 | }
86 |
87 | /* game div with soft grey background image*/
88 | .rpgui-container.framed-grey
89 | {
90 | position: relative;
91 |
92 | /* border */
93 | border-style: solid;
94 | border-image-source: url("img/border-image-grey.png");
95 | border-image-repeat: repeat;
96 | border-image-slice: 3 3 3 3;
97 | border-image-width: 7px;
98 | border-width: 7px;
99 | padding: 12px;
100 |
101 | /* internal border */
102 | box-sizing: border-box;
103 | -moz-box-sizing: border-box;
104 | -webkit-box-sizing: border-box;
105 |
106 | /* background */
107 | background: url("img/background-image-grey.png") repeat repeat;
108 | background-clip: padding-box;
109 | background-origin: padding-box;
110 | background-position: center;
111 | }
112 |
--------------------------------------------------------------------------------
/src/styles/_button.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Styling for buttons
3 | */
4 |
5 | /* button style */
6 | .rpgui-button {
7 |
8 | /* hide button default stuff */
9 | background-color: Transparent;
10 | background-repeat:no-repeat;
11 | border: none;
12 | overflow: hidden;
13 | outline:none;
14 |
15 | /* background */
16 | background: url("img/button.png") no-repeat no-repeat;
17 | background-clip: padding-box;
18 | background-origin: padding-box;
19 | background-position: center;
20 | background-size: 100% 100%;
21 |
22 | /* font size */
23 | font-size: 1.0em;
24 |
25 | /* default size and display */
26 | max-width: 100%;
27 | min-width: 140px;
28 | height: 60px;
29 | display: inline-block;
30 |
31 | /* padding */
32 | padding-left: 35px;
33 | padding-right: 35px;
34 | }
35 |
36 | /* button hover */
37 | .rpgui-button.hover,
38 | .rpgui-button:hover {
39 |
40 | background-image: url("img/button-hover.png");
41 |
42 | }
43 |
44 | /* button clicked */
45 | .rpgui-button.down,
46 | .rpgui-button:active {
47 |
48 | background-image: url("img/button-down.png");
49 | }
50 |
51 | /* golden button stuff */
52 | .rpgui-button.golden p
53 | {
54 | display: inline-block
55 | }
56 |
57 | /* golden button style */
58 | .rpgui-button.golden {
59 |
60 | /* hide button default stuff */
61 | background-color: Transparent;
62 | background-repeat:no-repeat;
63 | border: none;
64 | overflow: hidden;
65 | outline:none;
66 |
67 | /* background */
68 | background: url("img/button-golden.png") no-repeat no-repeat;
69 | background-clip: padding-box;
70 | background-origin: padding-box;
71 | background-position: center;
72 | background-size: 100% 80%;
73 |
74 | /* default size and display */
75 | max-width: 100%;
76 | min-width: 140px;
77 | height: 60px;
78 | display: inline-block;
79 |
80 | /* padding */
81 | padding-top: 5px;
82 | padding-left: 35px;
83 | padding-right: 35px;
84 | overflow: visible;
85 | }
86 |
87 | /* button hover */
88 | .rpgui-button.golden.hover,
89 | .rpgui-button.golden:hover {
90 |
91 | background-image: url("img/button-golden-hover.png");
92 | }
93 |
94 | /* button clicked */
95 | .rpgui-button.golden.down,
96 | .rpgui-button.golden:active {
97 |
98 | background-image: url("img/button-golden-down.png");
99 | }
100 |
101 | .rpgui-button.golden:before
102 | {
103 |
104 | white-space: nowrap;
105 | display: inline-block;
106 | content: "";
107 | width: 34px;
108 | display: block;
109 | height: 110%;
110 | background: transparent url('img/button-golden-left.png') no-repeat right center;
111 | background-size: 100% 100%;
112 | margin: 0 0 0 0;
113 | left: 0px;
114 | float: left;
115 | margin-left: -46px;
116 | margin-top: -5%;
117 | }
118 |
119 | .rpgui-button.golden:after
120 | {
121 |
122 | white-space: nowrap;
123 | display: block;
124 | content: "";
125 | width: 34px;
126 | height: 110%;
127 | background: transparent url('img/button-golden-right.png') no-repeat left center;
128 | background-size: 100% 100%;
129 | margin: 0 0 0 0;
130 | right: 0px;
131 | float: right;
132 | margin-right: -46px;
133 | margin-top: -5%;
134 | }
135 |
136 | /*
137 | .rpgui-button.golden:hover:before {
138 |
139 | background-image: url('img/button-golden-left-hover.png');
140 | }
141 |
142 | .rpgui-button.golden:hover:after {
143 |
144 | background-image: url('img/button-golden-right-hover.png');
145 | }
146 | */
--------------------------------------------------------------------------------
/src/scripts/rpgui-select-list.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This script generate the rpgui list