diff options
author | Jochen Topf <jochen@topf.org> | 2013-01-17 11:19:45 +0100 |
---|---|---|
committer | Jochen Topf <jochen@topf.org> | 2013-01-17 11:19:45 +0100 |
commit | 809c94f3623c8b56dfaa5ee40d094615621f9ecb (patch) | |
tree | b0129d9643f79ec91552450f2ebcc88cf3d6fdc2 | |
parent | 477924a4ff306c8daab253290a6c664a3cb7445f (diff) | |
download | taginfo-809c94f3623c8b56dfaa5ee40d094615621f9ecb.tar taginfo-809c94f3623c8b56dfaa5ee40d094615621f9ecb.tar.gz |
More js fmt function cleanups
-rw-r--r-- | web/public/js/taginfo.js | 99 | ||||
-rw-r--r-- | web/viewsjs/key.js.erb | 10 | ||||
-rw-r--r-- | web/viewsjs/reports/josm_styles.js.erb | 8 | ||||
-rw-r--r-- | web/viewsjs/tag.js.erb | 10 |
4 files changed, 90 insertions, 37 deletions
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js index e9d42ee..3a22bc9 100644 --- a/web/public/js/taginfo.js +++ b/web/public/js/taginfo.js @@ -223,7 +223,21 @@ function tag(element, text, attrs) { attributes += ' ' + a + '="' + attrs[a] + '"'; } } - return '<' + element + attributes + '>' + text + '</' + element + '>'; + if (text === null) { + return '<' + element + attributes + '/>'; + } else { + return '<' + element + attributes + '>' + text + '</' + element + '>'; + } +} + +function style(styles) { + var css = ''; + + for (var s in styles) { + css += html_escape(s) + ':' + html_escape(styles[s]) + ';'; + } + + return css; } function link(url, text, attrs) { @@ -234,6 +248,10 @@ function link(url, text, attrs) { return tag('a', text, attrs); } +function img(attrs) { + return tag('img', null, attrs); +} + function span(text, c) { return tag('span', text, { 'class': c }); } @@ -254,47 +272,76 @@ function fmt_img_popup(image) { max_size = 180, thumb_size = w >= h ? max_size : parseInt(max_size / h * w), other_size = (w >= h ? parseInt(max_size / w * h) : max_size) + 2, - url = image.thumb_url_prefix + thumb_size + image.thumb_url_suffix, - title; + url = image.thumb_url_prefix + thumb_size + image.thumb_url_suffix; if (w < max_size) { - title = html_escape('<div class="img_popup" style="width: ' + w + 'px; height:' + h + 'px;"><img src="' + image.image_url + '"/></div>'); + url = image.image_url; } else { - title = html_escape('<div class="img_popup" style="width: ' + thumb_size + 'px; height:' + other_size + 'px;"><img src="' + url + '"/></div>'); + w = thumb_size; + h = other_size; } - return '<span class="overflow" tipsy_html="s" title="' + title + '">' + link_to_wiki(image.title) + '</span>'; + return tag('span', link_to_wiki(image.title), { + 'class': 'overflow', + tipsy_html: 's', + title: html_escape(tag('div', img({ src: url }), { + 'class': 'img_popup', + style: style({ width: w + 'px', height: h + 'px' }) + })) + }); } function fmt_language(code, native_name, english_name) { - return tag('span', code, { 'class': 'lang', title: native_name + ' (' + english_name + ')' }) + ' ' + native_name; + return tag('span', html_escape(code), { + 'class': 'lang', + title: html_escape(native_name + ' (' + english_name + ')') + }) + ' ' + html_escape(native_name); } function fmt_type_icon(type, on_or_off) { - return '<img src="/img/types/' + - (on_or_off ? type : 'none') + - '.16.png" alt="' + - (on_or_off ? 'yes' : 'no') + - '" width="16" height="16"/> '; + return img({ + src: '/img/types/' + (on_or_off ? encodeURIComponent(type) : 'none') + '.16.png', + alt: on_or_off ? 'yes' : 'no', + width: 16, + height: 16 + }) + ' '; } -function print_josm_value(key, value, value_bool) { - return value ? link_to_value(key, value) : value_bool ? (value_bool + ' (Boolean)') : '*'; +function fmt_josm_value(key, value, value_bool) { + return value ? link_to_value(key, value) : value_bool ? (html_escape(value_bool) + ' (Boolean)') : '*'; } -function print_josm_icon(style, icon) { - return icon ? '<img src="/api/4/josm/style/image?style=' + style + '&image=' + icon + '" title="' + icon + '" alt=""/>' : ''; +function fmt_josm_icon(style, icon) { + if (!icon) return ''; + + return img({ + src: '/api/4/josm/style/image?style=' + encodeURIComponent(style) + '&image=' + encodeURIComponent(icon), + title: html_escape(icon), + alt: '' + }); } -function print_josm_line(width, color) { - return '<div>' + (width > 0 ? '<div title="' + color + '" style="height: ' + width + 'px; margin-top: ' + (10 - Math.round(width/2)) + 'px; padding: 0; background-color: ' + color + '"></div>' : '') + '</div>'; +function fmt_josm_line(width, color) { + var inner = ''; + if (width > 0) { + inner = tag('div', '', { + title: color, + style: style({ height: width + 'px', 'margin-top': (10 - Math.round(width/2)) + 'px', padding: 0, 'background-color': color }) + }); + } + return tag('div', inner); } -function print_josm_area(color) { - return color ? '<div title="' + color + '" style="height: 18px; background-color: ' + color + '"></div>' : ''; +function fmt_josm_area(color) { + if (!color) return ''; + + return tag('div', '', { + title: html_escape(color), + style: style({ height: '18px', 'background-color': html_escape(color) }) + }); } -function print_image(type) { +function fmt_image(type) { type = type.replace(/s$/, ''); var name; if (type == 'all') { @@ -302,7 +349,13 @@ function print_image(type) { } else { name = texts.osm[type]; } - return '<img src="/img/types/' + type + '.16.png" alt="[' + name + ']" title="' + name + '" width="16" height="16"/>'; + return img({ + src: '/img/types/' + encodeURIComponent(type) + '.16.png', + alt: '[' + html_escape(name) + ']', + title: html_escape(name), + width: 16, + height: 16 + }); } // print a number with thousand separator @@ -341,7 +394,7 @@ function print_prevalent_value_list(key, list) { } function html_escape(text) { - return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, '''); + return String(text).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, '''); } function print_value_with_percent(value, fraction) { diff --git a/web/viewsjs/key.js.erb b/web/viewsjs/key.js.erb index 4b76395..fc433cc 100644 --- a/web/viewsjs/key.js.erb +++ b/web/viewsjs/key.js.erb @@ -20,7 +20,7 @@ var create_flexigrid_for = { page: 1, rows: jQuery.map(data.data, function(row, i) { return { 'cell': [ - print_image(row.type) + ' ' + texts.osm[row.type], + fmt_image(row.type) + ' ' + texts.osm[row.type], print_value_with_percent(row.count, row.count_fraction), print_with_ts(row.values) ]}; @@ -132,10 +132,10 @@ var create_flexigrid_for = { preProcess: function(data) { data.rows = jQuery.map(data.data, function(row, i) { return { 'cell': [ - print_josm_value(row.key, row.value, row.value_bool), - print_josm_icon('standard', row.icon), - print_josm_line(row.line_width, row.line_color), - print_josm_area(row.area_color) + fmt_josm_value(row.key, row.value, row.value_bool), + fmt_josm_icon('standard', row.icon), + fmt_josm_line(row.line_width, row.line_color), + fmt_josm_area(row.area_color) ] }; }); return data; diff --git a/web/viewsjs/reports/josm_styles.js.erb b/web/viewsjs/reports/josm_styles.js.erb index 157f223..4e0db90 100644 --- a/web/viewsjs/reports/josm_styles.js.erb +++ b/web/viewsjs/reports/josm_styles.js.erb @@ -21,10 +21,10 @@ function create_flexigrid_with_option(stylename) { data.rows = jQuery.map(data.data, function(row, i) { return { 'cell': [ link_to_key(row.key), - print_josm_value(row.key, row.value, row.value_bool), - print_josm_icon('standard', row.icon), - print_josm_line(row.line_width, row.line_color), - print_josm_area(row.area_color) + fmt_josm_value(row.key, row.value, row.value_bool), + fmt_josm_icon('standard', row.icon), + fmt_josm_line(row.line_width, row.line_color), + fmt_josm_area(row.area_color) ] }; }); return data; diff --git a/web/viewsjs/tag.js.erb b/web/viewsjs/tag.js.erb index fe1e7fc..03525f5 100644 --- a/web/viewsjs/tag.js.erb +++ b/web/viewsjs/tag.js.erb @@ -29,7 +29,7 @@ var create_flexigrid_for = { page: 1, rows: jQuery.map(data.data, function(row, i) { return { 'cell': [ - print_image(row.type) + ' ' + texts.osm[row.type], + fmt_image(row.type) + ' ' + texts.osm[row.type], print_value_with_percent(row.count, row.count_fraction) ]}; }) @@ -114,10 +114,10 @@ var create_flexigrid_for = { preProcess: function(data) { data.rows = jQuery.map(data.data, function(row, i) { return { 'cell': [ - print_josm_value(row.key, row.value, row.value_bool), - print_josm_icon('standard', row.icon), - print_josm_line(row.line_width, row.line_color), - print_josm_area(row.area_color) + fmt_josm_value(row.key, row.value, row.value_bool), + fmt_josm_icon('standard', row.icon), + fmt_josm_line(row.line_width, row.line_color), + fmt_josm_area(row.area_color) ] }; }); return data; |