[
    {
        "id": 2338,
        "title": "コピー付きスニペット",
        "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" \/><\/svg>",
        "keywords": [
            "コピー",
            "スニペット"
        ],
        "slug": "lazyblock\/copy-snippet",
        "description": "",
        "category": "lazyblocks",
        "category_label": "lazyblocks",
        "supports": {
            "customClassName": true,
            "anchor": false,
            "html": false,
            "multiple": true,
            "inserter": true,
            "reusable": true,
            "color": false,
            "layout": false,
            "shadow": false,
            "spacing": false,
            "dimensions": false,
            "typography": false,
            "lock": true,
            "align": [
                "wide",
                "full"
            ],
            "ghostkit": {
                "effects": false,
                "position": false,
                "spacings": false,
                "frame": false,
                "transform": false,
                "customCSS": false,
                "display": false,
                "attributes": false
            }
        },
        "controls": {
            "control_a86b3d464a": {
                "type": "textarea",
                "name": "copy_text",
                "default": "コードやショートコードを入力します。",
                "label": "コピーするテキスト",
                "help": "",
                "child_of": "",
                "placement": "inspector",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_6699844dad": {
                "type": "text",
                "name": "success_message",
                "default": "コピー完了！",
                "label": "完了メッセージ",
                "help": "コピー直後にポップアップする文字です。",
                "child_of": "",
                "placement": "inspector",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "placeholder": "",
                "characters_limit": ""
            },
            "control_3e0ab64d61": {
                "type": "select",
                "name": "alignment",
                "default": "left",
                "label": "配置",
                "help": "",
                "child_of": "",
                "placement": "inspector",
                "group": "settings",
                "width": "100",
                "hide_if_not_selected": "false",
                "required": "false",
                "translate": "false",
                "save_in_meta": "false",
                "save_in_meta_name": "",
                "choices": [
                    {
                        "label": "左揃え",
                        "value": "left"
                    },
                    {
                        "label": "中央揃え",
                        "value": "center"
                    },
                    {
                        "label": "右揃え",
                        "value": "right"
                    }
                ],
                "allow_null": "false",
                "multiple": "false",
                "output_format": "",
                "placeholder": "",
                "characters_limit": ""
            }
        },
        "code": {
            "output_method": "php",
            "editor_html": "<div class=\"lzb-copy-box\">\r\n    <pre class=\"lzb-copy-pre\"><code>{{{copy_text}}}<\/code><\/pre>\r\n    <button class=\"lzb-copy-button\" onclick=\"lzbCopyText(this, '{{success_message}}')\">\r\n        <svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect>\r\n            <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path>\r\n        <\/svg>\r\n        <span class=\"lzb-btn-text\">{{button_label}}<\/span>\r\n        <span class=\"lzb-tooltip\"><\/span>\r\n    <\/button>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ページ内に複数ブロックが配置されても重複定義されないようにガードします\r\nif (typeof window.lzbCopyText !== 'function') {\r\n    window.lzbCopyText = function(btn, successMsg) {\r\n        const container = btn.closest('.lzb-copy-box');\r\n        const codeBlock = container.querySelector('code');\r\n        const textToCopy = codeBlock.innerText;\r\n        const tooltip = btn.querySelector('.lzb-tooltip');\r\n\r\n        navigator.clipboard.writeText(textToCopy).then(function() {\r\n            \/\/ ツールチップに文字をセットし、アニメーション用クラスを付与\r\n            tooltip.innerText = successMsg;\r\n            btn.classList.add('is-copied');\r\n            \r\n            \/\/ 2秒後に通知を消す\r\n            setTimeout(function() {\r\n                btn.classList.remove('is-copied');\r\n            }, 2000);\r\n        }).catch(function(err) {\r\n            console.error('コピーに失敗しました', err);\r\n            alert('お使いのブラウザではコピー機能がサポートされていません。');\r\n        });\r\n    };\r\n}\r\n<\/script>",
            "editor_callback": "",
            "frontend_html": "<?php\r\n\/\/ 設定値を取得\r\n$copy_text       = isset( $attributes['copy_text'] ) ? $attributes['copy_text'] : '';\r\n$success_message = isset( $attributes['success_message'] ) ? $attributes['success_message'] : 'コピー完了！';\r\n\/\/ 配置設定を取得（未設定時は左揃え）\r\n$alignment       = isset( $attributes['alignment'] ) ? $attributes['alignment'] : 'left';\r\n?>\r\n\r\n<div class=\"lzb-copy-wrapper lzb-align-<?php echo esc_attr( $alignment ); ?>\">\r\n\r\n    <div class=\"lzb-inline-copy-box\">\r\n        <code class=\"lzb-inline-code\"><?php echo esc_html( $copy_text ); ?><\/code>\r\n        \r\n        <button class=\"lzb-inline-copy-button\" type=\"button\" aria-label=\"コピーする\">\r\n            <span class=\"lzb-icon-wrapper\">\r\n                <span class=\"lzb-icon-clipboard\">\r\n                    <svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" height=\"14px\" width=\"14px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect>\r\n                        <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path>\r\n                    <\/svg>\r\n                <\/span>\r\n                <span class=\"lzb-icon-check\">\r\n                    <svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" height=\"16px\" width=\"16px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polyline points=\"20 6 9 17 4 12\"><\/polyline>\r\n                    <\/svg>\r\n                <\/span>\r\n            <\/span>\r\n            <span class=\"lzb-btn-text\"><?php echo esc_html( $success_message ); ?><\/span>\r\n        <\/button>\r\n    <\/div>\r\n    \r\n<\/div>",
            "frontend_callback": "",
            "show_preview": "always",
            "single_output": true
        },
        "style": {
            "block": "\/* 外側の親要素（配置とブロック上下の余白） *\/\r\n.lzb-copy-wrapper {\r\n    width: 100%;\r\n    margin: 12px 0;\r\n}\r\n\r\n\/* プルダウンの選択に応じた配置設定 *\/\r\n.lzb-copy-wrapper.lzb-align-left { text-align: left; }\r\n.lzb-copy-wrapper.lzb-align-center { text-align: center; }\r\n.lzb-copy-wrapper.lzb-align-right { text-align: right; }\r\n\r\n\/* 全体のコンテナ（文字数に合わせて幅が伸縮） *\/\r\n.lzb-inline-copy-box {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    background-color: #f8f9fa;\r\n    border: 1px solid #dcdfe6;\r\n    border-radius: 4px;\r\n    padding: 4px 4px 4px 12px;\r\n    position: relative;\r\n    max-width: 350px; \/* 初期状態の最大幅 *\/\r\n    box-sizing: border-box;\r\n    overflow: hidden; \r\n    cursor: pointer; \r\n    text-align: left; \/* 中身の文字は常に左揃え *\/\r\n    \/* 全文展開のスムーズなアニメーション *\/\r\n    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;\r\n}\r\n\r\n\/* ホバー時の全文展開 *\/\r\n.lzb-inline-copy-box:hover {\r\n    max-width: 100%;\r\n    background-color: #f1f3f5;\r\n}\r\n\r\n\/* コード表示部分（長い場合は末尾を「...」にする） *\/\r\n.lzb-inline-code {\r\n    font-family: inherit;\r\n    color: #333333;\r\n    font-size: 15px;\r\n    background: transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    margin-right: 8px;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    min-width: 0;\r\n    flex: 1 1 auto;\r\n}\r\n\r\n\/* コピーボタン（ベース） *\/\r\n.lzb-inline-copy-button {\r\n    flex-shrink: 0;\r\n    background: transparent;\r\n    border: none;\r\n    padding: 6px 8px;\r\n    margin: 0;\r\n    cursor: pointer;\r\n    color: #8c939d;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 4px;\r\n    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    outline: none;\r\n}\r\n\r\n.lzb-inline-copy-button:hover {\r\n    background-color: #e2e8f0;\r\n    color: #1f2937;\r\n}\r\n\r\n\/* アイコンの重ね合わせ基準点 *\/\r\n.lzb-icon-wrapper {\r\n    position: relative;\r\n    width: 14px;\r\n    height: 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.lzb-icon-clipboard,\r\n.lzb-icon-check {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n}\r\n\r\n\/* アイコン初期状態 *\/\r\n.lzb-icon-check {\r\n    opacity: 0;\r\n    transform: scale(0) rotate(-90deg);\r\n}\r\n.lzb-icon-clipboard {\r\n    opacity: 1;\r\n    transform: scale(1) rotate(0deg);\r\n}\r\n\r\n\/* 完了メッセージの初期状態（幅を0にして隠す） *\/\r\n.lzb-btn-text {\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    white-space: nowrap;\r\n    max-width: 0; \r\n    opacity: 0;   \r\n    overflow: hidden;\r\n    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n}\r\n\r\n\/* コピー完了時（JavaScriptで .is-copied が付与されたとき） *\/\r\n.lzb-inline-copy-button.is-copied {\r\n    background-color: #e6f4ea; \/* ボタン背景を薄い緑に *\/\r\n    color: #2da44e; \/* アイコンと文字を緑に *\/\r\n}\r\n\r\n\/* コピー完了時のアイコン回転アニメーション *\/\r\n.lzb-inline-copy-button.is-copied .lzb-icon-clipboard {\r\n    opacity: 0;\r\n    transform: scale(0) rotate(90deg);\r\n}\r\n.lzb-inline-copy-button.is-copied .lzb-icon-check {\r\n    opacity: 1;\r\n    transform: scale(1) rotate(0deg);\r\n}\r\n\r\n\/* コピー完了時の文字スライドイン *\/\r\n.lzb-inline-copy-button.is-copied .lzb-btn-text {\r\n    max-width: 100px; \r\n    opacity: 1;\r\n    margin-left: 6px; \r\n}",
            "editor": "\/* エディタ内でのみ適用されるスタイル *\/\r\n.lzb-inline-copy-button {\r\n    \/* 管理画面でのボタンの誤動作防止 *\/\r\n    pointer-events: none;\r\n}\r\n\r\n\/* エディタ内ではホバー展開を無効化（編集作業をスムーズにするため） *\/\r\n.lzb-inline-copy-box:hover {\r\n    max-width: 350px;\r\n}"
        },
        "script": {
            "view": "document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ ページ内のすべてのコピーボタンを取得（複数配置に対応）\r\n    const copyButtons = document.querySelectorAll('.lzb-inline-copy-button');\r\n\r\n    copyButtons.forEach(function(btn) {\r\n        btn.addEventListener('click', function() {\r\n            const container = btn.closest('.lzb-inline-copy-box');\r\n            const codeBlock = container.querySelector('.lzb-inline-code');\r\n            \r\n            \/\/ CSSで「...」と省略されていても、確実に全文をコピーできる処理\r\n            const textToCopy = codeBlock.textContent;\r\n\r\n            navigator.clipboard.writeText(textToCopy).then(function() {\r\n                \/\/ クラスを付与（CSS側のアニメーションが発火します）\r\n                btn.classList.add('is-copied');\r\n                \r\n                \/\/ 2秒後に元の状態（アイコンのみ）に戻す\r\n                setTimeout(function() {\r\n                    btn.classList.remove('is-copied');\r\n                }, 2000);\r\n            }).catch(function(err) {\r\n                console.error('コピーに失敗しました', err);\r\n            });\r\n        });\r\n    });\r\n});"
        },
        "styles": [],
        "condition": [],
        "provide_context_to_blocks": "",
        "custom_context_slug": "",
        "allowed_blocks": "",
        "ancestor": ""
    }
]