Code an Iframe Slide-In for Links in Discourse

, , ,
1

Creating a theme component for a Discourse forum that slides in an iframe after clicking a link involves a few steps. Keep in mind that Discourse themes and components may change over time, so this example is based on the state of Discourse as of my knowledge cutoff in September 2021. Please make sure to consult the latest documentation and guidelines when implementing this.

Here’s a basic outline of how you might create such a theme component:

  1. Create the Theme Component:

    • In your Discourse admin panel, go to Customize > Themes.
    • Click on Create New Theme and give it a name (e.g., “Sliding iFrame Component”).
    • Enable the option to create a theme component.
    • Set up your component’s settings, styles, and other customization options as needed.

  2. HTML Structure:

    • You’ll need to insert HTML elements for the link and the sliding iframe into your theme component.
    • For simplicity, let’s use a link that, when clicked, will slide in an iframe from the right side of the screen.
<a href="#" id="iframe-link">Open iFrame</a>
<div id="iframe-container">
  <iframe id="my-iframe" src="https://example.com" frameborder="0"></iframe>
</div>
  1. CSS Styling:
    • Style the link and the iframe container to achieve the sliding effect.
#iframe-link {
  display: inline-block;
  padding: 10px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}

#iframe-container {
  position: fixed;
  top: 0;
  right: -400px; /* Start off-screen */
  width: 400px;
  height: 100%;
  background-color: white;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease-in-out;
}

#iframe-container.open {
  right: 0;
}
  1. JavaScript Interactions:
    • Add JavaScript code to handle the sliding effect when clicking the link.
const link = document.getElementById("iframe-link");
const container = document.getElementById("iframe-container");

link.addEventListener("click", () => {
  container.classList.toggle("open");
});

  1. Import JavaScript and CSS:

    • In your theme component’s settings, include the JavaScript and CSS files you’ve created. You can use the Discourse CDN or host the files externally.

  2. Apply the Theme Component:

    • Go back to the main Themes section in the Discourse admin panel.
    • Click on the theme you’re customizing.
    • Add the theme component you’ve created to this main theme.
    • Save your changes.

Remember that this example provides a basic framework. Depending on your specific requirements, you may need to further refine and customize the styles, animations, and behavior of the sliding iframe. Always refer to the latest Discourse documentation and guidelines when working with themes and components.