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

Creating popover component

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-05-04 11:59:51 -03:00 committed by Erik Ziegler
parent 6df48a1d2b
commit 661f5b1e4c
12 changed files with 170 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Packages/ohif-core/client/components/base/index.js
View File

@ -19,6 +19,7 @@ import './mixins/group.js';
import './mixins/groupRadio.js';
import './mixins/input.js';
import './mixins/link.js';
import './mixins/popover.js';
import './mixins/schemaData.js';
import './mixins/select.js';
import './mixins/select2.js';

40
Packages/ohif-core/client/components/base/mixins/popover.js Normal file
View File

@ -0,0 +1,40 @@
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core';
/*
* popover: controls a popover
*/
OHIF.mixins.popover = new OHIF.Mixin({
dependencies: 'form',
composition: {
onRendered() {
const instance = Template.instance();
instance.$form = instance.$('form').first();
instance.$form.find(':input:first').focus();
},
events: {
'blur form'(event, instance) {
Meteor.defer(() => {
const $focus = $(':focus');
if (!$.contains(instance.$form[0], $focus[0])) {
instance.data.promiseReject();
}
});
},
'click .btn-cancel'(event, instance) {
event.stopPropagation();
instance.data.promiseReject();
},
'click .btn-confirm'(event, instance) {
event.stopPropagation();
const form = instance.$('form').data('component');
instance.data.promiseResolve(form.value());
}
}
}
});

2
Packages/ohif-core/client/components/bootstrap/index.js
View File

@ -31,3 +31,5 @@ import './input/radio.html';
import './input/range.html';
import './input/select.html';
import './input/text.html';
import './popover/form.html';

17
Packages/ohif-core/client/components/bootstrap/popover/form.html Normal file
View File

