RisvanaCybro
12 months ago
4 changed files with 321 additions and 5 deletions
@ -0,0 +1 @@ |
|||
.wickedpicker{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-shadow:0 0 0 1px rgba(14,41,57,.12),0 2px 5px rgba(14,41,57,.44),inset 0 -1px 2px rgba(14,41,57,.15);background:#fefefe;margin:0 auto;border-radius:.1px;width:270px;height:130px;font-size:14px;display:none}.wickedpicker__title{background-image:-webkit-linear-gradient(top,#fff 0,#f2f2f2 100%);position:relative;background:#f2f2f2;margin:0 auto;border-bottom:1px solid #e5e5e5;padding:12px 11px 10px 15px;color:#4C4C4C;font-size:inherit}.wickedpicker__close{-webkit-transform:translateY(-25%);-moz-transform:translateY(-25%);-ms-transform:translateY(-25%);-o-transform:translateY(-25%);transform:translateY(-25%);position:absolute;top:25%;right:10px;color:#34495e;cursor:pointer}.wickedpicker__close:before{content:'\00d7'}.wickedpicker__controls{padding:10px 0;line-height:normal;margin:0}.wickedpicker__controls__control,.wickedpicker__controls__control--separator{vertical-align:middle;display:inline-block;font-size:inherit;margin:0 auto;width:35px;letter-spacing:1.3px}.wickedpicker__controls__control-down,.wickedpicker__controls__control-up{color:#34495e;position:relative;display:block;margin:3px auto;font-size:18px;cursor:pointer}.wickedpicker__controls__control-up:before{content:'\e800'}.wickedpicker__controls__control-down:after{content:'\e801'}.wickedpicker__controls__control--separator{width:5px}.text-center,.wickedpicker__controls,.wickedpicker__controls__control,.wickedpicker__controls__control--separator,.wickedpicker__controls__control-down,.wickedpicker__controls__control-up,.wickedpicker__title{text-align:center}.hover-state{color:#3498db}@font-face{font-family:fontello;src:url(../fonts/fontello.eot?52602240);src:url(../fonts/fontello.eot?52602240#iefix) format("embedded-opentype"),url(../fonts/fontello.woff?52602240) format("woff"),url(../fonts/fontello.ttf?52602240) format("truetype"),url(../fonts/fontello.svg?52602240#fontello) format("svg");font-weight:400;font-style:normal}.fontello-after:after,.fontello:before,.wickedpicker__controls__control-down:after,.wickedpicker__controls__control-up:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} |
|||
@ -0,0 +1,315 @@ |
|||
! function($, window, document) { |
|||
"use strict"; |
|||
|
|||
function Wickedpicker(e, t) { |
|||
this.element = $(e), this.options = $.extend({}, defaults, t), this.element.addClass("hasWickedpicker"), this.element.attr("onkeypress", "return false;"), this.element.attr("aria-showingpicker", "false"), this.createPicker(), this.timepicker = $(".wickedpicker"), this.up = $("." + this.options.upArrow.split(/\s+/) |
|||
.join(".")), this.down = $("." + this.options.downArrow.split(/\s+/) |
|||
.join(".")), this.separator = $(".wickedpicker__controls__control--separator"), this.hoursElem = $(".wickedpicker__controls__control--hours"), this.minutesElem = $(".wickedpicker__controls__control--minutes"), this.secondsElem = $(".wickedpicker__controls__control--seconds"), this.meridiemElem = $(".wickedpicker__controls__control--meridiem"), this.close = $("." + this.options.close.split(/\s+/) |
|||
.join(".")); |
|||
var i = this.timeArrayFromString(this.options.now); |
|||
this.options.now = new Date(today.getFullYear(), today.getMonth(), today.getDate(), i[0], i[1], i[2]), this.selectedHour = this.parseHours(this.options.now.getHours()), this.selectedMin = this.parseSecMin(this.options.now.getMinutes()), this.selectedSec = this.parseSecMin(this.options.now.getSeconds()), this.selectedMeridiem = this.parseMeridiem(this.options.now.getHours()), this.setHoverState(), this.attach(e), this.setText(e) |
|||
} |
|||
"function" != typeof String.prototype.endsWith && (String.prototype.endsWith = function(e) { |
|||
return e.length > 0 && this.substring(this.length - e.length, this.length) === e |
|||
}); |
|||
var isMobile = function() { |
|||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) |
|||
}, |
|||
today = new Date, |
|||
pluginName = "wickedpicker", |
|||
defaults = { |
|||
now: today.getHours() + ":" + today.getMinutes(), |
|||
twentyFour: !1, |
|||
upArrow: "wickedpicker__controls__control-up", |
|||
downArrow: "wickedpicker__controls__control-down", |
|||
close: "wickedpicker__close", |
|||
hoverState: "hover-state", |
|||
title: "Timepicker", |
|||
showSeconds: !1, |
|||
timeSeparator: " : ", |
|||
secondsInterval: 1, |
|||
minutesInterval: 1, |
|||
beforeShow: null, |
|||
afterShow: null, |
|||
show: null, |
|||
clearable: !1, |
|||
closeOnClickOutside: !0, |
|||
onClickOutside: function() {} |
|||
}; |
|||
$.extend(Wickedpicker.prototype, { |
|||
showPicker: function(e) { |
|||
"function" == typeof this.options.beforeShow && this.options.beforeShow(e, this.timepicker); |
|||
var t = $(e) |
|||
.offset(); |
|||
if($(e) |
|||
.attr({ |
|||
"aria-showingpicker": "true", |
|||
tabindex: -1 |
|||
}), this.setText(e), this.showHideMeridiemControl(), this.getText(e) !== this.getTime()) { |
|||
var i = this.getText(e), |
|||
s = /\s[ap]m$/i, |
|||
o = s.test(i) ? i.substr(-2, 2) : null, |
|||
n = i.replace(s, "") |
|||
.split(this.options.timeSeparator), |
|||
r = {}; |
|||
r.hours = n[0], r.minutes = n[1], r.meridiem = o, this.options.showSeconds && (r.seconds = n[2]), this.setTime(r) |
|||
} |
|||
this.timepicker.css({ |
|||
"z-index": this.element.css("z-index") + 1, |
|||
position: "absolute", |
|||
left: t.left, |
|||
top: t.top + $(e)[0].offsetHeight |
|||
}) |
|||
.show(), "function" == typeof this.options.show && this.options.show(e, this.timepicker), this.handleTimeAdjustments(e) |
|||
}, |
|||
hideTimepicker: function(e) { |
|||
this.timepicker.hide(), "function" == typeof this.options.afterShow && this.options.afterShow(e, this.timepicker), { |
|||
start: function() { |
|||
var e = $.Deferred(); |
|||
return $('[aria-showingpicker="true"]') |
|||
.attr("aria-showingpicker", "false"), e.promise() |
|||
} |
|||
}.start() |
|||
.then(function(e) { |
|||
setTimeout(function() { |
|||
$('[aria-showingpicker="false"]') |
|||
.attr("tabindex", e) |
|||
}, 400) |
|||
}(0)) |
|||
}, |
|||
createPicker: function() { |
|||
if(0 === $(".wickedpicker") |
|||
.length) { |
|||
var e = '<div class="wickedpicker"><p class="wickedpicker__title">' + this.options.title + '<span class="wickedpicker__close"></span></p><ul class="wickedpicker__controls"><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--hours" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li><li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--minutes" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li>'; |
|||
this.options.showSeconds && (e += '<li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--seconds" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span> </li>'), e += '<li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--meridiem" tabindex="-1">AM</span><span class="' + this.options.downArrow + '"></span></li></ul></div>', $("body") |
|||
.append(e), this.attachKeyboardEvents() |
|||
} |
|||
}, |
|||
showHideMeridiemControl: function() { |
|||
!1 === this.options.twentyFour ? $(this.meridiemElem) |
|||
.parent() |
|||
.show() : $(this.meridiemElem) |
|||
.parent() |
|||
.hide() |
|||
}, |
|||
showHideSecondsControl: function() { |
|||
this.options.showSeconds ? $(this.secondsElem) |
|||
.parent() |
|||
.show() : $(this.secondsElem) |
|||
.parent() |
|||
.hide() |
|||
}, |
|||
attach: function(e) { |
|||
var t = this; |
|||
this.options.clearable && t.makePickerInputClearable(e), $(e) |
|||
.attr("tabindex", 0), $(e) |
|||
.on("click focus", function(e) { |
|||
$(t.timepicker) |
|||
.is(":hidden") && (t.showPicker($(this)), window.lastTimePickerControl = $(this), $(t.hoursElem) |
|||
.focus()) |
|||
}); |
|||
var i = function(e) { |
|||
if($(t.timepicker) |
|||
.is(":visible")) { |
|||
if($(e.target) |
|||
.is(t.close)) t.hideTimepicker(window.lastTimePickerControl); |
|||
else if($(e.target) |
|||
.closest(t.timepicker) |
|||
.length || $(e.target) |
|||
.closest($(".hasWickedpicker")) |
|||
.length) e.stopPropagation(); |
|||
else { |
|||
if("function" == typeof t.options.onClickOutside ? t.options.onClickOutside() : console.warn("Type of onClickOutside must be a function"), !t.options.closeOnClickOutside) return; |
|||
t.hideTimepicker(window.lastTimePickerControl) |
|||
} |
|||
window.lastTimePickerControl = null |
|||
} |
|||
}; |
|||
$(document) |
|||
.off("click", i) |
|||
.on("click", i) |
|||
}, |
|||
attachKeyboardEvents: function() { |
|||
$(document) |
|||
.on("keydown", $.proxy(function(e) { |
|||
switch(e.keyCode) { |
|||
case 9: |
|||
"hasWickedpicker" !== e.target.className && $(this.close) |
|||
.trigger("click"); |
|||
break; |
|||
case 27: |
|||
$(this.close) |
|||
.trigger("click"); |
|||
break; |
|||
case 37: |
|||
e.target.className !== this.hoursElem[0].className ? $(e.target) |
|||
.parent() |
|||
.prevAll("li") |
|||
.not(this.separator.selector) |
|||
.first() |
|||
.children()[1].focus() : $(e.target) |
|||
.parent() |
|||
.siblings(":last") |
|||
.children()[1].focus(); |
|||
break; |
|||
case 39: |
|||
e.target.className !== this.meridiemElem[0].className ? $(e.target) |
|||
.parent() |
|||
.nextAll("li") |
|||
.not(this.separator.selector) |
|||
.first() |
|||
.children()[1].focus() : $(e.target) |
|||
.parent() |
|||
.siblings(":first") |
|||
.children()[1].focus(); |
|||
break; |
|||
case 38: |
|||
$(":focus") |
|||
.prev() |
|||
.trigger("click"); |
|||
break; |
|||
case 40: |
|||
$(":focus") |
|||
.next() |
|||
.trigger("click") |
|||
} |
|||
}, this)) |
|||
}, |
|||
setTime: function(e) { |
|||
this.setHours(e.hours), this.setMinutes(e.minutes), this.setMeridiem(e.meridiem), this.options.showSeconds && this.setSeconds(e.seconds) |
|||
}, |
|||
getTime: function() { |
|||
return [this.formatTime(this.getHours(), this.getMinutes(), this.getMeridiem(), this.getSeconds())] |
|||
}, |
|||
setHours: function(e) { |
|||
var t = new Date; |
|||
t.setHours(e); |
|||
var i = this.parseHours(t.getHours()); |
|||
this.hoursElem.text(i), this.selectedHour = i |
|||
}, |
|||
getHours: function() { |
|||
var e = new Date; |
|||
return e.setHours(this.hoursElem.text()), e.getHours() |
|||
}, |
|||
parseHours: function(e) { |
|||
return !1 === this.options.twentyFour ? (e + 11) % 12 + 1 : e < 10 ? "0" + e : e |
|||
}, |
|||
setMinutes: function(e) { |
|||
var t = new Date; |
|||
t.setMinutes(e); |
|||
var i = t.getMinutes(), |
|||
s = this.parseSecMin(i); |
|||
this.minutesElem.text(s), this.selectedMin = s |
|||
}, |
|||
getMinutes: function() { |
|||
var e = new Date; |
|||
return e.setMinutes(this.minutesElem.text()), e.getMinutes() |
|||
}, |
|||
parseSecMin: function(e) { |
|||
return (e < 10 ? "0" : "") + e |
|||
}, |
|||
setMeridiem: function(e) { |
|||
var t = ""; |
|||
t = void 0 === e ? "PM" === this.getMeridiem() ? "AM" : "PM" : e, this.meridiemElem.text(t), this.selectedMeridiem = t |
|||
}, |
|||
getMeridiem: function() { |
|||
return this.meridiemElem.text() |
|||
}, |
|||
setSeconds: function(e) { |
|||
var t = new Date; |
|||
t.setSeconds(e); |
|||
var i = t.getSeconds(), |
|||
s = this.parseSecMin(i); |
|||
this.secondsElem.text(s), this.selectedSec = s |
|||
}, |
|||
getSeconds: function() { |
|||
var e = new Date; |
|||
return e.setSeconds(this.secondsElem.text()), e.getSeconds() |
|||
}, |
|||
parseMeridiem: function(e) { |
|||
return e > 11 ? "PM" : "AM" |
|||
}, |
|||
handleTimeAdjustments: function(e) { |
|||
var t = 0; |
|||
$(this.up) |
|||
.add(this.down) |
|||
.off("mousedown click touchstart") |
|||
.on("mousedown click", { |
|||
Wickedpicker: this, |
|||
input: e |
|||
}, function(e) { |
|||
if(1 != e.which) return !1; |
|||
var i = this.className.indexOf("up") > -1 ? "+" : "-", |
|||
s = e.data; |
|||
"mousedown" == e.type ? t = setInterval($.proxy(function(e) { |
|||
e.Wickedpicker.changeValue(i, e.input, this) |
|||
}, this, { |
|||
Wickedpicker: s.Wickedpicker, |
|||
input: s.input |
|||
}), 200) : s.Wickedpicker.changeValue(i, s.input, this) |
|||
}) |
|||
.bind("mouseup touchend", function() { |
|||
clearInterval(t) |
|||
}) |
|||
}, |
|||
changeValue: function(operator, input, clicked) { |
|||
var target = "+" === operator ? clicked.nextSibling : clicked.previousSibling, |
|||
targetClass = $(target) |
|||
.attr("class"); |
|||
targetClass.endsWith("hours") ? this.setHours(eval(this.getHours() + operator + 1)) : targetClass.endsWith("minutes") ? this.setMinutes(eval(this.getMinutes() + operator + this.options.minutesInterval)) : targetClass.endsWith("seconds") ? this.setSeconds(eval(this.getSeconds() + operator + this.options.secondsInterval)) : this.setMeridiem(), this.setText(input) |
|||
}, |
|||
setText: function(e) { |
|||
$(e) |
|||
.val(this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec)) |
|||
.change() |
|||
}, |
|||
getText: function(e) { |
|||
return $(e) |
|||
.val() |
|||
}, |
|||
formatTime: function(e, t, i, s) { |
|||
var o = e + this.options.timeSeparator + t; |
|||
return this.options.showSeconds && (o += this.options.timeSeparator + s), !1 === this.options.twentyFour && (o += " " + i), o |
|||
}, |
|||
setHoverState: function() { |
|||
var e = this; |
|||
isMobile() || $(this.up) |
|||
.add(this.down) |
|||
.add(this.close) |
|||
.hover(function() { |
|||
$(this) |
|||
.toggleClass(e.options.hoverState) |
|||
}) |
|||
}, |
|||
makePickerInputClearable: function(e) { |
|||
$(e) |
|||
.wrap('<div class="clearable-picker"></div>') |
|||
.after("<span data-clear-picker>×</span>"), $("[data-clear-picker]") |
|||
.on("click", function(e) { |
|||
$(this) |
|||
.siblings(".hasWickedpicker") |
|||
.val("") |
|||
}) |
|||
}, |
|||
timeArrayFromString: function(e) { |
|||
if(e.length) { |
|||
var t = e.split(":"); |
|||
return t[2] = t.length < 3 ? "00" : t[2], t |
|||
} |
|||
return !1 |
|||
}, |
|||
_time: function() { |
|||
var e = $(this.element) |
|||
.val(); |
|||
return "" === e ? this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec) : e |
|||
}, |
|||
_hide: function() { |
|||
this.hideTimepicker(this.element) |
|||
} |
|||
}), $.fn[pluginName] = function(e, t) { |
|||
return $.isFunction(Wickedpicker.prototype["_" + e]) ? $(this) |
|||
.hasClass("hasWickedpicker") ? void 0 !== t ? $.data($(this)[t], "plugin_" + pluginName)["_" + e]() : $.data($(this)[0], "plugin_" + pluginName)["_" + e]() : void 0 : this.each(function() { |
|||
$.data(this, "plugin_" + pluginName) || $.data(this, "plugin_" + pluginName, new Wickedpicker(this, e)) |
|||
}) |
|||
} |
|||
}(jQuery, window, document); |
|||
Loading…
Reference in new issue