TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving bounded utility function and select2 component

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-07-25 18:20:55 -03:00
parent 2604e227c0
commit 88df0e54f2
3 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Packages/ohif-core/client/components/base/mixins/select2.js
View File

@ -163,6 +163,11 @@ OHIF.mixins.select2 = new OHIF.Mixin({
const { minimumResultsForSearch } = instance.data.options; const { minimumResultsForSearch } = instance.data.options;
if (minimumResultsForSearch === Infinity || minimumResultsForSearch === -1) return; if (minimumResultsForSearch === Infinity || minimumResultsForSearch === -1) return;
const $container = instance.getDropdownContainerElement(); const $container = instance.getDropdownContainerElement();
if (!instance.data.wrapText) {
$container.addClass('select2-container-nowrap');
}
const $searchInput = $container.find('.select2-search__field'); const $searchInput = $container.find('.select2-search__field');
$searchInput.on('keydown.focusOnEsc', event => { $searchInput.on('keydown.focusOnEsc', event => {
if (event.which === 27) { if (event.which === 27) {

57
Packages/ohif-core/client/ui/bounded/bounded.js
View File

@ -37,13 +37,17 @@ class Bounded {
// Set or change the instance options // Set or change the instance options
options(options={}) { options(options={}) {
// Process the given options and store it in the instance // Process the given options and store it in the instance
const { boundingElement, allowResizing } = options; const { boundingElement, positionElement, dimensionElement, allowResizing } = options;
this.positionElement = positionElement || this.element;
this.$positionElement = $(this.positionElement);
this.dimensionElement = dimensionElement || this.element;
this.$dimensionElement = $(this.dimensionElement);
this.boundingElement = boundingElement; this.boundingElement = boundingElement;
this.$boundingElement = $(this.boundingElement); this.$boundingElement = $(this.boundingElement);
this.allowResizing = allowResizing; this.allowResizing = allowResizing;
// Check for fixed positioning // Check for fixed positioning
if (this.$element.css('position') === 'fixed') { if (this.$positionElement.css('position') === 'fixed') {
this.boundingElement = window; this.boundingElement = window;
} }
@ -89,12 +93,12 @@ class Bounded {
this.$element.removeClass('bounded'); this.$element.removeClass('bounded');
} }
static spatialInfo(element) { static spatialInfo(positionElement, dimensionElement) {
// Create the result object // Create the result object
const result = {}; const result = {};
// Check if the element is the window // Check if the element is the window
if (!element || element === window) { if (!dimensionElement || dimensionElement === window) {
const $window = $(window); const $window = $(window);
const width = $window.outerWidth(); const width = $window.outerWidth();
const height = $window.outerHeight(); const height = $window.outerHeight();
@ -108,31 +112,22 @@ class Bounded {
}; };
} }
// Get the jQuery object for the element // Get the jQuery object for the elements
const $element = $(element); const $dimensionElement = $(dimensionElement);
const $positionElement = $(positionElement);
// Get the element style
const style = element.style;
// Get the integer numbers for element's width // Get the integer numbers for element's width
if (style.width && style.width.indexOf('px') > -1) { result.width = $dimensionElement.outerWidth();
result.width = parseInt(style.width);
} else {
result.width = $element.outerWidth();
}
// Get the integer numbers for element's height // Get the integer numbers for element's height
if (style.height && style.height.indexOf('px') > -1) { result.height = $dimensionElement.outerHeight();
result.height = parseInt(style.height);
} else {
result.height = $element.outerHeight();
}
// Get the position property based on the element position CSS attribute // Get the position property based on the element position CSS attribute
const positionProperty = $element.css('position') === 'fixed' ? 'position' : 'offset'; const elementPosition = $positionElement.css('position');
const positionProperty = elementPosition === 'fixed' ? 'position' : 'offset';
// Get the element's start position // Get the element's start position
const position = $element[positionProperty](); const position = $positionElement[positionProperty]();
result.x0 = position.left; result.x0 = position.left;
result.y0 = position.top; result.y0 = position.top;
@ -148,32 +143,32 @@ class Bounded {
defineEventHandlers() { defineEventHandlers() {
this.spatialChangedHandler = event => { this.spatialChangedHandler = event => {
// Get the spatial information for element and its bounding element // Get the spatial information for element and its bounding element
const elementInfo = Bounded.spatialInfo(this.element); const elementInfo = Bounded.spatialInfo(this.positionElement, this.dimensionElement);
const boundingInfo = Bounded.spatialInfo(this.boundingElement); const boundingInfo = Bounded.spatialInfo(this.boundingElement, this.boundingElement);
// Fix element's x positioning and width // Fix element's x positioning and width
if (this.allowResizing && elementInfo.width > boundingInfo.width) { if (this.allowResizing && elementInfo.width > boundingInfo.width) {
this.$element.width(boundingInfo.width); this.$dimensionElement.width(boundingInfo.width);
this.$element.css('left', boundingInfo.x0); this.$positionElement.css('left', boundingInfo.x0);
this.setBoundedFlag(true); this.setBoundedFlag(true);
} else if (elementInfo.x0 < boundingInfo.x0) { } else if (elementInfo.x0 < boundingInfo.x0) {
this.$element.css('left', boundingInfo.x0); this.$positionElement.css('left', boundingInfo.x0);
this.setBoundedFlag(true); this.setBoundedFlag(true);
} else if (elementInfo.x1 > boundingInfo.x1) { } else if (elementInfo.x1 > boundingInfo.x1) {
this.$element.css('left', boundingInfo.x1 - elementInfo.width); this.$positionElement.css('left', boundingInfo.x1 - elementInfo.width);
this.setBoundedFlag(true); this.setBoundedFlag(true);
} }
// Fix element's y positioning and height // Fix element's y positioning and height
if (this.allowResizing && elementInfo.height > boundingInfo.height) { if (this.allowResizing && elementInfo.height > boundingInfo.height) {
this.$element.height(boundingInfo.height); this.$dimensionElement.height(boundingInfo.height);
this.$element.css('top', boundingInfo.y0); this.$positionElement.css('top', boundingInfo.y0);
this.setBoundedFlag(true); this.setBoundedFlag(true);
} else if (elementInfo.y0 < boundingInfo.y0) { } else if (elementInfo.y0 < boundingInfo.y0) {
this.$element.css('top', boundingInfo.y0); this.$positionElement.css('top', boundingInfo.y0);
this.setBoundedFlag(true); this.setBoundedFlag(true);
} else if (elementInfo.y1 > boundingInfo.y1) { } else if (elementInfo.y1 > boundingInfo.y1) {
this.$element.css('top', boundingInfo.y1 - elementInfo.height); this.$positionElement.css('top', boundingInfo.y1 - elementInfo.height);
this.setBoundedFlag(true); this.setBoundedFlag(true);
} }
}; };

11
Packages/ohif-design/styles/common/global.styl
View File

@ -60,6 +60,17 @@ label.form-group
line-height: 20px line-height: 20px
width: 12px width: 12px
.select2-container-nowrap
.select2-dropdown
display: table
.select2-results__options li
white-space: nowrap
body .select2-container--default .select2-results>.select2-results__options
max-height: 320px
.center-table .center-table
display: table display: table
margin-left: auto margin-left: auto