npm - perfect-gui - Versions diffs - 4.0.1 → 4.0.3 - Mend

perfect-gui 4.0.1 → 4.0.3

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 (28) hide show

package/package.json +1 -4
package/src/index.js +4 -4
package/src/styles.js +1 -0
package/test/package-lock.json +0 -3151
package/test/package.json +0 -22
package/test/src/index.html +0 -619
package/test/src/index.js +0 -42
package/test/src/js/demo.js +0 -65
package/test/src/js/getRandomColor.js +0 -8
package/test/src/js/kill_create.js +0 -37
package/test/src/js/methods/basics.js +0 -69
package/test/src/js/methods/button.js +0 -15
package/test/src/js/methods/color.js +0 -14
package/test/src/js/methods/folder.js +0 -34
package/test/src/js/methods/image.js +0 -17
package/test/src/js/methods/list.js +0 -14
package/test/src/js/methods/slider.js +0 -26
package/test/src/js/methods/toggle.js +0 -15
package/test/src/js/methods/vector2.js +0 -21
package/test/src/js/multiple.js +0 -40
package/test/src/js/other.js +0 -52
package/test/src/js/prism.js +0 -5
package/test/src/js/vectors.js +0 -27
package/test/src/styles/_sidebar.css +0 -45
package/test/src/styles/_table.css +0 -21
package/test/src/styles/prism.css +0 -3
package/test/src/styles/styles.css +0 -186
package/test/webpack.config.js +0 -47

package/test/package.json DELETED Viewed

@@ -1,22 +0,0 @@
-{
-  "name": "perfect-gui_example",
-  "description": "",
-  "main": "webpack.config.js",
-  "scripts": {
-    "start": "webpack serve",
-    "build": "webpack --mode=production"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "css-loader": "^6.7.1",
-    "html-webpack-plugin": "^5.5.0",
-    "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^2.6.1",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.1"
-  }
-}

package/test/src/index.html DELETED Viewed

