[Version 2] Javascript Reference

Raisely websites made before May 2019 are built on Angular 1, bringing a powerful theming layer on top of your standard HTML and CSS.

While you can't edit our controllers directly, you do get access to a wide range of useful variables that let you extend your templates beyond our standard directives.

Variables

In most templates and directives, you’ll notice variables in curly braces that transform into live data when your website loads. On most homepages you’ll see a variable called ‘headline_text’ that’s referenced in the HTML:

 #{{config.theme.headline_text}} 

The example above is rendering the value inside a Javascript object called config, which is where most campaign configuration is stored. Inside config, it’s looking inside the theme object, which is where theme configuration in the Raisely Admin panel is set. Inside this configuration, the variable that’s being called is headline_text.

One way to quickly check what variables are available is simply to print these objects to the screen:

 #{{config}} 

You’ll get a great sense of what data is available like this, though a full list of Standard Variables is available below.

Filters

Angular gives a set of standard filters that help to format data inside a theme. The pipe element lets us call a filter on a variable.

The number filter lets us format a number with appropriate commas, and sets the number of decimals available:

 We've raised #{{ campaign.data.total | number:2 }} so far! 

The json filter formats data in a readable way, which can be a useful way to debug information about your campaign:

 #{{campaign | json}} 

Raisely extends these standard filters with a suite of filters that can be useful in your Raisely theme:

  • capitalize transforms the first character of a string to an uppercase letter, which is useful in rendering titles from dynamic variables.
  • classify transforms a string into a valid CSS class name, prepending it with “class-“, which is useful if you’re hoping to apply a class to a element in your theme. For example, I might want to add a dynamic class name to the menu from the menu item title, so #{{"Resources Page" | classify}} becomes “class-resources-page”.
  • encode transforms special characters in a string to URL-safe values, which is useful in constructing URL’s.
  • toTwoDecimals transforms a number a formatted number with a maximum of two decimal places, and an integer is possible, for a more pleasant currency format.
  • truncate reduces a string to a given number of words, adding an ellipsis, which is useful for reducing text on previews of posts. For example #{{post.body | truncate:50}}renders the first 50 words of a blog post, followed by “…”.
  • urlify transforms a string into a URL-safe version of the string, which is useful for formatting profile URL’s.
  • renderVideos transforms plain text links to YouTube and Vimeo video URL’s and renders a playable video.
  • renderLinks transforms plain text URL’s and email addresses into clickable links, which is useful for formatting plain text input like posts or profile descriptions.
  • renderLineBreaks transforms line break characters and replaces then with <br> tags, which is useful for formatting plain text input like posts or profile descriptions.
  • stripHTML removes the HTML tags from your content. It's great for excerpts.
  • grammaticalNumber converts a number into something more readable. For example, 100,000 will be turned into 100k
  • trustAsHtml marks HTML astrusted content through Angular’s Strict Contextual Escaping service.
  • trustAsCSS marks CSS as trusted content through Angular’s Strict Contextual Escaping service.
  • trustAsUrl marks a URL astrusted links through Angular’s Strict Contextual Escaping service.
  • trustAsResourceUrl marks URL’s as trusted content through Angular’s Strict Contextual Escapingservice, especially useful for constructing dynamic URL’s for external resources, like the src URL for an <iframe>

Standard Variables

Raisely has standard variables on the $rootScope to give easy access to critical campaign data across theme elements. You can inspect these at any time using <pre>#{{ variable | json }}</pre> . These are:

  • $root.campaign contains information about the current Raisely campaign.
  • $root.config contains critical campaign and theming information to help render a Raisely website
  • $root.constants contains a set of currencies, countries, exchange rates and other useful static data mappings.
  • $root.user contains all information about the current logged in user.
  • $root.query stores any parameters in the URL into an object. For example, https://example.raisely.com/?referrer=facebook&ad=24 renders into an object { referrer: ‘facebook’, ad: ’24’ } for use in your themes.
  • $root.Math is the JavaScript Math object
  • $root.state refers to the current state of the website, ie app.profileCreate .
  • $root.Window is access to the entire JavaScript window object
  • $root.scrollTo is a utility function to jump you down the page. For example: <a ng-click="$root.scrollTo('#myDiv')>Click Me</a> will take the user to #myDiv .
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us