@ -0,0 +1,17 @@
<template name="popoverForm">
{{#form (extend this mixins='popover' hideValidationBox=true)}}
{{#if this.message}}
<p>{{this.message}}</p>
{{/if}}
{{>UI.contentBlock}}
<div class="popover-form-buttons {{#if eq this.placement 'left'}}text-right{{/if}}">
{{#button action='cancel'
class=(concat 'btn btn-cancel ' (choose this.cancelClass 'btn-secondary'))
tagAttributes=(extend this.tagAttributes data-dismiss='modal')
}}{{choose this.cancelLabel 'Cancel'}}{{/button}}
{{#button action='confirm'
class=(concat 'btn btn-confirm ' (choose this.confirmClass 'btn-primary'))
}}{{choose this.confirmLabel 'Confirm'}}{{/button}}
</div>
{{/form}}
</template>

1
Packages/ohif-core/client/ui/index.js
View File

@ -6,5 +6,6 @@ import './dialog/unsavedChangesDialog.js';
import './draggable/draggable.js';
import './dropdown/class.js';
import './dropdown/display.js';
import './popover/display.js';
import './resizable/resizable.js';
import './unsavedChanges/unsavedChanges.js';

82
Packages/ohif-core/client/ui/popover/display.js Normal file
View File

@ -0,0 +1,82 @@
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';
import { OHIF } from 'meteor/ohif:core';
OHIF.ui.showPopover = (templateName, popoverData, options={}) => {
// Check if the given template exists
const template = Template[templateName];
if (!template) {
throw {
name: 'TEMPLATE_NOT_FOUND',
message: `Template ${templateName} not found.`
};
}
let promise;
let templateData;
if (popoverData && popoverData.promise instanceof Promise) {
// Use the given promise to control the modal
promise = popoverData.promise;
templateData = popoverData;
} else {
// Create a new promise to control the modal and store its resolve and reject callbacks
let promiseResolve;
let promiseReject;
promise = new Promise((resolve, reject) => {
promiseResolve = resolve;
promiseReject = reject;
});
// Render the dialog with the given template passing the promise object and callbacks
templateData = Object.assign({}, popoverData, {
promise,
promiseResolve,
promiseReject
});
}
const { element, event } = options;
const $element = $(element || event.currentTarget);
const defaults = {
content: '',
html: true,
trigger: 'manual',
placement: 'auto',
delay: {
show: 300,
hide: 300
}
};
const popoverOptions = Object.assign({} , defaults, options);
popoverOptions.content = Blaze.toHTMLWithData(template, popoverData);
$element.popover(popoverOptions);
$element.one('shown.bs.popover', function(event) {
const popoverId = $element.attr('aria-describedby');
const popover = document.getElementById(popoverId);
const $popover = $(popover);
const $popoverContent = $popover.find('.popover-content');
const dismissPopover = () => $element.popover('hide');
$popoverContent.html('');
const view = Blaze.renderWithData(template, templateData, $popoverContent[0]);
$element.one('hidden.bs.popover', () => {
Blaze.remove(view);
if (popoverOptions.trigger !== 'manual') {
$element.popover('destroy');
}
});
promise.then(dismissPopover).catch(dismissPopover);
});
if (popoverOptions.trigger === 'manual') {
$element.popover('show');
}
return promise;
};

3
Packages/ohif-hotkeys/client/components/confirmReplacementPopover.html Normal file
View File

@ -0,0 +1,3 @@
<template name="hotkeysConfirmReplacementPopover">
</template>

21
Packages/ohif-hotkeys/client/components/form.html
View File

@ -13,27 +13,8 @@
{{/let}}
</div>
<div class="form-buttons clearfix">
{{#button class='btn btn-danger pull-left m-r-1' action='resetDefaults'}}Reset to Defaults{{/button}}
{{#button class='btn btn-danger pull-left' action='resetDefaults'}}Reset to Defaults{{/button}}
{{#button class='btn btn-primary pull-right' action='save'}}Save{{/button}}
</div>
{{/form}}
</template>
<template name="hotkeysFormTable">
<table class="full-width">
<thead>
<tr>
<th class="text-right p-r-1">Function</th>
<th>Shortcut</th>
</tr>
</thead>
<tbody>
{{#each input in this.inputs}}
<tr>
<td class="text-right p-r-1">{{input.label}}</td>
<td width="200">{{>inputText (extend class='hotkey text-center' key=input.key value=input.value)}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>

5
Packages/ohif-hotkeys/client/components/form.js
View File

@ -1,4 +1,3 @@
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import { _ } from 'meteor/underscore';
@ -133,8 +132,8 @@ Template.hotkeysForm.helpers({
const right = list;
return {
left,
right
left,
right
};
}
});

18
Packages/ohif-hotkeys/client/components/formTable.html Normal file
View File

@ -0,0 +1,18 @@
<template name="hotkeysFormTable">
<table class="full-width">
<thead>
<tr>
<th class="text-right p-r-1">Function</th>
<th>Shortcut</th>
</tr>
</thead>
<tbody>
{{#each input in this.inputs}}
<tr>
<td class="text-right p-r-1">{{input.label}}</td>
<td width="200">{{>inputText (extend class='hotkey text-center' key=input.key value=input.value)}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>

2
Packages/ohif-hotkeys/client/components/index.js
View File

@ -1,2 +1,4 @@
import './confirmReplacementPopover.html';
import './form.html';
import './form.js';
import './formTable.html';

2
Packages/ohif-viewerbase/client/components/viewer/windowLevelPresets/form.html
View File

@ -23,7 +23,7 @@
</table>
</div>
<div class="form-buttons clearfix">
{{#button class='btn btn-danger pull-left m-r-1' action='resetDefaults'}}Reset to Defaults{{/button}}
{{#button class='btn btn-danger pull-left' action='resetDefaults'}}Reset to Defaults{{/button}}
{{#button class='btn btn-primary pull-right' action='save'}}Save{{/button}}
</div>
{{/form}}