Skip to content

Commit

Permalink
GH-24 [flex] script, model, and configuration
Browse files Browse the repository at this point in the history
- makes responsive configuration more complex,
- makes style guide more abstract, with colors and gradient,
- adds a FlexModel.getId, even if we might want to move this to some abstract model later,
- introduces InlineStyleService that dynamically binds to InlineStyleWorker instances that each outputs inline style in context with the component, and the responsive layout,
- introduces generic InlineStyleWorkers for border, color, shadow, background-*,
- introduces specific InlineStyleWorkers for flex specific rules,
- adds a FlexModel.getStyle that reuses the above,
- adds conf + content for dx-docs, that should have a hello world flex usage at /content/dx-docs/us/en.html
- adds testing-extension module that allows easy UT of models with all of the above
  • Loading branch information
npeltier committed Sep 15, 2020
1 parent 8469bad commit 48cfdc2
Show file tree
Hide file tree
Showing 87 changed files with 3,170 additions and 216 deletions.
4 changes: 0 additions & 4 deletions apps/content/core/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,6 @@
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter</artifactId>
</dependency>
<dependency>
<groupId>org.osgi</groupId>
<artifactId>osgi.core</artifactId>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
acceptedTypes=["dx/structure/.*","dx-docs/components/.*"]
tagOnPublication=B"true"
tagOnModification=B"true"
referenceTypes=["cq/experience-fragments/editor/components/experiencefragment"]
shouldRewriteComponentHash=B"true"

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
acceptedTypes=["dx/structure/.*","dx-docs/components/.*"]
4 changes: 2 additions & 2 deletions apps/docs/app/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@
<dependency>
<groupId>com.adobe.dx</groupId>
<artifactId>structure</artifactId>
<version>0.0.6</version>
<version>0.0.7-SNAPSHOT</version>
<type>zip</type>
</dependency>
<dependency>
Expand All @@ -152,7 +152,7 @@
<dependency>
<groupId>com.adobe.dx</groupId>
<artifactId>core</artifactId>
<version>0.0.12</version>
<version>0.0.13-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.adobe.dx</groupId>
Expand Down
2 changes: 2 additions & 0 deletions apps/docs/content/jcr_root/conf/dx-docs/.content.xml
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@
jcr:primaryType="sling:OrderedFolder"
jcr:title="DX">
<settings/>
<_cq_styleguide/>
<_sling_configs/>
</jcr:root>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"/>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
passthroughGroups="[test,administrators]"/>
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<jcr:content jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<mobile jcr:primaryType="nt:unstructured"
end="{Long}599"
key="mobile"
label="Mobile / Default"
propertySuffix="Mobile"
start="{Long}0"/>
<tablet jcr:primaryType="nt:unstructured"
end="{Long}1199"
key="tablet"
label="Tablet"
inheritProperty="inheritTablet"
mediaQuery="@media only screen and (min-width: 600px)"
propertySuffix="Tablet"
start="{Long}600"/>
<desktop jcr:primaryType="nt:unstructured"
key="desktop"
label="Desktop"
inheritProperty="inheritDesktop"
mediaQuery="@media only screen and (min-width: 1200px)"
propertySuffix="Desktop"
start="{Long}1200"/>
</breakpoints>
</jcr:content>
</jcr:root>
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<jcr:content jcr:primaryType="nt:unstructured">
<colors jcr:primaryType="nt:unstructured">
<red jcr:primaryType="nt:unstructured"
value="#FE0000"
key="red"
label="Adobe Red"/>
<blue jcr:primaryType="nt:unstructured"
value="#0000FE"
key="blue"
label="Blue"/>
<white jcr:primaryType="nt:unstructured"
value="#FEFEFE"
key="white"
label="White"/>
</colors>
<gradients jcr:primaryType="nt:unstructured">
<red jcr:primaryType="nt:unstructured"
value="linear-gradient(180deg, rgba(0, 0, 0, 0.5) 36.8%,rgba(255, 0, 0, 0.78) 95.0%)"
key="red"
label="Adobe Red"/>
<white jcr:primaryType="nt:unstructured"
value="linear-gradient(90deg, rgba(0, 0, 0, 0.5) 36.8%,rgba(255, 0, 0, 0.78) 95.0%)"
key="another"
label="Another Red"/>
</gradients>
</jcr:content>
</jcr:root>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:policy="dx/components/structure/page/dx-design"
cq:policy="dx/structure/components/page/dx-design"
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/core/components/policies/mappings">
<root
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:policy="dx/components/structure/page/dx-design"
cq:policy="dx/structure/components/page/dx-design"
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/core/components/policies/mappings">
<root
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/jcr_root/content/dx-docs/us/.content.xml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
jcr:primaryType="nt:unstructured"
dx_id="c3fa17f4"
dx_pageId="5aff75cf"
sling:resourceType="dx/components/structure/flex"/>
sling:resourceType="dx/structure/components/flex"/>
</content>
</root>
</jcr:content>
Expand Down
62 changes: 61 additions & 1 deletion apps/docs/content/jcr_root/content/dx-docs/us/en/.content.xml
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,65 @@
jcr:primaryType="cq:PageContent"
jcr:title="DX Documentation"
cq:template="/conf/dx-docs/settings/wcm/templates/content-page-template"
sling:resourceType="dx-docs/components/structure/page"/>
sling:resourceType="dx-docs/components/structure/page">
<root jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<content jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<flex jcr:primaryType="nt:unstructured"
borderAllColor="red"
borderAllRadius="{Long}3"
borderRadius="all"
borderSides="all"
sling:resourceType="dx/structure/components/flex"
inheritDesktop="{Boolean}true"
inheritTablet="{Boolean}true"
shadowColor="red"
gapMobile="{Long}2"
focusXMobile="{Long}30"
focusYMobile="{Long}30"
foregroundColorMobile="white"
gradientMobile="red"
gradientDesktop="another"
foregroundColorDesktop="blue"
justificationMobile="JustifyStretch">
<items jcr:primaryType="nt:unstructured"
sling:resourceType="dx/structure/components/parlite">
<text jcr:primaryType="nt:unstructured"
sling:resourceType="core/wcm/components/text/v2/text"
text="&lt;h1&gt;Hello&lt;/h1&gt;"
textIsRich="true"/>
<text1 jcr:primaryType="nt:unstructured"
sling:resourceType="core/wcm/components/text/v2/text"
text="&lt;h1&gt;World!&lt;/h1&gt;"
textIsRich="true"/>
</items>
<definitionsMobile jcr:primaryType="nt:unstructured">
<item0 jcr:primaryType="nt:unstructured"
minHeight="custom"
minHeightValue="60"
minHeightType="%"
width="custom"
customWidthValue="60"
customWidthType="%"/>
<item1 jcr:primaryType="nt:unstructured"
minHeight="auto"
width="auto"/>
</definitionsMobile>
<definitionsDesktop jcr:primaryType="nt:unstructured">
<item0 jcr:primaryType="nt:unstructured"
minHeight="auto"
width="auto"/>
<item1 jcr:primaryType="nt:unstructured"
minHeight="custom"
minHeightValue="60"
minHeightType="%"
width="custom"
customWidthValue="60"
customWidthType="%"/>
</definitionsDesktop>
</flex>
</content>
</root>
</jcr:content>
</jcr:root>
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
componentGroup="DX"
jcr:title="Flex"/>
jcr:title="Flex"
styleWorkers="[background,color,shadow,border,flex-general,flex-definitions]"/>
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<div data-sly-use.model="com.adobe.dx.structure.flex.FlexModel">${model.hello}</div>

