bgfx/3rdparty/remotery/vis/extern/BrowserLib/WindowManager/Code/ComboBox.js

238 lines
5.8 KiB
JavaScript
Raw Normal View History

2015-11-11 14:06:52 -05:00
namespace("WM");
WM.ComboBoxPopup = (function()
{
var body_template_html = "<div class='ComboBoxPopup'></div>";
var item_template_html = " \
<div class='ComboBoxPopupItem notextsel'> \
<div class='ComboBoxPopupItemText'></div> \
<div class='ComboBoxPopupItemIcon'><img src='BrowserLibImages/tick.gif'></div> \
<div style='clear:both'></div> \
</div>";
function ComboBoxPopup(combo_box)
{
this.ComboBox = combo_box;
this.ParentNode = combo_box.Node;
this.ValueNodes = [ ];
// Create the template node
this.Node = DOM.Node.CreateHTML(body_template_html);
DOM.Event.AddHandler(this.Node, "mousedown", Bind(SelectItem, this));
this.CancelDelegate = Bind(this, "Cancel");
}
ComboBoxPopup.prototype.SetValues = function(values)
{
// Clear existing values
this.Node.innerHTML = "";
// Generate HTML nodes for each value
this.ValueNodes = [ ];
for (var i in values)
{
var item_node = DOM.Node.CreateHTML(item_template_html);
var text_node = DOM.Node.FindWithClass(item_node, "ComboBoxPopupItemText");
item_node.Value = values[i];
text_node.innerHTML = values[i];
this.Node.appendChild(item_node);
this.ValueNodes.push(item_node);
}
}
ComboBoxPopup.prototype.Show = function(selection_index)
{
// Initially match the position of the parent node
var pos = DOM.Node.GetPosition(this.ParentNode);
DOM.Node.SetPosition(this.Node, pos);
// Take the width/z-index from the parent node
this.Node.style.width = this.ParentNode.offsetWidth;
this.Node.style.zIndex = this.ParentNode.style.zIndex + 1;
// Setup event handlers
DOM.Event.AddHandler(document.body, "mousedown", this.CancelDelegate);
// Show the popup so that the HTML layout engine kicks in before
// the layout info is used below
this.ParentNode.appendChild(this.Node);
// Show/hide the tick image based on which node is selected
for (var i in this.ValueNodes)
{
var node = this.ValueNodes[i];
var icon_node = DOM.Node.FindWithClass(node, "ComboBoxPopupItemIcon");
if (i == selection_index)
{
icon_node.style.display = "block";
// Also, shift the popup up so that the mouse is over the selected item and is highlighted
var item_pos = DOM.Node.GetPosition(this.ValueNodes[selection_index]);
var diff_pos = [ item_pos[0] - pos[0], item_pos[1] - pos[1] ];
pos = [ pos[0] - diff_pos[0], pos[1] - diff_pos[1] ];
}
else
{
icon_node.style.display = "none";
}
}
DOM.Node.SetPosition(this.Node, pos);
}
ComboBoxPopup.prototype.Hide = function()
{
DOM.Event.RemoveHandler(document.body, "mousedown", this.CancelDelegate);
this.ParentNode.removeChild(this.Node);
}
function SelectItem(self, evt)
{
// Search for which item node is being clicked on
var node = DOM.Event.GetNode(evt);
for (var i in self.ValueNodes)
{
var value_node = self.ValueNodes[i];
if (DOM.Node.Contains(node, value_node))
{
// Set the value on the combo box
self.ComboBox.SetValue(value_node.Value);
self.Hide();
break;
}
}
}
function Cancel(self, evt)
{
// Don't cancel if the mouse up is anywhere on the popup or combo box
var node = DOM.Event.GetNode(evt);
if (!DOM.Node.Contains(node, self.Node) &&
!DOM.Node.Contains(node, self.ParentNode))
{
self.Hide();
}
DOM.Event.StopAll(evt);
}
return ComboBoxPopup;
})();
WM.ComboBox = (function()
{
var template_html = " \
<div class='ComboBox'> \
<div class='ComboBoxText notextsel'></div> \
<div class='ComboBoxIcon'><img src='BrowserLibImages/up_down.gif'></div> \
<div style='clear:both'></div> \
</div>";
function ComboBox()
{
this.OnChange = null;
// Create the template node and locate key nodes
this.Node = DOM.Node.CreateHTML(template_html);
this.TextNode = DOM.Node.FindWithClass(this.Node, "ComboBoxText");
// Create a reusable popup
this.Popup = new WM.ComboBoxPopup(this);
// Set an empty set of values
this.SetValues([]);
this.SetValue("&lt;empty&gt;");
// Create the mouse press event handlers
DOM.Event.AddHandler(this.Node, "mousedown", Bind(OnMouseDown, this));
this.OnMouseOutDelegate = Bind(OnMouseUp, this, false);
this.OnMouseUpDelegate = Bind(OnMouseUp, this, true);
}
ComboBox.prototype.SetOnChange = function(on_change)
{
this.OnChange = on_change;
}
ComboBox.prototype.SetValues = function(values)
{
this.Values = values;
this.Popup.SetValues(values);
}
ComboBox.prototype.SetValue = function(value)
{
// Set the value and its HTML rep
var old_value = this.Value;
this.Value = value;
this.TextNode.innerHTML = value;
// Call change handler
if (this.OnChange)
this.OnChange(value, old_value);
}
ComboBox.prototype.GetValue = function()
{
return this.Value;
}
function OnMouseDown(self, evt)
{
// If this check isn't made, the click will trigger from the popup, too
var node = DOM.Event.GetNode(evt);
if (DOM.Node.Contains(node, self.Node))
{
// Add the depression class and activate release handlers
DOM.Node.AddClass(self.Node, "ComboBoxPressed");
DOM.Event.AddHandler(self.Node, "mouseout", self.OnMouseOutDelegate);
DOM.Event.AddHandler(self.Node, "mouseup", self.OnMouseUpDelegate);
DOM.Event.StopAll(evt);
}
}
function OnMouseUp(self, confirm, evt)
{
// Remove depression class and remove release handlers
DOM.Node.RemoveClass(self.Node, "ComboBoxPressed");
DOM.Event.RemoveHandler(self.Node, "mouseout", self.OnMouseOutDelegate);
DOM.Event.RemoveHandler(self.Node, "mouseup", self.OnMouseUpDelegate);
// If this is a confirmed press and there are some values in the list, show the popup
if (confirm && self.Values.length > 0)
{
var selection_index = self.Values.indexOf(self.Value);
self.Popup.Show(selection_index);
}
DOM.Event.StopAll(evt);
}
return ComboBox;
})();