@@ -1,619 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Perfect GUI | Documentation</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="author" content="Thibaut Foussard">
-    <meta name="description" content="Nice and simple GUI for JavaScript">
-    <link rel="canonical" href="https://thibka.github.io/perfect-gui/public/">
-    <meta property="og:image" content="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/social.png">
-    <meta property="og:image:type" content="image/jpg">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="628">
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://thibka.github.io/perfect-gui/public/">
-    <meta property="og:title" content="Perfect GUI">
-    <meta property="og:description" content="Nice and simple GUI for JavaScript">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/16x16.png">
-    <link rel="shortcut icon" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.png">
-</head>
-<body>
-<div class="wrapper">
-    <div class="sidebar">
-        <div>
-            <img
-            class="sidebar_logo"
-            width="30"
-            src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.png">
-        </div>
-        <a class="sidebar__title" href="#basics">Methods</a>
-            <a class="sidebar__item" href="#button">.button()</a>
-            <a class="sidebar__item" href="#slider">.slider()</a>
-            <a class="sidebar__item" href="#toggle">.toggle()</a>
-            <a class="sidebar__item" href="#list">.list()</a>
-            <a class="sidebar__item" href="#image">.image()</a>
-            <a class="sidebar__item" href="#color">.color()</a>
-            <a class="sidebar__item" href="#vector2">.vector2()</a>
-            <a class="sidebar__item" href="#folders">.folder()</a>
-            <a class="sidebar__item" href="#other-options">.toggleClose()</a>
-        <a class="sidebar__title" href="#other-options">Options</a>
-            <a class="sidebar__item" href="#other-options">name</a>
-            <a class="sidebar__item" href="#positioning">position</a>
-            <a class="sidebar__item" href="#other-options">close</a>
-            <a class="sidebar__item" href="#other-options">width</a>
-            <a class="sidebar__item" href="#other-options">maxHeight</a>
-            <a class="sidebar__item" href="#other-options">color</a>
-        <a class="sidebar__title" href="#killing-creating">Killing and creating dynamically</a>
-    </div>
-    <div class="main">
-        <div class="title">
-            <h1>Perfect GUI <i>v4</i></h1>
-            <a class="link" target="_blank" href="https://github.com/thibka/perfect-gui">Github</a>
-            <a class="link" target="_blank" href="https://www.npmjs.com/package/perfect-gui">NPM</a>
-            <a class="link" target="_blank" href="https://twitter.com/_Thibka">Twitter</a>
-        </div>
-        <p class="subtitle">A nice, simple and (<span id="subtitle-random">probably not</span>) perfect GUI for JavaScript.</p>
-        <h2 id="basics">Basics</h2>
-        <div id="container-1" class="container">
-            <div class="element left"></div>
-        </div>
-        <div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
-        <div id="code-block-basics" class="code-block code-block--hidden">
-            <pre><code class="language-js">const position = { x: 0 };
-const gui = new GUI({ name: 'Basics' });
-gui.button('Button', changeColor);
-gui.slider({ name: 'Slider (simple callback)', value: 1 },
-    value => element.style.opacity = value
-);
-gui.slider({
-    name: 'Slider 2 (object binding)',
-    obj: position,
-    prop: 'x',
-    min: -30,
-    max: 30,
-    step: .1
-}, () => {
-    element.style.transform = `translateX(${position.x}px)`;
-});
-gui.toggle({ name: 'Switch', state: true }, state => {
-    if (state) element.classList.remove('round');
-    else element.classList.add('round');
-});
-gui.list({ name: 'List', options: ['red', 'pink', 'yellow', 'blue'] }, option => {
-    element.style.backgroundColor = option;
-});
-gui.image({ name: 'Image 1', path: 'path/to/image-1.jpg' }, e => {
-    element.style.backgroundImage = `url(${e.path})`;
-});
-gui.image({ name: 'Image 2', path: 'path/to/image-2.jpg' }, e => {
-    element.style.backgroundImage = `url(${e.path})`;
-});
-gui.image({ name: 'Image 3', path: 'path/to/image-3.jpg' }, e => {
-    element.style.backgroundImage = `url(${e.path})`;
-});
-gui.color({ name: 'Color', value: '#ff0000' }, color => {
-    element.style.backgroundColor = color;
-});
-</code></pre>
-        </div>
-<h2 id="button">.button( parameters, callback )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional.</td>
-    </tr>
-</table>
-<div id="container-button" class="container container--small">
-    <div class="element left"></div>
-</div>
-<div id="code-block-button" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const gui = new GUI();
-gui.button({ name: 'Button' }, changeColor);</code></pre>
-// or
-gui.button('Button', changeColor);
-</div>
-<h2 id="slider">.slider( parameters, callback )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional. Defaults to the <span class="code-inline">prop</span> (or <span class="code-inline">property</span>) parameter if one is provided.</td>
-    </tr>
-    <tr>
-        <td>value</td>
-        <td>number</td>
-        <td>Optional. Defaults to the average value between <span class="code-inline">min</span> and <span class="code-inline">max</span> properties.</td>
-    </tr>
-    <tr>
-        <td>min</td>
-        <td>number</td>
-        <td>Optional. Default is 0.</td>
-    </tr>
-    <tr>
-        <td>max</td>
-        <td>number</td>
-        <td>Optional. Default is 1.</td>
-    </tr>
-    <tr>
-        <td>step</td>
-        <td>number</td>
-        <td>Increment by which to change value.<br>
-            Optional. Default is calculated so that there are 100 steps between <span class="code-inline">min</span> and <span class="code-inline">max</span>.</td>
-    </tr>
-    <tr>
-        <td>obj || object</td>
-        <td>object</td>
-        <td>Optional. Target object. Ignored if a <span class="code-inline">value</span> is specified.</td>
-    </tr>
-    <tr>
-        <td>prop || property</td>
-        <td>string</td>
-        <td>Optional. Target object property. Ignored if a <span class="code-inline">value</span> is specified.</td>
-    </tr>
-</table>
-<p>This method can be used in 2 ways:
-<ul>
-    <li>with a <span class="code-inline">value</span> parameter and a callback function to create a "simple" slider (see first example below). The current value will then be passed to the callback.</li>
-    <li>with an <span class="code-inline">object</span> and its target <span class="code-inline">property</span> to bind the slider and the property together (see second example below).
-        Such a slider will automatically update the value of the object property, therefore a callback isn't necessarily needed.
-        Directly updating the property would also update the slider.</li>
-</ul>
-</p>
-<div id="container-slider" class="container container--small">
-    <div class="element left"></div>
-</div>
-<div id="code-block-button" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const position = { x: 0 };
-const gui = new GUI();
-// Simple slider with value & callback
-gui.slider({ name: 'Simple slider (value & callback)', value: 1 },
-    value => {
-        element.style.opacity = value;
-    }
-);
-// Object binding
-gui.slider({ name: 'Slider with object binding', obj: position, prop: 'x', min: -30, max: 30 },
-    () => {
-        element.style.transform = `translateX(${position.x}px)`;
-    }
-);</code></pre>
-</div>
-<h2 id="toggle">.toggle( parameters, callback )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional.</td>
-    </tr>
-    <tr>
-        <td>value</td>
-        <td>boolean</td>
-        <td>Optional. Default is false.</td>
-    </tr>
-</table>
-<div id="container-toggle" class="container container--small">
-    <div class="element left"></div>
-</div>
-<div id="code-block-toggle" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const gui = new GUI();
-gui.toggle({ name: 'Toggle', value: true }, value => {
-    if ( value ) element.classList.remove('round');
-    else element.classList.add('round');
-});</code></pre>
-</div>
-<h2 id="list">.list( parameters, callback )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional.</td>
-    </tr>
-    <tr>
-        <td>values</td>
-        <td>array</td>
-        <td>Options to be displayed.</td>
-    </tr>
-</table>
-<div id="container-list" class="container container--small">
-    <div class="element left" style="background-color: red;"></div>
-</div>
-<div id="code-block-list" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const gui = new GUI();
-gui.list({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, selected_value => {
-    element.style.backgroundColor = selected_value;
-});
-// alternatively you could also call it this way
-gui.options({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, selected_value => {
-    element.style.backgroundColor = selected_value;
-});
-</code></pre>
-</div>
-<h2 id="image">.image( parameters, callback )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional. Default is the image file name.</td>
-    </tr>
-    <tr>
-        <td>path</td>
-        <td>string</td>
-        <td>Image file path.</td>
-    </tr>
-</table>
-<div id="container-image" class="container container--small">
-    <div class="element left"></div>
-</div>
-<div id="code-block-image" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const gui = new GUI();
-gui.image({ name: 'Lorem ipsum', path: 'path/to/image.jpg'}, evt => {
-    element.style.backgroundImage = `url( ${ evt.path } )`;
-});
-</code></pre>
-</div>
-<h2 id="color">.color( parameters, callback )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional.</td>
-    </tr>
-    <tr>
-        <td>value</td>
-        <td>string</td>
-        <td>Hexadecimal color value.<br>
-            Optional. Default is <span class="code-inline">#000000</span>.</td>
-    </tr>
-</table>
-<div id="container-color" class="container container--small">
-    <div class="element left"></div>
-</div>
-<div id="code-block-color" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const gui = new GUI();
-gui.color({ name: 'Color', value: '#06ff89' }, color => {
-    element.style.backgroundColor = color;
-});
-</code></pre>
-</div>
-<h2 id="vector2">vector2( parameters, callback );</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional.</td>
-    </tr>
-    <tr>
-        <td>x</td>
-        <td>object</td>
-        <td>An object containing the x-axis properties<br>
-            <span class="code-inline">{ obj&lt;object>, prop&lt;string>, min&lt;number>, max&lt;number> }</span></td>
-    </tr>
-    <tr>
-        <td>y</td>
-        <td>object</td>
-        <td>An object containing the y-axis properties<br>
-            <span class="code-inline">{ obj&lt;object>, prop&lt;string>, min&lt;number>, max&lt;number> }</span></td>
-    </tr>
-</table>
-<p>A vector2() component will automatically update the value of the target object property, therefore a callback isn't necessarily needed. Directly updating the object property will also update the vector2() component.</p>
-<div id="container-vector2" class="container" style="height: 340px;">
-    <div class="element left"></div>
-    <p class="note"></p>
-</div>
-<div id="code-block-vector2" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const position = { x: 0, y: 0 };
-const gui = new GUI();
-gui.vector2({ name: 'Position',
-    x: { obj: position, prop: 'x', min: -50, max: 50 },
-    y: { obj: position, prop: 'y', min: -50, max: 50 },
-}, (x, y) => {
-    element.style.transform = `translate(${x}px, ${-y}px)`;
-});</code></pre>
-        </div>
-<h2 id="folders">folder( parameters )</h2>
-<table cellspacing="0">
-    <tr>
-        <th>Parameter</th>
-        <th>Type</th>
-        <th>Description</th>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td>string</td>
-        <td>Optional.</td>
-    </tr>
-    <tr>
-        <td>closed</td>
-        <td>boolean</td>
-        <td>Optional. Default is <span class="code-inline">false</span>.</td>
-    </tr>
-    <tr>
-        <td>color</td>
-        <td>string</td>
-        <td>Optional. Background color of the folder.</td>
-    </tr>
-</table>
-<div id="container-folder" class="container" style="height: 280px;">
-    <div class="element left"></div>
-</div>
-<div id="code-block-folder" class="code-block">
-<pre><code class="language-js">import GUI from 'perfect-gui';
-const gui = new GUI();
-let folder_1 = gui.folder({ name: 'Folder 1' });
-folder_1.button('Random color', changeColor);
-folder_1.slider({ name: 'Size', value: 1 }, changeScale);
-let folder_2 = gui.folder({ name: 'Folder 2', color: '#993333' });
-folder_2.button('Random color', changeColor);
-let folder_3 = gui.folder({ name: 'Folder 3', closed: true });
-folder_3.button('Random color', changeColor);</code></pre>
-</div>
-<h2 id="positioning">Positioning</h2>
-<p>GUI instances can be positioned in any corner of the screen / container.</p>
-<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>
-<div id="container-2" class="container">
-    <div class="element"></div>
-</div>
-<div class="code-button" onclick="document.getElementById('code-block-positioning').classList.toggle('code-block--hidden')">See code</div>
-<div id="code-block-positioning" class="code-block code-block--hidden">
-    <pre><code class="language-js">const gui_1 = new GUI({
-    name: 'GUI 1',
-    width: 200
-});
-gui_1.button('Buttons can handle multiple lines of text.', () => {
-    element.style.backgroundColor = getRandomColor();
-});
-const gui_2 = new GUI({
-    name: 'GUI 2',
-    width: 200
-});
-gui_2.button('Button', () => element.style.backgroundColor = getRandomColor() );
-const gui_3 = new GUI({
-    name: 'GUI 3',
-    position: 'top left'
-});
-gui_3.button('Button', () => element.style.backgroundColor = getRandomColor() );
-const gui_4 = new GUI({
-    name: 'GUI 4',
-    position: 'bottom right'
-});
-gui_4.button('Button', () => element.style.backgroundColor = getRandomColor() );</code></pre>
-</div>
-<h2 id="other-options">Options</h2>
-<p>GUI panels can be dragged around with the <span class="code-inline">draggable</span> option.</p>
-<p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
-<p>The <span class="code-inline">toggleClose()</span> method can be used to open / close a GUI panel.</p>
-<p>Just like folders, GUI panels can be closed by default by setting the <span class="code-inline">close</span> option to <span class="code-inline">true</span>.</p>
-<p>The <span class="code-inline">maxHeight</span> option can be used to define the maximum height of a panel beyond which scrolling is necessary. Default is the smallest value between the height of the window and the height of the container.</p>
-<p>The <span class="code-inline">color</span> option can be used for both GUI panels and folders to customize their background color.</p>
-<div id="container-4" class="container"></div>
-<div class="code-button" onclick="document.getElementById('code-block-containers').classList.toggle('code-block--hidden')">See code</div>
-<div id="code-block-containers" class="code-block code-block--hidden">
-<pre><code class="language-js">const gui_1 = new GUI({
-    name: 'GUI 1 (drag me!)',
-    width: 500,
-    draggable: true
-});
-gui_1.button('Custom width using the `width` option', () => {});
-const gui_2 = new GUI({
-    name: 'GUI 2 (drag me!)',
-    close: true,
-    draggable: true,
-    position: 'bottom left'
-});
-gui_2.button('gui_1.toggleClose();', () => {
-    gui_1.toggleClose();
-});
-const gui_3 = new GUI({
-    name: 'GUI 3 (closed, scrollable)',
-    closed: true,
-});
-let f1 = gui_3.folder({ name: 'folder', color: '#33329f' });
-for (let i = 0; i < 3; i ++) {
-    f1.button('btn '+ i, () => {});
-}
-let f2 = gui_3.folder({ name: 'folder', color: '#9f3293' });
-for (let i = 0; i < 3; i ++) {
-    f2.button('btn '+ i, () => {});
-}
-for (let i = 0; i < 10; i ++) {
-    gui_3.button('btn '+ i, () => {});
-}
-const gui_4 = new GUI({
-    name: 'GUI 4 (custom color)',
-    position: 'bottom right',
-    color: '#226666'
-});
-gui_4.button('lorem', () => {});</code></pre>
-</div>
-<h2 id="killing-creating">Killing and creating dynamically</h2>
-<p>There is no .kill() method at the moment, so instances have to be killed "manually".</p>
-<div id="container-5" class="container"></div>
-<div class="code-button" onclick="document.getElementById('code-block-killing').classList.toggle('code-block--hidden')">See code</div>
-<div id="code-block-killing" class="code-block code-block--hidden">
-<pre><code class="language-js">const guis = [];
-let gui_1 = new GUI({
-    name: 'GUI 1',
-});
-gui_1.button('Create GUI panel', () => {
-    guis[guis.length] = new GUI({
-        name: 'Created GUI',
-        position: 'bottom left',
-        width: 150,
-        color: 'red'
-    });
-});
-gui_1.button('Kill GUI panel', () => {
-    const index = guis.length - 1;
-    if ( index >= 0 ) {
-        // Removes html elements
-        guis[index].wrapper.remove();
-        // Frees up memory
-        guis[index] = null;
-        // Removes null value from array
-        guis.splice(index, 1);
-    }
-});</code></pre>
-</div>
-</div>
-</div>
-</body>
-</html>

package/test/src/index.js DELETED Viewed

@@ -1,42 +0,0 @@
-import './styles/prism.css';
-import './styles/styles.css';
-import './styles/_sidebar.css';
-import './styles/_table.css';
-//import demo from './js/demo';
-import './js/prism';
-import basics from './js/methods/basics';
-import button from './js/methods/button';
-import slider from './js/methods/slider';
-import toggle from './js/methods/toggle';
-import list from './js/methods/list';
-import image from './js/methods/image';
-import color from './js/methods/color';
-import vector2 from './js/methods/vector2';
-import folder from './js/methods/folder';
-import multiple from './js/multiple';
-import other from './js/other';
-import kill_create from './js/kill_create';
-let subtitle = ['probably not', 'maybe not so', 'almost', 'nearly'];
-subtitle = subtitle[Math.floor(Math.random() * subtitle.length)];
-document.getElementById('subtitle-random').textContent = subtitle;
-//demo();
-basics();
-    button();
-    slider();
-    toggle();
-    list();
-    image();
-    color();
-    vector2();
-    folder();
-multiple();
-other();
-kill_create();