Binders – Page 3 – appcropolis

Binders: require

The {{require.. }} binder allows you to includes a required Javascript or CSS file in your page template. This binder is similar to the WordPress wp_enqueue. Anywhere in your template code you can add the {{required… }} binder to indicate that your code requires a CSS or Javascript code that is hosted in a separate file. The binder will add your code URL to a queue and once you specify so, the {{require… }} binder will output all URLs in the queue with appropriate SCRIPT or LINK tags.

Motivation

Image that you are building page block that renders an image slider. You image slider may require to use a third party library the might be hosted in the cloud (e.g. Nivo Slider, FlexSlider, etc). Although you could simple add the required remote libraries to the main HTML code of your page, if you need to copy your “slider block” to a different page, you will also have to modify the HTML code of the page where you wish to add the copy of the slider. The {{require… }} binder basically remove the need of tracking CSS or Javascript dependencies that need to be included in the main page.

You can declare your require dependancies anywhere in your blocks and have the CSS or Javascript output before or after the declaration. See the Examples section below.

Parameters

type

(string) (required*) The type of code that you require to include. Valid values for the type parameter are: css, javascript.
Default: none

src

(string) (required*) The URL of the library you wish to include. You must use an full absolute URL (e.g. http://my-project-useranme.appcropolis.com/resources/js/my-script.js). If you would like to point to a file that you uploaded to the resources folder in your project, you can omit the server portion of the URL as long as you start with a forward slash (e.g. /resources/js/my-script.js).
Default: none

cache

TODO

output

(string) Instruct the binder to output the css or javascript code that is in the queue.
Default: none

Return

Outputs the Javascript or CSS that have been added to a queue.

Examples

Consider a page with two blocks. Both blocks require two different stylesheets, but you want both stylesheet to be included in the header section of the HTML page that holds the two blocks. To accomplish this, you can instruct the {{require.. }} binder to output the code in the <head/> section of the page, and further down declare the libraries that you wish to include.

<html>
 <head>
  <title>My Page Template</title>
  {{require type="css" output="true"}} <!-- this will output the two CSS files required below -->
 </head>
 <body>
  <div class="appc-page">
      <div id="block1">
          {{require type="css" src="http://server.com/css/style1.css"}}
          <h2>Block #1</h2>
      </div>
      <div id="block2">
          {{require type="css" src="http://server.com/css/style2.css"}}
          <h2>Block #2</h2>
      </div>
 </body>
</html>

Understanding Binders Response

TODO: explain what is in the binder response

array (size=15)
  'success' => boolean true
  'action' => string 'appc_post_category_content' (length=26)
  'offset' => int 0
  'post_count' => int 1
  'found_posts' => int 1
  'total_pages' => int 1
  'size' => string '6' (length=1)
  'paged' => int 1
  'has_next' => boolean false
  'next' => null
  'has_prev' => boolean false
  'prev' => null
  'is_first' => boolean true
  'is_last' => boolean true
  'data' => ...)

Binders: collection

TODO:

/**
 * NOT IMPLEMENTED YET
 * @example
 * 
 * # EXAMPLE
 * 
 * {collection list="red, green, blue" assign_to="colors"}
 * // OR
 * {collection item="red" assign_to="colors"}
 * {collection item="green" assign_to="colors"}
 * {collection item="blue" assign_to="colors"}
 * 
 * <ul>
 * {foreach $colors as $color}
 * 	<li>{$color}</li>
 * {/foreach}
 * <ul>
 * 
 * // OR
 * 
 * {unset var="colors"}
 * 
 *
 */

Binders: ga

TODO:

/**
 * Outputs the Googlg Analitics script TAG. This binder also verifies the referral IP
 * address against a black list og analytics spammers. 
 * 
 * @param {string} $ua Google Analytics account number
 * @param {string} $exclude IPs to exclude separated by comma
 * 
 * @example
 * 
 * {{ga ua="UA-61505055-1"}}
 * 
 */

Binders: builder_resources

TODO

Binders: resources

When building a project you have the option to upload static files to your project. This is very handy if want to use certain images, fonts, or files that you want to keep outside of WordPress, and are mainly needed for the design of your project.

If you wonder where your files go after uploading your resources, the answer is simple: they for to the resources folder in your website.

Your files will be physically placed inside a resources folder inside active WordPress theme. For example, let’s say that your profile picture (profile.jpg), is located inside a “images” folder. To insert your profile photo in a page you should do:

The {{resources}} binder serves as a shortcut to access files inside the resources folder. For the above example you could do: