Layout Paragraphs: Get Data from "Section" Paragraph in a Nested Paragraph - drupal-9

I'm using the Layout Paragraphs module. I have a "section" paragraph. Inside that section paragraph, I have a grid of 4-5 paragraphs. I would like to know if there's a way for those child paragraphs to access data from the parent "section" paragraph.
Technically, the paragraphs inside the "section" are not children. The parent entity for each paragraph is just the node page, from what I can tell. It's not like the section paragraph references the other paragraphs in the traditional Drupal entity reference way.
Use case: Ideally I want to have a couple of boolean fields on the section, and then have each paragraph within that section be able to access that data.
Not sure if it's possible. Anyone know?
Update
I worked this out. Please let me know if there's a more elegant way.
// Check if paragraph has parent.
$paragraphSettings = $paragraph->getAllBehaviorSettings();
if (!empty($uuid = $paragraphSettings['layout_paragraphs']['parent_uuid'])) {
$entity = \Drupal::service('entity.repository')->loadEntityByUuid('paragraph', $uuid);
// If parent exists, get boolean fields.
$vars['showBlurb'] = $entity->get('field_show_blurb')->getString();
$vars['showCta'] = $entity->get('field_show_call_to_action')->getString();
$vars['showIcon'] = $entity->get('field_show_icon')->getString();
$vars['showImage'] = $entity->get('field_show_image')->getString();
}

Related

paragraph containing image gets broken when it overflows to following page

