jquery-datetimepicker 0.0.1

data/README.md

@@ -0,0 +1 @@
+test

data/vendor/assets/javascripts/jquery-datetimepicker.js

@@ -0,0 +1,310 @@
+(function($) {
+  $.fn.dateTimePicker = function(opts) {
+    var thresholdDictionary = {
+      'minute'  : 'Minutes before',
+      'hour'    : 'Hours before',
+      'day'     : 'Days before',
+      'week'    : 'Weeks before'
+    }
+
+    var methods = {
+      insertCalendar: function(element, dateTimePicker) {
+        methods.bindMethods(element, dateTimePicker);
+        element.data('activeDateTimePicker', true);
+        // Add datepicker
+        dateTimePicker.find('.reminder-date-add').datepicker({
+          onSelect: function(dateText, _datepickerInstance) {
+            options.onSelectDate.apply(element, [dateText, _datepickerInstance, this]); // 'this' refers to associated input field (see docs for jQuery-UI datepicker)
+          },
+          defaultDate: (typeof(options.defaultDate) == 'function') ? options.defaultDate.apply(element) : options.defaultDate
+        });
+
+        // convenience method for getting to datepicker element
+        dateTimePicker.dtElement = dateTimePicker.find('.reminder-date-add');
+
+        if (options.hideAlertUI) {
+          dateTimePicker.find('.add-alert-container').hide();
+          dateTimePicker.find('.alert-add').hide();
+        } else {
+          // Show UI if there are alerts set by default if (dateTimePicker.alerts.length > 0)
+          // Set default alerts
+          var defaultAlerts;
+          if (typeof(options.defaultAlerts) == 'function') {
+            defaultAlerts = options.defaultAlerts.apply(element) || [];
+          }
+          else if (typeof(options.defaultAlerts) == 'array') {
+            defaultAlerts = options.defaultAlerts;
+          }
+
+          $.each(defaultAlerts, function(i, _alert) {
+            dateTimePicker.setAlert(_alert.time, _alert.threshold, _alert.data);
+          });
+
+          // Show UI if there are alerts set by default
+          if (dateTimePicker.alerts.length > 0) {
+            dateTimePicker.find('.alert-trigger-container .slider').addClass('on');
+            dateTimePicker.find('.alert-add').show();
+          }
+        }
+
+        // Insert the calendar into the DOM
+        if (typeof(options.insert) == 'function') {
+          options.insert.apply(element, [dateTimePicker]);
+        }
+        else if (typeof(options.insert) == 'string') {
+          $(options.insert).append(dateTimePicker);
+        }
+        else {
+          element.append(dateTimePicker);
+        }
+
+        // Pick alert threshold (e.g. minutes, hours, days, weeks)
+        dateTimePicker.find('.alert-before ul li').click(function() {
+          dateTimePicker.find('.alert-before .selected').replaceWith(
+            $(this).find('a').clone().addClass('selected')
+          );
+        });
+
+        // Set default time
+        if (typeof(options.defaultTime) == 'function') {
+          dateTimePicker.setTime(options.defaultTime.apply(element));
+        }else{
+          dateTimePicker.setTime(options.defaultTime);
+        }
+      },
+      bindMethods: function(element, dateTimePicker) {
+        dateTimePicker.getDateTime = methods.getDateTime.bind(dateTimePicker);
+        dateTimePicker.getDate = methods.getDate.bind(dateTimePicker);
+        dateTimePicker.getTime = methods.getTime.bind(dateTimePicker);
+        dateTimePicker.getAlerts = methods.getAlerts.bind(dateTimePicker);
+
+        dateTimePicker.setTime = methods.setTime.bind(dateTimePicker);
+        dateTimePicker.setAlert = methods.setAlert.bind(dateTimePicker);
+        dateTimePicker.removeAlert = methods.removeAlert.bind(dateTimePicker);
+        dateTimePicker.destroy = methods.destroy.bind(dateTimePicker);
+        dateTimePicker.thresholdDictionary = thresholdDictionary;
+        dateTimePicker.alerts = [];
+        dateTimePicker.element = element;
+
+        dateTimePicker.bind('clickoutside', function(e) {
+          //*****************************************************
+          // datepicker removes some elements from the dom, and
+          // that triggers clickoutside. So we need to check for elements
+          // that have been removed from the DOM.
+
+          if ($(e.target).parents('.ui-datepicker-header').length > 0) return; // Cycling through months
+          if ($(e.target).parents('.alert-record').length > 0) return;  // Removal of alerts
+          //*****************************************************
+
+          // Looks like we're clear to remove
+          if (options.onClickOutside == 'cancel') {
+            options.onCancel.apply(element, [dateTimePicker]);
+          } else if (options.onClickOutside == 'OK') {
+            options.onOK.apply(element, [dateTimePicker]);
+          }
+          dateTimePicker.destroy();
+        });
+
+        dateTimePicker.find('.clock-down-arrow,.clock-up-arrow').click(function () {
+          methods.changeTime.apply($(this), [dateTimePicker]);
+        });
+
+        // Cancel button
+        dateTimePicker.find('.cancel').click(function() {
+          options.onCancel.apply(element, [dateTimePicker]);
+          dateTimePicker.destroy();
+        });
+
+        // OK button
+        dateTimePicker.find('.ok').click(function() {
+          options.onOK.apply(element, [dateTimePicker]);
+          dateTimePicker.destroy();
+        });
+
+        // Toggle alerts callback
+        dateTimePicker.find('.alert-trigger-container').click(function(e){
+          var slider = $(this).find('.slider');
+          slider.toggleClass("on");
+
+          if(slider.hasClass("on")) {
+            dateTimePicker.find('.alert-add').show();
+          } else {
+            // Destroy all alerts if use decides to hide UI
+            dateTimePicker.find('.alert-add').hide();
+
+            // callback for onRemoveAlert
+            $.each($(dateTimePicker.alerts), function(i, _alert) {
+              dateTimePicker.removeAlert($(_alert['recordElement']));
+            });
+          }
+        });
+
+        // Create alert callback
+        dateTimePicker.find('.btn-add-alert').click(function(){
+          var alertTime = dateTimePicker.find('.add-reminder-time-input input').val();
+          var alertThreshold = dateTimePicker.find('.alert-before .selected').data('threshold');
+          dateTimePicker.setAlert(alertTime, alertThreshold);
+        });
+      },
+      setAlert: function(alertTime, alertThreshold, _data) {
+        var alertRecord = $("<div class='alert-record'><span class='alert-time'>" + alertTime + "</span> <span data-threshold-value='"+alertThreshold+"' class='alert-threshold'>" + (this.thresholdDictionary[alertThreshold] || alertThreshold) + "</span></div>");
+        var cancelAlert = $("<span class='cancel'>X</span>");
+
+        var dateTimePicker = this;
+        cancelAlert.click(function() {
+          dateTimePicker.removeAlert($(this).closest('.alert-record'));
+        });
+
+        alertRecord.append(cancelAlert);
+        dateTimePicker.find('.scheduled-alerts').append(alertRecord);
+
+        var alertObject = methods.buildAlertObject(alertRecord);
+        dateTimePicker.alerts.push(alertObject);
+
+        // Custom data members for alert (can be set using defaultAlerts option)
+        if (_data) {
+          $.each(_data, function(attr, value) {
+            alertRecord.attr("data-"+attr, value);
+            alertRecord.data(attr, value);
+          });
+
+          alertObject.data = _data;
+        }
+
+        options.onSetAlert.apply(alertRecord, [alertObject]);
+
+        return alertObject;
+      },
+      removeAlert: function(alertDOMObject) {
+        // Note: Have to use [0] to get DOM element out of jQuery object (http://stackoverflow.com/questions/6325671/jquery-inarray-locating-html-element)
+        var arrayPosition = $.inArray(alertDOMObject[0], alertDOMObject.parent('.scheduled-alerts').children('.alert-record'));
+
+        options.onRemoveAlert.apply(this.alerts[arrayPosition]['recordElement'], [this.alerts[arrayPosition]]);
+
+        alertDOMObject.remove(); // remove it from DOM
+        this.alerts.splice(arrayPosition, 1); // Remove it from alerts array
+      },
+      buildAlertObject: function(alertRecord) {
+        var alertTime = parseInt($(alertRecord).find('.alert-time').html());
+        var alertThreshold = $(alertRecord).find('.alert-threshold').data('threshold-value');
+        return {time: alertTime, threshold: alertThreshold, recordElement: alertRecord};
+      },
+      destroy: function() {
+        this.element.data('activeDateTimePicker', false);
+        this.remove();
+      },
+      defaultTime: function() {
+        var today=new Date();
+        var hour = today.getHours() + 1 > 24 ? 0 : today.getHours() + 1
+        return methods.toTimeObject(hour, 0);
+      },
+      toTimeObject: function(hour, minute, ampm) {
+        var m1,m2;
+        hour = parseInt(hour);
+        minute = parseInt(minute);
+
+        if (hour >= 12) {
+          if (hour != 12) hour = hour - 12;
+          if (!ampm) ampm = 'pm';
+        }
+        else if (hour <= 11) {
+          if (hour == 0) hour = 1;
+          if (!ampm) ampm = 'am';
+        }
+
+        if (minute > 10) {
+          m1 = parseInt((""+minute)[0]);
+          m2 = parseInt((""+minute)[1]);
+        } else {
+          m1 = 0;
+          m2 = minute;
+        }
+
+        return { "hour" : hour,
+                 "minuteOne" : m1,
+                 "minuteTwo" : m2,
+                 "ampm" : ampm };
+      },
+      setTime: function(timeObject) {
+        if (!this.time) this.time = methods.defaultTime();
+        $.extend(this.time, timeObject);
+
+        this.find('.clock-hour-one .clock-value').html(this.time['hour']);
+        this.find('.clock-minute-one .clock-value').html(this.time['minuteOne']);
+        this.find('.clock-minute-two .clock-value').html(this.time['minuteTwo']);
+        this.find('.clock-ampm .clock-value').html(this.time['ampm']);
+      },
+      changeTime: function(dateTimePicker) {
+        var value = parseInt($(this).siblings('.clock-value').html());
+        var min = parseInt($(this).closest('[data-min]').data('min') || '0');
+        var max = parseInt($(this).closest('[data-max]').data('max') || '0');
+        var _type = $(this).closest('[data-clock-value]').data('clock-value');
+        var next;
+
+        if (_type == 'ampm') {
+          next = ($(this).siblings('.clock-value').html() == 'am' ? 'pm' : 'am');
+        } else {
+          if ($(this).hasClass('clock-up-arrow')) {
+            next = ((value + 1) > max) ? min : value + 1;
+          } else {
+            next = ((value - 1) < min) ? max : value - 1;
+          }
+        }
+
+        dateTimePicker.time[_type] = next;
+        dateTimePicker.setTime();
+      },
+      getDateTime: function() {
+        var date = this.dtElement.datepicker('getDate');
+        var time = this.time;
+        var minute = parseInt(time.minuteOne + "" + time.minuteTwo);
+        var hour = parseInt(time.hour);
+
+        if (hour < 12 && time.ampm == 'pm'){
+          hour = hour + 12;
+        }
+        else if (hour == 12 && time.ampm == 'am') {
+          hour = 0;
+        }
+
+        date.setHours(hour);
+        date.setMinutes(minute);
+        return date;
+      },
+      getDate: function() {
+        var d = this.dtElement.datepicker('getDate');
+        return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
+      },
+      getTime: function() {
+        return this.time;
+      },
+      getAlerts: function() {
+        return this.alerts;
+      }
+    };
+
+    var cal = '<div class="arrow_box-ca calendar-main-container"><div class="calender-container"> <div class="reminder-date-add"> </div> <ul class="reminder-time-set"> <li class="clock-hour-one" data-min="1" data-max="12" data-clock-value="hour"> <div class="clock-up-arrow"></div> <div class="clock-value">12</div> <div class="clock-down-arrow"></div> </li> <li class="clock-operator">:</li> <li class="clock-minute-one" data-max="5" data-clock-value="minuteOne"> <div class="clock-up-arrow"></div> <div class="clock-value">0</div> <div class="clock-down-arrow"></div> </li> <li class="clock-minute-two" data-max="9" data-clock-value="minuteTwo"> <div class="clock-up-arrow"></div> <div class="clock-value">0</div> <div class="clock-down-arrow"></div> </li> <li class="clock-ampm" data-clock-value="ampm"> <div class="clock-up-arrow"></div> <div class="clock-value">pm</div> <div class="clock-down-arrow"></div> </li> </ul> <div class="add-alert-container"> <div class="alerts-label">Alerts</div> <div class="alert-trigger-container"> <div class="alert-trigger"> <div class="slider off"></div> </div> <div class="trigger-labels"> <span class="pull-left">OFF</span> <span class="pull-right">ON</span> <br style="clear:both;"> </div> </div> <br style="clear:both;"> <div class="scheduled-alerts"></div> </div> <div class="alert-add"> <div class="a-label">Alerts</div> <div class="alert-settings"> <ul> <li class="add-reminder-time-input"><input type="text" value="5"></li> <li class="alert-before"> <a href="#" class="selected" data-format="M" title="Min" data-threshold="minute"><span class="alert-when">Minutes</span> <span class="before-label">before</span></a> <ul><li><a href="#" data-format="M" title="Minutes" data-threshold="minute"><span class="alert-when">Minutes</span> <span class="before-label">before</span></a></li><li><a href="#" title="Hours" data-format="H" data-threshold="hour"><span class="alert-when">Hours</span> <span class="alert-when">before</span></a></li> <li><a href="#" title="Days" data-format="D" data-threshold="day"><span class="alert-when">Days</span> <span class="before-label">before</span></a></li> <li><a href="#" title="Weeks" data-format="W" data-threshold="week"><span class="alert-when">Weeks</span> <span class="before-label">before</span></a></li> </ul> </li> <li class="btn-add-alert">+</li> <br style="clear:both;"> </ul> </div> </div> </div><div class="actions"><span class="cancel">Cancel</span><span class="ok">OK</span></div></div>';
+
+    var options = $.extend({
+      onClickOutside: 'OK', // 'OK' or 'cancel'
+      onSelectDate: $.noop, // (optional) When user clicks on a date. Passes dateText, datepicker instance, and associate input field as arguments.
+      onSetAlert: $.noop, // (optional) passes added alert as argument
+      onRemoveAlert: $.noop, // (optional) passes removed alert and alert instance as argument
+      onCancel: $.noop,
+      onOK: $.noop,
+      defaultDate: null,
+      defaultTime: null, // (optional) {hour: 12, minuteOne: 0, minuteTwo: 5, ampm: 'pm'} OR function that returns object
+      defaultAlerts: $.noop, // (optional) [{time: 5, threshold: 'Mins', data : {'alert-id' : 1}}, {time: 10, threshold: 'Days'}]
+      insert: null, // (optional) css id or function where you want to add the widget
+      hideAlertUI: null
+    }, opts);
+
+    return $(document).on('click', this.selector, function(e) {
+      if (!$(this).data('activeDateTimePicker')) {
+        methods.insertCalendar($(this), $(cal));
+      }
+
+      e.stopPropagation();
+    });
+  }
+})(jQuery);

