Code Monkey home page Code Monkey logo

Comments (8)

mitar avatar mitar commented on June 14, 2024 1

This looks great!

from meteor-blaze-components.

mitar avatar mitar commented on June 14, 2024

I just have my own blaze components-based modal.

from meteor-blaze-components.

thebarty avatar thebarty commented on June 14, 2024

Can you share some code? How do you render and destroy it in the dom?

from meteor-blaze-components.

mitar avatar mitar commented on June 14, 2024

Hm, I do not have an example handy. But I have an top-level modal directly under <body>. And then I have a singleton component rendered there. And then I simply access that singleton component and call methods on it to change state, for example, change visibility state and so on.

from meteor-blaze-components.

thebarty avatar thebarty commented on June 14, 2024

OH yeah I see.. how do you then dynamically pass and render a BlazeComponent-Instance with a given datacontext??

from meteor-blaze-components.

mitar avatar mitar commented on June 14, 2024

I do not use data context at the top level in that case, but have a reactive var (or reactive field) in onCreated attached to the component. Something like:

globalModalWrapper = null

class ModalWrapper extends BlazeComponents
  @register 'ModalWrapper'

  onCreated: ->
    super

    @dataContext = new ReactiveField null

    throw new Error "Only one modal wrapper can exist at a time." if globalModalWrapper
    globalModalWrapper = @

  onCreated: ->
    super

    globalModalWrapper = null
<template name="ModalWrapper">
  <div class="modal-wrapper">
    {{#if dataContext}}
      {{> ModalContent dataContext}}
    {{/if}}
  </div>
</template>
globalModalWrapper.dataContext({type: 'warning', message: "Something looks bad."});

from meteor-blaze-components.

thebarty avatar thebarty commented on June 14, 2024

Wuhuuuuu - thanks to you @mitar I have gotten close!!!

By the way: I love the idea of having a directory of BlazeComponent-compatible packages. When you take over Blaze for mdg (do you??? 👍 ) we should have that... and a Modal Toolkit should be included...

this is what I have... so far it works

// Variable to access the instance of the modal globally
export let ModalComponentInstance = null

export const UiModalComponent = class UiModalComponent extends BlazeComponent {
  onCreated() {
    super.onCreated()
    this.componentClass = new ReactiveField()
    this.dataContext = new ReactiveField()

    // Singleton pattern
    if (ModalComponentInstance) {
      throw new Error('Only one modal can exist at a time')
    } else {
      ModalComponentInstance = this
    }
  }

  show(component, dataContext) {
    this.componentClass(component)
    this.dataContext(dataContext)
    this.$('#the-modal-singleton').modal('show')
  }

  hide() {
    this.componentClass(null)
    this.dataContext(null)
    this.$('#the-modal-singleton').modal('hide')
  }

  renderedComponent() {
    if (this.componentClass()) {
      return this.componentClass().renderComponent(this.currentComponent())
    } else {
      return null
    }
  }
}
UiModalComponent.register('UiModalComponent')

Bootstrap3 compatible template

<template name="UiModalComponent">
  <div id="the-modal-singleton" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          {{#with dataContext}}
            {{>renderedComponent}}
          {{/with}}
        </div>
      </div>
    </div>
  </div>
</template>

put this somewhere in your layout.html

{{>UiModalComponent}}

and then finally you can access the modal programtically from anywhere in your code, and tell it what Component to render with what data-context.

import { ModalComponentInstance } from '/imports/modules/components/client/component_modal.js'

// ...

  onClickEditOpenModal(event) {
    ModalComponentInstance.show(TestComponent, {
      // data context
      addNumber: _.random(1, 100),
    })
  }

from meteor-blaze-components.

thebarty avatar thebarty commented on June 14, 2024

For anyone else working on this: the cool thing with the above solution is that you can still use "theduke:bootstrap-modal-prompt" for standard-prompts within the UiModalComponent. So you basically have another modal-prompt-layer on top of the modal.

from meteor-blaze-components.

Related Issues (20)

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.