@onetype/framework 2.0.39 → 2.0.41

package/lib/items/transforms/codeflask/codeflask.js

@@ -1,97 +0,0 @@
-	transforms.ItemAdd({
-		id: 'codeflask',
-		icon: 'code',
-		name: 'CodeFlask',
-		description: 'Micro code editor with syntax highlighting. Supports live editing with onUpdate handler.',
-		js: [
-			'https://cdn.jsdelivr.net/npm/codeflask/build/codeflask.min.js'
-		],
-		config: {
-			'value': ['string', ''],
-			'language': ['string', 'markup'],
-			'line-numbers': ['boolean', true],
-			'readonly': ['boolean', false],
-			'onUpdate': ['function']
-		},
-		code: function(data, node, transformer)
-		{
-			this.setup = () =>
-			{
-				node.classList.add('codeflask-editor');
-				node.classList.add('codeflask-editor-' + identifier);
-
-				const initialValue = data['value'] || node.textContent || '';
-				node.innerHTML = '';
-
-				this.container = document.createElement('div');
-				this.container.className = 'codeflask-container';
-				node.appendChild(this.container);
-
-				this.initialValue = initialValue;
-			};
-
-			this.styles = () =>
-			{
-				const style = document.createElement('style');
-				style.textContent = `
-					.codeflask-editor-${id}
-					{
-						height: 100%;
-						width: 100%;
-					}
-					.codeflask-editor-${id} .codeflask-container
-					{
-						height: 100%;
-						width: 100%;
-					}
-					.codeflask-editor-${id} .codeflask
-					{
-						height: 100%;
-					}
-				`;
-				document.head.appendChild(style);
-			};
-
-			this.initialize = () =>
-			{
-				setTimeout(() =>
-				{
-					if(typeof CodeFlask === 'undefined')
-					{
-						console.error('CodeFlask library not loaded');
-						node.innerHTML = '<div style="padding: 20px;">CodeFlask not loaded</div>';
-						return;
-					}
-
-					const flask = new CodeFlask(this.container, {
-						language: data['language'] || 'markup',
-						lineNumbers: data['line-numbers'] !== false,
-						readonly: data['readonly'] === true
-					});
-
-					flask.updateCode(this.initialValue);
-
-					this.flask = flask;
-
-					flask.onUpdate((code) =>
-					{
-						// const onUpdate = data['onUpdate'];
-						// if(typeof onUpdate === 'function')
-						// {
-						// 	onUpdate({value: code, node});
-						// }
-					});
-
-					node.getValue = () => flask.getCode();
-					node.setValue = (value) => flask.updateCode(value);
-					node.setLanguage = (language) => flask.updateLanguage(language);
-
-				}, 200);
-			};
-
-			this.setup();
-			this.styles();
-			this.initialize();
-		}
-	});
-

package/lib/items/transforms/codemirror/codemirror.js

