Do not wrap grid_elements content object, OR, only wrap children of grid_elements in Typo3 - typo3

I am building a responsive front-end using Typo3 & the gridelements extension. I want to wrap each individual content element inside of a gridelement column in a wrapper, like this:
<div class="row"> <-- wrap around whole gridelements content element
<div class="column size2"> <-- wrap around gridelements column
<div class="module> <-- wrap around content inside of gridelement column
CONTENT
</div>
<div class="module>
CONTENT
</div>
</div>
</div>
If I go and put a div class="module" wrap around all ordinary content elements, then it gets wrapped TWICE- once around the gridelements "element", and once around each child content element:
<div class="module"> <-- WRONG!
<div class="row"> <-- wrap around whole gridelements content element
<div class="column size2"> <-- wrap around gridelements column
<div class="module> <-- wrap around content inside of gridelement column
CONTENT
</div>
<div class="module>
CONTENT
</div>
</div>
</div>
</div>
I guess that I can either a) wrap all content elements with div class="module", EXCEPT for content element of type gridelements, OR b) wrap children of gridelements with div class="module". What would be the best approach, and what would the TypoScript for either of these options look like?

i am not sure, but i think this is what you are looking for.
# the grid element uid
1 < lib.gridelements.defaultGridSetup
1 {
columns {
# colPos ID
10 < .default
10.wrap = <div class="row">|</div>
# this adds the value "module" as class and wraps a content element
# which is inside this grid. (like a replace for csc-default)
default.renderObj.20 {
stdWrap.innerWrap.cObject.default.20.10.value = module
}
}
}
maybe there is a better solution. if so, let me know
EDIT:
hmm, i slightly misunderstood the whole thing, so i changed a bit :P

Related

AEM HTL repeating an element containing "data-sly-resource" using data-sly-repeat

I am trying to loop through an div element containing "data-sly-resource" to be able to include that component as a child.
I have a table element where each cell has an individual authoring interface using a child component. I get two counts that is rowCount as array of "x" and columnCount as array of "y". I'm able to iterate through the class="table-cell" and am able to add "y" number of columns with their respective child components using data-sly-resource . But when I'm trying to iterate through class="table-row" using rowcount it only iterates the content and adds "y" number of rows but doesn't add child components in the rows
thank you
<div class="table">
<sly data-sly-list.card="${rowCount.array}">
<div class="table-row">
<sly data-sly-list.card="${columnCount.array}">
<div class="table-cell" data-sly-test.resourceNode="${['cell', card.intValue] #join='-'}">
<div data-sly-resource="${ #path=resourceNode,
resourceType='example/components/content/tableLongForm/rte'}"
data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
</div>
</sly>
</div>
</sly>
</div>
Authoring Interface Image
You are using the same identifier card for the list items in the nested loops, perhaps you meant it as:
<div class="table">
<sly data-sly-list.row="${rowCount.array}">
<div class="table-row">
<sly data-sly-list.card="${columnCount.array}">
<div class="table-cell" data-sly-test.resourceNode="${['cell', row.intValue, card.intValue] # join='-'}">
<div data-sly-resource="${ #path=resourceNode,
resourceType='example/components/content/tableLongForm/rte'}"
data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
</div>
</sly>
</div>
</sly>
</div>

TYPO3 - nested gridelements

