liferay portal canvas resize - javascript

I am using three.js to embed webgl into a liferay portlet. I would like to be able to have the renderer resize the image (canvas element) when I make changes to the page layout that effect the portlet size. So basically whenever the portlet resizes I want to be able to resize the canvas through the three.js calls. Three.js has a renderer object through which I can set size. The problem is getting the width of the portlet. Is there a way to capture a redraw event and grab the portlet width to be used to resize a canvas element?
Thanks

You can listen to both, the portletMoved and updatedLayout events on Liferay.
Liferay.on('portletMoved', function(event) {
var portlet = event.portlet;
var newWidth = portlet.width(),
newHeight = portlet.height();
[...]
});
Liferay.on('updatedLayout', function(event) {
// Assuming you have Alloy on your script, you can use A.one to get the
// portlet node. Otherwise, you could use document.getElementById
var portlet = A.one('#' + portletId);
var newWidth = portlet.width(),
newHeight = portlet.height();
[...]
});

Related

How do I implement the window resize event listener to my code?

I have an automatic carousel on my website. When I resize the browser, the functionality of the carousel still works but the images become distorted (the carousel shows some of both pictures)
Here is the codepen:
https://codepen.io/Harrison17/pen/VweamoL
const slideWidth = slides[index].clientWidth;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
I think I need to add an event listener for a resizing of the window but I'm not sure how to implement it into my code.
The code is as follows:
function onResize() {
var windowWidth = window.innerWidth;
// change the width of images or the carousel based on window width
}
window.onresize = onResize;
Hope this helps!
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
window.onresize = function() {
var height = window.innerHeight;
var width = window.innerWidth;
}
You would probably want to use the width attribute and "slide" accordingly. If you can't get it working, I advise using one of my JavaScript carousel libraries such as slick

How to return Video size when the video is auto resized by browser

I'm trying to have a video scaled to the entire size of my page, without any vertical or horizontal bars.
Since my client uses IE I can't use this:
object-fit: fill;
In order to manually scale the video to the page I need to be able to read the size of the displayed video (Not the size of the video's metadata) so that I can later scale it using CSS Transform
This is how the video gets displayed on my page:
https://i.stack.imgur.com/WioBT.png
How do I go about reading these values?
Thanks a bunch you guys save lives :)
The GlobalEventHandlers.onresize property contains an EventHandler triggered when a resize event is received.
function resize() {
let _height = window.innerHeight; // Window height
let _width = window.innerWidth; // Window width
}
window.onresize = resize;
You can for example get your video height with
let videoHeight = document.getElementById('myVideo').videoHeight
let videoWidth = document.getElementById('myVideo').videoWidth

How to get height of PDF document load in iframe

