Icontem

File: tests/10.html

Recommend this page to a friend!
  Classes of Aliaksandr Astashenkau  >  Templ  >  tests/10.html  >  Download  
File: tests/10.html
Role: Example script
Content type: text/plain
Description: Using modifiers
Class: Templ
Processes templates embedded in the pages
Author: By
Last change: Wrong title
Date: 8 years ago
Size: 4,772 bytes
 

Contents

Class file image Download
<!DOCTYPE HTML>
<html lang="en">
<head>
	<title>Templ test</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="utils.js"></script>
	<script type="text/javascript" src="../templ.js"></script>
	<script type="text/javascript" src="../templ.modifiers.js"></script>
	<script type="text/javascript">
		doubleEncode = true;
	</script>
</head>
<body>

<h2>
	Using modifiers
	<a href="index.html" class="back">Back to tests</a>
</h2>

<script type="html/template" id="tpl_example"><table class="table">
		<tr>
			<td>Original:</td>
			<td>{{ title }}</td>
		</tr>
		<tr>
			<td>Upper case:</td>
			<td>{{ title|upper }}</td>
		</tr>
		<tr>
			<td>Lower case:</td>
			<td>{{ title|lower }}</td>
		</tr>
	    <tr>
			<td>Capitalize:</td>
			<td>{{ 'oxygen precipitation in silicon'|capitalize }}</td>
		</tr>
		<tr>
			<td>Capitalize each word:</td>
			<td>{{ title|ucwords }}</td>
		</tr>
		<tr>
			<td>Default value:</td>
			<td>{{ ''|empty('Untitled article') }}</td>
		</tr>
		<tr>
			<td>Trim whitespaces:</td>
			<td>{{ '  String to be trimmed     '|trim }}, {{ 'One more//&?'|trim('/&?') }}</td>
		</tr>
		<tr>
			<td>Escape HTML:</td>
			<td>{{ '<b>Oxygen <i>precipitation</i> in silicon</b>'|esc }}</td>
		</tr>
		<tr>
			<td>Strip HTML tags:</td>
			<td>{{ '<b>Oxygen <i>precipitation</i> in silicon</b>'|stripTags }}</td>
		</tr>
		<tr>
			<td>Truncate long string:</td>
			<td>{{ title|truncate(30) }}</td>
		</tr>
        <tr>
            <td>Repeat string:</td>
            <td>{{ '-'|repeat(3) }} {{ 'Indent' }}</td>
        </tr>
        <tr>
            <td>Repeat + concatenate:</td>
            <td>{{ '-'|repeat(3)|cat(' ', 'Rank: ', rank) }}</td>
        </tr>
        <tr>
            <td>Convert newlines to HTML breaks:</td>
            <td>{{ "Convert\nnewlines\n\nto\nBR"|nl2br|esc }}</td>
        </tr>
        <tr>
            <td>Replace part of string:</td>
            <td>{{ title|replace('precipitation', 'participation')|replace('\\s', '~') }}</td>
        </tr>
        <tr>
            <td>Replace by regexp:</td>
            <td>{{ 'test 123 string'|replace("(\\d+)", '($1)') }}</td>
        </tr>
        <tr>
            <td>URL encoding:</td>
            <td>{{ 'http://abc.com/a=Hello world'|urlEncode }}</td>
        </tr>
        <tr>
            <td>URL component encoding:</td>
            <td>http://acb.com/host={{ 'http://test.com/b=1'|urlEncode(true) }}</td>
        </tr>
    </table></script>

<h3>Javascript code</h3>
<p>View commented list of modifiers in <a href="../templ.modifiers.js">templ.modifiers.js</a></p>
<pre>
    Templ.addModifiers({
        upper: function(str) {
            return str.toUpperCase();
        },

        lower: function(str) {
            return str.toLowerCase();
        },

        capitalize: function(str) {
            return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
        },

        ucwords: function(str) {
            return str.replace(/^(.)|\s(.)/g, function($1) {
                return $1.toUpperCase();
            });
        },

        empty: function(val, def) {
            return val ? val : def;
        },

        trim: function(str) {
            return str.replace(/(^\s*)|(\s*$)/g, '');
        },

        esc: function(str) {
            return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        },

        stripTags: function(str) {
            return str.replace(/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi, '');
        },

        truncate: function(str, length, repl) {
            length = length || 50;
            repl = repl || '...';
            return str.length > length ? str.slice(0, length - repl.length) + repl : String(str);
        },

        repeat: function(str, count) {
            return new Array((count || 1) + 1).join(str);
        },

        cat: function() {
            return Array.prototype.slice.call(arguments).join('');
        },

        nl2br: function(str) {
            return str.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1&lt;br/&gt;');
        },

        replace: function(str, search, replace) {
            return str.replace(new RegExp(search, 'gi'), replace);
        },

        urlEncode: function(str, full) {
            return full ? encodeURI(str) : encodeURIComponent(str);
        }
    });
</pre>

<h3>Template</h3>
<pre id="template"></pre>

<h3>Data</h3>
<pre id="data">
    {
        title: 'Oxygen precipitation in silicon',
        rank:  25
    }
</pre>

<h3>Parsed result</h3>
<pre id="output"></pre>

</body>
</html>