Git Product home page Git Product logo

cyclejs-modal's Introduction

Cycle.js Community

This organization is a place for any Cycle.js project that welcomes collaboration. We welcome all types of projects, from drivers to games to documentation to art.

The official cyclejs organization contains the code for Cycle.js itself and the core libraries developers might use. (HTTP, DOM, etc). We're here for all of the cool stuff the community makes.

About our community

We are a welcoming, collaborative community. We believe that contributions should be encouraged and celebrated. We especially welcome those who feel like they might not be welcome, or able to help. Come one, come all.

We do not tolerate behaviour that makes other contributors feel harassed or unwelcome. Please see the code of conduct.

In short, don't be a dick and consider how others will perceive your actions. If you experience any negative interactions, please contact either @tylors or @widdershin and we will do our best to help. If in doubt, get in touch.

Getting involved

We welcome contributors of all levels of experience and from all different backgrounds.

We are liberal about membership. If you want to be a member, please open an issue on this repository and we will add you. 😄

As a member, you are welcome to create repositories in this community and to transfer your existing repos. The only criteria is that they're related to Cycle.js and that collaboration is welcomed.

The most straightforward way to contribute to a repository is to open a pull request. We ask that repositories in our community follow Github flow as using pull requests allows for more review, discussion and learning to take place.

When one of your pull requests is merged, you will be added as a collaborator to the repository. This allows for easier collaboration (as collaborators can work together on pull requests).

Being a collaborator means:

  • You can push to the repo, and to branches.
  • With the permission of the other collaborators, you can merge pull requests.
  • You get to have a say in the development of the project.
  • You have no obligation to contribute, but any work you do is very appreciated.
  • You still work with pull requests, but now you work on the repo itself, not your fork. This makes it easier to collaborate.

Here is an automagically generated list of open, unassigned issues with a "Help Wanted" label. If you want to contribute but you're unsure what to work on, take a look at these issues and comment on any you're interested in.

cyclic-router

cycle-canvas

README

cycle-svg-pan-and-zoom

cycle-regl

cyclejs-modal's People

Contributors

atomrc avatar feliciousx avatar jvanbruegge avatar lukebarton avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

jvanbruegge andrejsperling lukebarton cbforks atomrc usm4n kiyui

cyclejs-modal's Issues

Upgrade for current Cycle?

It looks like various Cycle changes have left cyclejs-modal behind. I get errors like this trying to compile an app that uses cyclejs-modal:

[at-loader] ./node_modules/cyclejs-modal/node_modules/@cycle/dom/lib/MainDOMSource.d.ts:6:22 
    TS2420: Class 'MainDOMSource' incorrectly implements interface 'DOMSource'.
  Types of property 'select' are incompatible.
    Type '(selector: string) => DOMSource' is not assignable to type '<S extends DOMSource>(selector: string) => S'.
      Type 'DOMSource' is not assignable to type 'S'.

With a hint in the right direction I could attempt a PR; or if someone is actively maintaining cyclejs-modal a keep-up-with-core-Cycle release would be appreciated.

Listening to clicks on overlay

Currently there's no way of us to get the click event of the overlay.

I'm not sure how the implementation would look like but it would be nice if we are able to listen to clicks on the overlay and then react upon it ( like closing the modal when they click the overlay )

`background`, `containerClass` and `zindex` are ignored when `center` is false

The most important, for my use case, would be to have the modalContainerClass option used even with the center: false option.

This way I would be able to handle all the positioning in my CSS files without having to manually wrap all my modals in a <div class="my-modal-wrapper">

I believe it is just a matter of consuming the modalContainerClass option here

cyclejs-modal/src/modalify.ts

Line 96 in 7603c2c

: h('div', {}, modals)

I'd be happy to create a PR

z-index trouble

When using cyclejs-modal in an application which some elements (navigation, etc) that have a non-default z-index, the opaque background fails to cover those elements and leave them still operable.

Error when running examples

Is this working atm? I get error when I run "npm i && npm run examples":

Error: ENOENT: no such file or directory, open 'examples/simple/build/index.js'
at Error (native)

Errors when parent sinks or modal sinks are not using xstream 

function main({ DOM } : Sources) : Sinks
{
    return {
        DOM: Rx.Observable.of(button('.button', ['open modal'])),
        modal: DOM.select('.button').events('click')
            .mapTo({
                type: 'open',
                component: modal
            } as ModalAction)
    };
}

function modal({ DOM } : Sources) : Sinks
{
    return {
        DOM: Rx.Observable.of(div('.div', [
            span('.span', ['This is a modal. Yeah? :)']),
            button('.button', ['close'])
        ])),
        modal: DOM.select('.button').events('click')
            .mapTo({ type: 'close' } as ModalAction)
    };
}

this would break as of the example.. there isn't enough conversion of the sinks..

replacing this with

const parentSinks : Sinks = main({
  ...sources, [name]: adapt(messageProxy$)
});

const sinks : Sinks = Object.keys(parentSinks)
  .map(k => ({ [k]: xs.fromObservable(parentSinks[k]) }))
  .reduce(( prev, curr ) => Object.assign( prev, curr ), {});

should do the magic

[Suggestion] modalify argument to use objects

breaking change suggestion..

modify modalify ( pun intended ) arguments to use object instead of a list

modalify( app, {
  name : 'modal',
  center : true,
  modalContainerClass : 'some-extra-class',
  background : 'rgba(0,0,0,0.8)',
  zIndex : 500
})

it reads better than

modalify( app, 'modal', true, 'why-this-string-here', 'rgba(0,0,0,0.6)', 500 )

you don't know what modal does. what true is.. and what 500 is for.. and the random string

let user handle isolation

currently, isolation is handled by modalify internally.

if we want to use onionify with custom lenses we can't.

proposal is to remove isolation and let the user pass in an already isolated component on their own in the open action stream.

thoughts? @jvanbruegge

this suggestion is a breaking change tho..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.