{"_id":"@boewa-software/react-ajax-lightbox","_rev":"10-2101b9be367dbdbdb25e45e8737b2376","name":"@boewa-software/react-ajax-lightbox","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@boewa-software/react-ajax-lightbox","version":"1.0.0","description":"Lightbox with via ajax loaded content","main":"lib/index.js","module":"esm/index.js","scripts":{"build:commonjs":"cross-env BABEL_OUTPUT=commonjs babel src/ --out-dir lib/","build:esm":"babel src/ --out-dir esm/","build":"npm-run-all clean:* --parallel build:*","clean:commonjs":"rimraf lib","test":"jest"},"repository":{"type":"git","url":"git@gitlab.boewa-software.de:boewa-software/react-ajax-lightbox.git"},"keywords":["Lightbox","Remote","Ajax","jQuery","Modal"],"author":{"name":"böwa GmbH Software- und Webentwicklung, Bremen"},"license":"MIT","peerDependencies":{"jquery":"^3.4.1","react":"^16.8.6","react-dom":"^16.8.6"},"dependencies":{"jquery":"^3.4.1","react":"^16.8.6","react-dom":"^16.8.6"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-object-rest-spread":"^7.4.4","@babel/plugin-transform-react-jsx":"^7.3.0","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-loader":"^8.0.6","cross-env":"^5.2.0","npm-run-all":"^4.1.5","prop-types":"^15.7.2","rimraf":"^2.6.3"},"gitHead":"9097a78868e62db0ee3b668ebf20f3d353a6bfff","_id":"@boewa-software/react-ajax-lightbox@1.0.0","_npmVersion":"5.10.0","_nodeVersion":"9.3.0","_npmUser":{"name":"p.handke","email":"p.handke@boewa.de"},"dist":{"integrity":"sha512-EzVQ8fk9ZFYGHCvt1g3z0GiG6w4yB5aMulflcjpCn2715COUXzMy5ZEYeZ/WvCt2yNIuYxKdq6tWu3pHx0FLtQ==","shasum":"0f7ef13d37bb30eed5eb42383e60b53c18bb20b4","tarball":"https://registry.npmjs.org/@boewa-software/react-ajax-lightbox/-/react-ajax-lightbox-1.0.0.tgz","fileCount":12,"unpackedSize":26246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHybgCRA9TVsSAnZWagAAMpMP/2at2Tq+HFlsOiHLbytU\nO2O5/nXtM5YQ4pcrUzMfEvY/gEAYW4te0AZCrvLve9OYnhOgu8AQ3WyxQ10Q\nFYVtLwve+tOqECVEDXct1TKARTovZawlJ4Xci3FC/jNUQQ6KXggHFDPipDxW\ndghqG0IxqaUnKFqAGOKBxY0xemda78C9QbslhVbOzAOE8zwsRiK7x2854JFl\nm55mZ/+5LQgZz+AZYgvW1UccmI8wUmlP/+d3SiToFGDRJ2UugR+BwB7VjhKL\n7woKBEy8BbUXZZGsqwpwXMjluv7mfSwe9yhGJ98IMxHRQb7cDs/o+bRyR+9/\nVWQWtQGT8DSH26LxWDb4UDzAfJadeoKgCKxF3QqY8IRg9To6cGsymMIt0I9n\nmyxZM/aXi7OJVQwGcQ4zHS6EWpSOOAy3G0PYe7oAq64qWSMtj0PNyviO7cIx\nQdW065LqChNFSTl8g/JHUhjdgV5ruZF5V2zRMPGOTeZtgZDlWOVnp1XNbexr\nWR6wSiWIoHUHKAM1BSsLMpfBC/0q7bWecl+9gL1uTVgQ0exokiQYNFtqUidS\n5d1Znj16etoYlAyoqWvllK8K8MCat8rMUBs9sDmLRrN3lAXtiptH/850wQB1\nQSz8HDAUn4NAFxeljF4RGYBzK1Dn5fjqHbQWyO+LOeqmgUGzMowEHX5MlKiK\nX3uQ\r\n=eKnG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvHAAWrbrfVJou7zcmSUEGsBrVCo30cRF04HvEHPCOmAiEAs3f3KQS4KVi+I3cqXENM3phJuerEvLcURcge2T66Nck="}]},"maintainers":[{"name":"s.wiesekerl","email":"s.wiesekerl@boewa.de"},{"name":"p.handke","email":"p.handke@boewa.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ajax-lightbox_1.0.0_1562322656123_0.4429862754225653"},"_hasShrinkwrap":false},"1.0.3":{"name":"@boewa-software/react-ajax-lightbox","description":"Lightbox with via ajax loaded content","main":"lib/index.js","module":"esm/index.js","scripts":{"build:commonjs":"cross-env BABEL_OUTPUT=commonjs babel src/ --out-dir lib/","build:esm":"babel src/ --out-dir esm/","build":"npm-run-all clean:* --parallel build:*","clean:commonjs":"rimraf lib","test":"jest"},"keywords":["Lightbox","Remote","Ajax","jQuery","Modal"],"author":{"name":"böwa GmbH Software- und Webentwicklung, Bremen"},"license":"MIT","peerDependencies":{"jquery":"^3.4.1","react":"^16.8.6","react-dom":"^16.8.6","prop-types":"^15.7.2"},"dependencies":{"jquery":"^3.4.1","react":"^16.8.6","react-dom":"^16.8.6"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-object-rest-spread":"^7.4.4","@babel/plugin-transform-react-jsx":"^7.3.0","@babel/preset-env":"^7.4.5","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-loader":"^8.0.6","cross-env":"^5.2.0","npm-run-all":"^4.1.5","prop-types":"^15.7.2","rimraf":"^2.6.3"},"version":"1.0.3","gitHead":"e48b3fe39f85be41f6b1fabe1d95fa3a01ae6aa4","_id":"@boewa-software/react-ajax-lightbox@1.0.3","_npmVersion":"5.6.0","_nodeVersion":"9.11.2","_npmUser":{"name":"p.handke","email":"p.handke@boewa.de"},"dist":{"integrity":"sha512-M1BfsFi4CUUsthAWEod+tdcb8345R7bON+m6VyAxuzpfC6ttMYbNnlGvPx8zyMfU9qz9wFTi9sBRAMpIBu6cPw==","shasum":"dc941cf2fdfd79c9c6499dee1e55308469f76836","tarball":"https://registry.npmjs.org/@boewa-software/react-ajax-lightbox/-/react-ajax-lightbox-1.0.3.tgz","fileCount":8,"unpackedSize":21734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJKueCRA9TVsSAnZWagAAELMP/0EtLSVHNSg2njeZLbFz\nIibOCov7MsicskDGCXFtMH6OCzMkUv4TBUQMVA+1upgtz4L4A7cfIeUN+hVF\nDhKApceLGljdKlD4dHzMd5ErV3Nm0aRSutD0/1zCzb/jdbOMxOU2q9S3qfmL\n4o4cW0b+q2AI2gJD6sASRUwpagKWvQYgX59uAtSNYqVCuHc7JhnKSTxQrzu2\nCAcNAwwLKNkNApKWPPI2yyNoSqL6E/7UOHfXR4NEvXU51IReI4GqCFV42ijW\nJQ91hJHvXc7ST6F6HfinNy0b1Qn4rFsNW6n5Xo5V+DLwYYJojAcfUnbsqazx\nSLJL3kSawCdZmH272216d++DQrgA9buVwVj+ao2L8pCMHGmdXQi0DtCgWp9H\nYOA6MBDg5JVNrgrslpbVq4hQo9GwmbqRkACFMZNRI1lhilT5cpWNx8o8wmTz\nwQlztrODn4EdWeCLdYzKvIj66L29uYWV7bjcGRH//7lcGU9zB1vo/R+cmCBU\nXygUIu9FeUxBPaPWAqqAzL/ZAnjceZeEJGhGmhE4MKEoHyxjIGMCHc1TnL51\n7k9aGOzSf/hWkUSdzFINZkDIX0F+u2/HApkBk8OE1TYYeI+qn1dYphUy/Xsx\nFarrkBniK+YJnKv92W8fbrqJYbeM4QYMiuAgy/yicEuH/b2Qvf2/mPbAqVFG\nZamH\r\n=nwRy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpUmEVDa9KkcWqXPkdirnBeuP5vbzzm4vOoN4/AVm60wIhAMCIAQf9vH4oKzzVF6GlE/8JiCbqMToaq2bcg/IA9PN1"}]},"maintainers":[{"name":"p.handke","email":"p.handke@boewa.de"},{"name":"s.wiesekerl","email":"s.wiesekerl@boewa.de"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-ajax-lightbox_1.0.3_1562684317513_0.3613551258824683"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-05T10:30:55.911Z","1.0.0":"2019-07-05T10:30:56.246Z","modified":"2024-03-28T08:06:07.974Z","1.0.1":"2019-07-09T08:33:21.903Z","1.0.3":"2019-07-09T14:58:37.630Z"},"maintainers":[{"email":"s.wiesekerl@boewa.de","name":"s.wiesekerl"},{"email":"a.rust@boewa.de","name":"arust"}],"description":"Lightbox with via ajax loaded content","keywords":["Lightbox","Remote","Ajax","jQuery","Modal"],"author":{"name":"böwa GmbH Software- und Webentwicklung, Bremen"},"license":"MIT","readme":"React Ajax-Lightbox\n===================\n\nDiese React-Komponente ermöglicht die Anzeige von via Ajax geladenen Inhalten in einer Lightbox.\n\n## Instalation\n```\n$ npm install --save @boewa-software/react-ajax-lightbox\n```\n\n## Nutzung\nDie Nutzung erfolgt als klassische React-Komponente.\n\n### Attribute\n* **sourcePath** : string\n\n  URL zum asynchronen laden des Inhalts.\n\n* **closeHandler** : function\n\n  Callback-Methode zum Entfernen der Lightbox.\n  \n* **loaderComponent** : function|React.Component\n\n  React-Komponente die beim Laden angezeigt werden soll.\n  \n* **handleRequestSuccess** : function (optional)\n\n  Callback-Methode zur verarbeiten der Response. \n  \n  Parameter:\n  \n    * `response`: Antwort aus der Ajax-Anfrage\n    * `lightbox`: Lightbox-Instanz\n  \n  Beispiel-Implementierung:\n  \n  ```javascript\n  const handleRequestSuccess = (response, lightbox) => \n      response.content\n          ? lightbox.setContent(response.content)\n          : lightbox.close();\n  ```\n  \n* **handleRequestFailure** : function (optional)\n\n  Callback-Methode zur verarbeiten eines Fehlers.\n   \n  Parameter:\n  \n    * `error`: Aufgetretener Fehler\n    * `lightbox`: Lightbox-Instanz\n  \n  Beispiel-Implementierung:\n  \n  ```javascript\n  const handleRequestFailure = (error, lightbox) => lightbox.close();\n  ```\n  \n* **onRenderContent** : function (optional)\n\n  Callback-Methode, die nach dem rendern eines neuen Inhalts aufgerufen wird.\n  \n  Parameter:\n  \n    * `contentRef`: React-Referenz auf den Content-Container\n    * `lightbox`: Lightbox-Instanz\n    \n  Beispiel-Implementierung:\n  \n  ```javascript\n  const onRenderContent = (contentRef, lightbox) => {\n      // z.b. Zur Registrierung von Event-Listenern per jQuery\n      const contentNode = ReactDOM.findDOMNode(contentRef);\n      const $content = $(contentNode);\n    \n      $content.find('button.close-link').on('click', (e) => {\n          e.preventDefault();\n          lightbox.close();\n      });\n  };\n  ```\n\n* **containerClassName** : string (optional, default: `lightbox--container`)\n\n  Class-Attribut des Container-Elements.\n  \n* **wrapperClassName** : string (optional, default: `lightbox--wrapper`)\n\n  Class-Attribut des Wrapper-Elements.\n  \n* **bodyClassName** : string (optional, default: `lightbox-open`)\n\n  Class-Attribut des Body-Elements bei einer offenen lightbox.\n\n### Direkte Einbindung in den DOM\nDie Lightbox kann mit der folgenden Minimal-Konfiguration in den Body eines Dokuments eingefügt werden.\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport AjaxLightbox from '@boewa-software/react-ajax-lightbox';\n\n// Ziel-Element für das Einbinden der Lightbox\nconst targetElement = document.getElementById('target-element');\n\n// Callback-Methode zum entfernen der Lightbox\nconst closeHandler = () => {\n    ReactDOM.unmountComponentAtNode(targetElement);\n    targetElement.remove();\n};\n\n// Loader-Komponente\nconst Loader = () => (\n    <img className=\"loader-image\" src=\"path-to-image.svg\" alt=\"Lightbox Loading\" />\n);\n\n// Komponente rendern\nReactDOM.render(\n    <AjaxLightbox sourcePath={'/path/to/load/content'}\n                  closeHandler={closeHandler}\n                  loaderComponent={Loader}  />,\n    targetElement\n);\n```\n\n### Verknüpfung mit einem Query-Parameter in der Browser-History\n\nZur Verknüpfung der Lightbox mit der Browser-History via Url-Parameter eignet sich das [`@boewa-software/url-to-lightbox-connector`](https://www.npmjs.com/package/@boewa-software/url-to-lightbox-connector) Modul.","readmeFilename":"README.md"}