1/** 2 * FILE: jQuery.ptTileSelect.js 3 * 4 * @fileOverview 5 * jQuery plugin for displaying a popup that allows a user 6 * to define a time and set that time back to a form's input 7 * field. 8 * 9 * @version 0.8 10 * @author Paul Tavares, www.purtuga.com 11 * @see http://pttimeselect.sourceforge.net 12 * 13 * @requires jQuery {@link http://www.jquery.com} 14 * 15 * 16 * LICENSE: 17 * 18 * Copyright (c) 2007 Paul T. (purtuga.com) 19 * Dual licensed under the: 20 * 21 * - MIT 22 * <http://www.opensource.org/licenses/mit-license.php> 23 * 24 * - GPL 25 * <http://www.opensource.org/licenses/gpl-license.php> 26 * 27 * User can pick whichever one applies best for their project 28 * and doesn not have to contact me. 29 * 30 * 31 * INSTALLATION: 32 * 33 * There are two files (.css and .js) delivered with this plugin and 34 * that must be included in your html page after the jquery.js library 35 * and the jQuery UI style sheet (the jQuery UI javascript library is 36 * not necessary). 37 * Both of these are to be included inside of the 'head' element of 38 * the document. Example below demonstrates this along side the jQuery 39 * libraries. 40 * 41 * | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 42 * | <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/redmond/jquery-ui.css" /> 43 * | 44 * | <link rel="stylesheet" type="text/css" href="jquery.ptTimeSelect.css" /> 45 * | <script type="text/javascript" src="jquery.ptTimeSelect.js"></script> 46 * | 47 * 48 * USAGE: 49 * 50 * - See <$(ele).ptTimeSelect()> 51 * 52 * 53 * 54 * LAST UPDATED: 55 * 56 * - $Date: 2012/08/05 19:40:21 $ 57 * - $Author: paulinho4u $ 58 * - $Revision: 1.8 $ 59 * 60 */ 61 62(function($){ 63 64 /** 65 * jQuery definition 66 * 67 * @see http://jquery.com/ 68 * @name jQuery 69 * @class jQuery Library 70 */ 71 72 /** 73 * jQuery 'fn' definition to anchor all public plugin methods. 74 * 75 * @see http://jquery.com/ 76 * @name fn 77 * @class jQuery Library public method anchor 78 * @memberOf jQuery 79 */ 80 81 /** 82 * Namespace for all properties and methods 83 * 84 * @namespace ptTimeSelect 85 * @memberOf jQuery 86 */ 87 jQuery.ptTimeSelect = {}; 88 jQuery.ptTimeSelect.version = "__BUILD_VERSION_NUMBER__"; 89 90 /** 91 * The default options for all calls to ptTimeSelect. Can be 92 * overwriten with each individual call to {@link jQuery.fn.ptTimeSelect} 93 * 94 * @type {Object} options 95 * @memberOf jQuery.ptTimeSelect 96 * @see jQuery.fn.ptTimeSelect 97 */ 98 jQuery.ptTimeSelect.options = { 99 containerClass: undefined, 100 containerWidth: '22em', 101 hoursLabel: 'Hour', 102 minutesLabel: 'Minutes', 103 setButtonLabel: 'Set', 104 popupImage: undefined, 105 onFocusDisplay: true, 106 zIndex: 10, 107 onBeforeShow: undefined, 108 onClose: undefined 109 }; 110 111 /** 112 * Internal method. Called when page is initialized to add the time 113 * selection area to the DOM. 114 * 115 * @private 116 * @memberOf jQuery.ptTimeSelect 117 * @return {undefined} 118 */ 119 jQuery.ptTimeSelect._ptTimeSelectInit = function () { 120 jQuery(document).ready( 121 function () { 122 //if the html is not yet created in the document, then do it now 123 if (!jQuery('#ptTimeSelectCntr').length) { 124 jQuery("body").append( 125 '<div id="ptTimeSelectCntr" class="">' 126 + ' <div class="ui-widget ui-widget-content ui-corner-all">' 127 + ' <div class="ui-widget-header ui-corner-all">' 128 + ' <div id="ptTimeSelectCloseCntr" style="float: right;">' 129 + ' <a href="javascript: void(0);" onclick="jQuery.ptTimeSelect.closeCntr();" ' 130 + ' onmouseover="jQuery(this).removeClass(\'ui-state-default\').addClass(\'ui-state-hover\');" ' 131 + ' onmouseout="jQuery(this).removeClass(\'ui-state-hover\').addClass(\'ui-state-default\');"' 132 + ' class="ui-corner-all ui-state-default">'
133 + ' <span class="ui-icon ui-icon-circle-close">X</span>' 134 + ' </a>' 135 + ' </div>' 136 + ' <div id="ptTimeSelectUserTime" style="float: left;">' 137 + ' <span id="ptTimeSelectUserSelHr">1</span> : ' 138 + ' <span id="ptTimeSelectUserSelMin">00</span> ' 139 + ' <span id="ptTimeSelectUserSelAmPm">AM</span>' 140 + ' </div>' 141 + ' <br style="clear: both;" /><div></div>' 142 + ' </div>' 143 + ' <div class="ui-widget-content ui-corner-all">' 144 + ' <div>' 145 + ' <div class="ptTimeSelectTimeLabelsCntr">' 146 + ' <div class="ptTimeSelectLeftPane" style="width: 50%; text-align: center; float: left;" class="">Hour</div>' 147 + ' <div class="ptTimeSelectRightPane" style="width: 50%; text-align: center; float: left;">Minutes</div>' 148 + ' </div>' 149 + ' <div>' 150 + ' <div style="float: left; width: 50%;">' 151 + ' <div class="ui-widget-content ptTimeSelectLeftPane">' 152 + ' <div class="ptTimeSelectHrAmPmCntr">' 153 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);" ' 154 + ' style="display: block; width: 45%; float: left;">AM</a>' 155 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);" ' 156 + ' style="display: block; width: 45%; float: left;">PM</a>' 157 + ' <br style="clear: left;" /><div></div>' 158 + ' </div>' 159 + ' <div class="ptTimeSelectHrCntr">' 160 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">1</a>' 161 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">2</a>' 162 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">3</a>' 163 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">4</a>' 164 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">5</a>' 165 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">6</a>' 166 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">7</a>' 167 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">8</a>' 168 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">9</a>' 169 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">10</a>' 170 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">11</a>' 171 + ' <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">12</a>' 172 + ' <br style="clear: left;" /><div></div>' 173 + ' </div>' 174 + ' </div>' 175 + ' </div>' 176 + ' <div style="width: 50%; float: left;">' 177 + ' <div class="ui-widget-content ptTimeSelectRightPane">' 178 + ' <div class="ptTimeSelectMinCntr">' 179 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">00</a>' 180 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">05</a>' 181 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">10</a>' 182 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">15</a>' 183 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">20</a>' 184 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">25</a>' 185 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">30</a>' 186 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">35</a>' 187 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">40</a>' 188 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">45</a>' 189 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">50</a>' 190 + ' <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">55</a>' 191 + ' <br style="clear: left;" /><div></div>' 192 + ' </div>' 193 + ' </div>' 194 + ' </div>' 195 + ' </div>' 196 + ' </div>' 197 + ' <div style="clear: left;"></div>' 198 + ' </div>' 199 + ' <div id="ptTimeSelectSetButton">' 200 + ' <a href="javascript: void(0);" onclick="jQuery.ptTimeSelect.setTime()"' 201 + ' onmouseover="jQuery(this).removeClass(\'ui-state-default\').addClass(\'ui-state-hover\');" ' 202 + ' onmouseout="jQuery(this).removeClass(\'ui-state-hover\').addClass(\'ui-state-default\');"' 203 + ' class="ui-corner-all ui-state-default">' 204 + ' SET' 205 + ' </a>' 206 + ' <br style="clear: both;" /><div></div>' 207 + ' </div>' 208 + ' <!--[if lte IE 6.5]>' 209 + ' <iframe style="display:block; position:absolute;top: 0;left:0;z-index:-1;' 210 + ' filter:Alpha(Opacity=\'0\');width:3000px;height:3000px"></iframe>' 211 + ' <![endif]-->' 212 + ' </div></div>' 213 ); 214 215 var e = jQuery('#ptTimeSelectCntr'); 216 217 // Add the events to the functions 218 e.find('.ptTimeSelectMin') 219 .bind("click", function(){ 220 jQuery.ptTimeSelect.setMin($(this).text()); 221 }); 222 223 e.find('.ptTimeSelectHr') 224 .bind("click", function(){ 225 jQuery.ptTimeSelect.setHr($(this).text()); 226 }); 227 228 $(document).mousedown(jQuery.ptTimeSelect._doCheckMouseClick); 229 }//end if 230 } 231 ); 232 }();// jQuery.ptTimeSelectInit() 233 234 235 /** 236 * Sets the hour selected by the user on the popup. 237 * 238 * @private 239 * @param {Integer} h - Interger indicating the hour. This value 240 * is the same as the text value displayed on the 241 * popup under the hour. This value can also be the 242 * words AM or PM. 243 * @return {undefined} 244 * 245 */ 246 jQuery.ptTimeSelect.setHr = function(h) { 247 if ( h.toLowerCase() == "am" 248 || h.toLowerCase() == "pm" 249 ) { 250 jQuery('#ptTimeSelectUserSelAmPm').empty().append(h); 251 } else { 252 jQuery('#ptTimeSelectUserSelHr').empty().append(h); 253 } 254 };// END setHr() function 255 256 /** 257 * Sets the minutes selected by the user on the popup. 258 * 259 * @private 260 * @param {Integer} m - interger indicating the minutes. This 261 * value is the same as the text value displayed on the popup 262 * under the minutes. 263 * @return {undefined} 264 */ 265 jQuery.ptTimeSelect.setMin = function(m) { 266 jQuery('#ptTimeSelectUserSelMin').empty().append(m); 267 };// END setMin() function 268 269 /** 270 * Takes the time defined by the user and sets it to the input 271 * element that the popup is currently opened for. 272 * 273 * @private 274 * @return {undefined} 275 */ 276 jQuery.ptTimeSelect.setTime = function() { 277 var tSel = jQuery('#ptTimeSelectUserSelHr').text() 278 + ":" 279 + jQuery('#ptTimeSelectUserSelMin').text() 280 + " " 281 + jQuery('#ptTimeSelectUserSelAmPm').text(); 282 283 var i = jQuery(".isPtTimeSelectActive"); 284 285 if(i.attr('type') == 'time'){ 286 i.val(jQuery.ptTimeSelect.convertFromAMPM(tSel)); 287 }else{ 288 i.val(tSel); 289 } 290 291 i.trigger('change'); 292 293 this.closeCntr(); 294 295 };// END setTime() function 296 297 /** 298 * Converts a 24 hours formated time into a 12 hours formated time 299 * 300 * 301 * @private 302 * @return {undefined} 303 */ 304 jQuery.ptTimeSelect.convertFrom24 = function(time) { 305 // Check correct time format and split into components 306 time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time]; 307 if (time.length > 1) { // If time format correct 308 time = time.slice (1); // Remove full string match value 309 time[5] = +time[0] < 12 ? ' AM' : ' PM'; // Set AM/PM 310 time[0] = +time[0] % 12 || 12; // Adjust hours 311 } 312 return time.join (''); // return adjusted time or original string 313 };// END convertFrom24() function 314 315 /** 316 * Converts a 12 hours formated time into a 24 hours formated time 317 * 318 * 319 * @private 320 * @return {undefined} 321 */ 322 jQuery.ptTimeSelect.convertFromAMPM = function(time){ 323 324 var hours = Number(time.match(/^(\d+)/)[1]); 325 var minutes = Number(time.match(/:(\d+)/)[1]); 326 var AMPM = time.match(/\s(.*)$/)[1]; 327 if(AMPM == "PM" && hours<12) hours = hours+12; 328 if(AMPM == "AM" && hours==12) hours = hours-12; 329 var sHours = hours.toString(); 330 var sMinutes = minutes.toString(); 331 if(hours<10) sHours = "0" + sHours; 332 if(minutes<10) sMinutes = "0" + sMinutes; 333 return sHours + ":" + sMinutes; 334 };// END convertFromAMPM() function 335 336 /**
337 * Displays the time definition area on the page, right below 338 * the input field. Also sets the custom colors/css on the 339 * displayed area to what ever the input element options were 340 * set with. 341 * 342 * @private 343 * @param {String} uId - Id of the element for whom the area will 344 * be displayed. This ID was created when the 345 * ptTimeSelect() method was called. 346 * @return {undefined} 347 * 348 */ 349 jQuery.ptTimeSelect.openCntr = function (ele) { 350 jQuery.ptTimeSelect.closeCntr(); 351 jQuery(".isPtTimeSelectActive").removeClass("isPtTimeSelectActive"); 352 var cntr = jQuery("#ptTimeSelectCntr"); 353 var i = jQuery(ele).eq(0).addClass("isPtTimeSelectActive"); 354 var opt = i.data("ptTimeSelectOptions"); 355 var style = i.offset(); 356 var time = ''; 357 style['z-index'] = opt.zIndex; 358 style.top = (style.top + i.outerHeight()); 359 if (opt.containerWidth) { 360 style.width = opt.containerWidth; 361 } 362 if (opt.containerClass) { 363 cntr.addClass(opt.containerClass); 364 } 365 cntr.css(style); 366 367 if(i.attr('type') == 'time'){ 368 time = jQuery.ptTimeSelect.convertFrom24(i.val()); 369 }else{ 370 time = i.val(); 371 } 372 373 var hr = 1; 374 var min = '00'; 375 var tm = 'AM'; 376 if (time) { 377 var re = /([0-9]{1,2}).*:.*([0-9]{2}).*(PM|AM)/i; 378 var match = re.exec(time); 379 if (match) { 380 hr = match[1] || 1; 381 min = match[2] || '00'; 382 tm = match[3] || 'AM'; 383 } 384 } 385 cntr.find("#ptTimeSelectUserSelHr").empty().append(hr); 386 cntr.find("#ptTimeSelectUserSelMin").empty().append(min); 387 cntr.find("#ptTimeSelectUserSelAmPm").empty().append(tm); 388 cntr.find(".ptTimeSelectTimeLabelsCntr .ptTimeSelectLeftPane") 389 .empty().append(opt.hoursLabel); 390 cntr.find(".ptTimeSelectTimeLabelsCntr .ptTimeSelectRightPane") 391 .empty().append(opt.minutesLabel); 392 cntr.find("#ptTimeSelectSetButton a").empty().append(opt.setButtonLabel); 393 if (opt.onBeforeShow) { 394 opt.onBeforeShow(i, cntr); 395 } 396 cntr.slideDown("fast"); 397 398 };// END openCntr() 399 400 /** 401 * Closes (hides it) the popup container. 402 * @private 403 * @param {Object} i - Optional. The input field for which the 404 * container is being closed. 405 * @return {undefined} 406 */ 407 jQuery.ptTimeSelect.closeCntr = function(i) { 408 var e = $("#ptTimeSelectCntr"); 409 if (e.is(":visible") == true) { 410 411 // If IE, then check to make sure it is realy visible 412 if (jQuery.support.tbody == false) { 413 if (!(e[0].offsetWidth > 0) && !(e[0].offsetHeight > 0) ) { 414 return; 415 } 416 } 417 418 jQuery('#ptTimeSelectCntr') 419 .css("display", "none") 420 .removeClass() 421 .css("width", ""); 422 if (!i) { 423 i = $(".isPtTimeSelectActive"); 424 } 425 if (i) { 426 var opt = i.removeClass("isPtTimeSelectActive") 427 .data("ptTimeSelectOptions"); 428 if (opt && opt.onClose) { 429 opt.onClose(i); 430 } 431 } 432 } 433 return; 434 };//end closeCntr() 435 436 /** 437 * Closes the timePicker popup if user is not longer focused on the 438 * input field or the timepicker 439 * 440 * @private 441 * @param {jQueryEvent} ev - Event passed in by jQuery 442 * @return {undefined} 443 */ 444 jQuery.ptTimeSelect._doCheckMouseClick = function(ev){ 445 if (!$("#ptTimeSelectCntr:visible").length) { 446 return; 447 } 448 if ( !jQuery(ev.target).closest("#ptTimeSelectCntr").length 449 && jQuery(ev.target).not("input.isPtTimeSelectActive").length ){ 450 jQuery.ptTimeSelect.closeCntr(); 451 } 452 453 };// jQuery.ptTimeSelect._doCheckMouseClick 454 455 /** 456 * FUNCTION: $().ptTimeSelect() 457 * Attaches a ptTimeSelect widget to each matched element. Matched 458 * elements must be input fields that accept a values (input field).
459 * Each element, when focused upon, will display a time selection 460 * popoup where the user can define a time. 461 * 462 * @memberOf jQuery 463 * 464 * PARAMS: 465 * 466 * @param {Object} [opt] - An object with the options for the time selection widget. 467 * 468 * @param {String} [opt.containerClass=""] - A class to be associated with the popup widget. 469 * 470 * @param {String} [opt.containerWidth=""] - Css width for the container. 471 * 472 * @param {String} [opt.hoursLabel="Hours"] - Label for the Hours. 473 * 474 * @param {String} [opt.minutesLabel="Minutes"] - Label for the Mintues container. 475 * 476 * @param {String} [opt.setButtonLabel="Set"] - Label for the Set button. 477 * 478 * @param {String} [opt.popupImage=""] - The html element (ex. img or text) to be appended next to each 479 * input field and that will display the time select widget upon 480 * click. 481 * 482 * @param {Integer} [opt.zIndex=10] - Integer for the popup widget z-index. 483 * 484 * @param {Function} [opt.onBeforeShow=undefined] - Function to be called before the widget is made visible to the 485 * user. Function is passed 2 arguments: 1) the input field as a 486 * jquery object and 2) the popup widget as a jquery object. 487 * 488 * @param {Function} [opt.onClose=undefined] - Function to be called after closing the popup widget. Function 489 * is passed 1 argument: the input field as a jquery object. 490 * 491 * @param {Bollean} [opt.onFocusDisplay=true] - True or False indicating if popup is auto displayed upon focus 492 * of the input field. 493 * 494 * 495 * RETURN: 496 * @return {jQuery} selection 497 * 498 * 499 * 500 * EXAMPLE: 501 * @example 502 * $('#fooTime').ptTimeSelect(); 503 * 504 */ 505 jQuery.fn.ptTimeSelect = function (opt) { 506 return this.each(function(){ 507 if(this.nodeName.toLowerCase() != 'input') return; 508 var e = jQuery(this); 509 if (e.hasClass('hasPtTimeSelect')){ 510 return this; 511 } 512 var thisOpt = {}; 513 thisOpt = $.extend(thisOpt, jQuery.ptTimeSelect.options, opt); 514 e.addClass('hasPtTimeSelect').data("ptTimeSelectOptions", thisOpt); 515 516 //Wrap the input field in a <div> element with 517 // a unique id for later referencing. 518 if (thisOpt.popupImage || !thisOpt.onFocusDisplay) { 519 var img = jQuery('<span> </span><a href="javascript:" onclick="' + 520 'jQuery.ptTimeSelect.openCntr(jQuery(this).data(\'ptTimeSelectEle\'));">' + 521 thisOpt.popupImage + '</a>' 522 ) 523 .data("ptTimeSelectEle", e); 524 e.after(img); 525 } 526 if (thisOpt.onFocusDisplay){ 527 e.focus(function(){ 528 jQuery.ptTimeSelect.openCntr(this); 529 }); 530 } 531 return this; 532 }); 533 };// End of jQuery.fn.ptTimeSelect 534 535})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.