Tilsigtet brugeroplevelse
Formålet er at give en bruger af Eksperten en ny knap i browserens favoritbar. Den menubar, de fleste browsere er udstyret med til at gemme de oftest benyttede favoritter/bookmarks i.
Et klik på knappen, mens brugeren befinder sig på en spørgsmålsside, implementerer en knapbar lige over tekstfeltet i bunden af siden. Den indeholder en række knapper, som ved klik indsætter de mest anvendelige BB-koder i feltet.
Ligesom med enhver anden editor, kan man placere cursoren et sted i feltet og klikke en formateringsknap. Herved indsættes de valgte BB-tags, og cursoren placeres automatisk mellem de to tags. Klikkes knappen, mens der er udvalgt tekst i feltet, bliver de to tags indsat, så de omkranser den udvalgte tekst. Cursoren placeres normalt efter slut-tagget - men er der tale om color-, font- eller url-tags, bliver cursoren anbragt efter lighedstegnet i start-tagget. Intentionen er at få anbragt cursoren, hvor der mest naturligt/sandsynligt vil være brug for den.
Metode
Knappen i browseren oprettes ved hjælp af et link med en bookmarklet (se Links nedenfor). Den indskriver et JavaScript element i bunden af sidens BODY. Elementets src-attribut refererer til en JS-fil - expbbedit.js - som ligger på en webserver. Det kan være en server på WWW eller på en lokal server på PC'en. Hovedsagen er, at den hentes via HTTP-protokollen. Lægges filen på en lokal server, skal denne naturligvis være tændt, når editoren skal bruges.
Når scriptet er hentet, indskriver det knapbaren, bestående af et DIV - indeholdende knapper i form af DIVs, som er styled med Ekspertens eget CSS for knapper. Knapperne har tooltips, der beskriver anvendelse og shortcut.
'Installering'
Begynd med at kopiere denne kode over i en tom JS-fil. Gem den som expbbedit.js, og læg den på en server:
(function(){ // ExpBBEdit 1.2
// Hvis vi er på en spørgsmålsside
var elmTxt = document.getElementById("newreplytext");
// Hvis vi er på en guideside
if (!elmTxt) elmTxt = document.getElementById("text");
// Hvis vi er på en internpostside
if (!elmTxt) elmTxt = document.getElementsByName("message")[0];
// Hvis vi er på en Opret Spørgsmålsside
if (!elmTxt) elmTxt = document.getElementById("newquestiontext");
// Hvis vi er på en anden side, stopper festen her!
if (!elmTxt) return;
var aBtns = [
["B", "Bold (Ctrl+B)", "b"],
["I", "Italic (Ctrl+I)", "i"],
["@", "@UserName: (Ctrl+A)", "@"],
["BOX", "Blue Box (Ctrl+D)", "div"],
["PRE", "Preform/Monosp\nText (Ctrl+M)", "pre"],
["URL", "URL (Ctrl+U)", "url"],
["FNT", "Font (Ctrl+F)", "font"],
["SIZ", "Font Size (Ctrl+S)", "size"],
["COL", "Color/Hue (Ctrl+H)", "color"]
];
var oCSS = {
bar: {
height: "28px",
background: "#cbcbcb",
cursor: "default"
},
btn: {
cssFloat: "left",
float: "left",
width: "35px",
height: "16px",
marginLeft: "5px",
paddingTop: "5px",
border: "1px solid #999",
borderBottomColor: "#888",
background: "#01bce0 url('/images/button_w86.gif') no-repeat center center",
color: "#fff",
font: "bold 11px arial, sans-serif",
textAlign: "center"
}
};
function insertButton(elmPar, aOpts) {
var elmBtn = document.createElement("div"),
css = elmBtn.style;
elmPar.appendChild(elmBtn);
elmBtn.appendChild(document.createTextNode(aOpts[0]));
elmBtn.setAttribute("title", aOpts[1]);
for (x in oCSS.btn) css[x] = oCSS.btn[x];
if (aOpts[0].length<3) css.width = "24px";
if (elmBtn.addEventListener) elmBtn.addEventListener("mousedown", function(){ExpBBEdit.format(aOpts[2])}, false);
else if (elmBtn.attachEvent) elmBtn.attachEvent("onmousedown", function(){ExpBBEdit.format(aOpts[2])});
};
function insertBar() {
var elmBar = document.createElement("div"),
css = elmBar.style, x;
for (x in oCSS.bar) css[x] = oCSS.bar[x];
elmTxt.parentNode.insertBefore(elmBar, elmTxt);
return elmBar;
};
var elmBar = insertBar();
for (var i=0,j=aBtns.length; i<j; i++) insertButton(elmBar, aBtns[ i]);
elmTxt.focus();
/*******************************************************************************/
function format(sTag) {
var bAT = false;
if (sTag=="@") {
sTag = "b";
bAT = true;
}
var val = elmTxt.value, nS = elmTxt.selectionStart,
nE = elmTxt.selectionEnd;
if (val.charAt(nE-1)==" ") nE--;
var a = val.substr(0, nS),
b = val.substring(nS, nE),
c = val.substring(nE),
sSTag = (bAT ? "@" : "") + "[" + sTag + ((/font|color|url|size/.test(sTag)) ? "=]" : "]"),
sETag = "[/" + sTag + "]" + (bAT ? ":" : ""),
nSLen = sSTag.length,
nELen = sETag.length, n;
elmTxt.value = a + sSTag + b + sETag + c;
if (nE-nS<1) {
n = sSTag.indexOf("=")<0 ? nS+nSLen : nS+nSLen-1;
elmTxt.selectionStart = n;
elmTxt.selectionEnd = n;
} else {
n = sSTag.indexOf("=")<0 ? nE+nSLen+nELen : nS+nSLen-1;
elmTxt.selectionStart = n;
elmTxt.selectionEnd = n;
}
setTimeout("ExpBBEdit.focus()", 1);
};
function formatFromKey(e) {
e = e ? e : event;
if (!e.ctrlKey) return;
switch (e.keyCode) {
case 65: format("@"); break
case 66: format("b"); break
case 68: format("div"); break
case 70: format("font"); break
case 72: format("color"); break
case 73: format("i"); break
case 77: format("pre"); break
case 83: format("size"); break
case 85: format("url"); break
default: return;
}
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
e.cancelBubble = true;
e.returnValue = false;
};
function doFocus() {
elmTxt.focus();
};
window.ExpBBEdit = {
"format": format,
"formatFromKey": formatFromKey,
"focus": doFocus
};
if (elmTxt.addEventListener) elmTxt.addEventListener("keydown", ExpBBEdit.formatFromKey, false);
else if (elmTxt.attachEvent) elmTxt.attachEvent("onkeydown", ExpBBEdit.formatFromKey, false);
})();
Kopier derefter denne kode til BODY'en af et ellers tomt HTML-dokument:
<p>
<a href='java script:o=document.createElement("script");o.type="text/javascript";o.src="http://localhost/expbbedit.js";document.body.appendChild(o);void(0)'>ExpBBEdit</a>
</p>
Begynd med at slette det mellemrum, Eksperten sætter ind mellem 'java' og 'script' i begyndelsen af linkets href-attribut. Det skal stå i ét ord. Ret derefter URL'en, så den stemmer overens med JS-filens placering.
Load filen i en browser og højreklik på linket. Vælg Gem som favorit..., og klik OK, hvis browseren advarer om, at du er ved at gemme et script som Favorit. Det er jo netop det, der er meningen.
Anvendelse
Når du er logget ind og står på en spørgsmålsside, klikker du på favoritten/bookmark'et ExpBBEdit. Det skulle implementere knapbaren lige over tekstfeltet.
Du kan skrive noget tekst og derefter prøve at sætte cursoren et eller sted i feltet og klikke på f.eks. B. Herved indsættes BB-tags for Bold.
Udvælges noget tekst, inden der klikkes på knappen, anbringes de to tags, så de omkranser den udvalgte tekst. Cursoren vil altid blive forsøgt anbragt der, hvor det giver mest mening.
Bemærk: Når man dobbeltklikker på et ord, vil visse browsere ikke bare udvælge ordet - men også det mellemrum, der måtte følge. Det tager editoren automatisk højde for og lader mellemrummet høre til udenfor BB-koden.
Versionering
Har du ønsker eller idéer, vil jeg meget gerne høre om dem. Jeg agter at versionere scriptet og føre en changelog her i guiden, så det er muligt altid at have sidste nye features.
Hjælp og spørgsmål om virkemåde, ændringer, o.lign. vil jeg bede om, bliver stillet i en spørgsmålstråd under JS.
ChangeLog
ExpBBEdit 1.2 (19/10-2011):
Rettet fejl: 'PRE' er ændret til 'Preform./Monosp. Text' - Ctrl+M (Ctrl+P åbner altid printdialogen i IE)
Tilføjet: @ knap, der indsætter '@[ b][/b]:'. Beregnet til henvendelser til navngiven bruger i en kommentar. Shortcut A - for 'AT' (engelsk)
Tilføjett: Mulighed for at bruge editoren på en side til oprettelse af spørgsmål
ExpBBEdit 1.1 (19/09-2011):
Rettet fejl: Det nu er muligt at bruge Ctrl med andre taster end de, der er defineret i ExpBBEdit.
Tilføjet: SIZ knap, der giver mulighed for at ændre skriftstørrelse.
Rettet: Det er nu muligt at bruge editoren på både spørgsmåls-, guide- og internpostsider.
Rettet: Knapstørrelse og -tekst formindsket en anelse.
ExpBBEdit 1.0 (18/09-2011)
Links
BB-koder på Eksperten:
http://www.eksperten.dk/guide/1325
Bookmarklets:
http://en.wikipedia.org/wiki/Bookmarklet
http://www.bookmarklets.com/


