So doing a little bit of research on to use JS in forumotion
http://help.forumotion.com/t135662-using-javascript-in-forumotionBasically it would be dom manipulation? So parsing through messages and replacing the text (we define the code) with the image. We would have to have a giant javascript json map for the names to image urls...
Originally, I was thinking bbcode,
[card]name[/card]
But, since I can't find a way of simply adding custom bbcode to forumotion, we would have to look for the card "bbcode" within posts. Instead of grabbing by ID, it would be
http://stackoverflow.com/questions/3813294/how-to-get-element-by-innertextParsing posts like that would probably get ugly and slow the site down? So I was thinking to have users post in html:
- Code:
<div class='card'>card name<div>
Some for loop looking for the class card and replacing its inner text with the image
http://stackoverflow.com/questions/2924210/replace-images-in-a-div-using-javascript- Old Approach :
- Code:
var x = document.getElementByClassName('card')
x[0].text = x[0].innerHTML;
for (var i = 0; i < x.length; i++) {
var img = document.createElement("IMG");
img.src = findURL(x[i].text.toLowerCase());
//Checks if src before replacing
if (img.src) {
x[i].replaceChild(img, x[i].childNodes[0]);
}
}
function findURL(name) {
var src = "";
var card = jsonMap[name];
if (card) {
src = "tco + path/to/img/" + card.cardID;
}
return src;
}
var jsonMap = {
"name" : { setID = "id", cardID = "id" }
}
- Second Method:
- Code:
var x = document.getElementByClassName('card')
x[0].text = x[0].innerHTML;
for (var i = 0; i < x.length; i++) {
var html = getHTML(x[i].text.toLowerCase());
//Checks if html before replacing
if (html) {
x[i].childNodes[0].nodeValue.replace(/./, html);
}
}
function getHTML(name) {
var html = "";
var card = jsonMap[name];
if (card) {
html =
'<a href=\"tco + /img/cards/chaotic-tcg/' + setID + '/big/' + cardID + '.png\" target=\"_blank\" onfocus=\"blur();\">
<img src=\"tco + /img/cards/chaotic-tcg/' + setID + '/' + cardID + '.png\" width=\"150\" alt=\"click to enlarge\" title=\"click to enlarge\">
</a>';
}
return html;
}
var jsonMap = {
"name" : { setID = "id", cardID = "id" }
}
But that still didn't work so...
http://stackoverflow.com/questions/13388379/js-how-to-replace-html-element-with-another-element-text-represented-in-stringTried using a hacky method to replace the div with the html.
- Spoiler:
- Code:
var jsonMap = {
"name": { setID: "1594", cardID: "1" }
};
var x = document.getElementsByClassName('card');
for (var i = 0; i < x.length; i++) {
var text = x[i].innerHTML;
var html = getHTML(text.toLowerCase());
//Checks if html before replacing
if (html) {
replaceTargetWith(x[i], html);
}
}
function getHTML(name) {
var html = "";
var card = jsonMap[name];
if (card) {
html =
'<a href=\"tco + /img/cards/chaotic-tcg/' + card.setID + '/big/' + card.cardID + '.png\" target=\"_blank\" onfocus=\"blur();\">' +
'<img src=\"tco + /img/cards/chaotic-tcg/' + card.setID + '/' + card.cardID + '.png\" width=\"150\" alt=\"click to enlarge\" title=\"click to enlarge\">' +
'</a>';
}
return html;
}
function replaceTargetWith(target, html) {
var i, tmp, elm, last;
tmp = document.createElement(html.indexOf('<td')!=-1?'tr':'div'));
tmp.innerHTML = html;
i = tmp.childNodes.length;
last = target;
while(i--){
target.parentNode.insertBefore((elm = tmp.childNodes[i]), last);
last = elm;
}
target.parentNode.removeChild(target);
}
Still broken...
I asked a friend, and he told me to just change the innerHTML of the div. I had already done that, and it didn't work before, but since my initial try, I had fixed some of the code. So trying it one more time finally created a working solution... rip my evening
- Code:
var jsonMap = {
"name": { setID: "1594", cardID: "1" }
};
var x = document.getElementsByClassName('card');
for (var i = 0; i < x.length; i++) {
var text = x[i].innerHTML;
var html = getHTML(text.toLowerCase());
//Checks if html before replacing
if (html) {
x[i].innerHTML = html;
}
}
function getHTML(name) {
var html = "";
var card = jsonMap[name];
if (card) {
html =
'<a href=\"tco + img/cards/chaotic-tcg/' + card.setID + '/big/' + card.cardID + '.png\" target=\"_blank\" onfocus=\"blur();\">' +
'<img src=\"tco + /img/cards/chaotic-tcg/' + card.setID + '/' + card.cardID + '.png\" width=\"150\" alt=\"click to enlarge\" title=\"click to enlarge\">' +
'</a>';
}
return html;
}
So the map would have to contain name to ID. Since the image urls are something like this:
- Code:
<a href="tco + /img/cards/chaotic-tcg/{{number}}/big/{{id}}.png" target="_blank" onfocus="blur();"><img src="/img/cards/chaotic-tcg/1586/126.png" width="150" alt="click to enlarge" title="click to enlarge">
<img src="tco + /img/cards/chaotic-tcg/{{number}}/{{id}}.png"></img>
</a>
*Replace tco with the url of tco.
The "number" is a four digit identifier that corresponds to card sets within tco
The "id" is the card (image?) id
KC, if you could write a script that crawls the card lists for each set and create the json object in the above format (jsonMap), that would be great.
The first column in the table is the id and the second is the card name (save as lowercase pls)
The url for card sets is
tco + /im/selectCard/series_id/{{setID}}/goal/
List of SetsIf you don't want to do it, I'll eventually get around to it. I spent too much time figuring the parsing already.
Lastly the working jsfiddle:
https://jsfiddle.net/epksyL69/5/