I'd like to get a solution for the TYPO3 EXT:gridelements.
I need gridelements in gridelements (nested) for Bootstrap TabĀ“s:
Grid Container Outer
Grid Container 1
Text with Image
Text
Text with Image
Grid Container 2
Text
Text with Image
with a foreach-loop (debug) it works for output from the grid-containers, but it renders Grid Container 1 and Grid Container 2 together in one gridelements col.
I need the output separated and would appreciate any help.
In your TypoScript file you've probably to set the proper path to the gridelement template:
tt_content.gridelements_pi1.20.10.setup {
TwoColumns < lib.gridelements.defaultGridSetup
TwoColumns {
cObject = FLUIDTEMPLATE
cObject {
file = Ext:path/to_your/template/template_name.html
}
}
The template file can look somehow like this:
<div class="row justify-content-md-center">
<div class="col-md-6">
<f:format.raw>{data.tx_gridelements_view_column_11}</f:format.raw>
</div>
<div class="col-md-6">
<f:format.raw>{data.tx_gridelements_view_column_12}</f:format.raw>
</div>
</div>
And make sure your grid columns colPos parameter are equal to tx_gridelements_view_column_... in the template.

Using Protractor to select elements with by.repeater()

Using the following Protractor element and by.repeater() API methods below:
var targetRowText = 'Sales';
var targetGridName = 'myGrid';
var sel = 'grid-directive[grid-name="' + targetGridName + '"] .col-freeze .grid-wrapper';
var gridRows = element(by.css(sel).all(by.repeater('row in vm.sourceData.data'));
var result = gridRows.all(by.cssContainingText('span', targetRowText)).first();
I am able to select the following row element from a grid which I have labeled, myGrid:
<div id="rowId_21" ng-class-odd="'row-2'" ng-class-even="'row-3'" ng-class="vm.hideRow(row)" class="row-3 height-auto">
<div ng-repeat="column in vm.sourceData.columns" >
<div ng-if="!column.subCols" class="ng-scope">
<div ng-if="row[column.field].length !== 0" class="ng-scope highlight21">
<span ng-bind-html="row[column.field] | changeNegToPrenFormat" vm.highlightedrow="" class="ng-binding">
Sales
</span>
</div>
</div>
</div>
</div>
Please note that I have used by.cssContainingText() to look up the "Sales" span element.
MY PROBLEM:
That that I have located this row in var result, how can I retrieve the id attribute of that outer-most div ?
In other words, I need to selected <div id="rowId_21" so that I can reuse id="rowId_21" in a subsequent Protractor selector.
In jQuery, for example, I could use brute force to get that outer div id as follows :
var el = $('grid-directive[grid-name="Sales"] .col-freeze .grid-wrapper #rowId_21 span')
el.parentElement.parentElement.parentElement.parentElement;
Here's a high-level outlines of what I mean. The grid actually separates the left-most column from the actual data rows, so there are two distinct divs that accomplish this:
<div grid-directive grid-name="myGrid">
<div class="col-freeze" >
<!-- CONTAINS LEFT-MOST "CATEGORIES" COLUMN -->
</div>
<div class="min-width-grid-wrapper">
<!-- CONTAINS THE DATA ROWS-->
</div>
However, I'm struggling to do this in Protractor.
Advice is appreciated...
Bob
A straight-forward option would be to get to the desired parent element using the ancestor axis:
element(by.xpath("./ancestor::div[starts-with(#id, 'rowId')]")).getAttribute("id").then(function (parentId) {
// use parentId here
});
Though, I think that this going down and then up the tree should be considered as a sign that you are not approaching the problem in an easy and correct way.

TYPO3: Automatic wrapping CASE by page.layout

I'm having a big teaser image at the top of the page. The author may select in the backend whether the teaser image should be static or a animated slideshow. I'm using bootstrap for the slideshow btw.
The selection appears at Page > Edit > Appearance
Rootpage TSConfig:
TCEFORM.pages {
layout.altLabels.1 = Default (with Slideshow)
layout.altLabels.0 = Default
}
Now, it gets a bit trickier.
To get the Bootstrap slider running, you need to have an outer wrap and each slide wrapped, too. This is what I've got so far:
page.10.variables {
teaser < styles.content.get
teaser.select.where = colPos = 0
teaser.stdWrap.required = 1
teaser.stdWrap.wrap {
cObject = CASE
cObject {
key.field = layout
default = TEXT
default.value = |
1 = TEXT
1.value = <div id="teaser" ...>|</div> ### shortened
}
}
teaser.renderObj.stdWrap.wrap {
cObject = CASE
cObject {
key.field = layout
default = TEXT
default.value = |
1 = TEXT
1.value = <div class="item">|</div>
}
}
}
The first teaser.stdWrap.wrap works like a charm. Selecting the Frontend Layout wraps the teaser correspondingly.
But the teaser.renderObj.stdWrap.wrap doesn't want to work. Mainly, because I think that the key of the CASE is not the Frontend Layout, but the layout of the content element. How to change that?
Second question. This is how the wraps currently look like (or how they would look if the TS above would work as intended):
<div class="item">
<div id="c14">
<div class="ce-textpic ce-right ce-intext">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-row">
<div class="ce-column">
<div class="ce-media">
<img src="img.jpg" width="1150" height="632" alt="">
</div>
</div>
</div>
</div>
<div class="ce-bodytext"></div>
</div>
</div>
Is there a way to make it look more or less like this?
<div class="item">
<img class="slide" src="img.jpg">
</div>
The customer doesn't wish to have any captions or text, so it can be ignored.
I'm running TYPO3 7.6.6 with fluid_styled_content.
So the answer for the 1st question:
You can use the "getText" data type in TypoScript. See in doc here.
It has a predefined variable for the current page record. So simple change the second key attribute so:
key.data = page:layout
But if you are running the system with fluid_styled_content, then you can simply use fluid to solve this problem. (There you can access the layout with data.layout )
To answer the second question:
Yes. It is possible, you need to take a look into the fluid_styled_content extension. There you find a lot about the templates, layouts and the elements. You can simply override them with your templates and you can get rid of any not wanted div inside.
To do so, I can recommend you a german video.

jQuery next() selector when divs are not neighboring

Ive been using the following to change the width of the div.my-div that appears after the one you've clicked:
$(".my-div").click(function () {
$(this).next().css({'width':'500px'});
});
As my divs were neighboring, this worked fine:
<div class="my-div">stuff</div>
<div class="my-div">stuff</div>
<div class="my-div">stuff</div>
However now the structure has changed so they are no longer neighboring:
<div>
<div class="my-div">stuff</div>
</div>
<div>
<div>
<div class="my-div">stuff</div>
</div>
</div>
<div class="my-div">stuff</div>
Whats the simplest way to select the next element of the same class?
Thanks
jQuery will return elements in order of their appearance in the DOM.
As such, you could cache all the .my-div elements, use the index()[docs] method to get the index of the one that received the event, increment it and use the eq()[docs] method to get the next one.
var divs = $(".my-div"); // cache all of them
divs.click(function () {
var idx = divs.index( this ); // get the index in the set of the current one
divs.eq( idx + 1 ).css({'width':'500px'}); // get the one at the next index
});
This saves you from doing a bunch of unnecessary DOM selection and traversing.
Example: http://jsfiddle.net/VrATm/1/
EDIT: Posted wrong example link. Fixed.
You can traverse the tree hierarchy. That is, you can first jump to parent, then to next, then to children, like this:
$(this).parent().next().find(' > div').css({'width':'500px'});