// Based on code from https://github.com/aristus/accent-folding
//
// Usage: accent_folded_hilite("Fulanilo López", 'lo')
// --> "Fulanilo López"
var accent_map = { 'ẚ': 'a', 'Á': 'a', 'á': 'a', 'À': 'a', 'à': 'a', 'Ă': 'a', 'ă': 'a', 'Ắ': 'a', 'ắ': 'a', 'Ằ': 'a', 'ằ': 'a', 'Ẵ': 'a', 'ẵ': 'a', 'Ẳ': 'a', 'ẳ': 'a', 'Â': 'a', 'â': 'a', 'Ấ': 'a', 'ấ': 'a', 'Ầ': 'a', 'ầ': 'a', 'Ẫ': 'a', 'ẫ': 'a', 'Ẩ': 'a', 'ẩ': 'a', 'Ǎ': 'a', 'ǎ': 'a', 'Å': 'a', 'å': 'a', 'Ǻ': 'a', 'ǻ': 'a', 'Ä': 'a', 'ä': 'a', 'Ǟ': 'a', 'ǟ': 'a', 'Ã': 'a', 'ã': 'a', 'Ȧ': 'a', 'ȧ': 'a', 'Ǡ': 'a', 'ǡ': 'a', 'Ą': 'a', 'ą': 'a', 'Ā': 'a', 'ā': 'a', 'Ả': 'a', 'ả': 'a', 'Ȁ': 'a', 'ȁ': 'a', 'Ȃ': 'a', 'ȃ': 'a', 'Ạ': 'a', 'ạ': 'a', 'Ặ': 'a', 'ặ': 'a', 'Ậ': 'a', 'ậ': 'a', 'Ḁ': 'a', 'ḁ': 'a', 'Ⱥ': 'a', 'ⱥ': 'a', 'Ǽ': 'a', 'ǽ': 'a', 'Ǣ': 'a', 'ǣ': 'a', 'Ḃ': 'b', 'ḃ': 'b', 'Ḅ': 'b', 'ḅ': 'b', 'Ḇ': 'b', 'ḇ': 'b', 'Ƀ': 'b', 'ƀ': 'b', 'ᵬ': 'b', 'Ɓ': 'b', 'ɓ': 'b', 'Ƃ': 'b', 'ƃ': 'b', 'Ć': 'c', 'ć': 'c', 'Ĉ': 'c', 'ĉ': 'c', 'Č': 'c', 'č': 'c', 'Ċ': 'c', 'ċ': 'c', 'Ç': 'c', 'ç': 'c', 'Ḉ': 'c', 'ḉ': 'c', 'Ȼ': 'c', 'ȼ': 'c', 'Ƈ': 'c', 'ƈ': 'c', 'ɕ': 'c', 'Ď': 'd', 'ď': 'd', 'Ḋ': 'd', 'ḋ': 'd', 'Ḑ': 'd', 'ḑ': 'd', 'Ḍ': 'd', 'ḍ': 'd', 'Ḓ': 'd', 'ḓ': 'd', 'Ḏ': 'd', 'ḏ': 'd', 'Đ': 'd', 'đ': 'd', 'ᵭ': 'd', 'Ɖ': 'd', 'ɖ': 'd', 'Ɗ': 'd', 'ɗ': 'd', 'Ƌ': 'd', 'ƌ': 'd', 'ȡ': 'd', 'ð': 'd', 'É': 'e', 'Ə': 'e', 'Ǝ': 'e', 'ǝ': 'e', 'é': 'e', 'È': 'e', 'è': 'e', 'Ĕ': 'e', 'ĕ': 'e', 'Ê': 'e', 'ê': 'e', 'Ế': 'e', 'ế': 'e', 'Ề': 'e', 'ề': 'e', 'Ễ': 'e', 'ễ': 'e', 'Ể': 'e', 'ể': 'e', 'Ě': 'e', 'ě': 'e', 'Ë': 'e', 'ë': 'e', 'Ẽ': 'e', 'ẽ': 'e', 'Ė': 'e', 'ė': 'e', 'Ȩ': 'e', 'ȩ': 'e', 'Ḝ': 'e', 'ḝ': 'e', 'Ę': 'e', 'ę': 'e', 'Ē': 'e', 'ē': 'e', 'Ḗ': 'e', 'ḗ': 'e', 'Ḕ': 'e', 'ḕ': 'e', 'Ẻ': 'e', 'ẻ': 'e', 'Ȅ': 'e', 'ȅ': 'e', 'Ȇ': 'e', 'ȇ': 'e', 'Ẹ': 'e', 'ẹ': 'e', 'Ệ': 'e', 'ệ': 'e', 'Ḙ': 'e', 'ḙ': 'e', 'Ḛ': 'e', 'ḛ': 'e', 'Ɇ': 'e', 'ɇ': 'e', 'ɚ': 'e', 'ɝ': 'e', 'Ḟ': 'f', 'ḟ': 'f', 'ᵮ': 'f', 'Ƒ': 'f', 'ƒ': 'f', 'Ǵ': 'g', 'ǵ': 'g', 'Ğ': 'g', 'ğ': 'g', 'Ĝ': 'g', 'ĝ': 'g', 'Ǧ': 'g', 'ǧ': 'g', 'Ġ': 'g', 'ġ': 'g', 'Ģ': 'g', 'ģ': 'g', 'Ḡ': 'g', 'ḡ': 'g', 'Ǥ': 'g', 'ǥ': 'g', 'Ɠ': 'g', 'ɠ': 'g', 'Ĥ': 'h', 'ĥ': 'h', 'Ȟ': 'h', 'ȟ': 'h', 'Ḧ': 'h', 'ḧ': 'h', 'Ḣ': 'h', 'ḣ': 'h', 'Ḩ': 'h', 'ḩ': 'h', 'Ḥ': 'h', 'ḥ': 'h', 'Ḫ': 'h', 'ḫ': 'h', 'H': 'h', '̱': 'h', 'ẖ': 'h', 'Ħ': 'h', 'ħ': 'h', 'Ⱨ': 'h', 'ⱨ': 'h', 'Í': 'i', 'í': 'i', 'Ì': 'i', 'ì': 'i', 'Ĭ': 'i', 'ĭ': 'i', 'Î': 'i', 'î': 'i', 'Ǐ': 'i', 'ǐ': 'i', 'Ï': 'i', 'ï': 'i', 'Ḯ': 'i', 'ḯ': 'i', 'Ĩ': 'i', 'ĩ': 'i', 'İ': 'i', 'i': 'i', 'Į': 'i', 'į': 'i', 'Ī': 'i', 'ī': 'i', 'Ỉ': 'i', 'ỉ': 'i', 'Ȉ': 'i', 'ȉ': 'i', 'Ȋ': 'i', 'ȋ': 'i', 'Ị': 'i', 'ị': 'i', 'Ḭ': 'i', 'ḭ': 'i', 'I': 'i', 'ı': 'i', 'Ɨ': 'i', 'ɨ': 'i', 'Ĵ': 'j', 'ĵ': 'j', 'J': 'j', '̌': 'j', 'ǰ': 'j', 'ȷ': 'j', 'Ɉ': 'j', 'ɉ': 'j', 'ʝ': 'j', 'ɟ': 'j', 'ʄ': 'j', 'Ḱ': 'k', 'ḱ': 'k', 'Ǩ': 'k', 'ǩ': 'k', 'Ķ': 'k', 'ķ': 'k', 'Ḳ': 'k', 'ḳ': 'k', 'Ḵ': 'k', 'ḵ': 'k', 'Ƙ': 'k', 'ƙ': 'k', 'Ⱪ': 'k', 'ⱪ': 'k', 'Ĺ': 'a', 'ĺ': 'l', 'Ľ': 'l', 'ľ': 'l', 'Ļ': 'l', 'ļ': 'l', 'Ḷ': 'l', 'ḷ': 'l', 'Ḹ': 'l', 'ḹ': 'l', 'Ḽ': 'l', 'ḽ': 'l', 'Ḻ': 'l', 'ḻ': 'l', 'Ł': 'l', 'ł': 'l', 'Ł': 'l', '̣': 'l', 'ł': 'l', '̣': 'l', 'Ŀ': 'l', 'ŀ': 'l', 'Ƚ': 'l', 'ƚ': 'l', 'Ⱡ': 'l', 'ⱡ': 'l', 'Ɫ': 'l', 'ɫ': 'l', 'ɬ': 'l', 'ɭ': 'l', 'ȴ': 'l', 'Ḿ': 'm', 'ḿ': 'm', 'Ṁ': 'm', 'ṁ': 'm', 'Ṃ': 'm', 'ṃ': 'm', 'ɱ': 'm', 'Ń': 'n', 'ń': 'n', 'Ǹ': 'n', 'ǹ': 'n', 'Ň': 'n', 'ň': 'n', 'Ñ': 'n', 'ñ': 'n', 'Ṅ': 'n', 'ṅ': 'n', 'Ņ': 'n', 'ņ': 'n', 'Ṇ': 'n', 'ṇ': 'n', 'Ṋ': 'n', 'ṋ': 'n', 'Ṉ': 'n', 'ṉ': 'n', 'Ɲ': 'n', 'ɲ': 'n', 'Ƞ': 'n', 'ƞ': 'n', 'ɳ': 'n', 'ȵ': 'n', 'N': 'n', '̈': 'n', 'n': 'n', '̈': 'n', 'Ó': 'o', 'ó': 'o', 'Ò': 'o', 'ò': 'o', 'Ŏ': 'o', 'ŏ': 'o', 'Ô': 'o', 'ô': 'o', 'Ố': 'o', 'ố': 'o', 'Ồ': 'o', 'ồ': 'o', 'Ỗ': 'o', 'ỗ': 'o', 'Ổ': 'o', 'ổ': 'o', 'Ǒ': 'o', 'ǒ': 'o', 'Ö': 'o', 'ö': 'o', 'Ȫ': 'o', 'ȫ': 'o', 'Ő': 'o', 'ő': 'o', 'Õ': 'o', 'õ': 'o', 'Ṍ': 'o', 'ṍ': 'o', 'Ṏ': 'o', 'ṏ': 'o', 'Ȭ': 'o', 'ȭ': 'o', 'Ȯ': 'o', 'ȯ': 'o', 'Ȱ': 'o', 'ȱ': 'o', 'Ø': 'o', 'ø': 'o', 'Ǿ': 'o', 'ǿ': 'o', 'Ǫ': 'o', 'ǫ': 'o', 'Ǭ': 'o', 'ǭ': 'o', 'Ō': 'o', 'ō': 'o', 'Ṓ': 'o', 'ṓ': 'o', 'Ṑ': 'o', 'ṑ': 'o', 'Ỏ': 'o', 'ỏ': 'o', 'Ȍ': 'o', 'ȍ': 'o', 'Ȏ': 'o', 'ȏ': 'o', 'Ơ': 'o', 'ơ': 'o', 'Ớ': 'o', 'ớ': 'o', 'Ờ': 'o', 'ờ': 'o', 'Ỡ': 'o', 'ỡ': 'o', 'Ở': 'o', 'ở': 'o', 'Ợ': 'o', 'ợ': 'o', 'Ọ': 'o', 'ọ': 'o', 'Ộ': 'o', 'ộ': 'o', 'Ɵ': 'o', 'ɵ': 'o', 'Ṕ': 'p', 'ṕ': 'p', 'Ṗ': 'p', 'ṗ': 'p', 'Ᵽ': 'p', 'Ƥ': 'p', 'ƥ': 'p', 'P': 'p', '̃': 'p', 'p': 'p', '̃': 'p', 'ʠ': 'q', 'Ɋ': 'q', 'ɋ': 'q', 'Ŕ': 'r', 'ŕ': 'r', 'Ř': 'r', 'ř': 'r', 'Ṙ': 'r', 'ṙ': 'r', 'Ŗ': 'r', 'ŗ': 'r', 'Ȑ': 'r', 'ȑ': 'r', 'Ȓ': 'r', 'ȓ': 'r', 'Ṛ': 'r', 'ṛ': 'r', 'Ṝ': 'r', 'ṝ': 'r', 'Ṟ': 'r', 'ṟ': 'r', 'Ɍ': 'r', 'ɍ': 'r', 'ᵲ': 'r', 'ɼ': 'r', 'Ɽ': 'r', 'ɽ': 'r', 'ɾ': 'r', 'ᵳ': 'r', 'ß': 's', 'Ś': 's', 'ś': 's', 'Ṥ': 's', 'ṥ': 's', 'Ŝ': 's', 'ŝ': 's', 'Š': 's', 'š': 's', 'Ṧ': 's', 'ṧ': 's', 'Ṡ': 's', 'ṡ': 's', 'ẛ': 's', 'Ş': 's', 'ş': 's', 'Ṣ': 's', 'ṣ': 's', 'Ṩ': 's', 'ṩ': 's', 'Ș': 's', 'ș': 's', 'ʂ': 's', 'S': 's', '̩': 's', 's': 's', '̩': 's', 'Þ': 't', 'þ': 't', 'Ť': 't', 'ť': 't', 'T': 't', '̈': 't', 'ẗ': 't', 'Ṫ': 't', 'ṫ': 't', 'Ţ': 't', 'ţ': 't', 'Ṭ': 't', 'ṭ': 't', 'Ț': 't', 'ț': 't', 'Ṱ': 't', 'ṱ': 't', 'Ṯ': 't', 'ṯ': 't', 'Ŧ': 't', 'ŧ': 't', 'Ⱦ': 't', 'ⱦ': 't', 'ᵵ': 't', 'ƫ': 't', 'Ƭ': 't', 'ƭ': 't', 'Ʈ': 't', 'ʈ': 't', 'ȶ': 't', 'Ú': 'u', 'ú': 'u', 'Ù': 'u', 'ù': 'u', 'Ŭ': 'u', 'ŭ': 'u', 'Û': 'u', 'û': 'u', 'Ǔ': 'u', 'ǔ': 'u', 'Ů': 'u', 'ů': 'u', 'Ü': 'u', 'ü': 'u', 'Ǘ': 'u', 'ǘ': 'u', 'Ǜ': 'u', 'ǜ': 'u', 'Ǚ': 'u', 'ǚ': 'u', 'Ǖ': 'u', 'ǖ': 'u', 'Ű': 'u', 'ű': 'u', 'Ũ': 'u', 'ũ': 'u', 'Ṹ': 'u', 'ṹ': 'u', 'Ų': 'u', 'ų': 'u', 'Ū': 'u', 'ū': 'u', 'Ṻ': 'u', 'ṻ': 'u', 'Ủ': 'u', 'ủ': 'u', 'Ȕ': 'u', 'ȕ': 'u', 'Ȗ': 'u', 'ȗ': 'u', 'Ư': 'u', 'ư': 'u', 'Ứ': 'u', 'ứ': 'u', 'Ừ': 'u', 'ừ': 'u', 'Ữ': 'u', 'ữ': 'u', 'Ử': 'u', 'ử': 'u', 'Ự': 'u', 'ự': 'u', 'Ụ': 'u', 'ụ': 'u', 'Ṳ': 'u', 'ṳ': 'u', 'Ṷ': 'u', 'ṷ': 'u', 'Ṵ': 'u', 'ṵ': 'u', 'Ʉ': 'u', 'ʉ': 'u', 'Ṽ': 'v', 'ṽ': 'v', 'Ṿ': 'v', 'ṿ': 'v', 'Ʋ': 'v', 'ʋ': 'v', 'Ẃ': 'w', 'ẃ': 'w', 'Ẁ': 'w', 'ẁ': 'w', 'Ŵ': 'w', 'ŵ': 'w', 'W': 'w', '̊': 'w', 'ẘ': 'w', 'Ẅ': 'w', 'ẅ': 'w', 'Ẇ': 'w', 'ẇ': 'w', 'Ẉ': 'w', 'ẉ': 'w', 'Ẍ': 'x', 'ẍ': 'x', 'Ẋ': 'x', 'ẋ': 'x', 'Ý': 'y', 'ý': 'y', 'Ỳ': 'y', 'ỳ': 'y', 'Ŷ': 'y', 'ŷ': 'y', 'Y': 'y', '̊': 'y', 'ẙ': 'y', 'Ÿ': 'y', 'ÿ': 'y', 'Ỹ': 'y', 'ỹ': 'y', 'Ẏ': 'y', 'ẏ': 'y', 'Ȳ': 'y', 'ȳ': 'y', 'Ỷ': 'y', 'ỷ': 'y', 'Ỵ': 'y', 'ỵ': 'y', 'ʏ': 'y', 'Ɏ': 'y', 'ɏ': 'y', 'Ƴ': 'y', 'ƴ': 'y', 'Ź': 'z', 'ź': 'z', 'Ẑ': 'z', 'ẑ': 'z', 'Ž': 'z', 'ž': 'z', 'Ż': 'z', 'ż': 'z', 'Ẓ': 'z', 'ẓ': 'z', 'Ẕ': 'z', 'ẕ': 'z', 'Ƶ': 'z', 'ƶ': 'z', 'Ȥ': 'z', 'ȥ': 'z', 'ʐ': 'z', 'ʑ': 'z', 'Ⱬ': 'z', 'ⱬ': 'z', 'Ǯ': 'z', 'ǯ': 'z', 'ƺ': 'z', '2': '2', '6': '6', 'B': 'B', 'F': 'F', 'J': 'J', 'N': 'N', 'R': 'R', 'V': 'V', 'Z': 'Z', 'b': 'b', 'f': 'f', 'j': 'j', 'n': 'n', 'r': 'r', 'v': 'v', 'z': 'z', '1': '1', '5': '5', '9': '9', 'A': 'A', 'E': 'E', 'I': 'I', 'M': 'M', 'Q': 'Q', 'U': 'U', 'Y': 'Y', 'a': 'a', 'e': 'e', 'i': 'i', 'm': 'm', 'q': 'q', 'u': 'u', 'y': 'y', '0': '0', '4': '4', '8': '8', 'D': 'D', 'H': 'H', 'L': 'L', 'P': 'P', 'T': 'T', 'X': 'X', 'd': 'd', 'h': 'h', 'l': 'l', 'p': 'p', 't': 't', 'x': 'x', '3': '3', '7': '7', 'C': 'C', 'G': 'G', 'K': 'K', 'O': 'O', 'S': 'S', 'W': 'W', 'c': 'c', 'g': 'g', 'k': 'k', 'o': 'o', 's': 's', 'w': 'w' };
function accent_fold(s) {
if (!s) { return ''; }
var ret = '';
for (var i = 0, len = s.length; i < len; i++) {
ret += accent_map[s[i]] || s[i];
}
return ret;
}
function accent_folded_hilite(str, q) {
var str_folded = accent_fold(str).toLowerCase().replace(/[<>]+/g, ''),
q_folded = accent_fold(q).toLowerCase().replace(/[<>]+/g, ''),
re = new RegExp(q_folded, 'g'),
hilite_hints = str_folded.replace(re, '<' + q_folded + '>'),
highlighted = '';
for (var i = 0, len = hilite_hints.length, c = '', h = '', spos = 0; i < len; i++) {
c = str[spos];
h = hilite_hints[i];
highlighted += (h === '<') ? '' : (h === '>') ? '' : (spos += 1, c);
}
return highlighted;
}
Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Tuesday, May 29, 2018
Accent folding for auto-complete
Etiquetes de comentaris:
JavaScript
Monday, December 18, 2017
Canvas based bar graphics
ChartJS 2 is an open source highly customizable Graphics Library for JavaScript.
Here I include an example to achieve this bar chart:
HTML;
JavaScript:
Just instance this class:
Here I include an example to achieve this bar chart:
HTML;
<div class="jsBarGraphDiv" data-bardata="95,50,95,50,50,10" data-colors="#F44133,#FFC300,#4BB04F"
data-labels="Jul,Ago,Set,Out,Nov,Dec">
<canvas height="215" id="barCanvas"></canvas>
</div>
JavaScript:
Just instance this class:
function BarChart(pSettings) {
var data = {
labels: [],
datasets: [{
type: 'bar',
backgroundColor: [],
data: []
}]
},
config = {
type: 'bar',
data: {},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
title: {
display: false,
},
tooltips:
{
enabled: false
},
scales: {
xAxes: [{
barThickness: 14,
gridLines: {
display: false
},
ticks: {
maxRotation: 0
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Baixo Médio Alto'
},
gridLines: {
drawTicks: true
},
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 34,
callback: function () {
return '';
}
}
}]
}
}
},
settings = {
BarGraphDiv: '.jsBarGraphDiv'
},
options = {},
aColors = [];
//
function init(pSettings) {
options = $.extend(settings, pSettings || {});
var _$BarGraphDiv = $(options.BarGraphDiv),
_graphData = _$BarGraphDiv.data('bardata');
if (_graphData) {
if (typeof _graphData == 'number') {
_graphData = [_graphData];
data.labels = [_$BarGraphDiv.data('labels')];
}
else {
_graphData = _graphData.split(',');
_graphData = _graphData.map(function (el) { return Number(el) });
data.labels = _$BarGraphDiv.data('labels').split(',');
}
aColors = _$BarGraphDiv.data('colors').split(',');
data.datasets[0].backgroundColor = _graphData.map(function (el, i) {
return aColors[Math.floor(el / 33.4)];
});
data.datasets[0].data = _graphData;
config.data = data;
var ctx = $(options.BarGraphDiv).find('canvas')[0].getContext('2d');
new Chart(ctx, config);
var _cssLowMidHigh = ['low', 'mid', 'high'][Math.floor(_graphData[_graphData.length - 1] / 33.4)];
_$BarGraphDiv.addClass(_cssLowMidHigh);
}
}
//
init(pSettings);
}
Etiquetes de comentaris:
ChartJS,
Graphics,
JavaScript
Wednesday, September 27, 2017
Get int or float number from a string
Number("this a test (12.75%)".match(/\d*\.*\d+/g)[0]); // Output: 12.75
Etiquetes de comentaris:
JavaScript,
RegExp
Wednesday, October 28, 2015
Extracts a word which starts with a given substring
// extracts js_* class
$(anySelector).attr('class').match(/\bjs_[^\b]*?\b/)[0];
$(anySelector).attr('class').match(/\bjs_[^\b]*?\b/)[0];
Etiquetes de comentaris:
JavaScript,
jquery UI,
RegExp
Wednesday, June 17, 2015
Remove duplicates in an array
[1,1,2,2,3,3,4].reduce(function (a,b) { if (a.indexOf(b) < 0) a.push(b); return a;},[]);
will return [1,2,3,4]
In case of arrays composed of JSON objects use this expression for the "if"clause:
(JSON.stringify(a).indexOf(JSON.stringify(b))
Etiquetes de comentaris:
JavaScript
Thursday, March 26, 2015
PURE - Javascript Template Engine
Write your templates in pure HTML
Clean of any inline logic or special tags
CSS selectors are used to bridge the HTML with Javascript actions
Providing a radical separation between the representation and the logicHere we explain why we did PURE back in 2008
And you can ask your questions to the user group
Download pure.js on Github
Where to use PURE?
PURE can be used where Javascript and DOM are available
It can be run server side, but shines client side
If a Javascript library is present in the page( jQuery, dojo, domassistant, mootools, prototype, sizzle or sly )
PURE will automatically extend it with the methods described here: http://beebole.com/pure/
Clean of any inline logic or special tags
CSS selectors are used to bridge the HTML with Javascript actions
Providing a radical separation between the representation and the logicHere we explain why we did PURE back in 2008
And you can ask your questions to the user group
Download pure.js on Github
Where to use PURE?
PURE can be used where Javascript and DOM are available
It can be run server side, but shines client side
If a Javascript library is present in the page( jQuery, dojo, domassistant, mootools, prototype, sizzle or sly )
PURE will automatically extend it with the methods described here: http://beebole.com/pure/
I've written myself a demo. Pay special attention to auxiliar function tmplHandle().
Etiquetes de comentaris:
JavaScript,
jquery,
templating
Wednesday, October 29, 2014
Code optimizations and new standards
Most of the times the use of some new standards of JavasScript, known as ECMAScript, is constraint by browser compatibility. The latest browsers along with IE from version 9 implement many or all of these new features. See ECMAScript 5 compatibility table.
This post is also about code optimization. One of the most important point to have in mind at coding in JavaScript is to avoid unnecessary repetitions to accelerate execution and save bytes of code.
Lets see some examples of these concepts. These functions do the same in different ways:
Not optimized code:
Optimized code with JavaScript:
Optimized code with jQuery:
Optimized code with JavaScript (ECMAScript 5):
This post is also about code optimization. One of the most important point to have in mind at coding in JavaScript is to avoid unnecessary repetitions to accelerate execution and save bytes of code.
Lets see some examples of these concepts. These functions do the same in different ways:
Not optimized code:
var retval = false;
if ((window.location.href.toLowerCase().indexOf('/candidate1/list.aspx') > -1) ||
(window.location.href.toLowerCase().indexOf('/defaultcompany.aspx') > -1) ||
(window.location.href.toLowerCase().indexOf('/defaultcompanyv2.aspx') > -1)) {
retval = true;
}
return retval;
Optimized code with JavaScript:
var retval = false,
_href = window.location.href.toLowerCase(),
_a = ['/candidate1/list.aspx','/defaultcompany.aspx','/defaultcompanyv2.aspx'];
for (var i = 0; !retval && i < _a.length; i++) retval = (-1 != _href.indexOf(_a[i]));
return retval;
Optimized code with jQuery:
var _href = window.location.href.toLowerCase();
return $.map(['/candidate1/list.aspx','/defaultcompany.aspx','/defaultcompanyv2.aspx'],function (e) { return _href.indexOf(e) != -1 ? 1 : null; }).length;
Optimized code with JavaScript (ECMAScript 5):
var _href = window.location.href.toLowerCase(),
return ['/candidate1/list.aspx', '/defaultcompany.aspx', '/defaultcompanyv2.aspx'].some(function (e) {
return -1 != _href.indexOf(e);
});
Etiquetes de comentaris:
JavaScript,
jquery
Wednesday, October 15, 2014
Thursday, September 25, 2014
Cross-browser Image preview
To preview an image in browser before uploading it to server.
Tested in HTML5 browsers and IE > 7.
JSFiddle issues an error in IE < 10 so I put the code in here.
jQuery is used in this example.
CSS:
JavaScript:
HTML:
Tested in HTML5 browsers and IE > 7.
JSFiddle issues an error in IE < 10 so I put the code in here.
jQuery is used in this example.
CSS:
.imgLogoIE
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:500px;
height:400px;
}
JavaScript:
var v = navigator.appVersion,
p = v.indexOf('MSIE'),
IElt10 = (p != -1 && parseFloat(v.substr(p+5)) < 10);
function LoadPreviewImg (pFile) {
var _$imgLogo = $('.js_imgLogo');
if (IElt10) {
if ('IMG' == _$imgLogo.prop('nodeName')) {
_$imgLogo.replaceWith('
');
}
setTimeout(function () {
$('.js_imgLogo').get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = pFile.value
},50);
}
else if (pFile.files && pFile.files[0]) {
var _reader = new FileReader();
_reader.onload = function (e) {
_$imgLogo.attr('src', e.target.result);
}
_reader.onerror = function (e) {
_$imgLogo.hide();
}
_reader.readAsDataURL(pFile.files[0]);
}
}
HTML:
<form id="form1">
preview:
<input onchange="LoadPreviewImg(this)" type="file" />
<img class="js_imgLogo" />
</form>
preview:
<input onchange="LoadPreviewImg(this)" type="file" />
<img class="js_imgLogo" />
</form>
Etiquetes de comentaris:
CSS,
JavaScript,
jquery
Tuesday, July 15, 2014
Class definitions for lesser code
In order to minimize the amount of code is preferable to use private attributes and methods (AA&MM).
The next example shows how to do it in a simple way. You can see how to access either private or public AA&MM.
The accessibility boundary of variables in JavaScript starts from the point where they are declared to every function invoked from that point including callbacks and either setTimeout() or setInterval().
If you have to define an instantiable class you may use the definition of the dynamic class called MainClass in this example:
The accessibility boundary of variables in JavaScript starts from the point where they are declared to every function invoked from that point including callbacks and either setTimeout() or setInterval().
If you have to define an instantiable class you may use the definition of the dynamic class called MainClass in this example:
function MainClass () {
// ------------------------------------ Private attributes & methods
var me = this,
privateVar = 1;
function init() {
bindEvents();
}
function bindEvents() {
$('.aSelector').on('click', ClickOn_aSelector);
}
function ClickOn_aSelector(e) {
e.preventDefault();
privateFunc();
me.publicMethod();
// "me." allows to access public methods or attributes
// from either private or public methods.
}
function privateFunc () {
console.log(privateVar);
console.log(me.publicAtt);
}
// ------------------------------------ Public attributes & methods
this.publicAtt = 2;
this.publicMethod = function () {
var _myself = this;
privateFunc();
_myself.publicMethod2(3)
};
this.publicMethod2 = function (pNum) {
console.log (privateVar + this.publicAtt + pNum); // 6
};
//
init();
};
var oMainClass = new MainClass();
oMainClass.publicMethod();
Etiquetes de comentaris:
JavaScript,
patterns
Tuesday, February 18, 2014
Shuffle an array
A very simple and useful technique:
aIndexes.sort(function () {
return .5 - Math.random();
});
Etiquetes de comentaris:
JavaScript
Subscribe to:
Posts (Atom)
