ScriptThis/json-viewer.html at main · Ronnie-Reagan/ScriptThis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script This - JSON Viewer</title>
    <meta name="description" content="Script This is a web-based tool for Lua script management and JSON data visualization, tailored for GTA 5 mod menus.">
    <meta name="keywords" content="Lua, JSON, GTA 5, Script Management, Mod Menus, Cherax, Modest Menu, Kiddions">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div id="logo">
            <img src="ScriptThisLogoMain.png" alt="Script This Logo">
        </div>
        <p>Your Ultimate Tool for Lua Script Management</p>
        <nav>
            <ul class="navbar">
                <li><a href="Home.html">Home</a></li>
                <li><a href="json-viewer.html">JSON Viewer</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="documentation.html">Documentation</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div id="editor-container">
            <div class="btn-row">
                <!-- Document Selection Group -->
                <div class="action-group">
                    <label for="documentSelector">Mod Menu:</label>
                    <select id="documentSelector">
                        <option value="CheraxDocuments">Cherax</option>
                        <option value="ModestDocuments">Modest</option>
                    </select>
                    <button class="btn" onclick="showCodeView()" title="Switch to code view" aria-label="Switch to code view">
                        Code View
                    </button>
                    <button class="btn" onclick="showTreeView()" title="Switch to tree view" aria-label="Switch to tree view">
                        Tree View
                    </button>
                    <button class="btn" onclick="toggleTreeStyle()" title="Change tree style" aria-label="Change tree style">
                        Tree Style
                    </button>
                    <button class="btn" onclick="expandAll()" title="Expand all nodes" aria-label="Expand all nodes">
                        ➕ Expand All
                    </button>
                    <button class="btn" onclick="collapseAll()" title="Collapse all nodes" aria-label="Collapse all nodes">
                        ➖ Collapse All
                    </button>
                </div>

                <!-- Tools Group -->
                <div class="action-group">
                    <button class="btn" onclick="downloadJSON()" title="Download JSON file" aria-label="Download JSON file">
                        Download Json
                    </button>
                    <button class="btn" onclick="toggleMultiSelect()" title="Toggle multi-select mode" aria-label="Toggle multi-select mode">
                        Multi-Select
                    </button>
                    <button class="btn" onclick="togglePlaylistSidebar()" title="Toggle the music sidebar" aria-label="Toggle music sidebar">
                        Music Tab
                    </button>
                    <input type="text" class="search-input" id="searchInput" placeholder="Try Searching 'velocity'" onkeydown="handleSearchKey(event)" aria-label="Search JSON data">
                    <button class="btn" onclick="searchJSON()" title="Search the JSON data" aria-label="Search JSON data">
                        Search
                    </button>
                    <button class="btn" onclick="showHelpOverlay()" title="Open help and documentation" aria-label="Open help overlay">
                        ❓ Help
                    </button>
                </div>
            </div>


            <pre id="jsoneditor"></pre>
            <div id="json-info"></div>

            <div id="clipboard-tray">
                <h4>Clipboard Tray</h4>
                <button class="btn" onclick="copyTrayToClipboard()" title="Copy all items in the tray" aria-label="Copy all items from the tray">Copy All</button>
                <button class="btn" onclick="clearTray()" title="Clear the clipboard tray" aria-label="Clear the clipboard tray">Clear Tray</button>
                <ul id="clipboard-list"></ul>
            </div>

            <div id="playlist-sidebar">
                <h3>Music</h3>
                <button class="btn" onclick="togglePlaylistSidebar()" title="Close The Music Tab" aria-label="Close YouTube Tab">Close</button>
                <input type="text" id="playlistSearch" placeholder="Search YouTube..." title="Search for music on YouTube" aria-label="Search YouTube for music">
                <button class="btn" onclick="playPlaylist('Coding Focus')" title="Play Coding Focus Playlist" aria-label="Play Coding Focus Playlist">Coding Focus Playlist</button>
                <button class="btn" onclick="playPlaylist('Relaxation')" title="Play Relaxation Playlist" aria-label="Play Relaxation Playlist">Relaxation Playlist</button>
                <button class="btn" onclick="playPlaylist('Coding Session')" title="Play Coding Session Playlist" aria-label="Play Coding Session Playlist">Coding Session Playlist</button>
                <button class="btn" onclick="searchYouTube()" title="Search YouTube for music" aria-label="Search YouTube">Search YouTube</button>
                <iframe id="playlistPlayer" src="" aria-label="YouTube playlist player"></iframe>
            </div>

            <div id="help-overlay">
                <div id="help-close" onclick="hideHelpOverlay()" title="Close the help overlay" aria-label="Close help overlay">← Close</div>
                <h2>Help & Documentation</h2>
                <p>Welcome to Script This! Here’s a guide on how to use the various features:</p>
                <ul>
                    <li>
                        <strong>Select Document:</strong>
                        <ul>
                            <li>Use the drop-down menu to select the document set you wish to work with.</li>
                            <li>Options include "CheraxDocuments" and "ModestDocuments".</li>
                        </ul>
                    </li>
                    <li>
                        <strong>View Modes:</strong>
                        <ul>
                            <li><strong>Code View:</strong> Displays the JSON data in raw code format for direct editing.</li>
                            <li><strong>Tree View:</strong> Provides a structured view of the JSON data, making it easier to navigate through nodes.</li>
                            <li><strong>Change Tree Style:</strong> Toggle through different tree styles to adjust the visual layout of the tree view.</li>
                            <li><strong>Expand All / Collapse All:</strong> Quickly expand or collapse all nodes in the tree view.</li>
                        </ul>
                    </li>
                    <li>
                        <strong>Search and Multi-Select:</strong>
                        <ul>
                            <li><strong>Search:</strong> Use the search box to find specific keys or values within the JSON data. Matching items are highlighted and expanded in tree view.</li>
                            <li><strong>Multi-Select:</strong> Toggle multi-select mode to add multiple items to the clipboard at once for batch operations.</li>
                        </ul>
                    </li>
                    <li>
                        <strong>JSON Operations:</strong>
                        <ul>
                            <li><strong>Download JSON:</strong> Download the current JSON data as a file to your local machine.</li>
                            <li><strong>Clipboard Tray:</strong> A storage area where you can temporarily keep selected data items.</li>
                            <li><strong>Copy All:</strong> Copy all items in the clipboard tray to your system clipboard.</li>
                            <li><strong>Clear Tray:</strong> Clear all items from the clipboard tray.</li>
                        </ul>
                    </li>
                    <li>
                        <strong>Music Sidebar:</strong>
                        <ul>
                            <li><strong>Toggle Sidebar:</strong> Open or close the music sidebar where you can control background playlists.</li>
                            <li><strong>Playlists:</strong> Choose from predefined playlists like "Coding Focus," "Relaxation," or "Coding Session" to set the mood while you work.</li>
                            <li><strong>Search YouTube:</strong> Search for custom music or sounds on YouTube directly from the sidebar.</li>
                        </ul>
                    </li>
                    <li>
                        <strong>Help & Documentation:</strong>
                        <ul>
                            <li><strong>Help Overlay:</strong> Access this help section at any time by clicking the "Help" button.</li>
                            <li>Each feature includes specific tooltips for quick guidance—hover over buttons and inputs to see tips.</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 Script This. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>