From d9475db1ff6f83c720faad3c37aa976d5db68db8 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Tue, 30 May 2017 14:38:11 -0300 Subject: [PATCH] Fixing select2 smaller version styles and focus/blur behavior --- LesionTracker/.meteor/packages | 1 - OHIFViewer/.meteor/versions | 2 +- .../client/components/base/mixins/group.js | 3 +- .../client/components/base/mixins/select2.js | 44 ++++++++++++++++++- .../ohif-design/styles/common/global.styl | 6 +++ Packages/ohif-study-list/package.js | 2 +- 6 files changed, 53 insertions(+), 5 deletions(-) diff --git a/LesionTracker/.meteor/packages b/LesionTracker/.meteor/packages index f92a33eb1..4892d07cf 100644 --- a/LesionTracker/.meteor/packages +++ b/LesionTracker/.meteor/packages @@ -60,7 +60,6 @@ anti:gagarin@=0.4.11 check@1.2.4 aldeed:template-extension@4.0.0 zuuk:stale-session -gilbertwat:bootstrap3-daterangepicker email@1.1.18 peppelg:bootstrap-3-modal simple:reactive-method diff --git a/OHIFViewer/.meteor/versions b/OHIFViewer/.meteor/versions index bcaedfb10..36aaba3f1 100644 --- a/OHIFViewer/.meteor/versions +++ b/OHIFViewer/.meteor/versions @@ -22,6 +22,7 @@ caching-html-compiler@1.0.7 callback-hook@1.0.10 check@1.2.4 coffeescript@1.11.1_4 +dangrossman:bootstrap-daterangepicker@2.1.13 ddp@1.2.5 ddp-client@1.3.2 ddp-common@1.2.8 @@ -35,7 +36,6 @@ ejson@1.0.13 fastclick@1.0.13 fortawesome:fontawesome@4.7.0 geojson-utils@1.0.10 -gilbertwat:bootstrap3-daterangepicker@1.3.21_1 hot-code-push@1.0.4 html-tools@1.0.11 htmljs@1.0.11 diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js index 73a30e673..0b7d4c5aa 100644 --- a/Packages/ohif-core/client/components/base/mixins/group.js +++ b/Packages/ohif-core/client/components/base/mixins/group.js @@ -113,7 +113,8 @@ OHIF.mixins.group = new OHIF.Mixin({ } // Reset the validation - component.schema.resetValidation(); + const schema = component.isForm ? component.schema : component.getForm().schema; + schema.resetValidation(); // Validate the component itself if it has a key if (instance.data.pathKey && !validateSelf()) { diff --git a/Packages/ohif-core/client/components/base/mixins/select2.js b/Packages/ohif-core/client/components/base/mixins/select2.js index 3f316d9ba..5e0d8208c 100644 --- a/Packages/ohif-core/client/components/base/mixins/select2.js +++ b/Packages/ohif-core/client/components/base/mixins/select2.js @@ -17,6 +17,13 @@ OHIF.mixins.select2 = new OHIF.Mixin({ // Set the custom focus flag instance.component.isCustomFocus = true; + // Utility function to get the dropdown jQuery element + instance.getDropdownContainerElement = () => { + const $select2 = instance.component.$element.nextAll('.select2:first'); + const containerId = $select2.find('.select2-selection').attr('aria-owns'); + return $(`#${containerId}`).closest('.select2-container'); + }; + // Check if this select will include a placeholder const placeholder = instance.data.options && instance.data.options.placeholder; if (placeholder) { @@ -69,8 +76,9 @@ OHIF.mixins.select2 = new OHIF.Mixin({ // Get the focusable elements const elements = []; + const $select2 = component.$element.nextAll('.select2:first'); elements.push(component.$element[0]); - elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]); + elements.push($select2.find('.select2-selection')[0]); // Attach focus and blur handlers to focusable elements $(elements).on('focus', event => { @@ -84,6 +92,19 @@ OHIF.mixins.select2 = new OHIF.Mixin({ component.toggleMessage(false); } }); + + // Redirect keydown events from input to the select2 selection handler + component.$element.on('keydown ', event => { + event.preventDefault(); + $select2.find('.select2-selection').trigger(event); + }); + + // Keep focus on element if ESC was pressed + $select2.on('keydown ', event => { + if (event.which === 27) { + instance.component.$element.focus(); + } + }); }; instance.autorun(() => { @@ -106,6 +127,27 @@ OHIF.mixins.select2 = new OHIF.Mixin({ }); }, + events: { + // Focus element when selecting a value + 'select2:select'(event, instance) { + instance.component.$element.focus(); + }, + + // Focus the element when closing the dropdown container using ESC key + 'select2:open'(event, instance) { + const { minimumResultsForSearch } = instance.data.options; + if (minimumResultsForSearch === Infinity || minimumResultsForSearch === -1) return; + const $container = instance.getDropdownContainerElement(); + const $searchInput = $container.find('.select2-search__field'); + $searchInput.on('keydown.focusOnEsc', event => { + if (event.which === 27) { + $searchInput.off('keydown.focusOnEsc'); + instance.component.$element.focus(); + } + }); + } + }, + onDestroyed() { const instance = Template.instance(); const component = instance.component; diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl index abdc97ae8..b293dc4fe 100644 --- a/Packages/ohif-design/styles/common/global.styl +++ b/Packages/ohif-design/styles/common/global.styl @@ -54,6 +54,12 @@ label.form-group height: 20px width: 12px + &:after + font-size: 12px + height: 20px + line-height: 20px + width: 12px + .center-table display: table margin-left: auto diff --git a/Packages/ohif-study-list/package.js b/Packages/ohif-study-list/package.js index 820ed2336..fb4d3a6e0 100644 --- a/Packages/ohif-study-list/package.js +++ b/Packages/ohif-study-list/package.js @@ -25,7 +25,7 @@ Package.onUse(function(api) { // Note: MomentJS appears to be required for Bootstrap3 Datepicker, but not a dependency for some reason api.use('momentjs:moment'); - api.use('gilbertwat:bootstrap3-daterangepicker'); + api.use('dangrossman:bootstrap-daterangepicker@2.1.13'); // Our custom packages api.use('ohif:design');