Mercurial > hg > orthanc

comparison OrthancServer/OrthancExplorer/libs/jquery.mobile.simpledialog2.js @ 4044:d25f4c0fa160 framework

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