Visual Diff Merge Customization Guide

<?php

return [
    'php' => [
        'debug' => [
            'enabled' => true,  // Enable debugging
            'logLevel' => 3,    // Verbose logging
            'logFile' => 'custom-debug.log'  // Custom log file
        ],
        'diff' => [
            'contextLines' => 5,  // Show 5 lines of context
            'ignoreWhitespace' => true,  // Ignore whitespace changes
            'ignoreCase' => false
        ],
        'security' => [
            'csrfProtection' => true,
            'salt' => 'your-custom-salt-string',  // Custom security salt
            'allowedDirectories' => [
                realpath(__DIR__ . '/../diff-viewer/samples'),
                '/var/www/html/my-project'
            ]
        ]
    ],
    'javascript' => [
        'lang' => 'fr',  // Set French as default language
        'debug' => true,
        'logLevel' => 3,
        'theme' => [
            'defaultFamily' => 'github',  // Use GitHub theme family
            'defaultMode' => 'light',     // Default to light mode
            'showSelector' => true
        ],
        // Custom save options
        'saveOptions' => [
            'saveToOriginal' => true,
            'saveWithSuffix' => true,
            'saveToOld' => false,  // Disable saving to old file
            'saveToOldWithSuffix' => false,
            'saveToBoth' => true,
            'saveToBothWithSuffix' => true
        ]
    ]
];

<!-- Load Visual Diff Merge CSS first -->
<link rel="stylesheet" href="path/to/diff-viewer.min.css">
<link rel="stylesheet" href="path/to/diff-viewer-theme.min.css">

<!-- Then load your custom CSS to override styles -->
<link rel="stylesheet" href="path/to/your-custom-styles.css">

/* Custom colors for diff chunks */
.vdm-diff__line--added {
    background-color: rgba(0, 180, 0, 0.2);
}

.vdm-diff__line--removed {
    background-color: rgba(255, 0, 0, 0.2);
}

/* Custom font for code */
.vdm-diff__code {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
}

