XalokNext Documentation

Appearance

Binding expanders (wf-bind) ​

Intro ​

Extenders of epoxy binding handlers.

authorEmail ​

Binder for adding author's email address as text and wrap it in an <a> tag

html
    <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind="authorEmail:currentPage_authors"
    ></span>

authorName ​

Binder for adding author name as text and optionally wrap it in an <a> tag

html
    <!-- no wrap link -->
    <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind="authorName:currentPage_authors"
    ></span>
html
    <!-- with wrap link -->
    <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind="authorName:currentPage_authors|/columnist/__slug__"
    ></span>

authorProperty ​

Binder for adding author's specific property as text and wrap it in an <a> tag

  • binds author's name as text, same as wf-bind="authorName:currentPage_authors"
    html
        <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind="authorProperty:currentPage_authors||name"
    ></span>
  • binds author's name as text and wraps the element in a <a> element with href /columna/slug_of_author
    html
        <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind="authorProperty:currentPage_authors|/columna/__slug__|name"
    ></span>
  • binds author's name as text and add extra attributes to <a> element (target="_blank")
    html
        <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind='authorProperty:currentPage_authors|/columna/__slug__|name|target="_blank"'
    ></span>

authorTwitter ​

Binder for adding author's twitter account as text and wrap it in an <a> tag

html
    <span
        wf-module="wfed/body_text/module"
        wf-role="test_text"
        wf-new
        wf-toolbar-position="none"
        wf-allow="-+"
        wf-bind="authorTwitter:currentPage_authors"
    ></span>

avatar ​

Binds the page author|publisher|creator avatar to the img element src attribute. Default value is author.

html
   <img src="" wf-bind="avatar"/> <!-- defaults to author with filter admin_user_avatar (90x90) -->
   <img src="" wf-bind="avatar:creator"/> <!-- defaults to filter admin_user_avatar -->
   <img src="" wf-bind="avatar:creator|image_100_100"/>

avatarItem ​

To be used inside a moduleRepeat handler. The "original" avatar binding expander was working with the first author only, but avatarItem can be used for as many authors as there are.

html
  <img src="" wf-bind="avatarItem" /> <!-- defaults to author with admin_user_avatar filter -->
  <img src="" wf-bind="avatarItem:creator" /> <!-- with other type of user -->
  <img src="" wf-bind="avatarItem:publisher|image_100_100" /> <!-- with other type of user and filter -->

categoryHref ​

Binds the page category slug to the element href attribute.

html
   <a href="" wf-bind="categoryHref">...</a>

cmFreshText ​

Same as cmText with one important difference. When cmText is used, for example to bind the author's name to a module, the author's name is copied inside the module. Then, if the author's name is updated in the database, cmText still shows the author's name at the moment when it was linked to the module. cmFreshText shows the changed author's name - unless the module's contents were edited manually.

html
   <p
        wf-module="wfed/body_text/module"
        wf-role="supratitle"
        wf-toolbar-position="none"
        class="volanta"
        wf-bind="cmFreshText:page_supra"
></p>

cmText ​

Binds the content of a text module to a content model property

Just like epoxy's text handler, but works with text modules When working with modules, it needs to pass the CM id to the cmText filter (which in turn passes it to the text handler) because the editor might change the text manually, this text should be kept. So the cmText handler also saves the ID in the text module, if trying to set the text for the same ID it skips. This avoids overwritting the manually entered text if the editor chooses the same CM from the editor, but also, more importantly, when editing the article/board (the initial binding, after fetching the content models, would overwrite it)

html
   <p
     wf-module="wfed/body_text/module"
     wf-role="supratitle"
     wf-toolbar-position="none"
     class="volanta"
     wf-bind="cmText:page_supra"
   ></p>
  <!-- for page title use cmText:page_title instead of cmText:page_supra and so on for other properties -->

currentUriClass ​

