").css({ position: "absolute", top: "-1000px", left: "-1000px", "font-size": "11px", "font-family": "Helvetica", "white-space": "nowrap" });
$("body").append(tester);
maxwidth = 0;
html = "";
selected = "";
selected_option = "";
// Need to find all children since we have to account for options in and out of optgroups
first_level = $(element).children();
y = 0;
for (i = 0; i < first_level.length; i++) {
el = first_level.get(i);
if (el.nodeName.toLowerCase() == "optgroup") {
l = $(el).attr("label");
html += '
' + l + '
';
// Get the size of this text.
tester.html(l);
width = tester.width();
if (width > maxwidth) {
maxwidth = width;
}
options = $(el).find("option");
for (x = 0; x < options.length; x++) {
y++;
option = options.eq(x);
text = option.html();
val = option.attr("value");
if (!val) {
val = text;
}
// Get the size of this text.
tester.html(text);
width = tester.width();
if (width + 20 > maxwidth) {
maxwidth = width + 20;
}
if (y == 1) {
selected_option = text;
}
if (option.prop("selected")) {
html += '
' + text + '';
selected_option = text;
} else {
html += '
' + text + '';
}
}
} else {
y++;
option = $(el);
text = option.html();
val = option.attr("value");
if (!val) {
val = text;
}
// If we're making a tree-like dropdown
if (option.attr("data-depth")) {
depth = parseInt(option.attr("data-depth")) * 10;
} else {
depth = 0;
}
// Get the size of this text.
tester.html(text);
width = tester.width() + depth;
if (width > maxwidth) {
maxwidth = width;
}
if (y == 1) {
selected_option = text;
}
if (option.prop("selected")) {
html += '
' + text + '';
selected_option = text;
} else {
html += '
' + text + '';
}
}
}
div.html('
' + selected_option + '' + html + '
');
spanwidth = maxwidth;
// If we're in a section cell we may need to be smaller.
if ($(element).parent().get(0).tagName.toLowerCase() == "section") {
sectionwidth = $(element).parent().width();
if (sectionwidth < (maxwidth + 56)) {
spanwidth = sectionwidth - 22;
maxwidth = spanwidth - 44;
div.find("span").css({ overflow: "hidden", padding: "0 0 0 10px" });
}
}
div.find("span").css({ width: (spanwidth + 10) + "px", height: "30px" }).html('
' + selected_option).click($.proxy(this.click,this));
div.find(".select_options").css({ width: (maxwidth + 64) + "px" });
div.on("click","a",$.proxy(this.select,this));
div.find(".handle").click($.proxy(this.click,this));
// Add it to the DOM
$(element).after(div);
this.Container = div;
// See if this select is disabled
if (this.Element.prop("disabled")) {
this.Container.addClass("disabled");
}
// Observe focus, blur, and keydown on the hidden element.
this.Element.focus($.proxy(this.focus,this));
this.Element.blur($.proxy(this.blur,this));
this.Element.keydown($.proxy(this.keydown,this));
// Custom event to force open lists closed when another select opens.
this.Element.on("closeNow",$.proxy(this.close,this));
// Cleanup
tester.remove();
},
add: function(value,text) {
// Add to the actual select.
op = new Option(text,value);
this.Element[0].options[this.Element[0].options.length] = op;
// Add to the styled select.
a = $('
' + text + '');
a.attr("data-value",value);
this.Container.find(".select_options").append(a);
// Test the size of this new element and see if we need to increase the width.
tester = $("
").css({ position: "absolute", top: "-1000px", left: "-1000px", "font-size": "11px", "font-family": "Helvetica", "white-space": "nowrap" });
$("body").append(tester);
tester.html(text);
width = tester.width();
span = this.Container.find("span");
// If we're in a section cell we may need to be smaller.
if (this.Element.parent().get(0).tagName.toLowerCase() == "section") {
sectionwidth = this.Element.parent().width();
if (sectionwidth < (width + 56)) {
width = sectionwidth - 80;
span.css({ overflow: "hidden", padding: "0 0 0 10px" });
}
}
if (width > span.width()) {
span.css({ width: (width + 10) + "px" });
this.Container.find(".select_options").css({ width: (width + 64) + "px" });
}
tester.remove();
},
blur: function() {
this.Container.removeClass("focused");
},
click: function() {
if (this.Container.hasClass("disabled")) {
return false;
}
if (!this.Open) {
// Tooltips and menus sometimes show over the dropdown when using TinyMCE 4
try {
tinyMCE.ui.FloatPanel.hideAll();
} catch (err) {}
$("select").not(this.Element).trigger("closeNow");
this.Element.focus();
// Check if we're in a sortable row and disable it's relative position if so.
li = this.Element.parent("li");
if (li.length) {
if (li.css("position") == "relative") {
li.css("position","");
this.WasRelative = true;
}
}
dList = this.Container.find(".select_options");
this.Open = true;
dList.show();
this.Container.addClass("open");
this.BoundWindowClick = $.proxy(this.close,this);
$("body").click(this.BoundWindowClick);
// Find out if we're in a dialog and have an overflow
overflow = this.Container.parents(".overflow");
if (overflow.length) {
if (this.Container.parents(".callout_fields").length) {
// WebKit needs fixin.
if ($.browser.webkit) {
dList.css("marginTop",-1 * $(".callout_fields").scrollTop() + "px");
}
// When someone scrolls the overflow, close the select or the dropdown will detach.
this.BoundCalloutResourcesScroll = $.proxy(this.close,this);
setTimeout($.proxy(function() { $(".callout_fields").scroll(this.BoundCalloutResourcesScroll); },this),500);
} else {
// WebKit needs fixin.
if ($.browser.webkit) {
dList.css("marginTop",-1 * overflow.scrollTop() + "px");
}
// When someone scrolls the overflow, close the select or the dropdown will detach.
this.BoundOverflowScroll = $.proxy(this.close,this);
setTimeout($.proxy(function() { overflow.scroll(this.BoundOverflowScroll); },this),500);
}
// If the options would hang off the window, shrink the options menu down
var offset = dList.offset().top - window.scrollY + dList.height();
var difference = offset - BigTree.WindowHeight();
if (difference > 0) {
dList.css({ height: dList.height() - difference - 5 + "px" });
}
} else {
// If the select drops below the visible area, scroll down a bit.
dOffset = dList.offset().top + dList.height();
toScroll = dOffset - window.scrollY - $(window).height();
if (toScroll > 0) {
$('html, body').animate({ scrollTop: window.scrollY + toScroll + 5 }, 200);
}
}
// A
} else {
this.close();
}
return false;
},
close: function() {
this.Open = false;
this.Container.removeClass("open");
this.Container.find(".select_options").hide();
$("body").unbind("click",this.BoundWindowClick);
if (this.BoundOverflowScroll) {
this.Container.parents(".overflow").unbind("scroll",this.BoundOverflowScroll);
this.BoundOverflowScroll = false;
}
if (this.BoundCalloutResourcesScroll) {
$("#callout_resources").unbind("scroll",this.BoundCalloutResourcesScroll);
this.BoundCalloutResourcesScroll = false;
}
// Reset relative position if applicable
if (this.WasRelative) {
this.Element.parent("li").css("position", "relative");
this.WasRelative = false;
}
return false;
},
disable: function() {
this.Element.prop("disabled",true);
this.Container.addClass("disabled");
},
enable: function() {
this.Element.removeAttr("disabled");
this.Container.removeClass("disabled");
},
focus: function() {
this.Container.addClass("focused");
},
keydown: function(ev) {
// If a modifier has been pressed, ignore this.
if (ev.ctrlKey || ev.altKey || ev.metaKey) {
return true;
}
if (ev.keyCode == 13 && this.Open) {
this.close();
return false;
}
// The original select element that's hidden off screen.
el = this.Element.get(0);
// Get the original index and save it so we know when it changes.
index = el.selectedIndex;
oindex = index;
// Up or left arrow pressed
if (ev.keyCode == 38 || ev.keyCode == 37) {
index--;
if (index < 0) {
index = 0;
}
// Down or right arrow pressed
} else if (ev.keyCode == 40 || ev.keyCode == 39) {
index++;
if (index == el.options.length) {
index--;
}
// A letter key was pressed
} else if (ev.keyCode > 64 && ev.keyCode < 91) {
spot = ev.keyCode - 65;
letters = "abcdefghijklmnopqrstuvwxyz";
letter = letters[spot];
// Go through all the options in the select to see if any of them start with the letter that was pressed.
for (i = index + 1; i < el.options.length; i++) {
text = el.options[i].text;
if (text) {
first_letter = text[0].toLowerCase();
if (first_letter == letter) {
index = i;
break;
}
}
}
// If we were already on that letter, find the next one with that same letter.
if (index == oindex) {
for (i = 0; i < oindex; i++) {
text = el.options[i].text;
if (text) {
first_letter = text[0].toLowerCase();
if (first_letter == letter) {
index = i;
break;
}
}
}
}
}
// We found a new element, fire an event saying the select changed and update the description in the styled dropdown.
if (index != oindex) {
// Update the new selected option
select_options_container = this.Container.find(".select_options");
ops = select_options_container.find("a");
ops.eq(oindex).removeClass("active");
ops.eq(index).addClass("active");
// Find out if we can see this option
selected_y = (index + 1) * 25;
if (selected_y >= select_options_container.height() + select_options_container.scrollTop()) {
select_options_container.animate({ scrollTop: selected_y - select_options_container.height() + "px" }, 250);
} else if (selected_y <= select_options_container.scrollTop()) {
select_options_container.animate({ scrollTop: selected_y - 25 + "px" }, 250);
}
// Firefox wants to handle this change itself, so we'll give it a shot until they fix their browser engine.
if ($.browser.mozilla && ev.keyCode > 36 && ev.keyCode < 41) {
} else {
el.selectedIndex = index;
}
this.Container.find("span").html('
' + el.options[index].text);
this.Element.trigger("change", { value: el.options[index].value, text: el.options[index].text });
return false;
}
// Stop the event if it's not a tab.
if (ev.keyCode != 9) {
return false;
}
},
remove: function(value) {
// Remove it from the actual select.
ops = this.Element.find("option");
for (i = 0; i < ops.length; i++) {
if (ops.eq(i).val() == value) {
ops.eq(i).remove();
}
}
// Remove it from the styled one.
as = this.Container.find(".select_options a");
for (i = 0; i < as.length; i++) {
if (as.eq(i).attr("data-value") == value) {
text_was = as.eq(i).html();
as.eq(i).remove();
}
}
// If the current selected state is the value we're removing, switch to the first available.
sel = this.Container.find("span").eq(0);
select_options = this.Container.find(".select_options a");
if (select_options.length > 0) {
if (sel.html() == '
' + text_was) {
sel.html('
' + select_options.eq(0).html());
}
} else {
sel.html('
');
}
},
select: function(event) {
el = $(event.target);
// Set the