76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
|
import {module} from '../module';
|
||
|
|
require('./style.css');
|
||
|
|
|
||
|
|
directive.$inject = ['vnDialog'];
|
||
|
|
export function directive(dialog) {
|
||
|
|
return {
|
||
|
|
restrict: 'A',
|
||
|
|
link: function($scope, $element, $attrs, $ctrl) {
|
||
|
|
$element.on('click', function(event) {
|
||
|
|
dialog.showComponent($attrs.vnDialog, $scope);
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.directive('vnDialog', directive);
|
||
|
|
|
||
|
|
factory.$inject = ['$document', '$compile'];
|
||
|
|
export function factory($document, $compile) {
|
||
|
|
return {
|
||
|
|
show: function(childElement) {
|
||
|
|
let background = $document[0].createElement('div');
|
||
|
|
background.className = 'vn-background';
|
||
|
|
background.addEventListener('mousedown',
|
||
|
|
this.onBackgroundMouseDown.bind(this));
|
||
|
|
this.background = background;
|
||
|
|
|
||
|
|
let dialog = $document[0].createElement('div');
|
||
|
|
dialog.className = 'vn-dialog';
|
||
|
|
dialog.addEventListener('mousedown',
|
||
|
|
this.onDialogMouseDown.bind(this));
|
||
|
|
dialog.appendChild (childElement);
|
||
|
|
background.appendChild (dialog);
|
||
|
|
this.dialog = dialog;
|
||
|
|
|
||
|
|
let style = this.dialog.style;
|
||
|
|
let screenMargin = 20;
|
||
|
|
|
||
|
|
let width = dialog.offsetWidth;
|
||
|
|
let height = dialog.offsetHeight;
|
||
|
|
let innerWidth = window.innerWidth;
|
||
|
|
let innerHeight = window.innerHeight;
|
||
|
|
|
||
|
|
if(width + screenMargin > innerWidth) {
|
||
|
|
width = innerWidth - dblMargin;
|
||
|
|
style.width = width +'px';
|
||
|
|
}
|
||
|
|
if(height + screenMargin > innerHeight) {
|
||
|
|
height = innerHeight - dblMargin;
|
||
|
|
style.height = height +'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
$document[0].body.appendChild (background);
|
||
|
|
},
|
||
|
|
showComponent: function(childComponent, $scope) {
|
||
|
|
let childElement = $document[0].createElement(childComponent);
|
||
|
|
$compile(childElement)($scope);
|
||
|
|
this.show(childElement);
|
||
|
|
},
|
||
|
|
hide: function() {
|
||
|
|
$document[0].body.removeChild (this.background);
|
||
|
|
this.background = null;
|
||
|
|
this.dialog = null;
|
||
|
|
this.lastEvent = null;
|
||
|
|
},
|
||
|
|
onDialogMouseDown: function(event) {
|
||
|
|
this.lastEvent = event;
|
||
|
|
},
|
||
|
|
onBackgroundMouseDown: function(event) {
|
||
|
|
if (event != this.lastEvent)
|
||
|
|
this.hide();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
module.factory('vnDialog', factory);
|