Commit ddc78a44 authored by Andreas Gärtner's avatar Andreas Gärtner

Task #15769: Feature: Add possibility to show markdown pictures larger.

parent a52d0c20
......@@ -27,7 +27,6 @@ Ext.define("ARSnova.controller.Application", {
launch: function () {
var me = this;
this.hrefPanelActive = false;
me.initializeOnClickOverride();
me.initializeAdvancedScrolling();
},
......@@ -80,56 +79,24 @@ Ext.define("ARSnova.controller.Application", {
e = e || window.event;
var element = e.target || e.srcElement;
var controller = ARSnova.app.getController('Application');
var url = "", title = "", isVideoLink = false;
var videoLink = false;
if (element.tagName === 'SPAN' && element.className === 'videoImageContainer') {
switch (element.accessKey) {
case 'vimeo':
url = "https://player.vimeo.com/video/" + element.id + "?autoplay=1";
break;
case 'youtube':
url = "https://www.youtube.com/embed/" + element.id + "?autoplay=1";
break;
default:
return false;
}
if (element.tagName === 'IMG' && element.className === 'resizeableImage') {
controller.showLargerImage(element);
}
title = element.title;
isVideoLink = true;
if (element.tagName === 'SPAN' && element.className === 'videoImageContainer') {
videoLink = controller.checkVideoContent(element);
}
if (element.tagName === 'A' && element.className !== "session-export" || isVideoLink) {
if (!isVideoLink) {
url = element.href;
title = element.innerHTML;
}
if (element.tagName === 'A' && element.className !== "session-export" || videoLink) {
var url = !!videoLink ? videoLink : element.href;
var title = !!videoLink ? element.title : element.innerHTML;
if (controller.checkHrefProtocol(url)) {
if (!controller.hrefPanelActive) {
controller.toggleHrefPanelActive();
var previewPanel = ARSnova.app.activePreviewPanel;
controller.embeddedPage = Ext.create('ARSnova.view.components.EmbeddedPageContainer', {
title: title,
url: url
});
controller.checkFrameOptionsHeader(url, controller, function () {
if (previewPanel) {
previewPanel.showEmbeddedPagePreview(controller.embeddedPage);
} else {
var tabPanel = ARSnova.app.mainTabPanel.tabPanel;
var speakerTP = tabPanel.speakerTabPanel;
var activePanel = speakerTP ? speakerTP.getActiveItem() : tabPanel.getActiveItem();
if (tabPanel.userTabPanel && activePanel === tabPanel.userQuestionsPanel ||
speakerTP && activePanel === speakerTP.showcaseQuestionPanel) {
activePanel.saveActiveIndex();
}
ARSnova.app.mainTabPanel.tabPanel.animateActiveItem(controller.embeddedPage, 'slide');
}
});
controller.handleInternEmbeddedPageLoading(controller, title, url);
}
return false; // prevent default action and stop event propagation
......@@ -140,6 +107,88 @@ Ext.define("ARSnova.controller.Application", {
};
},
checkVideoContent: function (element) {
var url = false;
switch (element.accessKey) {
case 'vimeo':
url = "https://player.vimeo.com/video/" + element.id + "?autoplay=1";
break;
case 'youtube':
url = "https://www.youtube.com/embed/" + element.id + "?autoplay=1";
break;
}
return url;
},
handleInternEmbeddedPageLoading: function (controller, title, url) {
var previewPanel = ARSnova.app.activePreviewPanel;
controller.embeddedPage = Ext.create('ARSnova.view.components.EmbeddedPageContainer', {
title: title,
url: url
});
controller.checkFrameOptionsHeader(url, controller, function () {
if (previewPanel) {
previewPanel.showEmbeddedPagePreview(controller.embeddedPage);
} else {
var tabPanel = ARSnova.app.mainTabPanel.tabPanel;
var speakerTP = tabPanel.speakerTabPanel;
var activePanel = speakerTP ? speakerTP.getActiveItem() : tabPanel.getActiveItem();
if (tabPanel.userTabPanel && activePanel === tabPanel.userQuestionsPanel ||
speakerTP && activePanel === speakerTP.showcaseQuestionPanel) {
activePanel.saveActiveIndex();
}
ARSnova.app.mainTabPanel.tabPanel.animateActiveItem(controller.embeddedPage, 'slide');
}
});
},
showLargerImage: function (element) {
var heightOffset = 15;
var messageBox = Ext.create('Ext.MessageBox', {
width: '100%',
height: '100%',
hideOnMaskTap: true,
cls: 'largeImageWindow',
listeners: {
hide: function () {
this.destroy();
}
}
});
var img = Ext.create('Ext.Img', {
src: element.src,
mode: 'image',
width: '100%',
height: 'auto',
listeners: {
load: function () {
messageBox.show();
var height = parseInt(this.element.getStyle('height'), 10);
var parentHeight = parseInt(this.getParent().element.getStyle('height'), 10);
if (height > parentHeight) {
this.getParent().setWidth('auto');
this.setHeight(parentHeight - heightOffset);
this.setWidth('auto');
} else {
this.getParent().setHeight('auto');
}
}
}
});
messageBox.add(img);
messageBox.element.on('tap', function () {
messageBox.hide();
});
},
showNewWindowWarning: function (url) {
var messageBox = Ext.create('Ext.MessageBox', {
title: Messages.NOTIFICATION,
......
......@@ -99,15 +99,14 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
function replaceImageElements(content) {
var imageDelimiter = /<img[^<>]*>/g;
var urlDelimiter = /src="[^"]*/g;
if (hideMediaElements) {
return content.replace(imageDelimiter, function (element) {
return content.replace(imageDelimiter, function (element) {
if (hideMediaElements) {
return '<img class="hidden"' + element.substr(4, element.length - 1);
});
}
return content;
} else {
return '<img class="resizeableImage"' + element.substr(4, element.length - 1);
}
});
}
var features = ARSnova.app.globalConfig.features;
......
......@@ -362,3 +362,10 @@
text-shadow: 1px 1px 5px $thm-green;
}
}
.largeImageWindow {
max-width: 95% !important;
max-height: 95% !important;
min-height: 0% !important;
min-width: 0% !important;
}
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