[
  {
    "id": 2338,
    "title": "コピー付きスニペット_P-10",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M216,40V168H168V88H88V40Z\" fill=\"#9aa8c9\"/><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "コピー",
      "スニペット",
      "ツール・計算",
      "コピー付きスニペット"
    ],
    "slug": "lazyblock/copy-snippet",
    "description": "",
    "category": "Lazyblocks Pro",
    "category_label": "Lazyblocks Pro",
    "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": "",
        "placeholder": "",
        "characters_limit": "",
        "choices": [
          {
            "label": "左揃え",
            "value": "left"
          },
          {
            "label": "中央揃え",
            "value": "center"
          },
          {
            "label": "右揃え",
            "value": "right"
          }
        ]
      }
    },
    "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: min(350px, 100%); /* 初期状態の最大幅 */\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            const textToCopy = codeBlock.textContent;\r\n            if (!navigator.clipboard || !navigator.clipboard.writeText) {\r\n                console.error('このブラウザはクリップボードコピーに対応していません');\r\n                return;\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": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]