Megamenu/build-classic.ps1

# Build script for classic SharePoint version
# Creates a standalone distribution with proper service extraction

Write-Host "Building MegaMenu Classic Distribution..." -ForegroundColor Green

# Ensure output directory exists
$outputPath = ".\classic"
if (-not (Test-Path $outputPath)) {
    New-Item -ItemType Directory -Path $outputPath -Force
}

# Step 1: Build the modern SPFx version to ensure CSS is up to date
Write-Host "Building SPFx version for CSS..." -ForegroundColor Yellow
try {
    gulp bundle --ship
    Write-Host "✓ SPFx build completed" -ForegroundColor Green
} catch {
    Write-Host "⚠ SPFx build failed, using existing CSS" -ForegroundColor Yellow
}

# Step 2: Copy CSS from the built version (same CSS for both classic and modern)
Write-Host "Copying CSS files..." -ForegroundColor Yellow
$cssSource = ".\lib\extensions\megaMenu\MegaMenu.css"
$cssTarget = ".\classic\MegaMenu.css"

if (Test-Path $cssSource) {
    Copy-Item $cssSource $cssTarget -Force
    Write-Host "✓ CSS copied from SPFx build" -ForegroundColor Green
} else {
    Write-Host "⚠ Built CSS not found, keeping existing classic CSS" -ForegroundColor Yellow
}

# Step 3: Verify standalone services exist
$servicesFile = ".\classic\megamenu-services-standalone.js"
if (Test-Path $servicesFile) {
    Write-Host "✓ Standalone services found" -ForegroundColor Green
} else {
    Write-Host "✗ Missing megamenu-services-standalone.js" -ForegroundColor Red
    Write-Host "  Please ensure this file exists in the classic folder" -ForegroundColor Yellow
}

# Step 4: Verify classic wrapper exists
$wrapperFile = ".\classic\megamenu-classic.js" 
if (Test-Path $wrapperFile) {
    Write-Host "✓ Classic wrapper found" -ForegroundColor Green
} else {
    Write-Host "✗ Missing megamenu-classic.js" -ForegroundColor Red
}

# Step 5: Create complete deployment package info
Write-Host "Creating deployment documentation..." -ForegroundColor Yellow

$deploymentContent = @"
# SharePoint MegaMenu Classic Deployment Guide
Version 1.0.2 - Classic SharePoint Support

## Architecture Overview

This classic version reuses the exact same service logic as the modern SPFx version:
- **Same CSS** (MegaMenu.css from SPFx build)
- **Same Services** (TaxonomyNavigationService, MegaMenuRenderer extracted to standalone)
- **Same Configuration** (Reads UserCustomAction properties like SPFx version)
- **Same Menu Structure** (Identical 3-level navigation rendering)

## Required Files

### Core Files (Required)
1. **MegaMenu.css** - Main stylesheet (shared with SPFx version)
2. **megamenu-services-standalone.js** - Extracted services without SPFx dependencies
3. **megamenu-classic.js** - Classic SharePoint integration wrapper

### Dependencies (SharePoint Built-in)
- SP.js (SharePoint JSOM)
- SP.Taxonomy.js (Taxonomy/Metadata services)
- jQuery (usually available in SharePoint)

## Deployment Methods

### Method 1: Site Assets (Recommended)
````html
<!-- Add to master page before closing </head> tag -->
<link rel="stylesheet" href="/SiteAssets/megamenu/MegaMenu.css" />
<script src="/SiteAssets/megamenu/megamenu-services-standalone.js"></script>
<script src="/SiteAssets/megamenu/megamenu-classic.js"></script>
````

### Method 2: Style Library  
````html
<link rel="stylesheet" href="/Style Library/megamenu/MegaMenu.css" />
<script src="/Style Library/megamenu/megamenu-services-standalone.js"></script>
<script src="/Style Library/megamenu/megamenu-classic.js"></script>
````

### Method 3: CDN or Document Library
Upload to any accessible location and reference accordingly.

## Configuration

### Automatic Configuration Reading
The classic version automatically reads the same UserCustomAction configuration as the SPFx version:
- Term Set Name (default: "Navigation")  
- External CSS URL (optional)

### Setting Configuration
Use one of these methods:

**Option A: Via Modern SPFx Version**
1. Install modern SPFx version on any modern SharePoint site
2. Use the settings panel to configure termset and CSS URL
3. Configuration is stored site-wide and will be read by classic version

**Option B: Via PowerShell (Advanced)**
````powershell
# Connect to SharePoint site
Add-PnPCustomAction -Name "MegaMenuConfig" -Location "ClientSideExtension.ApplicationCustomizer" `
  -ClientSideComponentId "abc3361f-bb2d-491f-aba3-cd51c19a299b" `
  -ClientSideComponentProperties '{"termSetName":"Your Navigation Termset","cssUrl":"/SiteAssets/custom-menu.css"}'
````

## Testing & Validation

### 1. Verify Dependencies
Open browser console and check:
````javascript
// These should all return objects/functions:
typeof SP
typeof SP.Taxonomy  
typeof window.MegaMenuServices
typeof window.MegaMenuClassic
````

### 2. Enable Debug Mode
````javascript
window.MegaMenuConfig = { debug: true };
````
Then reload page to see console logging.

### 3. Manual Initialization
If auto-loading fails:
````javascript
window.MegaMenuClassic.reload();
````

## Troubleshooting

### Common Issues
1. **"SP is undefined"** - SP.js not loaded yet, classic wrapper will retry
2. **"MegaMenuServices not found"** - Include megamenu-services-standalone.js first
3. **"No menu items found"** - Check term set name and user permissions
4. **Menu renders but no styling** - Verify CSS path and inclusion

