├── .travis.yml ├── .gitattributes ├── package.json ├── Gruntfile.coffee ├── LICENSE.md ├── dialogextend.jquery.json ├── CHANGELOG.md ├── .gitignore ├── src ├── modules │ ├── jquery.dialogextend.collapse.coffee │ ├── jquery.dialogextend.minimize.coffee │ └── jquery.dialogextend.maximize.coffee └── jquery.dialogextend.coffee ├── README.md └── example.html /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.10 4 | before_install: 5 | - travis_retry npm install grunt-cli -g 6 | - travis_retry npm install -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-dialogextend", 3 | "title": "jQuery dialogExtend", 4 | "description": "Maximize and Minimize Buttons for UI Dialog", 5 | "version": "2.0.4", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/ROMB/jquery-dialogextend.git" 9 | }, 10 | "licenses": [ 11 | { 12 | "type": "MIT", 13 | "url": "https://github.com/ROMB/jquery-dialogextend/blob/2.0.0/LICENSE.md" 14 | } 15 | ], 16 | "dependencies": {}, 17 | "devDependencies": { 18 | "grunt": "0.4.1", 19 | "grunt-contrib-uglify": "0.2.0", 20 | "grunt-contrib-coffee": "0.7.0" 21 | }, 22 | "scripts": { 23 | "test": "grunt --verbose" 24 | } 25 | } -------------------------------------------------------------------------------- /Gruntfile.coffee: -------------------------------------------------------------------------------- 1 | module.exports = (grunt) -> 2 | grunt.initConfig 3 | pkg: grunt.file.readJSON('package.json') 4 | uglify: 5 | options: 6 | banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 7 | build: 8 | src: 'build/jquery.dialogextend.js', 9 | dest: 'build/jquery.dialogextend.min.js' 10 | coffee: 11 | compile: 12 | files: 13 | 'build/jquery.dialogextend.js':['src/jquery.dialogextend.coffee','src/modules/*.coffee'] 14 | 15 | grunt.loadNpmTasks 'grunt-contrib-uglify' 16 | grunt.loadNpmTasks 'grunt-contrib-coffee' 17 | grunt.registerTask 'default', ['coffee','uglify'] -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ### The MIT License 2 | 3 | Copyright (c) 2013 Crab, ROMB 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /dialogextend.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dialogextend", 3 | "title": "jQuery DialogExtend", 4 | "description": "Maximize and Minimize Buttons for UI Dialog.", 5 | "keywords": [ 6 | "dialog", 7 | "minimize", 8 | "maximize", 9 | "collapse", 10 | "extend" 11 | ], 12 | "version": "2.0.4", 13 | "author": { 14 | "name": "ROMB", 15 | "url": "https://github.com/ROMB" 16 | }, 17 | "maintainers": [ 18 | { 19 | "name": "ROMB", 20 | "url": "https://github.com/ROMB" 21 | } 22 | ], 23 | "licenses": [ 24 | { 25 | "type": "MIT", 26 | "url": "https://github.com/ROMB/jquery-dialogextend/blob/master/LICENSE.md" 27 | } 28 | ], 29 | "bugs": "https://github.com/ROMB/jquery-dialogextend/issues", 30 | "homepage": "http://romb.github.io/jquery-dialogextend/", 31 | "docs": "http://romb.github.io/jquery-dialogextend/", 32 | "download": "https://github.com/ROMB/jquery-dialogextend", 33 | "demo": "http://romb.github.io/jquery-dialogextend/example.html", 34 | "dependencies": { 35 | "jquery": "~1.11.1", 36 | "jquery-ui": "~1.11.0" 37 | } 38 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2.0.4 /2014-07-08 2 | === 3 | 4 | - fix bug: iframe reset after minimization 5 | - fix bug: forgot to restore state to normal before minimization 6 | - fix bug: dialog lose focus after restore 7 | - fix bug: invalid dialog position on collapse 8 | - enhancement: added tooltips to title buttons 9 | - update to jquery 1.11.1 and jquery.ui 1.11.0 10 | 11 | 2.0.3 /2013-11-10 12 | === 13 | 14 | - fix bug: order of titlebar buttons 15 | - fix bug: restore from collapse 16 | 17 | 2.0.2 /2013-05-01 18 | === 19 | 20 | - published on jquery plugins 21 | 22 | 2.0.1 / 2013-04-26 23 | === 24 | 25 | - fix bug : wrong restore size 26 | - fix bug : wrong restore position on long and/or wide pages 27 | - fix bug : can't reopen dialog after closing it minimized 28 | - fix bug : broken style on reopen dialog after closing it collapsed 29 | - many internal fixes 30 | 31 | 2.0.0 / 2013-04-25 32 | === 33 | 34 | - make plugin be more modular 35 | - now jquery.ui plugin 36 | 37 | 1.0.2 / 2013-04-24 38 | === 39 | 40 | - make plugin be compatible with jquery 1.9.1 and jquery-ui 1.10.2 41 | 42 | 1.0.1 / 2012-08-04 / hin 43 | === 44 | 45 | - make plugin be compatible with jquery 1.7.2 and jquery-ui 1.8.22 46 | - new : add option to hide 'close' button and control its icon 47 | - new : add function 'getState' to retrieve current status of extended dialog 48 | - fix bug : disable resize when dialog is collapsed 49 | - fix bug : make minimized dialog on-top of overlay 50 | - fix bug : use {position:absolute} instead of {position:fixed} on IE6 51 | - fix bug : buttons will not disappear anymore 52 | - fix bug : avoid title overlapping buttons when dialog minimized 53 | - fix bug : no more exception when invoke restore method at normal state 54 | - fix bug : open dialog => min => max => restore => resize => dialog disappear 55 | - ===> restore from min (w/o trigger event) before go to max 56 | - ===> dialog will not disappear anymore 57 | - fix bug : open dialog => max => restore => wrong position (always at upper-left-hand corner) 58 | - ===> restore position after restore dialog size 59 | - ===> dialog appear in correct position now 60 | 61 | 62 | 63 | 1.0 / 2010-01-05 / hin 64 | === 65 | 66 | - fix bug of button-pane in 'minimized' state 67 | - fix bug of title-bar word-wrap in 'minimized' state 68 | - apply as init option for enhancing title-bar feature 69 | - apply as init option for enhancing double-click feature 70 | 71 | 72 | 73 | 0.9.2 / 2010-12-16 / hin 74 | === 75 | 76 | - fix bug of not firing event 77 | - apply as init option for defining event-callback 78 | 79 | 0.9.1 / 2010-11-16 / hin 80 | === 81 | 82 | - fix bug of zero-config 83 | 84 | 85 | 86 | 0.9 / 2010-11-04 / hin 87 | === 88 | 89 | - creation of plugin 90 | 91 | 92 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | [Dd]ebug/ 46 | [Rr]elease/ 47 | *_i.c 48 | *_p.c 49 | *.ilk 50 | *.meta 51 | *.obj 52 | *.pch 53 | *.pdb 54 | *.pgc 55 | *.pgd 56 | *.rsp 57 | *.sbr 58 | *.tlb 59 | *.tli 60 | *.tlh 61 | *.tmp 62 | *.vspscc 63 | .builds 64 | *.dotCover 65 | 66 | ## TODO: If you have NuGet Package Restore enabled, uncomment this 67 | #packages/ 68 | 69 | # Visual C++ cache files 70 | ipch/ 71 | *.aps 72 | *.ncb 73 | *.opensdf 74 | *.sdf 75 | 76 | # Visual Studio profiler 77 | *.psess 78 | *.vsp 79 | 80 | # ReSharper is a .NET coding add-in 81 | _ReSharper* 82 | 83 | # Installshield output folder 84 | [Ee]xpress 85 | 86 | # DocProject is a documentation generator add-in 87 | DocProject/buildhelp/ 88 | DocProject/Help/*.HxT 89 | DocProject/Help/*.HxC 90 | DocProject/Help/*.hhc 91 | DocProject/Help/*.hhk 92 | DocProject/Help/*.hhp 93 | DocProject/Help/Html2 94 | DocProject/Help/html 95 | 96 | # Click-Once directory 97 | publish 98 | 99 | # Others 100 | [Bb]in 101 | [Oo]bj 102 | sql 103 | TestResults 104 | *.Cache 105 | ClientBin 106 | stylecop.* 107 | ~$* 108 | *.dbmdl 109 | Generated_Code #added for RIA/Silverlight projects 110 | 111 | # Backup & report files from converting an old project file to a newer 112 | # Visual Studio version. Backup files are not needed, because we have git ;-) 113 | _UpgradeReport_Files/ 114 | Backup*/ 115 | UpgradeLog*.XML 116 | 117 | 118 | 119 | ############ 120 | ## Windows 121 | ############ 122 | 123 | # Windows image file caches 124 | Thumbs.db 125 | 126 | # Folder config file 127 | Desktop.ini 128 | 129 | 130 | ############# 131 | ## Python 132 | ############# 133 | 134 | *.py[co] 135 | 136 | # Packages 137 | *.egg 138 | *.egg-info 139 | dist 140 | eggs 141 | parts 142 | bin 143 | var 144 | sdist 145 | develop-eggs 146 | .installed.cfg 147 | 148 | # Installer logs 149 | pip-log.txt 150 | 151 | # Unit test / coverage reports 152 | .coverage 153 | .tox 154 | 155 | #Translations 156 | *.mo 157 | 158 | #Mr Developer 159 | .mr.developer.cfg 160 | 161 | # Mac crap 162 | .DS_Store 163 | 164 | ############# 165 | ## Node.JS 166 | ############# 167 | 168 | node_modules -------------------------------------------------------------------------------- /src/modules/jquery.dialogextend.collapse.coffee: -------------------------------------------------------------------------------- 1 | $ = jQuery 2 | 3 | $.extend true,$.ui.dialogExtend.prototype, 4 | modes: 5 | "collapse": 6 | option:"collapsable" 7 | state:"collapsed" 8 | options: 9 | "collapsable" : false 10 | "icons" : 11 | "collapse": "ui-icon-triangle-1-s" 12 | # callbacks 13 | "beforeCollapse" : null 14 | "collapse" : null 15 | 16 | collapse:()-> 17 | newHeight = $(@element[0]).dialog("widget").find(".ui-dialog-titlebar").height()+15; 18 | # start! 19 | # trigger custom event 20 | @_trigger "beforeCollapse" 21 | # restore to normal state first (when necessary) 22 | unless @_state is "normal" 23 | @_restore() 24 | # remember original state 25 | @_saveSnapshot() 26 | pos = $(@element[0]).dialog("widget").position() 27 | $(@element[0]) 28 | # modify dialog size (after hiding content) 29 | .dialog("option", 30 | "resizable" : false 31 | "height" : newHeight 32 | "maxHeight" : newHeight 33 | "position" : [pos.left - $(document).scrollLeft(),pos.top - $(document).scrollTop()] 34 | ) 35 | .on('dialogclose',@_collapse_restore) 36 | # hide content 37 | # hide button-pane 38 | # make title-bar no-wrap 39 | .hide() 40 | .dialog("widget") 41 | .find(".ui-dialog-buttonpane:visible").hide().end() 42 | .find(".ui-dialog-titlebar").css("white-space", "nowrap").end() 43 | .find(".ui-dialog-content") 44 | # mark new state 45 | @_setState "collapsed" 46 | # modify dialog buttons according to new state 47 | @_toggleButtons() 48 | # trigger custom event 49 | @_trigger "collapse" 50 | 51 | _restore_collapsed:()-> 52 | original = @_loadSnapshot() 53 | # restore dialog 54 | $(@element[0]) 55 | # show content 56 | # show button-pane 57 | # fix title-bar wrap 58 | .show() 59 | .dialog("widget") 60 | .find(".ui-dialog-buttonpane:hidden").show().end() 61 | .find(".ui-dialog-titlebar").css("white-space", original.titlebar.wrap).end() 62 | .find(".ui-dialog-content") 63 | # restore config & size 64 | .dialog("option", 65 | "resizable" : original.config.resizable 66 | "height" : original.size.height 67 | "maxHeight" : original.size.maxHeight 68 | ) 69 | .off('dialogclose',@_collapse_restore) 70 | 71 | _initStyles_collapse:()-> 72 | if not $(".dialog-extend-collapse-css").length 73 | style = '' 74 | style += '' 80 | $(style).appendTo("body") 81 | 82 | _collapse_restore:()-> 83 | $(@).dialogExtend("restore") 84 | -------------------------------------------------------------------------------- /src/modules/jquery.dialogextend.minimize.coffee: -------------------------------------------------------------------------------- 1 | $ = jQuery 2 | 3 | $.extend true,$.ui.dialogExtend.prototype, 4 | modes: 5 | "minimize": 6 | option:"minimizable" 7 | state:"minimized" 8 | options: 9 | "minimizable" : false 10 | "minimizeLocation" : "left" 11 | "icons" : 12 | "minimize" : "ui-icon-minus" 13 | # callback 14 | "beforeMinimize" : null 15 | "minimize" : null 16 | 17 | minimize:()-> 18 | # trigger custom event 19 | @_trigger "beforeMinimize" 20 | unless @_state is "normal" 21 | @_restore() 22 | # caculate new dimension 23 | newWidth = 200 24 | # create container for (multiple) minimized dialogs (when necessary) 25 | if $("#dialog-extend-fixed-container").length 26 | fixedContainer = $("#dialog-extend-fixed-container") 27 | else 28 | fixedContainer = $('
').appendTo("body") 29 | fixedContainer.css 30 | "position" : "fixed" 31 | "bottom" : 1 32 | "left" : 1 33 | "right" : 1 34 | "z-index" : 9999 35 | # prepare dialog buttons for new state 36 | @_toggleButtons("minimized") 37 | dialogcontrols = $(@element[0]).dialog("widget").clone().children().remove().end() 38 | $(@element[0]).dialog("widget").find('.ui-dialog-titlebar').clone(true,true).appendTo(dialogcontrols) 39 | dialogcontrols.css 40 | # float is essential for stacking dialog when there are many many minimized dialogs 41 | "float" : @options.minimizeLocation, 42 | "margin" : 1 43 | fixedContainer.append(dialogcontrols) 44 | $(@element[0]).data("dialog-extend-minimize-controls",dialogcontrols) 45 | # disable draggable-handle (for only) 46 | if $(@element[0]).dialog("option","draggable") 47 | dialogcontrols.removeClass("ui-draggable") 48 | # modify dialogcontrols 49 | dialogcontrols.css 50 | "height": "auto" 51 | "width": newWidth 52 | "position": "static" 53 | # restore dialog before close 54 | $(@element[0]).on('dialogbeforeclose',@_minimize_restoreOnClose) 55 | # hide original dialog 56 | .dialog("widget").hide() 57 | # mark new state 58 | @_setState "minimized" 59 | # trigger custom event 60 | @_trigger "minimize" 61 | 62 | _restore_minimized:()-> 63 | # restore dialog 64 | $(@element[0]).dialog("widget").show() 65 | # disable close handler 66 | $(@element[0]).off('dialogbeforeclose',@_minimize_restoreOnClose) 67 | # remove dialogcontrols 68 | $(@element[0]).data("dialog-extend-minimize-controls").remove() 69 | $(@element[0]).removeData("dialog-extend-minimize-controls") 70 | 71 | _initStyles_minimize:()-> 72 | if not $(".dialog-extend-minimize-css").length 73 | style = '' 74 | style += '' 80 | $(style).appendTo("body") 81 | 82 | _verifyOptions_minimize:()-> 83 | if not @options.minimizeLocation or @options.minimizeLocation not in ['left','right'] 84 | $.error( "jQuery.dialogExtend Error : Invalid value '" + @options.minimizeLocation + "'" ) 85 | @options.minimizeLocation = "left" 86 | 87 | _minimize_restoreOnClose:()-> 88 | $(@).dialogExtend("restore") 89 | -------------------------------------------------------------------------------- /src/modules/jquery.dialogextend.maximize.coffee: -------------------------------------------------------------------------------- 1 | $ = jQuery 2 | 3 | $.extend true,$.ui.dialogExtend.prototype, 4 | modes: 5 | "maximize": 6 | option:"maximizable" 7 | state:"maximized" 8 | options: 9 | "maximizable" : false 10 | "icons" : 11 | "maximize" : "ui-icon-extlink" 12 | # callbacks 13 | "beforeMaximize" : null 14 | "maximize" : null 15 | 16 | maximize:()-> 17 | newHeight = $(window).height()-11; 18 | newWidth = $(window).width()-11; 19 | # start! 20 | # trigger custom event 21 | @_trigger "beforeMaximize" 22 | # restore to normal state first (when necessary) 23 | unless @_state is "normal" 24 | @_restore() 25 | # remember original state 26 | @_saveSnapshot() 27 | # disable draggable-handle (for only) 28 | if $(@element[0]).dialog("option","draggable") 29 | $(@element[0]) 30 | .dialog("widget") 31 | .draggable("option", "handle", null) 32 | .find(".ui-dialog-draggable-handle").css("cursor", "text").end() 33 | $(@element[0]) 34 | # fix dialog from scrolling 35 | .dialog("widget") 36 | .css("position", "fixed") 37 | .find(".ui-dialog-content") 38 | # show content 39 | # show button-pane (when minimized/collapsed) 40 | .show() 41 | .dialog("widget") 42 | .find(".ui-dialog-buttonpane").show().end() 43 | .find(".ui-dialog-content") 44 | # modify dialog with new config 45 | .dialog("option", 46 | "resizable" : false 47 | "draggable" : false 48 | "height" : newHeight 49 | "width" : newWidth 50 | "position" : 51 | my: "left top" 52 | at: "left top" 53 | of: window 54 | ) 55 | # mark new state 56 | @_setState "maximized" 57 | # modify dialog buttons according to new state 58 | @_toggleButtons() 59 | # trigger custom event 60 | @_trigger "maximize" 61 | _restore_maximized:()-> 62 | original = @_loadSnapshot() 63 | # restore dialog 64 | $(@element[0]) 65 | # free dialog from scrolling 66 | # fix title-bar wrap (if dialog was minimized/collapsed) 67 | .dialog("widget") 68 | .css("position", original.position.mode) 69 | .find(".ui-dialog-titlebar").css("white-space", original.titlebar.wrap).end() 70 | .find(".ui-dialog-content") 71 | # restore config & size 72 | .dialog("option", 73 | "resizable" : original.config.resizable 74 | "draggable" : original.config.draggable 75 | "height" : original.size.height 76 | "width" : original.size.width 77 | "maxHeight" : original.size.maxHeight 78 | "position" : 79 | my: "left top" 80 | at: "left+"+original.position.left+" top+"+original.position.top 81 | of: window 82 | ) 83 | # restore draggable-handle (for only) 84 | if $(@element[0]).dialog("option","draggable") 85 | $(@element[0]) 86 | .dialog("widget") 87 | .draggable("option", "handle", if $(@element[0]).dialog("widget").find(".ui-dialog-draggable-handle").length then $(@element[0]).dialog("widget").find(".ui-dialog-draggable-handle") else".ui-dialog-titlebar") 88 | .find(".ui-dialog-draggable-handle") 89 | .css("cursor", "move"); 90 | 91 | _initStyles_maximize:()-> 92 | if not $(".dialog-extend-maximize-css").length 93 | style = '' 94 | style += '' 100 | $(style).appendTo("body") -------------------------------------------------------------------------------- /src/jquery.dialogextend.coffee: -------------------------------------------------------------------------------- 1 | $ = jQuery 2 | 3 | $.widget "ui.dialogExtend", 4 | version: "2.0.0" 5 | 6 | modes:{} 7 | options: 8 | "closable" : true 9 | "dblclick" : false 10 | "titlebar" : false 11 | "icons" : 12 | "close" : "ui-icon-closethick" 13 | "restore" : "ui-icon-newwin" 14 | # callbacks 15 | "load" : null 16 | "beforeRestore" : null 17 | "restore" : null 18 | 19 | _create: ()-> 20 | @_state = "normal" 21 | if not $(@element[0]).data "ui-dialog" 22 | $.error "jQuery.dialogExtend Error : Only jQuery UI Dialog element is accepted" 23 | @_verifyOptions() 24 | @_initStyles() 25 | @_initButtons() 26 | @_initTitleBar() 27 | @_setState "normal" 28 | @_on "load",(e)-> 29 | console.log "test",e 30 | @_trigger "load" 31 | 32 | _setState: (state)-> 33 | $(@element[0]) 34 | .removeClass("ui-dialog-"+@_state) 35 | .addClass("ui-dialog-"+state) 36 | @_state = state 37 | 38 | _verifyOptions: ()-> 39 | # check option 40 | if @options.dblclick and @options.dblclick not of @modes 41 | $.error "jQuery.dialogExtend Error : Invalid value '" + @options.dblclick + "'" 42 | @options.dblclick = false 43 | # check option 44 | if @options.titlebar and @options.titlebar not in ["none","transparent"] 45 | $.error "jQuery.dialogExtend Error : Invalid value '" + @options.titlebar + "'" 46 | @options.titlebar = false; 47 | # check modules options 48 | for name of @modes 49 | if @["_verifyOptions_"+name] then @["_verifyOptions_"+name]() 50 | 51 | _initStyles:()-> 52 | if not $(".dialog-extend-css").length 53 | style = '' 54 | style += '' 62 | $(style).appendTo("body") 63 | for name of @modes 64 | @["_initStyles_"+name]() 65 | 66 | _initButtons:()-> 67 | # start operation on titlebar 68 | titlebar = $(@element[0]).dialog("widget").find ".ui-dialog-titlebar" 69 | # create container for buttons 70 | buttonPane = $('
').appendTo titlebar 71 | buttonPane.css 72 | "position" : "absolute" 73 | "top" : "50%" 74 | "right" : "0.3em" 75 | "margin-top" : "-10px" 76 | "height" : "18px" 77 | # move 'close' button to button-pane 78 | titlebar 79 | .find(".ui-dialog-titlebar-close") 80 | # override some unwanted jquery-ui styles 81 | .css 82 | "position" : "relative" 83 | "float" : "right" 84 | "top" : "auto" 85 | "right" : "auto" 86 | "margin" : 0 87 | # change icon 88 | .find(".ui-icon").removeClass("ui-icon-closethick").addClass(@options.icons.close).end() 89 | # move to button-pane 90 | .appendTo(buttonPane) 91 | .end() 92 | # append restore button to button-pane 93 | buttonPane 94 | .append('restore') 95 | # add effect to button 96 | .find('.ui-dialog-titlebar-restore') 97 | .attr("role", "button") 98 | .mouseover(()-> $(@).addClass("ui-state-hover")) 99 | .mouseout(()-> $(@).removeClass("ui-state-hover")) 100 | .focus(()-> $(@).addClass("ui-state-focus")) 101 | .blur(()-> $(@).removeClass("ui-state-focus")) 102 | .end() 103 | # default show buttons 104 | # set button positions 105 | # on-click-button 106 | .find(".ui-dialog-titlebar-close") 107 | .toggle(@options.closable) 108 | .end() 109 | .find(".ui-dialog-titlebar-restore") 110 | .hide() 111 | .click((e)=> 112 | e.preventDefault() 113 | @restore() 114 | ) 115 | .end(); 116 | # add buttons from modules 117 | for name,mode of @modes 118 | @_initModuleButton name,mode 119 | 120 | # other titlebar behaviors 121 | titlebar 122 | # on-dblclick-titlebar 123 | .dblclick((evt)=> 124 | if @options.dblclick 125 | if @_state != "normal" 126 | @restore() 127 | else 128 | @[@options.dblclick]() 129 | ) 130 | # avoid text-highlight when double-click 131 | .select(()-> 132 | return false 133 | ) 134 | 135 | _initModuleButton:(name,mode)-> 136 | buttonPane = $(@element[0]).dialog("widget").find '.ui-dialog-titlebar-buttonpane' 137 | buttonPane.append(''+name+'') 138 | .find(".ui-dialog-titlebar-"+name) 139 | .attr("role", "button") 140 | .mouseover(()-> $(@).addClass("ui-state-hover")) 141 | .mouseout(()-> $(@).removeClass("ui-state-hover")) 142 | .focus(()-> $(@).addClass("ui-state-focus")) 143 | .blur(()-> $(@).removeClass("ui-state-focus")) 144 | .end() 145 | .find(".ui-dialog-titlebar-"+name) 146 | .toggle(@options[mode.option]) 147 | .click((e)=> 148 | e.preventDefault() 149 | @[name]() 150 | ) 151 | .end() 152 | 153 | _initTitleBar:()-> 154 | switch @options.titlebar 155 | when false then 0 156 | when "none" 157 | # create new draggable-handle as substitute of title bar 158 | if $(@element[0]).dialog("option", "draggable") 159 | handle = $("
").addClass("ui-dialog-draggable-handle").css("cursor", "move").height(5) 160 | $(@element[0]).dialog("widget").prepend(handle).draggable("option", "handle", handle); 161 | # remove title bar and keep it draggable 162 | $(@element[0]) 163 | .dialog("widget") 164 | .find(".ui-dialog-titlebar") 165 | # clear title text 166 | .find(".ui-dialog-title").html(" ").end() 167 | # keep buttons at upper-right-hand corner 168 | .css( 169 | "background-color" : "transparent" 170 | "background-image" : "none" 171 | "border" : 0 172 | "position" : "absolute" 173 | "right" : 0 174 | "top" : 0 175 | "z-index" : 9999 176 | ) 177 | .end(); 178 | when "transparent" 179 | # remove title style 180 | $(@element[0]) 181 | .dialog("widget") 182 | .find(".ui-dialog-titlebar") 183 | .css( 184 | "background-color" : "transparent" 185 | "background-image" : "none" 186 | "border" : 0 187 | ) 188 | else 189 | $.error( "jQuery.dialogExtend Error : Invalid value '" + @options.titlebar + "'" ); 190 | 191 | state:()-> 192 | return @_state 193 | 194 | restore:()-> 195 | # trigger custom event 196 | @_trigger "beforeRestore" 197 | @_restore() 198 | # modify dialog buttons according to new state 199 | @_toggleButtons() 200 | # trigger custom event 201 | @_trigger "restore" 202 | 203 | _restore:()-> 204 | unless @_state is "normal" 205 | @["_restore_"+@_state]() 206 | # mark new state 207 | @_setState "normal" 208 | # return focus to window 209 | $(@element[0]).dialog("widget").focus() 210 | 211 | _saveSnapshot:()-> 212 | if @_state is "normal" 213 | @original_config_resizable = $(@element[0]).dialog("option", "resizable") 214 | @original_config_draggable = $(@element[0]).dialog("option", "draggable") 215 | @original_size_height = $(@element[0]).dialog("widget").outerHeight() 216 | @original_size_width = $(@element[0]).dialog("option", "width") 217 | @original_size_maxHeight = $(@element[0]).dialog("option", "maxHeight") 218 | @original_position_mode = $(@element[0]).dialog("widget").css("position") 219 | @original_position_left = $(@element[0]).dialog("widget").offset().left-$('body').scrollLeft() 220 | @original_position_top = $(@element[0]).dialog("widget").offset().top-$('body').scrollTop() 221 | @original_titlebar_wrap = $(@element[0]).dialog("widget").find(".ui-dialog-titlebar").css("white-space") 222 | 223 | _loadSnapshot:()-> 224 | { 225 | "config" : 226 | "resizable" : @original_config_resizable 227 | "draggable" : @original_config_draggable 228 | "size" : 229 | "height" : @original_size_height 230 | "width" : @original_size_width 231 | "maxHeight" : @original_size_maxHeight 232 | "position" : 233 | "mode" : @original_position_mode 234 | "left" : @original_position_left 235 | "top" : @original_position_top 236 | "titlebar" : 237 | "wrap" : @original_titlebar_wrap 238 | } 239 | 240 | _toggleButtons:(newstate)-> 241 | state = newstate or @_state 242 | $(@element[0]).dialog("widget") 243 | .find(".ui-dialog-titlebar-restore") 244 | .toggle( state != "normal" ) 245 | .css({ "right" : "1.4em" }) 246 | .end() 247 | for name,mode of @modes 248 | $(@element[0]).dialog("widget") 249 | .find(".ui-dialog-titlebar-"+name) 250 | .toggle( state != mode.state && @options[mode.option] ) 251 | # place restore button after current state button 252 | for name,mode of @modes 253 | if mode.state is state 254 | $(@element[0]).dialog("widget") 255 | .find(".ui-dialog-titlebar-restore") 256 | .insertAfter( 257 | $(@element[0]).dialog("widget") 258 | .find(".ui-dialog-titlebar-"+name) 259 | ) 260 | .end() 261 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jquery-dialogextend 2.0.4 [![Build Status](https://travis-ci.org/ROMB/jquery-dialogextend.png?branch=master)](https://travis-ci.org/ROMB/jquery-dialogextend) 2 | === 3 | Download 4 | === 5 | [development build](https://raw.github.com/ROMB/jquery-dialogextend/master/build/jquery.dialogextend.js) 6 | 7 | [minified library](https://raw.github.com/ROMB/jquery-dialogextend/master/build/jquery.dialogextend.min.js) 8 | 9 | Compatible 10 | === 11 | - jQuery 1.11.1 12 | - jQueryUI 1.11.0 13 | 14 | Overview 15 | === 16 | - Neat, simple, and ABSOLUTELY unobtrusive 17 | - Extending (instead of replacing) original jQuery UI dialog 18 | - Maximize and minimize buttons 19 | - Show/Hide close button 20 | - Double-clickable title bar 21 | - Enhanced title bar options 22 | - Configurable icons 23 | - Custom events 24 | 25 | Demo 26 | === 27 | - Test Tool : [http://romb.github.io/jquery-dialogextend/example.html](http://romb.github.io/jquery-dialogextend/example.html) 28 | 29 | Tested Browsers 30 | === 31 | - Chrome 35 32 | - Firefox 14 33 | - IE 8 34 | 35 | Please support this project 36 | === 37 | 38 | Donate Bitcoins: 1G8T7Xh2AN5ceduHmHT5TpPFUeddsnQHLQ 39 | 40 | Options 41 | === 42 | 43 | #### closable #### 44 | Type: *Boolean* 45 | 46 | Usage: enable/disable close button 47 | 48 | Default: *true* 49 | 50 | 51 | #### maximizable #### 52 | Type: *Boolean* 53 | 54 | Usage: enable/disable maximize button 55 | 56 | Default: *false* 57 | 58 | #### minimizable #### 59 | 60 | Type: *Boolean* 61 | 62 | Usage: enable/disable minimize button 63 | 64 | Default: *false* 65 | 66 | #### collapsable #### 67 | Type: *Boolean* 68 | 69 | Usage: enable/disable collapse button 70 | 71 | Default: *false* 72 | 73 | #### minimizeLocation #### 74 | 75 | Type: *String* 76 | 77 | Usage: sets alignment of minimized dialogues 78 | 79 | Default: *'left'* 80 | 81 | Valid: *'left'*, *'right'* 82 | 83 | #### dblclick #### 84 | 85 | Type: *Boolean*, *String* 86 | 87 | Usage: set action on double click 88 | 89 | Default: *false* 90 | 91 | Valid: *false*, *'maximize'*, *'minimize'*, *'collapse'* 92 | 93 | 94 | #### titlebar #### 95 | 96 | Type: *Boolean*, *String* 97 | 98 | Default: *false* 99 | 100 | Valid: *false*, *'none'*, *'transparent'* 101 | 102 | 103 | #### icons #### 104 | 105 | Type: *Object* 106 | 107 | Default: 108 | 109 | { 110 | "close" : "ui-icon-circle-closethick", // new in v1.0.1 111 | "maximize" : "ui-icon-extlink", 112 | "minimize" : "ui-icon-minus", 113 | "restore" : "ui-icon-newwin" 114 | } 115 | 116 | Valid: *<jQuery UI icon class>* 117 | 118 | Events 119 | === 120 | 121 | #### load #### 122 | 123 | Type: *load* 124 | 125 | Example: 126 | 127 | //Specify callback as init option 128 | $("#my-dialog").dialogExtend({ 129 | "load" : function(evt, dlg) { ... } 130 | }); 131 | //Bind to event by type 132 | //NOTE : You must bind() the event before dialog-extend is created 133 | $("#my-dialog") 134 | .bind("dialogextendload", function(evt) { ... }) 135 | .dialogExtend(); 136 | 137 | 138 | #### beforeCollapse #### 139 | 140 | Type: *beforeCollapse* 141 | 142 | Example: 143 | 144 | //Specify callback as init option 145 | $("#my-dialog").dialogExtend({ 146 | "beforeCollapse" : function(evt) { ... } 147 | }); 148 | //Bind to event by type 149 | $("#my-dialog").bind("dialogextendbeforeCollapse", function(evt) { ... }); 150 | 151 | #### beforeMaximize #### 152 | 153 | Type: *beforeMaximize* 154 | 155 | Example: 156 | 157 | //Specify callback as init option 158 | $("#my-dialog").dialogExtend({ 159 | "beforeMaximize" : function(evt) { ... } 160 | }); 161 | //Bind to event by type 162 | $("#my-dialog").bind("dialogextendbeforeMaximize", function(evt) { ... }); 163 | 164 | #### beforeMinimize #### 165 | 166 | Type: *beforeMinimize* 167 | 168 | Example: 169 | 170 | //Specify callback as init option 171 | $("#my-dialog").dialogExtend({ 172 | "beforeMinimize" : function(evt) { ... } 173 | }); 174 | //Bind to event by type 175 | $("#my-dialog").bind("dialogextendbeforeMinimize", function(evt) { ... }); 176 | 177 | #### beforeRestore #### 178 | 179 | Type: *beforeRestore* 180 | 181 | Example: 182 | 183 | //Specify callback as init option 184 | $("#my-dialog").dialogExtend({ 185 | "beforeRestore" : function(evt) { ... } 186 | }); 187 | //Bind to event by type 188 | $("#my-dialog").bind("dialogextendbeforeRestore", function(evt) { ... }); 189 | 190 | #### collapse #### 191 | 192 | Type: *collapse* 193 | 194 | Example: 195 | 196 | //Specify callback as init option 197 | $("#my-dialog").dialogExtend({ 198 | "collapse" : function(evt) { ... } 199 | }); 200 | //Bind to event by type 201 | $("#my-dialog").bind("dialogextendcollapse", function(evt) { ... }); 202 | 203 | #### maximize #### 204 | 205 | Type: *maximize* 206 | 207 | Example: 208 | 209 | //Specify callback as init option 210 | $("#my-dialog").dialogExtend({ 211 | "maximize" : function(evt) { ... } 212 | }); 213 | //Bind to event by type 214 | $("#my-dialog").bind("dialogextendmaximize", function(evt) { ... }); 215 | 216 | #### minimize #### 217 | 218 | Type: *minimize* 219 | 220 | Example: 221 | 222 | //Specify callback as init option 223 | $("#my-dialog").dialogExtend({ 224 | "minimize" : function(evt) { ... } 225 | }); 226 | //Bind to event by type 227 | $("#my-dialog").bind("dialogextendminimize", function(evt) { ... }); 228 | 229 | #### restore #### 230 | 231 | Type: *restore* 232 | 233 | Example: 234 | 235 | //Specify callback as init option 236 | $("#my-dialog").dialogExtend({ 237 | "restore" : function(evt) { ... } 238 | }); 239 | //Bind to event by type 240 | $("#my-dialog").bind("dialogextendrestore", function(evt) { ... }); 241 | 242 | Methods 243 | === 244 | #### collapse #### 245 | 246 | Usage: Collapse the dialog without double-clicking the title bar 247 | 248 | Trigger: *dialogextendbeforeCollapse*, *dialogextendcollapse* 249 | 250 | Example: 251 | 252 | $("#my-dialog").dialogExtend("collapse"); 253 | #### maximize #### 254 | 255 | Usage: Maximize the dialog without clicking the button 256 | 257 | Trigger: *dialogextendbeforeMaximize*, *dialogextendmaximize* 258 | 259 | Example: 260 | 261 | $("#my-dialog").dialogExtend("maximize"); 262 | 263 | #### minimize #### 264 | 265 | Usage: Minimize the dialog without clicking the button 266 | 267 | Trigger: *dialogextendbeforeMinimize*, *dialogextendminimize* 268 | 269 | Example: 270 | 271 | $("#my-dialog").dialogExtend("minimize"); 272 | 273 | #### restore #### 274 | 275 | Usage: Restore the dialog from maximized/minimized/collapsed state without clicking the button 276 | 277 | Trigger: *dialogextendbeforeRestore*, *dialogextendrestore* 278 | 279 | Example: 280 | 281 | $("#my-dialog").dialogExtend("restore"); 282 | 283 | #### state #### 284 | 285 | Usage: Get current state of dialog 286 | 287 | Return: *String* 288 | 289 | Value: *'normal'*, *'maximized'*, *'minimized'*, *'collapsed'* 290 | 291 | Example: 292 | 293 | switch ( $("#my-dialog").dialogExtend("state") ) { 294 | case "maximized": 295 | alert("The dialog is maximized"); 296 | break; 297 | case "minimized": 298 | alert("The dialog is minimized"); 299 | break; 300 | case "collapsed": 301 | alert("The dialog is collapsed"); 302 | break; 303 | default: 304 | alert("The dialog is normal"); 305 | } 306 | 307 | Theming 308 | === 309 | The dialog will have class according to its current state. 310 | 311 |
312 |
...
313 |
...
314 |
315 | The buttons are wrapped by title bar of jQuery UI Dialog. 316 | 317 | *Note : After using dialogExtend, close button will not be a direct child of title bar anymore. It will be wrapped by a button pane element* 318 | 319 |
320 | ... 321 |
322 | ... 323 | maximize 324 | minimize 325 | restore 326 |
327 | ... 328 |
329 | 330 | Example - Basic Config 331 | === 332 | $(function(){ 333 | $("#my-button").click(function(){ 334 | $("
This is content
") 335 | .dialog({ "title" : "My Dialog" }) 336 | .dialogExtend({ 337 | "maximizable" : true, 338 | "dblclick" : "maximize", 339 | "icons" : { "maximize" : "ui-icon-arrow-4-diag" } 340 | }); 341 | }); 342 | }); 343 | Example - Full Config 344 | === 345 | $(function(){ 346 | $("#my-button").click(function(){ 347 | $("
This is content
") 348 | .dialog({ 349 | "title" : "This is dialog title", 350 | "buttons" : { "OK" : function(){ $(this).dialog("close"); } } 351 | }) 352 | .dialogExtend({ 353 | "closable" : true, 354 | "maximizable" : true, 355 | "minimizable" : true, 356 | "collapsable" : true, 357 | "dblclick" : "collapse", 358 | "titlebar" : "transparent", 359 | "minimizeLocation" : "right", 360 | "icons" : { 361 | "close" : "ui-icon-circle-close", 362 | "maximize" : "ui-icon-circle-plus", 363 | "minimize" : "ui-icon-circle-minus", 364 | "collapse" : "ui-icon-triangle-1-s", 365 | "restore" : "ui-icon-bullet" 366 | }, 367 | "load" : function(evt, dlg){ alert(evt.type); }, 368 | "beforeCollapse" : function(evt, dlg){ alert(evt.type); }, 369 | "beforeMaximize" : function(evt, dlg){ alert(evt.type); }, 370 | "beforeMinimize" : function(evt, dlg){ alert(evt.type); }, 371 | "beforeRestore" : function(evt, dlg){ alert(evt.type); }, 372 | "collapse" : function(evt, dlg){ alert(evt.type); }, 373 | "maximize" : function(evt, dlg){ alert(evt.type); }, 374 | "minimize" : function(evt, dlg){ alert(evt.type); }, 375 | "restore" : function(evt, dlg){ alert(evt.type); } 376 | }); 377 | }); 378 | }); 379 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Sandbox - jQuery DialogExtend 5 | 6 | 7 | 8 | 9 | 10 | 31 | 32 | 33 |
34 |

jQuery DialogExtend Test Tool

35 |
    36 |
  • DialogExtend {version 2.0.4}
    • 37 |
  • jQuery {version 1.11.1}
    • 38 |
  • jQueryUI {version 1.11.0}
    • 39 |
40 |
41 |
42 |
43 |

Configuration

44 |
45 |
46 | Buttons 47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 | 61 | 62 |
63 |
64 |
65 | Icons 66 |
67 | 68 | 69 | 75 |
76 |
77 | 78 | 79 | 85 |
86 |
87 | 88 | 89 | 95 |
96 |
97 | 98 | 99 | 105 |
106 |
107 |
108 |
109 |
110 | Double-click 111 |
112 | 113 | 114 |
115 |
116 | 117 | 118 |
119 |
120 | 121 | 122 |
123 |
124 | 125 | 126 |
127 |
128 |
129 | Minimize location 130 |
131 | 132 | 133 |
134 |
135 | 136 | 137 |
138 |
139 |
140 | Title bar 141 |
142 | 143 | 144 |
145 |
146 | 147 | 148 |
149 |
150 | 151 | 152 |
153 |
154 |
155 |
156 |
157 | Events 158 |
159 | 160 | 161 |
162 |
163 | 164 | 165 |
166 |
167 | 168 | 169 |
170 |
171 | 172 | 173 |
174 |
175 | 176 | 177 |
178 |
179 | 180 | 181 |
182 |
183 | 184 | 185 |
186 |
187 | 188 | 189 |
190 |
191 | 192 | 193 |
194 |
195 |
196 |
197 |
198 | Methods (apply to last dialog) 199 |
200 | 201 | 202 | 203 | 204 | 205 |
206 |
207 |
208 | Dialog 209 |
210 | 211 | 212 |
213 |
214 | 215 | 216 |
217 |
218 | 219 | 220 |
221 |
222 | 223 | 224 |
225 |
226 | 227 |
228 |
229 |
230 | 231 | 232 |
(demo dialogExtend features with page scroll)
233 |
234 | 312 | 313 | --------------------------------------------------------------------------------