perfect-gui 2.5.2 → 2.6.0

package/test/src/js/multiple.js

@@ -0,0 +1,40 @@
+import perfectGUI from '../../../src/index';
+import getRandomColor from './getRandomColor';
+
+export default function multiple() {
+    const element = document.querySelector('#container-2 .element');
+
+    const gui_1 = new perfectGUI({
+        name: 'GUI 1',
+        width: 200,
+        container: '#container-2'
+    });
+    
+    gui_1.addButton('By the way, buttons can handle multiple lines of text.', () => {
+        element.style.backgroundColor = getRandomColor();
+    });
+
+    const gui_2 = new perfectGUI({
+        name: 'GUI 2',
+        width: 200,
+        container: '#container-2'
+    });
+    
+    gui_2.addButton('Button', () => element.style.backgroundColor = getRandomColor() );
+    
+    const gui_3 = new perfectGUI({
+        name: 'GUI 3',
+        position: 'top right',
+        container: '#container-2'
+    });
+    
+    gui_3.addButton('Button', () => element.style.backgroundColor = getRandomColor() );
+    
+    const gui_4 = new perfectGUI({
+        name: 'GUI 4',
+        position: 'right bottom',
+        container: '#container-2'
+    });
+    
+    gui_4.addButton('Button', () => element.style.backgroundColor = getRandomColor() );
+}

package/test/src/js/other.js

@@ -0,0 +1,34 @@
+import getRandomColor from './getRandomColor';
+import perfectGUI from '../../../src/index';
+
+export default function other() {
+    const gui_1 = new perfectGUI({
+        container: '#container-4',
+        name: 'GUI 1 (drag me!)',
+        width: 500,
+        draggable: true
+    });
+    gui_1.addButton('Custom width using the `width` option', () => {});
+
+    const gui_2 = new perfectGUI({
+        container: '#container-4',
+        name: 'GUI 2 (drag me!)',
+        close: true,
+        draggable: true,
+        position: 'bottom left'
+    });
+
+    gui_2.addButton('gui_1.toggleClose();', () => {
+        gui_1.toggleClose();
+    });
+
+    const gui_3 = new perfectGUI({
+        container: '#container-4',
+        name: 'GUI 3 (closed)',
+        closed: true,
+    });
+
+    gui_3.addButton('gui_2.toggleClose();', () => {
+        gui_2.toggleClose();
+    });
+}

package/test/src/styles/main.scss

@@ -1,17 +1,65 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 html, body {
     height: 100%;
 }
 
 body {
-    overflow: hidden;
     margin: 0;
+    background-color: white;
+    color: black;
+    font-family: Arial, sans-serif;
+}
+
+.wrapper {
+    width: 800px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+}
+
+h1, h2 {
+    font-family: 'Montserrat', sans-serif;
+}
+
+h1 {
+    margin: 80px 0;
+}
+
+h2 {
+    margin-top: 80px;
+}
+
+.code {
+    font-family: monospace;
     background-color: black;
+    color: #a6e22e;
+    padding: 3px 6px;
+    border-radius: 3px;
+}
+
+div:has(pre) {
+    border-radius: 5px;
+}
+
+pre {
+    padding: 20px; 
+    border-radius: 5px;
+    font-size: 1.2em;
+}
+
+.container {
+    background-color: #111;
     transition: .3s all ease;
     background-position: center;
     background-size: cover;
+    overflow: hidden;
+    position: relative;
+    height: 400px;
+    width: 100%;
+    margin: 20px auto 20px auto;
+    border-radius: 5px;
 }
 
-#element {
+.element {
     width: 100px;
     height: 100px;
     position: absolute;
@@ -21,11 +69,18 @@ body {
     bottom: 0;
     margin: auto;
     background-color: red;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     border: 1px solid black;
     transition: .1s transform ease, .3s border-radius ease, .3s background-color linear;
 }
 
-#note {
+.element.round {
+    border-radius: 50%;
+}
+
+.note {
     position: absolute;
     bottom: 10px;
     left: 20px;

package/test/webpack.config.js

@@ -1,5 +1,4 @@
 /* eslint-disable */
-
 const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -16,54 +15,19 @@ let config = {
 	module: {
 		rules: [
 			{
-				test: /\.(png|jpe?g|gif|mp3|woff|woff2|eot|ttf|otf|obj)$/,
-				use: [
-					'file-loader'
-				]
-			},
-			{
-				test: /\.(svg)$/i,
-				use: [
-				  'file-loader',
-				  {
-					loader: 'image-webpack-loader',
-					options: {
-					  bypassOnDebug: true,
-					},
-				  },
-				],
+				test: /\.(jpe?g|gif|svg|png|mp3|mp4|woff|woff2|eot|ttf|otf|obj|json)$/,
+				type: 'asset/resource'
 			},
 			{
 				test: /\.s?css$/,
 				use: [
 					MiniCssExtractPlugin.loader,
 					"css-loader",
-					"sass-loader"
 				]
 			},
-			{
-				type: 'javascript/auto',
-				test: /\.json$/,
-				loader: 'file-loader',
-				options: {
-					name: '[name].[ext]'
-				}
-            },
-            {
-                test: /\.m?js$/,
-                exclude: /(node_modules)/,
-                use: {
-                  loader: 'babel-loader',
-                  options: {
-                    presets: ['@babel/preset-env']
-                  }
-                }
-            }
 		]
     },
     devServer: {
-        contentBase: path.join(__dirname, 'public'),
-		watchContentBase: true,
 		port: 8000
     },
 	plugins: [