Apache Guacamole and Bootstrap collapsibles

[Vieri <re...@yahoo.com.INVALID>]

Hi,

Does anyone know how to use bootstrap collapsibles by extending Guacamole?

This is the first part of my custom HTML:

<meta name="after" content=".login-ui .login-dialog">

<div class="welcome">

<br>
<p>
  <button class="btn btn-light" type="button" data-toggle="collapse" data-target="#LoginMSG" aria-expanded="false" aria-controls="LoginMSG">
    LOGIN
  </button>

  <button class="btn btn-light" type="button" data-toggle="collapse" data-target="#BrowserMSG" aria-expanded="false" aria-controls="BrowserMSG">
    BROWSER
  </button>
</p>

<div class="collapse" id="LoginMSG">
  <div class="card card-body">
    <p>
        Bla bla.
    </p>
  </div>
</div>


I include the js and css files in the manifest.
The login page seems to render fine, and Firefox's console (F12) does not show any errrors.
If I click on the LoginMSG button then the "Bla bla." text shows up as expected.
However, clicking it again does not hide it.

Has anyone ever successfully used collapsibles in Guacamole?
If so, a "hello world" sample code would help (even if it's not with bootstrap).

Thanks,

Vieri
 

---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org

Re: Apache Guacamole and Bootstrap collapsibles

[Vieri <re...@yahoo.com.INVALID>]

In case anyone was wondering, it seems I need to replace

a href="#"

with:

a href="javascript:;"

in my sample code.

That's for the AngularJS solution. Still don't know how to properly use both AngularJS and Bootstrap in a Guacamole extension.

Vieri

---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org

Re: Apache Guacamole and Bootstrap collapsibles

[Vieri <re...@yahoo.com.INVALID>]

Hi again,

Just an observation.

If I replace 

<meta name="after" content=".all-connections">

with

<meta name="after" content=".connection-list-ui">

then I do see the "Test" message show up, but it almost immediately closes back up, as if the page were reloaded (probably because of the href).

Another obvious observation: I'm not a js expert.

Any ideas to put me on the right track?

Vieri

---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org

Re: Apache Guacamole and Bootstrap collapsibles

[Vieri <re...@yahoo.com.INVALID>]

OK, no takers. So I decided to keep it simple and only use AngularJS which Guacamole relies on.

Here's my super simple custom extension:

# cat guac-manifest.json
{

        "guacamoleVersion" : "*",
        "name" : "Custom URLs",
        "namespace" : "customurls",

         "html" : [
                "CustomURLs.html"
         ]

}

# cat CustomURLs.html
<meta name="after" content=".all-connections">

<div class="header">
    <h2>EXAMPLE</h2>
</div>

<div ng-app id="ng-app">
    <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">Example</a>

    <div ng-show="collapsed">
    <p>
    Test
    </p>
    </div>

</div>

If I enter the Guacamole web UI, I can see the "Example" collapsible, but I cannot open it up (ie. I cannot see the "Test" message).

What's wrong with this extension?

Any clues?

Vieri

---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org