@@ -1,228 +0,0 @@
-transforms.ItemAdd({
-    id: 'codemirror',
-    icon: 'code',
-    name: 'Code Mirror',
-    description: 'Advanced code editor with syntax highlighting. Supports multiple languages and themes.',
-    js: [
-        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js',
-       
-    ],
-    css: [
-        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css',
-        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css',
-        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css',
-        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material.min.css'
-    ],
-    config: {
-        'value': ['string', '// Welcome to CodeMirror\nfunction hello() {\n    console.log("Hello, World!");\n}\n\nhello();'],
-        'mode': ['string', 'javascript'],
-        'theme': ['string', 'monokai'],
-        'height': ['number', 400],
-        'line-numbers': ['boolean', true],
-        'line-wrapping': ['boolean', false],
-        'tab-size': ['number', 4],
-        'indent-unit': ['number', 4],
-        'font-size': ['number', 14],
-        'readonly': ['boolean', false],
-        'auto-close-brackets': ['boolean', true],
-        'match-brackets': ['boolean', true],
-        'highlight-active-line': ['boolean', true],
-        'smart-indent': ['boolean', true],
-        'electric-chars': ['boolean', true],
-        'show-cursor-when-selecting': ['boolean', false]
-    },
-    code: function(data, node, transformer)
-    {
-        this.setup = () =>
-        {
-            // Clear existing content
-            node.innerHTML = '';
-
-            // Add codemirror wrapper class
-            node.classList.add('codemirror-wrapper');
-
-            // Create textarea element
-            const textarea = document.createElement('textarea');
-            textarea.id = 'codemirror-' + Math.random().toString(36).substring(2, 11);
-            textarea.value = data['value'] || '';
-
-            // Store textarea reference
-            this.textarea = textarea;
-
-            // Apply wrapper styles
-            const height = data['height'];
-            node.style.height = height + 'px';
-            node.style.border = '1px solid #e0e0e0';
-            node.style.borderRadius = '4px';
-            node.style.overflow = 'hidden';
-
-            // Append textarea to node
-            node.appendChild(textarea);
-        };
-
-        this.config = () =>
-        {
-            const fontSize = data['font-size'];
-
-            return {
-                value: data['value'] || '',
-                mode: data['mode'] || 'javascript',
-                theme: data['theme'] || 'monokai',
-                lineNumbers: data['line-numbers'] !== false,
-                lineWrapping: data['line-wrapping'] === true,
-                tabSize: data['tab-size'] || 4,
-                indentUnit: data['indent-unit'] || 4,
-                readOnly: data['readonly'] === true,
-                autoCloseBrackets: data['auto-close-brackets'] !== false,
-                matchBrackets: data['match-brackets'] !== false,
-                styleActiveLine: data['highlight-active-line'] !== false,
-                smartIndent: data['smart-indent'] !== false,
-                electricChars: data['electric-chars'] !== false,
-                showCursorWhenSelecting: data['show-cursor-when-selecting'] === true,
-                extraKeys: {
-                    'Ctrl-Space': 'autocomplete'
-                }
-            };
-        };
-
-        this.applyStyles = () =>
-        {
-            const fontSize = data['font-size'];
-
-            // Apply custom font size
-            setTimeout(() =>
-            {
-                if(this.editor)
-                {
-                    const wrapper = this.editor.getWrapperElement();
-                    wrapper.style.fontSize = fontSize + 'px';
-                    wrapper.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace';
-                }
-            }, 100);
-        };
-
-        this.initialize = () =>
-        {
-            setTimeout(() =>
-            {
-                // Check if CodeMirror is available
-                if(typeof CodeMirror === 'undefined')
-                {
-                    console.error('CodeMirror library not loaded');
-                    node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror library not available</div>';
-                    return;
-                }
-
-                try
-                {
-                    // Create CodeMirror instance
-                    this.editor = CodeMirror.fromTextArea(this.textarea, this.config());
-
-                    // Store instance on node for external access
-                    node._codeMirrorEditor = this.editor;
-
-                    // Apply custom styles
-                    this.applyStyles();
-
-                    // Set height
-                    const height = data['height'];
-                    this.editor.setSize('100%', height + 'px');
-
-                    // Add helper methods to node
-                    node.getValue = () =>
-                    {
-                        return this.editor ? this.editor.getValue() : '';
-                    };
-
-                    node.setValue = (value) =>
-                    {
-                        if(this.editor && value !== undefined)
-                        {
-                            this.editor.setValue(String(value));
-                        }
-                    };
-
-                    node.getMode = () =>
-                    {
-                        return this.editor ? this.editor.getOption('mode') : '';
-                    };
-
-                    node.setMode = (mode) =>
-                    {
-                        if(this.editor && mode)
-                        {
-                            this.editor.setOption('mode', String(mode));
-                        }
-                    };
-
-                    node.setTheme = (theme) =>
-                    {
-                        if(this.editor && theme)
-                        {
-                            this.editor.setOption('theme', String(theme));
-                        }
-                    };
-
-                    node.setReadOnly = (readonly) =>
-                    {
-                        if(this.editor)
-                        {
-                            this.editor.setOption('readOnly', Boolean(readonly));
-                        }
-                    };
-
-                    node.refresh = () =>
-                    {
-                        if(this.editor)
-                        {
-                            setTimeout(() =>
-                            {
-                                this.editor.refresh();
-                            }, 10);
-                        }
-                    };
-
-                    node.focus = () =>
-                    {
-                        if(this.editor)
-                        {
-                            this.editor.focus();
-                        }
-                    };
-
-                    node.dispose = () =>
-                    {
-                        if(this.editor)
-                        {
-                            this.editor.toTextArea();
-                            this.editor = null;
-                        }
-                    };
-
-                    // Auto-refresh when container becomes visible
-                    const observer = new IntersectionObserver((entries) =>
-                    {
-                        entries.forEach(entry =>
-                        {
-                            if(entry.isIntersecting && this.editor)
-                            {
-                                this.editor.refresh();
-                            }
-                        });
-                    });
-
-                    observer.observe(node);
-
-                    console.log('CodeMirror editor initialized successfully');
-
-                } catch (error) {
-                    console.error('CodeMirror initialization failed:', error);
-                    node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror initialization failed</div>';
-                }
-            }, 200);
-        };
-
-        this.setup();
-        this.initialize();
-    }
-});

