perfect-gui 3.5.11 → 3.5.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +5 -9
  2. package/package.json +2 -2
  3. package/src/styles.js +3 -0
  4. package/test/src/index.html +36 -23
  5. package/test/src/js/basics.js +14 -10
  6. package/test/src/styles/styles.css +48 -10
package/README.md CHANGED
@@ -83,8 +83,8 @@ gui.button('Click me!', callback);
83
83
  <tr><td>image</td><td>
84
84
 
85
85
  ```javascript
86
- gui.image('Click this', 'path/to/image', (path) => {
87
- ...
86
+ gui.image('Click this', 'image.jpg', e => {
87
+ console.log(e.path, e.text)
88
88
  });
89
89
  ```
90
90
  </td></tr>
@@ -94,8 +94,8 @@ gui.image('Click this', 'path/to/image', (path) => {
94
94
  // Simple slider, only returns a value to the callback
95
95
  // min and max parameters are optional, default is 0 (min) and 1 (max)
96
96
  // step parameter is optional, default is (max - min) * 0.01
97
- gui.slider({
98
- name: 'Slide this',
97
+ gui.slider({
98
+ name 'Slide this',
99
99
  value: 5,
100
100
  min: 0, // default is 0
101
101
  max: 10, // default is 1
@@ -108,12 +108,8 @@ gui.slider({
108
108
  // Directly updating the property will also update the slider.
109
109
  // callback is optional
110
110
  gui.slider({
111
- name 'Slide this',
112
111
  object: foo,
113
- prop: 'bar',
114
- min: 0,
115
- max: 10,
116
- step: .1
112
+ prop: 'bar'
117
113
  });
118
114
  ```
119
115
  </td></tr>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
- "version": "3.5.11",
4
- "description": "Nice and simple GUI for JavaScript.",
3
+ "version": "3.5.13",
4
+ "description": "Nice and simple GUI for JavaScript",
5
5
  "main": "src/index.js",
6
6
  "directories": {
7
7
  "example": "examples"
package/src/styles.js CHANGED
@@ -87,6 +87,9 @@ return /* css */`
87
87
  font-size: 11px;
88
88
  text-shadow: 0 -1px 0 #111;
89
89
  white-space: nowrap;
90
+ width: 100%;
91
+ overflow: hidden;
92
+ text-overflow: ellipsis;
90
93
  }
91
94
 
92
95
  .p-gui__button,
package/test/src/index.html CHANGED
@@ -6,7 +6,6 @@
6
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
7
  <title>Perfect GUI</title>
8
8
  <meta name="viewport" content="width=device-width, initial-scale=1">
9
- <link href="main.css?166a9da11b001ec1b300" rel="stylesheet">
10
9
 
11
10
  <meta name="author" content="Thibaut Foussard">
12
11
  <meta name="description" content="Nice and simple GUI for JavaScript">
@@ -30,16 +29,32 @@
30
29
  <body>
31
30
  <div class="wrapper">
32
31
  <div class="sidebar">
33
- <a class="sidebar__item" href="#basics">Basics</a>
34
- <a class="sidebar__item" href="#vectors">Vectors</a>
35
- <a class="sidebar__item" href="#positioning">Positioning</a>
36
- <a class="sidebar__item" href="#folders">Folders</a>
37
- <a class="sidebar__item" href="#other-options">Other options</a>
38
- <a class="sidebar__item" href="#killing-creating">Killing and creating dynamically</a>
32
+ <a class="sidebar__title" href="#basics">Methods</a>
33
+ <a class="sidebar__item" href="#basics">.button()</a>
34
+ <a class="sidebar__item" href="#basics">.slider()</a>
35
+ <a class="sidebar__item" href="#basics">.toggle()</a>
36
+ <a class="sidebar__item" href="#basics">.list()</a>
37
+ <a class="sidebar__item" href="#basics">.image()</a>
38
+ <a class="sidebar__item" href="#basics">.color()</a>
39
+ <a class="sidebar__item" href="#vectors">.vector2()</a>
40
+ <a class="sidebar__item" href="#folders">.folder()</a>
41
+ <a class="sidebar__item" href="#other-options">.toggleClose()</a>
42
+ <a class="sidebar__title" href="#other-options">Options</a>
43
+ <a class="sidebar__item" href="#other-options">name</a>
44
+ <a class="sidebar__item" href="#positioning">position</a>
45
+ <a class="sidebar__item" href="#other-options">close</a>
46
+ <a class="sidebar__item" href="#other-options">width</a>
47
+ <a class="sidebar__item" href="#other-options">maxHeight</a>
48
+ <a class="sidebar__item" href="#other-options">color</a>
49
+ <a class="sidebar__title" href="#killing-creating">Killing and creating dynamically</a>
39
50
  </div>
40
51
  <div class="main">
52
+ <div class="title">
53
+ <h1>Perfect GUI API</h1>
41
54
 
42
- <h1>Perfect GUI API</h1>
55
+ <a class="link" target="_blank" href="https://github.com/thibka/perfect-gui">Github</a>
56
+ <a class="link" target="_blank" href="https://www.npmjs.com/package/perfect-gui">NPM</a>
57
+ </div>
43
58
 
44
59
  <h2 id="basics">Basics</h2>
45
60
 
@@ -49,9 +64,7 @@
49
64
 
50
65
  <div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
51
66
  <div id="code-block-basics" class="code-block code-block--hidden">
52
- <pre><code class="language-js">const position = {
53
- x: 0
54
- };
67
+ <pre><code class="language-js">const position = { x: 0 };
55
68
 
56
69
  const gui = new GUI({ name: 'Basics' });
57
70
 
@@ -68,10 +81,12 @@ gui.slider({
68
81
  min: -30,
69
82
  max: 30,
70
83
  step: .1
84
+ }, () => {
85
+ element.style.transform = `translateX(${position.x}px)`;
71
86
  });
72
87
 
73
88
  gui.toggle('Switch', true, state => {
74
- if ( state ) element.classList.remove('round');
89
+ if (state) element.classList.remove('round');
75
90
  else element.classList.add('round');
76
91
  });
77
92
 
@@ -79,24 +94,22 @@ gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
79
94
  element.style.backgroundColor = item;
80
95
  });
81
96
 
82
- gui.image('Image 1', 'path/to/image-1.jpg', evt => {
83
- element.style.backgroundImage = `url(${evt.path})`;
97
+ gui.image('Image 1', 'path/to/image-1.jpg', e => {
98
+ element.style.backgroundImage = `url(${e.path})`;
84
99
  });
85
100
 
86
- gui.image('Image 2', 'path/to/image-2.jpg', evt => {
87
- element.style.backgroundImage = `url(${evt.path})`;
101
+ gui.image('Image 2', 'path/to/image-2.jpg', e => {
102
+ element.style.backgroundImage = `url(${e.path})`;
103
+ });
104
+
105
+ gui.image('Image 3', 'path/to/image-3.jpg', e => {
106
+ element.style.backgroundImage = `url(${e.path})`;
88
107
  });
89
108
 
90
109
  gui.color('Color', '#ff0000', color => {
91
110
  element.style.backgroundColor = color;
92
111
  });
93
-
94
- function loop() {
95
- element.style.transform = `translateX(${position.x}px)`;
96
- requestAnimationFrame(loop);
97
- }
98
-
99
- loop();</code></pre>
112
+ </code></pre>
100
113
 
101
114
  </div>
102
115
 
package/test/src/js/basics.js CHANGED
@@ -25,9 +25,13 @@ export default function basics() {
25
25
  }
26
26
  );
27
27
 
28
- gui.slider({ name: 'Slider 2 (object binding)', obj: position, prop: 'x', min: -30, max: 30, step: .1 });
28
+ gui.slider({ name: 'Slider 2 (object binding)', obj: position, prop: 'x', min: -30, max: 30, step: .1 },
29
+ () => {
30
+ element.style.transform = `translateX(${position.x}px)`;
31
+ }
32
+ );
29
33
 
30
- gui.toggle('Switch', true, state => {
34
+ gui.toggle('Toggle', true, state => {
31
35
  if ( state ) element.classList.remove('round');
32
36
  else element.classList.add('round');
33
37
  });
@@ -37,7 +41,7 @@ export default function basics() {
37
41
  element.style.backgroundColor = item;
38
42
  });
39
43
 
40
- gui.image('Image 1',
44
+ gui.image('Image 1 lorem ipsum',
41
45
  'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.16---portrait-of-a-squirrel-in-an-officier-suit,-style-of-a-Rembrandt-painting.jpg',
42
46
  evt => {
43
47
  element.style.backgroundImage = `url(${evt.path})`;
@@ -45,6 +49,13 @@ export default function basics() {
45
49
  );
46
50
 
47
51
  gui.image('Image 2',
52
+ 'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.52---a-blonde-girl-riding-a-whale-in-the-style-of-hopper.jpg',
53
+ evt => {
54
+ element.style.backgroundImage = `url(${evt.path})`;
55
+ }
56
+ );
57
+
58
+ gui.image('Image 3',
48
59
  'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.13.55---1-blonde-haired-girl-with-her-orange-cat,-watching-the-whales-in-Tadoussac,-Canada.-In-the-style-of-an-oil-painting..jpg',
49
60
  evt => {
50
61
  element.style.backgroundImage = `url(${evt.path})`;
@@ -55,11 +66,4 @@ export default function basics() {
55
66
  element.style.backgroundImage = 'none';
56
67
  element.style.backgroundColor = color;
57
68
  });
58
-
59
- function loop() {
60
- element.style.transform = `translateX(${position.x}px)`;
61
- requestAnimationFrame(loop);
62
- }
63
-
64
- loop();
65
69
  }
package/test/src/styles/styles.css CHANGED
@@ -5,6 +5,9 @@
5
5
  --white: rgb(246, 246, 232);
6
6
  --grey: #ffffff33;
7
7
  --sans: 'General Sans', serif;
8
+ --h1-size: 2.6rem;
9
+ --h2-size: 2.2rem;
10
+ --body-size: 1.5rem;
8
11
  }
9
12
 
10
13
  * {
@@ -38,17 +41,28 @@ body {
38
41
  position: fixed;
39
42
  top: 0;
40
43
  left: 0;
41
- width: 200px;
42
44
  border-right: 1px solid var(--grey);
43
45
  height: 100%;
44
46
  background-color: #1b1b1b;
47
+ width: 120px;
48
+ padding: 40px;
49
+ z-index: 1;
50
+ }
51
+
52
+ .sidebar__title {
53
+ opacity: .8;
54
+ display: block;
55
+ margin-top: 4rem;
56
+ margin-bottom: 2rem;
57
+ font-size: 1.8rem;
45
58
  }
46
59
 
47
60
  .sidebar__item {
48
- padding: 20px 40px;
49
- text-transform: uppercase;
50
61
  opacity: .8;
51
62
  display: block;
63
+ font-size: var(--body-size);
64
+ margin-bottom: 1rem;
65
+ margin-left: 1rem;
52
66
  }
53
67
 
54
68
  .sidebar__item:hover {
@@ -56,7 +70,11 @@ body {
56
70
  }
57
71
 
58
72
  .sidebar__item:first-of-type {
59
- margin-top: 50px;
73
+
74
+ }
75
+
76
+ .sidebar__item:last-of-type {
77
+ margin-bottom: 4rem;
60
78
  }
61
79
 
62
80
  .main {
@@ -68,30 +86,47 @@ body {
68
86
 
69
87
  @media (max-width: 1024px) {
70
88
  .sidebar {
71
- width: 160px;
89
+ width: 120px;
72
90
  }
73
91
 
74
92
  .main {
75
93
  width: 700px;
76
- padding: 0 20px 100px 180px;
94
+ padding: 0 20px 100px 230px;
77
95
  }
78
96
  }
79
97
 
98
+ .title {
99
+ display: flex;
100
+ flex-direction: row;
101
+ margin: 80px 0;
102
+ }
103
+
104
+ .link {
105
+ padding: 10px;
106
+ border-bottom: 1px solid var(--white);
107
+ margin-left: 20px;
108
+ font-size: var(--body-size);
109
+ }
110
+
80
111
  h1, h2 {
81
112
  font-family: var(--sans), sans-serif;
82
113
  font-weight: normal;
83
114
  }
84
115
 
85
116
  h1 {
86
- margin: 80px 0;
117
+ margin: 0;
118
+ margin-right: auto;
119
+ font-size: var(--h1-size);
87
120
  }
88
121
 
89
122
  h2 {
90
123
  margin-top: 80px;
124
+ font-size: var(--h2-size);
91
125
  }
92
126
 
93
127
  p {
94
128
  line-height: 1.4;
129
+ font-size: var(--body-size);
95
130
  }
96
131
 
97
132
  a {
@@ -100,10 +135,12 @@ a {
100
135
  }
101
136
 
102
137
  .code-button {
103
- text-decoration: underline;
104
138
  cursor: pointer;
105
139
  margin-bottom: 10px;
106
- font-size: 1.2rem;
140
+ font-size: var(--body-size);
141
+ display: inline-block;
142
+ padding: 0 0px 3px 0;
143
+ border-bottom: 1px solid var(--white);
107
144
  }
108
145
 
109
146
  .code-block--hidden {
@@ -168,4 +205,5 @@ pre[class*=language-] {
168
205
  font-family: arial;
169
206
  color: var(--black);
170
207
  font-size: 1rem;
171
- }
208
+ }
209
+