Is there any way to get actual Height of PDF content loaded in iframe?
I am facing an issue to scroll PDF content in iPAD device? I can get the height of body content make scroll successfully, but only for HTML pages.
this.contentWindow.document.body.scrollHeight
but for PDF its not returning exact height of the PDF document? Is there any way to get for that?
Thanks
Peter
I Tested this on my iPad and it works, maybe it could be good for you too.
There is an HTML5 js project by mozilla that renders pdf file and displays them and you can get the viewport of a page in the pdf file.
https://mozillalabs.com/en-US/pdfjs/
https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
UPDATE 2020: The API of pdf.js changed slightly:
PDFJS.getDocument('helloworld.pdf').promise.then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({scale: 1.5});
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
The answer is no (unfortunately).
Because at the element level, PDF object/embeds don't auto grow to take up more height if the document shown needs it, so their true height is never exposed to the DOM.
Even if you call a PDF directly by specifying it as the source of an iframe you'll see that the iframe has a DOM layout like any other page, with an object or embed of the pdf in the body anyway.
Inside this PDF 'element' is all the respective PDF plugin's territory, and cannot be accessed by javascript. There may be some flash, java or browser plugin that will allow you to interact with it but I haven't heard of it.
Peter, there is no way you can get height of PDF in iFrame on iOS safari as there is no adobe reader safari plugin available for apple mobile devices.
You can use HTML 5-Canvas to render PDF and open source client side libraries like pdfjs...etc...
Without that the only way you can get height[or width] is from server, use iTextSharp.dll kind of component and get the height/width of pdf page, which later you can multiply by number of pages, these all you can do easily on server side. Use the retrieved height/width to style your iFrame and then provide that PDF at source attribute of iFrame. iFrame will stretch and you will get scrolling effect.
OR
If you have any tool or component which can convert PDF to image then you just throw images from server on HTML, with javascript you can have control on getting attributes.
We have MS-SSRS for our reporting need, for small part of application which is accessible on iPad we get images from MS-SSRS instead of PDF. The reason we adopted this option is because if number of pages increases then the client side framework like PDF-JS will die to render on canvas.
You have various options with you to handle PDF on iPad.
Does the view=fit pdf viewer option work for what you are trying to accomplish (Set auto height for iframe):
<iframe src="Path/MyPDF.pdf#view=fit"></iframe>
Also this solution setting the height to auto before trying to get the height (https://stackoverflow.com/a/11864824/1803682):
objIframe = document.getElementById('theIframeId');
objIframe.style.height = 'auto';
document.body.scrollHeight
Finally - blog post here: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ and iScroll4 may be worth looking at.
This can be solved by using the JQuery.
Lets us assume that you have the iframe as follows with an id
<iframe src="name.pdf" id="pdf_frame"></iframe>
now by using the JQuery we can make the height of the iframe as auto as you need to display the pdf inside the iframe.
$('#pdf_frame').css('height','auto');
You can get the height as
document.body.scrollHeight

How to alter the original HTML while it's still loading

I need to use some data, calculated by JS (for example: window size) as css property of some HTML element. To avoid flickering of the window because of layout changes, I can't afford to use document.onready. I actually need to trigger JS function at the time the DOM element is added to the DOM tree.
I've tried with DOMNodeInserted event, but it seems that it triggered only for elements that are added post-loading the HTML code, with JavaScript.
What I need is to change tag that is presented in the original HTML source of the page. So for now I just inline JavaScript just after the HTML code of the tag that has to be changed, but is there a way to do this without inlining JS after every such tag. Something like DOMNodeInserted, but triggered while the original HTML is being rendered. Or how else I can accomplish this - having a JS dependent layout that does not move after it's loaded (it's properly generated before showing it to the user) and still have HTML code in the page (e.g. do not generate the page entirely from JavaScript)?
UPDATE
here is the javascript that is used to resize image. It respects both width and height, while widht:100% or height:100% works unless the window width/height is not smaller then image itself.
function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
var winwidth = $(window).width();
var winheight = $(window).height();
var imgratio = imgwidth / imgheight;
imgwidth = winwidth;
imgheight = winwidth / imgratio;
if (imgheight < winheight) {
imgheight = winheight;
imgwidth = imgheight * imgratio;
}
$('.cover-image').css({
width: winwidth+'px',
height: winheight+'px'
});
}
You can use a script to compose a stylesheet and add it to a new style element on the head before the body renders.
Or you can use media queries in a style sheet and apply the styles you prefer for different window or device dimensions.

How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

I've got a web application that loads some content from an external source to the dom via an ajax call, one of the things that comes back is a set of images (different sizes and aspect ratios) to be displayed in an profile photo section. I'd like for each of the images to be resized to fit within a 64px x 64px area and I'd like to maintain aspect ratio. I was able to do this in firefox, chrome, and safari, but I've no luck getting this to work in IE 7 or 8. The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load. Here's what works in the listed browsers:
$(window).load(function () {
$('.profileThumbnail').each(function (i) {
var divHeight = $(this).height();
var divWidth = $(this).width();
if (divHeight > divWidth) {
$(this).css('height', '64px');
$(this).css('width', 'auto');
}
else {
$(this).css('height', 'auto');
$(this).css('width', '64px');
}
divHeight = $(this).height();
var divParentHeight = $(this).parent().parent().height();
var divNewHeight = (divParentHeight - divHeight) / 2;
$(this).parent().css('top', divNewHeight);
divWidth = $(this).width();
var divParentWidth = $(this).parent().parent().width();
var divNewWidth = (divParentWidth - divWidth) / 2;
$(this).parent().css('left', divNewWidth);
});
});
I'm also trying to center (horizontally and vertically) them which is what the rest of that code does, but I think I've got all of that working if I can find a way to trigger this code after the image loads in IE.
keep in mind this needs to work both on the first visit (not cached) and subsequent visits (cached). I'm looking for a jquery, javascript, or css solution as I want to avoid the roundtrip/bandwidth for each image.
Have you tired to add a load event to the images yourself which triggers when the image is loaded? This is how image preloaders work.
var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";
You can add the onload to the image elements themselves if you are not doing the preload approach.
The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load.
Instead of setting an onload listener for the window, set an onload listener for the images you are loading remotely. Set the listener after you create the image object and before you insert it into the body. The listener can basically be all the stuff insife of the .each() in the code you posted,

Categories

Resources