adjusting the dimensions of the liferay portal canvas

Question

adjusting the dimensions of the liferay portal canvas

I am currently incorporating webgl using three.js into a liferay portlet. My goal is to have the renderer adjust the image (canvas element) size whenever there are changes made to the page layout that affect the portlet size. Essentially, I want the canvas to resize automatically when the portlet resizes by utilizing the three.js calls. With three.js, I can manipulate the size of the canvas through the renderer object. However, the challenge lies in obtaining the width of the portlet. Is there a method to capture a redraw event and extract the portlet width in order to properly resize the canvas element?

Appreciate any guidance on this matter.

javascript canvas three.js liferay

Answer 1

Answer №1

You have the ability to monitor both the portletMoved and updatedLayout events within the Liferay platform.

Liferay.on('portletMoved', function(event) {
    var portlet = event.portlet;

    var newWidth = portlet.width(),
        newHeight = portlet.height();

    [...]
});

Liferay.on('updatedLayout', function(event) {
    // If Alloy is included in your script, use A.one to access the
    // portlet node. Otherwise, you can utilize document.getElementById
    var portlet = A.one('#' + portletId);

    var newWidth = portlet.width(),
        newHeight = portlet.height();

    [...]
});

Answer 2

You have the ability to monitor both the portletMoved and updatedLayout events within the Liferay platform.

Liferay.on('portletMoved', function(event) {
    var portlet = event.portlet;

    var newWidth = portlet.width(),
        newHeight = portlet.height();

    [...]
});

Liferay.on('updatedLayout', function(event) {
    // If Alloy is included in your script, use A.one to access the
    // portlet node. Otherwise, you can utilize document.getElementById
    var portlet = A.one('#' + portletId);

    var newWidth = portlet.width(),
        newHeight = portlet.height();

    [...]
});

adjusting the dimensions of the liferay portal canvas

Answer №1

Similar questions

Error encountered in node.js script due to misuse of Sqlite's SQLITE_MISUSE functionality

The android application experiences crashing issues when utilizing the position or zIndex style properties within a react-native environment

Three Conditions that Must be Fulfilled for Jquery CSS Selection

Choose the root node in a JavaScript object

Can you choose the stylesheet.cssRule[] based on a class name or ID?

I'm curious about the potential vulnerabilities that could arise from using a Secret key as configuration in an express-session

Avoiding empty spaces within a JavaScript array

Eliminate HTML tags when CKEDITOR is switched

A guide on adjusting the timeout for Azure text to speech silence in JavaScript

Problem with Jquery slider user interface

Implementing a text field to initiate an Ajax request

Activate a commandButton action using a JavaScript-passed variable in JSF

Common issues when attempting to extrude shapes with three.js

What is the best way to assign a distinct identifier to every hyperlink within a specific class using jquery?

storage location for data in JSON format

Video texture is running but only displaying a blank screen

The absence of text is not displayed in an empty slot of a Buefy table

What could be causing this error in the jQuery AJAX post request, even though the post was actually successful?

Dynamically determining the direction of a page with Vue Js

What is the best way to extract every nth consecutive items from an array?