I have succesfully changed the aspectRatioConfig for a html5smartimage component to replace the default "Free crop" with a custom aspect ratio, however I'm struggling to find a way to select my custom aspect ratio as the default selection when cropping images. Essentially, I want to default to my custom aspect ratio rather than have the user select this from the list of aspect ratios (in this case there is only one value). Is this possible? Can anyone assist?
here is my code to replace the free crop, with my custom config, I was thinking that setting the checked value of the available aspect ratios (in initConfig below) would trigger the selected event, but it doesn't appear too. How can I default the selected aspect ratio ? Or perhaps trigger the selected event ?
(function($, undefined) {/** * Determine the scaling ratio the image component might have applied * * @param data contains `imgWidth` and `imgHeight` keys * @returns {number} is the scaling ratio, 1 if no scaling was applied. */ function getScalingRatio(data) {var scaleRatio = 1;if (data.imgWidth > 1280 || data.imgHeight > 1280) {if (data.imgWidth > 1280) {scaleRatio = 1280 / data.imgWidth; } else {scaleRatio = 1280 / data.imgHeight; } }return scaleRatio; }/** * Wrapper for the HTML5 aspect ratio aware * * @type {void|*} */ window.CQTG = $.extend(window.CQTG || {}, {Html5SmartImageWrapper: CQ.Ext.extend(CQ.Ext.Panel, {/** * Initialize panel * * @param originalConfig */ constructor: function (originalConfig) {// initialize the container so we get some useful information CQTG.Html5SmartImageWrapper.superclass.constructor.call(this, $.extend({}, originalConfig, {layout: 'fit',bodyStyle: 'padding: 0;',items: {title: null,header: false,frameHeader: false,border: false } }));// find the data path for this container instance originalConfig.imagePath = this.findParentByType('dialog').responseScope.path;// get rid of panel and replace with smart image this.removeAll();// add add html5 smart image to the container this.add(new CQTG.Html5SmartImage(originalConfig)); } }),Html5SmartImage: CQ.Ext.extend(CQ.html5.form.SmartImage, {/** * Initialize data-members * * @param config */ constructor: function (config) { config = config || {};var aInfo = this.getAspectRatioString(config.imagePath);// setup some default values config = CQ.Util.applyDefaults(config, {"cropConfig": {"aspectRatios": {"newsholeCrop": {"text": "Newshole crop","value": aInfo.aspectRatio } } } } );CQTG.Html5SmartImage.superclass.constructor.call(this, config);// first tool is the crop (rest has been disabled) this.imageToolDefs[0].cropMinWidth = aInfo.minWidth;this.imageToolDefs[0].cropMinHeight = aInfo.minHeight; },/** * Retrieve the bounding box and concoct a aspect ratio based on it * * There is some additional magic here because the image component uses a rendition, * not the original and bases all its pixel calculations on it without scaling it back * up. That is why the scaleRatio is determined */ getAspectRatioString: function (cmpPath) {var boundingBoxLocation = cmpPath.substring(0, cmpPath.lastIndexOf('/')),data = CQ.Util.eval(boundingBoxLocation + ".crop.json"),roundX = Math.ceil(data.aspectX * 100),roundY = Math.ceil(data.aspectY * 100),scaleRatio = getScalingRatio(data) ;return {aspectRatio: (roundX + "," + roundY),minWidth: Math.ceil(data.minCropWidth * scaleRatio),minHeight: Math.ceil(data.minCropHeight * scaleRatio) }; },initComponent: function () {CQTG.Html5SmartImage.superclass.initComponent.call(this);var cropTool = null;CQ.Ext.each(this.imageToolDefs, function(tool){if(tool.toolId == "smartimageCrop"){cropTool = tool; } });var userInterface = cropTool.userInterface;this.on("loadimage", function(){var aRatios = userInterface.aspectRatioMenu.findByType("menucheckitem");if(!aRatios[0].checked || !aRatios[0].initialConfig.checked){aRatios[0].checked = true;aRatios[0].initialConfig.checked = true; } }); } }) });CQ.Ext.reg("ffx.html5smartimage", CQTG.Html5SmartImageWrapper); })($CQ);
