_tuneCSS: function() {
var self = this;
// only need to do this once
if (!this._paddingHeightsSet) {
doCalcOnVisibleNodeClone({
el: this.$el,
css: {"width": "500px"},
classes: browserDetection.isIPad() ? "ipad" : "",
callback: function($el) {
self.searchBarHeight = $el.find(".m-Multiselect-searchContainer").outerHeight();
self.buttonsContainerHeight = $el.find(".m-Multiselect-buttonContainer").outerHeight();
}
});
this._paddingHeightsSet = true;
}
this.$el.find(".j-available-list").css({
"height": "100%",
"padding-top": this.searchBarHeight,
"padding-bottom": this.buttonsContainerHeight
});
},
getModelForRendering: function() {
return {
label: this.label,
isIPad: browserDetection.isIPad(),
disabled: this.model.get("disabled"),
i18n: i18n
}
},
onMousedown: function() {
if (!browserDetection.isIPad()) {
this.preventBlur = true;
if (!this.model.get("focused")) {
this.$el.find("input").focus();
}
}
},
setBulkSelectionText: function() {
if (!this.$el.is(":visible")) {
//We can not measure bulk buttons width
//so no text will be changed
return;
}
var componentWidth = this.$el.outerWidth();
if (componentWidth === this._componentWidth) {
//no need to check text since size was not changed since last check
return;
} else {
this._componentWidth = componentWidth;
}
var $bulkButtonsBar = this.$el.find(".j-bulk-buttons"),
bulkButtonsBarWidth = $bulkButtonsBar.outerWidth();
doCalcOnVisibleNodeClone({
el: $bulkButtonsBar,
css: {
"left" : (0 - (bulkButtonsBarWidth * 2)) + "px",
"width" : bulkButtonsBarWidth + "px"
},
classes: browserDetection.isIPad() ? "ipad" : "", //add additional classes to parent container of cloned node
alwaysClone: true,
callback: function($clone) {
_.each(BUTTON_TESTS, function(buttonTest) {
var widthOk = false;
_.each(buttonTest.strings, function(buttonString) {
if (widthOk) {
return;
}
var $button = $clone.find(buttonTest.selector),
$buttonText = $button.find(".j-button-text")
.text(buttonString),
btnRight = $button[0].getBoundingClientRect().right,
txtRight = $buttonText[0].getBoundingClientRect().right;
if (btnRight - txtRight >= 3 || buttonString === "") {
widthOk = true;
$bulkButtonsBar.find(buttonTest.selector + " .j-button-text")
.text(buttonString);
}
});
});
}
});
},
render: function() {
var singleSelect = $(this.template({
label: this.label,
isIPad: browserDetection.isIPad(),
value: this.model.get("value").label,
expanded: this.model.get("expanded"),
i18n: i18n
}));
this.renderListView();
this.$el.empty();
this.$el.append(singleSelect);
return this;
},
setScrolling: function(scrolling, options) {
this.scrolling = scrolling;
this.$iframe
.attr("scrolling", this.scrolling ? "yes" : "no");
//if this code will be executed on desktop browser
//additional unnecessary scroll will be shown.
//TODO: Need to think how to replace with feature detection.
if (browserDetection.isIPad()) {
this.scrolling
? this.$el.addClass("touchScroll")
: this.$el.removeClass("touchScroll");
}
if (!options || !options.silent) {
/**
* @event WebPageView#change:scrolling
*/
this.trigger("change:scrolling", this, this.scrolling);
}
},
onMousedown: function() {
if (!browserDetection.isIPad()) {
this.preventBlur = true;
}
},
_calcItemHeight: function() {
var self = this;
//backup original values
this._model = this.model;
this._lazy = this.lazy;
this._visibility = this.$el.css("visibility");
this._display = this.$el.css("display");
//create model with just single item
this.model = new ScalableListModel({
getData: function() {
var deferred = new $.Deferred();
deferred.resolve({
total: 1,
data: [
{value: "test value", label: "test label"}
]
});
return deferred;
}
});
//make element visible for measurements
//but hidden for user
this.$el.css({
"visibility": "hidden",
"display": "block"
});
this.model.once("change", this.onModelChange, this);
this.renderData();
//render list copy to a body so it's visible and
//we can calculate height
doCalcOnVisibleNodeClone({
el: this.$el,
css: {"width": "100px"},
classes: browserDetection.isIPad() ? "ipad" : "",
callback: function($el) {
//calculate itemHeight
self.itemHeight = $el.find("li").outerHeight(true);
//Calibrate canvas chunk height so even number of items will fit into one chunk
self.itemsPerChunk = Math.floor(self.defaultChunkHeight / self.itemHeight);
self.chunkHeight = self.itemsPerChunk * self.itemHeight;
}
});
//clean element
this.$el.empty().css({
"visibility": this._visibility,
"display": this._display
});
delete this._visibility;
delete this._display;
//restore original variables;
this.totalItems = undefined;
this.$firstViewChunk = undefined;
this.model = this._model;
delete this._model;
this.lazy = this._lazy;
this._lazy && delete this._lazy;
},