use mustache to abstract out html logic in javascript
This commit is contained in:
@@ -21,6 +21,7 @@ group :assets do
|
||||
gem 'therubyracer', :platforms => :ruby
|
||||
|
||||
gem 'uglifier', '>= 1.0.3'
|
||||
gem 'mustache' #, :require => 'mustache/railtie'
|
||||
end
|
||||
|
||||
gem 'jquery-rails'
|
||||
@@ -44,7 +45,8 @@ gem 'kaminari-bootstrap'
|
||||
# To use Jbuilder templates for JSON
|
||||
# gem 'jbuilder'
|
||||
group :development do
|
||||
gem 'pry'
|
||||
gem 'pry'
|
||||
gem 'pry-remote'
|
||||
gem 'rspec-rails'
|
||||
gem 'thin'
|
||||
end
|
||||
|
||||
+10
-4
@@ -50,7 +50,7 @@ GEM
|
||||
arel (3.0.2)
|
||||
bcrypt-ruby (3.0.1)
|
||||
builder (3.0.4)
|
||||
capybara (2.0.0)
|
||||
capybara (2.0.1)
|
||||
mime-types (>= 1.16)
|
||||
nokogiri (>= 1.3.3)
|
||||
rack (>= 1.0.0)
|
||||
@@ -97,7 +97,7 @@ GEM
|
||||
factory_girl_rails (4.1.0)
|
||||
factory_girl (~> 4.1.0)
|
||||
railties (>= 3.0.0)
|
||||
ffi (1.1.5)
|
||||
ffi (1.2.0)
|
||||
fssm (0.2.9)
|
||||
haml (3.1.7)
|
||||
haml-rails (0.3.5)
|
||||
@@ -124,7 +124,7 @@ GEM
|
||||
actionpack (>= 3.1)
|
||||
less (~> 2.2.0)
|
||||
libv8 (3.3.10.4)
|
||||
libwebsocket (0.1.6)
|
||||
libwebsocket (0.1.6.1)
|
||||
websocket
|
||||
mail (2.4.4)
|
||||
i18n (>= 0.4.0)
|
||||
@@ -135,6 +135,7 @@ GEM
|
||||
mini_magick (3.4)
|
||||
subexec (~> 0.2.1)
|
||||
multi_json (1.3.7)
|
||||
mustache (0.99.4)
|
||||
nokogiri (1.5.5)
|
||||
orm_adapter (0.0.7)
|
||||
polyglot (0.3.3)
|
||||
@@ -142,6 +143,9 @@ GEM
|
||||
coderay (~> 1.0.5)
|
||||
method_source (~> 0.8)
|
||||
slop (~> 3.3.1)
|
||||
pry-remote (0.1.6)
|
||||
pry (~> 0.9)
|
||||
slop (~> 3.0)
|
||||
rack (1.4.1)
|
||||
rack-cache (1.2)
|
||||
rack (>= 0.4)
|
||||
@@ -233,7 +237,7 @@ GEM
|
||||
multi_json (~> 1.0, >= 1.0.2)
|
||||
warden (1.1.1)
|
||||
rack (>= 1.0)
|
||||
websocket (1.0.3)
|
||||
websocket (1.0.4)
|
||||
xpath (1.0.0)
|
||||
nokogiri (~> 1.3)
|
||||
|
||||
@@ -253,7 +257,9 @@ DEPENDENCIES
|
||||
kaminari-bootstrap
|
||||
less-rails
|
||||
mini_magick
|
||||
mustache
|
||||
pry
|
||||
pry-remote
|
||||
rack-cors
|
||||
rails (= 3.2.9)
|
||||
rqrcode
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
//= require twitter/bootstrap/bootstrap-typeahead
|
||||
//= require twitter/bootstrap/bootstrap-affix
|
||||
//= require qwaiter
|
||||
//= require mustache
|
||||
//= require_directory .
|
||||
//= require_self
|
||||
var path_mapping = {
|
||||
@@ -176,9 +177,20 @@ $(function(){
|
||||
container.show();
|
||||
}
|
||||
$('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
|
||||
setTranslations();
|
||||
});
|
||||
function setLocale(locale){
|
||||
QMobile.setLocale(locale);
|
||||
$locale = locale;
|
||||
$('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
|
||||
setTranslations();
|
||||
}
|
||||
function Qupdate(selector){
|
||||
setTranslations(selector);
|
||||
}
|
||||
function setTranslations(selector){
|
||||
if(selector){
|
||||
$(selector).find('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
|
||||
}else{
|
||||
$('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,31 +175,35 @@ window.Quser=
|
||||
link.attr('href', root_url + src + '?'+authentication_string+'&page='+i)
|
||||
li.append(link)
|
||||
list.append(li)
|
||||
mustache: (selector, locals)->
|
||||
locs = $.extend(locals,
|
||||
currency: ->
|
||||
(val)->
|
||||
currency(Mustache.render(val, this))
|
||||
)
|
||||
Mustache.to_html($(selector).html(), locs)
|
||||
build_list_table: (body, foot, res) ->
|
||||
body.find('tr').remove()
|
||||
foot.find('tr').remove()
|
||||
if !res.orders && !res.orders.length
|
||||
alert('No orders in list')
|
||||
return
|
||||
for order in res.orders
|
||||
m_obj = res
|
||||
for order in m_obj.orders
|
||||
order_txts = []
|
||||
row = $('<tr></tr>').appendTo(body)
|
||||
row.addClass(order.state)
|
||||
#if(order.state == 'placed') row.addClass('info');
|
||||
#if(order.state == 'delivered') row.addClass('success');
|
||||
row.addClass('error') if order.state == 'cancelled'
|
||||
for product in order.products
|
||||
order_txts.push(product.name + ' (' + product['number'] + ')')
|
||||
row.append($('<td></td>').text(order_txts.join(', ')))
|
||||
row.append($('<td class="currency"></td>').html(currency(order.total_amount)))
|
||||
foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>')
|
||||
order.products_display = order_txts.join(', ')
|
||||
body.append @mustache('#active-list-orders-template', m_obj)
|
||||
foot.append @mustache('#active-list-orders-footer-template', m_obj)
|
||||
|
||||
order_selected_products: ()->
|
||||
return if $.isEmptyObject(window.active_products_list)
|
||||
h = {}
|
||||
match = window.document.URL.toString().match('table_id=([0-9a-zA-Z]+)')
|
||||
h['table_id'] = match[1] if match
|
||||
for product_id, info of window.active_products_list
|
||||
h['products['+product_id+']'] = info.number
|
||||
for product_id, number of window.active_products_list
|
||||
h['products['+product_id+']'] = number
|
||||
$.post(data_host + '/user/order_selected_products', $.extend(h, authentication_object), ((res) -> Quser.handle_response(res)), 'json')
|
||||
handle_response: (res) ->
|
||||
if(typeof(res) == 'string')
|
||||
@@ -215,21 +219,17 @@ window.Quser=
|
||||
else
|
||||
redirect_to res.location || 'list_products' if res['ok']
|
||||
build_product_list: ->
|
||||
table = $('#active-order-table')
|
||||
tbody = table.find('tbody')
|
||||
tbody = $('<tbody></tbody>').appendTo(table) unless tbody.length
|
||||
tbody.find('tr').remove()
|
||||
total = 0.0
|
||||
for product_id, info of window.active_products_list
|
||||
total += info.product.price * info.number
|
||||
row = $('<tr></tr>').attr('id', 'active-order-row-'+product_id).appendTo(tbody)
|
||||
row.append('<td>'+info.product.name+'</td>')
|
||||
row.append('<td>'+info.number+'</td>')
|
||||
row.append('<td class="currency">'+currency(info.product.price * info.number)+'</td>')
|
||||
x_btn = $('<button class="btn btn-warning btn-mini">x</button>').click(-> delete(window.active_products_list[product_id]) && Quser.build_product_list() )
|
||||
row.append($('<td></td>').append(x_btn))
|
||||
$('#active-order-total').html(currency(total))
|
||||
table.show()
|
||||
h = {products: []}
|
||||
for product_id, number of window.active_products_list
|
||||
product = window.products[product_id]
|
||||
product.number = number
|
||||
product.product_total = product.price * number
|
||||
h.products.push product
|
||||
total += product.price * number
|
||||
h.total = total
|
||||
$('#active-order-container').html @mustache('#active-order-template', h)
|
||||
Qupdate('#active-order-container')
|
||||
|
||||
load_active_list_products: ->
|
||||
Quser.populate_products_table('/user/list_products.json?'+authentication_string)
|
||||
@@ -256,40 +256,39 @@ window.Quser=
|
||||
if res.supplier_name
|
||||
$('.supplier-name').text(res.supplier_name)
|
||||
delete(res['supplier_name'])
|
||||
window.products = {}
|
||||
body.find('tr').remove()
|
||||
script_id = if include_order_buttons then '#products-category-for-order-template' else '#products-category-template'
|
||||
for category, products of res
|
||||
body.append('<tr><td colspan="4"><h4>'+category+'<h4></td></tr>')
|
||||
body.append Quser.mustache(script_id,
|
||||
category: category,
|
||||
products: products,
|
||||
include_order_buttons: include_order_buttons
|
||||
)
|
||||
for product in products
|
||||
row = $('<tr></tr>')
|
||||
row.append('<td>'+product.name+'</td>')
|
||||
if include_order_buttons
|
||||
button = $('<button class="btn btn-mini btn-primary">Add</button>')
|
||||
callback = ((prod) ->
|
||||
->
|
||||
product_count_holder = $('#order-product-count-'+prod._id)
|
||||
count = parseInt(product_count_holder.text())
|
||||
product_count_holder.text(1)
|
||||
Quser.add_product(prod, count)
|
||||
)(product)
|
||||
button.click(callback)
|
||||
order_product_count = $('<span id="order-product-count-'+product._id+'" class="order-product-count">1</span>')
|
||||
order_count_minus = $('<span class="btn btn-info btn-mini">-</span>')
|
||||
order_count_minus.click(->
|
||||
val_holder = $(this).siblings('.order-product-count')
|
||||
val = parseInt(val_holder.text())
|
||||
val_holder.text(val - 1) if val > 1
|
||||
)
|
||||
order_count_plus = $('<span class="btn btn-info btn-mini">+</span>')
|
||||
order_count_plus.click(->
|
||||
val_holder = $(this).siblings('.order-product-count')
|
||||
val = parseInt(val_holder.text())
|
||||
val_holder.text(val + 1)
|
||||
)
|
||||
row.append($('<td class="order-count-cell"></td>').append(order_count_minus).append(' ').append(order_product_count).append(' ').append(order_count_plus))
|
||||
row.append('<td>'+currency(product.price)+'</td>')
|
||||
row.append($('<td></td>').append(button)) if include_order_buttons
|
||||
body.append(row)
|
||||
window.products[product._id] = product
|
||||
)
|
||||
increment_products_counter: (product_id)->
|
||||
product_count_holder = $('#order-product-count-'+product_id)
|
||||
count = parseInt(product_count_holder.text())
|
||||
product_count_holder.text(count + 1)
|
||||
false
|
||||
lower_products_counter: (product_id)->
|
||||
product_count_holder = $('#order-product-count-'+product_id)
|
||||
count = parseInt(product_count_holder.text())
|
||||
product_count_holder.text(count - 1)
|
||||
false
|
||||
add_product_to_order: (product_id, context) ->
|
||||
product_count_holder = $('#order-product-count-'+product_id)
|
||||
count = parseInt(product_count_holder.text())
|
||||
count ||= 1
|
||||
product_count_holder.text(1)
|
||||
window.active_products_list ||= {}
|
||||
window.active_products_list[product_id] ||= 0
|
||||
window.active_products_list[product_id] += count
|
||||
delete(window.active_products_list[product_id]) if window.active_products_list[product_id] < 1
|
||||
Quser.build_product_list()
|
||||
false
|
||||
actions_for_table: (table)->
|
||||
table = JSON.parse(table) if typeof(table) == 'string'
|
||||
$.getJSON(data_host + '/user/table_info.json?'+authentication_string+'&table_id='+table.table_id, (res)->
|
||||
@@ -357,11 +356,11 @@ window.Quser=
|
||||
else
|
||||
redirect_to 'user_root', {message: 'join_request_rejected'}
|
||||
)
|
||||
add_product: (product, count) ->
|
||||
add_product: (product_id, count) ->
|
||||
count ||= 1
|
||||
window.active_products_list = {} unless window.active_products_list
|
||||
window.active_products_list[product._id] = {product: product, number: 0} unless window.active_products_list[product._id]
|
||||
window.active_products_list[product._id].number += count
|
||||
window.active_products_list ||= {}
|
||||
window.active_products_list[product_id] ||= 0
|
||||
window.active_products_list[product_id] += count
|
||||
Quser.build_product_list()
|
||||
clear_selected_products: ->
|
||||
window.active_products_list = {}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{{#orders}}
|
||||
<tr class="{{state}}">
|
||||
<td>{{products_display}}</td>
|
||||
<td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
|
||||
</tr>
|
||||
{{/orders}}
|
||||
@@ -0,0 +1 @@
|
||||
<tr><td></td><td class="currency"><strong>{{#currency}}{{total_amount}}{{/currency}}</strong></td></tr>
|
||||
@@ -0,0 +1,29 @@
|
||||
<table id="active-order-table" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-t="models.product"></th>
|
||||
<th>#</th>
|
||||
<th class="currency" data-t="basket.total"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#products}}
|
||||
<tr>
|
||||
<td>{{name}}</td>
|
||||
<td>{{number}}</td>
|
||||
<td class="currency">{{#currency}}{{product_total}}{{/currency}}</td>
|
||||
</tr>
|
||||
{{/products}}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button class="btn btn-primary" onClick="Quser.handle_active_list(function(){Quser.order_selected_products()})" data-t="selected_products.order"></button>
|
||||
<button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"></button>
|
||||
</td>
|
||||
<td class="currency"><strong id="active-order-total">{{#currency}}{{total}}{{/currency}}</strong></td>
|
||||
<td></td>
|
||||
<tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
@@ -0,0 +1,7 @@
|
||||
<tr><td colspan="2"><h4>{{category}}</h4></td></tr>
|
||||
{{#products}}
|
||||
<tr>
|
||||
<td>{{name}}</td>
|
||||
<td>{{#currency}}{{price}}{{/currency}}</td>
|
||||
</tr>
|
||||
{{/products}}
|
||||
@@ -0,0 +1,13 @@
|
||||
<tr><td colspan="4"><h4>{{category}}</h4></td></tr>
|
||||
{{#products}}
|
||||
<tr>
|
||||
<td>{{name}}</td>
|
||||
<td class="order-count-cell">
|
||||
<span class="btn btn-info btn-mini" onclick="Quser.lower_products_counter('{{_id}}')">-</span>
|
||||
<span id="order-product-count-{{_id}}" class="order-product-count">1</span>
|
||||
<span class="btn btn-info btn-mini" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
|
||||
</td>
|
||||
<td>{{#currency}}{{price}}{{/currency}}</td>
|
||||
<td><button class="btn btn-mini btn-primary" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button></td>
|
||||
</tr>
|
||||
{{/products}}
|
||||
@@ -17,7 +17,7 @@ html lang="en"
|
||||
link href="/images/apple-touch-icon.png" rel="apple-touch-icon-precomposed"
|
||||
link href="/favicon.ico" rel="shortcut icon"
|
||||
javascript:
|
||||
var data_host = '#{Rails.env == 'development' ? 'http://localhost:3000' : 'http://data.qwaiter.com' }';
|
||||
var data_host = '#{Rails.env == 'development' ? 'http://qwaiter.dev' : 'http://data.qwaiter.com' }';
|
||||
//var data_host = 'http://localhost:3000';
|
||||
//data_host = 'http://192.168.1.148:3000';
|
||||
var $locale = 'en';
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
tr
|
||||
td colspan=2 = slider_image
|
||||
tfoot
|
||||
script#active-list-orders-template[type="text/html"]= render 'active_list_orders.mustache'
|
||||
script#active-list-orders-footer-template[type="text/html"]= render 'active_list_orders_footer.mustache'
|
||||
- content_for :footer do
|
||||
javascript:
|
||||
jQuery(function(){
|
||||
|
||||
@@ -11,23 +11,10 @@
|
||||
tbody
|
||||
tr
|
||||
td= slider_image
|
||||
table#active-order-table.table.hide
|
||||
thead
|
||||
tr
|
||||
th data-t="models.product"= Product.model_name.human
|
||||
th #
|
||||
th.currency data-t="basket.total"= t('user.basket.total')
|
||||
th
|
||||
tbody
|
||||
tfoot
|
||||
tr
|
||||
td colspan=2
|
||||
button class="btn btn-primary" onClick="Quser.handle_active_list(function(){Quser.order_selected_products()})" data-t="selected_products.order"= t('selected_products.order')
|
||||
|
|
||||
button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"= t('selected_products.clear')
|
||||
td.currency
|
||||
strong#active-order-total
|
||||
td
|
||||
#active-order-container
|
||||
script#products-category-template[type="text/html"]= render 'products_category.mustache'
|
||||
script#products-category-for-order-template[type="text/html"]= render 'products_category_for_order.mustache'
|
||||
script#active-order-template[type="text/html"]= render 'active_order.mustache'
|
||||
- content_for :footer do
|
||||
javascript:
|
||||
jQuery(function(){
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
td.currency
|
||||
strong#active-order-total
|
||||
td
|
||||
script#products-category-template[type="text/html"]= render 'products_category.mustache'
|
||||
script#products-category-for-order-template[type="text/html"]= render 'products_category_for_order.mustache'
|
||||
- content_for :footer do
|
||||
javascript:
|
||||
jQuery(function(){
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
module MustacheTemplateHandler
|
||||
def self.call(template)
|
||||
if template.locals.include? :locals
|
||||
"Mustache.render(#{template.source.inspect}, locals).html_safe"
|
||||
else
|
||||
"#{template.source.inspect}.html_safe"
|
||||
end
|
||||
end
|
||||
end
|
||||
ActionView::Template.register_template_handler(:mustache, MustacheTemplateHandler)
|
||||
ActionController::Base.view_paths << Rails.root.join('app', 'templates')
|
||||
+625
@@ -0,0 +1,625 @@
|
||||
/*!
|
||||
* mustache.js - Logic-less {{mustache}} templates with JavaScript
|
||||
* http://github.com/janl/mustache.js
|
||||
*/
|
||||
|
||||
/*global define: false*/
|
||||
|
||||
var Mustache;
|
||||
|
||||
(function (exports) {
|
||||
if (typeof module !== "undefined" && module.exports) {
|
||||
module.exports = exports; // CommonJS
|
||||
} else if (typeof define === "function") {
|
||||
define(exports); // AMD
|
||||
} else {
|
||||
Mustache = exports; // <script>
|
||||
}
|
||||
}((function () {
|
||||
|
||||
var exports = {};
|
||||
|
||||
exports.name = "mustache.js";
|
||||
exports.version = "0.7.0";
|
||||
exports.tags = ["{{", "}}"];
|
||||
|
||||
exports.Scanner = Scanner;
|
||||
exports.Context = Context;
|
||||
exports.Writer = Writer;
|
||||
|
||||
var whiteRe = /\s*/;
|
||||
var spaceRe = /\s+/;
|
||||
var nonSpaceRe = /\S/;
|
||||
var eqRe = /\s*=/;
|
||||
var curlyRe = /\s*\}/;
|
||||
var tagRe = /#|\^|\/|>|\{|&|=|!/;
|
||||
|
||||
// Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
|
||||
// See https://github.com/janl/mustache.js/issues/189
|
||||
function testRe(re, string) {
|
||||
return RegExp.prototype.test.call(re, string);
|
||||
}
|
||||
|
||||
function isWhitespace(string) {
|
||||
return !testRe(nonSpaceRe, string);
|
||||
}
|
||||
|
||||
var isArray = Array.isArray || function (obj) {
|
||||
return Object.prototype.toString.call(obj) === "[object Array]";
|
||||
};
|
||||
|
||||
function escapeRe(string) {
|
||||
return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
|
||||
}
|
||||
|
||||
var entityMap = {
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
">": ">",
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
"/": '/'
|
||||
};
|
||||
|
||||
function escapeHtml(string) {
|
||||
return String(string).replace(/[&<>"'\/]/g, function (s) {
|
||||
return entityMap[s];
|
||||
});
|
||||
}
|
||||
|
||||
// Export the escaping function so that the user may override it.
|
||||
// See https://github.com/janl/mustache.js/issues/244
|
||||
exports.escape = escapeHtml;
|
||||
|
||||
function Scanner(string) {
|
||||
this.string = string;
|
||||
this.tail = string;
|
||||
this.pos = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns `true` if the tail is empty (end of string).
|
||||
*/
|
||||
Scanner.prototype.eos = function () {
|
||||
return this.tail === "";
|
||||
};
|
||||
|
||||
/**
|
||||
* Tries to match the given regular expression at the current position.
|
||||
* Returns the matched text if it can match, the empty string otherwise.
|
||||
*/
|
||||
Scanner.prototype.scan = function (re) {
|
||||
var match = this.tail.match(re);
|
||||
|
||||
if (match && match.index === 0) {
|
||||
this.tail = this.tail.substring(match[0].length);
|
||||
this.pos += match[0].length;
|
||||
return match[0];
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
/**
|
||||
* Skips all text until the given regular expression can be matched. Returns
|
||||
* the skipped string, which is the entire tail if no match can be made.
|
||||
*/
|
||||
Scanner.prototype.scanUntil = function (re) {
|
||||
var match, pos = this.tail.search(re);
|
||||
|
||||
switch (pos) {
|
||||
case -1:
|
||||
match = this.tail;
|
||||
this.pos += this.tail.length;
|
||||
this.tail = "";
|
||||
break;
|
||||
case 0:
|
||||
match = "";
|
||||
break;
|
||||
default:
|
||||
match = this.tail.substring(0, pos);
|
||||
this.tail = this.tail.substring(pos);
|
||||
this.pos += pos;
|
||||
}
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
function Context(view, parent) {
|
||||
this.view = view;
|
||||
this.parent = parent;
|
||||
this.clearCache();
|
||||
}
|
||||
|
||||
Context.make = function (view) {
|
||||
return (view instanceof Context) ? view : new Context(view);
|
||||
};
|
||||
|
||||
Context.prototype.clearCache = function () {
|
||||
this._cache = {};
|
||||
};
|
||||
|
||||
Context.prototype.push = function (view) {
|
||||
return new Context(view, this);
|
||||
};
|
||||
|
||||
Context.prototype.lookup = function (name) {
|
||||
var value = this._cache[name];
|
||||
|
||||
if (!value) {
|
||||
if (name === ".") {
|
||||
value = this.view;
|
||||
} else {
|
||||
var context = this;
|
||||
|
||||
while (context) {
|
||||
if (name.indexOf(".") > 0) {
|
||||
var names = name.split("."), i = 0;
|
||||
|
||||
value = context.view;
|
||||
|
||||
while (value && i < names.length) {
|
||||
value = value[names[i++]];
|
||||
}
|
||||
} else {
|
||||
value = context.view[name];
|
||||
}
|
||||
|
||||
if (value != null) {
|
||||
break;
|
||||
}
|
||||
|
||||
context = context.parent;
|
||||
}
|
||||
}
|
||||
|
||||
this._cache[name] = value;
|
||||
}
|
||||
|
||||
if (typeof value === "function") {
|
||||
value = value.call(this.view);
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
function Writer() {
|
||||
this.clearCache();
|
||||
}
|
||||
|
||||
Writer.prototype.clearCache = function () {
|
||||
this._cache = {};
|
||||
this._partialCache = {};
|
||||
};
|
||||
|
||||
Writer.prototype.compile = function (template, tags) {
|
||||
var fn = this._cache[template];
|
||||
|
||||
if (!fn) {
|
||||
var tokens = exports.parse(template, tags);
|
||||
fn = this._cache[template] = this.compileTokens(tokens, template);
|
||||
}
|
||||
|
||||
return fn;
|
||||
};
|
||||
|
||||
Writer.prototype.compilePartial = function (name, template, tags) {
|
||||
var fn = this.compile(template, tags);
|
||||
this._partialCache[name] = fn;
|
||||
return fn;
|
||||
};
|
||||
|
||||
Writer.prototype.compileTokens = function (tokens, template) {
|
||||
var fn = compileTokens(tokens);
|
||||
var self = this;
|
||||
|
||||
return function (view, partials) {
|
||||
if (partials) {
|
||||
if (typeof partials === "function") {
|
||||
self._loadPartial = partials;
|
||||
} else {
|
||||
for (var name in partials) {
|
||||
self.compilePartial(name, partials[name]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return fn(self, Context.make(view), template);
|
||||
};
|
||||
};
|
||||
|
||||
Writer.prototype.render = function (template, view, partials) {
|
||||
return this.compile(template)(view, partials);
|
||||
};
|
||||
|
||||
Writer.prototype._section = function (name, context, text, callback) {
|
||||
var value = context.lookup(name);
|
||||
|
||||
switch (typeof value) {
|
||||
case "object":
|
||||
if (isArray(value)) {
|
||||
var buffer = "";
|
||||
|
||||
for (var i = 0, len = value.length; i < len; ++i) {
|
||||
buffer += callback(this, context.push(value[i]));
|
||||
}
|
||||
|
||||
return buffer;
|
||||
}
|
||||
|
||||
return value ? callback(this, context.push(value)) : "";
|
||||
case "function":
|
||||
var self = this;
|
||||
var scopedRender = function (template) {
|
||||
return self.render(template, context);
|
||||
};
|
||||
|
||||
var result = value.call(context.view, text, scopedRender);
|
||||
return result != null ? result : "";
|
||||
default:
|
||||
if (value) {
|
||||
return callback(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
Writer.prototype._inverted = function (name, context, callback) {
|
||||
var value = context.lookup(name);
|
||||
|
||||
// Use JavaScript's definition of falsy. Include empty arrays.
|
||||
// See https://github.com/janl/mustache.js/issues/186
|
||||
if (!value || (isArray(value) && value.length === 0)) {
|
||||
return callback(this, context);
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
Writer.prototype._partial = function (name, context) {
|
||||
if (!(name in this._partialCache) && this._loadPartial) {
|
||||
this.compilePartial(name, this._loadPartial(name));
|
||||
}
|
||||
|
||||
var fn = this._partialCache[name];
|
||||
|
||||
return fn ? fn(context) : "";
|
||||
};
|
||||
|
||||
Writer.prototype._name = function (name, context) {
|
||||
var value = context.lookup(name);
|
||||
|
||||
if (typeof value === "function") {
|
||||
value = value.call(context.view);
|
||||
}
|
||||
|
||||
return (value == null) ? "" : String(value);
|
||||
};
|
||||
|
||||
Writer.prototype._escaped = function (name, context) {
|
||||
return exports.escape(this._name(name, context));
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the bounds of the section represented by the given `token` in
|
||||
* the original template by drilling down into nested sections to find the
|
||||
* last token that is part of that section. Returns an array of [start, end].
|
||||
*/
|
||||
function sectionBounds(token) {
|
||||
var start = token[3];
|
||||
var end = start;
|
||||
|
||||
var tokens;
|
||||
while ((tokens = token[4]) && tokens.length) {
|
||||
token = tokens[tokens.length - 1];
|
||||
end = token[3];
|
||||
}
|
||||
|
||||
return [start, end];
|
||||
}
|
||||
|
||||
/**
|
||||
* Low-level function that compiles the given `tokens` into a function
|
||||
* that accepts three arguments: a Writer, a Context, and the template.
|
||||
*/
|
||||
function compileTokens(tokens) {
|
||||
var subRenders = {};
|
||||
|
||||
function subRender(i, tokens, template) {
|
||||
if (!subRenders[i]) {
|
||||
var fn = compileTokens(tokens);
|
||||
subRenders[i] = function (writer, context) {
|
||||
return fn(writer, context, template);
|
||||
};
|
||||
}
|
||||
|
||||
return subRenders[i];
|
||||
}
|
||||
|
||||
return function (writer, context, template) {
|
||||
var buffer = "";
|
||||
var token, sectionText;
|
||||
|
||||
for (var i = 0, len = tokens.length; i < len; ++i) {
|
||||
token = tokens[i];
|
||||
|
||||
switch (token[0]) {
|
||||
case "#":
|
||||
sectionText = template.slice.apply(template, sectionBounds(token));
|
||||
buffer += writer._section(token[1], context, sectionText, subRender(i, token[4], template));
|
||||
break;
|
||||
case "^":
|
||||
buffer += writer._inverted(token[1], context, subRender(i, token[4], template));
|
||||
break;
|
||||
case ">":
|
||||
buffer += writer._partial(token[1], context);
|
||||
break;
|
||||
case "&":
|
||||
buffer += writer._name(token[1], context);
|
||||
break;
|
||||
case "name":
|
||||
buffer += writer._escaped(token[1], context);
|
||||
break;
|
||||
case "text":
|
||||
buffer += token[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return buffer;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms the given array of `tokens` into a nested tree structure where
|
||||
* tokens that represent a section have a fifth item: an array that contains
|
||||
* all tokens in that section.
|
||||
*/
|
||||
function nestTokens(tokens) {
|
||||
var tree = [];
|
||||
var collector = tree;
|
||||
var sections = [];
|
||||
var token, section;
|
||||
|
||||
for (var i = 0; i < tokens.length; ++i) {
|
||||
token = tokens[i];
|
||||
|
||||
switch (token[0]) {
|
||||
case "#":
|
||||
case "^":
|
||||
token[4] = [];
|
||||
sections.push(token);
|
||||
collector.push(token);
|
||||
collector = token[4];
|
||||
break;
|
||||
case "/":
|
||||
if (sections.length === 0) {
|
||||
throw new Error("Unopened section: " + token[1]);
|
||||
}
|
||||
|
||||
section = sections.pop();
|
||||
|
||||
if (section[1] !== token[1]) {
|
||||
throw new Error("Unclosed section: " + section[1]);
|
||||
}
|
||||
|
||||
if (sections.length > 0) {
|
||||
collector = sections[sections.length - 1][4];
|
||||
} else {
|
||||
collector = tree;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
collector.push(token);
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure there were no open sections when we're done.
|
||||
section = sections.pop();
|
||||
|
||||
if (section) {
|
||||
throw new Error("Unclosed section: " + section[1]);
|
||||
}
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/**
|
||||
* Combines the values of consecutive text tokens in the given `tokens` array
|
||||
* to a single token.
|
||||
*/
|
||||
function squashTokens(tokens) {
|
||||
var token, lastToken, squashedTokens = [];
|
||||
|
||||
for (var i = 0; i < tokens.length; ++i) {
|
||||
token = tokens[i];
|
||||
|
||||
if (lastToken && lastToken[0] === "text" && token[0] === "text") {
|
||||
lastToken[1] += token[1];
|
||||
lastToken[3] = token[3];
|
||||
} else {
|
||||
lastToken = token;
|
||||
squashedTokens.push(token);
|
||||
}
|
||||
}
|
||||
|
||||
return squashedTokens;
|
||||
}
|
||||
|
||||
function escapeTags(tags) {
|
||||
if (tags.length !== 2) {
|
||||
throw new Error("Invalid tags: " + tags.join(" "));
|
||||
}
|
||||
|
||||
return [
|
||||
new RegExp(escapeRe(tags[0]) + "\\s*"),
|
||||
new RegExp("\\s*" + escapeRe(tags[1]))
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Breaks up the given `template` string into a tree of token objects. If
|
||||
* `tags` is given here it must be an array with two string values: the
|
||||
* opening and closing tags used in the template (e.g. ["<%", "%>"]). Of
|
||||
* course, the default is to use mustaches (i.e. Mustache.tags).
|
||||
*/
|
||||
exports.parse = function (template, tags) {
|
||||
tags = tags || exports.tags;
|
||||
|
||||
var tagRes = escapeTags(tags);
|
||||
var scanner = new Scanner(template);
|
||||
|
||||
var tokens = [], // Buffer to hold the tokens
|
||||
spaces = [], // Indices of whitespace tokens on the current line
|
||||
hasTag = false, // Is there a {{tag}} on the current line?
|
||||
nonSpace = false; // Is there a non-space char on the current line?
|
||||
|
||||
// Strips all whitespace tokens array for the current line
|
||||
// if there was a {{#tag}} on it and otherwise only space.
|
||||
function stripSpace() {
|
||||
if (hasTag && !nonSpace) {
|
||||
while (spaces.length) {
|
||||
tokens.splice(spaces.pop(), 1);
|
||||
}
|
||||
} else {
|
||||
spaces = [];
|
||||
}
|
||||
|
||||
hasTag = false;
|
||||
nonSpace = false;
|
||||
}
|
||||
|
||||
var start, type, value, chr;
|
||||
|
||||
while (!scanner.eos()) {
|
||||
start = scanner.pos;
|
||||
value = scanner.scanUntil(tagRes[0]);
|
||||
|
||||
if (value) {
|
||||
for (var i = 0, len = value.length; i < len; ++i) {
|
||||
chr = value.charAt(i);
|
||||
|
||||
if (isWhitespace(chr)) {
|
||||
spaces.push(tokens.length);
|
||||
} else {
|
||||
nonSpace = true;
|
||||
}
|
||||
|
||||
tokens.push(["text", chr, start, start + 1]);
|
||||
start += 1;
|
||||
|
||||
if (chr === "\n") {
|
||||
stripSpace(); // Check for whitespace on the current line.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
start = scanner.pos;
|
||||
|
||||
// Match the opening tag.
|
||||
if (!scanner.scan(tagRes[0])) {
|
||||
break;
|
||||
}
|
||||
|
||||
hasTag = true;
|
||||
type = scanner.scan(tagRe) || "name";
|
||||
|
||||
// Skip any whitespace between tag and value.
|
||||
scanner.scan(whiteRe);
|
||||
|
||||
// Extract the tag value.
|
||||
if (type === "=") {
|
||||
value = scanner.scanUntil(eqRe);
|
||||
scanner.scan(eqRe);
|
||||
scanner.scanUntil(tagRes[1]);
|
||||
} else if (type === "{") {
|
||||
var closeRe = new RegExp("\\s*" + escapeRe("}" + tags[1]));
|
||||
value = scanner.scanUntil(closeRe);
|
||||
scanner.scan(curlyRe);
|
||||
scanner.scanUntil(tagRes[1]);
|
||||
type = "&";
|
||||
} else {
|
||||
value = scanner.scanUntil(tagRes[1]);
|
||||
}
|
||||
|
||||
// Match the closing tag.
|
||||
if (!scanner.scan(tagRes[1])) {
|
||||
throw new Error("Unclosed tag at " + scanner.pos);
|
||||
}
|
||||
|
||||
tokens.push([type, value, start, scanner.pos]);
|
||||
|
||||
if (type === "name" || type === "{" || type === "&") {
|
||||
nonSpace = true;
|
||||
}
|
||||
|
||||
// Set the tags for the next time around.
|
||||
if (type === "=") {
|
||||
tags = value.split(spaceRe);
|
||||
tagRes = escapeTags(tags);
|
||||
}
|
||||
}
|
||||
|
||||
tokens = squashTokens(tokens);
|
||||
|
||||
return nestTokens(tokens);
|
||||
};
|
||||
|
||||
// The high-level clearCache, compile, compilePartial, and render functions
|
||||
// use this default writer.
|
||||
var _writer = new Writer();
|
||||
|
||||
/**
|
||||
* Clears all cached templates and partials in the default writer.
|
||||
*/
|
||||
exports.clearCache = function () {
|
||||
return _writer.clearCache();
|
||||
};
|
||||
|
||||
/**
|
||||
* Compiles the given `template` to a reusable function using the default
|
||||
* writer.
|
||||
*/
|
||||
exports.compile = function (template, tags) {
|
||||
return _writer.compile(template, tags);
|
||||
};
|
||||
|
||||
/**
|
||||
* Compiles the partial with the given `name` and `template` to a reusable
|
||||
* function using the default writer.
|
||||
*/
|
||||
exports.compilePartial = function (name, template, tags) {
|
||||
return _writer.compilePartial(name, template, tags);
|
||||
};
|
||||
|
||||
/**
|
||||
* Compiles the given array of tokens (the output of a parse) to a reusable
|
||||
* function using the default writer.
|
||||
*/
|
||||
exports.compileTokens = function (tokens, template) {
|
||||
return _writer.compileTokens(tokens, template);
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the `template` with the given `view` and `partials` using the
|
||||
* default writer.
|
||||
*/
|
||||
exports.render = function (template, view, partials) {
|
||||
return _writer.render(template, view, partials);
|
||||
};
|
||||
|
||||
// This is here for backwards compatibility with 0.4.x.
|
||||
exports.to_html = function (template, view, partials, send) {
|
||||
var result = exports.render(template, view, partials);
|
||||
|
||||
if (typeof send === "function") {
|
||||
send(result);
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
};
|
||||
|
||||
return exports;
|
||||
|
||||
}())));
|
||||
Reference in New Issue
Block a user