Mercurial > hg > orthanc
comparison OrthancExplorer/libs/jquery.mobile.simpledialog2.js @ 57:4bc019d2f969 orthanc-renaming
renaming
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Sun, 16 Sep 2012 09:22:48 +0200 |
parents | PalanthirExplorer/libs/jquery.mobile.simpledialog2.js@33d67e1ab173 |
children | 948720c72586 |
comparison
equal
deleted
inserted
replaced
56:088c4f23e2c8 | 57:4bc019d2f969 |
---|---|
1 /* | |
2 * jQuery Mobile Framework : plugin to provide a dialogs Widget. ver2 | |
3 * Copyright (c) JTSage | |
4 * CC 3.0 Attribution. May be relicensed without permission/notifcation. | |
5 * https://github.com/jtsage/jquery-mobile-simpledialog | |
6 * | |
7 * Modifications by Sebastien Jodogne | |
8 */ | |
9 | |
10 (function($, undefined ) { | |
11 $.widget( "mobile.simpledialog2", $.mobile.widget, { | |
12 options: { | |
13 version: '1.0.1-2012061300', // jQueryMobile-YrMoDaySerial | |
14 mode: 'blank', // or 'button' | |
15 themeDialog: 'b', | |
16 themeInput: false, | |
17 themeButtonDefault: false, | |
18 themeHeader: 'a', | |
19 | |
20 fullScreen: false, | |
21 fullScreenForce: false, | |
22 dialogAllow: false, | |
23 dialogForce: false, | |
24 | |
25 headerText: false, | |
26 headerClose: false, | |
27 buttonPrompt: false, | |
28 buttonInput: false, | |
29 buttonInputDefault: false, | |
30 buttonPassword: false, | |
31 blankContent: false, | |
32 blankContentAdopt: false, | |
33 | |
34 resizeListener: true, | |
35 safeNuke: true, | |
36 forceInput: true, | |
37 showModal: true, | |
38 animate: true, | |
39 transition: 'pop', | |
40 clickEvent: 'click', | |
41 zindex: '500', | |
42 width: '280px', | |
43 left: false, | |
44 top: false, | |
45 | |
46 callbackOpen: false, | |
47 callbackOpenArgs: [], | |
48 callbackClose: false, | |
49 callbackCloseArgs: [] | |
50 }, | |
51 _eventHandler: function(e,p) { | |
52 // Handle the triggers | |
53 var self = e.data.widget, | |
54 o = e.data.widget.options; | |
55 | |
56 if ( ! e.isPropagationStopped() ) { | |
57 switch (p.method) { | |
58 case 'close': | |
59 self.close(); | |
60 break; | |
61 case 'html': | |
62 self.updateBlank(p.source); | |
63 break; | |
64 } | |
65 } | |
66 }, | |
67 _create: function () { | |
68 var self = this, | |
69 o = $.extend(this.options, this.element.jqmData('options')), | |
70 initDate = new Date(), | |
71 content = $("<div class='ui-simpledialog-container ui-overlay-shadow ui-corner-all ui-simpledialog-hidden " + | |
72 ((o.animate === true) ? o.transition : '') + " ui-body-" + o.themeDialog + "'></div>"); | |
73 | |
74 if ( o.themeButtonDefault === false ) { o.themeButtonDefault = o.themeDialog; } | |
75 if ( o.themeInput === false ) { o.themeInput = o.themeDialog; } | |
76 $.mobile.sdCurrentDialog = self; | |
77 if ( typeof $.mobile.sdLastInput !== 'undefined' ) { delete $.mobile.sdLastInput; } | |
78 self.internalID = initDate.getTime(); | |
79 self.displayAnchor = $.mobile.activePage.children('.ui-content').first(); | |
80 if ( self.displayAnchor.length === 0 ) { self.displayAnchor = $.mobile.activePage; } | |
81 | |
82 self.dialogPage = $("<div data-role='dialog' data-theme='" + o.themeDialog + "'><div data-role='header'></div><div data-role='content'></div></div>"); | |
83 self.sdAllContent = self.dialogPage.find('[data-role=content]'); | |
84 | |
85 content.appendTo(self.sdAllContent); | |
86 | |
87 self.sdIntContent = self.sdAllContent.find('.ui-simpledialog-container'); | |
88 self.sdIntContent.css('width', o.width); | |
89 | |
90 if ( o.headerText !== false || o.headerClose !== false ) { | |
91 self.sdHeader = $('<div style="margin-bottom: 4px;" class="ui-header ui-bar-'+o.themeHeader+'"></div>'); | |
92 if ( o.headerClose === true ) { | |
93 $("<a class='ui-btn-left' rel='close' href='#'>Close</a>").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true }); | |
94 } | |
95 $('<h1 class="ui-title">'+((o.headerText !== false)?o.headerText:'')+'</h1>').appendTo(self.sdHeader); | |
96 self.sdHeader.appendTo(self.sdIntContent); | |
97 } | |
98 | |
99 if ( o.mode === 'blank' ) { | |
100 if ( o.blankContent === true ) { | |
101 if ( o.blankContentAdopt === true ) { | |
102 o.blankContent = self.element.children(); | |
103 } else { | |
104 o.blankContent = self.element.html(); | |
105 } | |
106 } | |
107 $(o.blankContent).appendTo(self.sdIntContent); | |
108 } else if ( o.mode === 'button' ) { | |
109 self._makeButtons().appendTo(self.sdIntContent); | |
110 } | |
111 | |
112 self.sdIntContent.appendTo(self.displayAnchor.parent()); | |
113 | |
114 self.dialogPage.appendTo( $.mobile.pageContainer ) | |
115 .page().css('minHeight', '0px').css('zIndex', o.zindex); | |
116 | |
117 if ( o.animate === true ) { self.dialogPage.addClass(o.transition); } | |
118 | |
119 self.screen = $("<div>", {'class':'ui-simpledialog-screen ui-simpledialog-hidden'}) | |
120 .css('z-index', (o.zindex-1)) | |
121 .appendTo(self.displayAnchor.parent()) | |
122 .bind(o.clickEvent, function(event){ | |
123 if ( !o.forceInput ) { | |
124 self.close(); | |
125 } | |
126 event.preventDefault(); | |
127 }); | |
128 | |
129 if ( o.showModal ) { self.screen.addClass('ui-simpledialog-screen-modal'); } | |
130 | |
131 $(document).bind('simpledialog.'+self.internalID, {widget:self}, function(e,p) { self._eventHandler(e,p); }); | |
132 }, | |
133 _makeButtons: function () { | |
134 var self = this, | |
135 o = self.options, | |
136 buttonHTML = $('<div></div>'), | |
137 pickerInput = $("<div class='ui-simpledialog-controls'><input class='ui-simpledialog-input ui-input-text ui-shadow-inset ui-corner-all ui-body-"+o.themeInput+"' type='"+((o.buttonPassword===true)?"password":"text")+"' value='"+((o.buttonInputDefault!==false)?o.buttonInputDefault.replace( '"', """ ).replace( "'", "'" ):"")+"' name='pickin' /></div>"), | |
138 pickerChoice = $("<div>", { "class":'ui-simpledialog-controls' }); | |
139 | |
140 | |
141 if ( o.buttonPrompt !== false ) { | |
142 self.buttonPromptText = $("<p class='ui-simpledialog-subtitle'>"+o.buttonPrompt+"</p>").appendTo(buttonHTML); | |
143 } | |
144 | |
145 if ( o.buttonInput !== false ) { | |
146 $.mobile.sdLastInput = ""; | |
147 pickerInput.appendTo(buttonHTML); | |
148 pickerInput.find('input').bind('change', function () { | |
149 $.mobile.sdLastInput = pickerInput.find('input').first().val(); | |
150 self.thisInput = pickerInput.find('input').first().val(); | |
151 }); | |
152 } | |
153 | |
154 pickerChoice.appendTo(buttonHTML); | |
155 | |
156 self.butObj = []; | |
157 | |
158 $.each(o.buttons, function(name, props) { | |
159 props = $.isFunction( props ) ? { click: props } : props; | |
160 props = $.extend({ | |
161 text : name, | |
162 id : name + self.internalID, | |
163 theme : o.themeButtonDefault, | |
164 icon : 'check', | |
165 iconpos: 'left', | |
166 corners: 'true', | |
167 shadow : 'true', | |
168 args : [], | |
169 close : true | |
170 }, props); | |
171 | |
172 self.butObj.push($("<a href='#'>"+name+"</a>") | |
173 .appendTo(pickerChoice) | |
174 .attr('id', props.id) | |
175 .buttonMarkup({ | |
176 theme : props.theme, | |
177 icon : props.icon, | |
178 iconpos: props.iconpos, | |
179 corners: props.corners, | |
180 shadow : props.shadow | |
181 }).unbind("vclick click") | |
182 .bind(o.clickEvent, function() { | |
183 if ( o.buttonInput ) { self.sdIntContent.find('input [name=pickin]').trigger('change'); } | |
184 var returnValue = props.click.apply(self, $.merge(arguments, props.args)); | |
185 if ( returnValue !== false && props.close === true ) { | |
186 self.close(); | |
187 } | |
188 }) | |
189 ); | |
190 }); | |
191 | |
192 return buttonHTML; | |
193 }, | |
194 _getCoords: function(widget) { | |
195 var self = widget, | |
196 docWinWidth = $.mobile.activePage.width(), | |
197 docWinHighOff = $(window).scrollTop(), | |
198 docWinHigh = $(window).height(), | |
199 diaWinWidth = widget.sdIntContent.innerWidth(), | |
200 diaWinHigh = widget.sdIntContent.outerHeight(), | |
201 | |
202 coords = { | |
203 'high' : $(window).height(), | |
204 'width' : $.mobile.activePage.width(), | |
205 'fullTop' : $(window).scrollTop(), | |
206 'fullLeft': $(window).scrollLeft(), | |
207 'winTop' : docWinHighOff + ((widget.options.top !== false) ? widget.options.top : (( docWinHigh / 2 ) - ( diaWinHigh / 2 ) )), | |
208 'winLeft' : ((widget.options.left !== false) ? widget.options.left : (( docWinWidth / 2 ) - ( diaWinWidth / 2 ) )) | |
209 }; | |
210 | |
211 if ( coords.winTop < 45 ) { coords.winTop = 45; } | |
212 | |
213 return coords; | |
214 }, | |
215 _orientChange: function(e) { | |
216 var self = e.data.widget, | |
217 o = e.data.widget.options, | |
218 coords = e.data.widget._getCoords(e.data.widget); | |
219 | |
220 e.stopPropagation(); | |
221 | |
222 if ( self.isDialog === true ) { | |
223 return true; | |
224 } else { | |
225 if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) { | |
226 self.sdIntContent.css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden'); | |
227 } else { | |
228 self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden'); | |
229 } | |
230 } | |
231 }, | |
232 repos: function() { | |
233 var bsEvent = { data: {widget:this}, stopPropagation: function () { return true; }}; | |
234 this._orientChange(bsEvent); | |
235 }, | |
236 open: function() { | |
237 var self = this, | |
238 o = this.options, | |
239 coords = this._getCoords(this); | |
240 | |
241 self.sdAllContent.find('.ui-btn-active').removeClass('ui-btn-active'); | |
242 self.sdIntContent.delegate('[rel=close]', o.clickEvent, function (e) { e.preventDefault(); self.close(); }); | |
243 | |
244 if ( ( o.dialogAllow === true && coords.width < 400 ) || o.dialogForce ) { | |
245 self.isDialog = true; | |
246 | |
247 if ( o.mode === 'blank' ) { // Custom selects do not play well with dialog mode - so, we turn them off. | |
248 self.sdIntContent.find('select').each(function () { | |
249 $(this).jqmData('nativeMenu', true); | |
250 }); | |
251 } | |
252 | |
253 self.displayAnchor.parent().unbind("pagehide.remove"); | |
254 self.sdAllContent.append(self.sdIntContent); | |
255 self.sdAllContent.trigger('create'); | |
256 if ( o.headerText !== false ) { | |
257 self.sdHeader.find('h1').appendTo(self.dialogPage.find('[data-role=header]')); | |
258 self.sdIntContent.find('.ui-header').empty().removeClass(); | |
259 } | |
260 if ( o.headerClose === true ) { | |
261 self.dialogPage.find('.ui-header a').bind('click', function () { | |
262 setTimeout("$.mobile.sdCurrentDialog.destroy();", 1000); | |
263 }); | |
264 } else { | |
265 self.dialogPage.find('.ui-header a').remove(); | |
266 } | |
267 | |
268 self.sdIntContent.removeClass().css({'top': 'auto', 'width': 'auto', 'left': 'auto', 'marginLeft': 'auto', 'marginRight': 'auto', 'zIndex': o.zindex}); | |
269 $.mobile.changePage(self.dialogPage, {'transition': (o.animate === true) ? o.transition : 'none'}); | |
270 } else { | |
271 self.isDialog = false; | |
272 self.selects = []; | |
273 | |
274 if ( o.fullScreen === false ) { | |
275 if ( o.showModal === true && o.animate === true ) { self.screen.fadeIn('slow'); } | |
276 else { self.screen.removeClass('ui-simpledialog-hidden'); } | |
277 } | |
278 | |
279 self.sdIntContent.addClass('ui-overlay-shadow in').css('zIndex', o.zindex).trigger('create'); | |
280 | |
281 if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) { | |
282 self.sdIntContent.removeClass('ui-simpledialog-container').css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden'); | |
283 } else { | |
284 self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden'); | |
285 } | |
286 | |
287 $(document).bind('orientationchange.simpledialog', {widget:self}, function(e) { self._orientChange(e); }); | |
288 if ( o.resizeListener === true ) { | |
289 $(window).bind('resize.simpledialog', {widget:self}, function (e) { self._orientChange(e); }); | |
290 } | |
291 } | |
292 if ( $.isFunction(o.callbackOpen) ) { | |
293 o.callbackOpen.apply(self, o.callbackOpenArgs); | |
294 } | |
295 }, | |
296 close: function() { | |
297 var self = this, o = this.options, retty; | |
298 | |
299 if ( $.isFunction(self.options.callbackClose) ) { | |
300 retty = self.options.callbackClose.apply(self, self.options.callbackCloseArgs); | |
301 if ( retty === false ) { return false; } | |
302 } | |
303 | |
304 if ( self.isDialog ) { | |
305 $(self.dialogPage).dialog('close'); | |
306 self.sdIntContent.addClass('ui-simpledialog-hidden'); | |
307 self.sdIntContent.appendTo(self.displayAnchor.parent()); | |
308 if ( $.mobile.activePage.jqmData("page").options.domCache != true && $.mobile.activePage.is(":jqmData(external-page='true')") ) { | |
309 $.mobile.activePage.bind("pagehide.remove", function () { | |
310 $(this).remove(); | |
311 }); | |
312 } | |
313 } else { | |
314 if ( self.options.showModal === true && self.options.animate === true ) { | |
315 self.screen.fadeOut('slow'); | |
316 } else { | |
317 self.screen.addClass('ui-simpledialog-hidden'); | |
318 } | |
319 self.sdIntContent.addClass('ui-simpledialog-hidden').removeClass('in'); | |
320 $(document).unbind('orientationchange.simpledialog'); | |
321 if ( self.options.resizeListener === true ) { $(window).unbind('resize.simpledialog'); } | |
322 } | |
323 | |
324 if ( o.mode === 'blank' && o.blankContent !== false && o.blankContentAdopt === true ) { | |
325 self.element.append(o.blankContent); | |
326 o.blankContent = true; | |
327 } | |
328 | |
329 if ( self.isDialog === true || self.options.animate === true ) { | |
330 setTimeout(function(that) { return function () { that.destroy(); };}(self), 1000); | |
331 } else { | |
332 self.destroy(); | |
333 } | |
334 }, | |
335 destroy: function() { | |
336 var self = this, | |
337 ele = self.element; | |
338 | |
339 if ( self.options.mode === 'blank' ) { | |
340 $.mobile.sdCurrentDialog.sdIntContent.find('select').each(function() { | |
341 if ( $(this).data('nativeMenu') == false ) { | |
342 $(this).data('selectmenu').menuPage.remove(); | |
343 $(this).data('selectmenu').screen.remove(); | |
344 $(this).data('selectmenu').listbox.remove(); | |
345 } | |
346 }); | |
347 } | |
348 | |
349 $(self.sdIntContent).remove(); | |
350 $(self.dialogPage).remove(); | |
351 $(self.screen).remove(); | |
352 $(document).unbind('simpledialog.'+self.internalID); | |
353 delete $.mobile.sdCurrentDialog; | |
354 $.Widget.prototype.destroy.call(self); | |
355 if ( self.options.safeNuke === true && $(ele).parents().length === 0 && $(ele).contents().length === 0 ) { | |
356 ele.remove(); | |
357 } | |
358 }, | |
359 updateBlank: function (newHTML) { | |
360 var self = this, | |
361 o = this.options; | |
362 | |
363 self.sdIntContent.empty(); | |
364 | |
365 if ( o.headerText !== false || o.headerClose !== false ) { | |
366 self.sdHeader = $('<div class="ui-header ui-bar-'+o.themeHeader+'"></div>'); | |
367 if ( o.headerClose === true ) { | |
368 $("<a class='ui-btn-left' rel='close' href='#'>Close</a>").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true }); | |
369 } | |
370 $('<h1 class="ui-title">'+((o.headerText !== false)?o.headerText:'')+'</h1>').appendTo(self.sdHeader); | |
371 self.sdHeader.appendTo(self.sdIntContent); | |
372 } | |
373 | |
374 $(newHTML).appendTo(self.sdIntContent); | |
375 self.sdIntContent.trigger('create'); | |
376 $(document).trigger('orientationchange.simpledialog'); | |
377 }, | |
378 _init: function() { | |
379 this.open(); | |
380 } | |
381 }); | |
382 })( jQuery ); |