Browse Source

adding alpine.js for popup window

Brandon Wong 1 year ago
parent
commit
ac5a827650
5 changed files with 1167 additions and 0 deletions
  1. 951 0
      2025-03-31-6-claude-popup-window-initialization.md
  2. 11 0
      popup/alpine.min.js
  3. 96 0
      popup/popup.css
  4. 43 0
      popup/popup.html
  5. 66 0
      popup/popup.js

File diff suppressed because it is too large
+ 951 - 0
2025-03-31-6-claude-popup-window-initialization.md


File diff suppressed because it is too large
+ 11 - 0
popup/alpine.min.js


+ 96 - 0
popup/popup.css

@@ -0,0 +1,96 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+    width: 400px;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+#app {
+    padding: 16px;
+}
+
+header {
+    margin-bottom: 16px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 20px;
+    color: #333;
+}
+
+h2 {
+    font-size: 16px;
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #ddd;
+}
+
+.playlist {
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.video-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.video-item:last-child {
+    border-bottom: none;
+}
+
+.video-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.video-actions {
+    display: flex;
+    gap: 8px;
+}
+
+button {
+    padding: 4px 8px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.play-btn {
+    background-color: #4285f4;
+    color: white;
+}
+
+.remove-btn {
+    background-color: #f44336;
+    color: white;
+}
+
+button:hover {
+    opacity: 0.9;
+}
+
+.empty-playlist {
+    padding: 8px 0;
+    color: #888;
+    font-style: italic;
+    font-size: 14px;
+}

+ 43 - 0
popup/popup.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'nonce-a23gbfz9e'">-->
+    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-a23gbfz9e'">-->
+    <title>My Playlists</title>
+    <link rel="stylesheet" href="popup.css">
+    <script nonce="a23gbfz9e" src="alpine.min.js" defer></script>
+    <script nonce="a23gbfz9e" src="popup.js" defer></script>
+</head>
+<body>
+    <div id="app" x-data="playlistManager">
+        <header>
+            <h1>My Playlists</h1>
+        </header>
+        <h1 x-text="temp"></h1>
+        
+        <div class="playlists-container">
+            <template x-for="(videos, playlistName) in playlists" :key="playlistName">
+                <div class="playlist">
+                    <h2 x-text="formatPlaylistName(playlistName)"></h2>
+                    <div class="video-list">
+                        <template x-for="(video, index) in videos" :key="index">
+                            <div class="video-item" :title="video.url">
+                                <span class="video-title" x-text="video.title || 'Untitled Video'"></span>
+                                <div class="video-actions">
+                                    <button @click="openVideo(video.url)" class="play-btn">Play</button>
+                                    <button @click="removeVideo(playlistName, index)" class="remove-btn">Remove</button>
+                                </div>
+                            </div>
+                        </template>
+                        <div x-show="videos.length === 0" class="empty-playlist">
+                            No videos in this playlist
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</body>
+</html>

+ 66 - 0
popup/popup.js

@@ -0,0 +1,66 @@
+console.log('popup.js is doing something');
+window.tempData = {
+    temp: 'howdy temp',
+    init() {
+        console.log('temp init function');
+        this.temp = 'seeya temp'
+    },
+}
+console.log('popup.js is CONTINUING');
+document.addEventListener('alpine:init', () => {
+    console.log('doing MORE');
+    console.log('doing MORE', Alpine);
+    Alpine.data('playlistManager', () => ({
+        temp: "hey temp",
+        playlists: {},
+        
+        init() {
+            this.loadPlaylists();
+        },
+        
+        async loadPlaylists() {
+            try {
+                const result = await browser.storage.local.get("playlists");
+                console.log('LOAD RESULT', result);
+                this.playlists = result.playlists || {};
+            } catch (error) {
+                console.error("Error loading playlists:", error);
+            }
+        },
+        
+        formatPlaylistName(name) {
+            // Convert "listening-1" to "Listening - 1"
+            return name
+                .split('-')
+                .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                .join(' - ');
+        },
+        
+        openVideo(url) {
+            browser.tabs.create({ url });
+        },
+        
+        async removeVideo(playlistName, index) {
+            // Make a copy of the current playlist
+            const playlist = [...this.playlists[playlistName]];
+            
+            // Remove the video at the specified index
+            playlist.splice(index, 1);
+            
+            // Create an updated playlists object with the remaining playlists unchanged
+            const updatedPlaylists = {
+                ...this.playlists,
+                [playlistName]: playlist
+            };
+            
+            // Update the playlists in storage
+            try {
+                await browser.storage.local.set({ playlists: updatedPlaylists });
+                this.playlists = updatedPlaylists;
+            } catch (error) {
+                console.error("Error removing video:", error);
+            }
+        }
+    }));
+});
+console.log('popup.js FINISHED doing something');