Skip to content

GitLab

Commit d2d6e772 authored by Andreas Gärtner's avatar Andreas Gärtner
Browse files

Task #15893: Add resize components to freetext answer & detail panel. 

Fix also bug concerning mouse scrolling, when returning from freetext
answer panel to showcase question panel.
parent 86a65cac
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 27 deletions
src/main/webapp/app/controller/Application.js
View file @ d2d6e772
......@@ -26,9 +26,10 @@ Ext.define("ARSnova.controller.Application", {
launch: function () {
var me = this;
this.hrefPanelActive = false;
me.hrefPanelActive = false;
me.initializeOnClickOverride();
me.initializeAdvancedScrolling();
ARSnova.app.globalZoomLevel = 100;
},
/**
......@@ -38,6 +39,10 @@ Ext.define("ARSnova.controller.Application", {
this.hrefPanelActive = !this.hrefPanelActive;
},
setGlobalZoomLevel: function (zoomLevel) {
ARSnova.app.globalZoomLevel = zoomLevel;
},
/**
* initializes mathjax if feature is activated in configuration
*/
......
src/main/webapp/app/view/FreetextAnswerPanel.js
View file @ d2d6e772
......@@ -240,35 +240,88 @@ Ext.define('ARSnova.view.FreetextAnswerPanel', {
hidden: true
});
this.add([this.toolbar,
this.countdownTimer, {
xtype: 'formpanel',
style: 'margin-top: 15px',
cls: 'roundedCorners',
height: '100%',
width: '100%',
flex: 1,
scrollable: null,
items: [
questionPanel,
this.noAnswersLabel,
this.freetextAnswerList
]
this.zoomButton = Ext.create('Ext.Button', {
ui: 'action',
hidden: true,
cls: 'zoomButton',
docked: 'bottom',
iconCls: 'icon-text-height',
handler: this.zoomButtonHandler,
scope: this
});
this.zoomSlider = Ext.create('ARSnova.view.CustomSliderField', {
label: 'Zoom',
labelWidth: '15%',
value: 100,
minValue: 75,
maxValue: 150,
increment: 5,
suffix: '%',
setZoomLevel: function (sliderField, slider, newValue) {
newValue = Array.isArray(newValue) ? newValue[0] : newValue;
if (!sliderField.actualValue || sliderField.actualValue !== newValue) {
self.setZoomLevel(newValue);
sliderField.actualValue = newValue;
}
}
});
this.zoomSlider.setListeners({
drag: this.zoomSlider.config.setZoomLevel,
change: this.zoomSlider.config.setZoomLevel
});
this.actionSheet = Ext.create('Ext.Sheet', {
left: 0,
right: 0,
bottom: 0,
hidden: true,
modal: false,
centered: false,
height: 'auto',
cls: 'zoomActionSheet',
items: [this.zoomSlider]
});
this.formPanel = Ext.create('Ext.form.Panel', {
style: 'margin-top: 15px',
cls: 'roundedCorners',
height: '100%',
width: '100%',
flex: 1,
scrollable: null,
items: [
questionPanel,
this.noAnswersLabel,
this.freetextAnswerList
]
});
this.add([this.toolbar,
this.zoomButton,
this.actionSheet,
this.countdownTimer,
this.formPanel
]);
this.on('activate', function () {
ARSnova.app.taskManager.start(this.checkFreetextAnswersTask);
this.checkPiRoundActivation();
ARSnova.app.taskManager.start(this.checkFreetextAnswersTask);
}, this);
this.on('deactivate', function () {
ARSnova.app.innerScrollPanel = false;
ARSnova.app.taskManager.stop(this.checkFreetextAnswersTask);
}, this);
this.on('painted', function () {
var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
ARSnova.app.innerScrollPanel = this;
if (screenWidth > 700) {
this.zoomButton.show();
this.initializeZoomComponents();
}
});
this.on('hide', function () {
......@@ -285,6 +338,53 @@ Ext.define('ARSnova.view.FreetextAnswerPanel', {
}
},
initializeZoomComponents: function () {
this.actionSheet.hide();
this.getParent().remove(this.actionSheet, false);
this.zoomButton.setIconCls('icon-text-height');
this.zoomButton.removeCls('zoomSheetActive');
this.getActiveItem().setPadding('0 0 20 0');
this.setZoomLevel(ARSnova.app.globalZoomLevel);
this.zoomSlider.setSliderValue(ARSnova.app.globalZoomLevel);
this.zoomButton.isActive = false;
},
zoomButtonHandler: function () {
console.log('here?');
if (this.zoomButton.isActive) {
this.initializeZoomComponents();
} else {
this.zoomButton.setIconCls('icon-close');
this.zoomButton.addCls('zoomSheetActive');
this.getActiveItem().setPadding('0 0 50 0');
this.zoomButton.isActive = true;
this.actionSheet.show();
}
},
setZoomLevel: function (size) {
this.formPanel.setStyle('font-size: ' + size + '%;');
this.freetextAnswerList.fireEvent('resizeList', this.freetextAnswerList.element);
ARSnova.app.getController('Application').setGlobalZoomLevel(size);
this.updateListHeight();
},
updateListHeight: function () {
var me = this;
if (!me.resizeListFlag) {
me.resizeListFlag = true;
Ext.create('Ext.util.DelayedTask', function () {
if (me.freetextAnswerList.element.dom.style.display !== 'none') {
me.freetextAnswerList.element.dom.style.display = 'none';
me.freetextAnswerList.fireEvent('resizeList', me.freetextAnswerList.element);
me.freetextAnswerList.element.dom.style.display = '';
me.resizeListFlag = false;
}
}).delay(2000);
}
},
checkFreetextAnswers: function () {
var me = this;
......
src/main/webapp/app/view/FreetextDetailAnswer.js
View file @ d2d6e772
......@@ -129,10 +129,8 @@ Ext.define('ARSnova.view.FreetextDetailAnswer', {
}
});
this.add([this.toolbar, {
xtype: 'formpanel',
this.formPanel = Ext.create('Ext.form.Panel', {
scrollable: null,
items: [{
xtype: 'textfield',
cls: 'roundedBox',
......@@ -141,12 +139,23 @@ Ext.define('ARSnova.view.FreetextDetailAnswer', {
disabledCls: 'disableDefault',
inputCls: 'thm-grey',
disabled: true
},
questionPanel
]
},
imgContainer,
{
}, questionPanel]
});
this.zoomButton = Ext.create('Ext.Button', {
ui: 'action',
hidden: true,
cls: 'zoomButton',
docked: 'bottom',
iconCls: 'icon-text-height',
handler: this.zoomButtonHandler,
scope: this
});
this.add([this.toolbar,
this.zoomButton,
this.formPanel,
imgContainer, {
xtype: 'button',
ui: 'decline',
cls: 'centerButton',
......@@ -183,12 +192,82 @@ Ext.define('ARSnova.view.FreetextDetailAnswer', {
initialize: function () {
this.callParent(arguments);
var self = this;
this.zoomSlider = Ext.create('ARSnova.view.CustomSliderField', {
label: 'Zoom',
labelWidth: '15%',
value: 100,
minValue: 75,
maxValue: 150,
increment: 5,
suffix: '%',
setZoomLevel: function (sliderField, slider, newValue) {
newValue = Array.isArray(newValue) ? newValue[0] : newValue;
if (!sliderField.actualValue || sliderField.actualValue !== newValue) {
self.setZoomLevel(newValue);
sliderField.actualValue = newValue;
}
}
});
this.zoomSlider.setListeners({
drag: this.zoomSlider.config.setZoomLevel,
change: this.zoomSlider.config.setZoomLevel
});
this.actionSheet = Ext.create('Ext.Sheet', {
left: 0,
right: 0,
bottom: 0,
hidden: true,
modal: false,
centered: false,
height: 'auto',
cls: 'zoomActionSheet',
items: [this.zoomSlider]
});
this.add(this.actionSheet);
this.on('painted', function () {
ARSnova.app.innerScrollPanel = this;
var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (screenWidth > 700) {
this.zoomButton.show();
this.initializeZoomComponents();
}
});
this.on('deactivate', function () {
ARSnova.app.innerScrollPanel = false;
});
},
initializeZoomComponents: function () {
this.actionSheet.hide();
this.getParent().remove(this.actionSheet, false);
this.zoomButton.setIconCls('icon-text-height');
this.zoomButton.removeCls('zoomSheetActive');
this.zoomSlider.setSliderValue(ARSnova.app.globalZoomLevel);
this.setZoomLevel(ARSnova.app.globalZoomLevel);
this.zoomButton.isActive = false;
},
zoomButtonHandler: function () {
if (this.zoomButton.isActive) {
this.initializeZoomComponents();
} else {
this.zoomButton.setIconCls('icon-close');
this.zoomButton.addCls('zoomSheetActive');
this.zoomButton.isActive = true;
this.actionSheet.show();
}
},
setZoomLevel: function (size) {
this.formPanel.setStyle('font-size: ' + size + '%;');
ARSnova.app.getController('Application').setGlobalZoomLevel(size);
}
});
src/main/webapp/app/view/FreetextQuestion.js
View file @ d2d6e772
......@@ -466,6 +466,7 @@ Ext.define('ARSnova.view.FreetextQuestion', {
setZoomLevel: function (size) {
this.questionPanel.setStyle('font-size: ' + size + '%;');
ARSnova.app.getController('Application').setGlobalZoomLevel(size);
},
setAnswerText: function (subject, answer, answerThumbnailImage) {
......
src/main/webapp/app/view/Question.js
View file @ d2d6e772
......@@ -693,6 +693,7 @@ Ext.define('ARSnova.view.Question', {
setZoomLevel: function (size) {
this.formPanel.setStyle('font-size: ' + size + '%;');
this.answerList.fireEvent('resizeList', this.answerList.element);
ARSnova.app.getController('Application').setGlobalZoomLevel(size);
this.updateListHeight();
},
......
src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js
View file @ d2d6e772
......@@ -139,6 +139,12 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
this.on('activeitemchange', this.onItemChange);
this.onAfter('painted', function () {
ARSnova.app.innerScrollPanel = this;
var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
console.log('painted');
if (screenWidth > 700) {
this.getActiveItem().setZoomLevel(ARSnova.app.globalZoomLevel);
}
if (this.getActiveItem()) {
this.getActiveItem().checkPiRoundActivation();
......@@ -172,7 +178,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
}
panel.zoomButton.setHidden(screenWidth < 700);
newQuestion.setZoomLevel(this.zoomSlider.getValue());
newQuestion.setZoomLevel(ARSnova.app.globalZoomLevel);
newQuestion.updateQuestionText();
this.toolbar.setTitle(title);
}
......@@ -251,6 +257,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
this.zoomButton.setIconCls('icon-close');
this.zoomButton.addCls('zoomSheetActive');
this.getActiveItem().setPadding('0 0 50 0');
this.zoomSlider.setSliderValue(ARSnova.app.globalZoomLevel);
this.zoomButton.isActive = true;
this.actionSheet.show();
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment