Add files via upload

Author: Arsybai

audio_player/sample.mp3

@@ -0,0 +1,35 @@
+(function() {
+    'use strict';
+
+    // Constructor function for the AudioPlayer plugin
+    function AudioPlayer(containerId, options) {
+        // Store the audio player container
+        this.container = document.getElementById(containerId);
+
+        // Set default options
+        this.options = Object.assign({
+            source: '', // URL to the audio file
+        }, options);
+
+        // Initialize the audio player
+        this.initAudioPlayer();
+    }
+
+    AudioPlayer.prototype.initAudioPlayer = function() {
+        // Create an audio element
+        const audioElement = document.createElement('audio');
+        audioElement.src = this.options.source;
+        audioElement.controls = true;
+
+        // Append the audio element to the container
+        this.container.appendChild(audioElement);
+    };
+
+    // Export the AudioPlayer as a global function or as an ES module
+    if (typeof window === 'object') {
+        window.AudioPlayer = AudioPlayer;
+    }
+    if (typeof exports === 'object') {
+        module.exports = AudioPlayer;
+    }
+})();

audio_player/script.js

@@ -0,0 +1,5 @@
+/* Styling for the audio player container */
+.audio-player {
+    max-width: 300px;
+    margin: 20px auto;
+}

audio_player/style.css

@@ -0,0 +1,40 @@
+// BottomNavigation.js
+(function() {
+    'use strict';
+
+    // Constructor function for the BottomNavigation plugin
+    function BottomNavigation(navId) {
+        // Store the bottom navigation element
+        this.bottomNav = document.getElementById(navId);
+
+        // Initialize the bottom navigation
+        this.initBottomNavigation();
+    }
+
+    BottomNavigation.prototype.initBottomNavigation = function() {
+        // Add click event listeners to navigation items
+        const navItems = this.bottomNav.getElementsByClassName('nav-item');
+        for (let i = 0; i < navItems.length; i++) {
+            navItems[i].addEventListener('click', this.handleNavItemClick.bind(this));
+        }
+    };
+
+    BottomNavigation.prototype.handleNavItemClick = function(event) {
+        // Remove the "active" class from all navigation items
+        const navItems = this.bottomNav.getElementsByClassName('nav-item');
+        for (let i = 0; i < navItems.length; i++) {
+            navItems[i].classList.remove('active');
+        }
+
+        // Add the "active" class to the clicked navigation item
+        event.currentTarget.classList.add('active');
+    };
+
+    // Export the BottomNavigation as a global function or as an ES module
+    if (typeof window === 'object') {
+        window.BottomNavigation = BottomNavigation;
+    }
+    if (typeof exports === 'object') {
+        module.exports = BottomNavigation;
+    }
+})();

bottom_nav/script.js

@@ -0,0 +1,54 @@
+/* Reset some default styles */
+body, h1, h2, p {
+    margin: 0;
+    padding: 0;
+}
+
+/* Apply styles to the bottom navigation and items */
+.bottom-navigation {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #f0f0f0;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+}
+
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: #333;
+    padding: 5px 0;
+    transition: color 0.3s;
+}
+
+.nav-item:hover {
+    color: #007bff;
+}
+
+.active {
+    color: #007bff;
+}
+
+/* Optional: Add a subtle animation effect */
+.nav-item .icon {
+    font-size: 24px;
+    margin-bottom: 5px;
+}
+
+.nav-item .label {
+    font-size: 12px;
+    opacity: 0.8;
+    transition: opacity 0.3s;
+}
+
+.nav-item.active .label {
+    opacity: 1;
+}

bottom_nav/style.css

@@ -0,0 +1,38 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const draggableElements = document.querySelectorAll(".draggable");
+    let activeElement = null;
+    let startPosX = 0;
+    let startPosY = 0;
+    let offsetX = 0;
+    let offsetY = 0;
+
+    draggableElements.forEach(function (element) {
+        element.addEventListener("mousedown", function (event) {
+            activeElement = element;
+            startPosX = event.clientX;
+            startPosY = event.clientY;
+            offsetX = activeElement.getBoundingClientRect().left;
+            offsetY = activeElement.getBoundingClientRect().top;
+            activeElement.classList.add("dragging"); // Apply the dragging style
+        });
+    });
+
+    document.addEventListener("mousemove", function (event) {
+        if (activeElement) {
+            const deltaX = event.clientX - startPosX;
+            const deltaY = event.clientY - startPosY;
+            const newPosX = offsetX + deltaX;
+            const newPosY = offsetY + deltaY;
+
+            activeElement.style.left = newPosX + "px";
+            activeElement.style.top = newPosY + "px";
+        }
+    });
+
+    document.addEventListener("mouseup", function () {
+        if (activeElement) {
+            activeElement.classList.remove("dragging"); // Remove the dragging style
+            activeElement = null;
+        }
+    });
+});

