building-drivers/code-viewer.html at main · leog25/building-drivers · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Viewer - Building Device Drivers</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <pre class="ascii-art-small">
 _____ ____  ____  _____   _     _ _____ _____  _    _ _____ ______
/  __ \  _  ||  _ \|  ___| | |   | |_   _|  ___|| |  | |  ___|| ___ \
| /  \/ | | || | | | |__   | |   | | | | | |__  | |  | | |__  | |_/ /
| |   | | | || | | |  __|  | |   | | | | |  __| | |/\| |  __| |    /
| \__/\ \_/ || |_| | |___  \ \_/ / _ | |_| |___ \  /\  / |___ | |\ \
 \____/\___/ |____/\____/   \___/  \___/\_____/  \/  \/\____/ \_| \_|
        </pre>
        <nav>
            <a href="index.html" class="back-link">[← Back to Main]</a>
        </nav>
    </header>

    <main>
        <div id="file-selector" class="terminal-box">
            <h2>[Select File to View]</h2>
            <select id="file-dropdown">
                <option value="">-- Select a file --</option>
                <option value="spi_hal.h">spi_hal.h - Hardware Abstraction Layer Interface</option>
                <option value="spi_device_driver.h">spi_device_driver.h - Device Driver Interface</option>
                <option value="spi_device_driver.c">spi_device_driver.c - Device Driver Implementation</option>
                <option value="spi_hal_linux.c">spi_hal_linux.c - Linux Platform Implementation</option>
                <option value="registers.h">registers.h - Device Register Definitions</option>
                <option value="spi_data.txt">spi_data.txt - Sample SPI Transfer Data</option>
            </select>
        </div>

        <div id="code-display" class="terminal-box" style="display: none;">
            <div class="code-header">
                <h2 id="filename">[Filename]</h2>
                <button id="copy-button" class="copy-btn">[Copy Code]</button>
            </div>
            <pre id="code-content" class="code-viewer"></pre>
        </div>
    </main>

    <footer>
        <p>Code Viewer - Building Device Drivers From The Ground Up</p>
    </footer>

    <script>
        const fileContents = {
            'spi_hal.h': `File not loaded - This would normally load from the server`,
            'spi_device_driver.h': `File not loaded - This would normally load from the server`,
            'spi_device_driver.c': `File not loaded - This would normally load from the server`,
            'spi_hal_linux.c': `File not loaded - This would normally load from the server`,
            'registers.h': `File not loaded - This would normally load from the server`,
            'spi_data.txt': `File not loaded - This would normally load from the server`
        };

        const urlParams = new URLSearchParams(window.location.search);
        const fileParam = urlParams.get('file');

        const fileDropdown = document.getElementById('file-dropdown');
        const codeDisplay = document.getElementById('code-display');
        const codeContent = document.getElementById('code-content');
        const filenameDisplay = document.getElementById('filename');
        const copyButton = document.getElementById('copy-button');

        if (fileParam && fileDropdown.querySelector(`option[value="${fileParam}"]`)) {
            fileDropdown.value = fileParam;
            loadFile(fileParam);
        }

        fileDropdown.addEventListener('change', function() {
            const selectedFile = this.value;
            if (selectedFile) {
                const newUrl = `${window.location.pathname}?file=${selectedFile}`;
                window.history.pushState({}, '', newUrl);
                loadFile(selectedFile);
            } else {
                codeDisplay.style.display = 'none';
            }
        });

        function loadFile(filename) {
            filenameDisplay.textContent = `[${filename}]`;

            fetch(filename)
                .then(response => response.text())
                .then(text => {
                    codeContent.textContent = text;
                    codeDisplay.style.display = 'block';

                    addLineNumbers();
                })
                .catch(error => {
                    codeContent.textContent = `Error loading file: ${filename}\n\nIn a production environment, this would load the actual file content.`;
                    codeDisplay.style.display = 'block';
                });
        }

        function addLineNumbers() {
            const lines = codeContent.textContent.split('\n');
            const numberedLines = lines.map((line, index) => {
                const lineNum = (index + 1).toString().padStart(4, ' ');
                return `${lineNum}│ ${line}`;
            });
            codeContent.textContent = numberedLines.join('\n');
        }

        copyButton.addEventListener('click', function() {
            const textToCopy = codeContent.textContent;
            navigator.clipboard.writeText(textToCopy).then(() => {
                this.textContent = '[Copied!]';
                setTimeout(() => {
                    this.textContent = '[Copy Code]';
                }, 2000);
            });
        });
    </script>
</body>
</html>