Commit 07a9d52f authored by Andreas Gärtner's avatar Andreas Gärtner

Task #15893: Add scaling feature for showcase question carousel.

This feature commit introduces a text scaling option for speakers
showcase question carousel. When the browser window width is >=700px, a
iconed button will be rendered on the bottom right of the carousel. This
buttons reveals a slider field by which the font-size of question text
and answer options can be scaled.
parent 30d772d5
......@@ -48,7 +48,7 @@ Ext.define('ARSnova.view.CustomCarousel', {
this.on('add', function (carousel, item, index) {
if (item.getActiveItem()) {
item.getActiveItem().setStyle('margin-top: 3em');
item.getActiveItem().setStyle('margin-top: 56px');
}
});
},
......
......@@ -24,7 +24,8 @@ Ext.define('ARSnova.view.CustomSliderField', {
config: {
cls: 'sliderField',
labelWidth: '28%',
tabIndex: -1
tabIndex: -1,
suffix: ''
},
proxyConfig: {
......@@ -100,7 +101,7 @@ Ext.define('ARSnova.view.CustomSliderField', {
},
setInputValue: function (value) {
this.inputValue.dom.value = value;
this.inputValue.dom.value = value + this.getSuffix();
},
setSliderValue: function (value) {
......
......@@ -464,6 +464,10 @@ Ext.define('ARSnova.view.FreetextQuestion', {
}
},
setZoomLevel: function (size) {
this.questionPanel.setStyle('font-size: ' + size + '%;');
},
setAnswerText: function (subject, answer, answerThumbnailImage) {
this.answerSubject.setValue(subject);
this.answerText.setValue(answer);
......
......@@ -687,6 +687,26 @@ Ext.define('ARSnova.view.Question', {
}
},
setZoomLevel: function (size) {
this.formPanel.setStyle('font-size: ' + size + '%;');
this.answerList.fireEvent('resizeList', this.answerList.element);
this.updateListHeight();
},
updateListHeight: function () {
var me = this;
if (!me.resizeListFlag && this.questionObj.questionType !== 'grid') {
me.resizeListFlag = true;
Ext.create('Ext.util.DelayedTask', function () {
me.answerList.element.dom.style.display = 'none';
me.answerList.fireEvent('resizeList', me.answerList.element);
me.answerList.element.dom.style.display = '';
me.resizeListFlag = false;
}).delay(2000);
}
},
getUserAnswer: function () {
var self = this;
var promise = new RSVP.Promise();
......
......@@ -20,6 +20,8 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
extend: 'Ext.Carousel',
requires: [
'Ext.Sheet',
'Ext.ActionSheet',
'ARSnova.view.Question',
'ARSnova.view.CustomCarousel',
'ARSnova.view.CustomCarouselIndicator',
......@@ -38,6 +40,14 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
questionTitleShort: Messages.LECTURE_QUESTIONS
},
updateClockTask: {
name: 'renew the actual time at the titlebar',
run: function () {
ARSnova.app.mainTabPanel.tabPanel.speakerTabPanel.showcaseQuestionPanel.toolbar.updateTime();
},
interval: 1000 // 1 second
},
initialize: function () {
this.callParent(arguments);
......@@ -57,6 +67,8 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
backButtonHandler: function (animation) {
var sTP = ARSnova.app.mainTabPanel.tabPanel.speakerTabPanel;
ARSnova.app.innerScrollPanel = false;
ARSnova.app.taskManager.stop(sTP.showcaseQuestionPanel.updateClockTask);
sTP.showcaseQuestionPanel.initializeZoomComponents();
if (sTP.showcaseQuestionPanel.inclassBackButtonHandle) {
sTP.animateActiveItem(sTP.inClassPanel, animation);
......@@ -75,7 +87,51 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
}
});
this.add([this.toolbar]);
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) {
var sTP = ARSnova.app.mainTabPanel.tabPanel.speakerTabPanel;
sTP.showcaseQuestionPanel.getActiveItem().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,
modal: false,
centered: false,
height: 'auto',
cls: 'zoomActionSheet',
items: [this.zoomSlider]
});
this.add([this.toolbar, this.zoomButton]);
this.lastActiveIndex = -1;
this.on('activate', this.onActivate);
......@@ -97,20 +153,28 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
},
onActivate: function () {
var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
this.getAllSkillQuestions();
if (screenWidth >= 700) {
ARSnova.app.taskManager.start(this.updateClockTask);
}
},
onItemChange: function (panel, newQuestion, oldQuestion) {
var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (newQuestion.questionObj) {
if (screenWidth >= 520) {
this.toolbar.setTitle(newQuestion.getQuestionTypeMessage());
} else {
this.toolbar.setTitle('');
var title = screenWidth >= 520 ? newQuestion.getQuestionTypeMessage() : '';
if (panel.zoomButton.isActive) {
newQuestion.setPadding('0 0 50 0');
}
panel.zoomButton.setHidden(screenWidth < 700);
newQuestion.setZoomLevel(this.zoomSlider.getValue());
newQuestion.updateQuestionText();
this.toolbar.setTitle(title);
}
},
......@@ -170,6 +234,28 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
this.add(questionPanel);
},
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.zoomButton.isActive = false;
},
zoomButtonHandler: function () {
if (this.zoomButton.isActive) {
this.initializeZoomComponents();
} else {
this.getParent().add(this.actionSheet);
this.zoomButton.setIconCls('icon-close');
this.zoomButton.addCls('zoomSheetActive');
this.getActiveItem().setPadding('0 0 50 0');
this.zoomButton.isActive = true;
this.actionSheet.show();
}
},
saveActiveIndex: function () {
this.lastActiveIndex = this.getActiveIndex();
},
......
......@@ -58,7 +58,7 @@ code {
.sliderField .sliderInputField {
width: 15%;
float: right;
margin-right: 5px;
margin: 5px;
}
.sliderField .x-slider {
......
......@@ -73,7 +73,7 @@
left: 0;
font-family: "Pictos";
content: "3";
font-size: 32px;
font-size: 1.5em;
margin: -3px 0px 0px 8px;
color: $thm-green;
text-shadow: 1px;
......@@ -88,13 +88,13 @@
left: 0;
font-family: "arsnova";
content: "\f096";
font-size: 18px;
font-size: 1.2em;
margin: 11.65px 0px 0px 12px;
}
.answerOptionText {
position: absolute;
margin: 13px 40px;
margin: 13px 2.5em;
top: 0;
right: 0;
bottom: 0;
......@@ -300,7 +300,36 @@
}
.displayInherit {
display: inherit;
display: inherit;
}
.zoomButton {
width: 44px;
height: 33px;
font-size: 16px;
position: absolute;
margin: 6px;
bottom: 0;
right: 0;
&.zoomSheetActive {
z-index: 999;
font-size: 14px;
.x-button-icon {
margin-right: 1px;
}
}
}
.zoomActionSheet {
padding: 0;
border: 1px solid $background;
.sliderField {
padding-right: 2em;
text-align: center;
}
}
.customMaskTextElement {
......
......@@ -73,7 +73,7 @@ $toolbar-toogleCorrect-button-inactive-color: $thm-lightgrey;
}
}
.x-button .courseIcon,
.x-button .courseIcon, .sliderInputValue,
.answerListButton .x-button-label,
.forwardListButton .x-button-label,
.standardListButton .x-button-label {
......
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