I am trying to generate a PDF with iTextSharp for a library catalog. The format i am after is roughly like this :
a line for the title, followed by a line for the book information such as year, Isbn,pages .... followed by the abstract of the book wrapping around its cover image, something like what's done here
My problem is with the text and the image. I am using a paragraph as the parent container for another paragraph hosting the abstract and an image object.
Paragraph container = new Paragraph();
//cover is an object of type iTxtSharp.text.Image
cover.ScaleToFit(100f, 150f);
cover.IndentationLeft = 9f;
cover.SpacingAfter = 9f;
cover.Alignment = iTextSharp.text.Image.TEXTWRAP | iTextSharp.text.Image.ALIGN_RIGHT;
Paragraph blurb = new Paragraph(#pub.Abstract,propertyFont);
blurb.Alignment=Element.ALIGN_JUSTIFIED;
container.Add(cover);
container.Add(blurb);
using the above i get the desired behavior, however when my paragraph overflows to the following page, or when there is no abstract, the images start drifting to the center.
If i set blurb.KeepTogether to true, the image disappears.
I also tried to use a table with two columns, one for the abstract and another for the page and again the image disappeared.
How can i achieve this desired layout?

Chrome Extension - CSS messes up on certain pages

I am writing a Chrome Extension that inserts a DIV on top of an existing page. I have given my DIV the distinct ID name, 'juxiSidebar'. In addition, all of the ID and Classes I insert into the page contain the prefix 'juxi'. The problem is that when I visit certain pages, sometimes my CSS formatting gets messed up, and I am unsure why this is happening. When I search the page for any IDs/Classes that start with 'juxi', I just see my own tags.
Here is a snippet of how I am inserting my nodes:
var sidebar = document.createElement('div');
sidebar.id = "juxiSidebar";
document.body.appendChild(sidebar);
Not only ID and class selectors can affect the style of your element, but also other selectors, such as div, body > div, etc.
Make sure that all relevant styles for your element are set.

Cloning parsys component functionality

I wish to take the component libs/foundation/components/parsys/colctrl/... and modify its text so that I can use it for css tabs instead. I recreated it as apps/-site-/components/content/tabsys/ (and all it's subfolders/components/etc. The only thing I didn't change was in tabsys/tabctrl/virtual/2tabs/cq:editConfig/cq:formParameters (same for 3tabs/ as well):
sling:resourceType = foundation/components/parsys/colctrl
layout = 2;cq-colctrl-lt0
In the sidekick I now have a Tabs component option, with the same options as Columns. However, when I drag any of the Tabs into the content area, I don't get any of the border content areas to drag content pieces into; only the Edit/Delete/New bar. When I click Edit I should have a dropdown for the number of columns I want to have (Columns component has it for reference). What am I missing?
I ran into this same issue, and the reason for this seems to be that the ParagraphSystem class used by the parsys component only parses/generates the columns/containers if the sling:resourceType of the content node ends in "/colctrl".
private String colCtrlSuffix = "/colctrl";
if (res.getResourceType().endsWith(this.colCtrlSuffix)) { /*creates columns*/ }
In your example, the tabctrl should have a reference to the Super type:
sling:resourceSuperType = "foundation/components/parsys/colctrl"
Secondly, if tabctrl were renamed to colctrl then the ParagraphSystem would attempt to parse the columns based on the number specified in first part of the layout attribute and create the additional content nodes for each column.
If the ParagraphSystem class looked for "-colctrl" rather than "/colctrl" it would have allowed for customized components like "my-colctrl". Instead, I guess we need to use folders to avoid naming collisions. (i.e., apps/-site-/components/content/tabsys/colctrl)

What's the easiest way to create an extensible custom container in Flex?

I want to create an MXML container component that has some of its own chrome -- a standard query display, et al -- and that supports the addition of child components to it. Something a lot like the existing mx:Panel class, which includes a title label, but acts like a plain mx:Box with regards to adding children.
What's the easiest way to do this?
Edit:
To be clear, I want to be able to extend the container using MXML, so the "Multiple visual children" problem is relevant.
Extend a container and add a title label. Probably the <mx:Canvas/> will work here. Make the title a public var and include a var for the styleName of the label.
Then override the addChild() method so that any child that is added is added instead to the that is your container.
Leave enough space for your title when you position your Box element (i.e., give its y property enough space. If there is no title you may want to reclaim that space.
That's the basics. Customize to your heart's content.
EDITED TO ADD: I do this creating an ActionScript class first, extending the container I am targeting, and I add the "furniture" — items the class will always use, like title in your case — by overriding createChildren and calling super.addChild(item) for those items. Calling addChild from then on, even in MXML markup, adds items to the inner container.
We do this with states.
We put the chrome for the base container in a state (in mx:AddChild elements) and then use the initialize event to switch to that state when the control is created. All the chrome is then added to the container.
That gets round the multiple sets of visual children problem.
The downsides to this approach are:
You don't see the chrome when editing descendents of the base.
You can't directly access the parent chrome controls from descendent components as they are not there at compile time (instead, you need to define properties, methods or events on the base that the descendents can access)
However, it works well for us.

Generate a flex image from a hidden component

I'm trying to put an image, generated from some text, in a RichEditableText. Since it's a styled text, I thought about putting it another RichEditableText, style it, then print it to a Bitmap to use as source for InlineGraphicsElement.
I use the following code to do that
var txt:RichEditableText = new RichEditableText();
txt.text = name;
// Appliy given styles to the text flow of input rich editable text
createApplyNamedStyle(name, styles).call(null, txt.textFlow);
var bitmapData:BitmapData = new BitmapData(txt.width, txt.height);
bitmapData.draw(txt);
var bitmap:Bitmap = new Bitmap(bitmapData);
Unfortunatly, when called, it displays an error stack
ArgumentError: Error #2015: BitmapData non valide.
at flash.display::BitmapData()
at RichTextEditor/getTagImage()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:74]
at RichTextEditor/insertTag()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:154]
I suspect it is due to the fact that my RichEditableText, not being in visible component, is not laid out.
How can I ensure it is properly laid out ?
And am i doing the right thing to transform my text into an image ?
You're right; since the text is not on the display list, it is never validated and hence has 0 height and width.
A typical workaround is to add the item to the display list and then remove it immediatley. A little more discussion in this SO question.
You should trace txt.width and txt.height. They must be at least greater or equal to one. It does not matter if a DisplayObject is visible or not.

Resources