perfect-gui 3.5.12 → 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 +31 -21
  5. package/test/src/js/basics.js +14 -10
  6. package/test/src/styles/styles.css +29 -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.12",
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
@@ -29,12 +29,24 @@
29
29
  <body>
30
30
  <div class="wrapper">
31
31
  <div class="sidebar">
32
- <a class="sidebar__item" href="#basics">Basics</a>
33
- <a class="sidebar__item" href="#vectors">Vectors</a>
34
- <a class="sidebar__item" href="#positioning">Positioning</a>
35
- <a class="sidebar__item" href="#folders">Folders</a>
36
- <a class="sidebar__item" href="#other-options">Other options</a>
37
- <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>
38
50
  </div>
39
51
  <div class="main">
40
52
  <div class="title">
@@ -52,9 +64,7 @@
52
64
 
53
65
  <div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
54
66
  <div id="code-block-basics" class="code-block code-block--hidden">
55
- <pre><code class="language-js">const position = {
56
- x: 0
57
- };
67
+ <pre><code class="language-js">const position = { x: 0 };
58
68
 
59
69
  const gui = new GUI({ name: 'Basics' });
60
70
 
@@ -71,10 +81,12 @@ gui.slider({
71
81
  min: -30,
72
82
  max: 30,
73
83
  step: .1
84
+ }, () => {
85
+ element.style.transform = `translateX(${position.x}px)`;
74
86
  });
75
87
 
76
88
  gui.toggle('Switch', true, state => {
77
- if ( state ) element.classList.remove('round');
89
+ if (state) element.classList.remove('round');
78
90
  else element.classList.add('round');
79
91
  });
80
92
 
@@ -82,24 +94,22 @@ gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
82
94
  element.style.backgroundColor = item;
83
95
  });
84
96
 
85
- gui.image('Image 1', 'path/to/image-1.jpg', evt => {
86
- element.style.backgroundImage = `url(${evt.path})`;
97
+ gui.image('Image 1', 'path/to/image-1.jpg', e => {
98
+ element.style.backgroundImage = `url(${e.path})`;
87
99
  });
88
100
 
89
- gui.image('Image 2', 'path/to/image-2.jpg', evt => {
90
- 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})`;
91
107
  });
92
108
 
93
109
  gui.color('Color', '#ff0000', color => {
94
110
  element.style.backgroundColor = color;
95
111
  });
96
-
97
- function loop() {
98
- element.style.transform = `translateX(${position.x}px)`;
99
- requestAnimationFrame(loop);
100
- }
101
-
102
- loop();</code></pre>
112
+ </code></pre>
103
113
 
104
114
  </div>
105
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,12 +86,12 @@ 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
 
@@ -87,7 +105,7 @@ body {
87
105
  padding: 10px;
88
106
  border-bottom: 1px solid var(--white);
89
107
  margin-left: 20px;
90
- font-size: 1.4rem;
108
+ font-size: var(--body-size);
91
109
  }
92
110
 
93
111
  h1, h2 {
@@ -98,16 +116,17 @@ h1, h2 {
98
116
  h1 {
99
117
  margin: 0;
100
118
  margin-right: auto;
119
+ font-size: var(--h1-size);
101
120
  }
102
121
 
103
122
  h2 {
104
123
  margin-top: 80px;
105
- font-size: 2rem;
124
+ font-size: var(--h2-size);
106
125
  }
107
126
 
108
127
  p {
109
128
  line-height: 1.4;
110
- font-size: 1.4rem;
129
+ font-size: var(--body-size);
111
130
  }
112
131
 
113
132
  a {
@@ -118,7 +137,7 @@ a {
118
137
  .code-button {
119
138
  cursor: pointer;
120
139
  margin-bottom: 10px;
121
- font-size: 1.4rem;
140
+ font-size: var(--body-size);
122
141
  display: inline-block;
123
142
  padding: 0 0px 3px 0;
124
143
  border-bottom: 1px solid var(--white);