nextcloud/core/js/jquery.ocdialog.js

237 lines
5.8 KiB
JavaScript
Raw Normal View History

(function($) {
$.widget('oc.ocdialog', {
options: {
width: 'auto',
height: 'auto',
closeButton: true,
closeOnEscape: true,
modal: false
},
_create: function() {
var self = this;
this.originalCss = {
display: this.element[0].style.display,
width: this.element[0].style.width,
2013-07-31 23:21:02 +04:00
height: this.element[0].style.height
};
this.originalTitle = this.element.attr('title');
this.options.title = this.options.title || this.originalTitle;
this.$dialog = $('<div class="oc-dialog" />')
.attr({
// Setting tabIndex makes the div focusable
tabIndex: -1,
role: 'dialog'
})
.insertBefore(this.element);
this.$dialog.append(this.element.detach());
this.element.removeAttr('title').addClass('oc-dialog-content').appendTo(this.$dialog);
this.$dialog.css({
display: 'inline-block',
position: 'fixed'
});
$(document).on('keydown keyup', function(event) {
2014-03-01 05:46:27 +04:00
if (
event.target !== self.$dialog.get(0) &&
self.$dialog.find($(event.target)).length === 0
) {
return;
}
// Escape
2014-03-01 05:46:27 +04:00
if (
event.keyCode === 27 &&
event.type === 'keydown' &&
self.options.closeOnEscape
) {
2013-09-11 19:13:39 +04:00
event.stopImmediatePropagation();
self.close();
return false;
}
// Enter
if(event.keyCode === 13) {
event.stopImmediatePropagation();
if(event.type === 'keyup') {
event.preventDefault();
return false;
}
// If no button is selected we trigger the primary
2014-03-01 05:46:27 +04:00
if (
self.$buttonrow &&
self.$buttonrow.find($(event.target)).length === 0
) {
var $button = self.$buttonrow.find('button.primary');
if($button && !$button.prop('disabled')) {
$button.trigger('click');
}
} else if(self.$buttonrow) {
$(event.target).trigger('click');
}
return false;
}
});
this._setOptions(this.options);
this._createOverlay();
},
_init: function() {
this.$dialog.focus();
this._trigger('open');
},
_setOption: function(key, value) {
var self = this;
switch(key) {
case 'title':
if(this.$title) {
this.$title.text(value);
} else {
var $title = $('<h2 class="oc-dialog-title">'
+ value
+ '</h2>');
this.$title = $title.prependTo(this.$dialog);
}
this._setSizes();
break;
case 'buttons':
if(this.$buttonrow) {
this.$buttonrow.empty();
} else {
var $buttonrow = $('<div class="oc-dialog-buttonrow" />');
this.$buttonrow = $buttonrow.appendTo(this.$dialog);
}
if (value.length === 1) {
this.$buttonrow.addClass('onebutton');
} else if (value.length === 2) {
this.$buttonrow.addClass('twobuttons');
} else if (value.length === 3) {
this.$buttonrow.addClass('threebuttons');
}
$.each(value, function(idx, val) {
var $button = $('<button>').text(val.text);
2013-09-18 19:13:07 +04:00
if (val.classes) {
$button.addClass(val.classes);
}
if(val.defaultButton) {
$button.addClass('primary');
self.$defaultButton = $button;
}
self.$buttonrow.append($button);
$button.click(function() {
val.click.apply(self.element[0], arguments);
});
});
this.$buttonrow.find('button')
.on('focus', function(event) {
self.$buttonrow.find('button').removeClass('primary');
$(this).addClass('primary');
});
this._setSizes();
break;
case 'style':
if (value.buttons !== undefined) {
this.$buttonrow.addClass(value.buttons);
}
break;
case 'closeButton':
if(value) {
2016-06-23 14:39:28 +03:00
var $closeButton = $('<a class="oc-dialog-close"></a>');
this.$dialog.prepend($closeButton);
$closeButton.on('click', function() {
self.close();
});
} else {
this.$dialog.find('.oc-dialog-close').remove();
}
break;
case 'width':
this.$dialog.css('width', value);
break;
case 'height':
this.$dialog.css('height', value);
break;
case 'close':
this.closeCB = value;
break;
}
//this._super(key, value);
$.Widget.prototype._setOption.apply(this, arguments );
},
_setOptions: function(options) {
//this._super(options);
$.Widget.prototype._setOptions.apply(this, arguments);
},
_setSizes: function() {
var lessHeight = 0;
if(this.$title) {
lessHeight += this.$title.outerHeight(true);
}
if(this.$buttonrow) {
lessHeight += this.$buttonrow.outerHeight(true);
}
this.element.css({
'height': 'calc(100% - ' + lessHeight + 'px)'
});
},
_createOverlay: function() {
if(!this.options.modal) {
return;
}
var self = this;
this.overlay = $('<div>')
.addClass('oc-dialog-dim')
.appendTo($('#content'));
this.overlay.on('click keydown keyup', function(event) {
if(event.target !== self.$dialog.get(0) && self.$dialog.find($(event.target)).length === 0) {
event.preventDefault();
event.stopPropagation();
return;
}
});
},
_destroyOverlay: function() {
if (!this.options.modal) {
return;
}
if (this.overlay) {
this.overlay.off('click keydown keyup');
this.overlay.remove();
this.overlay = null;
}
},
widget: function() {
2013-07-31 23:21:02 +04:00
return this.$dialog;
},
close: function() {
this._destroyOverlay();
var self = this;
// Ugly hack to catch remaining keyup events.
setTimeout(function() {
self._trigger('close', self);
}, 200);
self.$dialog.remove();
this.destroy();
},
destroy: function() {
if(this.$title) {
2013-07-31 23:21:02 +04:00
this.$title.remove();
}
if(this.$buttonrow) {
2013-07-31 23:21:02 +04:00
this.$buttonrow.remove();
}
if(this.originalTitle) {
this.element.attr('title', this.originalTitle);
}
this.element.removeClass('oc-dialog-content')
.css(this.originalCss).detach().insertBefore(this.$dialog);
this.$dialog.remove();
}
});
}(jQuery));