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

PWV-15: Removing themeSelectorModal from DOM

Browse Source
This commit is contained in:
Bruno Alves de Faria committed 2017-03-21 10:16:46 -03:00
1 parent 0153354004
commit 02a97d4aa6
7 files changed
+56 -49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html
+15 -26
View File
@@ -1,28 +1,17 @@
<template name="themeSelectorModal">
<div class="modal" id="themeSelectorModal" tabindex="-1" role="dialog" aria-labelledby="themeSelectorModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="themeSelectorModalLabel"><i class="fa fa-sliders"></i> Themes</h4>
</div>
<div class="modal-body">
<ul class="theme-list text-center">
{{#each theme in themes}}
<li class="text-center preview-theme {{addClassIfSelected theme}}" data-theme="{{theme}}">
<div class="icon-wrapper">
<span class="theme-icon-{{theme}}"></span>
</div>
<h4 class="theme-title">{{ucFirst theme}}</h4>
</li>
{{/each}}
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default js-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary js-apply" data-dismiss="modal">Apply theme</button>
</div>
</div>
</div>
</div>
{{#dialogForm (extend this
id='themeSelectorModal' dialogClass='modal-lg' confirmLabel='Apply theme'
title='Themes' titleIcon='fa fa-sliders'
)}}
<ul class="theme-list text-center">
{{#each theme in themes}}
<li class="text-center preview-theme {{printClassIfSelected theme}}" data-theme="{{theme}}">
<div class="icon-wrapper">
<span class="theme-icon-{{theme}}"></span>
</div>
<h4 class="theme-title">{{ucFirst theme}}</h4>
</li>
{{/each}}
</ul>
{{/dialogForm}}
</template>
Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js
+25 -14
View File
@@ -1,6 +1,9 @@
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
const DEFAULT_THEME = 'tide';
const getActualTheme = () => sessionStorage.getItem('theme');
const getCurrentTheme = () => sessionStorage.getItem('theme');
const setActualTheme = theme => sessionStorage.setItem('theme', theme);
@@ -10,7 +13,7 @@ const removeThemesFromBody = () => {
const classList = document.body.classList;
for (let i = classList.length - 1; i >= 0; i--) {
if(classList[i].search('theme-') !== -1) {
if (classList[i].search('theme-') !== -1) {
document.body.classList.remove(classList[i]);
}
}
@@ -18,29 +21,32 @@ const removeThemesFromBody = () => {
Template.themeSelectorModal.onCreated(() => {
const instance = Template.instance();
let actualTheme = getActualTheme();
if(!actualTheme) {
actualTheme = DEFAULT_THEME;
setActualTheme(actualTheme);
let currentTheme = getCurrentTheme();
if (!currentTheme) {
currentTheme = DEFAULT_THEME;
setActualTheme(currentTheme);
}
instance.state = new ReactiveDict();
instance.state.set('selectedTheme', actualTheme);
instance.state.set('selectedTheme', currentTheme);
addThemeToBody(actualTheme);
addThemeToBody(currentTheme);
instance.container = {
actualTheme,
currentTheme,
previewTheme(theme, state) {
state.set('selectedTheme', theme);
removeThemesFromBody();
addThemeToBody(theme);
},
applyTheme(state) {
setActualTheme(state.get('selectedTheme'));
},
resetState(state) {
const theme = getActualTheme();
const theme = getCurrentTheme();
state.set('selectedTheme', theme);
removeThemesFromBody();
@@ -48,14 +54,19 @@ Template.themeSelectorModal.onCreated(() => {
}
};
const { promise } = instance.data;
promise.then(() => instance.container.applyTheme(instance.state));
promise.catch(() => instance.container.resetState(instance.state));
});
Template.themeSelectorModal.helpers({
themes: [ 'crickets', 'honeycomb', 'mint', 'overcast', 'quartz', 'tide', 'tigerlily' ],
ucFirst(text) {
return text.charAt(0).toUpperCase() + text.slice(1);
},
addClassIfSelected(theme) {
printClassIfSelected(theme) {
const instance = Template.instance();
return theme === instance.state.get('selectedTheme') ? 'selected' : '';
@@ -63,7 +74,7 @@ Template.themeSelectorModal.helpers({
});
Template.themeSelectorModal.events({
'click .js-cancel, click .close': (event, instance) => instance.container.resetState(instance.state),
'click .js-apply': (event, instance) => instance.container.applyTheme(instance.state),
'click .preview-theme': (event, instance) => instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state)
'click .preview-theme'(event, instance) {
instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state);
}
});