timedropper.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. (function($) {
  2. $.fn.timeDropper = function(options, callbackFnk) {
  3. return $(this).each(function() {
  4. var _td_input = $(this),
  5. _td_input_on = false,
  6. _td_mobile = false,
  7. _td_num = function(n) {
  8. return n < 10 ? '0' + n: n
  9. },
  10. _td_id = $('.td-clock').length,
  11. _td_alert,
  12. _td_event = null,
  13. _td_options = $.extend({
  14. format: 'HH:mm',
  15. autoswitch: false,
  16. meridians: false,
  17. mousewheel: false,
  18. setCurrentTime: true,
  19. init_animation: "fadein",
  20. primaryColor: "#1977CC",
  21. borderColor: "#1977CC",
  22. backgroundColor: "#FFF",
  23. textColor: '#555'
  24. },
  25. options);
  26. var _td_color = function(col, amt) {
  27. var usePound = false;
  28. if (col[0] == "#") {
  29. col = col.slice(1);
  30. usePound = true;
  31. }
  32. var num = parseInt(col, 16);
  33. var r = (num >> 16) + amt;
  34. if (r > 255) r = 255;
  35. else if (r < 0) r = 0;
  36. var b = ((num >> 8) & 0x00FF) + amt;
  37. if (b > 255) b = 255;
  38. else if (b < 0) b = 0;
  39. var g = (num & 0x0000FF) + amt;
  40. if (g > 255) g = 255;
  41. else if (g < 0) g = 0;
  42. return (usePound ? "#": "") + (g | (b << 8) | (r << 16)).toString(16);
  43. };
  44. _td_input.prop({
  45. 'readonly': true
  46. }).addClass('td-input');
  47. $('body').append('<div class="td-wrap td-n2" id="td-clock-' + _td_id + '"><div class="td-overlay"></div><div class="td-clock td-init"><div class="td-deg td-n"><div class="td-select"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 35.4" enable-background="new 0 0 100 35.4" xml:space="preserve"><g><path fill="none" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M98.1,33C85.4,21.5,68.5,14.5,50,14.5S14.6,21.5,1.9,33"/><line fill="none" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1.9" y1="33" x2="1.9" y2="28.6"/><line fill="none" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1.9" y1="33" x2="6.3" y2="33"/><line fill="none" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="98.1" y1="33" x2="93.7" y2="33"/><line fill="none" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="98.1" y1="33" x2="98.1" y2="28.6"/></g></svg></div></div><div class="td-medirian"><span class="td-icon-am td-n">AM</span><span class="td-icon-pm td-n">PM</span></div><div class="td-lancette"><div></div><div></div></div><div class="td-time"><span class="on"></span>:<span></span></div></div></div>');
  48. $('head').append('<style>#td-clock-' + _td_id + ' .td-clock {color:' + _td_options.textColor + ';background: ' + _td_options.backgroundColor + '; box-shadow: 0 0 0 1px ' + _td_options.borderColor + ',0 0 0 8px rgba(0, 0, 0, 0.05); } #td-clock-' + _td_id + ' .td-clock .td-time span.on { color:' + _td_options.primaryColor + '} #td-clock-' + _td_id + ' .td-clock:before { border-color: ' + _td_options.borderColor + '} #td-clock-' + _td_id + ' .td-select:after { box-shadow: 0 0 0 1px ' + _td_options.borderColor + ' } #td-clock-' + _td_id + ' .td-clock:before,#td-clock-' + _td_id + ' .td-select:after {background: ' + _td_options.backgroundColor + ';} #td-clock-' + _td_id + ' .td-lancette {border: 2px solid ' + _td_options.primaryColor + '; opacity:0.1}#td-clock-' + _td_id + ' .td-lancette div:after { background: ' + _td_options.primaryColor + ';} #td-clock-' + _td_id + ' .td-bulletpoint div:after { background:' + _td_options.primaryColor + '; opacity:0.1}</style>');
  49. var _td_container = $('#td-clock-' + _td_id),
  50. _td_overlay = _td_container.find('.td-overlay'),
  51. _td_c = _td_container.find('.td-clock');
  52. _td_c.find('svg').attr('style', "stroke:" + _td_options.borderColor);
  53. var _td_init_deg = -1,
  54. _td_event_deg = 0,
  55. _td_wheel_deg = 0,
  56. _td_h, _td_m, _td_define_deg = function() {
  57. var o = _td_c.find('.td-time span.on'),
  58. v = parseInt(o.attr('data-id'));
  59. if (o.index() == 0) deg = Math.round((v * 360 / 23));
  60. else deg = Math.round((v * 360 / 59));
  61. _td_init_deg = -1;
  62. _td_event_deg = deg;
  63. _td_wheel_deg = deg;
  64. },
  65. _td_rotation = function(deg) {
  66. var t = _td_c.find('.td-time span.on');
  67. var value = t.attr('data-id');
  68. if (!value) value = 0;
  69. var h = Math.round((deg * 23 / 360));
  70. var m = Math.round((deg * 59 / 360));
  71. if (t.index() == 0) {
  72. t.attr('data-id', _td_num(h));
  73. if (_td_options.meridians) {
  74. if (h >= 12 && h < 24) {
  75. _td_c.find('.td-icon-pm').addClass('td-on');
  76. _td_c.find('.td-icon-am').removeClass('td-on');
  77. } else {
  78. _td_c.find('.td-icon-am').addClass('td-on');
  79. _td_c.find('.td-icon-pm').removeClass('td-on');
  80. }
  81. if (h > 12) h = h - 12;
  82. if (h == 0) h = 12;
  83. }
  84. t.text(_td_num(h));
  85. } else {
  86. t.attr('data-id', _td_num(m)).text(_td_num(m));
  87. }
  88. _td_wheel_deg = deg;
  89. _td_c.find('.td-deg').css('transform', 'rotate(' + (deg) + 'deg)');
  90. if (t.index() == 0) {
  91. var c = Math.round((h * 360 / 12));
  92. _td_c.find('.td-lancette div:last').css('transform', 'rotate(' + (c) + 'deg)');
  93. } else {
  94. _td_c.find('.td-lancette div:first').css('transform', 'rotate(' + (deg) + 'deg)');
  95. }
  96. var _td_h = _td_c.find('.td-time span:first').attr('data-id'),
  97. _td_m = _td_c.find('.td-time span:last').attr('data-id');
  98. if (Math.round(_td_h) >= 12 && Math.round(_td_h) < 24) {
  99. var h = Math.round(_td_h) - 12,
  100. a = 'pm',
  101. A = 'PM';
  102. } else {
  103. var h = Math.round(_td_h),
  104. a = 'am',
  105. A = 'AM';
  106. }
  107. if (h == 0) h = 12;
  108. var str = _td_options.format.replace(/\b(H)\b/g, Math.round(_td_h)).replace(/\b(h)\b/g, Math.round(h)).replace(/\b(m)\b/g, Math.round(_td_m)).replace(/\b(HH)\b/g, _td_num(Math.round(_td_h))).replace(/\b(hh)\b/g, _td_num(Math.round(h))).replace(/\b(mm)\b/g, _td_num(Math.round(_td_m))).replace(/\b(a)\b/g, a).replace(/\b(A)\b/g, A);
  109. _td_input.val(str);
  110. };
  111. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  112. _td_mobile = true;
  113. }
  114. _td_c.find('.td-time span').on('click',
  115. function(e) {
  116. var o = $(this);
  117. _td_c.find('.td-time span').removeClass('on');
  118. o.addClass('on');
  119. var v = parseInt(o.attr('data-id'));
  120. if (o.index() == 0) deg = Math.round((v * 360 / 23));
  121. else deg = Math.round((v * 360 / 59));
  122. _td_init_deg = -1;
  123. _td_event_deg = deg;
  124. _td_wheel_deg = deg;
  125. _td_rotation(deg);
  126. });
  127. _td_c.find('.td-deg').on('touchstart mousedown',
  128. function(e) {
  129. _td_define_deg();
  130. e.preventDefault();
  131. clearInterval(_td_alert);
  132. _td_c.find('.td-deg').removeClass('td-n');
  133. _td_c.find('.td-select').removeClass('td-rubber');
  134. _td_input_on = true;
  135. var offset = _td_c.offset();
  136. var center = {
  137. y: offset.top + _td_c.height() / 2,
  138. x: offset.left + _td_c.width() / 2
  139. };
  140. var a, b, deg, tmp, rad2deg = 180 / Math.PI;
  141. _td_c.removeClass('td-rubber');
  142. $(window).on('touchmove mousemove',
  143. function(e) {
  144. if (_td_input_on == true) {
  145. if (_td_mobile) move = e.originalEvent.touches[0];
  146. else move = e;
  147. a = center.y - move.pageY;
  148. b = center.x - move.pageX;
  149. deg = Math.atan2(a, b) * rad2deg;
  150. if (deg < 0) deg = 360 + deg;
  151. if (_td_init_deg == -1) _td_init_deg = deg;
  152. tmp = Math.floor((deg - _td_init_deg) + _td_event_deg);
  153. if (tmp < 0) tmp = 360 + tmp;
  154. else if (tmp > 360) tmp = tmp % 360;
  155. _td_rotation(tmp);
  156. }
  157. });
  158. });
  159. if (_td_options.mousewheel) {
  160. _td_c.on('mousewheel',
  161. function(e) {
  162. e.preventDefault();
  163. _td_c.find('.td-deg').removeClass('td-n');
  164. if (e.originalEvent.wheelDelta > 0) {
  165. if (_td_wheel_deg <= 360) {
  166. if (e.originalEvent.wheelDelta <= 120) _td_wheel_deg++
  167. else if (e.originalEvent.wheelDelta > 120) _td_wheel_deg = _td_wheel_deg + 20;
  168. if (_td_wheel_deg > 360) _td_wheel_deg = 0;
  169. }
  170. } else {
  171. if (_td_wheel_deg >= 0) {
  172. if (e.originalEvent.wheelDelta >= -120) _td_wheel_deg--
  173. else if (e.originalEvent.wheelDelta < -120) _td_wheel_deg = _td_wheel_deg - 20;
  174. if (_td_wheel_deg < 0) _td_wheel_deg = 360;
  175. }
  176. }
  177. _td_init_deg = -1;
  178. _td_event_deg = _td_wheel_deg;
  179. _td_rotation(_td_wheel_deg);
  180. });
  181. }
  182. $(document).on('touchend mouseup',
  183. function() {
  184. if (_td_input_on) {
  185. _td_input_on = false;
  186. if (_td_options.autoswitch) {
  187. _td_c.find('.td-time span').toggleClass('on');
  188. _td_c.find('.td-time span.on').click();
  189. }
  190. _td_c.find('.td-deg').addClass('td-n');
  191. _td_c.find('.td-select').addClass('td-rubber');
  192. }
  193. });
  194. var _td_init = function(value) {
  195. var d = new Date(),
  196. _td_span_h = _td_c.find('.td-time span:first'),
  197. _td_span_m = _td_c.find('.td-time span:last'),
  198. h,
  199. m;
  200. if (_td_input.val().length && !_td_options.setCurrentTime) {
  201. var reg = /\d+/g,
  202. am;
  203. var st = _td_input.val().split(':');
  204. if (st) {
  205. h = st[0].match(reg);
  206. m = st[1].match(reg);
  207. if (_td_input.val().indexOf("am") != -1 || _td_input.val().indexOf("AM") != -1 || _td_input.val().indexOf("pm") != -1 || _td_input.val().indexOf("PM") != -1) {
  208. if (_td_input.val().indexOf("am") != -1 || _td_input.val().indexOf("AM") != -1) am = true;
  209. else am = false;
  210. if (!am) {
  211. if (h < 13) {
  212. h = parseInt(h) + 12;
  213. if (h == 24) h = 0;
  214. }
  215. } else if (h == 12) h = 0;
  216. } else if (h == 24) h = 0;
  217. } else {
  218. if (!parseInt(_td_span_h.text())) h = _td_num(d.getHours());
  219. else h = _td_num(_td_span_h.text());
  220. if (!parseInt(_td_span_m.text())) m = _td_num(d.getMinutes());
  221. else m = _td_num(_td_span_m.text());
  222. }
  223. } else {
  224. if (!parseInt(_td_span_h.text())) h = _td_num(d.getHours());
  225. else h = _td_num(_td_span_h.text());
  226. if (!parseInt(_td_span_m.text())) m = _td_num(d.getMinutes());
  227. else m = _td_num(_td_span_m.text());
  228. }
  229. _td_span_h.attr('data-id', h).text(h);
  230. _td_span_m.attr('data-id', m).text(m);
  231. _td_event_deg = Math.round((h * 360 / 23));
  232. _td_c.find('.td-lancette div:first').css('transform', 'rotate(' + Math.round((m * 360 / 59)) + 'deg)');
  233. _td_rotation(_td_event_deg);
  234. _td_wheel_deg = _td_event_deg;
  235. _td_init_deg = -1;
  236. }
  237. _td_init();
  238. _td_input.focus(function(e) {
  239. e.preventDefault();
  240. _td_input.blur();
  241. });
  242. _td_input.click(function(e) {
  243. clearInterval(_td_event);
  244. _td_container.removeClass('td-fadeout');
  245. _td_container.addClass('td-show').addClass('td-' + _td_options.init_animation);
  246. _td_c.css({
  247. 'top': (_td_input.offset().top + (_td_input.outerHeight() - 8)),
  248. 'left': (_td_input.offset().left + (_td_input.outerWidth() / 2)) - (_td_c.outerWidth() / 2)
  249. });
  250. if (_td_c.hasClass('td-init')) {
  251. _td_alert = setInterval(function() {
  252. _td_c.find('.td-select').addClass('td-alert');
  253. setTimeout(function() {
  254. _td_c.find('.td-select').removeClass('td-alert');
  255. },
  256. 1000);
  257. },
  258. 2000);
  259. _td_c.removeClass('td-init');
  260. }
  261. e.stopPropagation();
  262. });
  263. _td_overlay.click(function(event) {
  264. _td_container.addClass('td-fadeout').removeClass('td-' + _td_options.init_animation);
  265. _td_event = setTimeout(function() {
  266. _td_container.removeClass('td-show')
  267. },
  268. 300);
  269. //setMoveTime(_td_c.find('.td-time span:first').text() + ':' + _td_c.find('.td-time span:last').text(), _td_input);
  270. event.stopPropagation();
  271. });
  272. $(window).on('resize',
  273. function() {
  274. _td_define_deg();
  275. _td_c.css({
  276. 'top': (_td_input.offset().top + (_td_input.outerHeight() - 8)),
  277. 'left': (_td_input.offset().left + (_td_input.outerWidth() / 2)) - (_td_c.outerWidth() / 2)
  278. });
  279. });
  280. });
  281. };
  282. } (jQuery));