Hi i have build my own text-wrap class. and i've run into a small problem it is kind off slow, because my script that checks the size of the font puts the string into a div with the classes but thats on a big scale intens for the DOM. so is there another way?
as you can see i tryed to build a cache controller but that makes it slower
var textMetrics = function (appendTo) {
var span;
var cache = [];
this.init = function () {
span = document.createElement("span");
appendTo.appendChild(span);
span.style.position = 'absolute';
span.style.left = -9999 + 'px';
};
this.checkCache = function (word, style) {
for (var i = 0; i < cache.length; i++) {
if (cache[i].word == word) {
return cache[i].value;
}
}
return false;
};
this.addCache = function (word, style, value) {
cache.push({
"word": word,
"style": style,
"value": value
});
};
this.getSize = function (word, style) {
word = word.replaceAll(" ", " ");
//var inCache = this.checkCache(word, style);
var inCache = false;
if (inCache === false) {
span.innerHTML = word;
for (var i in style) {
span.style[i] = style[i];
}
var coords = {
"width": span.offsetWidth,
"height": span.offsetHeight
};
for (var i in style) {
span.style[i] = "";
}
span.innerHTML = "";
this.addCache(word, style, coords);
return coords;
}
else {
return inCache;
}
};
this.init();
};
You could consider making your cache a dictionary (JS object) instead of a list:
var cache = {};
this.addCache = function (word, style, value) {
cache[word] = value;
};
this.checkCache = function (word, style) {
var value = cache[word];
if (typeof value != "undefined")
return value;
return false;
};
I didn't really get what your style variable is about — maybe you should add it to the cache key as well.
Since you are basically using a dictionary the best format for your cache is a simple javascript object that behaves as a hashmap.
var cache = {};
You can then assign words to it as follows:
this.addCache = function (word, style, value) {
cache[word] = {style: style, value: value};
};
And check them as follows:
this.checkCache = function (word) {
return cache[word];
};
So then you can:
var cachedItem = this.checkCache(word);
if (cachedItem ) {
alert(cachedItem.value);
}
This should speed up your cache searches considerably as you dont have to loop through an array that keeps getting larger and larger.
You could try to approximate the text width using the widths of individual characters. This will introduce problems when there's special kerning for combinations like "ff", of course.
I wrote a function that caches the widths of pairs of characters to accommodate for that. Thus, only a constant number of DOM manipulations is needed. It's on http://jsfiddle.net/wbL9Q/6/ and https://gist.github.com/1562233 (too much code for here).
However, while this worked for me in Safari (Mac), it did not give the correct results in Firefox. Apparently, some even more complex kerning is applied there. Maybe extending the algorithm to triples of characters (or even more) could help.
(Sorry for posting my 2nd answer, but I thought it makes sense because it's a completely different aspect.)
Related
Intro
I have a search bar I implemented into my website which searches through member cards to find matching cards. I also used Twitter's typeahead.js for this. The results are updated as you type, so I set an event listener on the input box - $('#members-search .typeahead').on("input", changeFunction); I also needed to set a click event listener on the suggestions, as I did - $('.tt-suggestion').on("click", changeFunction);
Problem
It seems like the suggestion boxes are created on the fly, so you can't set an event listener for all (or even any!) of them at the beginning. My first idea was to fire a function when an element was appended in the containing div. However, you would need an event listener for that, and I couldn't find one. Is there any way to implement this?
Code
The JavaScript:
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var children = document.getElementById("members-list").children;
var names = [];
var whoIsWho = [];
var selected = [];
var listOfAttributeNames = ["data-member-name", "data-member-username", "data-member-nickname"];
for(var i = 0; i < children.length; i++){
for(var j = 0; j < listOfAttributeNames.length; j++){
var a;
if(a = children[i].getAttribute(listOfAttributeNames[j])){
names.push(a);
whoIsWho.push(children[i]);
}
}
}
$('#members-search .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'names',
source: substringMatcher(names)
});
var previousValue = "";
function changeFunction(e){
var v;
if($("#members-search .typeahead").val() === ""){
previousValue = "";
}
else if(((v = $('#members-search .typeahead+pre').text())) !== previousValue){
previousValue = v;
}
else if(v !== $("#members-search .typeahead").val()){
previousValue = $("#members-search .typeahead").val();
}
selected = [];
v = $('#members-search .typeahead+pre').text();
for(var i = 0; i < names.length; i++){;
if(!(new RegExp(v, "i").test(names[i])) && !(selected.includes(whoIsWho[i]))){
whoIsWho[i].style.display = "none";
}
else{
selected.push(whoIsWho[i]);
whoIsWho[i].style.display = "block";
}
}
}
$('#members-search .typeahead').on("input", changeFunction);
$('.tt-suggestion').on("click", changeFunction);
The (important) HTML:
<div id="members-search">
<input class="typeahead" type="text" placeholder="Search">
</div>
Alternate, Backup Solutions
I could copy the bloodhound script over to my code and modify where the elements are appended, but I'd rather not, as it uses this weird format of IIFE that I won't take the time to understand. Or is there another solution and this question is part of the X/Y problem?
It turns out I had the wrong approach. I just added an event listener to the current suggestions every time the input value was changed.
$('#members-search .typeahead').on("input", function(){
$('.tt-suggestion').on("click", changeFunction);
});
I have the following array that contains user data. There are only about 20 elements in thsi data. I get this from my server and it is stored locally:
var userdata1 =
[
{"id":"527ddbd5-14d3-4fb9-a7ae-374e66f635d4","name":"xxx"},
{"id":"e87c05bc-8305-45d0-ba07-3dd24438ba8b","name":"yyy"}
]
I have been using the following function to get the user name from my userProfiles array.
$scope.getUser = function (userId) {
if (userId && $scope.option.userProfiles)
for (var i = 0; i < $scope.option.userProfiles.length; i++)
if ($scope.option.userProfiles[i].id === userId)
return $scope.option.userProfiles[i].name;
return '';
}
I was looking for a more efficient way to get the name so I asked this question:
How can I check an array for the first occurence where a field matches using _lodash?
Now I am wondering. Is there another way that I could store my data to make it easier to access? One person suggested this
in the comments:
var usersdata2 = {someuserid: {id: "someusersid", name: 'Some Name'},
anotheruserid: {id: "anotheruserid", name: 'Another Name'}};
If I was to do this then would it be more efficient, how could I change my data from the first form userdata1 into userdata2
and how could I access it?
You can transform your array as follows:
var userMap = userdata1.reduce(function(rv, v) {
rv[v.id] = v;
return rv;
}, {});
That will give you an object that maps the "id" values onto the original object. You would then access the values like this:
var someUser = userMap[ someUserId ];
This set up will be much more efficient than your array, because finding an entry takes an amount of time proportional to the size of the "id" strings themselves (plus a little). In your version, you have to search through (on average) half the list for each lookup. For a small set of records, the difference would be unimportant, but if you've got hundreds or thousands of them the difference will be huge.
The .reduce() function is not available in older browsers, but there's a fill-in patch available on the MDN documentation site:
// copied from MDN
if ('function' !== typeof Array.prototype.reduce) {
Array.prototype.reduce = function(callback, opt_initialValue){
'use strict';
if (null === this || 'undefined' === typeof this) {
// At the moment all modern browsers, that support strict mode, have
// native implementation of Array.prototype.reduce. For instance, IE8
// does not support strict mode, so this check is actually useless.
throw new TypeError(
'Array.prototype.reduce called on null or undefined');
}
if ('function' !== typeof callback) {
throw new TypeError(callback + ' is not a function');
}
var index, value,
length = this.length >>> 0,
isValueSet = false;
if (1 < arguments.length) {
value = opt_initialValue;
isValueSet = true;
}
for (index = 0; length > index; ++index) {
if (this.hasOwnProperty(index)) {
if (isValueSet) {
value = callback(value, this[index], index, this);
}
else {
value = this[index];
isValueSet = true;
}
}
}
if (!isValueSet) {
throw new TypeError('Reduce of empty array with no initial value');
}
return value;
};
}
Try something like this:
var usernames = {};
userdata1.forEach(function(u) {usernames[u.id] = u.name;});
alert(usernames[userId]);
(You'll either need a shim or a manual for loop to support older browsers - the above is intended to just give you an idea on how you can simplify your access)
To make the access by ID more efficient copy the data into an object:
var userdata1 =
[
{"id":"527ddbd5-14d3-4fb9-a7ae-374e66f635d4","name":"xxx"},
{"id":"e87c05bc-8305-45d0-ba07-3dd24438ba8b","name":"yyy"}
];
var userIdMap = {};
for (var i = 0; i < userdata1.length; i++) {
var item = userdata1[i];
userIdMap[item.id] = item;
}
which means the function is now:
$scope.getUser = function (userId) {
if (userId && $scope.option.userProfiles) {
var user = userIdMap[userId];
if(user)
return user.name;
}
return '';
}
Here is a function that puts your array items into a lookup object:
function arrayToLookup(array, idProperty) {
var result = {};
for (var i = array.length - 1; i >= 0; i--) {
result[array[i][idProperty]] = array[i];
}
return result;
}
Usage would be like this, for your example:
var userdata1 =
[
{"id":"527ddbd5-14d3-4fb9-a7ae-374e66f635d4","name":"xxx"},
{"id":"e87c05bc-8305-45d0-ba07-3dd24438ba8b","name":"yyy"}
]
// create a lookup object of your array.
// second parameter is the name of the property to use as the keys
var userDataLookup = arrayToLookup(userdata1, 'id');
// this is how you get a specific user out of the lookup
var user = userDataLookup["527ddbd5-14d3-4fb9-a7ae-374e66f635d4"];
I'm teaching myself JavaScript and JQuery and working through a simple Glossary app as I go. Currently my glossary terms are in two json files (one for terms and one for acronyms). I have a page with text on it and code to make a definition display in an alert when I click on a word that is available in the glossary of terms or glossary of acronyms. That part is working. What I would like to do is to be able to change the style of each word in the text that has a matching definition (color, underline, etc). I think I need to use a loop to check if the word in in the glossary (I can already do that) and then apply but I'm not really sure the span works when doing it dynamically. The one span tag in my code is modified example that had been posted in another question here and I have it working for me, I'm just not too certain how it does what it does. Anyone have time to get me going in the right direction?
//breaks the paragraph html into word by word targets
var p = $('p#paragraph');
var words;
p.html(function(index, oldHtml) {
words = oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
return words;
});
//when word is clicked checks to see if word in the glossary, if so displays alert box with word and definition
p.click(function(event) {
if (this.id != event.target.id) {
var termNeeded = event.target.innerHTML;
//checks Terms json first
var checkAcronyms = true;
for (var i = 0; i < jsonTerms.GlossaryTerms.length; i++) {
var obj = jsonTerms.GlossaryTerms[i];
if (obj.term == termNeeded) {
alert(obj.term + ": " + obj.definition);
checkAcronyms = false;
break;
};
};
//if the word is not in the terms, then checks in the acronyms
if (checkAcronyms == true){
for (var i = 0; i < jsonAcronyms.GlossaryAcronyms.length; i++) {
var obj = jsonAcronyms.GlossaryAcronyms[i];
if (obj.term == termNeeded) {
alert(obj.term + ": " + obj.definition);
break;
};
};
};
};
});
//brings in the JSON data
var jsonTerms;
$.getJSON("GlossaryTerms.json", function(data) {
jsonTerms = data;
//console.log(jsonTerms);
});
var jsonAcronyms;
$.getJSON("GlossaryAcronyms.json", function(data) {
jsonAcronyms = data;
//console.log(jsonAcronyms);
});
Maybe something like this would do the trick:
I changed your code around a bit, and please beware that it is untested.
You would have to define a CSS style with the name "defined", which will indicate that the word has a definition.
I extracted your logic into a separate function for reuse. Also, created the addStyleToWords function, which should iterate over all your words, check if they have a definition, and if they do, then add an extra class to that element.
var jsonTerms;
var jsonAcronyms;
function checkWord(termNeeded) {
//checks Terms json first
for (var i = 0; i < jsonTerms.GlossaryTerms.length; i++) {
var obj = jsonTerms.GlossaryTerms[i];
if (obj.term == termNeeded) {
return obj;
}
}
//if the word is not in the terms, then checks in the acronyms
for (var i = 0; i < jsonAcronyms.GlossaryAcronyms.length; i++) {
var obj = jsonAcronyms.GlossaryAcronyms[i];
if (obj.term == termNeeded) {
return obj;
}
}
return null;
}
function addStyleToWords() {
$(".word").each(function() {
var el = $(this);
var obj = checkWord(el.text());
if (obj != null) el.addClass("defined");
});
}
//breaks the paragraph html into word by word targets
var p = $('p#paragraph');
p.html(function(index, oldHtml) {
return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
});
//when word is clicked checks to see if word in the glossary, if so displays alert box with word and definition
p.click(function(event) {
if (this.id != event.target.id) {
var obj = checkWord(event.target.innerHTML);
if (obj != null) alert(obj.term + ": " + obj.definition);
});
//brings in the JSON data
$.getJSON("GlossaryTerms.json", function(data) {
jsonTerms = data;
$.getJSON("GlossaryAcronyms.json", function(data) {
jsonAcronyms = data;
addStyleToWords();
});
});
Once you have added in your spans and the JSON data has loaded you need to loop through each
word span testing them for matches as you go.
p.find('span.word').each(function(){
// "this" now refers to the span element
var txt=this.innerHTML;
if(isInGlossary(txt)){
$(this).addClass('in_glossary');
}
})
You will need to define the isInGlossary(term) function, pretty much what you have done already in your p.click code.
I don't get it...
To if I understand you correctly, look at: JQuery addClass
My Suggestions:
If you want to iterate over each work in the paragraph, then, in your click handler find each span tag using $('p#paragraph).find('span').each(function(){...});
In your each function, get the work with $(this).html()
To style your word, add a class or css to $(this). see:JQuery addClass
Rather return your JSONArray as a JSONObject (much like an associative array) with the word being the property and the description being the value, that way you can search through it like so: var definition = json[word].
Need to get all direct nodes from DOM element and don't actually know, how it many and what kind they are.
.contents()?
Ok, let's see..
$('<div />').html('<p>p</p>').contents() ->
[<p>p</p>]
Ok.
$('<div />').html('textNode').contents() -> []
WTF?
$('<div />').html('textNode').append('another').contents() ->
["textNode", "another"]
Ok, so what about single text node?
I don't know if this is helpful. A while ago I built a Document Fragment generator using JSON styled input. I also wrote a (somewhat working) reverse function for it so you could turn your nodeList into a JSON string.
https://gist.github.com/2313580
var reverseFunction = function(DOM /* DOM tree or nodeList */) {
var tree = [];[].forEach.call(DOM, function(obj) {
if (obj instanceof Text) {
tree.push({
'textContent': obj.textContent
});
} else {
var tmp = {};
tmp['tagName'] = obj.nodeName;
for( var data in obj.dataset ) {
tmp['data-' + data] = obj.dataset[data];
}
for (var i = 0, l = obj.attributes.length; i < l; i++) {
var key = obj.attributes[i].name,
val;
if (key.indexOf('data-') === -1) {
switch (key) {
case ('class'):
key = 'className';
break;
case ('style'):
val = {};
obj.attributes[i].value.split(';').forEach(function(rule) {
var parts = rule.split(':');
val[parts[0]] = parts[1];
});
break;
};
tmp[key] = val || obj.attributes[i].value;
}
}
if (obj.childNodes.length > 0) {
tmp['childNodes'] = reverseFunction(obj.childNodes);
}
tree.push(tmp);
}
});
return tree;
};
This does find textNodes and separates them... You may be able to extract something from it.
Update: to answer a comment in your question above...
var div = document.createElement('div');
div.appendChild(document.createTextNode('dsf'));
console.log( div.childNodes.length, div.childNodes, div.childNodes[0].textContent);
I hope this makes a bit more sense to you know. The array appears empty in the console but it is not. check the length and attempt to access it and you will see.
.contents() is concerned with DOM nodes. That string in the 2nd example is not a DOM element.
Racking my brains on this one. I have the code below: the first stages of a JavaScript game. All the objects are well-defined and I'm using jQuery for DOM interaction. The puzzle is created with the following JS code:
var mypuzzle = new puzzle("{solution:'5+6+89',equations:[['5+3=8',23,23],['5+1=6',150,23],['5+3=6',230,23]]}");
However, the loop at the bottom of the code won't go further than the first iteration. Any idea why? No errors are thrown at all.
function equationBox(equation, top, left) {//draggable equation box
this.reposition = function() {
this.top = 0;
this.left = 0;
}
this.top = 0;//make random
this.left = 0;//make random
this.equation = equation;
if(top && left) {
this.top = top;
this.left = left;
}
this.content = this.equation.LHS.string + '<span> = </span>' + this.equation.RHS.string;
this.DOM = $('<li>').html(this.content);
}
function puzzle(json) {
this.addEquationBox = function(equationBox) {
$('#puzzle #equations').append(equationBox.DOM);
}
this.init = function() {
//this.drawPuzzleBox();
this.json = JSON.parse(json);
this.solution = new expression(this.json.solution || '');
this.equations = this.json.equations || [];
var iterations = this.equations.length;
for(i=0;i<iterations;i++)
{
console.log(i);
this.addEquationBox(new equationBox(stringToEquation(this.equations[i][0]),this.equations[i][1], this.equations[i][2]));
}
}
this.init();
}
Possibly your failure to scope your counter variable is doing it, especially if you make a habit of it (since you're using the global variable of that name, and any loops you wrote in any code you're calling may be doing the same thing). Try:
for(var i=0;i<iterations;i++)
because this.equations = this.json.equations || [] , and, since this.json.equations is undefined, it get assigned to []
Assuming you're using JSON.parse as defined at https://github.com/douglascrockford/JSON-js/blob/master/json2.js, it appears that your json string is not parsing properly:
var string1 = "{solution:'5+6+89',equations:[['5+3=8',23,23],['5+1=6',150,23],['5+3=6',230,23]]}"
JSON.parse(string1); // throws SyntaxError("JSON.parse")
When I use JSON.stringify, defined in the same file, to create a JSON string from your object:
var obj = {solution:'5+6+89',equations:[['5+3=8',23,23],['5+1=6',150,23],['5+3=6',230,23]]}
var string2 = JSON.stringify(obj);
// {"solution":"5+6+89","equations":[["5+3=8",23,23],["5+1=6",150,23],["5+3=6",230,23]]}
JSON.parse(string2); // returns a proper object
Note that the string that JSON.stringify is creating is different than the one you are trying to use, which might be the cause of your problem.