{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1MDUyMDU0LCJpYXQiOjE2NzUwNDg0NTQsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.ABLq-pVmMYSRzjyyf36K5A7195QwyLPALmsaNvjd3AiCcj1u3B5B1zsaVDRhOAcrbdOK2sBKKTHoA04s7tPI0dfo5oTjMZA3vzlyk-yVsq1HwS6WYMPsB1ykOGImUCrIip_Aa5-BVf_6k6ToRBbfqX203k96xgQmqUMgXH02_OK-2KpnXGnbFbHyG6ElFOwhWt-sfLMPtxsLo3Sk91iOKmJ9C21Li6ZezezDmFPvAQrTrT1YYAWXvFet3CCQcW2iS9AHTnaHVWj5IoR2iTXBacuUXU6r38e6e2ZUC3UINAuclI-_H2ER1BobCMcMowHPKAEaVGeVGg2Bwww9sqLV4Q"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":60426015,\"user_id\":1887094,\"html\":\"<html>\\n <body>\\n <!-- This div will host the builder -->\\n <div id=\\\"builder\\\"><\\/div>\\n <!-- This div will host the runner -->\\n <div id=\\\"runner\\\"><\\/div>\\n <\\/body>\\n<\\/html>\",\"css\":\"#builder {\\n position: absolute;\\n left: 0px;\\n width: 50%;\\n top: 0px;\\n bottom: 0px;\\n}\\n\\n#runner {\\n position: absolute;\\n right: 0px;\\n width: calc(50% - 1px);\\n top: 0px;\\n bottom: 0px;\\n border-left: 1px solid rgb(216,229,238);\\n}\\n\\nbody {\\n overflow: hidden;\\n}\\n\",\"js\":\"Tripetto.Namespaces.include(\\\"tripetto-block-device\\\");\\n\\n\\/\\/ Create a new builder instance\\nTripetto.Builder.open({\\\"clusters\\\":[{'id':'ec7d180aecd099aea6dac9d6ec643e0d39363e3f62f3cfda71d88ca0fa2d2eb1','nodes':[{'id':'150f80b826b421af86b144816c88f54f561157790949e388460865d2b5d74826','name':'Device condition example','nameVisible':true}],'branches':[{'id':'cedaf470a0e6f99121ab401e01370ce4cc364f471974d31bbe9e943119e76fba','clusters':[{'id':'c98750b175f6e8c77e5adeb986b71dc69513e5288ac4502a2ab4f5980aaf05a7','nodes':[{'id':'60b849675f1e4c877f9e28b1e503f192b5a0454b2ef92c6d72f5ee3614bc6abc','name':'Branch for desktop device.','nameVisible':true}]}],'conditions':[{'id':'160e7ece83804270e2ee1a8b8e6238f33caa6da2010e5727d5b4b50bc0afa4e3','block':{'type':'tripetto-block-device','version':'4.0.1','deviceType':'desktop'}}]},{'id':'7dfdf2120f4f52e9e4e3d9cd142a3de4a793f1816f5d07717232569fdb637f4a','clusters':[{'id':'674753caebc5f0e93c66da6dae23ea7096aeb4dfd18f5367bc5a75adefb14000','nodes':[{'id':'aa69f682ae136ec506bde38db32f86c0f239adbdab28747745ef59dbad1f83dd','name':'Branch for tablet device.','nameVisible':true}]}],'conditions':[{'id':'bd8f27b62ff1263ce216300f5ab43bae9fafeee02817701ff4f1ce686c47d324','block':{'type':'tripetto-block-device','version':'4.0.1','deviceType':'tablet'}}]},{'id':'a7da0fe0ae600376ec204daf1ce0fef37c7ec75f3ad2224c5d633cee0e0d066c','clusters':[{'id':'afa838e05db33b438720e32373cd031979ec7cc59ba7d024d1ee4e5f5a2cd698','nodes':[{'id':'d49b9a5145df3aadf23eb9df331b266b6aaf5357b224f6c0e2b57c34c91b5bef','name':'Branch for phone device.','nameVisible':true}]}],'conditions':[{'id':'cd62672ecf1a2104815efd7d358e4cdc0e4014cc47eee83905ed6e9d1012b05a','block':{'type':'tripetto-block-device','version':'4.0.1','deviceType':'phone'}}]}]}],\\\"builder\\\":{\\\"name\\\":\\\"tripetto\\\",\\\"version\\\":\\\"4.5.0\\\"}}, {\\n element: document.getElementById(\\\"builder\\\"),\\n onReady: (builder) => {\\n \\/\\/ Builder is ready, now create the runner for the live preview\\n TripettoAutoscroll.run({\\n element: document.getElementById(\\\"runner\\\"),\\n definition: builder.definition,\\n view: \\\"preview\\\",\\n onEdit: (type, id?) => {\\n switch (type) {\\n case \\\"prologue\\\":\\n builder.edit(\\\"prologue\\\");\\n break;\\n case \\\"epilogue\\\":\\n builder.edit(\\\"epilogue\\\", id);\\n break;\\n default:\\n if (id) {\\n builder.edit(\\\"node\\\", id);\\n }\\n break;\\n }\\n }\\n }).then((runner) => {\\n \\/\\/ When the definition is changed, update the preview\\n builder.hook(\\\"OnChange\\\", \\\"framed\\\", (event) => {\\n runner.definition = event.definition;\\n \\n console.log(JSON.stringify(event.definition));\\n });\\n\\n \\/\\/ When something is edited in the builder, let the preview know\\n builder.hook(\\\"OnEdit\\\", \\\"synchronous\\\", (event) => {\\n runner.doPreview(event.data);\\n });\\n });\\n\\n \\/\\/ Notify the builder when the viewport changes\\n window.addEventListener(\\\"resize\\\", () => builder.resize());\\n window.addEventListener(\\\"orientationchange\\\", () => builder.resize());\\n },\\n disableSaveButton: true,\\n disableCloseButton: true,\\n controls: \\\"left\\\"\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"less\",\"js_pre_processor\":\"typescript\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-04-26T09:47:49.125Z\",\"updated_at\":\"2022-04-26T14:16:05.463Z\",\"title\":\"Tripetto SDK \\/ Blocks \\/ Stock \\/ Device\",\"description\":\"\",\"slug_hash\":\"YzYoxLV\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"842c848ca9a65ed0176e6d4528865068\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":56696628,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null,\"hashid\":\"YzYoxLV\"}"}