Appends a class to the <a> element if its link is the same as the shown URI. To be used for menu boards, where the item corresponding to the currently shown page must be styled differently.

NOTE!!!: This binding expander works ONLY if the board is rendered through wf_cms_render_menu_board!!!

html
<!-- adds the `active` class to the `<a>` -->
<a
        wf-module="wfed/body_text/link"
        wf-new
        wf-role="menu_item_link"
        wf-toolbar-position="none"
        wf-bind="currentUriClass:active"
        href="#"
></a>

<!-- adds the `active` class to the `<a>` element inside the `<li>` -->
<li
        wf-module="wfed/composite/module"
        wf-new
        wf-role="menu_item"
        wf-toolbar-position="top"
        wf-allow="+-"
        wf-bind="currentUriClass:active"
>
  <a
          wf-module="wfed/body_text/link"
          wf-new
          wf-role="menu_item_link"
          wf-toolbar-position="none"
          href="#"
  ></a>
</li>

date ​

Binds the formatted date to the text of the element.

The second parameter specifies the format to be used. The date is formatted using Moment.js

A third parameter with a value different than "text" binds the date to that attribute.

Available field options: page_published_at(default), page_created_at, page_updated_at.

html
   <p wf-bind="date"></p> <!-- defaults to published_at with format YYYY-MM-DD -->
   <p wf-bind="date:page_created_at"></p> <!-- choose the field -->
   <p wf-bind="date:page_created_at|DD-MM-YYYY"></p> <!-- choose the format -->
   <!-- it can also be used for microformats, this adds the date to an attribute named content -->
   <p itemprop="datePublished" wf-bind="date:page_created_at|DD-MM-YYYY|content"></p>

debug ​

Debugs the binding context (available properties that can be bound) to the console

html
   <p wf-bind="debug"></p>

embeddedResponsive ​

Adds responsive-embed and some padding-bototm to the HTML put in a free HTML module:

html
  <div
    wf-module="wfed/free/html"
    wf-role="content_free_html"
    wf-toolbar-position="bottom"
    wf-allow="+-"
    class="content-free-html"
    wf-bind="embeddedResponsive"
  ></div>

filter ​

This is the image filter expander, but to keep it shorter it's just used as 'filter' (it's 'filter' in avalanche and also wf-filter in XalokNext3.x)

html
   wf-bind="filter:article_main"

With absolute path

html
   wf-bind="filter:article_main|true"

For <picture> elements (that need multiple filters based on media queries):

html
   wf-bind="filter:article_main|article_main_mobile-320|article_main_tablet-728"

With absolute path

html
   wf-bind="filter:article_main|article_main_mobile-320|article_main_tablet-728|true"

When using multiple filters wf-bind is added to the picture tag:

html
  <picture wf-bind="filter:article_main|article_main_mobile-320|article_main_tablet-728"></picture>

The result will look like this:

html
     <picture>
         <source srcset="/article_main_mobile/default.jpg" media="(max-width: 320px)">
         <source srcset="/article_main_tablet/default.jpg" media="(max-width: 728px)">
         <img srcset="/article_main/default.jpg" alt="My default image">
     </picture>

You can also specify min-width like this:

html
   wf-bind="filter:article_main|article_main_mobile-min320"

The result will look like this:

html
     <picture>
         <source srcset="/article_main_mobile/default.jpg" media="(min-width: 320px)">
         <img srcset="/article_main/default.jpg" alt="My default image">
     </picture>

You can also use a computed property to determine the filter to be used:

html
    <div
        wf-module="wfed/composite/module"
        wf-new
        wf-role="test_composite"
        wf-toolbar-position="left"
        wf-allow="+-"
        class="test-module"
        >

            <wf-setting type="select" name="xxx">
                <title>Title displayed as the label for this select</title>
                <option value="option1">First option</option>
                <option value="option2">Second option</option>
            </wf-setting>

            <script type="javascript" wf-script>
                {
                    imgFilter: () => this.getBinding('settings_xxx') === 'option2' ? 'small_image' : 'big_image'
                }
            </script>

            <img wf-bind="filter:computeds_imgFilter" />


    </div>