data/vendor/assets/stylesheets/jquery-datetimepicker.css

@@ -0,0 +1,339 @@
+.arrow_box-ca {
+	background: rgb(221, 221, 221);
+	width: 232px;
+	position: absolute;
+	z-index: 1000;
+	border: thin solid rgb(173, 173, 173);
+}
+
+.arrow_box-ca:after, .arrow_box-ca:before {
+	bottom: 100%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.arrow_box-ca:after {
+	border-color: rgba(255, 255, 255, 0);
+	border-bottom-color: #dddddd;
+	border-width: 9px;
+	left: 50%;
+	margin-left: -9px;
+}
+
+.arrow_box-ca:before {
+	border-color: rgba(128, 201, 232, 0);
+	border-bottom-color: #adadad;
+	border-width: 10px;
+	left: 50%;
+	margin-left: -10px;
+}
+
+.calender-container {
+	display: inline-block;
+	background: rgb(231, 231, 231);
+	.actions{
+		display: none;
+	}
+	.reminder-date-add{
+		width: 232px;
+		margin: 0 auto;
+		.ui-datepicker-inline{
+				padding: 0;
+				width: auto;
+		}
+		.ui-corner-all{
+			-webkit-border-radius: 0;
+			border-radius: 0;
+			border: none;
+			background: transparent;
+		}
+		.ui-datepicker-header{
+			border: none;
+			background: transparent;
+			padding:0;
+			color: rgb(184, 184, 184);
+			height: 40px;
+			.ui-datepicker-prev{
+				top: 5px;
+				left: 13px;
+				span{
+					background: url(backend-v2/cal-month-prev-arrow.png)  0 0 no-repeat;
+					top: 13px;
+					margin-top: 0;
+					left: 9px;
+				}
+			}
+			.ui-datepicker-next{
+				top: 7px;
+				right: 0;
+				span{
+					background: url(backend-v2/cal-month-next-arrow.png) 0 0 no-repeat;;
+					top:18px;
+				}
+			}
+		}
+		.ui-datepicker-calendar{
+			border-left: none;
+			thead{
+				background: rgb(74, 154, 255);
+				th{
+					color: #fff;
+				}
+			}
+			td{
+				border: 0px;
+			}
+		}
+		.ui-state-default{
+			background: transparent;
+			color: rgb(143, 143, 143);
+		}
+		.ui-datepicker-title{
+			font-weight: normal;
+		}
+		.ui-datepicker td{
+			padding: 0;
+			a{
+				padding: 5px;
+				text-align: center;
+				text-decoration: none;
+			}
+		}
+		.ui-state-default, .ui-widget-content .ui-state-default{
+			border-top: thin solid rgb(241, 241, 241);
+			border-bottom: thin solid #d1d1d1;
+			border-left: thin solid #d1d1d1;
+			border-right: thin solid rgb(241, 241, 241);
+			color: rgb(121, 121, 121);
+		}
+		.ui-state-active{
+			background: rgb(182, 182, 182);
+			color: #fff;
+		}
+		.ui-datepicker-next{
+			right: 15px;
+		}
+		.ui-datepicker-next:hover{
+			right: 15px;
+		}
+		.ui-datepicker-title{
+			line-height: 3em;
+			color: rgb(134, 134, 134);
+			text-transform: uppercase;
+		}
+	}
+	.reminder-time-set {
+		width: 180px;
+		margin: 20px auto;
+		li{
+			display: inline-block;
+			.clock-value{
+				padding: 12px 5px;
+				font-size: 26px;
+				color: #868686;
+				background: #fff;
+				text-align: center;
+			}
+			.clock-up-arrow{
+				height: 10px;
+				background: url(backend-v2/up-arrow-cal.png) no-repeat center center;
+				width: 24px;
+				margin-bottom: 5px;
+				cursor: pointer;
+			}
+			.clock-down-arrow{
+				height: 10px;
+				background: url(backend-v2/down-arrow-cal.png) no-repeat center center;
+				width: 24px;
+				margin-top: 5px;
+				cursor: pointer;
+			}
+		}
+		li.clock-time {
+			.clock-up-arrow, .clock-down-arrow{
+				width: 50px;
+			}
+		}
+		.clock-operator {
+				font-size: 26px;
+				color: #868686;
+				padding: 0 5px;
+			}
+		}
+		.scheduled-alerts{
+			overflow: auto;
+			margin-left: -1px;
+			margin-bottom: 10px;
+			margin-top: 10px;
+	    .alert-record {
+	      background-color: #fff;
+	      text-align: left;
+	      overflow: hidden;
+	      padding: 5px;
+	      .cancel {
+	        cursor: pointer;
+	        float: right;
+	        display: block;
+	        background-color: #eee;
+	      }
+	    }
+    }
+
+		.add-alert-container{
+					text-align: center;
+					color: #868686;
+					border-top: thin solid #cfcfce;
+					padding: 5px 10px;
+
+					.alerts-label{
+						float: left;
+						font-size: 12px;
+						background: url(backend-v2/reminder-env.png) no-repeat 0 center;
+						padding: 20px 35px;
+					}
+
+					.alert-trigger-container{
+						float:right;
+						padding: 0 10px;
+					}
+
+					.alert-trigger{
+						position: relative;
+						background: #fff;
+						height:17px;
+						width: 50px;
+						margin: 9px 0;
+						border-radius: 10px;
+						-webkit-border-radius: 10px;
+						overflow: hidden;
+						.slider{
+							position: absolute;
+							height: 100%;
+							width: 17px;
+							top: 0;
+							border-radius: 10px;
+						-webkit-border-radius: 10px;
+							cursor: pointer;
+						}
+						.slider.off{
+							background: #b6b6b6;
+
+						}
+						.slider.on{
+							background: #4a9aff;
+							right: 0;
+						}
+					}
+
+					.trigger-labels{
+						font-size: 10px;
+					}
+				}
+
+				.alert-add{
+					background: #4a9aff;
+					padding: 10px;
+					display: none;
+					color: #fff;
+					.alert-settings{
+						a{
+						 color: #fff !important;
+						}
+						>ul{
+						display: inline-block;
+						cursor: pointer;
+						>li{
+							float:left;
+							background: #e7e7e7;
+							padding: 10px 0;
+							color:#4a9aff;
+							font-size: 20px;
+							width: 50px;
+							text-align: center;
+						}
+						li.alert-before{
+							background: #3988e9;
+							color: #fff;
+							font-size: 12px;
+							width: 110px;
+							text-align: left;
+							padding: 0;
+							overflow:hidden;
+							position: relative;
+							a{
+								color: #fff;
+								padding: 8px 10px;
+								display: block;
+
+							}
+							ul{
+								position: absolute;
+								width: 100%;
+								background: #3988e9;
+								li{
+									a{
+										border-top: thin solid #fff;
+									}
+								}
+							}
+						}
+						li.alert-before:hover{
+							overflow: visible;
+						}
+						li.add-reminder-time-input{
+							padding:0;
+							input{
+								height: 25px;
+								margin: 2px;
+								line-height: 25px;
+								width: 37px;
+								text-align: center;
+								background: transparent;
+								border: none;
+								outline: none;
+								color: #4a9aff;
+								font-size: 15px;
+							}
+						}
+						li.btn-add-alert{
+							font-weight: bold;
+							font-size: 32px;
+							padding: 8px 0;
+						}
+					}
+					}
+					a.selected{
+						background-image: url(backend-v2/table-sort-arrow-down.png);
+						background-position: 99px center;
+						background-repeat: no-repeat;
+					}
+				}
+
+				.add-reminder-trigger-show{
+					overflow: visible !important;
+					background: rgb(231, 231, 231);
+				}
+
+}
+.actions{
+	float:right;
+	span{
+		display: inline-block;
+		padding: 5px 10px;
+		min-width: 40px;
+		text-align:center;
+		margin: 15px 5px;
+		cursor: pointer;
+	}
+	.cancel{
+		background: #b6b6b6;
+	}
+	.ok{
+		background: #4a9aff;
+		color: #fff;
+	}
+}

metadata

@@ -0,0 +1,50 @@
+--- !ruby/object:Gem::Specification
+name: jquery-datetimepicker
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Aldo Sarmiento
+- Chris Kendrick
+- Clifford Simon
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-06-03 00:00:00.000000000 Z
+dependencies: []
+description: Simple pop up widget for picking a date and time. Also can set reminders
+  and alerts
+email: cliff@bigpurpledot.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- vendor/assets/javascripts/jquery-datetimepicker.js
+- vendor/assets/stylesheets/jquery-datetimepicker.css
+- README.md
+homepage: http://rubygems.org/gems/jquery-datetimepicker
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: Date and Time Picker into one!
+test_files: []