diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..c300b031afdfd430cd6d362894663831c7e40f39
--- /dev/null
+++ b/core/css/jquery.ocdialog.css
@@ -0,0 +1,48 @@
+.oc-dialog {
+ background: white;
+ color: #333333;
+ border-radius: 3px; box-shadow: 0 0 7px #888888;
+ padding: 15px;
+ z-index: 1000;
+ font-size: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 200px;
+}
+.oc-dialog-title {
+ background: white;
+ font-weight: bold;
+ font-size: 110%;
+ margin-bottom: 10px;
+}
+.oc-dialog-content {
+ z-index: 1000;
+ background: white;
+}
+.oc-dialog-separator {
+}
+.oc-dialog-buttonrow {
+ background: white;
+ float: right;
+ position: relative;
+ bottom: 0;
+ display: block;
+ margin-top: 10px;
+}
+
+.oc-dialog-close {
+ position:absolute;
+ top:7px; right:7px;
+ height:20px; width:20px;
+ background:url('../img/actions/delete.svg') no-repeat center;
+}
+
+.oc-dialog-dim {
+ background-color: #000;
+ opacity: .20;filter:Alpha(Opacity=20);
+ z-index: 999;
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+}
diff --git a/core/css/styles.css b/core/css/styles.css
index 70a840d68903ce08ece49a46dfbd9348a12c828b..78671a7bc11fccc4eae6c221d561fe3d16de9525 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -391,7 +391,12 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
-#oc-dialog-filepicker-content .filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
+#oc-dialog-filepicker-content .filelist {
+ overflow-y:auto;
+ max-height: 300px;
+ background-color:white;
+ width:100%;
+}
#oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; }
#oc-dialog-filepicker-content .filelist .date { float:right;margin-right:1em; }
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..7413927e3b27064d4331cf041b84e837471cb22e
--- /dev/null
+++ b/core/js/jquery.ocdialog.js
@@ -0,0 +1,217 @@
+(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,
+ 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) {
+ if(event.target !== self.$dialog.get(0) && self.$dialog.find($(event.target)).length === 0) {
+ return;
+ }
+ // Escape
+ if(event.keyCode === 27 && self.options.closeOnEscape) {
+ 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
+ if(self.$buttonrow && self.$buttonrow.find($(event.target)).length === 0) {
+ var $button = self.$buttonrow.find('button.primary');
+ if($button) {
+ $button.trigger('click');
+ }
+ } else if(self.$buttonrow) {
+ $(event.target).trigger('click');
+ }
+ return false;
+ }
+ });
+ $(window).resize(function() {
+ self.parent = self.$dialog.parent().length > 0 ? self.$dialog.parent() : $('body');
+ var pos = self.parent.position();
+ self.$dialog.css({
+ left: pos.left + (self.parent.width() - self.$dialog.outerWidth())/2,
+ top: pos.top + (self.parent.height() - self.$dialog.outerHeight())/2
+ });
+ });
+
+ this._setOptions(this.options);
+ $(window).trigger('resize');
+ this._createOverlay();
+ },
+ _init: function() {
+ this.$dialog.focus();
+ this._trigger('open');
+ },
+ _setOption: function(key, value) {
+ var self = this;
+ switch(key) {
+ case 'title':
+ var $title = $('<h3 class="oc-dialog-title">' + this.options.title
+ + '</h3>'); //<hr class="oc-dialog-separator" />');
+ if(this.$title) {
+ this.$title.replaceWith($title);
+ } else {
+ this.$title = $title.prependTo(this.$dialog);
+ }
+ this._setSizes();
+ break;
+ case 'buttons':
+ var $buttonrow = $('<div class="oc-dialog-buttonrow" />');
+ if(this.$buttonrow) {
+ this.$buttonrow.replaceWith($buttonrow);
+ } else {
+ this.$buttonrow = $buttonrow.appendTo(this.$dialog);
+ }
+ $.each(value, function(idx, val) {
+ var $button = $('<button>').text(val.text);
+ 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 'closeButton':
+ if(value) {
+ var $closeButton = $('<a class="oc-dialog-close svg"></a>');
+ this.$dialog.prepend($closeButton);
+ $closeButton.on('click', function() {
+ self.close();
+ });
+ }
+ 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 content_height = this.$dialog.height();
+ if(this.$title) {
+ content_height -= this.$title.outerHeight(true);
+ }
+ if(this.$buttonrow) {
+ content_height -= this.$buttonrow.outerHeight(true);
+ }
+ this.parent = this.$dialog.parent().length > 0 ? this.$dialog.parent() : $('body');
+ content_height = Math.min(content_height, this.parent.height()-20)
+ this.element.css({
+ height: content_height + 'px',
+ width: this.$dialog.innerWidth()-20 + '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() {
+ return this.$dialog
+ },
+ close: function() {
+ this._destroyOverlay();
+ var self = this;
+ // Ugly hack to catch remaining keyup events.
+ setTimeout(function() {
+ self._trigger('close', self);
+ self.$dialog.hide();
+ }, 200);
+ },
+ destroy: function() {
+ if(this.$title) {
+ this.$title.remove()
+ }
+ if(this.$buttonrow) {
+ 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));
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index e1d3657724e14822eb2431c3667789c7b3db1c56..f4bc174b5ebdc5be5793eabb6b95cfa531600ecf 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -72,7 +72,7 @@ var OCdialogs = {
var dialog_name = 'oc-dialog-filepicker-content';
var dialog_id = '#' + dialog_name;
if(self.$filePicker) {
- self.$filePicker.dialog('close');
+ self.$filePicker.ocdialog('close');
}
self.$filePicker = $tmpl.octemplate({
dialog_name: dialog_name,
@@ -110,26 +110,29 @@ var OCdialogs = {
datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
}
callback(datapath);
- self.$filePicker.dialog('close');
+ self.$filePicker.ocdialog('close');
}
};
var buttonlist = [{
text: t('core', 'Choose'),
- click: functionToCall
+ click: functionToCall,
+ defaultButton: true
},
{
text: t('core', 'Cancel'),
- click: function(){self.$filePicker.dialog('close'); }
+ click: function(){self.$filePicker.ocdialog('close'); }
}];
- self.$filePicker.dialog({
+ self.$filePicker.ocdialog({
closeOnEscape: true,
width: (4/9)*$(document).width(),
height: 420,
modal: modal,
buttons: buttonlist,
close: function(event, ui) {
- self.$filePicker.dialog('destroy').remove();
+ try {
+ $(this).ocdialog('destroy').remove();
+ } catch(e) {}
self.$filePicker = null;
}
});
@@ -161,30 +164,32 @@ var OCdialogs = {
text: t('core', 'Yes'),
click: function(){
if (callback !== undefined) { callback(true) };
- $(dialog_id).dialog('close');
- }
+ $(dialog_id).ocdialog('close');
+ },
+ defaultButton: true
},
{
text: t('core', 'No'),
click: function(){
if (callback !== undefined) { callback(false) };
- $(dialog_id).dialog('close');
+ $(dialog_id).ocdialog('close');
}
}];
break;
case OCdialogs.OK_BUTTON:
var functionToCall = function() {
- $(dialog_id).dialog('close');
+ $(dialog_id).ocdialog('close');
if(callback !== undefined) { callback() };
};
buttonlist[0] = {
text: t('core', 'Ok'),
- click: functionToCall
+ click: functionToCall,
+ defaultButton: true
};
break;
};
- $(dialog_id).dialog({
+ $(dialog_id).ocdialog({
closeOnEscape: true,
modal: modal,
buttons: buttonlist
diff --git a/lib/base.php b/lib/base.php
index 75f93b76627b9fc46f4e7b70212258e85f028d5f..a6e4a47dbf5381dfeba82fa67932d071724c3960 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -265,6 +265,7 @@ class OC {
OC_Util::addScript("jquery.infieldlabel");
OC_Util::addScript("jquery-tipsy");
OC_Util::addScript("compatibility");
+ OC_Util::addScript("jquery.ocdialog");
OC_Util::addScript("oc-dialogs");
OC_Util::addScript("octemplate");
OC_Util::addScript("js");
@@ -278,6 +279,7 @@ class OC {
OC_Util::addStyle("multiselect");
OC_Util::addStyle("jquery-ui-1.10.0.custom");
OC_Util::addStyle("jquery-tipsy");
+ OC_Util::addStyle("jquery.ocdialog");
OC_Util::addScript("oc-requesttoken");
}