]> source.dussan.org Git - nextcloud-server.git/commitdiff
Replacement for jquery.dialog to fit better with ownCloud design.
authorThomas Tanghus <thomas@tanghus.net>
Sun, 2 Jun 2013 19:52:59 +0000 (21:52 +0200)
committerThomas Tanghus <thomas@tanghus.net>
Sun, 2 Jun 2013 19:52:59 +0000 (21:52 +0200)
core/css/jquery.ocdialog.css [new file with mode: 0644]
core/css/styles.css
core/js/jquery.ocdialog.js [new file with mode: 0644]
core/js/oc-dialogs.js
lib/base.php

diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
new file mode 100644 (file)
index 0000000..6342780
--- /dev/null
@@ -0,0 +1,49 @@
+.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;
+       overflow-y: auto;
+}
+.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%;
+}
index 70a840d68903ce08ece49a46dfbd9348a12c828b..08a277a4ea84a0013e45f4b853680b05f93df9b2 100644 (file)
@@ -391,7 +391,11 @@ 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;
+       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 (file)
index 0000000..7413927
--- /dev/null
@@ -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));
index e1d3657724e14822eb2431c3667789c7b3db1c56..a6a9e7e57e248ee8913d20b45da77f6225c9ce82 100644 (file)
@@ -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,7 +110,7 @@ var OCdialogs = {
                                                datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
                                        }
                                        callback(datapath);
-                                       self.$filePicker.dialog('close');
+                                       self.$filePicker.ocdialog('close');
                                }
                        };
                        var buttonlist = [{
@@ -119,17 +119,17 @@ var OCdialogs = {
                                },
                                {
                                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();
+                                       self.$filePicker.ocdialog('destroy').remove();
                                        self.$filePicker = null;
                                }
                        });
@@ -161,20 +161,20 @@ var OCdialogs = {
                                                text: t('core', 'Yes'),
                                                click: function(){
                                                        if (callback !== undefined) { callback(true) };
-                                                       $(dialog_id).dialog('close');
+                                                       $(dialog_id).ocdialog('close');
                                                }
                                        },
                                        {
                                                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] = {
@@ -184,7 +184,7 @@ var OCdialogs = {
                                break;
                        };
 
-                       $(dialog_id).dialog({
+                       $(dialog_id).ocdialog({
                                closeOnEscape: true,
                                modal: modal,
                                buttons: buttonlist
index 9d1d4b5e0587b20b4dd7eed6cba312cbc5422147..ece29f8320732fcb42d3416573ea0e06deb344a4 100644 (file)
@@ -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");
        }