/* Custom button styling */
.vdm-btn {
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Custom navigation controls */
.vdm-diff__navigation {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

/* Highlight current chunk */
.vdm-diff__chunk.vdm-active {
    box-shadow: 0 0 0 2px #4285f4;
}

'javascript' => [
    'lang' => 'fr', // Set French as default language
    // Other settings...
]

'javascript' => [
    // Other settings...
    'translations' => [
        'en' => [
            'applyMerge' => 'Apply Merge',
            'continueResolving' => 'Continue Resolving',
            // Other English translations...
        ],
        'fr' => [
            'applyMerge' => 'Appliquer la fusion',
            'continueResolving' => 'Continuer la résolution',
            // Other French translations...
        ],
        'es' => [
            'applyMerge' => 'Aplicar fusión',
            'continueResolving' => 'Continuar resolviendo',
            // Other Spanish translations...
        ]
    ]
]

'javascript' => [
    'lang' => 'de', // Set German as default language
    'translations' => [
        // Existing translations...
        'de' => [
            'applyMerge' => 'Zusammenführung anwenden',
            'continueResolving' => 'Weiter auflösen',
            'filesIdenticalMessage' => '<strong>Dateien sind identisch</strong><br>Die verglichenen Dateien sind identisch. Keine Unterschiede gefunden.',
            // Add all other required translations
        ]
    ]
]

// Create a custom component
class CustomControl {
    constructor(options = {}) {
        this.container = options.container || document.body;
        this.diffViewer = options.diffViewer;
    }

    initialize() {
        // Create your custom UI element
        const customElement = document.createElement('div');
        customElement.classList.add('vdm-custom-control');
        customElement.innerHTML = `
            <button class="vdm-btn vdm-btn--primary">Custom Action</button>
        `;

        // Add event listener
        const button = customElement.querySelector('button');
        button.addEventListener('click', () => {
            // Do something with the diff viewer
            console.log('Custom action clicked');
            this.diffViewer.refreshView();
        });

        // Append to container
        this.container.appendChild(customElement);
        return true;
    }
}

// After initializing the diff viewer
document.addEventListener('DOMContentLoaded', function() {
    // Wait for diffViewer to be initialized
    const checkDiffViewer = setInterval(() => {
        if (window.diffViewer) {
            clearInterval(checkDiffViewer);

            // Create and initialize your custom component
            const customControl = new CustomControl({
                container: document.querySelector('.vdm-diff__controls'),
                diffViewer: window.diffViewer
            });

            customControl.initialize();
        }
    }, 100);
});

// Extend the TextCompareManager class
class CustomTextCompareManager extends TextCompareManager {
    constructor(options = {}) {
        // Call parent constructor
        super(options);

        // Add custom properties
        this.customProperty = options.customProperty || 'default';
    }

    // Override a method
    async handleFormSubmit(event) {
        // Call the parent method first
        await super.handleFormSubmit(event);

        // Add custom behavior after form submission
        console.log('Form submitted with custom behavior');
        this.performCustomAction();
    }

    // Add a new method
    performCustomAction() {
        console.log('Performing custom action');
        // Your custom logic here
    }
}

// Replace the default manager with your custom one
document.addEventListener('DOMContentLoaded', function() {
    // Initialize with your custom manager
    window.textCompareManager = new CustomTextCompareManager({
        customProperty: 'custom value'
    });
});

// Create a post-processing hook
function addCustomPostProcessing() {
    // Wait for diffViewer to be initialized
    const checkDiffViewer = setInterval(() => {
        if (window.diffViewer) {
            clearInterval(checkDiffViewer);

            // Store the original method
            const originalRenderDiff = window.diffViewer.renderDiff;

            // Override the method
            window.diffViewer.renderDiff = function() {
                // Call the original method
                const result = originalRenderDiff.apply(this, arguments);

                // Perform post-processing
                console.log('Performing post-processing on diff');

                // Example: Add line numbers to the gutter
                const gutters = document.querySelectorAll('.vdm-diff__gutter');
                gutters.forEach(gutter => {
                    const lineNumbers = gutter.querySelectorAll('.vdm-diff__line-number');
                    lineNumbers.forEach((lineNumber, index) => {
                        lineNumber.setAttribute('data-custom-index', index);
                    });
                });

                return result;
            };
        }
    }, 100);
}

// Add the hook
document.addEventListener('DOMContentLoaded', addCustomPostProcessing);

<!-- Include required CSS files -->
<link rel="stylesheet" href="path/to/diff-viewer.min.css">
<link rel="stylesheet" href="path/to/diff-viewer-theme.min.css">

<!-- Create container for the diff viewer -->
<div id="my-diff-container"></div>

<!-- Include required JavaScript files -->
<script src="path/to/diff-viewer.min.js"></script>

<script>
    // Initialize the diff viewer with your content
    document.addEventListener('DOMContentLoaded', function() {
        // Configuration object
        const config = {
            container: 'my-diff-container',
            debug: false,
            logLevel: 1,
            old: {
                type: 'text',
                content: 'Old content here',
                filename: 'old.txt'
            },
            new: {
                type: 'text',
                content: 'New content here',
                filename: 'new.txt'
            }
        };

        // Process diff on the server
        fetch('path/to/api/diff-processor.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                // Merge the result config with our initial config
                const mergedConfig = {...config, ...result.config};

                // Initialize diff viewer
                window.diffViewer = new DiffViewer(mergedConfig);
                window.diffViewer.initialize();
            } else {
                console.error('Error processing diff:', result.error);
            }
        });
    });
</script>

<?php
// custom-integration.php

require_once __DIR__ . '/../vendor/autoload.php';

use VisualDiffMerge\Config;
use VisualDiffMerge\DiffViewer;
use VisualDiffMerge\PathManager;

// Initialize config
Config::init();

// Set JSON response headers
header('Content-Type: application/json');

// Get data from your system
$oldVersion = yourSystem->getVersion('old');
$newVersion = yourSystem->getVersion('current');

// Create a DiffViewer instance
$diffViewer = new DiffViewer([
    'debug' => Config::isDebugEnabled(),
    'diffContextLines' => Config::get('php.diff.contextLines'),
    'ignoreWhitespace' => Config::get('php.diff.ignoreWhitespace'),
    'ignoreCase' => Config::get('php.diff.ignoreCase')
]);