href ​

Binds the page slug to the element href attribute.

html
   <a href="" wf-bind="href">...</a>

hrefIf ​

Binds the given url to the "href" attribute but if the condition is false it removes the <a> element and keeps its children instead

html
  <!-- 
  binds `author_url` as the `href` of the `<a>` element, 
  but if `author_hasPage` is false it removes the `<a>` element and keeps 
  only the `<span>`
  -->
  <a wf-bind="hrefIf:author_url|author_hasPage">
    <span data-bind="text:author_name" />
  </a>

image ​

The same as the filter expander, but also adds the image_alt as the alt attribute

mam ​

It binds the article slug and refresh interval (in seconds) as attributes to html element. (data-mam-slug="/article/slug" data-mam-refresh="60") This attributes will later be used to refresh the content of mam articles on public.

html
   <div wf-bind="mam"></div> <!-- refresh time defaults to 60 -->
   <div wf-bind="mam:120"></div> <!-- set refresh time -->

mfDate ​

Binds the page published_at|created_at|updated_at to the "content" attribute of an element.

This is for use at microformats dates, the format is YYYY-MM-DD.

Available field options: page_publihed_at(default), page_created_at, page_updated_at.

html
   <p itemprop="datePublished" wf-bind="mfDate"></p> <!-- defaults to published_at -->
   <p itemprop="datePublished" wf-bind="mfDate:page_created_at"></p> <!-- choose the field -->

moduleRepeat ​

Repeat the module where this binding expander is added for each item inside a collection. Useful to bind arrays of tags/authors/categories. Inside the module where this binding expander is applied, use the special item content model - item represents each item inside the array.

NOTES:

  • Xalok keeps various lists of tags, based on the taxonomy. The base tags (with no taxonomy) are serialized as simpleTags, as in the example below:
  • You can also use the full $item (Backbone) model, for example in hrefTag/hrefCategory filters:
html
  <!-- for tags -->
  <li wf-module="wfed/composite/module"
      wf-role="tag"
      wf-toolbar-position="none"
      wf-allow=""
      wf-new
      wf-bind="moduleRepeat:currentPage_simpleTags"
      wf-use-placeholder="true"
  >
    <a data-bind="attr:{title: item_title},text: item_title, href: hrefTag($item)">
    </a>
  </li>

  <!-- 
  for authors, making the author's name optionally editable, 
  shows the updated author name if there's no manual edit.
  Removes the `<a>` element and keeps only the text (?! to be tested :D)
  if the `author_hasPage` is false (normally corresponding to a checkbox
  in the UserAdmin)
  -->
  <li wf-module="wfed/composite/module"
        wf-role="tag"
        wf-toolbar-position="none"
        wf-allow=""
        wf-new
        wf-bind="moduleRepeat:authorsModuleRepeat(page_authors)"
        wf-use-placeholder="true"
  >
    <a wf-module="wfed/body_text/module"
       wf-role="author"
       wf-new
       wf-bind="hrefIf:`/author/${item_url}`|item_hasPage,cmFreshText:item_name"
       >
    </a>
  </li>

This should perhaps be used together with wfToggle and arrayNotEmpty to remove all the HTML if there aren't any elements:

html
<div data-bind="wfToggle:arrayNotEmpty(currentPage_simpleTags)" wfattr-transparent>
  <p class="c-detail__tags__title">Temas</p>
  <ul class="c-detail__tags__list">
    <li wf-module="wfed/composite/module"
        wf-role="tag"
        wf-toolbar-position="none"
        wf-allow=""
        wf-new
        wf-bind="moduleRepeat:currentPage_simpleTags"
        wf-use-placeholder="true"
        class="c-detail__tags__item"
    >
      <a rel="tag" data-bind="attr:{title: item_title},text: item_title, href: hrefTag($item)">
      </a>
    </li>
  </ul>
