Source code - Fluid Topics - Latest

The following example relies on:

• The User variable (contains information about the current user).
• The List bookmarks web service.

To add the same Custom component:

1. In the HTML panel, copy and paste the following:

   <strong>Your bookmarks:</strong>
   <div class="table-bookmarks">
     <p class="unauthenticated">You are unauthenticated, select <strong>Sign In</strong> to see your bookmarks.</p>
     <p class="no_bookmarks">You have no bookmarks, open a topic and select the <strong>Bookmark</strong> action to create your first bookmark.</p>
   </div>
   

2. In the CSS panel, copy and paste the following:

   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   
   a {
     color: #60ADBD;
   }
   
   a:visited {
     color: #27545D;
   }
   

3. In the JS panel, copy and paste the following:

   let FTAPI = null;
   async function main() {
       let element = document.querySelector(".table-bookmarks");
       let unauthenticated = document.querySelector(".unauthenticated");
       let no_bookmarks = document.querySelector(".no_bookmarks");
   
       // If the user is unauthenticated
       if (user.isAuthenticated === false) {
           unauthenticated.style.display = 'block';
           no_bookmarks.style.display = 'none';
           return;
       }
   
       FTAPI = await new window.fluidtopics.FluidTopicsApi();
       FTAPI["Ft-Calling-App"] = "ft-page-designer";
       let bookmarks = await FTAPI.get(`/api/users/${user.profile.id}/bookmarks`);
   
       // If the user is authenticated, but has no bookmark
       if (bookmarks.length === 0) {
           unauthenticated.style.display = 'none';
           no_bookmarks.style.display = 'block';
           return;
       }
   
       // Create an unordered list
       let ul = document.createElement("ul");
   
       // Iterate over bookmarks to create list items with icons and links
       bookmarks.forEach(bookmark => {
           let li = document.createElement("li");
   
           // Create the <ft-icon> element
           let ftIcon = document.createElement("ft-icon");
           ftIcon.setAttribute("variant", "fluid-topics");
           ftIcon.setAttribute("style", `--ft-icon-font-size: 35px; color: ${bookmark.color};`); // Set color dynamically
           ftIcon.setAttribute("value", "BOOKMARK");
           li.appendChild(ftIcon);
   
           // Create the link (a) element
           let a = document.createElement("a");
           a.textContent = bookmark.title;
           a.href = bookmark.readerUrl; // Set @href attribute to readerUrl
           a.target = "_blank"; // Open link in a new tab
   
           // Append the link to the list item
           li.appendChild(a);
   
           // Append the list item to the unordered list
           ul.appendChild(li);
       });
   
       // Clear the content of the element and append the unordered list
       element.innerHTML = "";
       element.appendChild(ul);
   }
   main();
   

4. Save the component.

5. Save and publish the page.