perfect-gui 2.6.1 → 3.0.0

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 (18) hide show
  1. package/README.md +35 -25
  2. package/package.json +1 -1
  3. package/src/index.js +162 -17
  4. package/src/styles.js +53 -2
  5. package/test/src/index.html +139 -41
  6. package/test/src/index.js +7 -2
  7. package/test/src/js/basics.js +25 -12
  8. package/test/src/js/folders.js +4 -4
  9. package/test/src/js/full_featured.js +14 -14
  10. package/test/src/js/kill_create.js +36 -0
  11. package/test/src/js/multiple.js +9 -9
  12. package/test/src/js/other.js +12 -10
  13. package/test/src/js/vectors.js +27 -0
  14. package/test/src/styles/main.scss +18 -1
  15. package/test/webpack.config.js +0 -1
  16. package/test/build/bundle.js +0 -1
  17. package/test/build/index.html +0 -162
  18. package/test/build/main.css +0 -91
package/test/src/js/full_featured.js CHANGED
@@ -6,7 +6,7 @@ const full_featured_gui = new perfectGUI({
6
6
  container: '#container-1'
7
7
  });
8
8
 
9
- full_featured_gui.addImage(
9
+ full_featured_gui.image(
10
10
  'Background 1',
11
11
  'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
12
12
  () => {
@@ -15,7 +15,7 @@ full_featured_gui.addImage(
15
15
  document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
16
16
  }
17
17
  );
18
- full_featured_gui.addImage(
18
+ full_featured_gui.image(
19
19
  'Background 2',
20
20
  'https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
21
21
  () => {
@@ -24,7 +24,7 @@ full_featured_gui.addImage(
24
24
  document.getElementById('note').textContent = "Photo by Richard M. on Unsplash";
25
25
  }
26
26
  );
27
- full_featured_gui.addImage(
27
+ full_featured_gui.image(
28
28
  'Background 3',
29
29
  'https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
30
30
  () => {
@@ -33,7 +33,7 @@ full_featured_gui.addImage(
33
33
  document.getElementById('note').textContent = "Photo by Cassi Josh on Unsplash";
34
34
  }
35
35
  );
36
- full_featured_gui.addImage(
36
+ full_featured_gui.image(
37
37
  'Background 4',
38
38
  'https://images.unsplash.com/photo-1574169208507-84376144848b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&q=80',
39
39
  () => {
@@ -43,13 +43,13 @@ full_featured_gui.addImage(
43
43
  }
44
44
  );
45
45
 
46
- let folder = full_featured_gui.addFolder('Some folder');
46
+ let folder = full_featured_gui.folder('Some folder');
47
47
 
48
- folder.addButton("Random element color", () => {
48
+ folder.button("Random element color", () => {
49
49
  element.style.backgroundColor = get_random_color();
50
50
  });
51
51
 
52
- folder.addImage(
52
+ folder.image(
53
53
  'Background 5',
54
54
  'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1024&q=80',
55
55
  () => {
@@ -59,26 +59,26 @@ folder.addImage(
59
59
  }
60
60
  );
61
61
 
62
- full_featured_gui.addButton("Random element color", () => {
62
+ full_featured_gui.button("Random element color", () => {
63
63
  element.style.backgroundColor = get_random_color();
64
64
  });
65
- full_featured_gui.addSlider("Scale", {min: .1, max: 2, value: 1, step: .01 }, (value) => {
65
+ full_featured_gui.slider("Scale", {min: .1, max: 2, value: 1, step: .01 }, (value) => {
66
66
  element.style.transform = `scale(${value})`;
67
67
  });
68
- full_featured_gui.addSlider("3-step border-radius", {min: 0, max: 50, value: 0, step: 25 }, (value) => {
68
+ full_featured_gui.slider("3-step border-radius", {min: 0, max: 50, value: 0, step: 25 }, (value) => {
69
69
  element.style.borderRadius = `${value}%`;
70
70
  });
71
71
 
72
- let folder2 = full_featured_gui.addFolder('ok', false);
73
- folder2.addButton("Random element color", () => {
72
+ let folder2 = full_featured_gui.folder('ok', false);
73
+ folder2.button("Random element color", () => {
74
74
  element.style.backgroundColor = get_random_color();
75
75
  });
76
76
 
77
- full_featured_gui.addSwitch("Opacity switch", true, (state) => {
77
+ full_featured_gui.toggle("Opacity switch", true, (state) => {
78
78
  if (!state) element.style.opacity = .5;
79
79
  else element.style.opacity = 1;
80
80
  });
81
81
 
82
- full_featured_gui.addList('Select a color', ['red', 'pink', 'yellow', 'blue'], function(item) {
82
+ full_featured_gui.list('Select a color', ['red', 'pink', 'yellow', 'blue'], function(item) {
83
83
  element.style.backgroundColor = item;
84
84
  });
package/test/src/js/kill_create.js ADDED
@@ -0,0 +1,36 @@
1
+ import getRandomColor from './getRandomColor';
2
+ import GUI from '../../../src/index';
3
+
4
+ const container = '#container-5';
5
+
6
+ export default function other() {
7
+ const guis = [];
8
+
9
+ let gui_1 = new GUI({
10
+ container,
11
+ name: 'GUI 1',
12
+ });
13
+
14
+ gui_1.button('Create GUI panel', () => {
15
+ guis[guis.length] = new GUI({
16
+ container,
17
+ name: 'Created GUI',
18
+ position: 'bottom left',
19
+ width: 150
20
+ });
21
+ });
22
+
23
+ gui_1.button('Kill GUI panel', () => {
24
+ const index = guis.length - 1;
25
+ if ( index >= 0 ) {
26
+ // Removes html elements
27
+ guis[index].wrapper.remove();
28
+
29
+ // Frees up memory
30
+ guis[index] = null;
31
+
32
+ // Removes null value from array
33
+ guis.splice(index, 1);
34
+ }
35
+ });
36
+ }
package/test/src/js/multiple.js CHANGED
@@ -1,40 +1,40 @@
1
- import perfectGUI from '../../../src/index';
1
+ import GUI from '../../../src/index';
2
2
  import getRandomColor from './getRandomColor';
3
3
 
4
4
  export default function multiple() {
5
5
  const element = document.querySelector('#container-2 .element');
6
6
 
7
- const gui_1 = new perfectGUI({
7
+ const gui_1 = new GUI({
8
8
  name: 'GUI 1',
9
9
  width: 200,
10
10
  container: '#container-2'
11
11
  });
12
12
 
13
- gui_1.addButton('By the way, buttons can handle multiple lines of text.', () => {
13
+ gui_1.button('By the way, buttons can handle multiple lines of text.', () => {
14
14
  element.style.backgroundColor = getRandomColor();
15
15
  });
16
16
 
17
- const gui_2 = new perfectGUI({
17
+ const gui_2 = new GUI({
18
18
  name: 'GUI 2',
19
19
  width: 200,
20
20
  container: '#container-2'
21
21
  });
22
22
 
23
- gui_2.addButton('Button', () => element.style.backgroundColor = getRandomColor() );
23
+ gui_2.button('Button', () => element.style.backgroundColor = getRandomColor() );
24
24
 
25
- const gui_3 = new perfectGUI({
25
+ const gui_3 = new GUI({
26
26
  name: 'GUI 3',
27
27
  position: 'top right',
28
28
  container: '#container-2'
29
29
  });
30
30
 
31
- gui_3.addButton('Button', () => element.style.backgroundColor = getRandomColor() );
31
+ gui_3.button('Button', () => element.style.backgroundColor = getRandomColor() );
32
32
 
33
- const gui_4 = new perfectGUI({
33
+ const gui_4 = new GUI({
34
34
  name: 'GUI 4',
35
35
  position: 'right bottom',
36
36
  container: '#container-2'
37
37
  });
38
38
 
39
- gui_4.addButton('Button', () => element.style.backgroundColor = getRandomColor() );
39
+ gui_4.button('Button', () => element.style.backgroundColor = getRandomColor() );
40
40
  }
package/test/src/js/other.js CHANGED
@@ -1,34 +1,36 @@
1
1
  import getRandomColor from './getRandomColor';
2
- import perfectGUI from '../../../src/index';
2
+ import GUI from '../../../src/index';
3
+
4
+ const container = '#container-4';
3
5
 
4
6
  export default function other() {
5
- const gui_1 = new perfectGUI({
6
- container: '#container-4',
7
+ const gui_1 = new GUI({
8
+ container,
7
9
  name: 'GUI 1 (drag me!)',
8
10
  width: 500,
9
11
  draggable: true
10
12
  });
11
- gui_1.addButton('Custom width using the `width` option', () => {});
13
+ gui_1.button('Custom width using the `width` option', () => {});
12
14
 
13
- const gui_2 = new perfectGUI({
14
- container: '#container-4',
15
+ const gui_2 = new GUI({
16
+ container,
15
17
  name: 'GUI 2 (drag me!)',
16
18
  close: true,
17
19
  draggable: true,
18
20
  position: 'bottom left'
19
21
  });
20
22
 
21
- gui_2.addButton('gui_1.toggleClose();', () => {
23
+ gui_2.button('gui_1.toggleClose();', () => {
22
24
  gui_1.toggleClose();
23
25
  });
24
26
 
25
- const gui_3 = new perfectGUI({
26
- container: '#container-4',
27
+ const gui_3 = new GUI({
28
+ container,
27
29
  name: 'GUI 3 (closed)',
28
30
  closed: true,
29
31
  });
30
32
 
31
- gui_3.addButton('gui_2.toggleClose();', () => {
33
+ gui_3.button('gui_2.toggleClose();', () => {
32
34
  gui_2.toggleClose();
33
35
  });
34
36
  }
package/test/src/js/vectors.js ADDED
@@ -0,0 +1,27 @@
1
+ import GUI from '../../../src/index';
2
+
3
+ export default function vectors() {
4
+ const data = {
5
+ x: 0,
6
+ y: 0
7
+ }
8
+
9
+ const element = document.querySelector('#container-vectors .element');
10
+
11
+ const gui = new GUI({
12
+ name: 'Vectors',
13
+ container: '#container-vectors'
14
+ });
15
+
16
+ gui.vector2('Position', {
17
+ x: { object: data, prop: 'x', min: -50, max: 50 },
18
+ y: { object: data, prop: 'y', min: -50, max: 50 },
19
+ });
20
+
21
+ function loop() {
22
+ element.style.transform = `translate(${data.x}px, ${-data.y}px)`;
23
+ requestAnimationFrame(loop);
24
+ }
25
+
26
+ loop();
27
+ }
package/test/src/styles/main.scss CHANGED
@@ -16,6 +16,13 @@ body {
16
16
  padding-bottom: 100px;
17
17
  }
18
18
 
19
+ @media (max-width: 900px) {
20
+ .wrapper {
21
+ width: 700px;
22
+ padding: 0 20px 100px 20px;
23
+ }
24
+ }
25
+
19
26
  h1, h2 {
20
27
  font-family: 'Montserrat', sans-serif;
21
28
  }
@@ -28,7 +35,17 @@ h2 {
28
35
  margin-top: 80px;
29
36
  }
30
37
 
31
- .code {
38
+ .code-button {
39
+ text-decoration: underline;
40
+ cursor: pointer;
41
+ margin-bottom: 10px;
42
+ }
43
+
44
+ .code-block--hidden {
45
+ display: none;
46
+ }
47
+
48
+ .code-inline {
32
49
  font-family: monospace;
33
50
  background-color: black;
34
51
  color: #a6e22e;
package/test/webpack.config.js CHANGED
@@ -11,7 +11,6 @@ let config = {
11
11
  path: path.resolve(__dirname, './build'),
12
12
  filename: './bundle.js'
13
13
  },
14
- watch: true,
15
14
  module: {
16
15
  rules: [
17
16
  {
package/test/build/bundle.js DELETED
@@ -1 +0,0 @@
1
- (()=>{"use strict";class e{constructor(t={}){if(t.container?(this.container="string"==typeof t.container?document.querySelector(t.container):t.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),t.isFolder)return void this._folderConstructor(t.folderOptions);if(this.name=null!=t&&"string"==typeof t.name?t.name:"",this instanceof e&&("number"!=typeof e[e.instanceCounter]?e[e.instanceCounter]=0:e[e.instanceCounter]++),this.instanceId=e[e.instanceCounter],this.wrapperWidth=null!=t&&t.width?t.width:290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),0==this.instanceId&&this._addStyles(`\n.p-gui {\n position: ${this.position_type};\n top: 0;\n left: 0;\n transform: translate3d(0,0,0);\n padding: 20px 0px 4px 0px;\n background: #2e2e2e;\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n font-family: Verdana, Arial, sans-serif;\n width: 290px;\n overflow: hidden;\n box-shadow: 0 0 10px black;\n box-sizing: border-box;\n z-index: 99999;\n user-select: none;\n}\n\n.p-gui--collapsed {\n height: 0;\n padding: 21px 10px 0 10px;\n}\n\n.p-gui__header {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 20px;\n background-color: #111111;\n border-bottom: 1px solid #484848;\n cursor: grab;\n color: grey;\n font-size: 10px;\n line-height: 20px;\n padding-left: 8px;\n box-sizing: border-box;\n}\n\n.p-gui__header-close {\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n right: 0;\n cursor: pointer;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABFJREFUCNdjIAb8//8BjIkAAOrOBd3TR0jRAAAAAElFTkSuQmCC);\n background-size: 50% 50%;\n background-position: center;\n background-repeat: no-repeat; \n}\n\n.p-gui--collapsed .p-gui__header-close {\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABVJREFUCNdjYEhgIIj///8AwsSoBQD43QydY5mb0QAAAABJRU5ErkJggg==);\n}\n\n.p-gui__image-container {\n width: 100%;\n padding: 0 10px;\n display: flex;\n flex-wrap: wrap;\n margin-bottom: 5px;\n}\n\n.p-gui__image {\n width: 30.33%;\n height: 80px;\n background-size: cover;\n margin: 5px 1.5% 17px 1.5%;\n cursor: pointer;\n position: relative;\n}\n\n.p-gui__image-text {\n position: absolute;\n bottom: -15px;\n color: #eee;\n font-size: 11px;\n text-shadow: 0 -1px 0 #111;\n}\n\n.p-gui__button, \n.p-gui__switch,\n.p-gui__list {\n width: 100%;\n margin: 3px;\n padding: 7px;\n background: #1b1b1b;\n font-size: 11px;\n color: white;\n border-bottom: 1px solid #00ff89;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n\n.p-gui__list {\n cursor: default;\n}\n\n.p-gui__button:hover,\n.p-gui__switch:hover {\n background: #101010;\n}\n\n.p-gui__switch-checkbox {\n width: 5px;\n height: 5px;\n background-color: #343434;\n position: absolute;\n top: 0;\n right: 8px;\n bottom: 0;\n margin: auto;\n border-radius: 50%;\n pointer-events: none;\n}\n\n.p-gui__switch-checkbox--active {\n background-color: #00ff89;\n box-shadow: 0 0 5px #00ff89;\n}\n\n.p-gui__list-dropdown {\n position: absolute;\n right: 5px;\n top: 0;\n bottom: 0;\n margin: auto;\n height: 18px;\n cursor: pointer;\n}\n\n.p-gui__slider {\n width: 100%;\n margin: 3px 3px 9px 3px;\n padding: 7px;\n background: #1b1b1b;\n font-size: 11px;\n color: white;\n position: relative;\n}\n\n.p-gui__slider-ctrl {\n -webkit-appearance: none;\n padding: 0;\n font: inherit;\n outline: none;\n opacity: .8;\n background: #00a1ff;\n box-sizing: border-box;\n cursor: pointer;\n position: absolute;\n bottom: -5px;\n right: 0;\n height: 5px;\n width: 100%;\n margin: 0;\n}\n\n/* la zone de déplacement */\n.p-gui__slider-ctrl::-webkit-slider-runnable-track {\n height: 12px;\n border: none;\n border-radius: 0;\n background-color: transparent; /* supprimé définie sur l'input */\n}\n\n/* le curseur */\n.p-gui__slider-ctrl::-webkit-slider-thumb {\n -webkit-appearance: none; /* également nécessaire sur le curseur */\n width: 12px;\n height: inherit; /* s'adapte à la hauteur de l'input */\n border: none;\n border-radius: 50%; /* pris en compte sur Webkit et Edge */\n background: white; /* pris en compte sur Webkit only */\n border: 2px solid #00a1ff;\n}\n\n.p-gui__slider-value {\n display: inline-block;\n position: absolute;\n right: 7px;\n}\n\n.p-gui__folder {\n width: 100%;\n position: relative;\n background: #434343;\n overflow: hidden;\n margin-bottom: 3px;\n padding-bottom: 1px;\n display: flex;\n flex-wrap: wrap;\n border-left: 2px solid grey;\n margin-top: 5px;\n}\n\n.p-gui__folder--first {\n margin-top: 0;\n}\n\n.p-gui__folder--closed {\n height: 22px;\n}\n\n.p-gui__folder-header {\n padding: 5px;\n font-size: 11px;\n background-color: #222222;\n color: white;\n cursor: pointer;\n width: 100%;\n}\n\n.p-gui__folder-header:hover {\n background-color: #111111;\n}\n\n.p-gui__folder-arrow {\n width: 8px;\n height: 8px;\n display: inline-block;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);\n background-size: contain;\n margin-right: 5px;\n transform: rotate(90deg)\n}\n\n.p-gui__folder--closed .p-gui__folder-arrow {\n transform: rotate(0deg);\n}\n\n.p-gui__folder .p-gui__button, \n.p-gui__folder .p-gui__switch,\n.p-gui__folder .p-gui__slider,\n.p-gui__folder .p-gui__list {\n margin-left: 6px;\n}\n`),this.screenCorner=this._parseScreenCorner(t.position),this.xOffset="left"==this.screenCorner.x?0:this.container.clientWidth-this.wrapperWidth,this.instanceId>0){let e=this.container.querySelectorAll(".p-gui");for(let t=0;t<e.length;t++)this.screenCorner.y==e[t].dataset.cornerY&&("left"==this.screenCorner.x&&"left"==e[t].dataset.cornerX?this.xOffset+=e[t].offsetWidth:"right"==this.screenCorner.x&&"right"==e[t].dataset.cornerX&&(this.xOffset-=e[t].offsetWidth))}this.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset};let n="top"==this.screenCorner.y?"":"top: auto; bottom: 0;";this._addStyles(`#p-gui-${this.instanceId} {\n width: ${this.wrapperWidth}px;\n transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);\n ${n}\n }`),0!=t.autoRepositioning&&window.addEventListener("resize",this._handleResize.bind(this)),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),this.hasBeenDragged=!1,1==t.draggable&&this._makeDraggable(),this.closed=!1,t.closed&&this.toggleClose(),this.folders=[]}_folderConstructor(e){this.wrapper=e.wrapper}_parseScreenCorner(e){let t={x:"left",y:"top"};return null==e||("string"!=typeof e&&console.error("[perfect-gui] The position option must be a string."),e.includes("right")&&(t.x="right"),e.includes("bottom")&&(t.y="bottom")),t}_handleResize(){if(!this.hasBeenDragged){if(this.xOffset="left"==this.screenCorner.x?0:this.container.clientWidth-this.wrapperWidth,this.instanceId>0){let e=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let t=0;t<e.length&&!(parseInt(e[t].id.replace("p-gui-",""))>this.instanceId);t++)this.screenCorner.y==e[t].dataset.cornerY&&("left"==this.screenCorner.x&&"left"==e[t].dataset.cornerX?this.xOffset+=e[t].offsetWidth:"right"==this.screenCorner.x&&"right"==e[t].dataset.cornerX&&(this.xOffset-=e[t].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}}_createElement(e){e.el=e.el?e.el:"div";var t=document.createElement(e.el);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.inline&&(t.style=e.inline),e.href&&(t.href=e.href),e.onclick&&(t.onclick=e.onclick),e.onchange&&(t.onchange=e.onchange),e.textContent&&(t.textContent=e.textContent),e.innerHTML&&(t.innerHTML=e.innerHTML),e.customAttributes)for(var n in e.customAttributes)t.setAttribute(n,e.customAttributes[n]);return e.parent=e.parent?e.parent:this.wrapper,e.parent.append(t),t}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=this._createElement({parent:this.container,id:"p-gui-"+this.instanceId,class:"p-gui"}),this.header=this._createElement({parent:this.wrapper,class:"p-gui__header",textContent:this.name}),this._createElement({parent:this.header,class:"p-gui__header-close",onclick:this.toggleClose.bind(this)})}addButton(e,t){let n={text:e,callback:t};this._checkMandatoryParams({text:"string",callback:"function"},n),this.imageContainer=null,this._createElement({class:"p-gui__button",onclick:n.callback,textContent:n.text})}addImage(e,t,n){let i={text:e,path:t,callback:n};this._checkMandatoryParams({text:"string",path:"string",callback:"function"},i),this.imageContainer||(this.imageContainer=this._createElement({class:"p-gui__image-container"}));var o=this._createElement({class:"p-gui__image",onclick:()=>i.callback(i.path),inline:`background-image: url(${i.path})`,parent:this.imageContainer});this._createElement({parent:o,class:"p-gui__image-text",textContent:i.text})}addSlider(e,t,n){this._checkMandatoryParams({min:"number",max:"number",value:"number",step:"number"},t),this.imageContainer=null;var i=this._createElement({class:"p-gui__slider",textContent:e}),o=this._createElement({parent:i,el:"input",class:"p-gui__slider-ctrl",customAttributes:{type:"range",min:t.min,max:t.max,step:t.step,value:t.value}}),r=this._createElement({parent:i,class:"p-gui__slider-value",textContent:t.value});o.addEventListener("input",(function(){r.textContent=o.value,"function"==typeof n&&n(o.value)}))}addSwitch(e,t,n){let i={text:e,state:t,callback:n};this._checkMandatoryParams({text:"string",state:"boolean",callback:"function"},i),this.imageContainer=null;let o=this._createElement({class:"p-gui__switch",onclick:e=>{let t=e.target.childNodes[1],n=!0;t.classList.contains("p-gui__switch-checkbox--active")&&(n=!1),t.classList.toggle("p-gui__switch-checkbox--active"),i.callback(n)},textContent:i.text}),r=t?" p-gui__switch-checkbox--active":"";this._createElement({parent:o,class:"p-gui__switch-checkbox"+r})}addList(e,t,n){let i={text:e,list:t,callback:n};this._checkMandatoryParams({text:"string",list:"object",callback:"function"},i),this.imageContainer=null;let o=this._createElement({class:"p-gui__list",textContent:i.text}),r=this._createElement({parent:o,el:"select",class:"p-gui__list-dropdown",onchange:e=>{i.callback(e.target.value)}});t.forEach((e=>{this._createElement({parent:r,el:"option",customAttributes:{value:e},textContent:e})}))}addFolder(t,n={}){let i="boolean"==typeof n.closed&&n.closed,o={name:t,closed:i};this._checkMandatoryParams({name:"string",closed:"boolean"},o),this.imageContainer=null;let r="p-gui__folder";0==this.folders.length&&(r+=" p-gui__folder--first"),i&&(r+=" p-gui__folder--closed");let a=this._createElement({class:r}),s=(this._createElement({innerHTML:`<span class="p-gui__folder-arrow"></span>${o.name}`,class:"p-gui__folder-header",onclick:function(){this.parentNode.classList.toggle("p-gui__folder--closed")},parent:a}),new e({isFolder:!0,folderOptions:{wrapper:a}}));return this.folders.push(s),s}_checkMandatoryParams(e,t){var n=[];for(var i in e)typeof t[i]==e[i]||n.push(i);n.length>0&&n.forEach((e=>{throw Error(`[GUI] Missing '${e}' parameter`)}))}_makeDraggable(){var e=this;function t(t){t.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+t.clientX-e.position.prevX,e.position.y=e.position.initY+t.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}this.header.addEventListener("mousedown",(function(n){n.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=n.clientX,e.position.prevY=n.clientY,document.addEventListener("mousemove",t)})),this.header.addEventListener("mouseup",(function(e){document.removeEventListener("mousemove",t)}))}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}}function t(){for(var e="0123456789ABCDEF".split(""),t="#",n=0;n<6;n++)t+=e[Math.round(15*Math.random())];return t}!function(){const n=document.querySelector("#container-1 .element"),i=new e({name:"Basics",container:"#container-1"});i.addButton("Button",(()=>{n.style.backgroundColor=t(),n.style.backgroundImage="none"})),i.addSlider("Slider",{min:0,max:2,value:1,step:.01},(e=>n.style.transform=`scale(${e})`)),i.addSwitch("Switch",!0,(e=>{e?n.classList.remove("round"):n.classList.add("round")})),i.addList("List",["red","pink","yellow","blue"],(e=>{n.style.backgroundColor=e,n.style.backgroundImage="none"})),i.addImage("Image 1","https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=512&q=80",(e=>{n.style.backgroundImage=`url(${e})`,document.querySelector("#container-1 .note").textContent="Photo by Joel Filipe on Unsplash"})),i.addImage("Image 2","https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=512&q=80",(e=>{n.style.backgroundImage=`url(${e})`,document.querySelector("#container-1 .note").textContent="Photo by Milad Fakurian on Unsplash"}))}(),function(){const n=document.querySelector("#container-2 .element");new e({name:"GUI 1",width:200,container:"#container-2"}).addButton("By the way, buttons can handle multiple lines of text.",(()=>{n.style.backgroundColor=t()})),new e({name:"GUI 2",width:200,container:"#container-2"}).addButton("Button",(()=>n.style.backgroundColor=t())),new e({name:"GUI 3",position:"top right",container:"#container-2"}).addButton("Button",(()=>n.style.backgroundColor=t())),new e({name:"GUI 4",position:"right bottom",container:"#container-2"}).addButton("Button",(()=>n.style.backgroundColor=t()))}(),function(){const n=document.querySelector("#container-3 .element"),i=new e({name:"Folders",container:"#container-3"});i.addFolder("Folder 1 (open)").addButton("Random color",(()=>{n.style.backgroundColor=t()})),i.addFolder("Folder 2 (closed)",{closed:!0}).addButton("Random color",(()=>{n.style.backgroundColor=t()}))}(),function(){const t=new e({container:"#container-4",name:"GUI 1 (drag me!)",width:500,draggable:!0});t.addButton("Custom width using the `width` option",(()=>{}));const n=new e({container:"#container-4",name:"GUI 2 (drag me!)",close:!0,draggable:!0,position:"bottom left"});n.addButton("gui_1.toggleClose();",(()=>{t.toggleClose()})),new e({container:"#container-4",name:"GUI 3 (closed)",closed:!0}).addButton("gui_2.toggleClose();",(()=>{n.toggleClose()}))}()})();
package/test/build/index.html DELETED
@@ -1,162 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <meta charset="utf-8" />
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <title></title>
8
- <meta name="viewport" content="width=device-width, initial-scale=1">
9
- <script defer src="./bundle.js?0ae3a19d7ad6f108b28a"></script><link href="main.css?0ae3a19d7ad6f108b28a" rel="stylesheet"></head>
10
-
11
- <body>
12
- <div class="wrapper">
13
- <h1>Perfect GUI API</h1>
14
-
15
- <h2>Basics</h2>
16
-
17
- <div id="container-1" class="container">
18
- <div class="element"></div>
19
- <p class="note"></p>
20
- </div>
21
-
22
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
23
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Basics&#39;</span><span style="color: #f8f8f2">,</span>
24
- <span style="color: #f8f8f2">});</span>
25
-
26
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
27
- <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
28
- <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: #e6db74">&#39;none&#39;</span><span style="color: #f8f8f2">;</span>
29
- <span style="color: #f8f8f2">});</span>
30
-
31
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addSlider</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Slider&#39;</span><span style="color: #f8f8f2">,</span>
32
- <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">2</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">step</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">.</span><span style="color: #ae81ff">01</span> <span style="color: #f8f8f2">},</span>
33
- <span style="color: #a6e22e">value</span> <span style="color: #f92672">=&gt;</span> <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">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">scale</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">value</span> <span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span>
34
- <span style="color: #f8f8f2">);</span>
35
-
36
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addSwitch</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Switch&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">state</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
37
- <span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span> <span style="color: #a6e22e">state</span> <span style="color: #f8f8f2">)</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">classList</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">remove</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;round&#39;</span><span style="color: #f8f8f2">);</span>
38
- <span style="color: #66d9ef">else</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">classList</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">add</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;round&#39;</span><span style="color: #f8f8f2">);</span>
39
- <span style="color: #f8f8f2">});</span>
40
-
41
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addList</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;List&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">[</span><span style="color: #e6db74">&#39;red&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;pink&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;yellow&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #e6db74">&#39;blue&#39;</span><span style="color: #f8f8f2">],</span> <span style="color: #a6e22e">item</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
42
- <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">item</span><span style="color: #f8f8f2">;</span>
43
- <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: #e6db74">&#39;none&#39;</span><span style="color: #f8f8f2">;</span>
44
- <span style="color: #f8f8f2">});</span>
45
-
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>
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
- <span style="color: #f8f8f2">}</span>
51
- <span style="color: #f8f8f2">);</span>
52
-
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>
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
- <span style="color: #f8f8f2">}</span>
58
- <span style="color: #f8f8f2">);</span>
59
- </pre></div>
60
-
61
- <h2>Positioning</h2>
62
- <p>GUI instances can be positioned in any corner of the screen / container.</p>
63
- <p>When multiple instances share the same position (like GUI 1 and GUI 2 in the example below), they are stacked next to each other.</p>
64
- <div id="container-2" class="container">
65
- <div class="element"></div>
66
- </div>
67
-
68
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
69
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 1&#39;</span><span style="color: #f8f8f2">,</span>
70
- <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
71
- <span style="color: #f8f8f2">});</span>
72
-
73
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Buttons can handle multiple lines of text.&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
74
- <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
75
- <span style="color: #f8f8f2">});</span>
76
-
77
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_2</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
78
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 2&#39;</span><span style="color: #f8f8f2">,</span>
79
- <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">200</span>
80
- <span style="color: #f8f8f2">});</span>
81
-
82
- <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">);</span>
83
-
84
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
85
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 3&#39;</span><span style="color: #f8f8f2">,</span>
86
- <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;top right&#39;</span>
87
- <span style="color: #f8f8f2">});</span>
88
-
89
- <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">);</span>
90
-
91
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_4</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
92
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 4&#39;</span><span style="color: #f8f8f2">,</span>
93
- <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;right bottom&#39;</span>
94
- <span style="color: #f8f8f2">});</span>
95
-
96
- <span style="color: #a6e22e">gui_4</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">()</span> <span style="color: #f8f8f2">);</span>
97
- </pre></div>
98
-
99
-
100
- <h2>Folders</h2>
101
- Folders can be closed by default by setting the <i>open</i> parameter to <span class="code">false</span>.
102
- <div id="container-3" class="container">
103
- <div class="element"></div>
104
- </div>
105
-
106
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
107
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Folders&#39;</span>
108
- <span style="color: #f8f8f2">});</span>
109
-
110
- <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addFolder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 1&#39;</span><span style="color: #f8f8f2">);</span>
111
-
112
- <span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
113
- <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
114
- <span style="color: #f8f8f2">});</span>
115
-
116
- <span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addFolder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">);</span>
117
-
118
- <span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
119
- <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">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
120
- <span style="color: #f8f8f2">});</span>
121
- </pre></div>
122
-
123
- <h2>Other options</h2>
124
- <p>GUI panels can be dragged around with the <span class="code">draggable</span> option.</p>
125
- <p>They can also have a custom width, by using the <span class="code">width</span> option.</p>
126
- <p>The <span class="code">toggleClose()</span> method can be used to open / close a GUI panel.</p>
127
- <p>Just like folders, GUI panels can be closed by default by setting the <span class="code">close</span> option to <span class="code">true</span>.</p>
128
- <div id="container-4" class="container">
129
- </div>
130
-
131
- <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_1</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
132
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 1 (drag me!)&#39;</span><span style="color: #f8f8f2">,</span>
133
- <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">500</span><span style="color: #f8f8f2">,</span>
134
- <span style="color: #a6e22e">draggable</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span>
135
- <span style="color: #f8f8f2">});</span>
136
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Custom width using the `width` option&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{});</span>
137
-
138
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_2</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
139
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 2 (drag me!)&#39;</span><span style="color: #f8f8f2">,</span>
140
- <span style="color: #a6e22e">close</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
141
- <span style="color: #a6e22e">draggable</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
142
- <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;bottom left&#39;</span>
143
- <span style="color: #f8f8f2">});</span>
144
-
145
- <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;gui_1.toggleClose();&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
146
- <span style="color: #a6e22e">gui_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
147
- <span style="color: #f8f8f2">});</span>
148
-
149
- <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
150
- <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 3 (closed)&#39;</span><span style="color: #f8f8f2">,</span>
151
- <span style="color: #a6e22e">closed</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span>
152
- <span style="color: #f8f8f2">});</span>
153
-
154
- <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">addButton</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;gui_2.toggleClose();&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
155
- <span style="color: #a6e22e">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
156
- <span style="color: #f8f8f2">});</span>
157
- </pre></div>
158
-
159
- </div>
160
- </body>
161
-
162
- </html>
package/test/build/main.css DELETED
@@ -1,91 +0,0 @@
1
- @import url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap);
2
- html, body {
3
- height: 100%;
4
- }
5
-
6
- body {
7
- margin: 0;
8
- background-color: white;
9
- color: black;
10
- font-family: Arial, sans-serif;
11
- }
12
-
13
- .wrapper {
14
- width: 800px;
15
- margin: 0 auto;
16
- padding-bottom: 100px;
17
- }
18
-
19
- h1, h2 {
20
- font-family: 'Montserrat', sans-serif;
21
- }
22
-
23
- h1 {
24
- margin: 80px 0;
25
- }
26
-
27
- h2 {
28
- margin-top: 80px;
29
- }
30
-
31
- .code {
32
- font-family: monospace;
33
- background-color: black;
34
- color: #a6e22e;
35
- padding: 3px 6px;
36
- border-radius: 3px;
37
- }
38
-
39
- div:has(pre) {
40
- border-radius: 5px;
41
- }
42
-
43
- pre {
44
- padding: 20px;
45
- border-radius: 5px;
46
- font-size: 1.2em;
47
- }
48
-
49
- .container {
50
- background-color: #111;
51
- transition: .3s all ease;
52
- background-position: center;
53
- background-size: cover;
54
- overflow: hidden;
55
- position: relative;
56
- height: 400px;
57
- width: 100%;
58
- margin: 20px auto 20px auto;
59
- border-radius: 5px;
60
- }
61
-
62
- .element {
63
- width: 100px;
64
- height: 100px;
65
- position: absolute;
66
- top: 0;
67
- left: 0;
68
- right: 0;
69
- bottom: 0;
70
- margin: auto;
71
- background-color: red;
72
- background-size: cover;
73
- background-position: center;
74
- background-repeat: no-repeat;
75
- border: 1px solid black;
76
- transition: .1s transform ease, .3s border-radius ease, .3s background-color linear;
77
- }
78
-
79
- .element.round {
80
- border-radius: 50%;
81
- }
82
-
83
- .note {
84
- position: absolute;
85
- bottom: 10px;
86
- left: 20px;
87
- text-shadow: 0 0 1px black, 0 0 1px black;
88
- font-family: arial;
89
- color: white;
90
- font-size: 10px;
91
- }