Index: options.js |
=================================================================== |
--- a/options.js |
+++ b/options.js |
@@ -87,7 +87,10 @@ |
listItem.setAttribute("data-access", item.url || item.text); |
var labelId = "label-" + (++maxLabelId); |
- listItem.querySelector(".display").setAttribute("id", labelId); |
+ var display = listItem.querySelector(".display"); |
+ display.setAttribute("id", labelId); |
+ if (item.type) |
+ display.setAttribute("data-tooltip-value", item.type); |
var control = listItem.querySelector(".control"); |
if (control) |
{ |
@@ -376,6 +379,7 @@ |
collections.langs.removeItem(subscription); |
} |
} |
+ updateTooltips(); |
saroyanm
2016/03/24 18:27:51
Why do you update tooltip on every update ? I thin
Thomas Greiner
2016/05/31 17:00:01
Since we no longer use `observeSubscription()` I m
|
} |
for (var i in collections) |
collections[i].updateItem(subscription); |
@@ -479,14 +483,16 @@ |
for (var i = 0; i < elements.length; i++) |
{ |
var element = elements[i]; |
- var subscription = Object.create(null); |
- subscription.title = element.getAttribute("title"); |
- subscription.url = element.getAttribute("url"); |
- subscription.disabled = null; |
- subscription.downloadStatus = null; |
- subscription.homepage = null; |
- var recommendation = Object.create(null); |
- recommendation.type = element.getAttribute("type"); |
+ var recommendation = {type: element.getAttribute("type")}; |
saroyanm
2016/03/24 18:27:51
Do we need reccomendationMap ? I think it's possib
Thomas Greiner
2016/05/31 17:00:02
Indeed, `recommendationsMap` was no longer necessa
|
+ var subscription = { |
+ disabled: null, |
+ downloadStatus: null, |
+ homepage: null, |
+ lastDownload: null, |
+ title: element.getAttribute("title"), |
+ type: recommendation.type, |
+ url: element.getAttribute("url") |
+ }; |
var prefix = element.getAttribute("prefixes"); |
if (prefix) |
{ |
@@ -1075,6 +1081,85 @@ |
checkShareResource(shareResources[i], onResult); |
} |
+ function getMessages(id) |
+ { |
+ var messages = []; |
+ for (var i = 1; true; i++) |
+ { |
+ var message = ext.i18n.getMessage(id + "_" + i); |
+ if (!message) |
+ break; |
+ |
+ messages.push(message); |
+ } |
+ return messages; |
+ } |
+ |
+ function updateTooltips() |
+ { |
+ var anchors = document.querySelectorAll(":not(.tooltip) > [data-tooltip]"); |
+ for (var i = 0; i < anchors.length; i++) |
+ { |
+ var anchor = anchors[i]; |
saroyanm
2016/03/24 18:27:50
Why does it called anchor ?
Thomas Greiner
2016/05/31 17:00:01
Because it's the element the tooltip is anchored/a
|
+ var id = anchor.getAttribute("data-tooltip"); |
+ id = id.replace("%value%", anchor.getAttribute("data-tooltip-value")); |
saroyanm
2016/03/24 18:27:50
Why not to do this when the item is added ?
Curre
Thomas Greiner
2016/05/31 17:00:02
Done.
|
+ |
+ var wrapper = document.createElement("div"); |
saroyanm
2016/03/24 18:27:50
Why do we need create a wrapper for elements that
Thomas Greiner
2016/05/31 17:00:01
Because the alternative would be to put the toolti
|
+ wrapper.className = "tooltip"; |
+ anchor.parentNode.replaceChild(wrapper, anchor); |
+ wrapper.appendChild(anchor); |
+ |
+ var topTexts = getMessages(id); |
+ var bottomTexts = getMessages(id + "_notes"); |
+ |
+ // We have to use native tooltips to avoid issues when attaching a tooltip |
+ // to an element in a scrollable list or otherwise it might get cut off |
+ if (anchor.hasAttribute("data-tooltip-native")) |
+ { |
+ var title = topTexts.concat(bottomTexts).join("\n\n"); |
+ anchor.setAttribute("title", title); |
+ continue; |
+ } |
+ |
+ var tooltip = document.createElement("div"); |
+ tooltip.setAttribute("role", "tooltip"); |
+ |
+ var flip = anchor.getAttribute("data-tooltip-flip"); |
+ if (flip) |
+ tooltip.className = "flip-" + flip; |
+ |
+ var imageSource = anchor.getAttribute("data-tooltip-image"); |
saroyanm
2016/03/24 18:27:51
According to the ticket image attribute should be
Thomas Greiner
2016/05/31 17:00:02
It's just tricky to determine whether the image ex
|
+ if (imageSource) |
+ { |
+ var image = document.createElement("img"); |
+ image.src = imageSource; |
+ image.alt = ""; |
+ tooltip.appendChild(image); |
+ } |
+ |
+ for (var j = 0; j < topTexts.length; j++) |
+ { |
+ var paragraph = document.createElement("p"); |
+ paragraph.textContent = topTexts[j]; |
+ tooltip.appendChild(paragraph); |
+ } |
+ if (bottomTexts.length > 0) |
+ { |
+ var notes = document.createElement("div"); |
+ notes.className = "notes"; |
+ for (var j = 0; j < bottomTexts.length; j++) |
+ { |
+ var paragraph = document.createElement("p"); |
+ paragraph.textContent = bottomTexts[j]; |
+ notes.appendChild(paragraph); |
+ } |
+ tooltip.appendChild(notes); |
+ } |
+ |
+ wrapper.appendChild(tooltip); |
+ } |
+ } |
+ |
ext.onMessage.addListener(function(message) |
{ |
switch (message.type) |