Chromium Code Reviews| Index: chrome/browser/resources/ntp/apps.js |
| =================================================================== |
| --- chrome/browser/resources/ntp/apps.js (revision 90942) |
| +++ chrome/browser/resources/ntp/apps.js (working copy) |
| @@ -159,6 +159,69 @@ |
| chrome.send('launchApp', [appId, APP_LAUNCH.NTP_APP_RE_ENABLE]); |
| } |
| +// Shows the notification bubble for a given app (the one clicked on). |
| +function showNotificationBubble(event) { |
| + var item = findAncestorByClass(event.target, 'app-anchor'); |
| + var title = item.getAttribute('notification-title'); |
| + var message = item.getAttribute('notification-message'); |
| + var link = item.getAttribute('notification-link'); |
| + var link_message = item.getAttribute('notification-link-message'); |
| + |
| + if (!title || !message) |
| + return; |
| + |
| + // Set the content to the right text. |
| + document.getElementById('notification_title').textContent = title; |
|
Evan Stade
2011/06/30 23:20:33
$() instead of document.getElementById
Finnur
2011/07/01 00:33:55
Done.
|
| + document.getElementById('notification_message').textContent = message; |
| + document.getElementById('notification_link').href = link; |
| + document.getElementById('notification_link').textContent = link_message; |
| + |
| + var target = event.target; |
|
Evan Stade
2011/06/30 23:20:33
event.currentTarget will do what you want
Finnur
2011/07/01 00:33:55
Not sure what you mean here. event.target and even
Evan Stade
2011/07/02 00:27:50
if that is the case, how does this line from handl
|
| + while (target.parentElement && target.tagName != "A") { |
| + target = target.parentElement; |
| + } |
| + |
| + // Move the bubble to the right location. |
| + var bubble = document.getElementById('notification_bubble'); |
| + var x = target.parentElement.offsetLeft + |
| + target.parentElement.offsetWidth - 20; |
| + var y = target.parentElement.offsetTop + 20; |
| + bubble.style.left = x + "px"; |
| + bubble.style.top = y + "px"; |
| + |
| + // Move the arrow and shadow to the right location. |
| + var arrow = document.getElementById('arrow_contents'); |
| + var border = document.getElementById('arrow_border'); |
| + var shadow = document.getElementById('arrow_shadow'); |
| + y += 26; |
| + x = x - arrow.style.width - 23; |
|
Evan Stade
2011/06/30 23:20:33
-= ?
Finnur
2011/07/01 00:33:55
Done.
|
| + arrow.style.left = x + "px"; |
| + arrow.style.top = y + "px"; |
| + x -= 1; |
| + border.style.left = x + "px"; |
| + border.style.top = y + "px"; |
|
Evan Stade
2011/07/02 00:27:50
I suggest wrapping all these in a single div so yo
|
| + x -= 1; |
| + shadow.style.left = x + "px"; |
| + shadow.style.top = y + "px"; |
| + |
| + // Animate the bubble into view. |
| + bubble.style.opacity = 1; |
|
Evan Stade
2011/06/30 23:20:33
better to do this with a css class than manually e
Finnur
2011/07/01 00:33:55
I always find it a little silly to create a class
Evan Stade
2011/07/02 00:27:50
it definitely does if you have the right CSS selec
|
| + arrow.style.opacity = 1; |
| + border.style.opacity = 1; |
| + shadow.style.opacity = 1; |
| + |
| + bubble.focus(); |
| +} |
| + |
| +// Hide the notification bubble. |
| +function hideNotificationBubble(event) { |
| + // This will fade the bubble out of existence. |
| + document.getElementById('notification_bubble').style.opacity = 0; |
| + document.getElementById('arrow_border').style.opacity = 0; |
| + document.getElementById('arrow_shadow').style.opacity = 0; |
| + document.getElementById('arrow_contents').style.opacity = 0; |
| +} |
| + |
| var apps = (function() { |
| function createElement(app) { |
| @@ -166,12 +229,39 @@ |
| div.className = 'app'; |
| var a = div.appendChild(document.createElement('a')); |
| + a.className = 'app-anchor'; |
| a.setAttribute('app-id', app['id']); |
| a.setAttribute('launch-type', app['launch_type']); |
| + if (typeof(app['notification']) != "undefined") { |
| + a.setAttribute('notification-title', app['notification']['title']); |
| + a.setAttribute('notification-message', app['notification']['body']); |
| + if (typeof(app['notification']['linkUrl']) != "undefined" && |
| + typeof(app['notification']['linkText']) != "undefined") { |
| + a.setAttribute('notification-link', app['notification']['linkUrl']); |
| + a.setAttribute('notification-link-message', |
| + app['notification']['linkText']); |
| + } |
| + } |
| a.draggable = false; |
| - a.xtitle = a.textContent = app['name']; |
| a.href = app['launch_url']; |
| + var span = a.appendChild(document.createElement('span')); |
| + span.textContent = app['name']; |
| + |
| + span = a.appendChild(document.createElement('span')); |
| + span.className = "app_notification"; |
| + span.textContent = |
| + typeof(app['notification']) != "undefined" && |
| + typeof(app['notification']['title']) != "undefined" ? |
| + app['notification']['title'] : ""; |
| + span.onclick = handleClick; |
| + |
| + document.getElementById("notification_close").onclick = |
| + hideNotificationBubble; |
| + document.getElementById("notification_bubble").setAttribute("tabIndex", 0); |
| + document.getElementById("notification_bubble").onblur = |
| + hideNotificationBubble; |
| + |
| return div; |
| } |
| @@ -219,6 +309,12 @@ |
| */ |
| function handleClick(e) { |
| var appId = e.currentTarget.getAttribute('app-id'); |
| + if (appId == null) { |
| + showNotificationBubble(e); |
| + e.stopPropagation(); |
| + return false; |
| + } |
| + |
| if (!appDragAndDrop.isDragging()) |
| launchApp(appId, e); |
| return false; |
| @@ -321,7 +417,7 @@ |
| e.canExecute = true; |
| break; |
| case 'apps-uninstall-command': |
| - e.canExecute = !currentApp['can_uninstall']; |
| + e.canExecute = currentApp && !currentApp['can_uninstall']; |
| break; |
| } |
| }); |
| @@ -684,7 +780,9 @@ |
| }, |
| createElement: function(app) { |
| + var container = document.createElement('div'); |
| var div = createElement(app); |
| + container.appendChild(div); |
| var a = div.firstChild; |
| a.onclick = handleClick; |
| @@ -719,7 +817,29 @@ |
| addContextMenu(div, app); |
| } |
| - return div; |
| + if (app.notifications && app.notifications.length > 0) { |
| + var notif_div = document.createElement('div') |
|
Evan Stade
2011/06/30 23:20:33
1. all variable names should be camel case
2. I d
Finnur
2011/07/01 00:33:55
This isn't about the bubble. It is about the text
|
| + container.appendChild(notif_div); |
| + var title = document.createElement('span'); |
| + title.innerText = app.notifications[0].title; |
| + notif_div.appendChild(title); |
| + notif_div.appendChild(document.createElement('br')); |
| + |
| + var body = document.createElement('span'); |
| + container.appendChild(body); |
| + body.innerText = app.notifications[0].body; |
| + notif_div.appendChild(body); |
| + if (app.notifications[0].linkUrl) { |
| + notif_div.appendChild(document.createElement('br')); |
| + var link = document.createElement('a'); |
| + link.href = app.notifications[0].linkUrl; |
| + link.innerText = app.notifications[0].linkText ? |
| + app.notifications[0].linkText : "link"; |
| + notif_div.appendChild(link); |
| + } |
| + } |
| + |
| + return container; |
| }, |
| createMiniviewElement: function(app) { |