This part of the tutorial covers how the Web Producer configures Teaser Component to allow the Hero and Post styles, which are implemented using both CSS and JavaScript, and how an Experience Author applies these styles to different teasers on the page.

Before defining and applying these styles, let's look at how, why and when to use JavaScript to augment component styles.  Component JavaScript can be broken into two categories:

  • JavaScript that provides functional behavior for the component. For example, opening a modal, or swapping out images.
    • This variety is NOT the focus of this tutorial.
  • JavaScript that modifies the component's DOM sub-tree either to facilitate CSS styling, or to inject content into the DOM that is not naturally exposed by the component.
    • This variety IS the focus of this lab.

Style JavaScript follows similar guidelines as the CSS application.

  • Use the BLOCK--MODIFIER CSS class to identify component DOM sub-trees to process.
  • Target component HTML elements via their BEM CSS classes .
  • When inserting new DOM elements, provide corresponding BEM CSS classes to they can be clearly styled via CSS.

Overview of AEM Component Style JavaScript

The below pseudocode (optionally using jQuery) to illustrates the general approach for applying JavaScript-based to support Component styles.

The general JavaScript execution outline is:

  • Invoke the following logic when:
    • The page is loaded.
    • An authoring event occurs that requires a re-application of the style.
  • All components that match the style are located in the DOM.
  • For each of these components, check if the component has already been processed.
  • If the component has not yet been processed:
    • Mark the component as processed.
    • Derive any new data that might be required, o ften via AJAX calls to AEM Content Services end points.
    • Modify the DOM as the styles needs.

 

component_style

Overview of AEM Component "Post Style" JavaScript

The Teaser's Post style involves deriving the last modified data from the linked AEM Page, and injecting this new content into the Teaser below the Teaser's title.

 

watch-and-learn--post-style

We can review the JavaScript for the Teaser's Post style by navigating the CRXDE Lite  (htt p://localhost:4502/crx/de) in a new tab, and opening /apps/l725/clientlibs/clientlib-dopetrope/components/teaser/styles/teaser.js.

component_post_style
  1. From the Dopetrope page tap the Page Properties icon in the top left, and select Edit Template.

  2. In the Template Editor, tap the Teaser's Policy icon from either Layout Container.

     

    • Tap the Styles tab on the right.
    • For each new style, tap Add under the previously configured styles, and enter the following Style Name  and CSS Classes pairs:

    Herocmp-teaser--hero full-width

    Postcmp-teaser--post

    • Tap the Check  icon in the top right save  the Teaser Component Policy changes.

     

    step-2
  3. Close the Template Editor browser tab to return to the Dopetrope page.

     

  4. Refresh the Dopetrope page.

     

  5. Select the top-most Teaser on the page, tap the Styles icon, and select Hero .

     

    step-5
  6. Scrolling down past My Portfolio, select the two Teasers in the Blog section, tap the Styles icon, and select Post.

     

    step-6

Final

After completing the above steps, the Teaser with the lightning bolt should have a shadow effect on the left and right side of it, and the 6 Teasers under My Portfolio should have the portfolio card style applied, and your page should look like:

 

final

Tutorial Table of Contents

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy