add TextareaController,input element read-only, password, recursive modify the css... etc

[forejerk]

Hi.dat-gui is a great project.
If anyone is interested, I will publish the code.
I have merged several pull requests and added new controllers and features.

to

example.html

    var obj = {
        message: 'Hello World',
        displayOutline: false,

        maxSize: 6.0,
        speed: 5,

        height: 10,
        noiseStrength: 10.2,
        growthSpeed: 0.2,

        type: 'three',

        explode: function () {
          alert('Bang!');
        },

        color0: "#ffae23", // CSS string
        color1: [ 0, 128, 255 ], // RGB array
        color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
        color3: { h: 350, s: 0.9, v: 0.3 }, // Hue, saturation, value

        text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit',

        imagePath1: 'https://images.unsplash.com/photo-1516222338250-863216ce01ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=467&q=50',

        value: 5,

        recursive:{
          name:'a',
          children:[
            {
              name:'b',
              children:[

              ]
            }
          ]
        },

        tooltip:'hello world'

    };

    var gui = new dat.gui.GUI();

    gui.remember(obj);

    gui.add(obj, 'message');
    gui.add(obj, 'displayOutline');
    gui.add(obj, 'explode');

    gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
    gui.add(obj, 'height').step(5); // Increment amount

    // Choose from accepted values
    gui.add(obj, 'type', [ 'one', 'two', 'three' ] );

    // Choose from named values
    gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );

    var f1 = gui.addFolder('Colors');
    f1.addColor(obj, 'color0');
    f1.addColor(obj, 'color1');
    f1.addColor(obj, 'color2');
    f1.addColor(obj, 'color3');

    var f2 = gui.addFolder('Another Folder');
    f2.add(obj, 'noiseStrength');

    var f3 = f2.addFolder('Nested Folder');
    f3.add(obj, 'growthSpeed');

    var f4 = gui.addFolder('Text');
    f4.addText(obj, 'text')

    var f5 = gui.addFolder('Image');
    f5.addImage(obj, 'imagePath1');

    var f6 = gui.addFolder('Plotter');
    f6.addPlotter(obj, 'value', 10, 0);

    setInterval(() => {
      this.obj.value = Math.floor( Math.random() * 40 ) ;
    }, 10);

    var f7 = gui.addFolder('Readonly');
    var a = f7.add(obj, 'height').step(1);
    var b = f7.addText(obj, 'text');
    var c = f7.add(obj, 'message');
    a.readonly(true)
    b.readonly(true)
    c.readonly(true)

    var f7 = gui.addFolder('Placeholder');
    var a = f7.add(obj, 'height').step(1);
    var b = f7.addText(obj, 'text');
    var c = f7.add(obj, 'message');
    a.placeholder('a')
    b.placeholder('b')
    c.placeholder('c')

    var f8 = gui.addFolder('Password')
    var a = f8.add(obj, 'message');
    a.password(true)

    var f9 = gui.addFolder('Expand')
    var a = f9.add(obj, 'maxSize').min(-10).max(10).step(0.25);
    var b = f9.add(obj, 'height').step(1);
    var c = f9.addText(obj, 'text');
    var d = f9.add(obj, 'message');
    var e = f9.add(obj, 'type', [ 'one', 'two', 'three' ] );
    var f = f9.addPlotter(obj, 'value', 10, 0);
    var g = f9.addImage(obj, 'imagePath1');
    f9.expand(true)
    
    var f10 = gui.addFolder('Recursive')
    f10.addObject(obj.recursive,'recursive')

    var f11 = gui.addFolder('Tooltip','tooltip')
    f11.add(obj, 'tooltip').title('A javascript framework for developing pretty browser dialogs and notifications.')

screenshot

[mandaputtra]

This is great! Please do merge!

[Alynva]

Awesome! Waiting for this

[jianyunli]

great stuff, is this merged?

[matiduda]

Hi! Are you willing to publish the code?

[dj-kefir-siorbacz]

@forejerk Any updates? Will the code be published? You haven't made any pull request and you don't have any fork from what I see