`views/partials/activity-links-example.ejs`

61 lines
<!-- Activity Links Component Usage Examples -->

<!--
    Basic Usage:
    Add the activity-links.css and activity-links.js to your page
    Then add a container with data-activity-links and data-activity-id attributes
-->

<!-- Example 1: Full links with labels -->
<div class="activity-links-container"
     data-activity-links
     data-activity-id="1"
     data-show-labels="true">
    <!-- Links will be loaded here automatically -->
</div>

<!-- Example 2: Icon-only compact mode -->
<div class="activity-links-container"
     data-activity-links
     data-activity-id="2"
     data-show-labels="false"
     data-compact>
    <!-- Links will be loaded here automatically -->
</div>

<!-- Example 3: Custom timeout (5 seconds instead of default 10) -->
<div class="activity-links-container"
     data-activity-links
     data-activity-id="3"
     data-timeout="5000">
    <!-- Links will be loaded here automatically -->
</div>

<!-- Example 4: Manual initialization via JavaScript -->
<div id="manual-activity-links" class="activity-links-container"></div>

<script>
// Manual initialization example
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('manual-activity-links');

    if (container) {
        const activityLinks = new ActivityLinks({
            activityId: 1,
            container: container,
            showLabels: true,
            compact: false,
            timeout: 10000
        });
    }
});
</script>

<!--
    Required in <head>:
    <link rel="stylesheet" href="/css/activity-links.css">

    Required before </body>:
    <script src="/js/activity-links.js"></script>
-->