-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
443937c
commit df1cc62
Showing
8 changed files
with
217 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /** | ||
| * App Icon. | ||
| * | ||
| * An app launcher icon. | ||
| */ | ||
| class AppIcon extends HTMLElement { | ||
|
|
||
| /** | ||
| * Constructor. | ||
| * | ||
| * @param {string} id - App ID to associate with icon. | ||
| * @param {string} src - Path of icon image. | ||
| * @param {string} name - Name of app from web app manifest. | ||
| * @param {string} startUrl - Starting URL of app to load. | ||
| */ | ||
| constructor(id, src, name, startUrl) { | ||
| super(); | ||
| this.id = id; | ||
| this.startUrl = startUrl; | ||
|
|
||
| this.attachShadow({ mode: 'open' }); | ||
| const template = document.createElement('template'); | ||
|
|
||
| template.innerHTML = ` | ||
| <style> | ||
| .app-icon { | ||
| display: block; | ||
| width: 128px; | ||
| height: 128px; | ||
| color: #fff; | ||
| text-align: center; | ||
| margin-left: 0; | ||
| margin-right: 16px; | ||
| margin-bottom: 16px; | ||
| text-decoration: none; | ||
| } | ||
| .app-icon-img { | ||
| width: 64px; | ||
| height: 64px; | ||
| } | ||
| .app-icon-name { | ||
| display: block; | ||
| margin-top: 10px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| font-size: 13px; | ||
| height: 1.3em; | ||
| } | ||
| </style> | ||
| <a id=${id} href="${startUrl}" class="app-icon"> | ||
| <img src="${src}" class="app-icon-img" /> | ||
| <span class="app-icon-name">${name}</span> | ||
| </span> | ||
| `; | ||
|
|
||
| const templateClone = template.content.cloneNode(true); | ||
| this.shadowRoot.appendChild(templateClone); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // Register custom element | ||
| customElements.define('app-icon', AppIcon); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| html, body { | ||
| width: 100%; | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Fira Sans', sans-serif; | ||
| background-color: #5d5d5d; | ||
| } | ||
|
|
||
| #apps { | ||
| padding: 32px; | ||
| } | ||
|
|
||
| app-icon { | ||
| float: left; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <title>New Tab</title> | ||
| <link rel="stylesheet" href="../css/fonts.css" type="text/css" /> | ||
| <link rel="stylesheet" href="css/new-tab.css" type="text/css" /> | ||
| <script type="text/javascript" src="../js/database.js"></script> | ||
| <script type="text/javascript" src="../js/models/web-app.js"></script> | ||
| <script type="text/javascript" src="../js/models/web-apps.js"></script> | ||
| <script type="text/javascript" src="../js/views/components/app-icon.js"></script> | ||
| <script type="text/javascript" src="js/new-tab.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="apps"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /** | ||
| * New Tab. | ||
| * | ||
| * New tab page. Displays app icons of pinned apps. | ||
| */ | ||
| const NewTab = { | ||
| APP_ICON_SIZE: 64, | ||
|
|
||
| start: function() { | ||
| console.log('Starting new tab page...'); | ||
| this.appsElement = document.getElementById('apps'); | ||
| // Start database, app manager and views. | ||
| Database.start().then(() => { | ||
| this.webApps = new WebApps(Database); | ||
| return this.webApps.start(); | ||
| }).then(() => { | ||
| this.showApps(); | ||
| }); | ||
| }, | ||
|
|
||
| /** | ||
| * Show app icons for all pinned apps. | ||
| */ | ||
| showApps: function() { | ||
| const webApps = this.webApps.list(); | ||
| webApps.forEach((webApp, webAppId, map) => { | ||
| const appIcon = new AppIcon( | ||
| webApp.id, | ||
| webApp.getBestIconUrl(this.APP_ICON_SIZE), | ||
| webApp.getShortestName(), | ||
| webApp.startUrl); | ||
| this.appsElement.insertAdjacentElement('beforeend', appIcon); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Start on load. | ||
| */ | ||
| window.addEventListener('load', function newtab_onLoad() { | ||
| window.removeEventListener('load', newtab_onLoad); | ||
| NewTab.start(); | ||
| }); |