├── docs ├── .nojekyll ├── assets │ ├── images │ │ ├── icons.png │ │ ├── widgets.png │ │ ├── icons@2x.png │ │ └── widgets@2x.png │ ├── js │ │ └── search.js │ └── css │ │ └── main.css.map ├── globals.html ├── index.html ├── interfaces │ ├── _modalify_.close.html │ ├── _modalify_.sinksobject.html │ ├── _modalify_.open.html │ └── _modalify_.options.html ├── classes │ └── _modalify_.modalsource.html └── modules │ └── _modalify_.html ├── .npmignore ├── .gitignore ├── .release-it.json ├── examples ├── onionify │ ├── css │ │ └── main.css │ ├── index.html │ └── src │ │ └── index.ts ├── rxjs │ ├── css │ │ └── main.css │ ├── index.html │ └── src │ │ └── index.ts ├── simple │ ├── css │ │ └── main.css │ ├── index.html │ └── src │ │ └── index.ts └── animated │ ├── css │ └── main.css │ ├── index.html │ └── src │ └── index.ts ├── tsconfig.json ├── LICENSE ├── README.md ├── package.json ├── tslint.json └── src └── modalify.ts /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.log 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | 4 | *.log 5 | -------------------------------------------------------------------------------- /docs/assets/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyclejs-community/cyclejs-modal/HEAD/docs/assets/images/icons.png -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "release": true 4 | }, 5 | "npm": { 6 | "publish": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/assets/images/widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyclejs-community/cyclejs-modal/HEAD/docs/assets/images/widgets.png -------------------------------------------------------------------------------- /docs/assets/images/icons@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyclejs-community/cyclejs-modal/HEAD/docs/assets/images/icons@2x.png -------------------------------------------------------------------------------- /docs/assets/images/widgets@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyclejs-community/cyclejs-modal/HEAD/docs/assets/images/widgets@2x.png -------------------------------------------------------------------------------- /examples/onionify/css/main.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-size: 35px; 3 | } 4 | 5 | body, html { 6 | max-height: 100%; 7 | margin: 0; 8 | } 9 | 10 | body { 11 | padding: 20px; 12 | } 13 | -------------------------------------------------------------------------------- /examples/rxjs/css/main.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-size: 35px; 3 | } 4 | 5 | body, html { 6 | max-height: 100%; 7 | margin: 0; 8 | } 9 | 10 | body { 11 | padding: 20px; 12 | } 13 | -------------------------------------------------------------------------------- /examples/simple/css/main.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-size: 35px; 3 | } 4 | 5 | body, html { 6 | max-height: 100%; 7 | margin: 0; 8 | } 9 | 10 | body { 11 | padding: 20px; 12 | } 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": 4 | { 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "sourceMap": true, 8 | "target": "ES5", 9 | "outDir": "build/cjs", 10 | "lib": ["DOM", "ES6", "ES5"] 11 | }, 12 | "exclude": [ 13 | "node_modules", 14 | "build" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /examples/animated/css/main.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-size: 35px; 3 | } 4 | 5 | body, html { 6 | max-height: 100%; 7 | margin: 0; 8 | } 9 | 10 | body { 11 | padding: 20px; 12 | } 13 | 14 | .modal-container { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | background-color: rgba(0, 0, 0, 0.5); 21 | display: flex; 22 | } 23 | 24 | .modal-content { 25 | margin: auto; 26 | } 27 | -------------------------------------------------------------------------------- /examples/rxjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |Generated using TypeDoc
159 |An easy way to open custom modals in a cyclejs app
69 |Documentation is hosted on Github Pages
70 |npm install --save cyclejs-modal
You can find the examples in the examples/ folder
74 |Since Version 5.2.0 you can also pass the sources to the created modal. This allows the modal to access the isolation scope of its creation place. Take a look at the onionify example to see this in action.
75 |Since Version 5.3.0 modals can be closed by clicking on the gray overlay. You can disable that in the open message:
{
77 | type: 'open',
78 | component: MyModal,
79 | backgroundOverlayClose: false
80 | }
81 | function main({ DOM }) {
82 | return {
83 | DOM: xs.of(button('.button', ['open modal'])),
84 | modal: DOM.select('.button').events('click')
85 | .mapTo({
86 | type: 'open',
87 | component: isolate(modal, 'myscope')
88 | } as ModalAction)
89 | };
90 | }
91 |
92 | function modal({ DOM }) {
93 | return {
94 | DOM: xs.of(div('.div', [
95 | span('.span', ['This is a modal. Yeah? :)']),
96 | button('.button', ['close'])
97 | ])),
98 | modal: DOM.select('.button').events('click')
99 | .mapTo({ type: 'close' } as ModalAction)
100 | };
101 | }
102 | Clone it, run npm i && npm run examples
Generated using TypeDoc
185 |Generated using TypeDoc
271 |Generated using TypeDoc
271 |Generated using TypeDoc
313 |Generated using TypeDoc
327 |Generated using TypeDoc
426 |Generated using TypeDoc
485 |