https://github.com/skito/atmf-js
Javascript support for ATMF
https://github.com/skito/atmf-js
atmf crossplatform format javascript js nodejs open-source react template-engine
Last synced: 8 months ago
JSON representation
Javascript support for ATMF
- Host: GitHub
- URL: https://github.com/skito/atmf-js
- Owner: skito
- License: apache-2.0
- Created: 2022-01-15T15:04:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-03T16:56:53.000Z (over 3 years ago)
- Last Synced: 2025-08-25T03:40:35.168Z (10 months ago)
- Topics: atmf, crossplatform, format, javascript, js, nodejs, open-source, react, template-engine
- Language: JavaScript
- Homepage:
- Size: 112 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-BROWSER.md
- License: LICENSE
Awesome Lists containing this project
README
[Back to main document](https://github.com/skito/ATMF-JS)
# ATMF-JS / Browser enviropment
__Javascript support for ATMF (Advanced-Template-Markup-Format)__
# Setup
Simply load the ATMF browser library in your project. Then set the autodiscovery.
```html
window.onload = function () {
// Configure auto discovery
ATMF.SetTemplateDiscoveryPath('../common/templates/', 'html');
ATMF.SetCultureDiscoveryPath('../common/culture');
ATMF.SetCulture('en-US');
};
```
You can now start using ATMF. You can do so by adding ``data-atmf`` attributes to your DOM elements or by using the global selector function ``__()``. Let's try something simple. Add this code.
```html
```
Then load the page, open the browser console and type:
```javascript
__('$hello', 'Hellow World!')
```
The ATMF browser library will watch all of your body DOM and will automatically evaluate ATMF markup as long as it's available in any ``data-atmf`` attribute.
# Advanced Usage
__Global selector ``__()``__
```javascript
// Assign variables
__('$fullname', 'Advanced-Template-Markup-Format');
__('$shortname', 'ATMF');
__('$pagetitle', '{$fullname " (" $shortname ")"}');
__('$slogan', 'Cultural made easy!');
__('$userData', __escape('{$crossScripting}'));
// Using ATMF native properties
ATMF.vars['slogan'] = 'Cultural made easy!';
ATMF.DiscoverTemplate('header').then(() => { /* Do something */ });
// State management
var setTime = function () {
__('$timeNow', __('/date "H:i:s"'));
};
setTime();
setInterval(setTime, 1000);
```
# Usage Front-End (data attribute)
```html
```
__Language resources__
```html
```
Translations available at ``demos/common/culture/`` folder.
__Templates and functions__
```html
{@page.title}
{#if $someVar}
Show me in some condition
{#else}
Otherwise show me
{#end}
```
__Extensions__
```html
```
# Usage Front-End (templates)
__Variables__
```html
{$pageTitle}
```
__Language resources__
```html
{@page.title}
{@page.theFox 10 red}
```
Translations available at ``demos/common/culture/`` folder.
__Functions - #each #if #else #end__
```html
Author Name
Books
Sold Out
{#each $authors as $author}
{$author.firstName " " $author.lastName}
- {$book}
{#each $author.books as $book}
{#end}
{#if $author.soldOut}
Sold out
{#else}
In stock
{#end}
{#end}
```
__Extensions__
```html
Today date is {/date "M d, Y"}
```
__Escaping with backslash__
```html
\{@page.title}
```
Full demo available ``demos/common/templates/`` folder.
# Custom Extensions
Declare your custom extensions with this interface.
```javascript
class MyCustomExtension
{
constructor() {
this.str = "My custom extension";
}
Get(args)
{
return this.str;
}
Set(args, value)
{
this.str = value;
}
static Register(ATMFEngine) {
ATMFEngine.extensions.Register('mycustom', new MyCustomExtension());
}
}
```
Then in your ATMF setup code, call the register function
```javascript
window.addEventListener('load', (e) => {
MyCustomExtension.Register(ATMFEngine);
};
```
Using the extension
```html
```
Using with JS selector
```javascript
__('/mycustom') // Returns "My custom extension"
__('/mycustom', 'Another custom value') // Change the value
__('/mycustom') // Returns "Another custom value"
```
For more advanced example with arguments check the date core extension inside ``src/atmf/engine/ext/date.js``
# Prototyping
To make your own custom template and culture discovery you need to prototype the ATMF engine. [Learn more about it here](https://github.com/skito/ATMF-JS#prototyping).