### Debug Steps
1. Check browser network tab for 404s on CSS/JS files
2. Verify SharePoint libraries load: SP.js, SP.Taxonomy.js
3. Check term store permissions and term set existence  
4. Enable debug mode for detailed console logging

### Permissions Required
- Read access to term store
- Read access to site UserCustomActions (for configuration)
- Basic site user permissions

## Differences from SPFx Version

| Feature | SPFx Version | Classic Version |
|---------|-------------|----------------|
| Deployment | App Catalog | Master Page/Web Part |
| Configuration | Settings Panel | PowerShell or via SPFx |
| Auto-loading | Yes | Manual inclusion |
| Modern Sites | Yes | No |
| Classic Sites | No | Yes |
| SharePoint Online | Yes | Yes |
| SharePoint On-Premises | 2019+ | 2013+ |

## File Structure After Deployment
````
/SiteAssets/megamenu/
├── MegaMenu.css                     (from SPFx build)
├── megamenu-services-standalone.js  (extracted services)
└── megamenu-classic.js              (classic wrapper)
````

"@

Set-Content -Path ".\classic\deployment-guide.md" -Value $deploymentContent -Encoding UTF8

# Step 6: Create a simple deployment script template
$deployScript = @"
# PowerShell script to deploy MegaMenu Classic to SharePoint
# Requires PnP PowerShell module: Install-Module PnP.PowerShell

param(
    [Parameter(Mandatory=`$true)]
    [string]`$SiteUrl,
    
    [string]`$LibraryName = "Site Assets",
    [string]`$FolderName = "megamenu"
)

Write-Host "Deploying MegaMenu Classic to `$SiteUrl" -ForegroundColor Green

# Connect to SharePoint
Connect-PnPOnline -Url `$SiteUrl -Interactive

# Create folder if it doesn't exist
try {
    Get-PnPFolder -Url "`$LibraryName/`$FolderName" -ErrorAction Stop
    Write-Host "✓ Folder exists: `$LibraryName/`$FolderName" -ForegroundColor Green
} catch {
    Add-PnPFolder -Name `$FolderName -Folder `$LibraryName
    Write-Host "✓ Created folder: `$LibraryName/`$FolderName" -ForegroundColor Green
}

# Upload files
`$files = @(
    @{Source=".\MegaMenu.css"; Target="`$LibraryName/`$FolderName/MegaMenu.css"},
    @{Source=".\megamenu-services-standalone.js"; Target="`$LibraryName/`$FolderName/megamenu-services-standalone.js"},
    @{Source=".\megamenu-classic.js"; Target="`$LibraryName/`$FolderName/megamenu-classic.js"}
)

foreach (`$file in `$files) {
    if (Test-Path `$file.Source) {
        Add-PnPFile -Path `$file.Source -Folder "`$LibraryName/`$FolderName"
        Write-Host "✓ Uploaded: `$(`$file.Source)" -ForegroundColor Green
    } else {
        Write-Host "✗ File not found: `$(`$file.Source)" -ForegroundColor Red
    }
}

Write-Host "`nDeployment completed!" -ForegroundColor Green
Write-Host "Add these lines to your master page:" -ForegroundColor Yellow
Write-Host "<link rel=`"stylesheet`" href=`"/`$LibraryName/`$FolderName/MegaMenu.css`" />" -ForegroundColor Gray
Write-Host "<script src=`"/`$LibraryName/`$FolderName/megamenu-services-standalone.js`"></script>" -ForegroundColor Gray
Write-Host "<script src=`"/`$LibraryName/`$FolderName/megamenu-classic.js`"></script>" -ForegroundColor Gray
"@

Set-Content -Path ".\classic\deploy-to-sharepoint.ps1" -Value $deployScript -Encoding UTF8

# Step 7: Summary
Write-Host "`n" + "="*60 -ForegroundColor Cyan
Write-Host "MegaMenu Classic Build Completed!" -ForegroundColor Green
Write-Host "="*60 -ForegroundColor Cyan

Write-Host "`nDistribution files created:" -ForegroundColor Yellow
$files = @(
    @{Name="MegaMenu.css"; Desc="Shared stylesheet from SPFx"},
    @{Name="megamenu-services-standalone.js"; Desc="Extracted services (no SPFx deps)"},
    @{Name="megamenu-classic.js"; Desc="Classic SharePoint wrapper"},
    @{Name="deployment-guide.md"; Desc="Complete deployment documentation"},
    @{Name="deploy-to-sharepoint.ps1"; Desc="PowerShell deployment script"}
)

foreach ($file in $files) {
    $exists = Test-Path ".\classic\$($file.Name)"
    $status = if ($exists) { "✓" } else { "✗" }
    $color = if ($exists) { "Green" } else { "Red" }
    Write-Host "  $status $($file.Name)" -ForegroundColor $color -NoNewline
    Write-Host " - $($file.Desc)" -ForegroundColor Gray
}

Write-Host "`nNext steps:" -ForegroundColor Yellow
Write-Host "1. Review deployment-guide.md for instructions" -ForegroundColor White
Write-Host "2. Use deploy-to-sharepoint.ps1 for automated deployment" -ForegroundColor White  
Write-Host "3. Configure termset via modern SPFx version or PowerShell" -ForegroundColor White
Write-Host "4. Test on classic SharePoint pages" -ForegroundColor White

Write-Host "`nArchitectural Achievement:" -ForegroundColor Cyan
Write-Host "✓ Same CSS as SPFx version" -ForegroundColor Green
Write-Host "✓ Same service logic (extracted to standalone)" -ForegroundColor Green
Write-Host "✓ Same configuration system" -ForegroundColor Green
Write-Host "✓ Same menu rendering output" -ForegroundColor Green
Write-Host "✓ No SPFx dependencies in classic version" -ForegroundColor Green