Sup
<sly data-sly-use.model="com.adobe.dx.structure.flex.FlexModel"></sly>
<style data-sly-test="${model.style}">${model.style @ context='unsafe'}</style>
<div id="${model.id}" class="dx-flex">
<div data-sly-element="${dxPolicy.elementName}"
aria-label="${dxPolicy.ariaLabel}"
role="${(!dxPolicy.elementName || dxPolicy.elementName == 'div') && dxPolicy.ariaLandmarkRole}"
class="dx-flex-items"
data-sly-resource="${'./items' @ resourceType='dx/structure/components/parlite'}"></div>
</div>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2020 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
Expand All @@ -13,7 +13,6 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->

<sly data-sly-test.isEdit="${wcmmode.edit}" data-sly-use.allowed="com.day.cq.wcm.foundation.AllowedComponentList"></sly>
<div data-sly-test.isAllowedApplicable="${allowed.isApplicable}"
class="${allowed.cssClass}"
Expand Down
16 changes: 11 additions & 5 deletions apps/structure/core/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,6 @@ Bundle-DocURL:
<groupId>javax.annotation</groupId>
<artifactId>javax.annotation-api</artifactId>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter</artifactId>
</dependency>
<dependency>
<groupId>org.osgi</groupId>
<artifactId>osgi.core</artifactId>
Expand All @@ -116,7 +112,17 @@ Bundle-DocURL:
<dependency>
<groupId>com.adobe.dx</groupId>
<artifactId>testing</artifactId>
<version>0.0.10</version>
<version>0.0.11-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.adobe.dx</groupId>
<artifactId>testing-extensions</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.adobe.dx</groupId>
<artifactId>core</artifactId>
<version>0.0.13-SNAPSHOT</version>
</dependency>
</dependencies>
</project>
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2020 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
package com.adobe.dx.structure.flex;