dragable/script.js

@@ -0,0 +1,15 @@
+.draggable {
+    position: absolute;
+    cursor: grab; /* Set cursor to indicate the element is draggable */
+    user-select: none; /* Prevent text selection while dragging */
+    width: 200px;
+    height: 100px;
+    background-color: lightblue;
+    border: 1px solid blue;
+    text-align: center;
+    line-height: 100px;
+}
+
+.draggable.dragging {
+    cursor: grabbing; /* Set cursor when the element is being dragged */
+}

dragable/style.css

@@ -0,0 +1,44 @@
+(function() {
+    'use strict';
+
+    // Constructor function for the Drawer plugin
+    function Drawer(drawerId, openButtonId) {
+        // Store the drawer and open button elements
+        this.drawer = document.getElementById(drawerId);
+        this.openButton = document.getElementById(openButtonId);
+
+        // Initialize the drawer
+        this.initDrawer();
+    }
+
+    Drawer.prototype.initDrawer = function() {
+        // Add click event listener to the open button
+        this.openButton.addEventListener('click', this.toggleDrawer.bind(this));
+        
+        // Add a click event listener to the document to close the drawer when clicking outside
+        document.addEventListener('click', this.closeDrawerOutside.bind(this));
+    };
+
+    Drawer.prototype.toggleDrawer = function(event) {
+        // Prevent the default behavior of the button click
+        event.preventDefault();
+        // Toggle the "open" class to show/hide the drawer
+        this.drawer.classList.toggle('open');
+    };
+
+    Drawer.prototype.closeDrawerOutside = function(event) {
+        // Check if the clicked element is not inside the drawer or the open button
+        if (!this.drawer.contains(event.target) && event.target !== this.openButton) {
+            // Close the drawer
+            this.drawer.classList.remove('open');
+        }
+    };
+
+    // Export the Drawer as a global function or as an ES module
+    if (typeof window === 'object') {
+        window.Drawer = Drawer;
+    }
+    if (typeof exports === 'object') {
+        module.exports = Drawer;
+    }
+})();

drawer/script.js

@@ -0,0 +1,27 @@
+/* Styles for the drawer and its content */
+.drawer {
+    position: fixed;
+    top: 0;
+    right: -300px; /* Start hidden outside the viewport */
+    width: 300px;
+    height: 100%;
+    background-color: #f0f0f0;
+    overflow-x: hidden;
+    transition: right 0.3s ease-in-out;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.drawer.open {
+    right: 0; /* Slide in from the right when open */
+}
+
+.drawer-content {
+    padding: 20px;
+}
+
+/* Button to open the drawer */
+#openDrawerButton {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}

drawer/style.css

@@ -0,0 +1,51 @@
+// GoogleMapsWidget.js
+
+(function() {
+    'use strict';
+  
+    // Constructor function for the GoogleMapsWidget
+    function GoogleMapsWidget(elementId, options) {
+      // Store the target element where the map will be embedded
+      this.element = document.getElementById(elementId);
+      
+      // Set default options
+      this.options = Object.assign({
+        apiKey: '',
+        center: { lat: 37.7749, lng: -122.4194 }, // Default to San Francisco
+        zoom: 10
+      }, options);
+  
+      // Initialize the map
+      this.initMap();
+    }
+  
+    GoogleMapsWidget.prototype.initMap = function() {
+      // Create a new Google Map instance
+      this.map = new google.maps.Map(this.element, {
+        center: this.options.center,
+        zoom: this.options.zoom
+      });
+    };
+  
+    // Public method to change the map center
+    GoogleMapsWidget.prototype.setCenter = function(center) {
+      if (center && center.lat && center.lng) {
+        this.map.setCenter(center);
+      }
+    };
+  
+    // Public method to change the map zoom level
+    GoogleMapsWidget.prototype.setZoom = function(zoom) {
+      if (zoom) {
+        this.map.setZoom(zoom);
+      }
+    };
+  
+    // Export the GoogleMapsWidget as a global function or as an ES module
+    if (typeof window === 'object') {
+      window.GoogleMapsWidget = GoogleMapsWidget;
+    }
+    if (typeof exports === 'object') {
+      module.exports = GoogleMapsWidget;
+    }
+  })();