diff --git a/guacamole/src/main/webapp/scripts/guac-ui.js b/guacamole/src/main/webapp/scripts/guac-ui.js index 113d5b7a5..46e5dcc8f 100644 --- a/guacamole/src/main/webapp/scripts/guac-ui.js +++ b/guacamole/src/main/webapp/scripts/guac-ui.js @@ -441,7 +441,11 @@ GuacUI.Connection = function(connection) { var url = "client.xhtml?id=" + encodeURIComponent(connection.id); // Create link to client - element.onclick = function() { + element.addEventListener("click", function(e) { + + // Prevent click from affecting parent + e.stopPropagation(); + e.preventDefault(); // Attempt to focus existing window var current = window.open(null, connection.id); @@ -451,13 +455,14 @@ GuacUI.Connection = function(connection) { if (!current.GuacUI) window.open(url, connection.id); - }; + }, false); + // Add icon protocol.appendChild(protocol_icon); // Set name - name.textContent = connection.id; + name.textContent = connection.name; // Assemble caption caption.appendChild(protocol); @@ -785,4 +790,88 @@ GuacUI.Download = function(filename) { */ this.ondownload = null; -}; \ No newline at end of file +}; + +/** + * A grouping component. Child elements can be added via the addElement() + * function. By default, groups display as collapsed. + */ +GuacUI.ListGroup = function(caption) { + + /** + * Reference to this group. + * @private + */ + var guac_group = this; + + /** + * A container for for the list group itself. + */ + var element = GuacUI.createElement("div", "group"); + + // Create connection display elements + var caption_element = GuacUI.createChildElement(element, "div", "caption"); + var caption_icon = GuacUI.createChildElement(caption_element, "div", "icon group"); + GuacUI.createChildElement(caption_element, "span", "name").textContent = caption; + + /** + * A container for all children of this list group. + */ + var elements = GuacUI.createChildElement(element, "div", "children"); + + // Toggle by default + element.addEventListener("click", function(e) { + + // Prevent click from affecting parent + e.stopPropagation(); + e.preventDefault(); + + if (guac_group.expanded) + guac_group.collapse(); + else + guac_group.expand(); + + }, false); + + /** + * Whether this group is expanded. + * + * @type Boolean + */ + this.expanded = false; + + /** + * Returns the element representing this notification. + */ + this.getElement = function() { + return element; + }; + + /** + * Adds an element as a child of this group. + * + * @param { + */ + this.addElement = function(element) { + elements.appendChild(element); + }; + + /** + * Expands the list group, revealing all children of the group. This + * functionality requires supporting CSS. + */ + this.expand = function() { + GuacUI.addClass(element, "expanded"); + guac_group.expanded = true; + }; + + /** + * Collapses the list group, hiding all children of the group. This + * functionality requires supporting CSS. + */ + this.collapse = function() { + GuacUI.removeClass(element, "expanded"); + guac_group.expanded = false; + }; + +}