{
    "bowl": {
        "main": {
            "modId": "_sys/root",
            "fields": {
                "main": [
                    {
                        "modId": "px2style:lists/index",
                        "fields": [],
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "2"
                            },
                            "main": {
                                "src": "サンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "Minimum modal sample"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "Minimum modal sample"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "px2style.modal({\n\t\"body\": \"<p>モーダルコンテンツ</p><p>モーダルコンテンツ</p><p>モーダルコンテンツ</p>\",\n});\n",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "```js\npx2style.modal({\n\t\"body\": \"<p>モーダルコンテンツ</p><p>モーダルコンテンツ</p><p>モーダルコンテンツ</p>\",\n});\n```\n",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "Full optioned modal sample"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "Full optioned modal sample"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "px2style.modal({\n\t\"title\": \"Maximum Options Modal Sample\",\n\t\"type\": \"modal\",\n\t\"body\": document.getElementById('cont-modal-maximum-options').innerHTML,\n\t\"width\": 800,\n\t\"height\": 600,\n\t\"contentFill\": true,\n\t\"buttons\": [\n\t\t$('<button class=\"px2-btn px2-btn--primary\">').text('OK button'),\n\t],\n\t\"buttonsSecondary\": [\n\t\t$('<button class=\"px2-btn px2-btn--secondary\">').text('Cancel button'),\n\t],\n\t\"target\": \"body\",\n\t\"form\": {\n\t\t\"action\": \"javascript:void(0);\",\n\t\t\"method\": \"get\",\n\t\t\"submit\": function(){\n\t\t\tconsole.info('Form has submitted.');\n\t\t},\n\t},\n\t\"onclose\": function(){\n\t\tconsole.info('Modal has closed.');\n\t},\n\t\"onbgclick\": function(){\n\t\tconsole.info('Modal background has clicked.');\n\t},\n}, function( modalObj ){\n\tconsole.info('Modal has opened.', modalObj);\n});\n",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "<script type=\"template\" id=\"cont-modal-maximum-options\">\n<p>モーダルコンテンツ</p>\n<p>モーダルコンテンツ</p>\n<p>モーダルコンテンツ</p>\n</script>\n",
                                "editor": ""
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "```js\nvar modalObj = px2style.modal({\n\t\"title\": \"Maximum Options Modal Sample\",\n\t\"type\": \"modal\",\n\t\"body\": document.getElementById('cont-modal-maximum-options').innerHTML,\n\t\"width\": 800,\n\t\"height\": 600,\n\t\"contentFill\": true,\n\t\"buttons\": [\n\t\t$('<button class=\"px2-btn px2-btn--primary\">').text('OK button'),\n\t],\n\t\"buttonsSecondary\": [\n\t\t$('<button class=\"px2-btn px2-btn--secondary\">').text('Cancel button'),\n\t],\n\t\"target\": \"body\",\n\t\"form\": {\n\t\t\"action\": \"javascript:void(0);\",\n\t\t\"method\": \"get\",\n\t\t\"submit\": function(){\n\t\t\tconsole.info('Form has submitted.');\n\t\t},\n\t},\n\t\"onclose\": function(){\n\t\tconsole.info('Modal has closed.');\n\t},\n\t\"onbgclick\": function(){\n\t\tconsole.info('Modal background has clicked.');\n\t},\n}, function( modalObj ){\n\tconsole.info('Modal has opened.', modalObj);\n});\n```\n",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "モーダルコンテンツにインタラクティブな表現を含めるサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "Ineractive contents sample"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "px2style.modal({\n\t\"title\": \"Minimum Modal Sample\",\n\t\"body\": document.getElementById('cont-modal-contents-interactive').innerHTML,\n});\n",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "<script type=\"template\" id=\"cont-modal-contents-interactive\">\n<p>これは、モーダルダイアログに表示するコンテンツです。</p>\n<p>これは、モーダルダイアログに表示するコンテンツです。</p>\n<div class=\"px2-carousel\">\n\t<div class=\"px2-carousel__contents\">\n\n\t\t<div class=\"px2-carousel__item\"><img src=\"./index_files/photo004_thumb.jpg\" alt=\"\" /></div>\n\n\t\t<div class=\"px2-carousel__item\"><img src=\"./index_files/photo005_thumb.jpg\" alt=\"\" /></div>\n\n\t</div>\n</div>\n<div class=\"px2-accordion\">\n\n\t<div class=\"px2-accordion__unit\">\n\t\t<div class=\"px2-accordion__label\"><a href=\"javascript:;\">アコーディオン1</a></div>\n\t\t<div class=\"px2-accordion__content\"><div class=\"px2-p\">\n<p>アコーディオン1の内容です。</p>\n\n</div>\n<div class=\"px2-accordion\">\n\n\t<div class=\"px2-accordion__unit\">\n\t\t<div class=\"px2-accordion__label\"><a href=\"javascript:;\">アコーディオン1-1</a></div>\n\t\t<div class=\"px2-accordion__content\"><div class=\"px2-p\">\n<p>アコーディオン1-1の内容です。</p>\n\n</div>\n</div>\n\t</div>\n\n\t<div class=\"px2-accordion__unit\">\n\t\t<div class=\"px2-accordion__label\"><a href=\"javascript:;\">アコーディオン1-2</a></div>\n\t\t<div class=\"px2-accordion__content\"><div class=\"px2-p\">\n<p>アコーディオン1-2の内容です。</p>\n\n</div>\n</div>\n\t</div>\n\n</div>\n</div>\n\t</div>\n\n\t<div class=\"px2-accordion__unit\">\n\t\t<div class=\"px2-accordion__label\"><a href=\"javascript:;\">アコーディオン2</a></div>\n\t\t<div class=\"px2-accordion__content\"><div class=\"px2-p\">\n<p>アコーディオン2の内容です。</p>\n\n</div>\n<div class=\"px2-accordion\">\n\n\t<div class=\"px2-accordion__unit\">\n\t\t<div class=\"px2-accordion__label\"><a href=\"javascript:;\">アコーディオン2-1</a></div>\n\t\t<div class=\"px2-accordion__content\"><div class=\"px2-p\">\n<p>アコーディオン2-1の内容です。</p>\n\n</div>\n</div>\n\t</div>\n\n\t<div class=\"px2-accordion__unit\">\n\t\t<div class=\"px2-accordion__label\"><a href=\"javascript:;\">アコーディオン2-2</a></div>\n\t\t<div class=\"px2-accordion__content\"><div class=\"px2-p\">\n<p>アコーディオン2-2の内容です。</p>\n\n</div>\n</div>\n\t</div>\n\n</div>\n</div>\n\t</div>\n\n</div>\n<div class=\"px2-tabs\">\n\t<div class=\"px2-tabs__tabs\"><ul><li><a href=\"javascript:;\">タブ 1</a></li><li><a href=\"javascript:;\">タブ 2</a></li></ul></div>\n\t<div class=\"px2-tabs__contents\">\n\n\t\t<div class=\"px2-tabs__content\"><div class=\"px2-p\">\n<p>タブ1の内容です。</p>\n\n</div>\n</div>\n\n\t\t<div class=\"px2-tabs__content\"><div class=\"px2-p\">\n<p>これは、タブ2の内容です。</p>\n\n</div>\n<div class=\"px2-tabs\">\n\t<div class=\"px2-tabs__tabs\"><ul><li><a href=\"javascript:;\">タブ 1</a></li><li><a href=\"javascript:;\">タブ 2</a></li></ul></div>\n\t<div class=\"px2-tabs__contents\">\n\n\t\t<div class=\"px2-tabs__content\"><div class=\"px2-p\">\n<p>タブ1の内容です。</p>\n\n</div>\n</div>\n\n\t\t<div class=\"px2-tabs__content\"><div class=\"px2-p\">\n<p>これは、タブ2の内容です。</p>\n\n</div>\n</div>\n\n\t</div>\n</div>\n</div>\n\n\t</div>\n</div>\n\n</script>\n",
                                "editor": ""
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "ノーマルなモーダルのサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "Open normal modal dialog."
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "px2style.modal(\n\t{\n\t\ttitle: 'Sample Modal Dialog.',\n\t\ttarget: '.contents',\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [\n\t\t\t'<button class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK</button>'\n\t\t],\n\t\tonbgclick: function(){\n\t\t\talert('bgclicked');\n\t\t\tpx2style.closeModal();\n\t\t},\n\t\tonclose: function(){\n\t\t\talert('onclose event');\n\t\t},\n\t},\n\tfunction(){\n\t\tconsole.log('done.');\n\t}\n);\n",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "タイトルなし、ボタンなしのサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "No title, No button"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "px2style.modal(\n\t{\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [],\n\t}\n);\n",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "```js\npx2style.modal(\n\t{\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [],\n\t}\n);\n```\n",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "ボタンがたくさんあるサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "Open modal dialog which has many buttons."
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "px2style.modal(\n\t{\n\t\ttitle: 'Sample Modal Dialog.',\n\t\ttarget: '.contents',\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 1</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 2</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 3</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 4</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 5</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 6</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK 7</button>',\n\t\t],\n\t\tbuttonsSecondary: [\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 1</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 2</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 3</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 4</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 5</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 6</button>',\n\t\t\t'<button type=\"button\" class=\"px2-btn px2-btn--secondary\" onclick=\"px2style.closeModal();\">Cancel 7</button>',\n\t\t],\n\t},\n\tfunction(){\n\t\tconsole.log('done.');\n\t}\n);\n",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "ドロワーのサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:grids/grid",
                        "fields": {
                            "col": [
                                {
                                    "modId": "px2style:grids/grid",
                                    "fields": {
                                        "column-width": "1of2",
                                        "main": [
                                            {
                                                "modId": "px2style:basics/button",
                                                "fields": {
                                                    "label": {
                                                        "src": "Open Drawer (left)"
                                                    },
                                                    "intention": {
                                                        "src": ""
                                                    },
                                                    "sizing": {
                                                        "src": ""
                                                    },
                                                    "display": {
                                                        "src": "px2-btn--block"
                                                    },
                                                    "btntype": {
                                                        "src": "button"
                                                    },
                                                    "onclick": {
                                                        "src": "px2style.modal(\n\t{\n\t\ttitle: 'Sample Drawer.',\n\t\ttype: 'drawer-left',\n\t\ttarget: '.contents',\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [\n\t\t\t'<button class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK</button>'\n\t\t],\n\t\tonbgclick: function(){\n\t\t\tpx2style.closeModal();\n\t\t}\n\t},\n\tfunction(){\n\t\tconsole.log('done.');\n\t}\n);\n",
                                                        "lang": "javascript"
                                                    },
                                                    "align": {
                                                        "src": ""
                                                    },
                                                    "paragraph": {
                                                        "src": "px2-p"
                                                    }
                                                },
                                                "anchor": "",
                                                "dec": ""
                                            }
                                        ]
                                    },
                                    "subModName": "col",
                                    "anchor": "",
                                    "dec": ""
                                },
                                {
                                    "modId": "px2style:grids/grid",
                                    "fields": {
                                        "column-width": "1of2",
                                        "main": [
                                            {
                                                "modId": "px2style:basics/button",
                                                "fields": {
                                                    "label": {
                                                        "src": "Open Drawer (right)"
                                                    },
                                                    "intention": {
                                                        "src": ""
                                                    },
                                                    "sizing": {
                                                        "src": ""
                                                    },
                                                    "display": {
                                                        "src": "px2-btn--block"
                                                    },
                                                    "btntype": {
                                                        "src": "button"
                                                    },
                                                    "onclick": {
                                                        "src": "px2style.modal(\n\t{\n\t\ttitle: 'Sample Drawer.',\n\t\ttype: 'drawer-right',\n\t\ttarget: '.contents',\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [\n\t\t\t'<button class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK</button>'\n\t\t],\n\t\tonbgclick: function(){\n\t\t\tpx2style.closeModal();\n\t\t}\n\t},\n\tfunction(){\n\t\tconsole.log('done.');\n\t}\n);\n",
                                                        "lang": "javascript"
                                                    },
                                                    "align": {
                                                        "src": ""
                                                    },
                                                    "paragraph": {
                                                        "src": "px2-p"
                                                    }
                                                },
                                                "anchor": "",
                                                "dec": ""
                                            }
                                        ]
                                    },
                                    "subModName": "col",
                                    "anchor": "",
                                    "dec": ""
                                }
                            ]
                        }
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "```js\npx2style.modal(\n\t{\n\t\ttitle: 'Sample Drawer.',\n\t\ttype: 'drawer-left',\n\t\ttarget: '.contents',\n\t\tbody: '<div><p>Sample Content.</p><p>Sample Content.</p></div>',\n\t\tbuttons: [\n\t\t\t'<button class=\"px2-btn px2-btn--primary\" onclick=\"px2style.closeModal();\">OK</button>'\n\t\t],\n\t\tonbgclick: function(){\n\t\t\tpx2style.closeModal();\n\t\t}\n\t}\n);\n```\n",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "多重に開くサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "多重に開くモーダルダイアログ"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "contOpenNestableDialog();",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "<script type=\"text/javascript\">\nfunction contOpenNestableDialog(onclose){\n\tonclose = onclose || function(){};\n\tvar $body = $('<div>').html(\n\t\t'<p>Sample Content. <button type=\"button\" class=\"px2-btn cont-btn-open-new-layer\">open new layer</button></p>'\n\t\t+'<p>Modal Counter: <span class=\"cont-opened-modal-counter\"></span></p>'\n\t\t+'<p>SubModal Returned Value: <span class=\"cont-opened-modal-returned-value\"></span></p>'\n\t\t+'<p><button type=\"button\" class=\"px2-btn cont-btn-lock-modal-2sec\">Lock modal 3 seconds.</button></p>'\n\t);\n\tvar modal = px2style.modal(\n\t\t{\n\t\t\ttitle: 'Nestable Dialog Sample.',\n\t\t\tbody: $body,\n\t\t\tbuttons: [\n\t\t\t\t$('<button type=\"submit\" class=\"px2-btn px2-btn--primary\">OK</button>')\n\t\t\t\t\t.on('click', function(){\n\t\t\t\t\t\tpx2style.closeModal('OK was clicked.');\n\t\t\t\t\t})\n\t\t\t],\n\t\t\tbuttonsSecondary: [\n\t\t\t\t$('<button type=\"submit\">button</button>')\n\t\t\t\t\t.on('click', function(){\n\t\t\t\t\t\tpx2style.closeModal('button was clicked.');\n\t\t\t\t\t})\n\t\t\t],\n\t\t\tonbgclick: function(){\n\t\t\t\tpx2style.closeModal();\n\t\t\t},\n\t\t\tonclose: function(returnValue){\n\t\t\t\tonclose(returnValue);\n\t\t\t},\n\t\t},\n\t\tfunction(){\n\t\t\tconsole.log('done.');\n\t\t\t$body.find('.cont-btn-open-new-layer').on('click', function(){\n\t\t\t\tcontOpenNestableDialog(function(returnValue){\n\t\t\t\t\t$body.find('.cont-opened-modal-returned-value').text(returnValue || 'no value');\n\t\t\t\t});\n\t\t\t});\n\t\t\t$body.find('.cont-btn-lock-modal-2sec').on('click', function(){\n\t\t\t\tmodal.closable(false);\n\t\t\t\tmodal.lock();\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\tmodal.closable(true);\n\t\t\t\t\tmodal.unlock();\n\t\t\t\t}, 3000);\n\t\t\t});\n\t\t\t$body.find('.cont-opened-modal-counter').text( px2style.getOpenedModalCount() );\n\t\t}\n\t);\n}\n</script>\n",
                                "editor": ""
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "tabindexされる新しい要素をあとから追加するサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "開かれたモーダルにtabindexされる要素を追加する"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "(()=>{\nconst $body = $('<div><p>Sample Content.</p><p>Sample Content.</p></div>');\npx2style.modal(\n\t{\n\t\tbody: $body,\n\t\tbuttons: [],\n\t},\n\tfunction(){\n\t\t$body.append('<div class=\"px2-p\">INPUT: <input type=\"text\" /></div>');\n\t}\n);\n})();",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "```js\n(()=>{\nconst $body = $('<div><p>Sample Content.</p><p>Sample Content.</p></div>');\npx2style.modal(\n\t{\n\t\tbody: $body,\n\t\tbuttons: [],\n\t},\n\tfunction(){\n\t\t$body.append('<div class=\"px2-p\">INPUT: <input type=\"text\" /></div>');\n\t}\n);\n})();\n```\n",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "ウィンドウにフィットするサイズのサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:basics/button",
                        "fields": {
                            "label": {
                                "src": "開かれたモーダルがウィンドウにフィットする"
                            },
                            "intention": {
                                "src": ""
                            },
                            "sizing": {
                                "src": ""
                            },
                            "display": {
                                "src": ""
                            },
                            "btntype": {
                                "src": "button"
                            },
                            "onclick": {
                                "src": "(()=>{\nconst $body = $('<div style=\"background-color: #eef;\"><p>Sample Content.</p><p>Sample Content.</p></div>');\npx2style.modal(\n\t{\n\t\ttitle: \"ウィンドウにフィットするダイアログ\",\n\t\tbody: $body,\n\t\twidth: \"100%\",\n\t\theight: \"100%\",\n\t\tcontentFill: true,\n\t},\n\tfunction(){\n\t}\n);\n})();",
                                "lang": "javascript"
                            },
                            "align": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "```js\n(()=>{\nconst $body = $('<div style=\"background-color: #eef;\"><p>Sample Content.</p><p>Sample Content.</p></div>');\npx2style.modal(\n\t{\n\t\ttitle: \"ウィンドウにフィットするダイアログ\",\n\t\tbody: $body,\n\t\twidth: \"100%\",\n\t\theight: \"100%\",\n\t\tcontentFill: true,\n\t},\n\tfunction(){\n\t}\n);\n})();\n```\n",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": "",
                        "locked": {
                            "contents": false,
                            "children": false,
                            "move": false,
                            "delete": false
                        }
                    },
                    {
                        "modId": "px2style:sections/hx",
                        "fields": {
                            "hx": {
                                "src": "3"
                            },
                            "main": {
                                "src": "その他のサンプル"
                            },
                            "sub": {
                                "src": ""
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "<ul>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             target: '.contents',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n         }\n     );void(0);\">Open normal modal dialog contains long contents.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Modal Dialog 700px.',\n             target: '.contents',\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );void(0);\">Open normal modal dialog with 700px width.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             target: '.contents',\n             body: '<div><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; disabled=&quot;true&quot; /></p><p><button class=&quot;btn-lock-a&quot; type=&quot;button&quot;>lock() + closable(false)</button></p><p><button class=&quot;btn-lock-b&quot; type=&quot;button&quot;>lock()</button></p><p><button class=&quot;btn-lock-c&quot; type=&quot;button&quot;>closable(false)</button></p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(modalObj){\n             console.log('done.');\n             modalObj.$modal.find('.btn-lock-a').on('click',function(){\n                 modalObj.lock();\n                 modalObj.closable(false);\n                 setTimeout(function(){\n\t \t\t\t\tmodalObj.unlock();\n\t \t\t\t\tmodalObj.closable(true);\n\t \t\t\t }, 10*1000);\n             });\n             modalObj.$modal.find('.btn-lock-b').on('click',function(){\n                 modalObj.lock();\n                 setTimeout(function(){\n\t \t\t\t\tmodalObj.unlock();\n\t \t\t\t }, 10*1000);\n             });\n             modalObj.$modal.find('.btn-lock-c').on('click',function(){\n                 modalObj.closable(false);\n                 setTimeout(function(){\n\t \t\t\t\tmodalObj.closable(true);\n\t \t\t\t }, 10*1000);\n             });\n         }\n     );void(0);\">Open normal modal dialog with form.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             target: '.contents',\n             body: '<div><input type=&quot;hidden&quot; name=&quot;hidden-sample&quot; value=&quot;&quot; /><p>Sample Content.</p><p><input type=&quot;text&quot; name=&quot;modal-test&quot; value=&quot;&quot; /></p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot;>OK</button>'\n             ],\n             form: {\n                 action: 'javascript:alert(\\'form action\\');',\n                 method: 'get',\n                 submit: function(){alert('form submit');px2style.closeModal();}\n             },\n             width: 700\n         },\n         function(){\n             console.log('done.');\n         }\n     );void(0);\">Open normal modal dialog with form contains long contents.</a></li>\n <li><a href=\"javascript:console.log(document.querySelectorAll('div.view-section'));px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             target: document.querySelectorAll('div.cont-view-section')[0],\n             body: '<div><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p><p>Sample Content.</p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n         },\n         function(){\n             console.log('done.');\n         }\n     );void(0);\">Open modal dialog to target DIV element.</a></li>\n <li><a href=\"javascript:px2style.modal(\n         {\n             title: 'Sample Form Dialog.',\n             target: '.contents',\n             body: '<div><p>Sample Content. <button type=\\'button\\' onclick=\\''+\n                 'px2style.modal({'+\n                 '    title: &quot;2nd layer&quot;,'+\n                 '    target: &quot;.contents&quot;,'+\n                 '    body: &quot;<div><p>Sample Content on 2nd layer.</p></div>&quot;'+\n                 '}, function(){'+\n                 '    console.log(&quot;done2.&quot;);'+\n                 '});'+\n                 '\\' class=\\'px2-btn\\'>open new layer</button></p></div>',\n             buttons: [\n                 '<button type=&quot;submit&quot; class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ],\n             buttonsSecondary: [\n                 document.createElement('button')\n             ],\n             onclose: function(){alert('onclose event');}\n         },\n         function(){\n             console.log('done.');\n         }\n     );void(0);\">Open normal modal dialog with secondary button.</a></li>\n <li><a href=\"javascript:(function(){var modal = px2style.modal(\n         {\n             title: 'Sample Modal Dialog.',\n             target: '.contents',\n             body: '<div><p><input type=&quot;text&quot; value=&quot;&quot; /></p></div>',\n             buttons: [\n                 '<button class=&quot;px2-btn px2-btn--primary&quot; onclick=&quot;px2style.closeModal();&quot;>OK</button>'\n             ]\n         },\n         function(){\n             console.log('done.');\n             setTimeout(function(){\n                 modal.replaceBody( '<div><p><input type=&quot;text&quot; value=&quot;&quot; /></p><p>Sample Content.</p><p>Sample Content.</p><p><input type=&quot;text&quot; value=&quot;&quot; /></p><p>Sample Content.</p></div>' );\n             }, 1000);\n         }\n     )})();void(0);\">Replace modal body.</a></li>\n</ul>",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    },
                    {
                        "modId": "px2style:basics/text",
                        "fields": {
                            "main": {
                                "src": "<div class=\"cont-view-section\" style=\"height: 10px;\">\n</div>",
                                "editor": "markdown"
                            },
                            "text-align": {
                                "src": ""
                            },
                            "font-size": {
                                "src": ""
                            },
                            "paragraph": {
                                "src": "px2-p"
                            }
                        },
                        "anchor": "",
                        "dec": ""
                    }
                ]
            }
        }
    }
}