editor.js

Text file: editor.js
Latest content with line numbers:
	// 編集モードの状態管理
	let isEditMode = false;
	let contentData = {};
	
	// ページ読み込み時にローカルストレージからデータを復元
	window.addEventListener('DOMContentLoaded', () => {
	    loadContent();
	});
	
	// 編集モード切替
	document.getElementById('editToggle').addEventListener('click', function() {
	    const correctPassword = '1004'; // 編集モード用のパスワード
	    const correctUsername = 'YOUTA1004'; // 編集モード用のユーザー名
	
	    if (!isEditMode) { // 編集モードに入る時のみパスワードを要求
	        const enteredUsername = prompt('ユーザー名を入力してください:');
	        const enteredPassword = prompt('パスワードを入力してください:');
	
	        if (enteredUsername !== correctUsername || enteredPassword !== correctPassword) {
	            alert('ユーザー名またはパスワードが間違っています。');
	            return; // 編集モードに入らない
	        }
	    }
	
	    isEditMode = !isEditMode;
	    const editables = document.querySelectorAll('.editable');
	    const saveBtn = document.getElementById('saveBtn');
	    const imageEdit = document.querySelector('.image-edit');
	    
	    if (isEditMode) {
	        // 編集モードON
	        this.textContent = '👁️ プレビュー';
	        this.classList.add('active');
	        saveBtn.style.display = 'block';
	        if (imageEdit) imageEdit.style.display = 'block';
	            document.getElementById('imageUrl').style.display = 'block';
	            document.getElementById('updateImageBtn').style.display = 'block';
	
	        
	        editables.forEach(el => {
	            el.setAttribute('contenteditable', 'true');
	        });
	    } else {
	        // 編集モードOFF
	        this.textContent = '✏️ 編集モード';
	        this.classList.remove('active');
	        saveBtn.style.display = 'none';
	        if (imageEdit) imageEdit.style.display = 'none';
	            document.getElementById('imageUrl').style.display = 'none';
	            document.getElementById('updateImageBtn').style.display = 'none';
	
	        
	        editables.forEach(el => {
	            el.setAttribute('contenteditable', 'false');
	        });
	    }
	});
	
	// 保存ボタン
	document.getElementById('saveBtn').addEventListener('click', function() {
	    saveContent();
	    showMessage('保存しました！ブラウザのローカルストレージに保存されています。', 'success');
	});
	
	// コンテンツを保存
	function saveContent() {
	    const editables = document.querySelectorAll('.editable');
	    editables.forEach(el => {
	        const key = el.getAttribute('data-key');
	        if (key) {
	            contentData[key] = el.textContent || el.innerText;
	        }
	    });
	    
	    // プロフィール画像のURLも保存
	    const profileImg = document.getElementById('profileImg');
	    if (profileImg) {
	        contentData['profileImage'] = profileImg.src;
	    }
	    
	    // ローカルストレージに保存
	    localStorage.setItem('portfolioContent', JSON.stringify(contentData));
	}
	
	// コンテンツを読み込み
	function loadContent() {
	    const saved = localStorage.getItem('portfolioContent');
	    if (saved) {
	        contentData = JSON.parse(saved);0	        
	        // 保存されたコンテンツを復元
	        Object.keys(contentData).forEach(key => {
	            if (key === 'profileImage') {
	                const profileImg = document.getElementById('profileImg');
	                if (profileImg && contentData[key]) {
	                    profileImg.src = contentData[key];
	                }
	            } else {
	                const el = document.querySelector(`[data-key="${key}"]`);
	                if (el) {
	                    el.textContent = contentData[key];
	                }
	            }
	        });
	    }
	}
	
	// プロフィール画像を更新
	function updateImage() {
	    const imageUrl = document.getElementById('imageUrl').value;
	    const profileImg = document.getElementById('profileImg');
	    
	    if (imageUrl && profileImg) {
	        profileImg.src = imageUrl;
	        showMessage('画像を更新しました！「保存」ボタンを押して保存してください。', 'success');
	    } else {
	        showMessage('画像URLを入力してください。', 'error');
	    }
	}
	
	// メッセージを表示
	function showMessage(text, type) {
	    const messageEl = document.getElementById('saveMessage');
	    messageEl.textContent = text;
	    messageEl.className = `save-message ${type} show`;
	    
	    setTimeout(() => {
	        messageEl.classList.remove('show');
	    }, 3000);
	}
	
	// データをリセット（デバッグ用）
	function resetContent() {
	    if (confirm('すべての変更をリセットしますか？')) {
	        localStorage.removeItem('portfolioContent');
	        location.reload();	    }	}