package/lib/items/transforms/comparison/comparison.js

@@ -1,139 +0,0 @@
-transforms.ItemAdd({
-    id: 'comparison',
-    icon: 'compare_arrows',
-    name: 'Comparison',
-    description: 'Side-by-side comparison widget. Compare features, prices, or data in an interactive layout.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js'
-    ],
-    css: [
-        'https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css'
-    ],
-    config: {
-        'before-image': ['string', 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'],
-        'after-image': ['string', 'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'],
-        'before-label': ['string', 'Before'],
-        'after-label': ['string', 'After'],
-        'start-position': ['number', 50],
-        'hover-enabled': ['boolean', true],
-        'handle-color': ['string', '#ffffff'],
-        'divider-color': ['string', '#ffffff'],
-        'divider-width': ['number', 2],
-        'keyboard-enabled': ['boolean', true]
-    },
-    code: function(data, node, transformer)
-    {
-        this.setup = () =>
-        {
-            // Create the custom element wrapper
-            const slider = document.createElement('img-comparison-slider');
-
-            // Create before image
-            const beforeImage = document.createElement('img');
-            beforeImage.setAttribute('slot', 'first');
-            beforeImage.src = data['before-image'];
-            beforeImage.alt = data['before-label'];
-
-            // Create after image
-            const afterImage = document.createElement('img');
-            afterImage.setAttribute('slot', 'second');
-            afterImage.src = data['after-image'];
-            afterImage.alt = data['after-label'];
-
-            // Append images to slider
-            slider.appendChild(beforeImage);
-            slider.appendChild(afterImage);
-
-            // Clear node and append slider
-            node.innerHTML = '';
-            node.appendChild(slider);
-
-            // Store reference for later configuration
-            this.slider = slider;
-        };
-
-        this.labels = () =>
-        {
-            const beforeLabel = data['before-label'];
-            const afterLabel = data['after-label'];
-
-            if(beforeLabel && beforeLabel !== 'Before')
-            {
-                this.slider.setAttribute('data-first-label', beforeLabel);
-            }
-
-            if(afterLabel && afterLabel !== 'After')
-            {
-                this.slider.setAttribute('data-second-label', afterLabel);
-            }
-        };
-
-        this.styles = () =>
-        {
-            const handleColor = data['handle-color'];
-            const dividerColor = data['divider-color'];
-            const dividerWidth = data['divider-width'];
-
-            const styles = [];
-
-            if(handleColor !== '#ffffff')
-            {
-                styles.push(`--handle-color: ${handleColor}`);
-            }
-
-            if(dividerColor !== '#ffffff')
-            {
-                styles.push(`--divider-color: ${dividerColor}`);
-            }
-
-            if(dividerWidth !== 2)
-            {
-                styles.push(`--divider-width: ${dividerWidth}px`);
-            }
-
-            if(styles.length > 0)
-            {
-                this.slider.style.cssText = styles.join('; ');
-            }
-        };
-
-        this.attributes = () =>
-        {
-            const startPosition = data['start-position'];
-            const hoverEnabled = data['hover-enabled'];
-            const keyboardEnabled = data['keyboard-enabled'];
-
-            if(startPosition !== 50)
-            {
-                this.slider.setAttribute('value', startPosition);
-            }
-
-            if(!hoverEnabled)
-            {
-                this.slider.setAttribute('hover', 'false');
-            }
-
-            if(!keyboardEnabled)
-            {
-                this.slider.setAttribute('keyboard', 'false');
-            }
-        };
-
-        this.initialize = () =>
-        {
-            // Add wrapper class to node for styling if needed
-            node.classList.add('comparison-wrapper');
-
-            // Set width/height on wrapper if needed
-            node.style.display = 'block';
-            node.style.width = '100%';
-            node.style.maxWidth = '100%';
-        };
-
-        this.setup();
-        this.labels();
-        this.styles();
-        this.attributes();
-        this.initialize();
-    }
-});