@littlecarlito/blorktools 0.50.3 → 0.51.0

package/src/asset_debugger/modals/html-editor-modal/html-editor-modal.css

@@ -0,0 +1,452 @@
+/* HTML Editor Modal Styles */
+#html-editor-reset {
+    display: none;
+}
+
+/* Base modal styles */
+#html-editor-modal {
+    display: none;
+}
+
+#html-editor-modal.visible {
+    display: flex !important;
+    z-index: 3000; /* Ensure it's above other UI elements */
+}
+
+.modal-container {
+    width: 80%;
+    height: 85%;
+    max-width: 1000px;
+    max-height: 600px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Preview mode class-based styling */
+.preview-mode .dropdowns-container {
+    display: none !important;
+}
+
+.preview-mode #html-editor-preview {
+    display: none !important;
+}
+
+.preview-mode #html-editor-reset {
+    display: inline-block !important;
+}
+
+/* CSS-based toggling for preview mode */
+.preview-mode .editor-container {
+    display: none !important;
+}
+
+.preview-mode .html-editor-textarea {
+    display: none !important;
+}
+
+/* Ensure editor container is displayed properly when not in preview mode */
+#html-editor-modal:not(.preview-mode) .editor-container {
+    display: flex !important;
+}
+
+#html-editor-modal:not(.preview-mode) .html-editor-textarea {
+    display: block !important;
+}
+
+#html-editor-modal:not(.preview-mode) .editor-preview-container {
+    display: none !important;
+}
+
+/* Dropdown container styling */
+.dropdowns-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background-color: rgba(30, 30, 30, 0.5);
+    border-radius: 4px;
+    border: 1px solid var(--panel-border);
+    margin-right: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/* Dropdown hint text */
+.dropdown-hint {
+    font-size: 12px;
+    color: var(--label-text);
+    white-space: nowrap;
+    font-style: italic;
+}
+
+/* Dropdown styling */
+.editor-dropdown {
+    max-width: 60px;
+    font-size: 12px;
+    padding: 4px 8px;
+    background-color: var(--input-bg);
+    color: var(--input-text);
+    border: 1px solid var(--panel-border);
+    border-radius: 3px;
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+#html-render-type {
+    max-width: 100px;
+}
+
+.editor-dropdown:hover {
+    border-color: var(--button-color);
+}
+
+.editor-dropdown:focus {
+    outline: none;
+    border-color: var(--button-color);
+    box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.25);
+}
+
+/* Format button container */
+.format-btn-container {
+    height: 40px;
+    background-color: rgba(30, 30, 30, 0.8);
+    border-bottom: 1px solid var(--panel-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    z-index: 10;
+}
+
+/* Checkbox group styling */
+.checkbox-group {
+    display: flex;
+    align-items: center;
+}
+
+/* Checkbox styling in the format bar */
+.format-btn-container .checkbox-container {
+    color: #ddd;
+    font-size: 12px;
+    margin-right: 8px;
+}
+
+.format-btn-container .checkbox-label {
+    font-weight: normal;
+}
+
+.html-editor-textarea {
+    width: 100%;
+    height: 100%; /* Take full height of parent */
+    padding: 10px;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--input-text);
+    background-color: var(--input-bg);
+    border: none;
+    resize: none;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: auto;
+    min-height: 0; /* Important for proper flex behavior */
+}
+
+/* Format button styling */
+.format-btn {
+    background-color: var(--button-color);
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 4px 12px;
+    font-family: monospace;
+    transition: all 0.2s ease;
+    border-radius: 3px;
+    font-weight: 500;
+}
+
+.format-btn:hover {
+    background-color: #0d74c7;
+}
+
+/* Editor container */
+.editor-container {
+    position: relative;
+    border: 1px solid var(--panel-border);
+    margin: 10px 15px;
+    background-color: rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    min-height: 0; /* Important for proper flex behavior */
+    height: 80%; /* Take up 80% of the modal height */
+}
+
+/* Button styling */
+.editor-btn {
+    padding: 6px 12px;
+    background-color: var(--button-color);
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: monospace;
+    transition: background-color 0.3s ease;
+    font-weight: bold;
+    min-width: 80px;
+}
+
+.editor-btn:hover {
+    background-color: #0d74c7;
+}
+
+/* Reset button styling */
+#html-editor-reset {
+    display: none;
+    background-color: transparent !important;
+    border: 2px solid var(--button-color);
+    color: var(--button-color);
+}
+
+#html-editor-reset:hover {
+    background-color: var(--button-color) !important;
+    color: white;
+}
+
+/* Preview container */
+.editor-preview-container {
+    flex: 0; /* Don't take up space when not displayed */
+    min-height: 0;
+    margin: 10px 0;
+    display: none; /* Hidden by default */
+    background-color: #000;
+    position: relative;
+    border: 1px solid var(--panel-border);
+    height: 0; /* Start with zero height when not in preview mode */
+    overflow: hidden;
+}
+
+/* When in preview mode, the container takes proper dimensions */
+.preview-mode .editor-preview-container {
+    display: block;
+    height: 400px;
+    min-height: 400px;
+    overflow: visible;
+}
+
+.html-preview {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+/* Status messages */
+.editor-status {
+    padding: 5px 10px;
+    margin-right: 10px;
+    font-size: 14px;
+    flex-grow: 1;
+}
+
+.editor-status.error {
+    color: #e74c3c;
+}
+
+.editor-status.success {
+    color: #2ecc71;
+}
+
+.editor-status.info {
+    color: #3498db;
+}
+
+.editor-status.warning {
+    color: #f39c12;
+}
+
+/* Editor controls */
+.editor-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.editor-options {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+/* Error display - moved outside the editor container */
+.html-editor-errors {
+    margin: 0 15px;
+    padding: 8px 12px;
+    background-color: #f8d7da;
+    color: #721c24;
+    font-size: 12px;
+    max-height: 60px;
+    overflow-y: auto;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid #f5c6cb;
+    border-top: none;
+    display: none; /* Hide by default */
+}
+
+/* Show errors when they exist */
+.html-editor-errors:not(:empty) {
+    display: block;
+}
+
+.html-editor-textarea.has-errors {
+    border: 1px solid #e74c3c;
+}
+
+/* Preview error log */
+.preview-error-log {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(231, 76, 60, 0.9);
+    color: white;
+    padding: 10px;
+    max-height: 100px;
+    overflow-y: auto;
+    font-family: monospace;
+    font-size: 12px;
+    display: none;
+}
+
+.error-entry {
+    margin-bottom: 5px;
+    word-break: break-word;
+}
+
+.error-time {
+    font-weight: bold;
+    color: #f8f9fa;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .editor-options {
+        flex-direction: column;
+    }
+    
+    .dropdown-container {
+        width: 100%;
+    }
+}
+
+/* Preview Info Panel Styles */
+#preview-info-panel {
+    position: absolute;
+    z-index: 1000;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--panel-border, rgba(50, 50, 50, 0.7));
+    border-radius: 5px;
+    overflow: hidden;
+    background-color: rgba(0, 0, 0, 0);
+    width: 250px;
+    transition: height 0.3s ease;
+}
+
+#preview-info-header {
+    background-color: rgba(30, 30, 30, 0.7);
+    color: white;
+    padding: 5px 10px;
+    cursor: grab;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#preview-info-header span.title {
+    font-weight: bold;
+    font-size: 12px;
+}
+
+#preview-info-header span.collapse-btn {
+    font-size: 12px;
+    cursor: pointer;
+    margin-left: 10px;
+    width: 15px;
+    text-align: center;
+}
+
+#preview-info-content {
+    background-color: rgba(20, 20, 20, 0.7);
+    color: white;
+    padding: 10px;
+    font-size: 12px;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+#preview-info-content strong {
+    color: #3498db;
+    font-weight: bold;
+}
+
+#preview-info-content ul {
+    margin: 0;
+    padding: 0 0 0 15px;
+}
+
+#preview-info-content li {
+    margin: 2px 0;
+}
+
+/* Style for bullet points */
+#preview-info-content br + strong {
+    margin-top: 10px;
+    display: inline-block;
+}
+
+/* Preview options styling */
+.preview-options {
+    display: flex;
+    align-items: center;
+    margin-left: 15px;
+}
+
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: var(--label-text);
+    cursor: pointer;
+    user-select: none;
+}
+
+.checkbox-container input[type="checkbox"] {
+    margin-right: 5px;
+    cursor: pointer;
+}
+
+.checkbox-label {
+    white-space: nowrap;
+}
+
+/* Hide border checkbox in preview mode */
+.preview-mode .format-btn-container .checkbox-container {
+    display: none;
+}
+
+/* Hide animation dropdown when long-exposure-mode class is present */
+#editor-dropdowns-container.long-exposure-mode .dropdown-hint:nth-child(5),
+#editor-dropdowns-container.long-exposure-mode #html-animation-type {
+    display: none;
+} 