try {
    // Process the diff
    $diffData = $diffViewer->compareContent(
        $oldVersion->content,
        $newVersion->content,
        $newVersion->fileExtension
    );

    // Create secure reference IDs
    $pathManager = PathManager::getInstance();
    $oldRefId = $pathManager->registerPath($oldVersion->filePath);
    $newRefId = $pathManager->registerPath($newVersion->filePath);

    // Prepare the response
    $response = [
        'success' => true,
        'config' => [
            'diffData' => $diffData,
            'serverSaveEnabled' => true,
            'fileRefId' => $newRefId,
            'oldFileRefId' => $oldRefId,
            'newFileName' => basename($newVersion->filePath),
            'oldFileName' => basename($oldVersion->filePath),
            'translations' => Config::getTranslations(Config::get('javascript.lang'))
        ]
    ];

    echo json_encode($response);
} catch (Exception $e) {
    echo json_encode([
        'success' => false,
        'error' => $e->getMessage()
    ]);
}

// Set up event listeners after DiffViewer is initialized
document.addEventListener('DOMContentLoaded', function() {
    // Wait for diffViewer to be initialized
    const checkDiffViewer = setInterval(() => {
        if (window.diffViewer) {
            clearInterval(checkDiffViewer);

            // Listen for chunk selection
            document.addEventListener('vdm:chunkSelected', function(event) {
                console.log('Chunk selected:', event.detail);

                // Integrate with your system
                yourSystem.notifyChunkSelected(event.detail.chunkId, event.detail.side);
            });

            // Listen for merge completion
            document.addEventListener('vdm:mergeCompleted', function(event) {
                console.log('Merge completed:', event.detail);

                // Integrate with your system
                yourSystem.notifyMergeCompleted(event.detail.files);

                // Navigate to a different page
                setTimeout(() => {
                    window.location.href = '/your-system/view?file=' + event.detail.files[0].filename;
                }, 2000);
            });
        }
    }, 100);
});

// Visual Diff Merge Plugin Template
(function(window) {
    'use strict';

    // Plugin constructor
    function VDMPlugin(options = {}) {
        this.name = 'MyCustomPlugin';
        this.version = '1.0.0';
        this.options = options;
        this.diffViewer = null;
    }

    // Plugin prototype
    VDMPlugin.prototype = {
        /**
         * Initialize the plugin
         * @param {DiffViewer} diffViewer - The DiffViewer instance
         * @returns {boolean} Success status
         */
        initialize: function(diffViewer) {
            if (!diffViewer) {
                console.error('DiffViewer instance is required');
                return false;
            }

            this.diffViewer = diffViewer;
            console.log(`${this.name} v${this.version} initialized`);

            // Set up your plugin functionality
            this.setupUI();
            this.attachEventListeners();

            return true;
        },

        /**
         * Set up plugin UI
         */
        setupUI: function() {
            // Create and insert your UI elements
            const pluginContainer = document.createElement('div');
            pluginContainer.classList.add('vdm-plugin-container');
            pluginContainer.innerHTML = `
                <div class="vdm-plugin-header">${this.name}</div>
                <div class="vdm-plugin-content">
                    <button class="vdm-btn vdm-plugin-btn">Plugin Action</button>
                </div>
            `;

            // Insert into the diff viewer UI
            const targetContainer = document.querySelector('.vdm-diff__controls');
            if (targetContainer) {
                targetContainer.appendChild(pluginContainer);
            }
        },

        /**
         * Attach event listeners
         */
        attachEventListeners: function() {
            // Find your plugin button
            const button = document.querySelector('.vdm-plugin-btn');
            if (button) {
                button.addEventListener('click', this.handleAction.bind(this));
            }
        },

        /**
         * Handle plugin action
         * @param {Event} event - Click event
         */
        handleAction: function(event) {
            console.log('Plugin action triggered');

            // Example: Highlight all modified chunks
            const modifiedChunks = this.diffViewer.getDiffData().chunks.filter(
                chunk => chunk.type === 'modified'
            );

            modifiedChunks.forEach(chunk => {
                // Do something with the chunk
                console.log('Modified chunk:', chunk);
            });

            // Custom logic here
        }
    };

    // Register plugin with Visual Diff Merge
    window.registerVDMPlugin = function(diffViewer, options) {
        const plugin = new VDMPlugin(options);
        plugin.initialize(diffViewer);
        return plugin;
    };
})(window);

// Usage:
// After DiffViewer is initialized
document.addEventListener('DOMContentLoaded', function() {
    // Wait for diffViewer to be initialized
    const checkDiffViewer = setInterval(() => {
        if (window.diffViewer) {
            clearInterval(checkDiffViewer);

            // Register the plugin
            const plugin = window.registerVDMPlugin(window.diffViewer, {
                // Plugin options
                option1: 'value1',
                option2: 'value2'
            });
        }
    }, 100);
});