diff options
| -rw-r--r-- | src/scripts/hints.css | 10 | ||||
| -rw-r--r-- | src/scripts/hints.js | 89 |
2 files changed, 57 insertions, 42 deletions
diff --git a/src/scripts/hints.css b/src/scripts/hints.css index acbe28f..847d11b 100644 --- a/src/scripts/hints.css +++ b/src/scripts/hints.css @@ -1,7 +1,7 @@ -#_hintContainer{ +div[vimbhint='container']{ position:static } -._hintLabel{ +span[vimbhint^='label']{ -webkit-transform:translate(-4px,-4px); background-color:#fff; border:1px solid #444; @@ -13,17 +13,17 @@ position:absolute; z-index:225000 } -._hintElem{ +*[vimbhint^='hint']{ background-color:#ff0 !important; color:#000 !important; transition-delay:all 0 !important; transition:all 0 !important; opacity:1 !important } -._hintElem._hintFocus{ +*[vimbhint='hint focus']{ background-color:#8f0 !important } -._hintLabel._hintFocus{ +span[vimbhint='label focus']{ opacity:1; z-index:225000 } diff --git a/src/scripts/hints.js b/src/scripts/hints.js index 19b56b8..9e245e0 100644 --- a/src/scripts/hints.js +++ b/src/scripts/hints.js @@ -1,50 +1,71 @@ var hints = Object.freeze((function(){ 'use strict'; - var hints = [], /* holds all hint data (hinted element, label, number) in view port */ - docs = [], /* hold the affected document with the start and end index of the hints */ - validHints = [], /* holds the valid hinted elements matching the filter condition */ - activeHint, /* holds the active hint object */ - filterText = "", /* holds the typed text filter */ - filterKeys = "", /* holds the typed hint-keys filter */ - /* TODO remove these classes and use the 'vimbhint' attribute for */ - /* styling the hints and labels - but this might break user */ - /* stylesheets that use the classes for styling */ - cId = "_hintContainer", /* id of the container holding the hint labels */ - lClass = "_hintLabel", /* class used on the hint labels with the hint numbers */ - hClass = "_hintElem", /* marks hinted elements */ - fClass = "_hintFocus", /* marks focused element and focussed hint */ + var hints = [], /* holds all hint data (hinted element, label, number) in view port */ + docs = [], /* hold the affected document with the start and end index of the hints */ + validHints = [], /* holds the valid hinted elements matching the filter condition */ + activeHint, /* holds the active hint object */ + filterText = "", /* holds the typed text filter */ + filterKeys = "", /* holds the typed hint-keys filter */ + attr = "vimbhint", config; /* the hint class used to maintain hinted element and labels */ function Hint() { + var state = ""; /* hide hint label and remove coloring from hinted element */ this.hide = function() { + var l = this.label, + e = this.e; /* remove hint labels from no more visible hints */ - this.label.style.display = "none"; - this.e.classList.remove(fClass); - this.e.classList.remove(hClass); + l.style.display = "none"; + l.setAttribute(attr, ""); + e.setAttribute(attr, ""); + state = "hidden"; + }; + + /* marks the element and label of a hint as focused */ + this.focus = function() { + this.label.setAttribute(attr, "label focus"); + this.e.setAttribute(attr, "hint focus"); + state = "focus"; + }; + + /* remove focus mark from hint and label */ + this.unfocus = function() { + /* do not unfocus hidden hints */ + if (state != "hidden") { + this.label.setAttribute(attr, "label"); + this.e.setAttribute(attr, "hint"); + state = "visible"; + } }; /* show the hint element colored with the hint label */ this.show = function() { - this.label.style.display = ""; - this.e.classList.add(hClass); + var e = this.e, + l = this.label, + text = []; + if (state != "focus") { + l.style.display = ""; + l.setAttribute(attr, "label"); + e.setAttribute(attr, "hint"); + state = "visible"; + } /* create the label with the hint number/letters */ - var text = []; - if (this.e instanceof HTMLInputElement) { - var type = this.e.type; + if (e instanceof HTMLInputElement) { + var type = e.type; if (type === "checkbox") { - text.push(this.e.checked ? "☑" : "☐"); + text.push(e.checked ? "☑" : "☐"); } else if (type === "radio") { - text.push(this.e.checked ? "⊙" : "○"); + text.push(e.checked ? "⊙" : "○"); } } if (this.showText && this.text) { text.push(this.text.substr(0, 20)); } /* use \x20 instead of ' ' to keep this space during js2h.sh processing */ - this.label.innerText = this.num + (text.length ? ":\x20" + text.join("\x20") : ""); + l.innerText = this.num + (text.length ? ":\x20" + text.join("\x20") : ""); }; } @@ -63,12 +84,10 @@ var hints = Object.freeze((function(){ for (i = 0; i < docs.length; i++) { doc = docs[i]; /* find all hinted elements vimbhint 'hint' */ - var res = xpath(doc.doc, "//*[contains(@vimbhint, 'hint')]"); + var res = xpath(doc.doc, "//*[@vimbhint]"); for (j = 0; j < res.snapshotLength; j++) { e = res.snapshotItem(j); - e.removeAttribute("vimbhint"); - e.classList.remove(fClass); - e.classList.remove(hClass); + e.removeAttribute(attr); } doc.div.parentNode.removeChild(doc.div); } @@ -128,8 +147,7 @@ var hints = Object.freeze((function(){ labelTmpl = doc.createElement("span"), e, i; - labelTmpl.className = lClass; - labelTmpl.setAttribute("vimbhint", "label"); + labelTmpl.setAttribute(attr, "label"); var containerOffsets = getOffsets(doc), offsetX = containerOffsets[0], @@ -184,7 +202,7 @@ var hints = Object.freeze((function(){ } /* add the hint class to the hinted element */ fragment.appendChild(label); - e.setAttribute("vimbhint", "hint"); + e.setAttribute(attr, "hint"); hints.push({ e: e, @@ -201,8 +219,7 @@ var hints = Object.freeze((function(){ /* append the fragment to the document */ var hDiv = doc.createElement("div"); - hDiv.id = cId; - hDiv.setAttribute("vimbhint", "container"); + hDiv.setAttribute(attr, "container"); hDiv.appendChild(fragment); if (doc.body) { doc.body.appendChild(hDiv); @@ -394,14 +411,12 @@ var hints = Object.freeze((function(){ function focusHint(newIdx) { /* reset previous focused hint */ if (activeHint) { - activeHint.e.classList.remove(fClass); - activeHint.label.classList.remove(fClass); + activeHint.unfocus(); mouseEvent(activeHint.e, "mouseout"); } /* get the new active hint */ if ((activeHint = validHints[newIdx])) { - activeHint.e.classList.add(fClass); - activeHint.label.classList.add(fClass); + activeHint.focus(); mouseEvent(activeHint.e, "mouseover"); } } |