</div>

moveElement ​

Binder for moving an element from one container to other container specified in selector variable based on a property.

html
    <div class="main-image">
        ....
        <!-- it will be moved here if currentPage_sponsorSetting = 'yes' -->
        <!-- and moved back when it changes to 'no' (or other value) -->
    </div>
    <div class="article-content">
        <div
            wf-module="wfed/composite/module"
            wf-new
            wf-role="test_module"
            wf-toolbar-position="top"
            wf-allow="+-"
            wf-bind="moveElement:currentPage_sponsorSetting
                    |yes:.main-image
                    "
            class="test-module"
        >
            <a
                wf-module="wfed/body_text/module"
                wf-role="test_text"
                wf-new
                wf-toolbar-position="none"
                wf-allow="-+"
                wf-use-placeholder="true"
            >Test module</a>
        </div>

    </div>

pageVideo ​

short for wf-bind="video:page_main_video"

Binds video data to element in boards. Adds media id or path for local videos to the href attribute of a element and source as a data attribute.

html
   <div wf-bind="pageVideo"></div>

pollForm/pollOptions ​

pollForm adds to a poll <form> the attributes required by poll.js in WfCmsBaseBundle.

pollOptions repeats the element where it's bound for each option of the poll and fills in the details.

html
  <form
          wf-bind="pollForm"
          method="post"
  >
    <span wf-module="wfed/body_text/module"
          wf-role="poll_title"
          wf-new
          wf-toolbar-position="none"
          wf-bind="cmText:poll_title"
    ></span>
    <span data-votes="0" <!-- will be filled with the number of votes -->
          data-id="0" <!-- will be filled with the option's ID -->
          wf-bind="pollOptions"
    >
      <span class="poll-option-container">
          <input type="radio" name="vote" id="" /> <!-- will get the option's ID as a value -->
          <span class="poll-option"></span> <!-- will be filled with the option's text -->
          <span class="poll-option-votes"></span> <!-- will be filled with the number of votes that this option got -->
      </span>
    </span>
  </form>

shareUrl ​

Binds the properties of the model to a string that contains placeholders representing the model property names.

html
    <a href=""
       wf-bind="shareUrl:currentPage|https://www.facebook.com/sharer/sharer.php?u=__SLUG__.html"
       class="facebook" 
    ></a>

Notice here the use of page model (for boards) instead of currentPage that is available only in article template

html
    <a href=""
       wf-bind="shareUrl:page|https://twitter.com/intent/tweet?text=__TITLE__&url=__SLUG__.html"
       class="twitter" 
    ></a>

urlParams ​

Binds the provided list of arguments to wf-url-param-NAME attributes - these attributes are in turn used by the wfed/dymanic/generic module to compose the final URL (bound through the wf-url attribute):

html
  <div
    wf-module="wfed/dynamic/generic"
    wf-new
    wf-role="sidebar"
    wf-not-sortable
    wf-toolbar-position="none"
    wf-allow=""
    wf-url="{{ path('app_article_sidebar', {id: "__id__"}) }}"
    wf-bind="urlParams:id|currentPage_id"
  ></div>

video ​

Binds video data (href & data-source attributes) to element in articles. Adds media id or path for local videos to the href attribute of a element and source as a data attribute.

html
   <div wf-bind="video"></div>
   <!-- adding a model -->
   <div wf-bind="video:page_main_video"></div> <!-- default model is video -->

wfSlide ​

Creates a slider in admin collection item modules similar to old functionality.

Note: A parent with class slider is required!

html
   <div class="media">
       <div
               wf-module="wfed/composite/module"
               wf-new
               wf-role="collection"
       >
           <div class="slider">
               <div
                       wf-module="wfed/composite/module"
                       wf-new
                       wf-role="collection-item"
                       wf-collection-item
                       class="slide"
                       wf-bind="wfSlide"
               >
               </div>
            </div>
       </div>
   </div>