contentfry

Appearance

Decorator ​

contentfry display SDK provides decorator $cf.ui variable with helpful methods for accessing user interface options, formatting and translations:

canShow ​

Accepts attribute in settings.shows key and returns boolean. Settings show options

  • Key: String
js
$cf.ui.canShow('share_icons');

icon ​

Returns svg icon (HTML). Icon options

  • Key: String
js
$cf.ui.icon('facebook');

loadmoreHTML ​

Returns load more button's inner HTML according to default loading state.

loadmoreHTML method responds according to user's load more button settings. if user prefers icon, this will return an svg icon.

  • loading: Boolean | default false | set to true when user clicks load more and waiting for response.
js
$cf.ui.loadmoreHTML(loading);

Possible responses according to loading state and user's load more icon preference.

html
<!-- Loading state -->
<span class="loadmore loading icon">[svg-loading-icon]</span>
<!-- Not loading, user option set to icon -->
<span class="loadmore icon">[svg-loadmore-icon]</span>
<!-- Not loading, user option set to text -->
<span class="loadmore text">[Load more translation]</span>

formatDate ​

Returns formated date according to user preference.

  • Date: date
js
$cf.ui.formatDate(broadcast.posted_at);

trans ​

Returns translated string for the key. Translation key options

  • Key: String
js
$cf.ui.trans('loadmore');

loadmoreHTML method handles translations by default

onImgError ​

Handle image error and set blank image to img error event's currentTarget

  • Event: e
js
$cf.ui.onImgError(e) // set blank image to img error event's currentTarget
html
<img src={ broadcast.user_profile_image_url } onError={(e) => $cf.ui.onImgError(e)} />

In case you only need an empty blank image.

js
$cf.ui.imgBlank() // returns empty image base 64 code

computed ​

SDK adds computed properties to API responses to speed up development. Computed properties