package/src/asset_debugger/modals/html-editor-modal/html-editor-modal.html

@@ -0,0 +1,87 @@
+<!-- Link to external stylesheet -->
+<link rel="stylesheet" href="/asset_debugger/modals/html-editor-modal/html-editor-modal.css">
+
+<!-- Embedded HTML Editor Modal -->
+<div id="html-editor-modal" class="modal-overlay">
+    <div class="modal-container">
+        <div class="modal-header">
+            <h3 class="modal-title">HTML Editor: <span id="html-editor-mesh-name"></span></h3>
+            <button class="modal-close" id="html-editor-close">&times;</button>
+        </div>
+        
+        <div class="editor-controls">
+            <div class="editor-options">
+                <!-- Grouped dropdowns with hint text -->
+                <div id="editor-dropdowns-container" class="dropdowns-container">
+                    <span class="dropdown-hint">Rendered using</span>
+                    <select id="html-render-type" class="editor-dropdown">
+                        <option value="threejs">img2texture</option>
+                        <option value="css3d">CSS3D</option>
+                        <option value="longExposure">Long Exposure</option>
+                    </select>
+                    
+                    <span class="dropdown-hint">at</span>
+                    <select id="html-playback-speed" class="editor-dropdown">
+                        <option value="0.25">x0.25</option>
+                        <option value="0.5">x0.5</option>
+                        <option value="0.75">x0.75</option>
+                        <option value="1.0" selected>x1</option>
+                        <option value="1.5">x1.5</option>
+                        <option value="2.0">x2</option>
+                    </select>
+                    
+                    <span class="dropdown-hint">animated with</span>
+                    <select id="html-animation-type" class="editor-dropdown">
+                        <option value="play" selected>Play</option>
+                        <option value="loop">Loop</option>
+                        <option value="bounce">Bounce</option>
+                    </select>
+                </div>
+                
+                <!-- Preview options checkboxes -->
+                <div class="preview-options">
+                    <!-- Removed duplicate checkbox -->
+                </div>
+            </div>
+            <!-- Buttons -->
+            <button id="html-editor-preview" class="editor-btn" title="Preview">Preview</button>
+            <button id="html-editor-reset" class="editor-btn" title="Reset">Reset</button>
+        </div>
+        
+        <div class="editor-container">
+            <div class="format-btn-container">
+                <div class="checkbox-group">
+                    <label class="checkbox-container">
+                        <input type="checkbox" id="show-wireframe" checked>
+                        <span class="checkbox-label">Show Borders</span>
+                    </label>
+                    <label class="checkbox-container">
+                        <input type="checkbox" id="display-on-mesh">
+                        <span class="checkbox-label">Display on Mesh</span>
+                    </label>
+                    <label class="checkbox-container">
+                        <input type="checkbox" id="rig-control-node">
+                        <span class="checkbox-label">Rig Control Node</span>
+                    </label>
+                </div>
+                <button id="html-editor-format" class="format-btn" title="Format HTML">Format</button>
+            </div>
+            <textarea id="html-editor-textarea" class="code-editor html-editor-textarea" placeholder="Enter HTML code here..."></textarea>
+        </div>
+        
+        <!-- Error messages container -->
+        <div class="html-editor-errors" id="html-editor-errors"></div>
+        
+        <div class="editor-preview-container" id="html-preview-container">
+            <div id="html-preview-content" class="html-preview"></div>
+        </div>
+        
+        <div class="modal-footer">
+            <div class="editor-status" id="html-editor-status"></div>
+            <div class="editor-buttons">
+                <button id="html-editor-cancel" class="modal-btn modal-btn-secondary">Cancel</button>
+                <button id="html-editor-apply" class="modal-btn modal-btn-primary">Save and Apply</button>
+            </div>
+        </div>
+    </div>
+</div>