Skip to content

Instantly share code, notes, and snippets.

@jwahyoung

jwahyoung/app.html

Forked from plwalters/app.html
Last active June 19, 2018 16:51
Show Gist options
  • Save jwahyoung/9e86f606e714c9da2199aab27b74b074 to your computer and use it in GitHub Desktop.
Save jwahyoung/9e86f606e714c9da2199aab27b74b074 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Bootstrap Dialog Renderer
Raw
app.html
<template>
<h1>Dialog Repro</h1>
<button click.delegate="submit()">Open Dialog</button>
</template>
Raw
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.dialogService.open({ viewModel: Prompt, model: this.person}).then(response => {
if (!response.wasCancelled) {
console.log('good');
} else {
console.log('bad');
}
console.log(response.output);
});
}
}
Raw
bootstrap-dialog-renderer.js
import 'bootstrap';
import {inject, TemplatingEngine} from 'aurelia-framework';
@inject(TemplatingEngine)
export class BootstrapDialogRenderer {
constructor (templatingEngine) {
this.templatingEngine = templatingEngine;
this.dialogs = [];
}
getDialogContainer () {
return document.createElement('template');
}
showDialog (dialogController) {
if (!dialogController.showDialog) {
return this.createDialogHost(dialogController)
.then(() => {
return dialogController.showDialog();
});
}
return dialogController.showDialog();
}
hideDialog (dialogController) {
return dialogController.hideDialog();
}
}
BootstrapDialogRenderer.prototype.createDialogHost = function (dialogController) {
var options = Object.assign(dialogController.settings, {
show: false,
});
var element = createDOMNodes(document.createElement('div'));
Array.from(dialogController.slot.anchor.children).forEach((child) => {
element.querySelector('bootstrap-dialog')
.appendChild(child);
});
var view = this.templatingEngine.enhance({
element: element,
bindingContext: dialogController.viewModel
});
var dialog = $(element).modal(options);
$('.modal-dialog:first', dialog).addClass(options.className);
dialogController.showDialog = () => {
return new Promise((resolve, reject) => {
$(element).on('hidden.bs.modal', () => {
dialogController.hideDialog();
resolve();
});
dialogController.slot.attached();
document.body.insertBefore(element, document.body.firstChild);
this.dialogs.push(dialog);
dialog.modal('show');
});
};
dialogController.hideDialog = () => {
$(element).off('hidden.bs.modal');
var dialog = this.dialogs.pop(); // Might need to do a seek and splice here.
dialog.modal('hide');
dialogController.slot.detached();
dialog.get(0).remove();
return Promise.resolve();
};
return Promise.resolve();
}
function createDOMNodes (element) {
var modalHTML = `<div class="modal fade"><bootstrap-dialog></bootstrap-dialog></div>`;
element.innerHTML = modalHTML;
return element.firstChild;
}
Raw
bootstrap-dialog.html
<template>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<slot name="modal-header"></slot>
</div>
<div class="modal-body">
<slot name="modal-body"></slot>
</div>
<div class="modal-footer">
<slot name="modal-footer"></slot>
</div>
</div>
</div>
</template>
Raw
bootstrap-dialog.js
import {customElement, containerless} from 'aurelia-templating';
@customElement('bootstrap-dialog')
@containerless()
export class BootstrapDialog {
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Let's make our bootstrap modal content obvious -->
<style>
.modal-header {
background: #ffacaa;
}
.modal-body {
background: #aaffad;
}
.modal-footer {
background: #aad4ff;
}
</style>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jedd-ahyoung/aurelia-bundle/master/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jedd-ahyoung/aurelia-bundle/master/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
import {BootstrapDialogRenderer} from './bootstrap-dialog-renderer';
export function configure(aurelia) {
aurelia.use.globalResources(['./bootstrap-dialog']);
aurelia.use.developmentLogging();
aurelia.use.plugin('aurelia-dialog', (config) => {
console.log(config);
config.useRenderer(BootstrapDialogRenderer);
});
aurelia.start().then(() => aurelia.setRoot());
}
Raw
prompt.html
<template>
<div slot="modal-header">
<p>A modal header</p>
</div>
<div slot="modal-body">
<p>This is the modal body.</p>
<p>Some more modal content here.</p>
</div>
<div slot="modal-footer">
<button>Example Footer Button</button>
<button>Example Footer Button 2</button>
</div>
</template>
Raw
prompt.js
export class Dialog {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment