Hi,
I'd like to extend the guacamole client gui with "collapsibles".
In the example below, I'm trying to do that in the login page.
# cat guac-manifest.json
{
"guacamoleVersion" : "*",
"name" : "mybrand",
"namespace" : "mybranding",
"translations" : [
"translations/en.json"
],
"css" : [
"css/login-override.css",
"css/collapsible.css"
],
"js" : [
"js/collapsible.js"
],
"html" : [
"WelcomeNotice.html"
],
"resources" : {
"images/logo-placeholder.png" : "image/png",
"images/guac-tricolor.png" : "image/png",
"images/logo-64.png" : "image/png",
"images/logo-144.png" : "image/png"
},
"smallIcon" : "images/logo-64.png",
"largeIcon" : "images/logo-144.png"
}
# cat WelcomeNotice.html
<meta name="after" content=".login-ui .login-dialog">
<div class="welcome">
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button type="button" class="custom-collapsible">Open Collapsible</button>
<div class="custom-collapsible-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<p>Collapsible Set:</p>
<button type="button" class="custom-collapsible">Open Section 1</button>
<div class="custom-collapsible-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<button type="button" class="custom-collapsible">Open Section 2</button>
<div class="custom-collapsible-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<button type="button" class="custom-collapsible">Open Section 3</button>
<div class="custom-collapsible-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
# cat css/collapsible.css
.custom-collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .custom-collapsible:hover {
background-color: #555;
}
.custom-collapsible-content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
# cat js/collapsible.js
var coll = document.getElementsByClassName("custom-collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
Now, if I load this extension I can see my collapsibles on the login page, but:
1) nothing happens if I clilck on them
2) they eat up all the width instead of being aligned with the login form right
above. I'm not a web dev, and extending is not as straightforward as editing
HTML code in-place.
As a side question, would it be possible to include bootstrap by extending?
Is that done by simply specifying the bootstrap js/ccs in the manifest file?
Vieri
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
