perfect-gui 2.6.0 → 2.6.1

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/index.js +3 -2
  3. package/test/src/index.html +4 -4
  4. package/test/src/js/basics.js +6 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
- "version": "2.6.0",
3
+ "version": "2.6.1",
4
4
  "description": "Nice and simple GUI for JavaScript.",
5
5
  "main": "src/index.js",
6
6
  "directories": {
package/src/index.js CHANGED
@@ -198,17 +198,18 @@ export default class GUI {
198
198
  // Image
199
199
  var image = this._createElement({
200
200
  class: 'p-gui__image',
201
- onclick: () => params.callback(params.path),
202
201
  inline: `background-image: url(${params.path})`,
203
202
  parent: this.imageContainer
204
203
  })
205
-
204
+
206
205
  // Text inside image
207
206
  this._createElement({
208
207
  parent: image,
209
208
  class: 'p-gui__image-text',
210
209
  textContent: params.text
211
210
  })
211
+
212
+ image.onclick = () => params.callback({ path: params.path, text: params.text });
212
213
  }
213
214
 
214
215
  addSlider (text, sliderParams, callback) {
package/test/src/index.html CHANGED
@@ -44,15 +44,15 @@
44
44
  <span style="color: #f8f8f2">});</span>
45
45
 
46
46
  <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addImage</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Image 1&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;path/to/image-1.jpg&#39;</span><span style="color: #f8f8f2">,</span>
47
- <span style="color: #a6e22e">path</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
48
- <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
47
+ <span style="color: #a6e22e">evt</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
48
+ <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">evt.path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
49
49
  <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;#container-1 .note&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">textContent</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;Photo by Joel Filipe on Unsplash&quot;</span><span style="color: #f8f8f2">;</span>
50
50
  <span style="color: #f8f8f2">}</span>
51
51
  <span style="color: #f8f8f2">);</span>
52
52
 
53
53
  <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addImage</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Image 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;path/to/image-2.jpg&#39;</span><span style="color: #f8f8f2">,</span>
54
- <span style="color: #a6e22e">path</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
55
- <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
54
+ <span style="color: #a6e22e">evt</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
55
+ <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundImage</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">url</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">evt.path</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
56
56
  <span style="color: #f8f8f2">document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;#container-1 .note&#39;</span><span style="color: #f8f8f2">).</span><span style="color: #a6e22e">textContent</span> <span style="color: #f92672">=</span> <span style="color: #e6db74">&quot;Photo by Milad Fakurian on Unsplash&quot;</span><span style="color: #f8f8f2">;</span>
57
57
  <span style="color: #f8f8f2">}</span>
58
58
  <span style="color: #f8f8f2">);</span>
package/test/src/js/basics.js CHANGED
@@ -32,16 +32,18 @@ export default function basics() {
32
32
 
33
33
  gui_1.addImage('Image 1',
34
34
  'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80',
35
- path => {
36
- element.style.backgroundImage = `url(${path})`;
35
+ evt => {
36
+ element.style.backgroundImage = `url(${evt.path})`;
37
+ console.log(evt.text);
37
38
  document.querySelector('#container-1 .note').textContent = "Photo by Joel Filipe on Unsplash";
38
39
  }
39
40
  );
40
41
 
41
42
  gui_1.addImage('Image 2',
42
43
  'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=512&q=80',
43
- path => {
44
- element.style.backgroundImage = `url(${path})`;
44
+ evt => {
45
+ element.style.backgroundImage = `url(${evt.path})`;
46
+ console.log(evt.text);
45
47
  document.querySelector('#container-1 .note').textContent = "Photo by Milad Fakurian on Unsplash";
46
48
  }
47
49
  );