import static com.adobe.dx.inlinestyle.Constants.DEL_SPACE;
import static com.adobe.dx.inlinestyle.Constants.RULE_DELIMITER;
import static com.adobe.dx.structure.flex.FlexModel.PN_MINHEIGHT;
import static com.adobe.dx.structure.flex.FlexModel.PN_MINHEIGHT_TYPE;

import com.adobe.dx.inlinestyle.InlineStyleWorker;
import com.adobe.dx.responsive.Breakpoint;
import com.adobe.dx.utils.RequestUtil;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.jetbrains.annotations.Nullable;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.ConfigurationPolicy;

/**
* Sets up general inline style for items container (min height, and gap)
*/
@Component(configurationPolicy = ConfigurationPolicy.REQUIRE)
public class FlexGeneralStyle implements InlineStyleWorker {
private static final String FLEX_GENERAL = "flex-general";
private static final String RULE_CONTAINER = "#%s > .dx-flex-items {\n%s\n}";
private static final String RULE_ITEM = "#%s > .dx-flex-items > * {\n%s\n}";
private static final String PN_GAP = "gap";
private static final String MIN_HEIGHT_PREFIX = "min-height: ";
private static final String GAP_CONTAINER = "margin: -%spx";
private static final String GAP_ITEM_DECLARATION = "border: 0 solid transparent; border-width: %spx";

@Override
public String getKey() {
return FLEX_GENERAL;
}

@Override
public @Nullable String getDeclaration(@Nullable Breakpoint breakpoint, SlingHttpServletRequest request) {
return null;
}

String computeMinHeight(Breakpoint breakpoint, SlingHttpServletRequest request) {
Long minHeight = RequestUtil.getFromRespProps(request, breakpoint, PN_MINHEIGHT, Long.class);
if ( minHeight != null) {
String minHeightType = RequestUtil.getFromRespProps(request, breakpoint, PN_MINHEIGHT_TYPE, String.class);
if (minHeightType != null) {
return MIN_HEIGHT_PREFIX + minHeight.toString() + minHeightType;
}
}
return null;
}

String computeGapContainer(Long gap) {
if (gap != null) {
return String.format(GAP_CONTAINER, gap.toString());
}
return null;
}

@Override
public @Nullable String getRule(Breakpoint breakpoint, @Nullable String id,
SlingHttpServletRequest request) {
List<String> rules = null;
String minHeight = computeMinHeight(breakpoint, request);
Long gap = RequestUtil.getFromRespProps(request, breakpoint, PN_GAP, Long.class);
gap = gap != null ? gap / 2 : null;
String gapContainer = computeGapContainer(gap);
if (StringUtils.isNotBlank(minHeight) || StringUtils.isNotBlank(gapContainer)) {
rules = new ArrayList<>();
rules.add(String.format(RULE_CONTAINER, id, Arrays.asList(minHeight, gapContainer).stream()
.filter(StringUtils::isNotBlank)
.collect(Collectors.joining(DEL_SPACE))));
}
if (gap != null) {
rules = rules == null ? new ArrayList<>() : rules;
rules.add(String.format(RULE_ITEM, id, String.format(GAP_ITEM_DECLARATION, gap.toString())));
}
return rules != null ? String.join(RULE_DELIMITER, rules) : null;
}

}
Loading

0 comments on commit 48cfdc2

Please sign in to comment.