add files

assets/wvbrowser_ui/content_ui/favorites.js

@@ -0,0 +1,95 @@
+const messageHandler = event => {
+    var message = event.data.message;
+    var args = event.data.args;
+
+    switch (message) {
+        case commands.MG_GET_FAVORITES:
+            loadFavorites(args.favorites);
+            break;
+        default:
+            console.log(`Unexpected message: ${JSON.stringify(event.data)}`);
+            break;
+    }
+};
+
+function requestFavorites() {
+    let message = {
+        message: commands.MG_GET_FAVORITES,
+        args: {}
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function removeFavorite(uri) {
+    let message = {
+        message: commands.MG_REMOVE_FAVORITE,
+        args: {
+            uri: uri
+        }
+    };
+
+    window.chrome.webview.postMessage(message);
+}
+
+function loadFavorites(payload) {
+    let fragment = document.createDocumentFragment();
+
+    if (payload.length > 0) {
+        let container = document.getElementById('entries-container');
+        container.textContent = '';
+    }
+
+    payload.map(favorite => {
+        let favoriteContainer = document.createElement('div');
+        favoriteContainer.className = 'item-container';
+        let favoriteElement = document.createElement('div');
+        favoriteElement.className = 'item';
+
+        let faviconElement = document.createElement('div');
+        faviconElement.className = 'favicon';
+        let faviconImage = document.createElement('img');
+        faviconImage.src = favorite.favicon;
+        faviconElement.appendChild(faviconImage);
+
+        let labelElement = document.createElement('div');
+        labelElement.className = 'label-title';
+        let linkElement = document.createElement('a');
+        linkElement.textContent = favorite.title;
+        linkElement.href = favorite.uri;
+        linkElement.title = favorite.title;
+        labelElement.appendChild(linkElement);
+
+        let uriElement = document.createElement('div');
+        uriElement.className = 'label-uri';
+        let textElement = document.createElement('p');
+        textElement.textContent = favorite.uriToShow || favorite.uri;
+        textElement.title = favorite.uriToShow || favorite.uri;
+        uriElement.appendChild(textElement);
+
+        let buttonElement = document.createElement('div');
+        buttonElement.className = 'btn-close';
+        buttonElement.addEventListener('click', function(e) {
+            favoriteContainer.parentNode.removeChild(favoriteContainer);
+            removeFavorite(favorite.uri);
+        });
+
+        favoriteElement.appendChild(faviconElement);
+        favoriteElement.appendChild(labelElement);
+        favoriteElement.appendChild(uriElement);
+        favoriteElement.appendChild(buttonElement);
+
+        favoriteContainer.appendChild(favoriteElement);
+        fragment.appendChild(favoriteContainer);
+    });
+
+    let container = document.getElementById('entries-container');
+    container.appendChild(fragment);
+}
+
+function init() {
+    window.chrome.webview.addEventListener('message', messageHandler);
+    requestFavorites();
+}
+
+init();