Dialog Bootstrap renderer

migajek · March 18, 2018, 8:15pm

Hi,
is there any ready to use Aurelia Dialog renderer which renders Bootstrap-themed dialog (modals)?

Alexander-Taran · March 18, 2018, 8:32pm

Did you try to google it by chance?

gist.github.com

https://gist.github.com/jedd-ahyoung/9e86f606e714c9da2199aab27b74b074

app.html

<template>
  <h1>Dialog Repro</h1>
  <button click.delegate="submit()">Open Dialog</button>
</template>

app.js

import {DialogService} from 'aurelia-dialog';
import {Prompt} from './prompt';

export class App { 
  person = { name: 'Test' };
  static inject = [DialogService];
  constructor(dialogService) {
    this.dialogService = dialogService;
  }
  submit(){

This file has been truncated. show original

bootstrap-dialog-renderer.js

import 'bootstrap';
import {inject, TemplatingEngine} from 'aurelia-framework';

@inject(TemplatingEngine)
export class BootstrapDialogRenderer {
	constructor (templatingEngine) {
        this.templatingEngine = templatingEngine;
		this.dialogs = [];
	}

This file has been truncated. show original

There are more than three files. show original

migajek · March 18, 2018, 9:18pm

I did. What I forgot to mention is I need working one.

dialogController.slot

is undefined … I suppose this was working for some older version of aurelia-dialog

besides it uses Bootstrap JS to actually create modal, I was hoping for a simpler theme-only option so I don’t have to include bootstrap js

Alexander-Taran · March 18, 2018, 9:44pm

If you won’t find one and will create one.
Please share it with community.

shahabganji · September 22, 2018, 8:47am

I wrote one for the modal component of aurelia-toolbelt

github.com

aurelia-toolbelt/aurelia-toolbelt/blob/master/src/components/bootstrap/modal/AureliaToolbeltBootstrapModalRenderer.ts

import { inject, TemplatingEngine } from 'aurelia-framework';
import * as $ from 'jquery';

@inject(TemplatingEngine)
export class AureliaToolbeltBootstrapModalRenderer {

  private dialogs: Array<any> = [];

  constructor() {
    console.log('Renderer created');
  }

  public getDialogContainer() {
    return document.createElement('template');
  }

  public showDialog(dialogController: any) {
    console.log(dialogController);
    if (!dialogController.showDialog) {
      return this.createDialogHost(dialogController)

This file has been truncated. show original

Besides, you can find another working sample here

https://github.com/jedd-ahyoung/bootstrap-dialog-renderer

shahabganji · September 23, 2018, 7:50am

This could also be fruitful.

Topic		Replies	Views
Custom Dialog Renderer. How to get the view? Help Requests	0	447	August 9, 2019
Using custom dialog elements with the Aurelia DialogService Help Requests	4	1115	February 26, 2020
Trouble with Aurelia Dialog not displaying correctly Help Requests	4	2029	July 2, 2018
Aurelia Modal Dialog Help Requests	5	1168	November 15, 2018
Architecture of aurelia.io Site Feedback	5	2027	January 17, 2018

Dialog Bootstrap renderer

Related Topics