{"_id":"@antipodes-medical/modal-popup","_rev":"2-c39ea4a81096926d893c19132bac822c","name":"@antipodes-medical/modal-popup","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@antipodes-medical/modal-popup","version":"1.0.0","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","eslint":"eslint '**/*.js'","eslint:fix":"eslint '**/*.js' --fix"},"repository":{"type":"git","url":"git+https://github.com/antipodes-medical/modal-popup.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/antipodes-medical/modal-popup/issues"},"homepage":"https://github.com/antipodes-medical/modal-popup#readme","description":"## Installation","devDependencies":{"@antipodes-medical/eslint-config-antipodes":"^1.0.5"},"dependencies":{"@antipodes-medical/js-helpers":"^1.0.0"},"gitHead":"21dea578777da73a748a8f3a05521741881aa7b4","_id":"@antipodes-medical/modal-popup@1.0.0","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-3eMhYzif484fI4589x2wu8ANCxdExtxutKhsnLOAYr6Gplm7b4c7I/wfHZy/kQPw9lGaWixqgb/MNSiYONYFMA==","shasum":"c4e4f853722b261fba9df1b08408895da80a9970","tarball":"https://registry.npmjs.org/@antipodes-medical/modal-popup/-/modal-popup-1.0.0.tgz","fileCount":15,"unpackedSize":44656,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqem7mtSDuYWqlpKLufyfNRDkWyrMQVT1Mf2yRww93FQIgLzFDw2Bc9VkUa2SxyZcFWurxfA+Y9zop1ornX1lonp4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJif6G4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4IBAAj+KOA7Enrh3VMVz36gniwVpzkFSy9aaKnvIP117RBTqZrlr3\r\nGhMFugjkx1fbOhHeLTde3202c31Po1SnJoepzYEPJOSHusz9xYKffiV04sE+\r\nsjifxZZEFJRBzdEu5TsTrTm/50xq9NgQocNoQ8YRqPzFEtxACxH7YAM2vffr\r\n+PJC3LpDPoSLopxFu2Sk8t0nLvZsnw4Pfr1mLEWl98mTtnvhUcBY/b4S2Ar2\r\nHW7IeL+wRKKQbOGGpaL+0o7Ft4+69mZ7ySVNNu2xf/lcPBb3IMGsz5p/gYDI\r\n8jH/TABwUF+fTLHfL0u+mPCrG0w672HB6GHcFqZc1NRU/uxEevWOa4+wxSuB\r\nbc1Mzn0mdoedQM3Yu9mILsuC4AaptFoaW3nT35sUCv8CIPDZdKZIh7AQ4hxm\r\nviwstnQCg2t+Dqg/vI9YSH3S/1acQX5aryVanA9K4Fs5EsluvXywFPkiB0O1\r\n4QS1mdHm3xY73r8RQ7rlxalZ8g1S+nHOns/yylb/2dwLNRd1mQKI/+KbZV5N\r\nAIfKyv8Xz7xAJMCTYqzFRvogHxoDqljCn9Vl1OH/6PuvugGTLXFhwx4+qMHG\r\nKEelP/hwOYBrSgA58+CkLeEUbSxqssagxvds0F6jfJ2w+/nKKddR267uMDZ7\r\n2FYJk8sO3zc1MAmZ/zPN43e0Ta2YKRO/Q3Q=\r\n=2Nlr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"},"directories":{},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal-popup_1.0.0_1652531640048_0.9965462451130465"},"_hasShrinkwrap":false},"1.0.1":{"name":"@antipodes-medical/modal-popup","version":"1.0.1","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","eslint":"eslint '**/*.js'","eslint:fix":"eslint '**/*.js' --fix"},"repository":{"type":"git","url":"git+https://github.com/antipodes-medical/modal-popup.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/antipodes-medical/modal-popup/issues"},"homepage":"https://github.com/antipodes-medical/modal-popup#readme","description":"## Installation","devDependencies":{"@antipodes-medical/eslint-config-antipodes":"^1.0.5"},"dependencies":{"@antipodes-medical/js-helpers":"^1.0.0"},"gitHead":"1ba8cbb79b9bb7595c560fdf5e8400007cf1ec68","_id":"@antipodes-medical/modal-popup@1.0.1","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-MaxMQ53xYDe8nsCTm/EEzcn/5s+BFY7cenhb9HhlU2QpiGwTLSogrvTxUGW2zBSGvZFyraOmy9wI9rH2YbhoCw==","shasum":"ee823a495e9a34219254b449d118c88b8178e1ca","tarball":"https://registry.npmjs.org/@antipodes-medical/modal-popup/-/modal-popup-1.0.1.tgz","fileCount":15,"unpackedSize":44944,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+sf2TGzavMXu+iw2zghLGV2qzsdtuXjtqhpg9yMTMoQIhAIohZSulYT+o4AHXB4XYPiu0v6FFu0meLb87fuWJ6op2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJif6NCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6aA//czrh35oHxK3/ojDmfkbx6sMh1R+yWyeI9zXLb9VcpCxud+RW\r\nyVf2fURHpUWwRCIbds42Ql1X0gSxa4IxEjAp1xqyfSd4zXAWMd52Oe4tRmCQ\r\nKm1ihXIkYjHUoDdiJSbvpz947PW3uffogXwaB7ryypr7+YXxpLEayuLvDi00\r\nAEDZiwVyXOsfjR1tNT+iXCZY/ECGpZyEFFd8QpgLkz8m5TxBiLBlkUZrylXS\r\nTGcLCo491DDUozdz4McguThlV3VRez7B5CBRrboOJXCJrCOCyRRvmhHoBRMh\r\nVfCbO4OJYAj1MxyB69ekng1YJyKPwCba67sRG8KZoV6fOZqQdC8VBNVxTCC6\r\nOLhAAoahLuScaCSmrClEtpkSw01u1runupeohM2p/ScsGtOUEZHKG6PoPV+2\r\nF0hTRKVlVKFpUJw+f7Y8L3p6Hbi8UTyuGOgDroc235FXdqzQuEBVY33H37y3\r\nVfFXumm1nbsh4SnFAs/ChzFoh6BPdMWxss6p2klxsUErbuMYQ7xTRdRE0VHV\r\niCj8132rv72u/vvBX0pL6px36NgrdbPBxB/sbQ4qvyQieL6VMWx5CZmXDQi9\r\nUcRY2/ZZDjGrxMImCCswZuGODheOGmyUCVm2JXV7leKDPAwQNplfyjhXs9Zh\r\ngcmAwo9Va3gREFXxuZ68g3ZjN/ufOKBu+xY=\r\n=Qj5r\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"},"directories":{},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal-popup_1.0.1_1652532033903_0.2758636411634352"},"_hasShrinkwrap":false},"1.0.2":{"name":"@antipodes-medical/modal-popup","version":"1.0.2","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","eslint":"eslint '**/*.js'","eslint:fix":"eslint '**/*.js' --fix"},"repository":{"type":"git","url":"git+https://github.com/antipodes-medical/modal-popup.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/antipodes-medical/modal-popup/issues"},"homepage":"https://github.com/antipodes-medical/modal-popup#readme","description":"## Installation","devDependencies":{"@antipodes-medical/eslint-config-antipodes":"^1.0.5"},"dependencies":{"@antipodes-medical/js-helpers":"^1.0.0"},"gitHead":"43a9a9782ace458ef5b949038763c9988b555771","_id":"@antipodes-medical/modal-popup@1.0.2","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-DKmC7rHaE7CtgotSUwHTgW+zgUVozXArvEPsg4UZYev9MjuFHHdYhYPpcKAxeMCP7cKEky9oCGzY4mSPmb/Gbg==","shasum":"3d13fb9b55911359aae9c34d4e9c39ba2b221657","tarball":"https://registry.npmjs.org/@antipodes-medical/modal-popup/-/modal-popup-1.0.2.tgz","fileCount":15,"unpackedSize":45570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8ldrSntv3IIzuzapMbaJcAIgwvi1omfBhf3nskeVESAIhAIwoEK2pvckMc/zLWss46jjm4dCL0MhHLjpfPhpbn7Cw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJif6TEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOShAAmVEEWoyV0ucN2O0V+cgkX+pOx89Yro7A2qqrcHUSfSYRgN6z\r\n+DnpyI6R16EfL5MzmUJWO3kGObPf/BPGtI5PufVrCYeEz7QBgWdfbWapCFml\r\n9RhijKjUwnuOfUe/+iEKzAE9KPQHX9mZ4MOqjcHDLu9UoNiszntR8utXRID2\r\nzsdR6pDshlEwlS0TrKSB9ykl0UmG34zVLXLIS1vvsEEPC7aa1JdF7VCel4h5\r\npcvkUFakwqzVpOWVoPOso9L+MsEqB+ttpBF6sqzn6zWQEXz4fdrJGNxPXRto\r\nJNmxnMu8Zus0ZpisjXWxFBfPl1NJws7ux/2lwE0aqEVNG6rvHvY18O0AOOGU\r\njJhygVtbYMApjw7lNZ8pQp2kgy5N7k3tajdyPVNYhVLD1b2uXpzJyAZQd9wI\r\no6+8do25vXmMn8Kp9pbNbzF2XwoJQw3TcFpTkP3HAtvojBrD3qH0wnWAtVjQ\r\nHR1DQnUVqeJWylJUfQ58dzhi3mk9v9E9EEGkf99TY+ste1kELtaRYIwOZOeH\r\nogVZ++2vbFJKG5eEbF5zBn8pFlXXxt+y8RDA5h7x/Hp6lm0xNZtB8o4ULgTc\r\nmAsvxfiwtzbxTeRNzK2tfcsB7zsaGJ+5jKzlWEFUwyxZR5HWIOfzweHh5aGX\r\nuArrvvtQFJltNR5nKrxp1yPMW4SmZyWTOv0=\r\n=9xwY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"},"directories":{},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal-popup_1.0.2_1652532420322_0.00647887299493588"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-14T12:33:59.969Z","1.0.0":"2022-05-14T12:34:00.207Z","modified":"2022-05-14T12:47:00.586Z","1.0.1":"2022-05-14T12:40:34.063Z","1.0.2":"2022-05-14T12:47:00.514Z"},"maintainers":[{"name":"antipodes-m","email":"theo@antipodesmultimedia.com"}],"description":"## Installation","homepage":"https://github.com/antipodes-medical/modal-popup#readme","repository":{"type":"git","url":"git+https://github.com/antipodes-medical/modal-popup.git"},"bugs":{"url":"https://github.com/antipodes-medical/modal-popup/issues"},"license":"ISC","readme":"# Modal Popup\n\n## Installation\n\n```shell\nyarn add @antipodes-medical/modal-popup\n```\n\nDans le Javascript :\n\n```javascript\nimport '@antipodes-medical/modal-popup'\n```\n\n## Utilisation\n\n```html\n\n<modal-popup id=\"my-modal\">\n    <h2 id=\"dialog-title\">Ma fenêtre modale</h2>\n    <p id=\"dialog-desc\">Je suis une fenêtre modale accessible.</p>\n    <form action=\"\" method=\"post\">\n        <p>\n            <label for=\"email\">Email</label>\n            <br />\n            <input type=\"email\" id=\"email\" />\n        </p>\n        <p>\n            <label for=\"password\">Mot de passe</label>\n            <br />\n            <input type=\"password\" id=\"password\" />\n        </p>\n        <p>\n            <button type=\"submit\">Valider</button>\n        </p>\n    </form>\n</modal-popup>\n\n<button type=\"button\" data-modal-popup=\"my-modal\">\n    Ouvrir ma fenêtre modale\n</button>\n<a href=\"#\" data-modal-popup=\"my-modal\">\n    Ouvrir ma fenêtre modale\n</a>\n```\n\nLors du clic sur un élément avec l'attribut `data-modal-popup=\"my-modal\"`, la popup avec l'id `my-modal` va s'ouvrir.\n\n## Attributs disponibles\n\n### Can't close\n\nLa popup ne sera pas fermable.\n\n```html\n\n<modal-popup id=\"my-modal\" cant-close></modal-popup>\n```\n\n### No close button\n\nLa popup n'aura pas de bouton de fermeture.\n\n```html\n\n<modal-popup id=\"my-modal\" no-close-button></modal-popup>\n```\n\n### Active\n\nLa popup sera active par défaut.\n\n```html\n\n<modal-popup id=\"my-modal\" active></modal-popup>\n```\n\n## Évènements disponibles\n\n### modal-popup:open\n\nLorsque la popup est ouverte.\n\n```javascript\nconst $modal = document.getElementById('my-modal');\n$modal.addEventListener('modal-popup:open', () => console.log('#my-modal popup has been opened.'));\n```\n\n### modal-popup:close\n\nLorsque la popup est fermée.\n\n```javascript\nconst $modal = document.getElementById('my-modal');\n$modal.addEventListener('modal-popup:close', () => console.log('#my-modal popup has been closed.'));\n```\n\n## Styles\n\nVous pouvez customiser le style des modals, voici une idée de ce que vous pouvez-faire :\n\n```scss\nmodal-popup {\n    position: fixed;\n    width: 100vw;\n    z-index: 100;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    display: flex;\n    padding: 2.4rem;\n    overflow-y: scroll;\n    -webkit-overflow-scrolling: touch;\n    background-color: rgba(0, 0, 0, .75);\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity .2s;\n}\nmodal-popup.is-active {\n    pointer-events: auto;\n    opacity: 1;\n}\nmodal-popup > div {\n    position: relative;\n    flex: 1;\n    max-width: 48rem;\n    margin: auto;\n    padding: 2.4rem;\n    background-color: #FFF;\n}\n\n/* Stylise le bouton de fermeture */\nmodal-popup button[data-dismiss] {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    padding: 0;\n    margin: 0;\n    width: 50px;\n    height: 50px;\n}\nmodal-popup button[data-dismiss]::before,\nmodal-popup button[data-dismiss]::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 5px;\n    height: 20px;\n    background-color: #000;\n    transform: rotate(45deg) translate(-50%, -50%);\n    transform-origin: top left;\n}\nmodal-popup button[data-dismiss]::after {\n    transform: rotate(-45deg) translate(-50%, -50%);\n}\n```","readmeFilename":"README.md"}