codify/script.js at main · seershan/codify · 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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
document.addEventListener("DOMContentLoaded", () => {
    // Initialize editors
    const editors = {
      html: ace.edit("html-editor"),
      css: ace.edit("css-editor"),
      js: ace.edit("js-editor"),
    }

    // Editor configuration
    const editorConfig = {
      html: {
        mode: "ace/mode/html",
        content:
          "<!DOCTYPE html>\n<html>\n<head>\n    <title>My Page</title>\n</head>\n<body>\n    <h1>Welcome to Codify!</h1>\n    <p>Start coding here...</p>\n</body>\n</html>",
      },
      css: {
        mode: "ace/mode/css",
        content:
          "body {\n    font-family: Arial, sans-serif;\n}\n\nh1 {\n    color: #3a86ff;\n    text-align: center;\n}\n\np {\n    font-size: 1.2rem;\n    line-height: 1.6;\n        color: green;}",
      },
      js: {
        mode: "ace/mode/javascript",
        content:
          "// Your JavaScript code here\nconsole.log('Happy coding!');\n\nfunction greet() {\n    alert('Hello, World!');\n}",
      },
    }

    // Configure each editor
    Object.entries(editors).forEach(([key, editor]) => {
      const config = editorConfig[key]
      editor.setTheme("ace/theme/monokai")
      editor.session.setMode(config.mode)
      editor.setValue(config.content, -1) // -1 moves cursor to start
      editor.setOptions({
        fontSize: "14px",
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
        showPrintMargin: false,
        tabSize: 4,
        useSoftTabs: true,
        showGutter: true,
        highlightActiveLine: true,
      })
    })

    // UI Elements
    const themeToggle = document.getElementById("theme-toggle")
    const runBtn = document.getElementById("run-btn")
    const openNewPageBtn = document.getElementById("open-new-page-btn")
    const saveBtn = document.getElementById("save-btn")
    const outputContent = document.getElementById("output-content")
    const loadingOverlay = document.getElementById("loading-overlay")

    // Theme toggle handling
    let isDarkMode = true
    function toggleTheme() {
      isDarkMode = !isDarkMode
      document.body.classList.toggle("dark-mode")
      const theme = isDarkMode ? "ace/theme/monokai" : "ace/theme/solarized_light"
      themeToggle.innerHTML = `<i class="fas fa-${isDarkMode ? "sun" : "moon"}"></i>`

      Object.values(editors).forEach((editor) => {
        editor.setTheme(theme)
      })
    }

    // Generate HTML content
    function generateHTMLContent() {
      const htmlCode = editors.html.getValue()
      const cssCode = editors.css.getValue()
      const jsCode = editors.js.getValue()

      return `
              <html>
                  <head>
                      <style>${cssCode}</style>
                  </head>
                  <body>
                      ${htmlCode}
                      <script>${jsCode}</script>
                  </body>
              </html>
          `
    }

    // Run code and display output
    async function runCode() {
      loadingOverlay.classList.remove("hidden")
      outputContent.style.opacity = "0"

      // Simulate a delay for the loading effect
      await new Promise((resolve) => setTimeout(resolve, 1000))

      const content = generateHTMLContent()
      outputContent.innerHTML = ""
      const iframe = document.createElement("iframe")
      iframe.style.width = "100%"
      iframe.style.height = "100%"
      iframe.style.border = "none"
      outputContent.appendChild(iframe)

      iframe.contentWindow.document.open()
      iframe.contentWindow.document.write(content)
      iframe.contentWindow.document.close()

      loadingOverlay.classList.add("hidden")
      outputContent.style.opacity = "1"
      outputContent.style.transition = "opacity 0.5s ease"
    }

    // Open result in new page
    function openInNewPage() {
      const content = generateHTMLContent()
      const newWindow = window.open()
      newWindow.document.write(content)
      newWindow.document.close()
    }

    // Save button click handler
    function handleSave() {
      const content = generateHTMLContent()
      const blob = new Blob([content], { type: "text/html;charset=utf-8" })
      const link = document.createElement("a")
      link.href = URL.createObjectURL(blob)
      link.download = "code_notebook_pro_project.html"
      link.click()
      URL.revokeObjectURL(link.href)
    }

    // Minimize/Maximize functionality
    function toggleMinimize(element) {
      element.classList.toggle("minimized")
      element.classList.remove("maximized")
    }

    function toggleMaximize(element) {
      element.classList.toggle("maximized")
      element.classList.remove("minimized")
    }

    // Add smooth scrolling animation
    function smoothScroll(target) {
      target.scrollIntoView({
        behavior: "smooth",
        block: "start",
      })
    }

    // Event Listeners
    themeToggle.addEventListener("click", toggleTheme)
    runBtn.addEventListener("click", handleRun)
    openNewPageBtn.addEventListener("click", openInNewPage)
    saveBtn.addEventListener("click", handleSave)

    document.querySelectorAll(".minimize-btn").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        const wrapper = e.target.closest(".editor-wrapper") || e.target.closest(".output-container")
        toggleMinimize(wrapper)
      })
    })

    document.querySelectorAll(".maximize-btn").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        const wrapper = e.target.closest(".editor-wrapper") || e.target.closest(".output-container")
        toggleMaximize(wrapper)
      })
    })

    // Add smooth scrolling to the run button
    runBtn.addEventListener("click", () => {
      smoothScroll(document.querySelector(".output-container"))
    })

    // Run button click handler
    async function handleRun() {
      loadingOverlay.classList.remove("hidden")
      try {
        runCode()
      } catch (error) {
        outputContent.textContent = `Error: ${error.message}`
      } finally {
        loadingOverlay.classList.add("hidden")
      }
    }

    // Initialize UI
    toggleTheme() // Set initial theme
    runCode() // Initial run to show default output
  })