Scratch-engine is a simple and pure Javascript web component without any other dependencies. It's mainly designed for multi-language websites to change language-related text on browser-side.
On your webpage, use:
<script src='./static/js/scratch.js'></script>to introduce scratch-engine. Then when you're ready, like the onload event is triggered, just simply use scratch like this:
<body onload="engine.scratch()">then the page would be rendered as expected. Scratch read the browser language by default, if you want to use multi-language, just make sure you have the corresponding language pack and use engine.scratch(language_name)
You should create a json file with the name of the language (in lower cases) as a language pack. The data format is tag_name: text. For example, you have a file named zh-cn.js with content as follows:
{
"html_title": "你好，世界",
"body_content": "文本内容"
}And the html file is like this:
<html>
<head>
<title>{:html_title:}</title>
<script src="./scratch.js"></script>
</head>
<body onload="engine.scratch()">
{:body_content:}
</body>
</html>Then the page will be rendered as:
<html>
<head>
<title>你好，世界</title>
<script src="./scratch.js"></script>
</head>
<body onload="engine.scratch()">
文本内容
</body>
</html>The language file should be placed at ./lang/language_name.js relative to the path of the HTML file by default, but it's configurable!
If disabled, scratch will use near language packs if the specific language pack is not found. Like 'en-US' for 'en-UK'. Enabled by default. Currently under development.
For multi-language use. Store the original un-rendered page in localStorage so the page can be re-rendered to other languages when needed. Enabled by default.
The scratch function is like:
scratch: function(lang, callback, pattern, mode){
// Code
}langis the name string of the language.callbackis a callback function for those front-end frameworks with js render method to re-render DOM components.patterndefines template tag that would be replaced by scratch is a json with following pattern:
{
"prefix": "{:",
"suffix": ":}"
}modedefines several important settings, formatted as follows. Details are covered in next part:
{
"empty": "",
"strict": true,
"motion": true,
"path": "./lang/"
}All of the settings can be configured manually by engine.property_name[.child_property_name] = property_value or by:
- setEmpty(str):
motion.emptyproperty defines what to output if no matching value is in language pack, acceptsstring - setStrict(bool): Scratch will use only perfectly match language pack if set to true, accepts
Boolean - setMotion(bool, bool): The page would be stored before render if the first parameter is set to true. If the second parameter is
true, thelocalStoragedata of motion mode will be deleted, could cause bugs. Both acceptsBoolean - setPath(str): Set the path of the language packs, accepts
string - setPrefix(str): Set the prefix of template tag, accepts
string - setSuffix(str): Set the suffix of template tag, accepts
string - reset(): Restore default settings of scratch-engine